TYPES OF Region @ OAF

TYPES OF Region IN OAF

1.Message Component Layout Region

2.Header Region

3.Row Layout Region

Message Component Layout Region

In this chapter we are going to learn creation of regions in the page and for each region here we are taking two or more items with item style as “messageTextInput” so that we will come to know that how the items are placed in the regions. Each region will place items in different styles. Let us see some layout regions:

1) Message Component Layout Region

First create one Project which we learned in previous chapters like Welcome Page creation.

After creating a page, go to page structure and select region after selecting region right click on the region and then select New-> Region. Now a region will be created under a page region.

After creating region change the region style to “MessageComponentLayout” in the property Inspector as shown in the below figure:

Observe the property inspector and in the visual we added 1 to the rows and 3 to the columns, to see how this rows and columns effect. See the output and observe the items how they are placed by JDeveloper automatically, for that first create items under MessageComponentLayout region, here we created 5 items under the message component layout region and then after creating see the structure of the page how it looks like:

Give the prompt names to each items and remember here we are taking item style as “messageTextInput” for all the items, run the page and see the output to see how the items are placed in message Component Layout region:

Header Region

In previous lesson we learned how the Message Component Layout region looks like and how to create it, now using the same page here in this lesson we are going to see how the Header Region looks like and what are the properties available in the Header region in JDeveloper.

Header Region Creation

Right click on the main region and select the New -> Region as shown in the below figure:

Select the region style as Header and if we observe in the visual area we can provide Text, give some text like Header Region and while when comparing this header region with the message component layout region we can observe that in message component layout region we don,t have a option to provide Heading text where as in Header region we can provide headings but item control is not there like rows and columns in MessageComponentLayout Region.

The below figure shows the property inspector of Header Region just have a look:

Now after creating Header region create three items with Item Style as MessageTextInput:

Similarly create two more items to see the items arrangement in Header Region, and note that for all the items the item style is MessageTextInput.

Give some prompt names to all the items

After creating three items the structure of the page looks like the following:

Now run the page and see the output here we can identify the difference between Header region and MessageComponentLayout region:

Row Layout Region

In this lesson we are going to see how the rowLayout Region looks like and how the items are displayed inside the rowLay0utRegion.

Creating Row Layout Region

First create one page, here we are taking the same page which we created in the previous chapters and it already contains MessageComponetLayout region and Header region.

Create one region, right click on the main region and then select New -> Region

Select region style as “rowLayout” in the Property Inspector, and if we observe the Property Inspector we have Horizontal Alignment and Vertical Aligment .

Center, End, Left, Right, Start are the available alignments for Horizontal. By Default , Default is the alignment type which is nothing but works as Start Alignment.

For Vertical Alignment Bottom, Middle, and Top are the available alignments.

The below picture shows the property inspector of Row Layout Region:

After creating RowLayout region create four items under the rowLayoutRegion and also give prompt names for each created items under RowLayout region.

Now run the page and see the output, it displays all the items in single row.

The below figure shows how the output looks like and also observe that in the below figure how the items are placed in MessgeComponentLayout region and Header Region along with the Row Layout region.