studentregistration ADF

8/4/2019 studentregistration ADF

1/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 foraccepting 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_pkprimary key,Country_name varchar2(30) constraint Countries_Name_nn not nullconstraintCountries_Name_uk unique)

Towns

create table Towns (Town_id number(10) constraint Towns_id_pkprimary key,Town_name varchar2(30) constraint Towns_name_nnnot null,Country_Id number(10) constraint Towns_countryId_fkreferences Country (Country_id) constraint Towns_CountryId_nnnot null)

Registration form

Create table Registration_form( First_name varchar2(30) constraintRegistrationform_firstname_nn not null,Last_Name varchar2(30) constraint Registrationform_LastName_nn not null,

Gender varchar2(30) constraint Registrationform_gender_ch check (Genderin('Male','Female')) Enableconstraint Registrationform_gender_nn not null ,

Country_id number(10)constraint Registration_country_nn not null constraint Registration_country_fkreferences Country(country_id),Town_id number(10) constraint

Registration_Townid_fkreferences Towns(Town_id))

1


2/37

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

commitinsert 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


3/37

Building Application:After opening Jdeveloper 10g we make a connection to hr

schema select database then right click and choose New

Database Connection

3


4/37

And finally test Connection

4


5/37

5


6/37

Making the Application:

1. Clickthe Application navigator, select Application andchoose new Application

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

6


7/37

Here we have two projects Model, ViewController

Dealing with the modelSelect the model project, right click and then click new

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

7


8/37

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

Next

8


9/37

In step two we shuttle all the available entity objects to make updatable view objectsfor all the three entities we have and click next

Click next once more to skip making read only view object because we does not needthem

In step 4, we rename our Appmodule: Regservice and then click finish.

9


10/37

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_NAMEFROM TOWNS Towns where Towns.COUNTRY_ID=: pp

And click test to test the query

10


11/37

Click ok on the small windows and then click on Bind variables to add pp as bindvariable. 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 thenwe choose validation select FirstName attribute and click new

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

11


12/37

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 tencharacters 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 okThen 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


13/37

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

13


14/37

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

config and name it Registration.jspx double click on thepage to launch the wizard to create the page

14


15/37

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 amanaged bean to the page. Click next

15


16/37

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

16


17/37

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 panelpage

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 theTitle to Registration Form

17


18/37

Using the data controlFrom the Data control palette beside the componentpalette (if you don't see it select from menu bar in

Jdeveloper view +Data Control Palette) expand it and

select Registrationformview 1

18


19/37

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. Wewill add them later as radio buttons and lists .click ok

Save all your work

19


20/37

Adding Gender as radio button

In the Data Control Paletteselect Gender, drag Gender Item inRegistration formview object and drop it on theaf:panelForm.

In the popup menu, select Single Selections > ADF Select One Radio

20


21/37

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

MaleFemale

Finally in No selection Item drop down list we will choose selection required .click ok

21


22/37

Adding Country name drop down list:Note that here we will use country view object to display the lists of counties we hadin a drop down list what the user will choose is the name of country but what willinsert into database is the Id of this country not the name of it

1) Back in the Data Control palette expand the Registrationformview1 exposingthe attributes

2) Select CountryId and Drop it on the af:panelForm.

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

Select One Choice

22


23/37

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 Sourceitem

This action creates a new Iterator.

5) Select the Countryview1 view object and keep the default Iterator Name ofCountryView1Iterator

6) ClickOK

7) make sure the Base Data Source Attribute is CountryId and the List DataSource Attribute is CountryId as in the picture

23


24/37

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 townsname drop down list

1) Back in the Data Control palette expand the Registrationformview1 exposingthe 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 itemThis action creates a new Iterator.

4) Select the Townsview1 view object and keep the default Iterator Name ofTownsView1Iterator

24


25/37

5) Click ok

6) Make sure the Base Data Source Attribute is TownId and the List Data SourceAttribute 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


26/37

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) Iwill not talk about page definition file now. But I will explain this step in Arabic tounderstand how to make a list that depend on another list

drop down listusertrigger partial invoke

actionTownsView viewObjectdrop down listUserid

Let's see how we can do that

1(In the Data Control Palette expand TownsView1 >Operations and from

the various operations select Executewithparams

26


27/37

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 takethe parameter of the where clause and then execute the query will be in the formatof command link)note that we will delete it later but we make this to see thiscommand link in the bindings of Page definition of our page2) Right-click the af:panelForm and select Go to Page Definition

27


28/37

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

28


29/37

(3 after selecting this variable, in the property inspector set its NDValue asthe following expression language${bindings.RegistrationFormView1CountryId.CountryId}This expression means that the value of this variable will take fromcountryID IN RegistrationFormView1 )

drop down listuser

NDValueppClick 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


30/37

5) In insert invokeaction dialog box Set the ID property

to whichcountry and using the drop-down list, set the

Binds property to ExecuteWithParams

6(Click the Advanced Properties tab, Set the Refresh property renderModel and

click ok.Save all your work

30


31/37

We have two other steps to make this list depend on the countries list (7

a) Back to our Page (Registration.jspx), In the Structurepane, selects the first selectOneChoice

And using the Property inspector set the AutoSubmit property to trueb) 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


32/37

8(

delete ExecuteWithParams Command link since we no longerneed it.

9(Save all your work

The Last StepAdding create button to our page to insert our choices to

the database

Inthe Data control palette expand RegServiceDataControl then

operation and then select commit operation (to commit

changes to the Database(

32


33/37

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

33


34/37

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 messageshould appear

34


35/37

Correct error message and then select any country and its

towns will appear in the other drop down list

35


36/37

Click on create button to insert this row into the

Database.

36


37/37

Date post:	07-Apr-2018
Category:	Documents
Upload:	scribdfc007
View:	222 times
Download:	0 times

studentregistration ADF

Documents