Inside facelets - Part 3: Templating and re-use deep into the Facelets - Part III: Create a template and reuse by javafeng
This is the third part in the Facelets series, which is to create a JSF application with another view technology. Facelets is a powerful template system that allows you to define a JSF view with an HTML style template and can reduce the number of code suitable for integrating components in the view and do not require a web container. This article explains how you can create a template in your JSF project with Facelets.
For any view technique for success, it must have some functions that create templates and reuse, and must be easy to understand. For JSF, Facelets technology has perfectly solved this problem and continues the traditional, label-based UI style. This article consists of some ways to increase reuse and simplify maintenance JSF projects.
When people start to create a web page for the first time, they often find themselves to repeat the same content in multiple files. As a developer, when you start using the object-oriented thought to develop, this repeated labor will be very disclaimed. Do you simply maintained in a place not more beautiful?
Start
The first step in template and reuse is to create a template. A web page is usually consisting of some basic parts: Header, Body, and Footer. With Facelets, you can put these universal elements in a separate page and create a template with editable zone, as shown in the following template:
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
XMLns: ui = "http://java.sun.com/jsf/facelets">
Sample Template </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><h1> # {title} </ h1></p>
<p><div> <ui: INSERT NAME = "Menu" /> </ div></p>
<p><p> <ui: INSERT Name = "body" /> </ p></p>
<p></ body></p>
<p></ html></p>
<p>For MENU and Body, the <ui: insert /> label is used to mark the content of this place will change according to each page. You can use this template to create additional pages and provide different content to the Menu and the Body area.</p>
<p><! - Template-Client.xHtml -></p>
<p><! - Content Above Will Be Timmed -></p>
<p><UI: Composition Template = "Template.xHtml"></p>
<p><ui: param name = "title" value = "here's my title" /></p>
<p><ui: define name = "menu"> Here's my menu </ ui: define> <ui: define name = "body"> here's my body </ ui: define></p>
<p></ ui: composition></p>
<p><! - Content Below Will Be Timmed -></p>
<p>This example introduces another tag <ui: composition />. This tag provides a pair of features. It deletes anything it outside, that is, you can write some ordinary HTML pages, and Facelets will only use or display the content in the <ui: composition /> tag. With this label, you can also choose the properties of a template that will define what or where is it.</p>
<p>In order to match the Name property of the content and template pair, the <UI: Define /> tag, the Name property of the <UI: INSERT /> tag in the template, can be replaced. To easily transfer variables or text, you can use the <UI: Param /> tab, which replaces its value property as a variable in the template.</p>
<p><! - template.xhtml -></p>
<p><! Doctype html public "- // w3c // DTD XHTML 1.0 Transitional // En"</p>
<p>"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"></p>
<p><html xmlns = "http://www.w3.org/1999/xhtml"</p>
<p>XMLns: ui = "http://java.sun.com/jsf/facelets"></p>
<p><HEAD></p>
<p><meta http-equiv = "content-type" content = "text / html; charSet = ISO-8859-1" /></p>
<p><title> Sample Template </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><H1> Here's My Title </ h1></p>
<p><div> here's my menu </ div></p>
<p><p> here's my body </ p></p>
<p></ body></p>
<p></ html></p>
<p>The previous example can be more simplified, if only one place in the template is variable.</p>
<p><! - simple-template.xhtml -></p>
<p>...</p>
<p><body></p>
<p><H1> Title </ h1></p>
<p><! - Editable Body -></p>
<p><p> <ui: insert /> </ p></p>
<p></ body></p>
<p>...</p>
<p>Want to simplify the page with the top template:</p>
<p><! - simple-template-client.xhtml -></p>
<p><UI: Composition Template = "Simple-Template.xHtml"></p>
<p>Here's My Simple Body</p>
<p></ ui: composition></p>
<p>Use incrudes</p>
<p>The location in the page This concept defines reusable content in the page is quite powerful. Several examples show how to display the content in the template. But what if you want to include some things from another page? There is a series of form controls or a complex menu that you would rather separate into a different file in order to reuse or manage each corner without sanding. In general, Facelets provides two ways to include location or other pages. The first is to use the <UI: Include /> tag, for web developers, the tag should be quite familiar:</p>
<p><! - incrude.xhtml -></p>
<p>...</p>
<p><span id = "leftnav"></p>
<p><ui: include src = "/ web-inf / sitenav.xhtml" /></p>
<p></ span></p>
<p>...</p>
<p><! - sitenav.xhtml -></p>
<p>.</p>
<p><UI: Composition></p>
<p><! - Myfaces Tomahawk Components -></p>
<p><T: Tree2 Value = "# {backingbean.options}" var = "opt"></p>
<p>...</p>
<p></ t: Tree2></p>
<p></ ui: composition></p>
<p>...</p>
<p>When Facelets processes include.xhtml, content in all <ui: composition /> of Sitenav.xHTML will be included in include.xHTML:</p>
<p><! - incrude.xhtml -></p>
<p>...</p>
<p><span id = "leftnav"></p>
<p><! - Myfaces Tomahawk Components -></p>
<p><T: Tree2 Value = "# {backingbean.options}" var = "opt"></p>
<p>...</p>
<p></ t: Tree2></p>
<p></ span></p>
<p>...</p>
<p>If you are willing to deliver variables for SiteNav.xHTML, these variables are used for Tree components, then you can use the <ui: param /> tag:</p>
<p><! - incrude.xhtml -></p>
<p>...</p>
<p><span id = "leftnav"></p>
<p><ui: include src = "/ web-inf / sitenav.xhtml"></p>
<p><ui: param name = "menubean" value = "# {backingbean.options}" /></p>
<p></ ui: incrude></p>
<p></ span></p>
<p>...</p>
<p><! - sitenav.xhtml -></p>
<p>...</p>
<p><UI: Composition></p>
<p><! - Myfaces Tomahawk Components -></p>
<p><T: Tree2 Value = "# {menubean}" var = "opt"></p>
<p>...</p>
<p></ t: Tree2></p>
<p></ ui: composition></p>
<p>...</p>
<p>You can see that Sitenav.xHtml can use the variable MenuBean and MenuBean is passed through the <UI: Include /> tag. This makes some flexible reusable general components and content possible.</p>
<p>For <ui: include />, and <ui: param />, Facelets provides a more concise solution that supports custom labels. Don't worry, you don't need to write any one-click Java code. To customize a reusable label for Sitenav.xHtml, you must create a simple XML tag library file. <faceLet-taglib></p>
<p><namespace>> http://www.mycompany.com/jsf </ namespace></p>
<p><tag></p>
<p><tag-name> Sitenav.xHtml </ tag-name></p>
<p><source> /web-inf/tags/sitenav.xhtml </ source></p>
<p></ tag></p>
<p></ facelet-taglib></p>
<p>In addition to making Facelets in your new tag library XML file, you may need to add as many labels as possible in the new label library. You can write this by specifying http://www.mycompany.com/jsf as a namespace.</p>
<p><! - incrude-tag.xhtml -></p>
<p>...</p>
<p><span id = "leftnav"></p>
<p><my: sitenav menubean = "# {backingbean.options}" /></p>
<p></ span></p>
<p>...</p>
<p>This include-tag.xhtml example is the same as the previous include.xhtml example. Menubean's properties will take effect as a attribute of SiteNav.xHtml, just like <ui: param />.</p>
<p>Your project may include a JAR file, including all custom label libraries, or simply put the custom label library in a file plus. More tags are described in detail in Facelets Developer Documentation.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-132751.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="132751" 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.049</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 = 'UV4I0PJrWgqHZ916zyuuytMlzkZ7RnfMXuETmwDaw81hsd6z2aNPKnyaG1LQ_2Fy7YL1nsiglgXn8vRCZUXWt8Jg_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>
