The Page Designer in APEX 5.0 is one of the main new features and a major improvement for APEX developers. It changes the way you build your application pages and also the way you think about application development. It is also close to what you probably know from Oracle Forms. The Page Designer provides these new features:
- Drag-and-drop functionality
- Tree view and context menus
- Seamless adjustment of the Component View and Property Editor panels
Main Components
The Page Designer has four main components (Figure 1-1).
- Navigation toolbar
- Component View on the left side of the screen
- Grid Layout for drag-and-drop functionality in the middle
- Property Editor on the right side of the screen
Figure 1. Page Designer components
Navigation
The navigation toolbar has lots of new options compared to previous versions of APEX. Some of them have been reworked, and their functionality is now different. Also, there are some new options that I will describe in detail.
Page Finder Icon
The Page Finder icon works differently compared to the old one. It will lead you to a page you type in directly or will open a modal window if you click the pop-up list of values (see Figure 2 and Figure 1-3).
Figure 3. Page Finder list of pages
The Page Finder will also show a warning via a pop-up if you are leaving a page with unsaved changes (Figure 1-4).
Figure 4. Page Finder unsaved changes prompt
One of the things missing in the navigation within the Page Finder is the old feature to go to the previous or next page. Even if you want to go to the previous or next page, you will be forced to do a couple of clicks to open the modal window and then search for the page number in the list.
Lock Pages and Undo and Redo Icons
The icon for locking pages (Figure 5) has the same functionality as it had before. The Redo and Undo icons allow you to undo and redo the unsaved changes similar to what you know from other programs (such as Microsoft Office). This feature is useful, but it works only for unsaved changes.
Figure 5. Icon for locking pages and the Undo and Redo icons
Create, Utilities, and Component View Icons
This section will cover the main set of icons in the Page Designer. You will use these icons frequently.
Create Icon
The icon for Create (Figure 6 and 7) offers a couple of options.
- Create a page
- Create a page as a copy of an existing page
- Wizards to create different complex page components such as forms and reports
- Access to the shared components
- Access to the page group
- Access to the Team Development features
- Add comments to the application
Figure 6. Create, Utilities, and Component View icons
Figure 7. Create menu items
When you click to create a Form or Report region, you will see the corresponding wizard as a modal dialog (Figure 8).
Utilities Icon
The icon for Utilities (Figure 6 and 9) offers lots of options.
- Delete a page
- Create a page as a copy of an existing page
- Access the Caching, Attribute Dictionary, History, and Export options
- Access the Cross Page Utilities, Application Utilities, and Page Groups options
- Access the Upgrade Application option
Component View Icon
The icon for the Component View (Figure 6 and Figure 10) shows the old HTML view of the Page Designer. This view option could be useful in these cases:
- When making mass changes of column names in a classic report
- When making mass changes of column names in an interactive report
- When making mass changes of item labels in a form region
Figure 10. Old HTML Page Designer layout
The reason is for the old view’s sefuleness is simple. If you use the new Page Designer interface for the purposes just listed, you will have to do lots of clicks and mouse moves to first click the corresponding column on the left side tree menu and then move the cursor to the label attribute to change it. Using the old view, it is possible to move faster from column to column using the Tab key.
You can always switch back to the new interface using the icon shown in Figure 10.
Other Navigation Bar Icons
The other icons on the navigation toolbar (Figure 11) are used to access the Team Development, Developer Comments, and Shared Components features.
Figure 11. Other navigation toolbar icons
Team Development Icon
Using this icon, you can access Team Development features.
Developer Comments Icon
Using this icon, you create a developer comment, add a bug, or add a to-do task.
Shared Components Icon
Using this icon, you can access application shared components.
Save and Save and Run Application Icons
The next set of icons is used to save the changes or save and run the application.
Save Icon
The Save icon will save the outstanding changes for the corresponding page.
Save and Run Icon
The Save icon will save the outstanding changes for the corresponding page and run the application in a new tab.
In earlier versions of APEX, you could run the application by right-clicking and opening the application in a new tab or in a new window. In APEX 5.0, this has changed; there is no right-click option anymore. The button is an image running JavaScript. The consequence is that the behavior will be different depending on the browser used and your browser settings. To see how to optimize the settings for Firefox, refer to this blog posting.