Overview

AlphaSports for the Web

Initial considerations

Creating an application for a Web environment is an interesting challenge. Web applications require a different approach and different thinking than desktop applications. You can easily build a desktop application that has complex form designs, large amounts of data on one page, and multiple pages open simultaneously. Speed is rarely an issue with modern computers, and the current design genies allow considerable customization of any layout.

But the Web is different. The browser concept imposes a number of constraints. Browsers primarily use HTML and other "open source" concepts like JavaScript. Nearly every modern browser follows a set of universal standards to allow a Web page to display in any browser. These rules place many limitations on how various elements work, such as how a drop down list looks and behaves, how data is submitted back to a server, how buttons operate, and on and on. The layout of most Web pages is normally based on a grid or table and cell construction that requires some careful planning during design. Moving the position of an element on a page may require reconstructing the complete page. There is little room to alter the way the way the actual design elements work because they are part of the accepted rules for a browser. Any successful Web page must follow these current Web standards to work properly.

The other issue is speed. The Web employs a Client/Server model. The local browser or client first requests a page from a remote server. The server takes the request and builds the page and populates it with data. It then sends the whole page back to the client. Both of these actions require time. If the page design is complex, the server may take a noticeable time to build or populate the page. If the final page file size is large, the download time across the Web may be slow. These issues exist in any Web page construction, regardless of the server technology used. A successful Web designer must consider these limitations and frequently make compromises on the complexity of the page designs.

Specifications

The basic goal behind the design of AlphaSports Web was a desire to create a "real world" commercial grade application that was based on the existing AlphaSports desktop demo application. The design had to consider the normal constraints of the Web environment and yet be a successful substitute for a desktop application. A common use of the Alpha Five Application Server is to add Web capability to an existing desktop application. AlphaSports Web does not alter the AlphaSports desktop functionality and can co-exist with that application. However, the two applications are completely separate and only share tables and data. The Web application does not require a desktop database to operate, and can actually exist without any related database. It replaces the desktop database functionality with the Web components and pages and accesses tables and data directly.

Every application design starts with the functional requirements or specifications. This application was built around an online shopping concept, with the capability to update and maintain the supporting data using a browser interface. Early in the process, it was determined that the final design should appear simple to use with relatively few "layers" to the data. The decision was made to access most pages from a main navigation page or menu bar. To simplify navigation, a number of pages open as pop-ups, leaving the original page in view. Many pages have multiple ways to navigate to other pages, such as links in grids, hyperlinks on the pages, buttons, and even images with links.

Nearly all of the functionality of the desktop AlphaSports database was duplicated in the Web version. This was achieved by creating two different paths within the application. First, there are the public pages that are designed for online sales and promoting the products available from AlphaSports. Most of these pages do not require any login or security. The second path within the application is the administration section. These pages can only be accessed with a specific login and have security to prevent unauthorized access. Many of these pages duplicate the data maintenance actions normally found in a desktop implementation. The login process determines the navigation path by evaluating the user ID and then sending the user to the pages allowed by their access.

A secondary purpose was to show how to use various Alpha Five components effectively and efficiently. Nearly every page is built using components, many with multiple components. In fact, every basic component construction is found in AlphaSports for the Web.

Building AlphaSports Web

To improve speed the AlphaSports Web application keeps the number of elements on each page to a minimum. Many of pages are view-only pages with links to pages that do allow editing. A page with only labels is both faster to build on the server and has less HTML text. Therefore it will build and download faster. Only pages that are used less frequently, such as some internal maintenance pages, make extensive use of input fields. Every effort was made to eliminate unnecessary HTML in AlphaSports Web. For example, instead of adding inline styles to set a cell width in a grid, most column widths were fixed by setting the column header width. The inline style adds some text, but it only is added for the column row instead of for each cell in each row. Even apparently small changes like this can have measurable impacts on speed.

A common error with grid layouts is to try to use too many rows. While showing many rows on a page may appear to be a good idea, this design approach slows page building and downloading. At some point, the speed impact negates the apparent efficiency of having everything on one page. A decision was made in AlphaSports Web to break up the data into small pieces as much as possible, use limited rows in grids, and use multiple pages. Not only are the pages faster to build, but the download times are improved, making the pages display quicker. Even removing a single field in a grid can have a significant speed impact.

Freeform regions are used in many of the components in AlphaSports. These allow more design freedom and have no real speed impact. A few grids use custom controls that provide some unique opportunities for customizing a display. In AlphaSports Web they are used to highlight products with "special" pricing. Considerable effort was spent on attention to detail to add an appearance of professionalism, such as making input text boxes a uniform length.

Many Web pages require some method to select a value from a list to populate some input value. A typical construction is a drop down list. However, a grid layout may require multiple drop down lists with one built for each record in a row. A more efficient method is to take advantage of the lookup option in Alpha Five. AlphaSports Web makes extensive use of lookups. Drop downs are used in some places where the options are limited, or in the case of dialogs or single record grids where the drop down appears only once.

Another goal of this project was to build modular constructions. A page template was built for the public pages and another built for the internal or administrative pages. After the templates were refined, building other pages became very efficient as the page building process consisted of adding a single component to the template page.

As the project began to take shape, it was observed that there was an opportunity to use the same basic component design in multiple locations. One example is the single record tabbed grid used to show customer information. This was used on multiple pages by first building the component with all features needed. After placing a component on a given page, parameter overrides changed the style of the component or hide or alter certain features such as a delete option. In this way, a single component was built just once, but used many times.

Efficiency was the primary goal of the AlphaSports Web construction. Efficiency in usability through relatively simple page layouts, efficiency in construction through the modular approach, and efficiency in speed through minimizing the html on a page.

Working within the constraints of the Web is challenging, but the component concept in Alpha Five removes many of the concerns. The final component output meets the "rules of the road", without the user having to write any HTML or worry about the standards. The Component Builders are very efficient tools that can make building a Web application easier and faster without compromising the final result.