NetUI HTML Tags

NetUI HTML Tags

The NetUI Framework is a set of tag libraries based on Struts 1.1. In fact, Struts applications that have been developed can be called from Page Flow applications. The NetUI Framework's set of tag libraries has been added for developers' convenience. One is the netui-tags-html tag library, which has many of the basic tags for working with links, such as the <anchor> tag. The difference between these tags and standard HTML library tags is that you can use XScript expressions in NetUI tags, which makes it possible for the tags to access Page Flow variables . This section examines two subsets of tags from the netui-tags-html library: form and image tags.

Form Tags

The form tags in the netui-tags-html library should be familiar if you've used the standard HTML library. Using the NetUI form tags makes it easier to develop an integrated solution with Form beans. A major difference between the <netui:form> tag and its <form> counterpart is the definition of the action attribute. With the standard <form> tag, action defines what URL should be accessed when the form is submitted. With the <netui:form> tag, action defines which of the Page Flow Controller's actions should be carried out when the form is submitted. This difference is a subtle but important one. To get the standard HTML behavior with the NetUI tag, you use the href attribute instead of the action attribute.

The form tags also include all the form input elements you've used with the standard library, such as check boxes, text boxes, text areas, buttons , and so on. An advantage of the NetUI tags is that validation is built in if you're using Form beans, and you can have an error message displayed next to the form element that's causing a problem. (This topic is discussed in the "Form Bean Validation" section in Chapter 4, "Developing with Page Flow.") The following code is an example of using the <netui:textbox> tag from CreditCard.jsp :

 <netui:form action="purchaseChips" > <netui:textBox     dataSource="{actionForm.creditCardNumber}"     maxlength="16"> </netui:textBox> </netui:form> 

This code uses the maxlength attribute, as you normally would with the standard tag. The dataSource attribute is also used to define where form information should go when the form is submitted. When working with forms, most of the time you use Form beans, so the value in this case is an XScript expression: {actionForm. xxx } . In this expression, xxx is the Form bean attribute. This code example shows setting the creditCardNumber value for the Form bean.

Image Tags

Three different tags enable you to display images:

• <netui:image> displays just the image.

• <netui:imageAnchor> displays the image as a link.

• <netui:imageButton> displays the image as a button.

The only real advantage of using the <netui:image> tag is that adding it opens a dialog box that prompts you to navigate to the image to be displayed. This feature helps you avoid entering incorrect paths for images so that you don't have broken image links.

The <netui:imageAnchor> tag encapsulates an <anchor> tag around an image. As a result, your code looks cleaner because you see just the image URL and the action it should call. You walk through the same creation wizard used with an <anchor> tag, except for the additional element of specifying the path to the image, shown in Figure 7.1.

Figure 7.1. Creating an <imageAnchor> .

The <netui:imageButton> tag is used to display an image as a button. The button is not a Submit button that forces a call to the server when it's clicked. However, you can add JavaScript events to have something happen when the button is clicked. In this way, you can avoid having to use more than one tag to get this button functionality.