by Denes Kubicek
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
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-1. Page Designer components
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.
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 1-2 and Figure 1-3).
Figure 1-2. Page Finder icon
Figure 1-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 1-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 1-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 1-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.
The icon for Create (Figure 1-6 and 1-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 1-6. Create, Utilities, and Component View icons
Figure 1-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 1-8).
Figure 1-8. Create Form Wizard
The icon for Utilities (Figure 1-6 and 1-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
Figure 1-9. Utilities options
The icon for the Component View (Figure 1-6 and Figure 1-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 1-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 1-10.
Other Navigation Bar Icons
The other icons on the navigation toolbar (Figure 1-11) are used to access the Team Development, Developer Comments, and Shared Components features.
Figure 1-11. Other navigation toolbar icons
Using this icon, you can access Team Development features.
Using this icon, you create a developer comment, add a bug, or add a to-do task.
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:
www.deneskubicek.blogspot.de/2015/06/apex-50-run-applications-in-new-tabs.html
Component View
The Component View has four tabs.
- Rendering
- Dynamic Actions
- Processing
- Page Shared Components
The Rendering tab (Figure 1-12) lists all the components of the page grouped by either component type or processing order. Here, you can access all page regions, items, buttons, and processes (computations, processes, and branches) executed during page rendering. Also, the tree view will show all the dynamic actions or computations attached to one of the page components.
Figure 1-12. Component View: Rendering tab
On the Dynamic Actions tab (Figure 1-13), you will find a list of all the dynamic actions used on that page. This is a useful new feature because of the growing number of dynamic actions. Now these components are shown and accessed separately, and this helps you keep an overview of it all.
Figure 1-13. Component View: Dynamic Actions tab
The Processing tab (Figure 1-14) shows a list of the processes run on page submit. This includes the following:
- Validations
- Computations
- Page processes
- Branches
Figure 1-14. Component View: Processing tab
The Page Shared Components tab (Figure 1-15) shows a list of the shared components used on the corresponding page.
Figure 1-15. Component View: Page Shared Components tab
The Component View is a tree and provides a couple of useful features.
Using drag and drop, you can change the order sequence of the page elements and processes. Using the context menu options (Figure 1-16), you can easily access all the relevant component options.
Figure 1-16. Component View: context menu options
Grid Layout
The Grid Layout also has different tabs.
- Grid Layout
- Messages
- Page Search
- Help
Grid Layout
Grid Layout (Figure 1-17) provides drag-and-drop functionality of components that can be selected from the Gallery menu and also allows you to reorder those components.
Figure 1-17. Grid Layout and Gallery menu
Using the Grid Layout tab, you can reorder all page elements in order to get a desired layout of the page. You can reorder the following elements:
- Items
- Regions
- Buttons
Using Grid Layout, you can also copy and move the copied elements. This can be achieved by selecting an element and pressing Ctrl on the keyboard (Figure 1-18). Once you get to the position where the copied element needs to be placed, you just release the Ctrl key and the mouse button. The element will be copied under a new name.
Figure 1-18. Grid Layout: copying components
Messages (Figure 1-19) are a useful feature. In APEX 5.0 you do not need to wait for the save process to be executed to see whether there are any errors. APEX 5.0 will evaluate your code and, in general, your input as soon as you lose the focus of the element where you enter it. If there are any validation messages and errors, they will show up on the Messages tab (Figure 1-20) saying what the problem is. The messages are generated using AJAX, and they provide links that you can use to access the corresponding component.
Figure 1-19. Messages: highlighting
Figure 1-20. Messages: content
If there are errors in your code or input, not only will the message show up, but all relevant parts of the page structure will be highlighted.
- Component View
- Grid Layout
- Element Properties
Clicking the message text will take you to the affected element property on the right side of the screen showing again the error in a separate widget (Figure 1-21).
Figure 1-21. Messages: link
The Page Search tab (Figure 1-22) works based on AJAX as well. You have two options and can search based on one of the following:
- Match case
- Regular expression
Figure 1-22. The Page Search tab
Clicking the search result will take you to the affected element property on the right side of the screen, and it will highlight the Component View node.
The Help tab (Figure 1-23) provides instant help for the Property Editor on the right side of the screen. The help default says this:
“Select a component and then select an attribute in the Property Editor to display help on that attribute.”
Figure 1-23. Help
Clicking any of the options available in the Property Editor will result in showing the corresponding help text.
Property Editor
The Property Editor in Figure 1-24 shows instantly the properties of a selected component. The Property Editor has four buttons for the view options.
- Show Common
- Show All
- Collapse All
- Expand All
Figure 1-24. Property Editor
Clicking the Show Common button (Figure 1-25) lists the most common component properties. Depending on the component you select, it will hide certain options.
Figure 1-25. Show Common button
Clicking the Show All button (Figure 1-26) lists all component properties. Depending on the component you select, it will hide or show certain options compared to the other types of component.
Figure 1-26. Show All button
Clicking the Collapse All button (Figure 1-27) collapses all Property Editor components and shows titles only. This feature is useful when the list of properties is long and you want to avoid scrolling.
Figure 1-27. Collapse All button
Show All
Clicking the Show All button (Figure 1-28) shows all available properties for the selected element.
Figure 1-28. Show All button
Quick Pick, Go to Group, and Go to Component Icons
There are three new icons in the Property Editor:
- Quick Pick
- Go to Group
- Go to Component
Clicking the Quick Pick icon will show a list menu of the available options, as shown in Figure 1-29.
Figure 1-29. Quick Pick icon
Clicking the Go to Group icon will have the same result as the Collapse All button; it lists the property titles for each property group. See Figure 1-30 for an example.
Figure 1-30. Quick Pick icon
Clicking the Go to Component icon will lead you to the shared component used, as shown in Figure 1-31. Once you make a change to the selected shared component, you will be forwarded to the property you came from.
Figure 1-31. Go to Component icon
The new Code Editor (Figure 1-32) in APEX 5.0 is one of the highlights of the Page Designer. It has lots of options for setting it up and provides a far better way to maintain your code than with the old input text area in older releases.
Figure 1-32. Code Editor
You can access the Code Editor by clicking the icon (Figure 1-33) for each property that has a code option.
Figure 1-33. Code Editor icon
The Code Editor has a few useful options that are shown in Figure 1-34:
- Code highlighting according to the code type of the particular property (PL/SQL, SQL, JavaScript, jQuery, CSS) and the selected template
- Tab-size option
- Indent option
- Selection of different themes for the Code Editor layout
- Line Numbers and Ruler options
- Search and Replace options
- Access to the Query Builder
- Autocomplete options
- Undo and Redo options
- Inline code validation
Figure 1-34. Code Editor showing code and syntax highlighting
As of APEX 5.0, you can use shortcuts to move within the Page Designer. You can find the list of available shortcuts in the Page Designer’s Help menu (Figure 1-35) or by pressing the keyboard combination Alt+Shift+F1.
Figure 1-35. Shortcuts in Help menu
The list shows the following shortcuts (Figure 1-36):
- Display From Here: Ctrl+Alt+D
- Display From Page: Ctrl+Alt+T
- Go to Dynamic Actions: Alt+2
- Go to Gallery Buttons: Alt+9
- Go to Gallery Items: Alt+8
- Go to Gallery Regions: Alt+7
- Go to Grid Layout: Alt+5
- Go to Help: Alt+F1
- Go to Messages: Ctrl+F1
- Go to Page Shared Components: Alt+4
- Go to Processing: Alt+3
- Go to Property Editor: Alt+6
- Go to Rendering: Alt+1
- Keyboard Shortcuts: Alt+Shift+F1
- Page Search: Ctrl+Alt+F
- Redo: Ctrl+Y
- Restore/Expand: Alt+F11
- Save: Ctrl+Alt+S
- Save and Run Page: Ctrl+Alt+R
- Toggle Hide Empty Positions: Ctrl+Alt+E
- Undo: Ctrl+Z
Figure 1-36. Shortcut list
Unfortunately, you cannot define your own shortcut combinations. For sure, you will not need all the available shortcuts from the list, and it would be nice to have an option to define your own top-ten list. Maybe the next release will have this feature.
Help Functionalities
The Page Designer has a huge number of help options. Clicking the icon in Figure 1-35 will open a menu showing different possibilities to get help for the problems you may face during application development. The following help options are available:
- Link to the APEX 5.0 Documentation
- Link to APEX Forum at OTN
- Link to APEX Resources at OTN
- Page Designer Help
- Shortcuts List
- About Help
Link to the APEX 5.0 Documentation
Directly linking to the current APEX 5.0 documentation (Figure 1-37) is a great option. It helps you to instantly access the most current documentation available at http://docs.oracle.com.
Figure 1-37. APEX documentation
Link to the APEX 5.0 Forum at OTN
The APEX 5.0 Page Designer is also connected to the APEX Forum at OTN (Figure 1-38), which is the best resource if you have a question on how to solve a problem. It should be used to post your questions and to help other developers to solve their problems.
Figure 1-38. APEX Forum at OTN
Link to the APEX Resources at OTN
This link is important when you just start to learn APEX. This link provides you with the most recent resources related to APEX (see Figure 1-39), and those resources are an awesome source of knowledge. There is almost no topic related to APEX you can’t find here.
Figure 1-39. APEX resources at OTN
Page Designer Help: Getting Started in Page Designer
The Page Designer Help (Figure 1-40) is a short overview of Page Designer functionalities.
Figure 1-40. Getting Started in Page Designer page
About Page Designer
About Page Designer (Figure 1-41) gives you a short overview of the most important features such as Host Schema, Product Build, Last DDL time, and so on.
Figure 1-41. About Page Designer
Other Options
Page Designer has lots of other new features that need to be mentioned here.
- Multiple component selection
- Resizing areas
- Memory function
- Toolbar options
Using Page Designer Component View or Page Designer Grid Layout, you have a possibility to select multiple components of the same type at once and do the following:
- Modify them by setting the properties in the Property Editor (Figure 1-42)
Figure 1-42. Multiple component selection
- Move them within the Component View (Figure 1-43)
Figure 1-43. Reordering multiple components
- Replace single elements somewhere in the Grid Layout (Figure 1-44)
Figure 1-44. Dragging and dropping single components in the Grid Layout
If one of the Page Designer sections and areas such as Component View, Grid Layout, and Property Editor are too small, you have the option to resize them and make them fit your needs (Figure 1-45).
Figure 1-45. Resizing Page Designer sections
In addition, you can resize the entire Grid Layout by clicking the Expand icon on the Grid Layout tab (Figure 1-46 and Figure 1-47).
Figure 1-46. Expand icon on Grid Layout tab
Figure 1-47. Grid Layout tab: full-screen mode
There is one thing I need to mention regarding the Page Designer layout options. The settings you make will be saved per user (developer) and remain the same even after you change the page you work on, log out, or clear the browser cache. You shouldn’t get confused if, for example, you suddenly can’t find an option that you know has to be available. The reason is probably that the option is hidden because you probably used the button Show Common or Collapse the last time you edited one of the components.
Page Designer Toolbar Options
The Page Designer also provides a new toolbar (Figure 1-48) that you can use to inspect your runtime applications. Some of these options were available before, so I will mention only the new ones.
- Show Grid
- Quick Edit
- Theme Roller
- Toolbar options (the cog to the far right in Figure 1-48)
Figure 1-48. Page Designer toolbar
The Show Grid option (Figure 1-49) will show the page and region grids for your application pages. You can use it to improve the layout of your pages.
Figure 1-49. Show Grid
Activating the Quick Edit (Figure 1-50), you can access a single component in your runtime application, and it will lead you to the properties of the selected element.
Figure 1-50. Quick Edit
Selecting the Theme Roller will open the new Theme Roller panel in your runtime application. Figure 1-51 shows the panel for setting some of the Theme Roller options.
Figure 1-51. Theme Roller
Finally, there is a button in the Page Designer toolbar that you can use to change the toolbar settings. You can use it to change some basic settings like the following (Figure 1-52):
- Auto Hide
- Show Icons Only
- Display Position (left, right, top, or bottom)
Figure 1-52. Toolbar settings
Summary
The Page Designer interface is the most prominent new feature in APEX 5.0. It is different from the previous component or tree views, and it incorporates all application development options and features on a single screen.
The tree view was the beginning, and since version APEX 4.2, it has been reduced to the accordion on the left side of the screen. The rest of the screen is divided into a large Grid Layout area, allowing drag-and-drop page design, and a Property Editor area, which allows access to all the properties previously found on the edit screen.
This new interface allows for a much more efficient development of applications. Instead of editing individual screens and going back and forth, navigating away from the page you are looking at, you can now select components, change the attributes in the Property Editor, and save whenever you want to see what the application looks like. It is also possible to select multiple components of the same type and then change any common attributes in the Property Editor at once. You also have the possibility to redo and undo all changes in the Grid Layout or Property Editor as long as those changes are not saved (until the Save button is clicked and the application is run). The Page Designer adds a lot of other features such as instant error messages, AJAX page search, and the Code Editor, with native syntax highlighting, inline error highlighting, and autocomplete functionality.
The Page Designer also shows where the future development of APEX will go. In one of the next major releases, you can expect the same functionality you now have in the Page Designer for the applications you provide to your customers.
- AJAX forms
- AJAX trees with context menus and drag-and-drop functionality
- Drag-and-drop page content