Tabs With Oracle Apex

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Tabs With Oracle Apex

Tabs with Oracle Apex Application Express PrerequisitesThis document helps to understand tabs better and points out how one could use Oracles Apex to create tabbed navigation. This document does not: show how to use the wizard to create a application with tabs; show how to change from one lay-out to another; go into details on how Oracle Apex works.

To start this tutorial you should have a basic understanding of Oracle Apex so you know how to get a two tabbed lay-out for your pages. All other knowledge helps. All you need is a running instance (workspace) of Oracle Apex without any pages or predefined tabs, tab sets or any of that.(if they exist, delete all)

The startTo create a tabs we need a page structure. So here we go. Create all these pages (figure 2) though the pages wizard. Make sure you select not to use tabs (Figure 1). This will help to get a better understanding of tabs. (plus wizard doesnt work properly) The pages in our tabbed navigation will be structured in the following manner: Home - welcome - news Products - products - cheese Service - services Contact - information - routeFigure 1 no tabs

Figure 2 Created pages

Tab #1To start tabbing first we will define what is what. After using Apex I have discovered that definitions used in apex arent used consistently. To start we need to create a Tab Set. Only 1 Tab Set is defined for the whole application. This tab set holds all the parents and their children. Usage of multiple tab sets as I define here is beyond the scope op this tutorial.Figure 3 The start of tab #1

We already know the structure of our application so we can start with Standard Tab Set Home and we will be adding two children to this Standard Tab Set; welcome and news In Apex to go to the tabs section (shared components) and start by clicking on the bottom bar where you would add a Standard Tab(figure 3) The following screen will ask you to fill in a Tab Set name. This actually isnt the tab set we have explained above. What we need to enter here is the name of the Standard Tab Set, for us this is Home. Standard Tab Sets are sets of standard tabs. Our Standard Tab Set Home will contain two Standard Tabs welcome, and news. Fill T_HOME as the Standard Tab Set (figure 4) and click next.

Figure 4 Our first Standard Tab Set

On the next screen (figure 5) we will actually create the one and only Tab Set that our application will use. It is most important that you get this right. The label New Parent Tab Set is actually misleading. Is suggests that you name the first Parent Standard tab set Home. Actually we are naming what one could call the main navigation area of an application. So here we enter MAIN_MENU. The next field (New Parent Tab Text) is the name that will display on the Parent of the Standard Tab set we have created in the step before this. Here we fill in Home . The two terms: New Parent Tab Set and New Parent Tab Text seem to be related but what we are actually doing here is defining the name of the Tab Set that holds all the parents and their children and we are setting the label for the first Parent Tab. Quite confusing but click next.

Figure 5 The confusing part

At this stage we get to set the label of the first Standard Tab (the lowest level) Here we enter welcome (figure 6) Look at the screenshot (figure 6) and note that the new Tab Set is set to T_HOME. This means that the welcome Standard Tab belongs to this Standard Tab Set, but actually the term Tab Set is used. Quite confusing, but click next.

Figure 6 The First Standard Tab

The next step is to select the page that will be requested after having clicked the welcome Standard Tab. Here we select page 1 (figure 7) which in our case is the Home page. Click next.

Figure 7 Set the action

After this we ignore all the other settings click next, next, next and create tab to get to the main tabs screen.(figure 8)

Figure 8 Our Tab Set, Standard Tab Set and Standard Tab

To see the (right)tabs in the page lay-out we need to set the Standard Tab Set for a page. For our Home page this was automatically done. But if that is not the case the next section will explain how a Standard Tab Set is set for a certain page. We will show it for the Home page. Under Page Rendering, click the Edit Page Attributes button. (red Circle figure 9) and set the Standard Tab Set for our page(Figure 10). Click Apply changes.

Figure 9 Setting s Standard Tab Set for a Page step 1

Notice that over to the far right (red X figure 9) that under tabs we have no business right now. This area will display the Standard tabs and the Tab Set that will be set for this page.

Figure 10 setting a Standard Tab Set for a Page - step 2

After having set the Standard Tab Set for the Home page we will look at the settings in the Tab region of the page settings over to the right under Shared components, Tabs (Figure 11)

Figure 11 Tab settings for the Home page

Here we can see that our Tab Set MAIN_MENU and our Standard Tab Set T_HOME are showing. Again this is very confusing because they are both referred at as Tab Set. What we are actually seeing is that for this page Home the Tab Set is MAIN_MENU and the Standard Tab Set showing is T_HOME Now lets take a look at our application, launch the Home page by clicking on the traffic light in the top right corner (Figure 11) Here (figure 12) we see our Tab Set containing our first Parent Tab/Standard Tab Set Home and its first Standard Tab child welcome Now lets add the next child news to the T_HOME Standard Tab Set.Figure 12 Our first look at the tabs

Go back to shared components, tabs to add the next Standard Tab(figure 13) Click on the Add link next to the other Standard Tab Welcome

Figure 13 Add the next Standard Tab

On the next screen (figure 14) enter news and click next.

Figure 14 setting the Standard tab label

Select the page that will be requested after clicking on the Standard Tab. In our application this is page News nr. 3. (Figure 15) Click next, next, next and create tab.

Figure 15 Set the action for A Standard Tab

After having added the new Standard tab our Standard Tab Set T_HOME has two Standard Tab children welcome and news. Launch the Home page to see the result. (Figure 16)

Here we can see the Tab Set MAIN_MENU having one Standard Tab Set T_HOME having two children Standard Tabs welcome and news One would now assume that the process for adding more Standard tab sets and standard children is quite straight forward and as described above. But actually it is not. To add another Standard Tab Set (parent with children) to our Tab Set MAIN_MENU we will have to do the following.Figure 16 Two Standard tab children

We can go back to shared components, tabs to add another, as apex calls it Parent Tab. This is actually true, first we must add a parent tab to put our children under. Actually we are

prepping Standard Tab Set nr 2. There are other ways to do so but we will keep to the most logical way of setting up our tabbed navigation. Click add next to Home(Figure 17).

Figure 17 Adding our Second Parent Tab

In the next screen(Figure 18) we will create the next Standard Tab Set Products to which we will add the children products and cheese As we manually created the name for our first Standard Tab Set T_HOME, here apex does it for us. Under water the Standard Tab Set T_PRODUCTS will be created. So actually this step does two things: setting the label and creating the Standard Tab Set. Do I need to say confusing.Click next.

Figure 18 The Second Standard Tab Set

Figure 19 Set action for Standard Tab Set 2 parent Tab

In the next screen(Figure 19) we will set the page that the Parent Tab Products will link to. In our case the page Products nr 5. Click next and create tab to come back to the tabs screen (Figure 20)

Figure 20 The Second Standard Tab Set Products

Now we will add the first Standard Tab child to the T_PRODUCTS Standard Tab Set we have just created. Again the T_PRODUCTS Standard Tab Set was automatically created whilst labelling and creating The parent Tab Products Make sure That the Parent

Tab/Standard tab Set Products is selected. Notice the text above the red line that indicates the selected parent. Click add in the Standard Tab bar to add the first Standard Tab child also named products.

Figure 21 The first Standard Tab child to our second Standard Tab Set T_PRODUCTS

Here(Figure 21) we can see the proof of the naming convention used when creating a new parent Tab Products discussed earlier. In this step where we are adding a child Standard Tab we can see we are doing it for the Standard Tab Set T_PRODUCTS. Click next and select the page to which we want to navigate (Figure 22) In our application this is page nr 5 products. Click next, next , next, create tab to go back to the tabs screen (Figure 23)

Figure 22 setting the action for Standard Tab products

Figure 23 A closer look at the Tabs screen

We can see that our Standard Tab is added to the Standard Tab bar. In the red square we can see some useful information: the Parent Tab that is selected, one could also say: The Standard Tab Set (T_PRODUCTS) that is selected, the selected Standard Tab that is selected products and the page that the Standard Tab is Current for. Looking at the visual aspect of this page. All of this is clear. The parent Tab Products is selected because it is green. The Standard Tab is showing and page 5 products as well. No we will take a closer look at some of the settings from our Standard Tabs and Standard Tab Sets. Click on utilization (Figure 24 red arrow nr 1) to see the settings for our Standard Tabs in this application. Just to be clear the Standard Tabs are the of the lowe