This demo program shows how the 13 new HTML5 text input types can be used to facilitate user input on a variety of devices. Note that not all browsers support every one of the new types, but the browser will always degrade gracefully to a generic edit control. Additionally, each browser defines its own UI for the various input types, as it isn't defined by the HTML5 specification. Therefore, you may end up with a different UI when running on a phone compared to running on a desktop, as the UI should be tuned to each platform to maximize input efficiency. For example, when running on Mobile Safari (on an iPhone or iPad), tapping on a numeric text input will bring up the numeric keyboard. iOS has custom keyboards for alphabet characters, numbers, URLs, phone numbers, etc. so having the correct keyboard popup when the user is about to input data is very helpful and streamlines the input process.
The demo uses the BBMig Layout Manager to vary the number of columns, automatically switching between 1, 2, and 3 column mode depending on the available screen width. The demo also has a checkbox on the upper left, allowing you to toggle BBMig's debug mode which helps you to visualize the grid cells and control area by outlining them in red and blue, respectively.
This demo program runs in both GUI Thin Client and BUI (Browser User Interface). However, it's intended primarily for use in BUI as the HTML5 text input elements are only applicable in BUI. When running in GUI, or when running in a browser that doesn't support a particular type, this is assumed to be "text". By degrading gracefully when necessary, adding these input types to your BBjEditBox controls is reliable and risk-free.
The demo should run well on any GUI or BUI device. It uses the BBMig Layout Manager to resize and position the controls so that it fits well on the target display, regardless of device orientation or screen size. When running on a smartphone with a small screen, try changing the orientation from portrait to landscape and note how the layout manager modifies the size and position of the controls.
To see the program in action, click or copy and paste the following link into your browser to run it from the BBj BUI Showcase page: page: https://www.poweredbybbj.com/apps/BUIHTML5Input.
This section covers the demo's reliance on external dependencies, such as 3rd Party JARs, Web Services, Developer API keys, and other BBj programs such as utilities, external custom class definitions, and setup programs.
BASIS Utilities:
BBUtils (for testing if it's running on an iOS device)BBMigPane (for the BBMig layout manager)BBComponentWrapper (for finding out controls sizes from the layout manager)Other Files:
Load and run the BUIHTML5Input.bbj program from a BBj interpreter, from the Eclipse IDE, or preferably in a browser after registering it as a BUI program. Note that this can be done with a single button push when the program is loaded in the Eclipse IDE, as the BDT offers a BUI launch option. Ensure that the following prerequisites are met:
<BBjHome>/utils/ directory is in your prefix so that the demo program can find and use the distributed BASIS utilities.