子在川上曰

            逝者如斯夫不舍晝夜
          隨筆 - 71, 文章 - 0, 評論 - 915, 引用 - 0
          數據加載中……

          個性化頁面布局的設計思考與Rails初步實現

          象博客,以及google的iGoogle,都可以個性化頁面布局---對頁面模塊增刪改,以及調整位置。這種效果是如何實現的呢?在我的項目中也面臨到 這個需求。我最初的解決方法是創建幾個典型的rhtml布局組合。但這遠遠不夠,而且不靈活,在形式上也不統一。于是我再次修改了設計,之后似乎可以基本 解決這個問題了。希望感興趣的朋友一起來討論。

          這個設計其實很簡單,就是“引擎+配置“--主體頁面只定義一個rthml,可以把它看做頁面引擎,然后用一個配置文件指定了頁面所應具有的模塊和數據。 頁面模塊就象一個個裝有數據的盒子,通過“頁面引擎 + 配置文件”把這些盒子組合起來,象搭積木一樣。頁面引擎是各用戶共用的,配置文件是各用戶獨有的,這樣一裝配起來,就形成了用戶的個性化頁面。

          剩下的重點就是怎么定義配置文件。首先是要劃清配置文件的責任界線----它只負責定義盒子里的數據,還有盒子的嵌套關系,而大小和位置等布局方面則全部交給CSS去負責。

          上面是初步想法,下面看看具體實現,代碼僅供參考

          以下是某個用戶的配置文件(我沒用XML,而是用YAML)。board_1是指ID=1這個欄目所用的配置定義。topContent是一個
          <div>的id值,我把每個欄目的頁面分成topContent頂、sideContent邊(左或右由CSS決定)、primaryContent 主要、bottomContent底。topic是指添加一個模塊(盒子),顯示一個主題內容。和topic類似是還有顯示圖像的image、顯示主題列 表的topics、顯示分類列表的categories等等等等。它們各有不同的屬性值,比如topic模塊,它需要定指它的主題id,以及它所用的 view(topics/_show_hot.rhtml? or? topics/_show.rhtml等等)。

          (雖然這個配置文件抽象得還不夠,但這樣子已經可以解決我的需要了,那
          暫時這樣先了。)

          template.yml
          ?
          1. board_2:??
          2. ??
          3. board_1:??
          4. -?topContent:??
          5. ??-?topic:??
          6. ??????topic_id:?7??
          7. ??????view:?topics/show_hot??
          8. -?sideContent:??
          9. ??-?image:??
          10. ??????url:?/images/news.jpg??
          11. ??-?categories:??
          12. ??????board:?5??
          13. ??????view:?tree??
          14. ??-?topics:??
          15. ??????board:?5??
          16. ??????per_page:?4??
          17. ??????view:?index_simple??
          18. ??-?topics:??
          19. ??????board:?6??
          20. -?primaryContent:??
          21. ??-?topics:??
          22. ??????board:?4??
          23. ??????view:?index??
          24. ??-?topic:??
          25. ??????topic_id:?7??
          26. ??????view:?util/box??
          27. ??
          28. board_3:??

          然后在controller里把配置文件讀入,再轉化成模型類。我把各個界面模塊看做一個個盒子Box
          這是它的頂級Box
          ruby 代碼
          ?
          1. class?Box??
          2. ??attr_accessor?:html_id,?:view,?:boxes??
          3. ??def?initialize
          4. ????@boxes=[]??
          5. ??end??
          6. end??

          這是topic模塊的
          ruby 代碼
          ?
          1. class?TopicBox?<?Box??
          2. ??attr_accessor?:topic_id??
          3. end??

          這是Image模塊的
          ruby 代碼
          ?
          1. class?ImageBox?<?Box??
          2. ??attr_accessor?:url??
          3. end????

          .....等 等, 其他的Box子類大同小異

          然后在一個controller里把這些配置信息轉成Box模型類
          ruby 代碼
          ?
          1. templates?=? YAML::load(File.read("public/uploads/#{user_id}/config/template.yml"))
          2. template?=?templates.find{|o|?o[0]=="board_#{@board.id}"?}??
          3. args?=?template[1]??
          4. ??
          5. @boxes?=?[]??
          6. args.each?do?|arg1_hash|??
          7. ??arg1_hash.each?do?|key1,?value1|??
          8. ????board_box?=?BoardBox.new??
          9. ????board_box.html_id?=?key1??
          10. ????@boxes?<<?board_box??
          11. ????value1.each?do?|arg2_hash|??
          12. ??????arg2_hash.each?do?|key2,?value2|??
          13. ????????case?key2??
          14. ????????when?'topics'??
          15. ??????????box?=?TopicsBox.new??
          16. ??????????box.board_id?=?value2['board']??
          17. ??????????box.per_page?=?value2['per_page']||2??
          18. ??????????box.view?=?value2['view']||'index_simple'??
          19. ??????????board_box.boxes?<<?box???
          20. ????????when?'categories'??
          21. ??????????box?=?CategoriesBox.new??
          22. ??????????box.board_id?=?value2['board']??
          23. ??????????box.view?=?value2['view']||'list'??
          24. ??????????board_box.boxes?<<?box???
          25. ????????when?'image'??
          26. ??????????box?=?ImageBox.new??
          27. ??????????box.url?=?value2['url']??
          28. ??????????board_box.boxes?<<?box???
          29. ????????when?'topic'??
          30. ??????????box?=?TopicBox.new??
          31. ??????????box.topic_id?=?value2['topic_id']??
          32. ??????????box.view?=?value2['view']||'util/box'??
          33. ??????????board_box.boxes?<<?box???
          34. ????????end??
          35. ??????end??
          36. ????end??
          37. ??end??
          38. end?

          最后是它頁面引擎(邏輯代碼和頁面代碼混在一起,比較丑陋)
          ruby 代碼
          ?
          1. <%?@boxes.each?do?|box1|?%>??
          2. "<%=box1.html_id%>">??/span>
          3. ??<%?box1.boxes.each?do?|box2|??
          4. ???????p1?box2.class.to_s??
          5. ??
          6. ??????case?box2.class.to_s??
          7. ??????when?'TopicsBox'??
          8. ????????board_id?=?box2.board_id??
          9. ????????if?board_id??
          10. ??????????board?=?Board.find(board_id)??
          11. ??????????topics?=?Topic.by_board_id(board_id,?:per_page?=>?box2.per_page)???
          12. ??????????%>??
          13. ??????????<%=?render(:partial?=>?"topics/#{box2.view}",?:locals?=>?{:title?=>board.title,?:topics?=>?topics?})%>??
          14. ????????<%end??
          15. ??????when?'CategoriesBox'??
          16. ????????board_id?=?box2.board_id??
          17. ????????if?board_id??
          18. ??????????board?=?Board.find(board_id)??
          19. ??????????categories?=?board.categories??
          20. ??????????%>??
          21. ??????????<%=?render?:partial?=>?"categories/#{box2.view}",?:locals?=>?{:board?=>board,?:categories?=>?categories?}?%>??
          22. ????????<%end%>??
          23. ??????<%when?'ImageBox'%>??
          24. ????????<%=?box_tag?:header=>false%>??
          25. ??????????<%=image_tag(box2.url,?:border?=>?0)?%>??
          26. ????????<%=?end_box_tag?%>??
          27. ??????<%when?'TopicBox'??
          28. ????????topic?=?Topic.find(box2.topic_id)?%>??
          29. ????????<%=render(:partial?=>?"#{box2.view}",?:locals?=>?{:title?=>topic.title,?:content?=>?topic.content,?:topic?=>?topic?})%>??
          30. ??????<%end??
          31. ??end%>?
          ?

          這樣,以后想在頁面上增加刪除什么模塊,修改配置文件就行了。當然給用戶用,還必須得用AJAX來寫個GUI界面,總不能讓用戶手工去改配置文件吧。

          posted on 2007-10-11 00:00 陳剛 閱讀(3582) 評論(0)  編輯  收藏 所屬分類: Rails&Ruby

          主站蜘蛛池模板: 兴隆县| 宁安市| 黄陵县| 类乌齐县| 东明县| 新兴县| 安阳县| 淮南市| 阳高县| 惠东县| 北流市| 汾西县| 雷州市| 忻州市| 彭阳县| 新河县| 郯城县| 金沙县| 铜川市| 习水县| 高陵县| 攀枝花市| 同仁县| 北安市| 视频| 巴青县| 太仓市| 乌恰县| 民乐县| 林周县| 永新县| 分宜县| 景宁| 满洲里市| 江孜县| 石河子市| 蓬莱市| 彩票| 忻州市| 集贤县| 塔城市|