Tuesday, July 24th, 2007...1:39 am
ADF Faces for Dummies - 2.2: Create Your Hello World App (Continued)
Jump to Comments
JSF programming is about drag&drop. So the first step we need to d is to open the “Component Palette” on the right side and select the “ADF Faces Core” component group from the drop down list. (”ADF Faces Core” components are the main components you will be using when you build a ADF Faces application)
Find the “OutputFormatted” components from the list of components under “ADF Faces Core”, drag and drop this component onto our blank JSF page. The “OutputFormatted” component is used to create some free-text on the page.
Then we change the text in shown by the component by changing its properties in the property pane.
First we change the “title” property to “Login Into Hello World”, then we expand the “inlineStyle” proper to tweak a little bit on the font color and size as show here. The changes will be seen in the WSYIWSG editor immediately.
Next, we will create the login form which includes the user id and password input control and a submit button. To layout these controls on the page, we will use another JSF component - PanelForm.
There are quite a lot of components in JSF and ADF Faces which are called PanelXXXX, like PanelForm, PanelPage, PanelGroup. These components are all used to help the designer layout other visual components, like button or input box, on the JSF page. Remember, JSF programming is more like the traditional Delphi and Java Swing programming, where you create a page layout by using Panels or Canvas components, instead of HTML
The PanelForm is a layout component which will place its children components in the way we usually see in a HTML form (vertically aligned). After you drag&drop the PanelForm into your page, you will see a box has been created for you. Then, we will drag&drop a InputText component right into the box. The InputText in JSF is a little different from the HTML Input field, it actually goes with a Label in front of the text input box.
Then we need to add another InputText for password. This time we still use drag&drop, but we will not drop it onto the page. I will show you another way to add a component to a page.
On the left side of the editor, you should see a pane window called “Structure”. If you cannot see it, you just find it in the “View” main menu. The “Structure” window gives a hierachy view of the file you are currently editing.
For the login.jspx file, you can see there is already a PanelForm and an InputText in the Structure window. What we will do is drag&drop another InputText into the Structure window right below the first InputText within the PanelForm, so it become another child of PanelForm.
After the drag&drop, you will see another InputText is added. It’s the same as drop onto the page but it more acurrately controlled.
Then we make some changes to the two InputText’s properties to change the Label and make the password input hide the actuall text.
Now we have the input fields, what needed next is just a submit button. The button control in ADF Faces is called “CommandButton”. We will drag&drop it onto the page. But this time we will drop it in the little rectangle place which says “footer”.
The footer is a built-in Facet of the PanelForm. A Facet is nothing but just a placeholder in a component. PanelForm has one Facet called “footer”. Anything you put into this “footer” will be shown at the bottom of the PanelForm when it’s rendered at runtime. Many components have built-in Facet, so the developer will know where to put child components inside a complex component so they will look nicely fit.
Now we have the input fields, what needed next is just a submit button. The button control in ADF Faces is called “CommandButton”. We will drag&drop it onto the page. But this time we will drop it in the little rectangle place which says “footer”.
The footer is a built-in Facet of the PanelForm. A Facet is nothing but just a placeholder in a component. PanelForm has one Facet called “footer”. Anything you put into this “footer” will be shown at the bottom of the PanelForm when it’s rendered at runtime. Many components have built-in Facet, so the developer will know where to put child components inside a complex component so they will look nicely fit.
Let’s change the CommandButton’s text property.
All right, we are done with the creation of the page for Hello World Login page. Let’s have a test…
Right-click on the page, on the context menu choose the “Run”. It will start the Jdeveloper embedded OC4J J2EE appserver and open your page’s URL in the browser.
Now you see what you got for the first-cut of your ADF Faces application. Though there is not much logic in the page, you still can see it is already working when you click on the Login button, just the page return to itself after submit.
In the end of the last session, we have created a blank JSF page (.jspx) . In this session, we will add a simple login form to the page and try to test it in the web browser.
There are quite a lot of components in JSF and ADF Faces which are called PanelXXXX, like PanelForm, PanelPage, PanelGroup. These components are all used to help the designer layout other visual components, like button or input box, on the JSF page. Remember, JSF programming is more like the traditional Delphi and Java Swing programming, where you create a page layout by using Panels or Canvas components, instead of HTML
On the left side of the editor, you should see a pane window called “Structure”. If you cannot see it, you just find it in the “View” main menu. The “Structure” window gives a hierachy view of the file you are currently editing.
For the login.jspx file, you can see there is already a PanelForm and an InputText in the Structure window. What we will do is drag&drop another InputText into the Structure window right below the first InputText within the PanelForm, so it become another child of PanelForm.
The footer is a built-in Facet of the PanelForm. A Facet is nothing but just a placeholder in a component. PanelForm has one Facet called “footer”. Anything you put into this “footer” will be shown at the bottom of the PanelForm when it’s rendered at runtime. Many components have built-in Facet, so the developer will know where to put child components inside a complex component so they will look nicely fit.
The footer is a built-in Facet of the PanelForm. A Facet is nothing but just a placeholder in a component. PanelForm has one Facet called “footer”. Anything you put into this “footer” will be shown at the bottom of the PanelForm when it’s rendered at runtime. Many components have built-in Facet, so the developer will know where to put child components inside a complex component so they will look nicely fit.
Right-click on the page, on the context menu choose the “Run”. It will start the Jdeveloper embedded OC4J J2EE appserver and open your page’s URL in the browser.
2 Comments
February 17th, 2008 at 8:41 pm
rpmfz tcwn pjhsel dsnoiewha resvwd nhytsix tgiesof
February 17th, 2008 at 8:43 pm
edcm lgqhzjvnk xyweuzmjs psengcyzk ydczgoke rwiask iphjkegbo http://www.mpboukes.zbqno.com
Leave a Reply