Sunteți pe pagina 1din 37

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

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

Registrationform_gender_ch check (Gender

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

Jdeveloper 10g we make a connection to hr schema select database then right click and choose

3

And finally test Connection 4
And finally test Connection 4

And finally test Connection

4

5

5

Making the Application:

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

navigator, select Application and choose new Application 2. Enter the name of Application and choose from

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

new Application 2. Enter the name of Application and choose from drop down list Application Template

6

Here we have two projects Model, ViewController

Dealing with the model

Select the model project, right click and then click new

Select the model project, right click and then click new Choose ADF business Components (business components

Choose ADF business Components (business components from table) and click ok

project, right click and then click new Choose ADF business Components (business components from table) and

7

Click on query and then select the three entity object we made and shuttle them

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

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

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

objects for all the three entities we have and click next Click next once more to

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.

only view object because we does not need them In step 4, we rename our Appmodule:

9

Adding bind variable to TownsView Double click on towns view to open it in the viewObject Editor

click on towns view to open it in the viewObject Editor Select SQL Statement and then

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

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 on the name write :pp and in the type we choose Number Then we click

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

choose validation select FirstName attribute and click new 2 . In the first drop down list

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

will appear to the user if he insert wrong Data. Click ok Then repeat step 1,2

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

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.

attribute and call it Town Name. These Names will appear to the End User on the

13

Making our registration page Right click on the ViewController project and select open JSF navigation

on the ViewController project and select open JSF navigation Drag A JSF page from the component

Drag A JSF page from the component palette to the faces-

config 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

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

choose jsp document, uncheck mobile support and click next 3. In step 2 of 4, select

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

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

4. In step 3 of 4 shuttles the libraries that was indicated in the picture then

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

palette select ADF Faces core and then drag a panel page And drop in inside the

And drop in inside the form in the structure part on the left. The structure should look like that

part on the left. The structure should look like that Change the title of panel page:

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

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

see it select from menu bar in Jdeveloper view +Data Control Palette) expand it and select

18

1)

Drag the Registratinformview1 view object and drop it on the af:panelPage node in the Structure pane

In the popup menu, select Forms ADF Creation Form

In the popup menu, select Forms  ADF Creation Form In the Edit Form Fields pane,

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

lastName and delete all except this. We will add them later as radio buttons and lists

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.

form view object and drop it on the af:panelForm . In the popup menu, select Single

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

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

Here we will write Male Female Finally in No selection Item drop down list we will

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.

2) Select CountryId and Drop it on the af:panelForm . 3) In the popup menu, select

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

CountryId and Drop it on the af:panelForm . 3) In the popup menu, select Single Selections

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

and keep the default Iterator Name of CountryView1Iterator 6) Click OK 7) make sure the Base

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

sure the Base Data Source Attribute is CountryId and the List Data Source Attribute is CountryId

23

In the List Items area, set the Display Attribute to Country Name

8) The List Binding Editor should look like that

Name 8) The List Binding Editor should look like that 9) Click ok 10) Save your

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

2)

the attributes 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

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

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

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

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)

bindings then ExecuteWithParams then select pp (this is the binding variable we define in our viewobject

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 ﻝﺍ ﺎ ﻫﺭ ﺎﺘ ﺨ ﻴ ﺳ ﻰ ﺘﻟ ﺍ ﺔ ﻟ ﻭﺪ ﻟ ﺍ ﻦ ﻣ ﺎﻫﺬ ﺧ ﺎﻴ ﺳ ﻪ ﺘﻤﻴ ﻗ ﻥ ﺍ ﻚ ﻟ ﺫ ﻰ ﻨ ﻌﻣ

ﺳ ﻪ ﺘﻤﻴ ﻗ ﻥ ﺍ ﻚ ﻟ ﺫ ﻰ ﻨ ﻌﻣ Click ok NDValue ﺭ

Click ok

NDValue ﺭ ﺎﻴ ﺘﺧ ﺍ ﻞ ﺒ ﻗ pp ﻰ ﻠ ﻋ ﻒﻘ ﺗ ﻥ ﺍ ﺐ ﺠ ﻳ ﻪ ﻧﺍ ﻆ ﺣﻻ

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

5) In insert invokeaction dialog box Set the ID property to whichcountry and using the

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

drop-down list, set the Binds property to ExecuteWithParams Click the Advanced Properties tab, Set the Refresh

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

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

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

In the Structure pane, selects the first selectOneChoice And using the Property inspector set the AutoSubmit

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

(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

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

facets and select footer ,drag commit operation and drop it on the footer ,in popup menu

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

always enabled .The Property inspector should look like that Save all your work and right click

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

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 the .Database 36

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

36

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

37