Oracle Application Express. Applications and Pages

Continuation of the tutorial.

This section describes how to create an Oracle APEX application and create pages in an application.

Previous part: Oracle Application Express Tutorial. IDE Overview

Table of contents

Creating an application
Default pages
Application launch
Creating pages
Main components of pages
Visual elements
Non-visual elements
Basic properties of elements
General properties
Page properties

Creating an application

To create an application, you need to go into App Builder and click the "Create" button.

Next, the application creation wizard will start. In the first step, you need to select "New Application", on the second - just fill in the "Name" and "Application ID" fields (application number). The name is needed simply because it is a required field, and the Application ID is because it will not be possible to change it later. More precisely, it is possible (through export / import), but it is long and tedious, it is better to immediately set the desired number if the automatically generated apex does not suit you. The number must be unique. This number is used as part of the application address. Look at the typical apex URL:

 https://apex.oracle.com/pls/apex/f?p=123456:1:14675052744498::::: 

Here 123456 is the application ID.

You can ignore the remaining fields in the wizard for now, all these settings can be changed later.

After that, you need to click "Create Application", the apex will create the application and automatically take you to the application page, where you will see.

Default pages

By default, the apex will create 3 pages in the application. Pages, as well as applications, have a number and title. The number is also used in the URL to identify the page, it immediately follows the application number and is separated from it by a colon. That is, the format is:

 https://apex.oracle.com/pls/apex/f?p=APPLICATION_ID:PAGE_ID:<  url> 

Default pages are:

• Global page (page ID: 0)
  This is a special page that is not used independently, but on which you can add an element if you want it to appear on all pages.

• Home page (page ID: 1)
  This is the starting page of the application. You will get it by default after entering your login and password in the application, or if you specify the URL of your application without specifying the page and everything else, that is:

  
  

   https://apex.oracle.com/pls/apex/f?p=123456 

  
  
• Login page (Page ID: 9999, in versions 4.x, 5.x was 101)
  This is obviously the login page. It contains fields for entering username and password, for some time (I find it difficult to name the version, but relatively recently) - the tick "Remember username", and the "Sign In" button.

Applications and pages also have the useful property of Alias . For an application, this property is configured in the application properties ("Application Properties" - "Definition" - "Name" - "Application Alias"), and for the page - in the page editor in the properties panel to the right. Alias can be used in the URL of the page instead of the number. The default login page is created with the LOGIN_DESKTOP LOGIN_DESKTOP , and the home page is created with the HOME alias. If you set the application alias MY_APP , then the login page can be accessed at

 https://apex.oracle.com/pls/apex/f?p=MY_APP:LOGIN_DESKTOP 

Application launch

Now that the application has been created, it can already be “launched” (only there is nothing to look at for now). This is not exactly the same as running a normal application (as in Windows or Linux). The apex application is rendered with the same engine as the IDE itself, so once you have created the application, it is instantly ready for use, and any person who enters his address in the address bar can work with it. The actual launch of the application, in fact, is just such a name for opening the start page (the one with the number 1). You can run the application in many ways:

• In App Builder , there is a "Run" column in the list of applications with a button opposite each application;
• on the application page there is a large "Run Application" button;
• not only the application can be “launched”, but any non-dialog page (interactive ones can only be called from ordinary pages): in the list of pages of the application there is also a column with the “Run” button;
• You can start the current page from the page editor by clicking on the button in the upper right corner;
• and, finally, you can launch the page if there are such buttons in the upper right corner:

These two buttons are in almost any section of the IDE. The left contains the number of the last page that you opened in the page editor. Clicking on it will take you to editing this page, and clicking on the right button will launch this page.

What happens after launch? If the page being launched has limited access, the user will first be redirected to the login page. If the user is already logged in, or the settings page is designated as public, this page will open.
By default, the page is created with limited access. There are two possible settings in the page properties (Page editor - right panel - property group "Security" - "Authentication"):

• Page Requires Authentication : the page will be accessible only to logged in users during the session;
• Page is Public : public page, visible to registered and unregistered users.

Creating pages

You can create a page on the application page . Click "Create", then the page creation wizard will start. Wizard Steps:

1. Selecting a page type from (at the moment) 12 types, some of which also have subtypes (if they exist, they will appear in the next step). The first type from the list is "Blank page", that is, a blank page without everything. The remaining types are common variants of the pages for working with the database: reports, input forms, graphics, etc. Here I will describe the process of creating a blank page, and the other types will be a separate article.
2. Enter the page number and name. I spoke about numbers above; the number is set at this step and then it will not be possible to change it, so look carefully. Sometimes developers break pages into groups (by function, for example), and reserve a range of numbers for each group, so if you use this in a project, be careful. Immediately you need to select the type of page: normal, modal dialogue, modeless dialogue.
3. Customize navigation items. You can skip (click "Next") and set up later (although if you have some kind of navigation system already built, it’s convenient to set everything up at this step right away and no longer take a steam bath).
4. Confirmation of creation.

After this page is created and ready to use.

Main components of pages

Visual elements

Visual elements are elements that are somehow displayed on the screen. It:

• Top Menu. Contains the application name, logo, username, link "Logout" (if the user is logged in). There you can add other elements;
• Navigation menu on the left. You can use to navigate through the application, making, for example, the hierarchical structure of the application sections;
• Regions (usually in Russian they are called so - "regions"): containers of elements. They may contain reports, graphs, input fields, buttons and other regions;
• Items (there is no well-established translation into Russian, they call someone in that much, they usually use the word item, a field and often just an item): these are various fields for user input;
• Buttons: well, these are ordinary buttons, in short, what else to say;)
• Reports: tables with data based on SQL queries;
• Charts / diagrams: graphical display of information from the database, also based on SQL queries.

Reports and graphs can be viewed as variations of regions (technically, they are), but they are rather independent entities with their own behavior, properties, and so on.

Non-visual elements

These are elements to ensure the logic of the application. There is actually a huge variety of elements, although the user literally can not see them. Basic types:

• Process (process): as a rule, PL / SQL code executed on the server in response to some user action;
• Validation: a type of process for validating user input;
• Dynamic Action (there is no well-established translation, usually everyone writes this way - Dynamic Action or just DA, and when they are too lazy to switch the layout, they can write a speaker with an action or YES): a process performed by the browser. Ultimately, a DA is a handler for a javascript event. Knowing javascript is not necessary, but if you know (as well as CSS selectors) - you can work wonders;
• Branches (no well-established translation): redirects to other pages depending on certain conditions.

Basic properties of elements

General properties

The basic properties characteristic of each (or almost every) type of elements. They can be viewed and modified in the page editor, where they are grouped together. Here I will briefly describe their purpose (so that you will know what to look for), and I will tell you in more detail in other articles.

• Identification : sets the element name and additional properties (depending on the type);
• Appearance : properties responsible for the appearance of the visual element. For each type of element there is a set of templates, you can choose one of them here ( Template property). Also, templates have additional settings ( Template Options - by clicking on the button, a window with settings will open);
• Layout : Adjust the position of the visual element on the page. The elements are arranged in a grid of 12 columns, here you can specify exactly how they should be located;
• Source : for regions and items, the source of data to be displayed, for processes, the process code;
• Server-side Condition : a condition that is checked on the server (there is a huge choice of conditions, from simple ones, such as such an element has such a value to arbitrary PL / SQL code). The element will be displayed on the page, if this condition is met, and if not, it will not. And it will not be hidden, but simply not rendered;
• Client-side Condition ( Dynamic Action ): condition checked on the client (without accessing the server). DA will be satisfied if the condition is met;
• Read only : works the same way as Server-side Condition , only controls not the presence / absence of the element, but the ability to change the value. This property is in items, regions and pages. For an item, it applies to the item itself, and for regions / pages, it applies to all items within the corresponding region / page;
• Security : control access to the item. In principle, all the same can be done using Server-side Condition , but it is better to distinguish between: Server-side Condition for application logic, Security for display depending on access rights.
• Configuration : to enable / disable the Build Option . A very non-obvious thing, but very useful: allows you to turn on and off individual features of the application, which is very convenient when you are developing parallel features for several different releases;
• Comments : comments for other developers;
• Help (for visual elements): help for end users of the application.

Page properties

Properties specific to pages:

• Navigation : there are two properties in this group. Cursor Focus specifies whether to transfer the focus to the input field on the page immediately after charging (options are either not to transmit, or to transfer to the first field on the page). Warn on Unsaved Changes does not allow the user to leave the page if there is unsaved data;
• JavaScript : allows you to add JavaScript code to the page. You can specify the path to the file or add your code directly to the page;
• CSS : the same for CSS. Attach a file or add to the page if the necessary local CSS setting is only for this page;
• Advanced : allows you to enable or disable protection against re-submitting a form.