Omnis Javascript Component Series: Tab & Navigation Bars

JavaScrip_Tab&Nav

The Omnis JavaScript Client allows you to create all types of web and mobile applications that will run on virtually any device, on any platform — including iOS, Android, Windows, OS X, and BlackBerry desktops and mobile devices. As long as the device has a browser capable of running JavaScript, and is HTML5 and CSS3 compatible, you will be able to run your Omnis web or mobile app on that device.

There are over 30 ready-made JavaScript based components in Omnis Studio that you can use in your web or mobile apps, which you can simply drag and drop onto a remote form. In this series of blog articles we explore a few components in each post. In previous articles we have looked at ‘Maps and Charts’, ‘Lists and Grids’, ‘Buttons & Switches’, ‘Subforms’, and ‘Text Editor & Lists’. We now turn to the Tab bar, Nav bar and Page controls which can provide different forms of navigation or presentation within your web and mobile apps.

Put it on the tab

The Tab bar component is deceptively simple, yet powerful. It enables you to control the layout of the fields or application flow in your web and mobile forms. The Tab bar itself has many properties that let you govern its appearance, including the ability to change colors and fonts, to add an icon to each tab, and to make the tabs align vertically. When the end user clicks a tab, an event is generated which you can use in your code to trigger an action. You can link a Tab bar to a page pane (using the $linkedobject property) so that when the user clicks a tab, a different pane is displayed. This functionality allows you to arrange the fields and other controls on your form under different tabs and panes, allowing you to create a highly organized interface that is broken down into logical areas – this technique is good from a general design standpoint, but also very useful for a mobile form when you need to pack numerous fields and controls into a limited area.

Another simple navigation component, Page control, can be linked to a page pane, and allows the end user to change the current page in the linked paged pane simply by swiping over the control (or clicking for non-touch screens). The Page control gives the end user a visual clue as to the current selected pane in the linked page pane object. The highlighted dot in the control changes to reflect the current page in the linked paged pane.

Steering end user on the right course

The Navigation bar component (Nav bar) is similar to the Tab bar component. The Nav bar can be linked to a page pane to display a few fields and controls at a time, allowing end users to easily switch to different parts of your application, or tightly directing a number of steps in a process. The Nav bar has its origins on mobile platforms therefore may be better suited to your mobile or tablet based applications. The Nav bar has a main title in the middle of the control, and it can have a left and/or right button which responds to user clicks. It also has a number of properties for setting the color, fonts, icons and style of the bar and buttons. In addition to detecting clicks on the left and right buttons, the Nav bar has the ‘push’ method allowing you to configure the content of the Nav bar itself and the actions taken in response to user clicks.

Try it for yourself in the Omnis JavaScript Apps Gallery

Demos of all these navigation controls are available in the Omnis JavaScript Apps Gallery under their respective names: Tab bar, Nav bar and Page control. Open the gallery page in your browser on your desktop PC or tablet and try out these components in the online gallery, or you can download the sample app and examine the code in the latest version of Omnis Studio. Download Omnis Studio 6.x 90-day trial.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>