20130516-Grails In Action-4、モデルを作動させる(02小節)
18166 ワード
前のセクション基本的な足場の機能と地方化のいくつかの内容を理解して、この節は足場のCSSレイアウトを調整します
プログラムの外観を変更したいだけなら、/web-app/css/mainを直接調整することができます.css.ここでは/grails-app/views/layouts/mainを調整します.gspファイル、新しいレイアウトを生成
変更/grails-app/views/layouts/main.gsp
このテンプレートはカスタムhubbubを使用しています.cssスタイルファイル
Web-app/css/hubbubを追加します.cssスタイルファイル
hubbub.cssには、Web-app/images/に画像をコピーする画像が導入されています.
システムを実行すると、外観がすっかり変わっています.他の足場で発生した機能は依然として使用できますが、インタフェースが変化しているので、動的に生成された足場ページが使いやすいことを考慮する必要がありますか?ここではいくつかの欠陥を示します.ダイナミック足場では複雑なドメイン間形式 を実現することは比較的困難である.ダイナミック足場ajaxサポート なし動的足場は限られたインタラクティブサポートのみであり、ビジネス間の操作には の人為的な処理が必要である.
以上のいくつかの問題を通じて、システムの最終的なオペレータは受け入れにくいので、やはり人為的に操作インタフェースをカスタマイズする必要があります.幸いなことに、システムは静的足場のサポートを提供しています.私たちは静的足場の基礎の上で自分の顧客化インタフェースに修正すれば、上記の3つの欠陥を解決することができます.
プログラムの外観を変更したいだけなら、/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/に画像をコピーする画像が導入されています.
システムを実行すると、外観がすっかり変わっています.他の足場で発生した機能は依然として使用できますが、インタフェースが変化しているので、動的に生成された足場ページが使いやすいことを考慮する必要がありますか?ここではいくつかの欠陥を示します.
以上のいくつかの問題を通じて、システムの最終的なオペレータは受け入れにくいので、やはり人為的に操作インタフェースをカスタマイズする必要があります.幸いなことに、システムは静的足場のサポートを提供しています.私たちは静的足場の基礎の上で自分の顧客化インタフェースに修正すれば、上記の3つの欠陥を解決することができます.