<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body link="#355491" alink="#4262a1" vlink="#355491" style="background: #e2e2e2; margin: 0; padding: 20px;">
<div>
<table cellpadding="0" bgcolor="#FFFFFF" border="0" cellspacing="0" style="border: 1px solid #dadada; margin-bottom: 30px; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border: solid 2px #ccc; background: #dadada; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td bgcolor="#000000" valign="middle" height="58px" style="border-bottom: 1px solid #ccc; padding: 20px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px;">
<h1 style="color: #333333; font: bold 22px Arial, Helvetica, sans-serif; margin: 0; display: block !important;">
<!-- To have a header image/logo replace the name below with your img tag -->
<!-- Email clients will render the images when the message is read so any image -->
<!-- must be made available on a public server, so that all recipients can load the image. -->
<a href="https://community.jboss.org/index.jspa" style="text-decoration: none; color: #E1E1E1">JBoss Community</a></h1>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="font: normal 12px Arial, Helvetica, sans-serif; color:#333333; padding: 20px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;"><h3 style="margin: 10px 0 5px; font-size: 17px; font-weight: normal;">
Tags classification for Visual Page Editor
</h3>
<span style="margin-bottom: 10px;">
modified by <a href="https://community.jboss.org/people/dmaliarevich">Denis Maliarevich</a> in <i>JBoss Tools</i> - <a href="https://community.jboss.org/docs/DOC-47770">View the full document</a>
</span>
<hr style="margin: 20px 0; border: none; background-color: #dadada; height: 1px;">
<div class="jive-rendered-content"><p dir="ltr" id="internal-source-marker_0.3013445483397772" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt; text-align: center;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">*****</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">There are 2 types of tags in VPE: <strong>(A) Visible tags</strong> and <strong>(B) Invisible tags</strong>. </span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;"><strong>Invisible tags</strong> are the simplest to implement. Almost any components library has its own invisible tags: html, jstl, jsf, a4j, richfaces, myfaces, seam, spring. Most of them are parameters and adaptors.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">Then there is a big variety of implementations for <strong>visible tags</strong>. For the simplicity we can divide them into the 3 groups (depending on their complexity): easy, average and hard to implement tags. Let’s try to classify them.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt; text-align: center;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">*****</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt; text-align: center;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: bold; font-style: normal;">1) The EASY to implement tags:</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">*Mostly it is tags that are shows as a single HTML tag with certain parameters. </span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">*To this group we can include all the templates for HTML tags, DocBook tags, and a few from JSF and Rich Faces.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt; text-align: center;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: bold; font-style: normal;">2) AVERAGE COMPLEXITY group:</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">*Tags that require a well-designed template which is once being implemented do not change its representation in the future. </span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">* Also it could be tags from the different libraries that have similar representation and we can use 1 template for different tags.</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">*To this group we include more than a half tags form the JSF and Rich Faces, JSTL and Facelets libraries.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt; text-align: center;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: bold; font-style: normal;">3) HARD to implement group:</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">Let’s divide tags once again by the type of complexity:</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3A) Tags that should know their parents or children tags. Depending on this the tag could be rendered in a different way: rich:panelMenuGroup, rich:panelMenuItem, rich:tree, rich:treeNode, h:dataTable, h:column.</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">*<f:selectItem> will have different representation depending on the parent element.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3B) Tags that have different representation depending on the trigger (or toggle state).</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">rich:collapsiblePanel, rich:collapsibleSubTable, rich:panelMenu, rich:panelMenuGroup.</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">* To this subgroup we could also add the togglers, that change this state: rich:dataScroller, rich:collapsibleSubTableToggler.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3C) Templates that change its view depending on the inserted text: rich:inplaceInput, rich:inplaceSelect.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3D) Tags that could not live without a pair: rich:column without h:dataTable, rich:panelMenuGroup and rich:panelMenuItem without rich:panelMenu,  rich:treeNode without rich:tree.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3E) Tables, particularly h:dataTable and rich:dataGrid with its columns and facets. They are hard tags on its own. It's hard to implement correct style, colgroulp, colspan, rowspan. Cell sizes and nested css styles. </span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">* Nested tables with its css styles.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3F) <f:facet> -- is a really complex tag. It has a lot of variants because could be put more than once inside different tags. It should have the ability to be put in any place of the template, its children could be placed in 2 different places in the parent, it could not have its own visual node, it should know its children and be able to manipulate them. Different type of facets: header, footer, caption and others. Each tag could handle its facets in a unique way.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3G) Tags with high html structure complexity or very complex css styles and functions, i.e. <rich:calendar>.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3H) Tags that have different representation depending on the library version. RF3.3 and RF4 tags. They should know the version before being rendered.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3I) Includes. Tags from many libraries (jsp, jsf, rf, facelets) that insert page(s) to the current document. There could be conditions of the insertion. Include should calculate dependencies as well.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3J) Custom tags. Particularly JSF2 Composite -- similar to includes, but should have a certain structure, be placed in a certain location, certain naming conditions.</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">* JSP custom tags.</span></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt; text-align: center;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: bold; font-style: normal;">*****</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">There are other important rules that should be followed (or at least these rules should be kept in mind while developing the templates):</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">1) EL expressions. They should be parsed before rendering the page due to the fact that they could influence on the structure. Bean properties or parameters should be resolved.</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">2) Linked Resources (such as css, js, images, html files) should be correctly inserted/tied to the current document.</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">3) Templates for tags should be flexible in the changing their settings, css styles, working with children and parents.</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">4) The place on the page to render the template should be configurable.</span></p><p dir="ltr" style="margin-left: -0.05pt; margin-right: -0.05pt; text-indent: -0.05pt;"><span style="font-size: 16px; font-family: 'Times New Roman'; color: #000000; font-weight: normal; font-style: normal;">5) Visual and Source elements should be connected with each other.</span></p></div>
<div style="background-color: #f4f4f4; padding: 10px; margin-top: 20px;">
<p style="margin: 0;">Comment by <a href="https://community.jboss.org/docs/DOC-47770">going to Community</a></p>
<p style="margin: 0;">Create a new document in JBoss Tools at <a href="https://community.jboss.org/choose-container!input.jspa?contentType=102&containerType=14&container=2128">Community</a></p>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>