Wednesday Oct 31, 2007

Centering components in a (visual) web form

One of the typical requirements for a web application developer is to build a secure, identity enabled web application. NetBeans supports this usecase either by employing the bundled JavaServer Faces components, or a combination of JSP & HTML. On the backend the user can either use container based authentication, a database or some custom authentication mechanism.

Let's explore what one would have to do to build the a login page in NetBeans. In order to speed up the development, one can choose the visual application features (File | New Project | web | ... "Next" in the first page of the wizard | check the "Visual JSF" option and voila you have a page and a palette full of useful components that you can just drag and drop them in the form (page).

Further my requirement will be to center the group of components in the page. This turned out to be a little tricky so here are some steps that one can follow to work around this NetBeans shortcoming:

1. Select the page in the designer and in the property pane switch to Flow Layout
2. Remove style attribute.
3. In the JSP view of the page, use  <center> and <br> tags to adjust layout.

This works at both design time and run time. Here is an example of the a form that uses a couple of labels, textfields and button to submit the form.

<webuijsf:form binding="#{Page1.form1}" id="form1">
                       <center>
                           <webuijsf:label binding="#{Page1.label1}" id="label1"  text="Label"/>
                           <webuijsf:textField binding="#{Page1.textField1}" id="textField1" />
                           <br/>
                           <br/>
                           <br/>
                           <webuijsf:label binding="#{Page1.label2}" id="label2"  text="Label"/>
                           <webuijsf:textField binding="#{Page1.textField2}" id="textField2" />
                           <br/>
                           <br/>
                           <br/>
                           <webuijsf:button binding="#{Page1.button1}" id="button1"  text="Button"/>
                       </center>
                       <br/>
                   </webuijsf:form>

Many thanks to Jayashri for helping me work out a solution.

Perhaps in a the next installment I'll talk more about authentication and how to deploy on an https port using the Glassfish application server.

About

octav

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today