Ch04"
(Created page with "= JSP is a good partner = <blockquote> Grown from the same trees, Why boil us so hot? -- Zhi Cao, Chinese poet </blockquote> In this chapter, we will start to rebuild [http://to...") |
|||
| Line 37: | Line 37: | ||
<source lang="css"> | <source lang="css"> | ||
| − | body { | + | body { |
| − | + | font-family: "Metal Mania", "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| − | + | font-size: 32px; | |
| − | + | font-weight: 200; | |
| − | + | padding: 0; | |
| − | + | margin: 0; | |
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | # | + | #header { |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
position: fixed; | position: fixed; | ||
| − | + | top: 0; | |
| − | width: | + | right: 0; |
| − | + | width: 100%; | |
| − | + | height: 60px; | |
| − | + | background: #000000; | |
| − | + | color: #999999; | |
| − | + | line-height: 55px; | |
| + | text-align: center; | ||
| + | z-index: 9999; | ||
} | } | ||
| − | + | ||
| − | + | #container { | |
| − | + | display: inline-block; | |
| − | + | clear: both; | |
| − | + | position: relative; | |
| − | + | margin-top: 75px; | |
| + | width: 100%; | ||
} | } | ||
| + | .sidebar { | ||
| + | position: fixed; | ||
| + | float: left; | ||
| + | width: 240px; | ||
| + | margin-left: 5px; | ||
| + | height: 500px; | ||
| + | border: none; | ||
| + | padding: 10px 0 0 10px; | ||
| + | background: #00a3a7; | ||
| + | } | ||
| + | .content { | ||
| + | margin-left: 270px; | ||
| + | padding: 10px 10px; | ||
| + | background: #0066cc; | ||
| + | overflow: auto; | ||
| + | min-height: 700px; | ||
| + | } | ||
| − | #footer { | + | #footer { |
| − | + | width: 100%; | |
| − | + | height: 50px; | |
| − | + | background: #1f3134; | |
| − | + | margin-top: 15px; | |
| − | + | line-height: 55px; | |
| − | + | text-align: center; | |
| − | + | color: #708286; | |
| − | } | + | } |
</source> | </source> | ||
Latest revision as of 07:58, 11 March 2013
JSP is a good partner
Grown from the same trees, Why boil us so hot? -- Zhi Cao, Chinese poet
In this chapter, we will start to rebuild ToDoZK with JSP and ZK.
Shake Spear : Wait! Wait a moment! You have not explained the reason of using JSP, I can not accept the result!
Mummy Pythian : Totally true, I agree. We already used the powerful ZK, why go back to use out of date JSP?
OK, let's review the reason why we must use JSP, but we must talk about HTML first......
In [http:// chapter.3], we discuss the issues when using ZK. We must emphasize again: "These issues are trade-off because ZK want to simply the development of RIA." If we can combine the advantage of HTML (fast rendering speed, web artist design easily) and the advantage of ZK (integrate client and server, programming coding productively), everything will be wonderful.
For example, we can write the HTML quickly for layout design:
<body>
<div id="header">
Header
</div>
<div id="container">
<div class="sidebar">
Menu
</div>
<div id="content" class="content">
Content
</div>
</div>
<div id="footer">
Footer
</div>
</body>
and then add some css like:
body {
font-family: "Metal Mania", "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 200;
padding: 0;
margin: 0;
}
#header {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 60px;
background: #000000;
color: #999999;
line-height: 55px;
text-align: center;
z-index: 9999;
}
#container {
display: inline-block;
clear: both;
position: relative;
margin-top: 75px;
width: 100%;
}
.sidebar {
position: fixed;
float: left;
width: 240px;
margin-left: 5px;
height: 500px;
border: none;
padding: 10px 0 0 10px;
background: #00a3a7;
}
.content {
margin-left: 270px;
padding: 10px 10px;
background: #0066cc;
overflow: auto;
min-height: 700px;
}
#footer {
width: 100%;
height: 50px;
background: #1f3134;
margin-top: 15px;
line-height: 55px;
text-align: center;
color: #708286;
}
The fundamental layout draft which complied with ToDoZK spec is finished!
Conqueror Clipper: Pure HTML and CSS? It's easy for me. Piece of cake.
Mummy Pythian: hmmm... the fluid or fixed layout is a big trouble if we implement by ZK. Maybe we still need a lot of CSS at least?
Conqueror Clipper: Yeah, maybe. And I am not sure I can write a readable, maintainable CSS code......
Hence, it's a very clever choice design your website layout with HTML. Web artist won't learn again, the experience and achievement in the past can be used now. There are also a lot of layout template resource on internet, we can save mush time of reinvent the wheels. However use HTML can integrate with ZK (only if you use evil <iframe> or age-old <frame>), so we need JSP.
ZK and JSP are all run on servlet container, such that the relation of ZK and JSP is not mutually exclusive. They work independently, so we can use them in the same time with no risk. Relative to modern web technology, JSP is very primitive, but is powerful enough to process HTML.
We transform the above layout HTML file to JSP file (host page), then use <jsp:include> to embedded ZUL file (ZK block) into HTML:
<body>
<div id="header">
<jsp:include page="header.jsp" />
</div>
<div id="container">
<div class="sidebar">
<jsp:include page="sidebar.zul" />
</div>
<div id="content" class="content"></div>
</div>
<div id="footer">
<jsp:include page="footer.html" />
</div>
</body>
Of course you don't need include ZUL at all. Like footer, all of it's content is static so we assign a .html file. Although there is a RIA area UserStatus in header, but follow the same rule: use a host page header.jsp to build layout then include ZK block (userStatus.zul) to build UserStatus. The reason of why content is empty and nothing happen will discuss later.
As a result, we solve the problems described in [http:// chapter.3] and furthermore programmer can focus on develop the function of ZUL, web artist won't waiting programmer complete his/her task, start to adjust the layout anytime.
To System Architect
There is another extended benefit when you use JSP + ZK. You can use template like Tiles or Sitemesh. But these content is out of our scrope, so we will not discuss anymore.
Mummy Pythian: Damn, how fast you finish the ToDoZK prototype? I write ZK to implement layout so slowly, make me look like a fool...
Conqueror Clipper: (Already finish his work and drink coffee leisurely and carefree)
Shake Spear: Hmmm... the workflow is smoother, Mummy and Conqueror can work at the same time. And the most important point is... all problems is solved! What a perfect architecture JSP + ZK!
Well, JSP + ZK really solve many question, but there is something we must notice and work on them.
Shake Spear: No... no way... How could you tell us so late!
Don't worry, not serious issue. Take a look relaxative.
In pure ZK's point of view, there are some questions in JSP + ZK architecture. First, ZK solved most of browser difference issues. No matter what browser the end user use, Chrome, Firefox, Opera, Safari, even IE, layout components like Borderlayout and Columnlayout will have the same appearance. If you build layout with HTML and CSS, you must overcome the cross browser issue on your hand.
The other question is in pure ZK environment all ZK component is in the same ZUL file -- means they are in the same Desktop scope. So you can handle component easily and communication between components will be fine. Under the JSP + ZK architecture, every ZK block is independent (different HTTP request, different Desktop), you can't access the component cross ZK blocks. This can't hinder our progress, we can use EventQueue and other skills to solved it. Moreover, your code will be more loose coupling. Next, we will introduce these skills.
Mummy Pythian: I need take a break...
Let's do a mental test to transform the mood.
To System Architecture
You can forget everything in this chapter, besides this:"Only use ZK in RIA area, build main layout with JSP(HTML)" This rule can handle most of website's requirement.