Table of Contents
Previous | Next

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

Picture 61

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.

Picture 62

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.

Picture 73

Figure 3: Main Navigation

Picture 63

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.

Picture 64

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”.

Picture 66

Figure 6: Status bar

Picture 68

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.

Picture 69

Figure 8: Control bar

Picture 70

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.

Picture 71

Figure 10: Webpage body showing multiple vertical sections

Picture 72

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.

Picture 60

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.

Table of Contents
Previous | Next