Monday, January 05, 2015

Creating a new APEX application

Previously I announced I would start a chain of blog posts related to Oracle Application Express. Next to the blog posts I'll build up a supporting APEX application where you can see the result of what I explain in real-time.


So, to start the chain I'll create a new APEX application. Almost in every project I start my APEX application the same way. Note that the screenshots are from APEX 4.2.6, as of the time of writing, that is the current latest production release, but I'll mention how things change with APEX 5.0

First I create a APEX application with the wizard (Create > Database application > Next > Next > Next > and use following settings for the Application Attributes:


For my navigation in the application I use Lists. Tabs are old school, so in this screen I changed the default One Level Tabs to No Tabs. If you like Tabs you can always apply a Tab template to your List. Note that in APEX 5.0 this is standard behaviour - APEX will create a "Navigation List" which you can give any look and feel you want.

The date format I filled in too. I like the DD-MON-YYYY format as there's no discussion what the format is (unlike dd/mm/yy or mm/dd/yy etc.)

In APEX 4.2 I start from Theme 25 as that is the responsive theme, so it will adapt to the type of screen it will be rendered on.


In APEX 5.0 I would go for the Universal Theme. That will be responsive and fully customisable through Theme Roller, but I will blog more about that once APEX 5.0 EA3 is released.

Next I give the application an alias (in Application Attributes), in my case DGIELIS_BLOG. That allows me to reference the application in an easier way than to remember the id of the app. 


I'll always create two pages: 
  1. the Global Page (Typically Page 0) which will serve the content that needs to be available on every page for example my List for navigation and my Breadcrumbs region.
  2. the Feedback Page, so people can immediate feedback of my application. This feedback will be captured in Team Development, a fully integrated project management feature of APEX.

The Feedback Page I customise further:


The Application and Page ID I make hidden as they are of less use for the customer. The A, X, Y items I delete. The APEX Development team created those items to align the items better (start-stop table), but with the responsive theme 25 they are not necessary and just overkill. I hope in APEX 5.0 those items are not there anymore.
Finally I give the buttons a template (button Template) and make the Submit button hot.

One of my best practices is to make at least one button per page "hot" - the button that is likely to be used most of the time - as that makes the page more lively and user friendly.

The last step for my new application is to create my main navigation. So I create a List (Shared Components > Lists). I create a static List with as name Navigation and I enter the Home Page as first item in the list. Note that in APEX 5.0 such a list will automatically be created for you.

I will add this list to the Global Page (0) - add new Region without Template and select the list.
If you like Tabs, you can chose the Page Level Tabs List for your List Template:

If you selected a List Template different than Tabs you are done, but if you want to see real Page Tabs, you need to read further.
Before those Tabs are visible we need to make sure our Page Template supports tabs.
As during the creation of the application we chose not to use tabs, the default Page template didn't include a "Tab space", so we need to change that.
Go to Shared Components > Themes - Edit Theme (Tasks) - and select for your Page: One Level Tabs:



Now if you place the List Region on Page 0 at Position 6 the List will show up as Tabs as you expect.

You find the app at https://www.apexrnd.be/ords/f?p=DGIELIS_BLOG.

Tomorrow we'll add a report and highlight the negative numbers (with just some css!).

1 comment:

Anonymous said...

Another advantage to using a List to render the page Tabs is that, unlike the Apex tabs, they render an ordinary page link instead of posting the page.

P.S. the previous comment was intended for another article :)