In this tutorial we will make a registration form using (ADF technology) that has the following fields FirstName

: required and has another validation for accepting characters only LastName: required and has another validation for accepting characters only Gender: radio buttons to choose male or female (required) Also we have a drop down list to choose your country and based on this choice there is another drop down list to choose from the towns in this country you choose. We must explain that the user choose country name, and town name but what insert in the Database is countryId and townId First of all we must create these tables in any schemas we have (for Example Hr) and insert countries and towns which will appear in the Drop down List These are the scripts of the Database

Country
create table Country(Country_id number(10) constraint Countries_ID_pk primary key,Country_name varchar2(30) constraint Countries_Name_nn not null constraint Countries_Name_uk unique)

Towns
create table Towns (Town_id number(10) constraint Towns_id_pk primary key,Town_name varchar2(30) constraint Towns_name_nn not null,Country_Id number(10) constraint Towns_countryId_fk references Country (Country_id) constraint Towns_CountryId_nn not null)

Registration form
Create table Registration_form( First_name varchar2(30) constraint Registrationform_firstname_nn not null, Last_Name varchar2(30) constraint Registrationform_LastName_nn not null, Gender varchar2(30) constraint Registrationform_gender_ch check (Gender in('Male','Female')) Enable constraint Registrationform_gender_nn not null , Country_id number(10) constraint Registration_country_nn not null constraint Registration_country_fk references Country(country_id),Town_id number(10) constraint Registration_Townid_fk references Towns(Town_id))

1

Inserts
Insert into country values (1,'Egypt') insert into country values (2,'United States') insert into country values (3,'France ') insert into country values (4,'United Kingdom') commit insert into towns values (100,'Cairo',1) insert into towns values (101,'Alex',1) insert into towns values (102,'Aswan',1) insert into towns values (200,' Washington',2) insert into towns values (201,'California' ,2) insert into towns values (202,'Colorado' ,2) insert into towns values (300,'Paris' ,3) insert into towns values (301,'Cannes' ,3) insert into towns values (302,'Lyon' ,3) insert into towns values (400,'London' ,4) insert into towns values (401,'Liverpool' ,4) insert into towns values (402,'Westminster' ,4) commit

2

Building Application:
After opening Jdeveloper 10g we make a connection to hr schema select database then right click and choose New Database Connection

3

And finally test Connection 4 .

5 .

Enter the name of Application and choose from drop down list Application Template (JSF ADF BC) 6 .Making the Application: 1. Click the Application navigator. select Application and choose new Application 2.

Here we have two projects Model. ViewController Dealing with the model Select the model project. right click and then click new Choose ADF business Components (business components from table) and click ok 7 .

Click on query and then select the three entity object we made and shuttle them in the selected Entity and Next 8 .

In step two we shuttle all the available entity objects to make updatable view objects for all the three entities we have and click next Click next once more to skip making read only view object because we does not need them In step 4. we rename our Appmodule: Regservice and then click finish. 9 .

TOWN_NAME FROM TOWNS Towns where Towns. Towns.COUNTRY_ID=: pp And click test to test the query 10 .Adding bind variable to TownsView Double click on towns view to open it in the viewObject Editor Select SQL Statement and then check expert mode to edit sql as follows: SELECT Towns.TOWN_ID.

Click on new and then on the name write :pp and in the type we choose Number Then we click apply and ok and then save all icon to save our work Adding Validation on firstName.Click ok on the small windows and then click on Bind variables to add pp as bind variable. In the first drop down list we choose Regular Expression Validator 11 . Double click on Registration form Entity to open Entity object Editor and then we choose validation select FirstName attribute and click new 2. lastName attributes 1.

10} This means that FirstName attribute will accept characters only from one to ten characters and in the error message text box we write: (Only characters please) this message will appear to the user if he insert wrong Data.2 in the lastName attribute and finally click apply and ok Then save all your work The last thing in refining the model is to change the label of the (countryId.In Enter Regular Expression text box we write this expression [^0-9]{1.In the label text type Country Name 12 . TownId)In the control hints of the Entity object (Registration Form) Double click on the entity to open Entity object Editor and then double click on the attributes and then select CountryId then click control Hints tab . Click ok Then repeat step 1.

13 . These Names will appear to the End User on the page.Repeat the last steps on TownId attribute and call it Town Name. Click ok and save all your work.

jspx double click on the page to launch the wizard to create the page 14 .Making our registration page Right click on the ViewController project and select open JSF navigation Drag A JSF page from the component palette to the config faces- and name it Registration.

choose jsp document. select automatically expose UI Components in a managed bean. In step 1 of 4. In step 2 of 4. uncheck mobile support and click next 3. This Choice will create a managed bean to the page. 2. Click next 15 .1. Skip the welcome page and click next.

In step 3 of 4 shuttles the libraries that was indicated in the picture then click finish to create the page.4. 16 .

The structure should look like that Change the title of panel page: Select panel page in structure part and in the property inspector change the Title to Registration Form 17 . from the component palette select ADF Faces core and then drag a panel page And drop in inside the form in the structure part on the left.To add some design of the page we will add A panel page a.The page will appear in the design editor .

Using the data control From the Data control palette beside the component palette (if you don't see it select from menu bar in Jdeveloper view +Data Control Palette) expand it and select Registrationformview 1 18 .

keep FirstName.click ok Save all your work 19 .Drag the Registratinformview1 view object and drop it on the af:panelPage node in the Structure pane 1) In the popup menu. select Forms  ADF Creation Form In the Edit Form Fields pane. lastName and delete all except this. We will add them later as radio buttons and lists .

select Single Selections > ADF Select One Radio 20 .Adding Gender as radio button In the Data Control Palette select Gender. drag Gender Item in Registration form view object and drop it on the af:panelForm. In the popup menu.

click ok 21 .In the List Binding Editor. Here we will write Male Female Finally in No selection Item drop down list we will choose selection required . select fixed list Radio Button and in the Base Data Source attribute drop down list select Gender(the name of Attribute in view object) and in the Set of values text box write the valued that will appear to the user.

select Single Selections > ADF Select One Choice 22 . 3) In the popup menu.Adding Country name drop down list: Note that here we will use country view object to display the lists of counties we had in a drop down list what the user will choose is the name of country but what will insert into database is the Id of this country not the name of it 1) Back in the Data Control palette expand the Registrationformview1 exposing the attributes 2) Select CountryId and Drop it on the af:panelForm.

next to the List Data Source item This action creates a new Iterator. 5) Select the Countryview1 view object and keep the default Iterator Name of CountryView1Iterator 6) Click OK 7) make sure the Base Data Source Attribute is CountryId and the List Data Source Attribute is CountryId as in the picture 23 .In the next steps we refine the data source for the CountryId as it needs to display all the Countries currently in the Countries table 4) In the List Binding Editor. click the Add button.

4) Select the Townsview1 view object and keep the default Iterator Name of TownsView1Iterator 24 . click the Add button. set the Display Attribute to Country Name 8) The List Binding Editor should look like that 9) Click ok 10) Save your work.In the List Items area. next to the List Data Source item This action creates a new Iterator. Adding Town name drop down list In the following steps we will repeat the previous steps to create towns name drop down list 1) Back in the Data Control palette expand the Registrationformview1 exposing the attributes 2) select TownId and Drop it on the af:panelForm 3) In the popup menu. select Single Selections > ADF Select One Choice In the List Binding Editor.

set the Display Attribute to Town Name 8) The List Binding Editor should look like that 25 .5) Click ok 6) Make sure the Base Data Source Attribute is TownId and the List Data Source Attribute is TownId 7) In the List Items area.

9) Click ok 10) Save all your work Be careful in the next steps because we will deal with the page definition of our page (Every page in ADF has a page definition if you use the Data Control Palette) I will not talk about page definition file now. But I will explain this step in Arabic to understand how to make a list that depend on another list ‫ ﺍﺳﻢ ﺍﻟﺪﻭﻟﺔ ﺍﳋﺎﺻﺔ ﺑﻪ ﺳﻮﻑ ﻳﺤﺪﺙ ﻣﺎ‬drop down list ‫ ﻣﻦ‬user ‫ﻣﺎ ﺳﻴﺤﺪﺙ ﻫﻮ ﺍﻧﻪ ﻋﻨﺪﻣﺎ ﻳﺨﺘﺎﺭ ﺍﻝ‬ invoke ‫ ﻟﻠﺼﻔﺤﺔﺍﻯ ﻳﻌﺎﺩ ﲢﻤﻴﻠﻬﺎ ﻭﻓﻰ ﻫﺬﻩ ﺍﳊﺎﻟﺔ ﺳﻮﻑ ﻳﺤﺪﺙ ﻣﺎ ﻳﺴﻤﻰ‬trigger partial ‫ﻳﺴﻤﻰ‬ ‫ ﺍﻟﻘﻴﻤﺔ ﺍﳋﺎﺻﺔ‬TownsView viewObject ‫ ﺍﻯ ﺳﻴﺴﺘﺪﻋﻰ ﺣﺪﺙ ﻣﻌﲔ ﻭﻫﺬﺍ ﺍﳊﺪﺙ ﻫﻮ ﺍﻋﻄﺎﺀ‬action ‫ ﺑﺎﳌﺪﻥ ﺍﻟﺘﻰ ﻓﻰ ﻫﺬﻩ‬drop down list ‫ ﻭﻋﻠﻰ ﺍﺳﺎﺳﻪ ﺳﻴﺘﻢ ﻣﻸ ﺍﻝ‬User ‫ ﻟﻠﺪﻭﻟﺔ ﺍﻟﺘﻰ ﺍﺧﺘﺎﺭﻫﺎ ﺍﻝ‬id ‫ﺑﺎﻝ‬ ‫ﺍﻟﺪﻭﻟﺔ ﻓﻘﻂ‬ Let's see how we can do that In the Data Control Palette expand TownsView1 >Operations and from (1 the various operations select Executewithparams 26 .

Drag this operation and drop it on the structure pane and In the popup menu select operation >ADF Command link (this means that this operation that will take the parameter of the where clause and then execute the query will be in the format of command link)note that we will delete it later but we make this to see this command link in the bindings of Page definition of our page 2) Right-click the af:panelForm and select Go to Page Definition 27 .

2) In the Structure pane of RegistrationPageDef.xml expand bindings then ExecuteWithParams then select pp (this is the binding variable we define in our viewobject TownsView) 28 .

in the property inspector set its NDValue as the following expression language ${bindings.right click and select Insert before TownsView1Iterator >invoke action (we will make an action before ‫ﺗﺸﻐﻴﻞ‬ This iterator) 29 .xml page definition.CountryId} This expression means that the value of this variable will take from countryID IN RegistrationFormView1 ) ‫ ﺍﻻﻭﻟﻰ‬drop down list ‫ ﻣﻦ ﺍﻝ‬user ‫ﻣﻌﻨﻰ ﺫﻟﻚ ﺍﻥ ﻗﻴﻤﺘﻪ ﺳﻴﺎﺧﺬﻫﺎ ﻣﻦ ﺍﻟﺪﻭﻟﺔ ﺍﻟﺘﻰ ﺳﻴﺨﺘﺎﺭﻫﺎ ﺍﻝ‬ NDValue ‫ ﻗﺒﻞ ﺍﺧﺘﻴﺎﺭ‬pp ‫ﻻﺣﻆ ﺍﻧﻪ ﻳﺠﺐ ﺍﻥ ﺗﻘﻒ ﻋﻠﻰ‬ Click ok 4)Back to our RegistrationPageDef.(3 after selecting this variable. Right-click on the Executables node .RegistrationFormView1CountryId.select TownsView1Iterator .

Set the Refresh property renderModel and (6 click ok. set the Binds property to ExecuteWithParams 5) Click the Advanced Properties tab.Save all your work 30 .In insert invokeaction dialog box Set the ID property to whichcountry and using the drop-down list.

in the property Inspector click the PartialTrigger property to invoke PartialTriggers dialog box click new and from drop down list select selectOneChoice1 31 . selects the first selectOneChoice And using the Property inspector set the AutoSubmit property to true b) Then select the af:panelForm .jspx). In the Structure pane.We have two other steps to make this list depend on the countries list (7 a) Back to our Page (Registration.

need it Save all your work (9 The Last Step Adding create button to our page to insert our choices to the database In the Data control palette expand RegServiceDataControl then operation and then select commit operation (to commit (changes to the Database 32 .(8 delete ExecuteWithParams Command link since we no longer .

drag commit operation and drop it on the footer .In the af:panelForm expand Panelform facets and select footer .in popup menu select ADF Command Button 33 .

set the Text Property to create and set the Disabled property to false so the commit button is always enabled .Select the af:command button and in the property Inspector.The Property inspector should look like that Save all your work and right click on our page and select run If we insert numeric values in FirstName or lastName input text .an error message should appear 34 .

Correct error message and then select any country and its towns will appear in the other drop down list 35 .

Database the 36 .Click on create button to insert this row into .

37 .

Sign up to vote on this title
UsefulNot useful