New JavaScript Component Gallery shows off Responsive Design in Studio 8.1

JS Components Gallery

In Omnis Studio 8.1 we introduced the ability to set a number of layout breakpoints in a remote form so you can implement responsive design in your web and mobile apps. This means you can design a number of different layouts in the same remote form and when the form is displayed on different devices the layout will change according to the width of the current device. For example, one layout will be shown on a mobile phone, then a different layout in the same form will be shown on a tablet. When you design a remote form you can add controls to one layout and then rearrange or resize the same controls on the other layouts.

To coincide with the Studio 8.1 launch we have updated the JavaScript Component Gallery which demos most of the JavaScript Components, including some of the new features in Studio 8.1. And to show the new responsive capabilities we have made the JS Gallery app itself fully responsive, so it uses different layouts on mobiles and tablets or desktops, and all the sample libraries to download are responsive as well. (Note the same example JS libraries are available in the Hub/Samples option in the Studio Browser in Studio 8.1).

You can view the new JavaScript Component Gallery from this page on the Omnis website at:
www.omnis.net/products/jsclient/gallery.jsp
Or to go straight to the JS Comps Gallery click on:
http://omnisservice.mh.omnis-software.com/jsgallery/jsgallery.htm
Or use the shortcut:
tinyurl.com/jsgallery8

Mapping it with Studio 8.1

Most of the JavaScript components are featured in the JavaScript Component Gallery but to show off the new features we suggest you can look at the JS Map example. Open the JavaScript Component gallery in your desktop browser and select the ‘Map’ option from the list:

JS Components Gallery

You can try the various options including changing the Zoom level,  change the map type or markers, hide and show the controls, and add your own marker with a mouse click (or tap on a mobile or tablet). If you drag the map towards Central America you can see that we have drawn the ‘Bermuda Triangle’, which uses the new polygon feature. All these features demonstrate the capabilities of the Omnis JS Map Component which is based on the Google Map API.

To view the mobile layout of the gallery form, you can resize your desktop browser (make it a lot narrower), or you can open the gallery page on your mobile phone or tablet using the shortcut:
tinyurl.com/jsgallery8

On your mobile or tablet (or resized desktop browser), scroll the list and select ‘Map’ and the JS Map subform will glide into view: you can use the Back button in the form to get back to the main list.

JS Components Gallery

New Features in the JS Map Control

The JS Map component supports Google Geocoding which allows you to convert a street address into a geographic coordinate like latitude and longitude, which you can use to place a marker on a map, or center the map. You can download the new example JS Map library from the gallery page: note this must be opened in Studio 8.1.1 (which you can get here: www.omnis.net/download).

To use the Geocoding function, you need to access the Geocoding API from Google which itself requires a separate API Key, in addition to the Maps API key, which you can obtain from Google (note that you need to get these keys from Google to use the Omnis JS Map control in design mode or runtime, and that you must comply to the terms and conditions of the Google mapping API license). You need to place the main Google API key in the $apikey property and the Geocoding API key in the $userinfo property of the JS Map control which the example library reads in.

Assuming you have Omnis Studio 8.1.1, have downloaded and opened the JS Map example library, and that you have obtained and added the API keys from Google, you can open/Test the remote form on your desktop computer (using Ctrl-T or right-click and Test Form). If you click on the Search button and enter a postal address, the app will place a marker at that location, and clicking on the marker will show the latitude:longitude of that position (you can do the same in the online demo as well, of course…).

JS Map example

Try Omnis Studio 8.1.1

If you would like to try any of the libraries from the new JS Comps Gallery, you will need to download the latest Omnis Studio, which is version 8.1.1, which has a few updates and fixes from the original Studio 8.1. Get Omnis Studio 8.1.1 here:
www.omnis.net/download

0 Comments

Leave a reply

© Omnis Software Ltd 2017 - Help with setup and design by Ädelfors Consult ABSweden Disclaimer: Omnis Software disclaims any responsibility for or liability related to Software, or any content or advice, obtained through this site. IN NO EVENT WILL OMNIS SOFTWARE BE LIABLE FOR ANY INDIRECT, PUNITIVE, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES HOWEVER THEY MAY ARISE AND EVEN IF OMNIS SOFTWARE HAS BEEN PREVIOUSLY ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

Log in with your credentials

or    

Forgot your details?

Create Account