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:
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 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.
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.
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.
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.
Ø
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.
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