Index.jsp Sample

This topic inludes the source code for the Index.jsp Sample.

Sample Location

This sample is located in the following directory in your WebLogic Workshop installation:

BEA_HOME/weblogic81/samples/workshop/SamplesApp/WebApp/tagSamples/netui/scriptContainer/

Sample Source Code


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 &lt;netui:scriptContainer> and 
022         &lt;/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 &lt;html> ... &lt;/html> 
025         tags to provide a default container. In a portlet, some JSP pages might be 
026         included into other JSP pages. Having redundant &lt;html> ... &lt;/html> tags 
027         in the rendered portlet JSP can result in display problems for some browsers. 
028         However, omitting the &lt;html> tag (and the container it providescan result 
029         in cluttered code, especially where Javascript appears in the file. To solve 
030         this issue, WebLogic Workshop provides the &lt;netui:scriptContainer> tag for 
031         JSPs that:</p>
032         <ul type="square">
033         <li>May appear in a portlet </li>
034         <li>Use &lt;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 &lt;netui:scriptContainer> 
039         and &lt;/netui:scriptContainer> tags so that they enclose the other NetUI tags 
040         that belong to that script container. The first &lt;netui:scriptContainer> tag 
041         should appear after the JSP's &lt;body> tag. The closing &lt;/netui:scriptContainer> 
042         tag should appear before the JSP's &lt;/body> tag.</p>
043         
044         <p>When you use the &lt;netui:scriptContainer> tag, you should omit the 
045         &lt;netui:html> tag; this latter tag creates the &lt;html> and closing 
046         &lt;/html> tags in the rendered JSP.
047         
048         <p>You can use multiple sets of &lt;netui:scriptContainer> and &lt;/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>&lt;WEBLOGIC_HOME/samples/workshop/SamplesApp/WebApp/scriptContainer</p>
055         
056         <p>For example, you can look at the pre-rendered &lt;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>&nbsp;</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                 &nbsp;
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                 &nbsp;
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                 &nbsp;
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>&nbsp;</p>
146             
147               <p><b>Return to Samples Home Page</b>&nbsp;&nbsp;
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>