Structured Web Technologies

Structured Web Technologies

Results for:

segment.type Collapse

Prev Topic Next

The type of segment includes some standard HTML partition elements, like frames, divisions and layers, listed below.

<table>
<frame> (dynamic)
<iframe>(dynamic)
<span>
<div>
<row>
<td>
<layer>

On some platforms, these could have implementation as dynamic components that could allow application of behaviors to their rendering and enabling capabilities.

Apart from the HTML segments, there are other segments that could be demarcated using dWebSpec annotations. They are listed as follows:

inline (default):
This allows demarcation of sections on the pages.

static-include:
Used to demarcate a segment of the page that is included by the server during assembly or compilation. In essence, identical segments could exist in multiple places: reuse. Of which, one of these would be declared as the template. Others would then extend the template.

See attributes extends, base-page-id and value.

dynamic-include: All information concerning static include also pertains to dynamic include. However, the dynamic include does involve dynamic request.

See attributes extends, base-page-id and event-id.

The data aspect of dynamic segments usually involves additional steps for the data interchange to work in cooperation with that of the rest of the page. This is owing to the fact that such segments might not share the same page or request scope with the rest of the page.

The support for dynamic include as well as the impact on bindings, would vary from platform to platform.

insert-include:

This could be similar to the dynamic includes, with the distinction that the assembly process is triggered by external controls rather than actions or directives from within the page. The presence of this tag on a page would normally signify that the page is involved in template scheme.

A page involved in a template scheme could either be the template, in some cases called the master page, or else the page could use a template. The distinction is that the user would specify the template page in use, in the page descriptor.

For the template page, the insert-include segments are those segment that should be or could be replace by the pages using the template. A page using a template would override the segments with its own segments that match the id of those segments in the template.

Seam

The standard segments defined by JSF are in page components and panel. What Facelet provides are composition segments.

A composition segment would reside in another page. Apart from the segmentation into panels or container components, any segment that would be included dynamically or automatically inserted must be surrounded by a composition tag. Example is as follows.

<ui:composition>
  #{dynamic.text}
  <h:inputText id="myText" value="#{foo.bar}"/>
</ui:composition>

insert-include:

This is used to mark areas in a template page that a client page could override. This is represented in dWebSpec using the segment annotation with a specific segment-id, and in the descriptor as segment of type insert-include.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Facelets: Test Application</title>
</head>
<body>
<h1>
  <!-- aws:segment id="title" type="insert-include" -->
	Any mock-up text could be included
  <!-- /aws:segment -->
</h1>
<p>
  <!-- aws:segment id="body" type="insert-include" -->
	Any mock-up text could be included
  <!-- /aws:segment -->
</p>
</body>

</html>

This would be implemented as shown below. Wherever a segment is of the type include-insert, it would be replaced with the ui:insert tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Facelets: Test Application</title>
</head>
<body>
<h1>
  <ui:insert name="title">Default Title</ui:insert>
</h1>
<p>
  <ui:insert name="body">Default Body</ui:insert>
</p>
</body>

</html>

The client page mock-up would be as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Facelets: Test Application</title>
</head>
<body>
<h1>
  <!-- aws:segment id="title" -->
    	I'm thinking of a number from
	<!-- aws:element name="min" -->0 <!-- /aws:element -->
	to
	<!-- aws:element name="max" -->100 <!-- /aws:element -->
	.  Can you guess it?
  <!-- /aws:segment -->
</h1>
<p>
  <!-- aws:segment id="body" -->
    <form name="helloForm">
      <input type="text" name="userNo" value="5"/>
      <br/>
      <input type="submit" name="submit" value="Submit" />
    </form>
  <!-- /aws:segment -->
</p>
</body>

</html>

The implemented page would be as follows. The page descriptor must specify a template, for a page to use and override a template. Wherever there are top-level segments, their segment-id must match one of the segment ids of include-insert segments. It would then be implemented with the ui:define tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Facelets: Test Application</title>
</head>
<body>
<ui:composition template="/template.xhtml">
<h1>
    <ui:define name="title">
    	I'm thinking of a number from
      	<h:outputText id="min" value="#{NumberBean.min}"/>
	to
      	<h:outputText id="max" value="#{NumberBean.max}"/>
	.  Can you guess it?
  </ui:define>
</h1>
<p>
  <ui:define name="body">
    <h:form id="helloForm">
      <h:inputText type="text" id="userNo" value="#{NumberBean.guess}" validator="#{NumberBean.validate}"/>
      <br/>
      <h:commandButton type="submit" id="submit" action="success" value="Submit" />
    </h:form>
  </ui:define>
</p>
</ui:composition>
</body>

</html>

The transformation from the source content to the implementation involves the inclusion of the information in the descriptors, are repeated below. The steps are as follows.

Page descriptor determines which page to use as template.
Page declarations are included on top for the tag and name space
The composition tag encloses the body of the page, indicating the used template as specified in the page descriptor.
Any segment that has the same id as a include-insert segment in the template, would be implemented with the ui:define tag. If such segment in-line, its implementation would be placed within the ui:define tag. If it is an include-dynamic type, it is a ui:include tag that would be within the definition tag body.
The rest of the implementation involves the conversion of the HTML tags and annotations to their dynamic equivalents, as specified in the descriptors.

dynamic-include:

A page could include another page. This would show up in the descriptor as shown below.

SEGMENT DESCRIPTORS
id	type	visible	enable	valuue	base-page-id	extends	event-id	description
header	dynamic-include			{bakingBean. headSource}

This would be implemented with the ui:include component.

<span id="header">
  <ui:include src="#{backingBean.headerSource}"/>
</span>

An included page could be specified with parameters, as shown below.

SEGMENT DESCRIPTORS
id	type	visible	enable	value	base-page-id	extends	event-id	description
leftNav	dynamic-include			/WEB-INF/ siteNav.xhtml

The association with parameters is through the parent-id attribute of the parameters descriptor, shown below.

PARAMETERS DESCRIPTOR
id	leftNavParams	parent-id	segments[leftNav]
caption		description
value

PARAMETER DESCRIPTOR
id	value	required
user	{currentUser}
page	home

The implementation is shown below.

<span id="leftNav">
  <ui:include src="/WEB-INF/siteNav.xhtml">
    <ui:param name="user" value="#{currentUser}"/>
    <ui:param name="page" value="home"/>
  </ui:include>
</span>

NOTE: An included page could be a template. This would be signified by the presence of one or more insert include segments. When pages included have insert definitions, they are implemented with ui:decorate tag, which allows the inclusion of ui:define components within its body, to override insertion points. Seam provides an enhance component, s:decorate, that helps decorate input field, with required mark, labels and validation messages. For this purpose the s:decorate component is very useful.