You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beehive.apache.org by do...@apache.org on 2005/08/16 20:13:07 UTC
svn commit: r233025 - in
/beehive/trunk/docs/forrest/release/src/documentation:
content/xdocs/pageflow/tagsJavascript.xml content/xdocs/pageflow/treeTags.xml
resources/images/tagsJavaScriptScreen.png
Author: dolander
Date: Tue Aug 16 11:13:04 2005
New Revision: 233025
URL: http://svn.apache.org/viewcvs?rev=233025&view=rev
Log:
Update to the Tag JavaScript support documentation
Added:
beehive/trunk/docs/forrest/release/src/documentation/resources/images/tagsJavaScriptScreen.png (with props)
Modified:
beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/tagsJavascript.xml
beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/treeTags.xml
Modified: beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/tagsJavascript.xml
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/tagsJavascript.xml?rev=233025&r1=233024&r2=233025&view=diff
==============================================================================
--- beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/tagsJavascript.xml (original)
+++ beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/tagsJavascript.xml Tue Aug 16 11:13:04 2005
@@ -9,7 +9,298 @@
<section id="intro">
<title>Introduction</title>
<p>The following topic explains how the NetUI JSP tags provide support for JavaScript development.
+ The primary JavaScript support provides the ability to looking up the HTML DOM elements
+ produced by the tags. This support allows looking up DOM elements by either the
+ <strong>id</strong> or
+ <strong>name</strong>. In addition, the NetUI tags provide the ability to uniquely generate
+ the
+ <strong>id</strong> attribute.
</p>
+ <p> NetUI owns the value of the
+ <strong>name</strong> attribute generated for the HTML form controls.
+ It's very common to write JavaScript that would like to access the HTML control DOM elements
+ using the name. The JavaScript supports mapping a local name to the generated name allowing
+ this type of code to be written.
+ </p>
+ <p> In addition, NetUI provides scoping facilities that ensure the HTML
+ <strong>id</strong> attribute is unique
+ as required by the HTML specifications. In a simple page, this is usually not a problem because all
+ of the
+ <strong>id</strong> attributes are specified in a single source file. There are situations,
+ such as content within portal, where a Page Flow page is generated as a portion of a larger page.
+ In this case,
+ unique
+ <strong>id</strong> values must be generated when the page is generated. The JavaScript support
+ in NetUI allows for looking up DOM elements in JavaScript using a "local" name and scope. This allows
+ JavaScript to be written as if the page was a simple page and for it to become part of a composite
+ page without modification.
+ </p>
+ <p>The primary </p>
+
+ </section>
+ <section>
+ <title>JSP Tags and Attribute</title>
+ <p>This section describes the primary NetUI JSP tags and attributes used to support JavaScript.</p>
+ <section id="tagId">
+ <title>TagId</title>
+ <p>The NetUI tags usually do not allow setting the
+ <strong>id</strong> attribute directly. Instead,
+ the generated HTML elements are given "local" names using the
+ <strong>tagId</strong> attribute.
+ The value of this attribute is used to generate the
+ <strong>id</strong> attribute of the resulting
+ HTML elements. In addition, for form controls, a mapping is maintained from the
+ <strong>tagId</strong> value to the generated name.
+ </p>
+ </section>
+ <section id="ScriptContainer">
+ <title>ScriptContainer</title>
+ <p> Scoping of the generated HTML
+ <strong>id</strong> attributes is done through the
+ <strong>ScriptContainer</strong> tags. A ScriptContainer can provide either
+ an explicit or a unique implicit name all of the tagId values found in it's
+ decendents.
+ </p>
+ <p> There are two NetUI JSP tags that are ScriptContainers, <netui:scriptContainer> and
+ <netui:html>. The ScriptContainer tag represents the basic features. The Html
+ tag is a subclass of ScriptContainer and provides additional HTML specific features.
+ ScriptContainers may be nested. The
+ <strong>id</strong> value is generated by prepending
+ all of the ancestor ScriptContainer names to the value of the
+ <strong>tagId</strong>.
+ </p>
+ <p> The ScriptContainer tags support two attributes for creating a name, <strong>idScope</strong>
+ and <strong>generateIdScope</strong>. The <strong>idScope</strong> sets a explicit value
+ for the generated scope. The <strong>generateIdScope</strong>, when <strong>true</strong>,
+ will cause a unique id scope name to be generated. This value is unique for the request.
+ </p>
+ <p><strong>Note:</strong> the generated id scope may not be the same from request to request on the same page.</p>
+
+ </section>
+ </section>
+ <section id="simple_example">
+ <title>Simple Example</title>
+ <p>This section defines a very simple example which demonstrates the use of the
+ <strong>tagId</strong>
+ attribute, scoping ids, and the use of the lookup methods for finding DOM elements. In this example
+ there is a simple form containing a checkbox. The document is automatically scoped to generate
+ unique ids within the document.
+ </p>
+ <section id="simple_jsp">
+ <title>JSP Code</title>
+ <p> This simple JSP file demonstrates the use of <strong>tagId</strong> and scoping.
+ It also contains JavaScript that looks up DOM elements and creates some output
+ verifying those elements are found.
+ </p>
+ <p><strong>tagIdSupport.jsp</strong>
+ </p>
+ <source><![CDATA[
+<%@ page language="java" contentType="text/html;charset=UTF-8"%>
+<%@ taglib prefix="netui" uri="http://beehive.apache.org/netui/tags-html-1.0"%>
+<netui:html generateIdScope="true">
+ <head>
+ <title>tagIdSupport</title>
+ <netui:base/>
+ </head>
+ <netui:body>
+ <netui:form tagId="form" action="begin">
+ <span id="scopeOneSpan" />
+ Checkbox:<netui:checkBox tagId="check" dataSource="pageFlow.check" />
+ <netui:button type="submit" value="Post Form" />
+ </netui:form>
+ <hr>
+ <p style="color: green">
+ The following calls the generated JavaScript support to lookup DOM elements.
+ </p>
+ <p id="javaOut"></p>
+ <netui:scriptBlock placement="after">
+
+ // find the element that will provide the output <p> and the scope for lookup scope
+ var p = document.getElementById("javaOut");
+ var scope = document.getElementById("scopeOneSpan");
+
+ // create the contents of the output paragraph
+ var val = "<b>Lookup the Form by name and id</b><br><br>";
+ var form = document.getElementById(lookupIdByTagId("form",scope));
+ val = val + "Form by <b>id</b> is: " +
+ form.id + ", type: " + form.nodeName + "<br>";
+ form = document[lookupNameByTagId("form",scope)];
+ val = val + "Form by <b>name</b> is: " +
+ form .name + ", type: " + form.nodeName + "<br>";
+
+ val = val + "<br><b>Lookup Checkbox by name and id</b><br><br>";
+ var check = document.getElementById(lookupIdByTagId("check",scope));
+ val = val + "Checkbox by <b>id</b> is: " +
+ check.id + ", type: " + check.nodeName + "<br>";
+ check = form[lookupNameByTagId("check",scope)];
+ val = val + "Checkbox) by <b>name</b> is: " +
+ check .name + ", type: " + check.nodeName + "<br>";
+ p.innerHTML = val;
+
+ </netui:scriptBlock>
+ </netui:body>
+</netui:html>
+ ]]></source>
+ <p> In the JSP code, the <netui:form> and <netui:checkbox> elements are both named
+ using the <strong>tagId</strong> attribute. The value of the tagId ("form" and "check")
+ are the local name of these elements.
+ </p>
+ <source>
+<netui:form <strong>tagId="form"</strong> action="begin">
+<netui:checkBox <strong>tagId="check"</strong> dataSource="pageFlow.check" />
+ </source>
+ <p> In this example, the <netui:html> tag generates a scope for the name of all
+ <strong>tagId</strong> values. In this example, the scoping isn't required, but this
+ demonstrates the use of scoping within a page. In this case, the <strong>generateIdScope</strong>
+ attribute will generate a unique "name" for the scope. This name will be prepended to all
+ <strong>tagId</strong> values to generate the name of the HTML elements.
+ </p>
+ <source>
+<netui:html <strong>generateIdScope="true"</strong>>
+ </source>
+ </section>
+ <section id="simple_controller">
+ <title>Controller</title>
+ <p>
+ <strong>Controller.jsp</strong>
+ </p>
+ <source><![CDATA[
+package tagIdSupport;
+
+import org.apache.beehive.netui.pageflow.PageFlowController;
+import org.apache.beehive.netui.pageflow.annotations.Jpf;
+
+@Jpf.Controller(
+ simpleActions={
+ @Jpf.SimpleAction(name="begin", path="tagIdSupport.jsp")
+ }
+)
+public class Controller
+ extends PageFlowController
+{
+ private boolean _check;
+
+ public boolean isCheck() {
+ return _check;
+ }
+
+ public void setCheck(boolean check1) {
+ _check = check1;
+ }
+}
+ ]]></source>
+ </section>
+ <section id="simple_generated_html">
+ <title>Generated HTML</title>
+ <p>
+ <strong>Generate HTML on Client Browser</strong>
+ </p>
+ <source><![CDATA[
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+>
+<html lang="en" netui:idScope="n0">
+
+ <head>
+ <title>tagIdSupport</title>
+ <base href="http://localhost:8080/dev/tagIdSupport/tagIdSupport.jsp">
+ </head>
+ <body>
+ <form name="n0.form" id="n0.form" action="/dev/tagIdSupport/begin.do" method="post">
+ <span id="scopeOneSpan" />
+ Checkbox:<input type="hidden" name="wlw-checkbox_key:{pageFlow.check}OldValue" value="false"><input type="checkbox" name="wlw-checkbox_key:{pageFlow.check}" id="n0.check">
+ <input type="submit" value="Post Form">
+ </form>
+ <hr>
+ <p style="color: green">
+ The following calls the generated JavaScript support to lookup DOM elements.
+ </p>
+ <p id="javaOut"></p>
+
+ <script language="JavaScript" type="text/JavaScript">
+<!--
+
+// **** Start the NetUI Framework Generated JavaScript ****
+
+// Build the netui_names table to map the tagId attributes
+// to the real id written into the HTML
+if (netui_tagIdNameMap == null)
+ var netui_tagIdNameMap = new Object();
+netui_tagIdNameMap.n0___form="n0.form"
+netui_tagIdNameMap.n0___check="wlw-checkbox_key:{pageFlow.check}"
+
+
+// lookup by tagId to "real id"
+function lookupIdByTagId(id, tag)
+{
+ var idScope = lookupIdScope(tag,".");
+ return (idScope == "") ? id : idScope + id;
+}
+
+// lookup by tagId to "real name"
+function lookupNameByTagId(id, tag)
+{
+ var idScope = lookupIdScope(tag,"_");
+ if (idScope == "")
+ return netui_tagIdNameMap[id];
+ else
+ return netui_tagIdNameMap[idScope + "__" + id];
+}
+
+//Non-Legacy lookup method creating a fully qualified scope id
+function lookupIdScope(tag,sep)
+{
+ var val = "";
+ if (sep == null) sep = "";
+ while (tag != null && tag.getAttribute != null) {
+ try {
+ var attrVal = tag.getAttribute("netui:idScope");
+ } catch (e) { /* ignore, in IE6 calling on a table results in an exception */ }
+ if (attrVal != null)
+ val = attrVal + sep + val;
+ tag = tag.parentNode;
+ }
+ return val;
+}
+-->
+</script>
+<script language="JavaScript" type="text/JavaScript">
+<!--
+ // find the element that will provide the output <p> and the scope for lookup scope
+ var p = document.getElementById("javaOut");
+ var scope = document.getElementById("scopeOneSpan");
+
+ // create the contents of the output paragraph
+ var val = "<b>Lookup the Form by name and id</b><br><br>";
+ var form = document.getElementById(lookupIdByTagId("form",scope));
+ val = val + "Form by <b>id</b> is: " +
+ form.id + ", type: " + form.nodeName + "<br>";
+ form = document[lookupNameByTagId("form",scope)];
+ val = val + "Form by <b>name</b> is: " +
+ form .name + ", type: " + form.nodeName + "<br>";
+
+ val = val + "<br><b>Lookup Checkbox by name and id</b><br><br>";
+ var check = document.getElementById(lookupIdByTagId("check",scope));
+ val = val + "Checkbox by <b>id</b> is: " +
+ check.id + ", type: " + check.nodeName + "<br>";
+ check = form[lookupNameByTagId("check",scope)];
+ val = val + "Checkbox) by <b>name</b> is: " +
+ check .name + ", type: " + check.nodeName + "<br>";
+ p.innerHTML = val;
+-->
+</script>
+</body>
+</html>
+ ]]></source>
+ </section>
+ <section id="sample_browser_results">
+ <title>Browser Results</title>
+ <p>
+ <strong>Page as seen in a browser</strong>
+ </p>
+ <p>
+ <img src="images/tagsJavaScriptScreen.png" alt="JavaScript result in the browser"/>
+ </p>
+ </section>
</section>
</body>
Modified: beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/treeTags.xml
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/treeTags.xml?rev=233025&r1=233024&r2=233025&view=diff
==============================================================================
--- beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/treeTags.xml (original)
+++ beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/treeTags.xml Tue Aug 16 11:13:04 2005
@@ -165,7 +165,7 @@
</p>
</section>
<section>
- <title>Netui Tree Classes</title>
+ <title>NetUI Tree Classes</title>
<p>This section describes the underlying classes which represent a tree</p>
</section>
<section>
@@ -267,7 +267,7 @@
</p>
<p>The root of the tree supports expanding and collapsing. The children of a node appear
at the same level. Trees appear commonly in applications such as file system explorers, and
- are good at representing limitted hiearchical data sets.
+ are good at representing limited hierarchical data sets.
</p>
<section>
<title>runAtClient</title>
@@ -287,8 +287,8 @@
<strong>XmlHttpRequest</strong> to update the underlying state on the server
as the user interacts with the tree on the client. This mode requires JavaScript and XmlHttpRequest
support in the client browser. This mode of operation is commonly referred to as AJAX
- (Asynchronous JavaScript and XML). It will
- minimizes the amount of information sent between the client and server when the
+ (Asynchronous JavaScript and XML). It minimizes the amount of information sent between
+ the client and server when the
user is exploring the tree itself.
</p>
<p> In the diagram above, when the tree is rendered, all of the nodes will be rendered into the
@@ -313,7 +313,7 @@
all children nodes will not. When the user expands the node, an XmlHttpRequest is made
to the server and the children (and possibly their children) will be rendered into HTML
and sent back to the client. JavaScript will update the DOM and cause the children to be
- displayed. Once the children are recieved, all further expand and collapse operations happen
+ displayed. Once the children are received, all further expand and collapse operations happen
on the client.
</p>
<p> runAtClient and expandOnClient can be used together to optimize the amount of tree state
@@ -322,7 +322,7 @@
into one or two areas of a tree after searching the top level nodes. To optimize for
this type of browsing, render out the top few levels of a tree and then create a layer
of children that set expandOnClient to true. The top few layers will be initially rendered
- and when a user goes deep into one, the server provides the branch asynchroniously when requested.
+ and when a user goes deep into one, the server provides the branch asynchronously when requested.
</p>
</section>
<section>
Added: beehive/trunk/docs/forrest/release/src/documentation/resources/images/tagsJavaScriptScreen.png
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/resources/images/tagsJavaScriptScreen.png?rev=233025&view=auto
==============================================================================
Binary file - no diff available.
Propchange: beehive/trunk/docs/forrest/release/src/documentation/resources/images/tagsJavaScriptScreen.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream