06. OAF Working on Region and Items

Creating Items and Regions In a Page

In this lesson we will learn how to create Items in OAF page and also we learn how to create Regions in a page.Here we are taking the same Welcome Page which we created /learned in the previous lesson.
 
Creating a Region in  OAF page:

Select the .xml page in Applications Navigator. In the page structure Right click on PageId (example “WelcomePageId” which we created early in the previous lesson Welcome Page and then select New -> Region
 

 
By default JDeveloper  takes it as a Header region. We got different types of regions available in the JDeveloper, which are:

1. advancedSearch
2. advancedTable
3. bulletedList
4. cellFormat
5. contentContainer
6. contentFooter
7. defaultDoubleColumn
8. defaultFormStack
9. defaultSingleColumn
10. defaultStack
11. flexibleLayout
12. flowLayout
13. gantt
14. graphTable
15. hGrid
16. header
17. hideShow
18. hideShowHeader
19. labeledFieldLayout
20. messageComponentLayout
21. navigationBar
22. pageButtonBar
23. popUp
24. query
25. rowLayout
26. shuttle
27. stackLayout
28. sub TabLayout
29. switcher
30. table
31. tableLayout
32. train
33. tree

 

 
Give some text in Visual -> Text:, for example “Header Region” text field as shown in the below figure:
 

 
Run the page after giving Text field value and see the output the output will look like:
 

 
In the output observe how the Header Region is appearing and how it looks like we will discuss some important regions which we generally use in OAF pages in the coming chapters.
 
 
Creating Items in  OAF page:

Let us see how to place items in the OAF Page regions and how to place items in the OAF page:

Here we already created a Header Region and if you observe in the above picture the id value of the region is “region1” .

Right click on the region1 select New -> Item as shown in the below figure:
 

 
Now we can see item1 got created under region1.

In the item1 properties if we observe the default style of the item is messageTextInput (which takes input values from user) and give some text for prompt ( for example “Header Region Item1 :”). The same scenario is shown in the below figure:
 

 

We have different styles for items which are listed down:

1. attachmentLink
2. attachmentTable
3. button
4. exportButton
5. flex
6. formParameter
7. formValue
8. formattedText
9. image
10. link
11. messageCheckbox
12. messageChoice
13. messageDownload
14. messageFileUpload
15. messageInlineAttachment
16. messageLovChoice
17. messageLovInput
18. messageRadioButton
19. messageRadioGroup
20. messageRichTextEditor
21. messageStyledText
22. messageTextInput
23. rawText
24. resetButton
25. richContainer
26. richTextEditor
27. separator
28. serveletInclude
29. spacer
30. staticStyleText
31. submitButton
32. tip
33. urlInclude

 
Similarly create one more item in the header region, and for item2 in the properties give prompt ( example Header Region Item2 : ). So therefore the page structure looks like:
 

 
Now create one more item but create it on the pageID so that let us see how the items are going to be displayed in the output, note that we don’t know how the items appear in the page at design time and how the output looks like.

Right Click on the pageID of page structure and then select New -> Item as shown in the below figure:
 

 
After that for the created item3 in Property Inspector give the promt (for example – ” Item1 in the Main page : ” )

The same thing is shown in the below figure:
 

 
Now run the page and see how the page looks like.

The output of the page will look like the following, and observe how the items are displaying in header region and how they are looking out of header region.
 

Ref: newtonapples.com