上一節瞭解了基本腳手架的功能以及地方化的一些內容,這一節調整腳手架的CSS佈局
如果只是想改變程序的外觀,可以直接調整/web-app/css/main.css。這裏我們調整/grails-app/views/layouts/main.gsp文件,生成一個新的佈局
修改/grails-app/views/layouts/main.gsp
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hubbub » <g:layoutTitle default="Welcome" /></title> 5 <link rel="stylesheet" href="<g:createLinkTo dir='css' file='hubbub.css'/>" /> 6 <g:layoutHead /> 7 </head> 8 9 <body> 10 <div> 11 <div id="hd"> 12 <a href="<g:createLinkTo dir="/"/>"> 13 <img id="logo" src="${createLinkTo(dir: 'images',file: 'headerlogo.png')}" alt="hubbub logo" /> 14 </a> 15 </div> 16 <div id="bd"> 17 <g:layoutBody /> 18 </div> 19 <div id="ft"> 20 <div id="footerText">Hubbub - Social Networking on Grails</div> 21 </div> 22 </div> 23 </body> 24 </html>
這個模板使用了自定義的hubbub.css樣式文件
在web-app/css/新增hubbub.css樣式文件
1 body { 2 background: #dddddd; 3 padding-top: 4px; 4 font-family: "Helvetica"; 5 } 6 7 #hd { 8 padding: 1em; 9 background-image: url('../images/background.png'); 10 background-repeat: repeat-x; 11 } 12 13 #bd { 14 margin-top: 0.5em; 15 border: 1px solid lightgray; 16 background: white; 17 padding: 1em; 18 } 19 20 #ft { 21 background: #222222; 22 padding: 1em; 23 text-align: center; 24 color: white; 25 font-family: "Lucinda Grande",Arial; 26 font-size: 12pt; 27 } 28 29 #sidebar { 30 31 margin-top: 3em; 32 background-color: #d3e3f5; 33 padding: 1em; 34 border: 1px solid lightblue; 35 } 36 37 #sidebar h3 { 38 color: #343534; 39 font-weight: bold; 40 border-bottom: 1px solid lightslategray; 41 margin-top: 1em; 42 margin-bottom: 1em; 43 } 44 45 #newPost h3 { 46 font-size: x-large; 47 font-weight: bold; 48 border-bottom: 1px solid lightslategray; 49 margin-top: 1em; 50 margin-bottom: 1em; 51 } 52 53 #charLeft { 54 color: lightslategray; 55 float: right; 56 font-size: x-large; 57 border: none; 58 } 59 60 #postContent { 61 margin: 1em; 62 font-size: large; 63 width: 90%; 64 } 65 66 dt { 67 float: left; 68 } 69 70 dd { 71 text-align: right; 72 } 73 74 .postImage { 75 margin: 0.5em; 76 float: left; 77 } 78 79 .postEntry { 80 padding-top: 1em; 81 padding-bottom: 1em; 82 margin-left: 3em; 83 font-size: larger; 84 border-top: 1px solid lightslategray; 85 } 86 87 .postText a { 88 font-weight: bold; 89 text-decoration: none; 90 } 91 92 .postDate { 93 font-size: smaller; 94 } 95 96 .friendsThumbnails img { 97 margin: 4px; 98 } 99 100 .errors { 101 background: lightpink; 102 border: 1px dotted red; 103 color: black; 104 padding: 1em; 105 margin: 1em; 106 font-weight: bold; 107 }
hubbub.css中引入了一張圖片,將圖片拷貝到web-app/images/
運行系統,外觀已經面目全非了。其他腳手架產生的功能依然可以使用,但是界面已經發生變化了,所以,我們還是需要考慮考慮,動態生成的腳手架頁面好用嗎?這裏給出了幾個缺陷:
- 用動態腳手架比較難以實現複雜的跨域形式
- 動態腳手架沒有ajax支持
- 動態腳手架只有有限的交互支持,對於業務之間的操作還是需要人爲處理
通過以上幾點問題,系統最終操作人員難以接受,所以還是需要人爲定製操作界面,幸運的是,系統提供了靜態腳手架支持,我們再在靜態腳手架的基礎上修改成自己的客戶化界面即可解決上面這三點缺陷