Introduction
The EndApps Platform (EndApps-P) is a Service Orientated Architecture approach to building generalized, configurable web-based mobile and desktop applications.
EndApps is SOA-based and its component UI Process is designed to work against a Business Service.
Regardless of the data source, the implementation architecture of the EndApps UI Process does not vary, and the features of the data source (or data sources) are not used directly by the UI Process.
Most of the images in this document are taken directly from screen captures of the EndApps sample website.
The images from the screen capture are based on the “Constellation Admin Skin”. This is one of the skins that the EndApps Platform SDK ships with. There’s a documented process for changing skins.
Note: To fit a web page into an image that can be embedded in this document, the browser window is usually resized by narrowing the width and reducing the height.
EndApps Web Page Sections
Figure 1: The EndApps webpage
The EndApps Webpage in Figure 1 is composed of the following sections
1) Header
2) Main Navigation
3) Sub Navigation bar
4) Status bar
5) Control bar
6) Body
7) Footer
Header
The Webpage header usually contains the title of the site and two additional links or information nodes.
Figure 2: Webpage Header
Main Navigation
The Main Navigation section contains the top level nodes in the navigation menu. Clicking on a top level node usually exposes a sub navigation menu.
Figure 3: Main Navigation
Figure 4: Main Navigation with submenu exposed
Sub Navigation bar
The Sub Navigation bar is made up of a “running board” for the submenus of the top level navigation nodes. It also contains the search input box as well as the help button.
Figure 5: Sub Navigation bar
Status bar
The Status bar contains information about the currently logged-on user. Additional buttons and are displayed in the status bar depending on the current Admin Mode.
The status bar also displays the page’s navigational hierarchy - the “breadcrumb”.
Figure 6: Status bar
Figure 7: Status bar with Breadcrumb
Control bar
The Control bar hosts context-based buttons like the “Return to” buttons as well as the dropdown that allows a user to switch to the various Admin Modes. Depending on the Admin Mode, additional buttons may become available.
Figure 8: Control bar
Figure 9: Control bar with context-based buttons
Body
The body shows the primary content of the web page. The body can contain additional sub divisions depending on the active layout.
Figure 10: Webpage body showing multiple vertical sections
Figure 11: Webpage body showing multiple horizontal sections
Footer
The webpage footer sticks to the bottom of the browser. It contains three links: “Help”, “About”, “Page top”. Additional links and informational nodes may be added to the footer if needed.
Selectively displaying page segments
Depending on the data or content being displayed, the inclusion or exclusion of some of the page segments can have a significant visual impact.
Figure 12: Web page with the Status bar and the Sub Navigation excluded
The web page in Figure 12, above does not show the Status bar and the Sub Navigation bar. The above configuration removes the “Administrative feel” associated with the standard webpage and draws more attention to the content or data being displayed.