Using JavaScript in Page Flow and Portal Applications

 

The following topic explains how to access page elements, such as forms and user input elements, with JavaScript.

Limitations of Traditional Naming Techniques

In a stand alone web application, JavaScript typically accesses page elements by the id and name attributes. Page elements are given unique id or name attributes...

        <form name="myForm" onSubmit="return validateForm()" action="myAction">
           First Name: <input type="text" id="firstName"><br>
           Last Name:  <input type="text" id="lastName"><br>
           <input type="submit" value="Submit">
        </form>

在一个卓越的web程序中，通常Javascript通过id和name属性来访问页面元素。页面元素被赋予唯一的
id或者name属性。

...and then the page elements are accessed by JavaScript functions which refer to the id and name attributes...

        <script language="JavaScript">
        function validateForm() 
        {
            var error_message = "";
            if (document.myForm.firstName.value =="") error_message += "- your first name /n";
            if (document.myForm.lastName.value =="") error_message += "- your last name /n";
            if(error_message) 
            {
                alert("Please fill in the following fields:/n" + error_message);
                return false; 
            }
            return true; 
        }
        </script>

But when a web application is incorporated into a Portal application, this JavaScript technique does not suffice. This is because Portal applications may contain a collage of different web applications, with no guarantee that the page elements have unique id or name attributes. If two applications in the Portal each have page elements with the same id or name attributes, there is no way for JavaScript to access the one of these page elements, since JavaScript will always return the first page element it encounters as it searches for an element with a specified name or id. For this reason, Portal applications can be made to rewrite the name and id attributes of page elements, to ensure that each page element in the Portal has a unique identifier.

但当一个web程序被合并到一个Portal程序中，这项javascript技术没有效果。这是因为Portal程序可能包含不同web程序的拼接，无法保证页面元素具有相同的id或name属性。javascript总是返回它遇到的第一个id或者name相符的页面元素。因此，Portal程序可以
用来改写页面元素的id和name属性，以确保页面元素具有唯一的标识符。

Ensuring Unique Names for Each Page Element

To ensure that Page Flow page elements have unique identifiers inside a Portal, use the tagId attribute to identify the page elements. Workshop will append Portal and portlet context information to the tagId and write the result to the id and name attributes that are rendered in the browser. For example, the following Page Flow elements have been given tagId attributes.

通过使用tagId属性来标识页面元素，来保证Page Flow页面元素有唯一的标识符。

            MyJSP.jsp

        <netui:form tagId="myForm" onSubmit="return validateForm2()" action="myAction2">
           First Name: <netui:textBox tagId="firstName" dataSource="{actionForm.firstName}"/><br>
           Last Name:  <netui:textBox tagId="lastName" dataSource="{actionForm.lastName}"/><br>
           <netui:button type="submit" value="Submit"/>
        </netui:form>

When these Page Flow elements are contained in a Portal, they are rendered in the browser as the following HTML. Notice that Workshop has rewritten the id attributes to include context information about the Portal and portlet in which the Page Flow elements appear.

        <form id="portlet_3_1myForm" method="post" οnsubmit="return validateForm()">
            First Name: <input type="text" id="portlet_3_1{actionForm.firstName}" value=""/><br>
            Last Name:  <input type="text" id="portlet_3_1{actionForm.lastName}" value=""/><br>
           <input type="submit" value="Submit"/>
        </form>

Accessing Page Elements with JavaScript

To ensure that these page elements are available to client-side JavaScript, Workshop also provides a mapping function, getNetuiTagName( tagId, tag ), that maps the tagId values to the re-written id (and name) values that are rendered in the browser. The mapping is encoded into a JavaScript object written to the HTML source of the page.

为了确保客户端javascript能够访问页面元素，Workshop提供了一个映射函数getNetuiTagName( tagId, tag )

        // Build the netui_names table to map the tagId attributes
        // to the real id written into the HTML
        if (netui_names == null)
           var netui_names = new Object();
        netui_names.myForm="portlet_3_1myForm"
        netui_names.firstName="portlet_3_1{actionForm.firstName}"
        netui_names.lastName="portlet_3_1{actionForm.lastName}"

The function getNetuiTagName( tagId, tag ) reads this mapping object to retrieve the actual id or name attribute rendered in the browser.

The following JavaScript expression accesses the form element on the page MyJSP.jsp above.

        document[getNetuiTagName("myForm",this)]

The function call getNetuiTagName( "myForm", this ) resolves to the value portlet_3_1myForm. So the JavaScript expression points at the form element on the page.

        document["portlet_3_1myForm"]

To access the firstName element on MyJSP.jsp above, use the following JavaScript expression.

        document[getNetuiTagName("myForm",this)][getNetuiTagName("firstName",this)]

The following JavaScript function performs simple client-side validation on MyJSP.jsp.

        <script language="JavaScript">        
        function validateForm() 
        {
            var error_message = "";
            if (document[getNetuiTagName("myForm",this)][getNetuiTagName("firstName",this)].value =="") error_message += "- your first name /n";
            if (document[getNetuiTagName("myForm",this)][getNetuiTagName("lastName",this)].value =="") error_message += "- your last name /n";
            if(error_message) 
            {
                alert("Please fill in the following fields:/n" + error_message);
                return false; 
            }
            return true; 
        }        
        </script>

Passing the tagId Value to HTML Tags.

If you need to pass the value of the tagId attribute to an HTML tag, use the <netui:getNetuiTagName> tag. The <netui:getNetuiTagName> returns the value of a specified tagId attribute. In the following example, the HTML tag <label> is given access to the value of the tagId attribute.

    <netui:form action="processData">
        <netui:radioButtonGroup dataSource="{actionForm.selection}">
            <label for="<netui:getNetuiTagName tagId="radio1"/>">Display Text 1</label><netui:radioButtonOption tagId="radio1" value="value1"/><br>
            <label for="<netui:getNetuiTagName tagId="radio2"/>">Display Text 2</label><netui:radioButtonOption tagId="radio2" value="value2"/><br>
            <label for="<netui:getNetuiTagName tagId="radio3"/>">Display Text 3</label><netui:radioButtonOption tagId="radio3" value="value3"/><br>
        </netui:radioButtonGroup>    
        <netui:button value="Submit" />
    </netui:form>