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))

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

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

And finally test Connection

Making the Application: 1. Click the Application navigator, select Application and choose new Application

2. Enter the name of Application and choose from drop down list Application Template (JSF ADF BC)

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

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

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.

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, Towns.TOWN_NAME FROM TOWNS Towns where Towns.COUNTRY_ID=: pp And click test to test the query

10

Click ok on the small windows and then click on Bind variables to add pp as bind variable. 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, lastName attributes 1. Double click on Registration form Entity to open Entity object Editor and then we choose validation select FirstName attribute and click new

2. In the first drop down list we choose Regular Expression Validator 11

In Enter Regular Expression text box we write this expression [^0-9]{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. Click ok

Then repeat step 1,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, 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 .In the label text type Country Name

12

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

13

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.jspx double click on the page to launch the wizard to create the page

14

1. Skip the welcome page and click next. 2. In step 1 of 4, choose jsp document, uncheck mobile support and click next

3. In step 2 of 4, select automatically expose UI Components in a managed bean. This Choice will create a managed bean to the page. Click next

15

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

16

The page will appear in the design editor .To add some design of the page we will add A panel page a. 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. 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

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

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, keep FirstName, lastName and delete all except this. We will add them later as radio buttons and lists .click ok

Save all your work

19

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, select Single Selections > ADF Select One Radio

20

In the List Binding Editor, 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. Here we will write Male Female Finally in No selection Item drop down list we will choose selection required .click ok

21

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.

3) In the popup menu, select Single Selections > ADF Select One Choice

22

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, 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 List Items area, set the Display Attribute to Country Name 8) The List Binding Editor should look like that

9) Click ok 10) Save your work.

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, click the Add button, next to the List Data Source item This action creates a new Iterator. 4) Select the Townsview1 view object and keep the default Iterator Name of TownsView1Iterator

24

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, set the Display Attribute to Town Name 8) The List Binding Editor should look like that

25

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

(3 after selecting this variable, in the property inspector set its NDValue as

the following expression language ${bindings.RegistrationFormView1CountryId.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.xml page definition, Right-click on the Executables node ,select TownsView1Iterator ,right click and select Insert before TownsView1Iterator >invoke action (we will make an action before This iterator)

29

In insert invokeaction dialog box Set the ID property to whichcountry and using the drop-down list, set the Binds property to ExecuteWithParams
5)

Click the Advanced Properties tab, Set the Refresh property renderModel and (6 click ok.Save all your work

30

We have two other steps to make this list depend on the countries list (7 a) Back to our Page (Registration.jspx), In the Structure pane, selects the first selectOneChoice

And using the Property inspector set the AutoSubmit property to true b) Then select the af:panelForm , in the property Inspector click the PartialTrigger property to invoke PartialTriggers dialog box click new and from drop down list select selectOneChoice1

31

(8 delete ExecuteWithParams Command link since we no longer .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

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

33

Select the af:command button and in the property Inspector, set the Text Property to create and set the Disabled property to false so the commit button is always enabled .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

Click on create button to insert this row into .Database

the

36

37