JAKARTA programming: Using Tiles, the first part
Author: Chuck Cavaness Chen Zhengyong (zhengyongchen@21cn.com) translation
This article is the first part of the series of articles extracted from "Programming Jakarta Struts", which tells how to use Tiles and make a certain understanding of the template.
So far, we have not talked about how to organize the contents and layout of the JSP page in the Struts application. In many ways, this free Struts theme. Many excellent books provide a good strategy for how to organize web content and page layout.
In the StoreFront application, we use two ways to organize the web page. The first way, that is, JSP-based ways that are usually employed. This may be the most familiar way of web designers. The JSP page contains logic and HTML layout tags, there is no separation between the two, which is usually applied to small, unsurcoming web applications.
The second method uses JSP's INCLUDE instructions. Large web application developers, or when developers realize how repeatable work will be used in the first way, usually. If you spend a lot of time to maintain a web application, you will know how painful update the site's feelings. Use JSP's include instructions to allow more multiplexing, which reduces overall development and maintenance costs.
The third way introduced in this chapter provides you with a better way to reduce redundant code in the web application. At the same time, you can better separate the content and layout than the first two methods.
Understanding templates
Traditional GUI kits, such as Visual Works SmallTalk and Java Swing, provide several layout managers, which indicate how content is displayed in the frame or window. Traditional web sites may have a lot of or large or small during its life cycle. Using the Layout Manager helps the physical area of the page in the application, so when they change, the other parts of the application are small. Unfortunately, JSP technology itself does not provide a layout or layout manager. This is why the modular way is invented by a template. Templates are not a new concept - it has been in other forms for many years.
In order to understand how the template can simplify the layout of the Web site in the actual application. Let's make a comparison with the way using JSP Include. The index.jsp page of the StoreFront application is shown in Example 14-1.
Example 14-1: Storefront application's index.jsp page
<% @ Taglib URI = "/ Web-INF / STRUTS-HTML.TLD" prefix = "html"%>
<% @ Taglib URI = "/ Web-INF / STRUTS-LOGIC.TLD" prefix = "logic"%>
<% @ Taglib Uri = "/ Web-INF / STRUTS-Bean.tld" prefix = "bean"%>
<bean: message key = "global.title" /> </ title></p>
<p><HTML: BASE /></p>
<p><script language = javascript src = "incrude / scripts.js"> </ script></p>
<p><link rel = "stylesheet" href = "stylesheets / format_win_nav_main.css" type = "text / css"> </ head></p>
<p><body TopMargin = "0" leftmargin = "0" bgcolor = "# ffffff"></p>
<p><! - Header Information -></p>
<p><% @ include file = "incrude / head.inc"%></p>
<p><! - menu bar -></p>
<p><% @ include file = "incrude / menubar.inc"%></p>
<p><! --- incrude the special offer -></p>
<p><% @ include file = "incrude / mainoffer.inc"%></p>
<p><! - featured items header rot -></p>
<p><table width = "645" cellpadding = "0" cellspacing = "0" border = "0"></p>
<p><tr></p>
<p><td width = "21"></p>
<p><html: img height = "1" alt = "" Page = "/ images / spacer.gif" width = "1" border = "0" /></p>
<p></ td></p>
<p><TD Width = "534"></p>
<p><html: img Page = "/ images / week_picks.gif" altkey = "label.featureproducts" /></p>
<p></ td></p>
<p><td width = "1" bgcolor = "# 9e9eff"></p>
<p><html: img height = "1" alt = "" Page = "/ images / spacer.gif" width = "1" border = "0" /></p>
<p></ td></p>
<p><td width = "1" bgcolor = "# 9e9eff"></p>
<p><html: img height = "1" alt = "" Page = "/ images / spacer.gif" width = "1" border = "0" /></p>
<p></ td></p>
<p><td width = "90" bgcolor = "# 9e9eff" align = "right"></p>
<p><html: img height = "1" alt = "" Page = "/ images / spacer.gif" width = "90" border = "0" /></p>
<p></ td></p>
<p></ TR> <TR></p>
<p><TD></p>
<p><html: img height = "1" alt = "" Page = "/ images / spacer.gif" width = "21" border = "0" /></p>
<p></ td></p>
<p><TD colspan = "4" bgcolor = "# 9e9eff"></p>
<p><html: img height = "1" alt = "" Page = "/ images / spacer.gif" width = "1" border = "0" /></p>
<p></ td></p>
<p></ TR></p>
<p></ TABLE></p>
<p><html: img height = "10" alt = "" Page = "/ images / spacer.gif" width = "1" border = "0" /> <br></p>
<p><! - include the featured items -></p>
<p><% @ include file = "incrude / featuredItems.inc"%></p>
<p><! --- include the copyright stat statement -></p>
<p><% @ include file = "incrude / copyright.inc"%></p>
<p></ body></p>
<p></ html: html></p>
<p>Although the main page uses JSP's Include instruction, it is still doped in the page layout. For example, the page explicitly indicates that the head.inc file, the menubar.inc file and the mainoffer.inc file are included in turn, followed by copyright.inc on the bottom of the page. If we want each page to use this layout, we need to add the same statement in the same order. If the user wants the menu on the left instead of the top, each page has to be modified.</p>
<p>The StoreFront application uses JSP Include instead of a direct JSP mode. Although the Include mechanism takes a correct step as it does reduce redundancy (Imagine if we contain copyright information on each page), it still does not have a template-based way.</p>
<p>Dynamic content and static content comparison</p>
<p>In JSP, you can include two contents: static and dynamic. The include directive is as follows:</p>
<p><% include file = "incrude / copyright.inc"%></p>
<p>It contains the target page at compile, so it cannot contain the runtime content with the include instruction. The JSP Include command uses resources as a static object, and the resource context is included in the page one by word.</p>
<p>Comparison, Include behavior:</p>
<p><jsp: include page = "incrude / copyright.inc" /></p>
<p>Use resources as dynamic objects. The request is sent to the resource and then contains the result. The template uses a dynamic mechanism so that the run expression can be evaluated and included in the page.</p>
<p>What is a template?</p>
<p>The template is a JSP page with a JSP custom label library description page layout. Templates are used to define the page style of the application, and not specify content. The runtime content is inserted into the template page. One or more pages can use the same template.</p>
<p>Tip: The purpose of using the template is to give the application to gain a consistent sense of view without having to give each page hard coding. Most pages use the same template; but some pages have different appearances, so the application requires multiple templates. Example 14-2 describes the template of the StoreFront application.</p>
<p>Example 14-2: Basic templates for StoreFront applications</p>
<p><% @ Taglib URI = "/ Web-INF / STRUTS-HTML.TLD" prefix = "html"%></p>
<p><% @ Taglib Uri = "/ Web-INF / STRUTS-Bean.tld" prefix = "bean"%></p>
<p><% @ Taglib Uri = "/ Web-INF / TILES.TLD" prefix = "tiles"%></p>
<p><html: html></p>
<p><HEAD></p>
<p><title> <bean: message key = "global.title" /> </ title></p>
<p><HTML: BASE /></p>
<p></ hEAD></p>
<p><body TopMargin = "0" leftmargin = "0" bgcolor = "# ffffff"></p>
<p><! - Header Page Information -></p>
<p><tiles: insert attribute = "header" /></p>
<p><! - menu bar -></p>
<p><tiles: insert attribute = "menubar" /></p>
<p><! - main body information -></p>
<p><Tiles: Insert Attribute = "Body-Content" /></p>
<p><! - CopyRight Information -></p>
<p><Tiles: Insert Attribute = "Copyright" /></p>
<p></ body></p>
<p></ html: html></p>
<p>The template file shown in Example 14-2 did not introduce a lot of new concepts. What you should pay attention to is that we use the Struts custom label library. In fact, we use Tiles tag libraries and HTML and bean libraries, which is not surprising; Tiles tag libraries are like other tag libraries, and the back section of this chapter will explore TILES tag libraries in detail.</p>
<p>The rest of the page is a mixture of HTML layout labels. You should notice that there is no content that is only an Insert tag, and the content will be inserted here during runtime. You should be familiar with the Struts tags listed here, so we are not prepared to discuss them. The INSERT tag plays the same role as the JSP Include directive. Basically it is a variable in some place, for example, called header, its attribute value will pass to the INSERT tag, and the resulting content will be inserted into this place. MenuBar, Body-Content and Copyright are also inserted. We will soon explain how to "true" content is replaced by these properties.</p>
<p>It is noted that this layout is very similar to the layout shown in Example 14-1. The only difference is that it is not an explicit containing Mainoffer and FeaturedItem, but the template file contains a Body-Content section as explicitly contained in Example 14-1. This allows us to reuse the template in all such general forms. Once we determine how to provide content of a specific page, we can reuse the template. This file can control the layout of multiple pages. If we want to change the layout of the site, we only need to modify this file - this is the real force based on the template scheme. The last thing is puzzled is how the header, menubar, body-content, and copyright portions combine to form an output. The key point is to remember that the JSP page shown in Example 14-2 is just a template, and you still need a JSP page for specific content. For example, if we use the index.jsp in Example 14-1 with the Templates shown in Example 14-2, as shown in Example 14-3.</p>
<p>Example 14-3: INDEX.JSP page with a Template StoreFront application</p>
<p><% @ Taglib Uri = "/ Web-INF / TILES.TLD" prefix = "tiles"%></p>
<p><Tiles: Insert Page = "/ Layouts / StorefrontdefaultLayout.jsp" Flush = "True"></p>
<p><tiles: put name = "header" value = "/ common / header.jsp" /></p>
<p><tiles: put name = "menubar" value = "/ circar / menubar.jsp" /></p>
<p><tiles: put name = "body-content" value = "/ index-body.jsp" /></p>
<p><tiles: put name = "Copyright" value = "/ common / copyright.jsp" /></p>
<p></ tiles: insert></p>
<p>First of all, please note that the Tiles tag library is included at the top in Example 14-3. Each page (or tile) that needs to be used with Tiles tag is needed to include this line:</p>
<p><% @ Taglib Uri = "/ Web-INF / TILES.TLD" prefix = "tiles"%></p>
<p>Example 14-3 Two tags using the Tiles tag library: INSERT and PUT (this chapter will discuss all labels and related properties). You have seen an Insert tag in Example 14-2, but in Example 14-3, it is slightly different. Two properties, Page and Flush are provided to the INSERT tag. Page Property Inform Tag This page The page uses a specific template (or the layout in the Tiles world - the layout will be talked out in the following sections). We named the templates in Example 14-2 as StorefrontdefaultLayout.jsp. The Flush property tells the controller to populate the page output stream before inserting the result page.</p>
<p>Example 14-3 The PUT tag answered the previously mentioned issues: How to give the template for the content of the specific page? As you can see, this example has the Name and Value properties in this example. If you compare different Name attribute values, you will find that they are consistent with the template files in Example 14-2. When the index.jsp.jsp of Example 14-3 is executed, the template file is processed, from the PUT tag dynamic incoming header.jsp, menubar.jsp, Index-tiles.jsp, and copyright.jsp files:</p>
<p><Tiles: Insert Page = "/ Layouts / StorefrontdefaultLayout.jsp" Flush = "true"> <tiles: Put name = "header" value = "/ common / header.jsp" /></p>
<p><tiles: put name = "menubar" value = "/ circar / menubar.jsp" /></p>
<p><tiles: put name = "body-content" value = "/ index-body.jsp" /></p>
<p><tiles: put name = "Copyright" value = "/ common / copyright.jsp" /></p>
<p></ tiles: insert></p>
<p>During the execution, the VAT of the PUT tag is turned into the template file and is processed. The result output is displayed to the customer.</p>
<p>Before the discussion of the end template, there is another page, which also uses the same template in Example 14-2, but it provides different Body-Content. Example 14-4 shows the itemdetail.jsp page.</p>
<p>Example 14-4: StoreFront application ItemDetail.jsp page</p>
<p><% @ Taglib Uri = "/ Web-INF / TILES.TLD" prefix = "tiles"%></p>
<p><Tiles: Insert Page = "../ Layouts / StoreFrontdefaultLayout.jsp" Flush = "True"></p>
<p><tiles: put name = "Header" value = "../ Common / header.jsp" /></p>
<p><tiles: put name = "menubar" value = "../ Common / menubar.jsp" /></p>
<p><tiles: put name = "body-content" value = "../ Catalog / itemdetail-body.jsp" /></p>
<p><tiles: put name = "Copyright" Value = "../ Common / Copyright.jsp" /></p>
<p></ tiles: insert></p>
<p>The only difference between the ItemDetail.jsp page in Example 14-3 and the itemDetail.jsp page in Example 14-4 is different from the content provided by the body-content property.</p>
<p>Tip: If you haven't realized the value of using the template, please take note of the index.jsp and itemdetail.jsp pages in Examples 14-3 and Examples 14-4. They all reference the StorefrontDefaultLayout.jsp file, the only role is to display content in a presected format. If we want to change the layout of the website, we only need to modify the StoreForNTdeFaultLayout.jsp file.</p>
<p>In the next part, we will learn how to install and configure Tiles.</p>
<p>Chuck Cavage graduated from Geogia Tech. For computer engineering and scientific degrees, he developed Java-based enterprise systems in medical, banks and b2b departments.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-27527.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="27527" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.031</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'U_2BqaX0Rkj6Dpuki70K2j_2FTZZ3jWe5adrRZ8eo3qIhjQLMRsc9rEn9fcFLYvDPMnD2MT5WwQMYBy1zpW3OeK13w_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
