Tuesday 6 January 2015

Multiple User Interface for Oracle APEX

User Interface
User Interfaces
·         Within a single Application you can have Desktop and Mobile Pages with individual Themes each
·         That means an Application can have multiple active Themes
·         Pages and Themes know which User-Interface-Type they belong to
·         In the future this can be enhanced with other UI-Types, e.g. Smart-TV

Oracle Application Express 4.2 introduces the ability to define multiple user interfaces for desktop and mobile devices. The sections below provide an overview of different design considerations:
·         User Interface Design
·         Mobile Applications
·         Responsive Design
User Interface Design
The optimal user interface design principles have continually changed and evolved as new architectures are introduced. Old mainframe applications screen design was based on keyboard input only and the order of items on a page was critically important. However, with client server applications user interface design generally placed multiple items on a single line and everything had to fit into a single screen with no scrolling. With Web applications the principle design changed again to very few items on a single line, instead using vertical scrolling as required. Now with mobile and tablet applications the user interface principles have changed again to display minimal information with very easy to navigate screens that utilize touch instead of pointing devices.
Application Express 4.2 introduces the ability to declaratively define mobile applications using jQuery Mobile. The Application Builder has been enhanced to support multiple user interfaces, both desktop and mobile, within a single application. Therefore, developers can choose to build an application only for the desktop, only for mobile, or for both. Each user interface defined for an application has its own theme, login page, home page, and global page (formerly Page 0). When defining a page within an application, you must specify which user interface is associated with that page. Based on the user interface selected the available page and region types varies, and the options available through the create page and region wizards varies accordingly. For example, maps, data loading and other page types and interactive report regions are only supported on desktop pages. Similarly on mobile pages the most common construct is list and form, instead of report and form.
Mobile Applications
Mobile applications are those designed to run specifically on smartphone devices. To facilitate this applications need to be built with extremely minimal, semantic HTML that is optimized for mobile connections. Oracle Application Express 4.2 incorporates jQuery Mobile to allow developers to rapidly build mobile applications. jQuery Mobile based web pages use a framework that was specifically built for mobile devices. jQuery Mobile is a lightweight framework that enables you to create compact and minimal web sites that include only a few images and CSS files. jQuery Mobile is also aware of and able to respond to mobile device specific events, such as orientation change and touch events. The look and feel of jQuery Mobile based applications can be easily modified via CSS using tools such as theme-roller, thanks to it's relatively static HTML structure.
Mobile applications developed with Application Express are browser-based applications that run inside the browser on the mobile device. Therefore, these applications must have a connection in order to communicate with the Oracle Database and cannot operate in a disconnected environment. Using jQuery Mobile, these applications can run on any mobile operating system including iOS, Android, Blackberry, and Windows. Mobile devices that have HTML5 capabilities will be able to utilize all of the capabilities that can be built into the applications including HTML5 date-pickers, sub-types that display different keypads based on field definition, etc. Older devices will still render the application but with less advanced features. The major advantage of developing browser-based applications is that you only need to develop them once for the majority of mobile devices. However, one major limitation is accessing on-device features such as contact lists. This limitation can be alleviated by integrating with solutions such as PhoneGap that allow for creating hybrid solutions, which use a native application wrapper to display the web app.
Responsive Design
One of the recent user interface design principles being adopted is responsive design. Responsive design is a way to design websites so that the layout fits the available space on differently sized desktop or laptop browsers as well as tablets and smartphones. On larger screens, the user get's the full experience. On smartphones and tablets, the layout adopts itself to the size of the device's screen. This is done by having certain elements shift position, re-size or become hidden entirely. The goal is to make all essential content available in a user-friendly and pleasing way on any device. Oracle Application Express 4.2 introduces a responsive user interface theme - Theme 25 This theme provides the building blocks and templates that allow for achieving a responsive layout. However, it is up to the developer to use those templates and to arrange the page content in such a way that the end result is truly responsive. It is not just a matter of picking one set of templates versus another set of templates. Also note that converting an existing application to Theme 25 requires you to review the pages of the application to ensure the appropriate template and layout are defined.
Review how Demand-Analysis have utilized responsive design to deliver their commercial application on multiple devices.
Responsive versus Mobile Design
The main difference between the two approaches is that responsive design allows for using a single web page with any device, while developers building mobile applications with jQuery Mobile should do so in addition to the desktop-oriented pages. Having only a single page to maintain using responsive design techniques might sound more appealing than maintaining two separate pages. The upfront cost of designing a truly responsive page are much higher and require a much higher level of understanding of grid layout, HTML and CSS. So for most Application Express developers it would probably be easier to simply rely on the built-in wizards to produce desktop pages and separate mobile pages. Another critical difference is that jQuery Mobile based pages are generally very small and load a minimal amount of static content. Responsive sites on the other hand always load the full page, including content that might only be shown in desktop browsers. Using CSS sprites, minified JavaScript code and other techniques may help reduce the page size. However, content such as larger headers, sidebars, rich page content, etc. would still have to be loaded, only to be selectively hidden on the client later.
The main deciding factor should be the type of site or application that is being developed and the content that is being presented. A marketing site for instance, such as a company's homes page, catalogs, libraries, and wikis are well suited for responsive design. Productivity applications, such as customer management applications, business intelligence tools, and inventory applications are good candidates for a jQuery Mobile based user interface. These types of applications require quick response time, easy to use data entry forms, and would benefit from utilizing the device's native controls. Customers who are used to quickly flipping through data using touch controls in native applications will get much the same experience with their jQuery Mobile applications, such as paginating through content using swipe, orientation change to make better use of space and context sensitive soft-keypads. Ideally of course, these type of applications would still have their desktop-orientated pages be somewhat responsive so that they work well on desktops as well as tablets.



Creating a Global Page to Display Components on Every Page
The Global page of your application functions as a master page. You can add a separate Global page for each user interface. The Application Express engine renders all components you add to a Global page on every page within your application. You can further control whether the Application Express engine renders a component or runs a computation, validation, or process by defining conditions.


Topics:

12.2.1 Creating a Global Page
Ø  To create a Global page:
Ø  On the Workspace home page, click Application Builder.
Ø  Select an application.
Ø  The Application home page appears.
Ø  Click the Create Page button.
Ø  On Create Page:
Ø  User Interface - Select a user interface for the page.
Ø  For Select a page type, select Global Page.
Ø  Note that the Global Page option only appears if the application does not have a Global page for the specified user interface.
Ø  For Page Number, enter an integer value that identifies a page within the application.
Ø  Click Finish.

12.2.2 Navigating to the Global Page
To navigate to the Global page:
Ø  On the Workspace home page, click the Application Builder icon.
Ø  The Application Builder home page appears.
Ø  Select an application.
Ø  The Application home page appears.
Ø  Select Global Page.


No comments:

Post a Comment