Introduction
Gladiator Components (GC) are an integrated set of user interface and high-level functional components designed for creating responsive and useful web applications.
The components have been built using the popular jQuery Javascript framework to provide a solid foundation for cross-browser compatibility, functionality, ease of use, and ease of development.
jQuery provides a fast and concise foundation for Gladiator Components.
The component set is targeted for deployment on W3C standards-compliant browsers including Mozilla Foundation's Firefox, Google's Chrome, Apple's Safari, Opera, and Microsoft's Internet Explorer v. 9. Support on versions of Internet Explorer prior to version 9 can be achieved using Google's Chrome Frame plugin.
The components are currently being targeted for use in sophisticated intranet-based medical and scientific applications. These kinds of web applications provide a demanding testing ground for the components. We fully expect that they will prove useful in a wide range of applications in other domains in the future as the project matures.
See the little green bug atop the logo? The recently-discovered suborder of carniverous insects called Gladiators and officially known as the Mantophasmatidae are small but nimble — Just the way we like our code!
Gladiator Components are currently under development. A public release is not yet available. For additional information, including licensing information, please contact ed dot trager at gmail dot com.
Features
The components have the following features:
The Gladiator Components project targets W3C-compliant browsers.
- W3C standards compliant technologies. Our jQuery-based components make use of XHTML, CSS2, CANVAS, and JSON. Some of our pre-jQuery components also used SVG, and we are in the process of migrating such legacy components to the new jQuery-based framework. We are also now experimenting with CSS3 and HTML5 as browsers provide enhanced support for these technologies.
- Lightweight & fast. By focusing on a standards-compliant code base, we can avoid conditional processing and write tighter, faster code. We do our best to adhere to the KISS principle.
- Clean appearance. We work hard to design integrated functional components that look good and adhere to the best practices of web usability. We consciously avoid the pitfalls of extraneous “eye candy” and animations that can lead to performance degradation and user ennui.
- Robust internationalization. Internationalization (i18n) and localization (l10n) have been treated as primary concerns in the foundation of our design, readying these components for world-wide deployment. For example, GC supports on-demand loading of message catalogs, allowing a user to switch languages from, say, English to Chinese while in the middle of filling out a web form. We have also made sure that creating localized and multi-lingual web applications for right-to-left languages like Arabic and Hebrew is easy. The GC TextArea component with the integrated KeyCurry input method engine is a prime example of our dedication to provide meaningful solutions for an increasingly multilingual online world.
- Easy to integrate. In general, only a few lines of Javascript are required to integrate these components into new or existing projects.
- High-functionality components. By taking advantage of the low-latency data accessibility that AJAX provides and by focusing on what users want to be able to do, we are encapsulating high-level functionality into reusable components so that we —and you— don't have to write as much code from scratch.
Gladiator Windowing Component
The Gladiator window class encapsulates common OS-style windowing functionality in a browser-based component. These windows can be resized, expanded, iconified to a dock, rolled up like a window shade, and closed just like the windows you are familiar with from Microsoft Windows, Apple OS X, or Linux.
A Modern Way To Increase Web Presentation Space
Because "screen real estate" is limited, in a traditional web layout a visitor generally sees only one page of content at a time. A number of techniques are commonly used to overcome the "screen real estate" problem with varying degrees of success. One common approach is to use a tab card layout. Another approach is to use some sort of collapsible menu or collapsible divs. In both of these approaches, all content in the collapsed divs or hidden tabs is obscured from view.
Smart Image Gallery Examples
There are many problem scenarios where windowing solutions may work better. This page contains several examples using smart image galleries.
The thumbnail images in these galleries are actually smart class objects. If you hover over one of the thumbnail images long enough, the object assumes that you want to view the full-sized image. The small red indicator light at the bottom will automatically turn to yellow while the full size image is being loaded. When the light turns green, the full-sized image is present in memory and can be viewed by clicking on the thumbnail.
When you click on a "green" image, the image pops up immediately in a Gladiator window. You can resize the windows so that you can view one or more images simultaneously at any scale that you wish.
Each full-sized image also has a slider control which allows you to scale the image up or down. This is very useful for high-resolution images such as those used in scientific, medical, graphic arts, and other disciplines.
The combination of a windowing approach along with intelligent image-loading technology allows you to conveniently contrast and compare multiple images side-by-side. Such functionality is not only convenient, but may also be critical to enabling work efficiencies in many professional disciplines.
A New Approach for the Modern Internet
Windows have been used in thick client graphical user interfaces for many years, but until recently have rarely been seen working inside a web browser window.
Notice how a windowing approach provides one solution to the problem of limited "screen real estate." With this approach, you can actually see the partial contents in many of the windows simultaneously. One cannot achieve that with a tab-based or collapsible-div-based layout.
Try it!
Here is a review of the basic window functionality you can try on this page:
- Click on a window to focus it.
- Double-click on the title bar to shade a window.
- Click and drag the title bar to move a window.
- Click and drag on any side or corner to resize a window.
- Click on the icons in the title bar to dock [*], minimize [-], maximize [+], or close [x] a window.