001 <%@ page language="java" contentType="text/html;charset=UTF-8"%>
002 <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%>
003 <%@ taglib uri="netui-tags-html.tld" prefix="netui"%>
004 <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%>
005 <html>
006 <head>
007 <netui:base />
008 <title>
009 Script Container Sample: index.jsp Page
010 </title>
011 <link href="../../../resources/css/style.css" type="text/css" rel="stylesheet"/>
012 </head>
013 <body style="margin:0">
014
015 <jsp:include page="/resources/jsp/header.jsp"/> <br/>
016
017 <blockquote>
018
019 <h3>Script Container Sample: index.jsp Page</h3>
020
021 <p>This sample shows how you can use a <netui:scriptContainer> and
022 </netui:scriptContainer> tag set to organize the script that is generated
023 by the NetUI tags that they enclose. This is especially needed for Portal web
024 applications, because they often cannot rely on having <html> ... </html>
025 tags to provide a default container. In a portlet, some JSP pages might be
026 included into other JSP pages. Having redundant <html> ... </html> tags
027 in the rendered portlet JSP can result in display problems for some browsers.
028 However, omitting the <html> tag (and the container it provides) can result
029 in cluttered code, especially where Javascript appears in the file. To solve
030 this issue, WebLogic Workshop provides the <netui:scriptContainer> tag for
031 JSPs that:</p>
032 <ul type="square">
033 <li>May appear in a portlet </li>
034 <li>Use <netui*:*> tags that generate Javascript</li>
035 </ul>
036
037 <p>After you drag a scriptContainer tag from the JSP Palette to the JSP Design
038 View, you should switch to Source View and move the <netui:scriptContainer>
039 and </netui:scriptContainer> tags so that they enclose the other NetUI tags
040 that belong to that script container. The first <netui:scriptContainer> tag
041 should appear after the JSP's <body> tag. The closing </netui:scriptContainer>
042 tag should appear before the JSP's </body> tag.</p>
043
044 <p>When you use the <netui:scriptContainer> tag, you should omit the
045 <netui:html> tag; this latter tag creates the <html> and closing
046 </html> tags in the rendered JSP.
047
048 <p>You can use multiple sets of <netui:scriptContainer> and </scriptContainer>
049 tag sets, with unique scopeIds assigned to each one, as shown in the
050 pre-rendered version of this index.jsp. The two forms shown below have separate
051 scriptContainers, each with a unique scopeId. You can find the source files
052 for this sample in the following location:</p>
053
054 <p><WEBLOGIC_HOME/samples/workshop/SamplesApp/WebApp/scriptContainer</p>
055
056 <p>For example, you can look at the pre-rendered <netui*:*> tags in this index.jsp,
057 and then with the server running, use your browser's View Source to see in the
058 rendered index.jsp how scriptContainer provided separate containers and organized the
059 Javascript neatly.</p>
060
061 <p> </p>
062
063 <table border='1' cellspacing="0" cellpadding="5"><tr><td>
064 <netui:scriptContainer scopeId="one" >
065 <netui:form action="submit" focus="firstName">
066 <h4>Form One</h4>
067 <table class="tablebody">
068 <netui:parameter name="scope" value="one"/>
069
070
071 <tr class="tablehead" valign="top">
072 <td>LastName:</td>
073 <td>
074 <netui:textBox dataSource="{actionForm.lastName}" tagId="lastName"></netui:textBox>
075 </td>
076 </tr>
077 <tr class="tablehead" valign="top">
078 <td>FirstName:</td>
079 <td>
080 <netui:textBox dataSource="{actionForm.firstName}" tagId="firstName"></netui:textBox>
081 </td>
082 </tr>
083 </table>
084 <br/>
085 <netui:anchor formSubmit="true" action="submit">Submit With Parameter
086 <netui:parameter name="anchorForm" value='Submitted by "Submit With Parameter"'></netui:parameter>
087 </netui:anchor>
088
089 <netui:anchor formSubmit="true" action="submit">Submit Two With Parameter
090 <netui:parameter name="anchorForm" value='Submitted by "Submit Two With Parameter"'></netui:parameter>
091 </netui:anchor>
092
093 </netui:form>
094 </netui:scriptContainer>
095 </td><td valign="top">
096 <netui:scriptContainer scopeId="two" >
097 <netui:form action="submit">
098 <h4>Form Two</h4>
099 <netui:parameter name="scope" value="two"/>
100 <table class="tablebody">
101 <tr class="tablehead">
102 <td>LastName:</td>
103 <td>
104 <netui:textBox dataSource="{actionForm.lastName}" tagId="lastName"></netui:textBox>
105 </td>
106 </tr>
107 <tr class="tablehead">
108 <td>FirstName:</td>
109 <td>
110 <netui:textBox dataSource="{actionForm.firstName}" tagId="firstName"></netui:textBox>
111 </td>
112 </tr>
113 </table>
114 <br/>
115 <netui:anchor formSubmit="true" action="submit">Submit Form Two
116 <netui:parameter name="anchorForm" value='Submit Form Two'></netui:parameter>
117 </netui:anchor>
118
119 </netui:form>
120 </netui:scriptContainer>
121 </td></tr></table>
122
123 <hr />
124
125 This information is generated by JavaScript on the page. It demonstrates the use of the
126 <code>tagId</code> attribute to lookup the actual textBox fields in the generated HTML Forms.
127 The combination of the <code>name</code> and <code>scope</code> are unique on the page.<br/>
128 <div style="margin:0,10,0,10;font-weight:bold;font-size:8pt;">
129 <script language="JavaScript" type="text/JavaScript">
130 var name = getNetuiTagName("firstName",document.forms[0]);
131 var myscope = getScopeId(document.forms[0]);
132 document.writeln("Name: " + name + " Scope: " + myscope + "<br/>");
133 name = getNetuiTagName("lastName",document.forms[0]);
134 var myscope = getScopeId(document.forms[0]);
135 document.writeln("Name: " + name + " Scope: " + myscope + "<br/>");
136 var name = getNetuiTagName("firstName",document.forms[1]);
137 var myscope = getScopeId(document.forms[1]);
138 document.writeln("Name: " + name + " Scope: " + myscope + "<br/>");
139 name = getNetuiTagName("lastName",document.forms[1]);
140 var myscope = getScopeId(document.forms[1]);
141 document.writeln("Name: " + name + " Scope: " + myscope + "<br/>");
142 </script>
143 </div>
144
145 <p> </p>
146
147 <p><b>Return to Samples Home Page</b>
148 <netui:form action="done">
149 <netui:button value="Home" type="submit"/>
150 </netui:form>
151 </p>
152
153 </blockquote>
154
155 <hr>
156 <netui:anchor href="/WebApp/tagSamples/tagSamplesController.jpf">Return to Tag Samples</netui:anchor>
157 </body>
158 </html>
|