Creating Web & Mobile Apps

308 Pages·2013·4.94 MB·English

Creating Web &
Mobile Apps

Using the Omnis JavaScript Client

TigerLogic Corporation
Sept 2013
28-092013-01
The software this document describes is furnished under a license agreement. The software may be
used or copied only in accordance with the terms of the agreement. Names of persons, corporations, or
products used in the tutorials and examples of this manual are fictitious. No part of this publication may
be reproduced, transmitted, stored in a retrieval system or translated into any language in any form by
any means without the written permission of TigerLogic.
© TigerLogic Corporation, and its licensors 2013. All rights reserved.
Portions © Copyright Microsoft Corporation.
Regular expressions Copyright (c) 1986,1993,1995 University of Toronto.
© 1999-2013 The Apache Software Foundation. All rights reserved.
This product includes software developed by the Apache Software Foundation
(http://www.apache.org/).
OMNIS® and Omnis Studio® are registered trademarks of TigerLogic Corporation.
Microsoft, MS, MS-DOS, Visual Basic, Windows, Windows 95, Win32, Win32s are registered
trademarks, and Windows NT, Visual C++ are trademarks of Microsoft Corporation in the US and other
countries.
SAP, R/3, mySAP, mySAP.com, xApps, xApp, and other SAP products and services mentioned herein
as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and
in several other countries all over the world.
IBM, DB2, and INFORMIX are registered trademarks of International Business Machines Corporation.
ICU is Copyright © 1995-2003 International Business Machines Corporation and others.
UNIX is a registered trademark in the US and other countries exclusively licensed by X/Open Company
Ltd.
Sun, Sun Microsystems, the Sun Logo, Solaris, Java, and Catalyst are trademarks or registered
trademarks of Sun Microsystems Inc.
J2SE is Copyright (c) 2003 Sun Microsystems Inc under a licence agreement to be found at:
http://java.sun.com/j2se/1.4.2/docs/relnotes/license.html
MySQL is a registered trademark of MySQL AB in the United States, the European Union and other
countries (www.mysql.com).
ORACLE is a registered trademark and SQL*NET is a trademark of Oracle Corporation.
SYBASE, Net-Library, Open Client, DB-Library and CT-Library are registered trademarks of Sybase
Inc.
Acrobat is a trademark of Adobe Systems, Inc.
Apple, the Apple logo, AppleTalk, and Macintosh are registered trademarks and MacOS, Power
Macintosh and PowerPC are trademarks of Apple Computer, Inc.
HP-UX is a trademark of Hewlett Packard.
OSF/Motif is a trademark of the Open Software Foundation.
CodeWarrior is a trademark of Metrowerks, Inc.
This software is based in part on ChartDirector, copyright Advanced Software Engineering
(www.advsofteng.com).
This software is based in part on the work of the Independent JPEG Group.
This software is based in part of the work of the FreeType Team.
Other products mentioned are trademarks or registered trademarks of their corporations.
Table of Contents
Table of Contents
ABOUT THIS MANUAL..................................................... 6
CHAPTER 1—TUTORIAL ................................................. 7
STARTING OMNIS..................................................................... 8
CREATING A LIBRARY ............................................................. 9
CREATING A DATABASE SESSION .......................................... 11
OPENING A DATABASE SESSION ............................................ 13
VIEWING YOUR TABLES ......................................................... 14
VIEWING YOUR DATA ............................................................ 15
MAKING A SCHEMA ............................................................... 16
EDITING A SCHEMA ............................................................... 17
CREATING A DESKTOP FORM ................................................. 18
EDITING A DESKTOP FORM .................................................... 21
TESTING A DESKTOP FORM AND INSERTING DATA ................ 25
CREATING A WEB FORM ........................................................ 28
ADDING FIELDS TO A WEB FORM .......................................... 30
ADDING CODE AND FURTHER FIELDS TO A FORM .................. 32
ADDING A PICTURE AND A BUTTON TO A FORM .................... 37
ADDING A REMOTE TASK ...................................................... 41
TESTING YOUR WEB FORM .................................................... 42
TESTING YOUR FORM ON A MOBILE DEVICE ......................... 44
SUMMARY ............................................................................. 46
TUTORIAL LIBRARIES ............................................................ 46
WELCOME WINDOW .............................................................. 47
CHAPTER 2—JAVASCRIPT REMOTE FORMS ......... 48
CREATING JAVASCRIPT REMOTE FORMS ............................... 48
REMOTE TASKS ..................................................................... 55
REMOTE FORM PROPERTIES .................................................. 63
REMOTE FORM INSTANCES AND METHODS ........................... 67
CLIENT COMMANDS .............................................................. 70
REMOTE FORM EVENTS ......................................................... 73
CLIENT METHODS.................................................................. 76
TESTING JAVASCRIPT REMOTE FORMS .................................. 81
REMOTE MENUS .................................................................... 85
SUBFORM SETS ...................................................................... 87
RESIZABLE FORMS AND COMPONENTS .................................. 93
RUNNING JAVASCRIPT IN THE CLIENT ................................... 95
STYLED TEXT ........................................................................ 97
3
Table of Contents
ANIMATIONS .......................................................................... 98
TIME ZONES AND DATES ....................................................... 99
PDF PRINTING ..................................................................... 100
CHAPTER 3—JAVASCRIPT COMPONENTS ........... 108
JAVASCRIPT COMPONENT PROPERTIES................................ 110
JAVASCRIPT COMPONENT EVENTS ...................................... 115
JAVASCRIPT COMPONENT ICONS ......................................... 116
ACTIVITY CONTROL ............................................................ 120
BACKGROUND CONTROL ..................................................... 120
BAR AND PIE CHART CONTROL ........................................... 122
BUTTON CONTROL .............................................................. 124
CHECKBOX CONTROL .......................................................... 125
COMBO BOX ........................................................................ 126
COMPLEX GRID ................................................................... 128
DATA GRID CONTROL ......................................................... 130
DATE PICKER CONTROL ...................................................... 135
DEVICE CONTROL ................................................................ 137
DROPLIST CONTROL ............................................................ 145
EDIT CONTROL .................................................................... 146
FILE CONTROL ..................................................................... 148
HTML OBJECT .................................................................... 150
HYPERLINK CONTROL ......................................................... 153
LABEL OBJECT .................................................................... 153
LIST CONTROL ..................................................................... 154
MAP CONTROL .................................................................... 158
NAVIGATION BAR CONTROL ................................................ 161
PAGE CONTROL ................................................................... 163
PAGED PANE ....................................................................... 163
PICTURE CONTROL .............................................................. 164
PIE CHART CONTROL ........................................................... 165
POPUP MENU CONTROL....................................................... 165
PROGRESS BAR CONTROL ................................................... 166
RADIOGROUP CONTROL ...................................................... 167
RICH TEXT EDITOR CONTROL ............................................. 169
SLIDER CONTROL ................................................................ 170
SUBFORM ............................................................................ 171
SWITCH CONTROL ............................................................... 173
TAB CONTROL ..................................................................... 174
TIMER CONTROL ................................................................. 176
TRANS BUTTON CONTROL ................................................... 176
TREE CONTROL ................................................................... 177
VIDEO CONTROL ................................................................. 182
4
Table of Contents
CHAPTER 4—CREATING APPS USING IOS CLIENT184
REQUIREMENTS ................................................................... 185
CREATING REMOTE FORMS FOR IOS .................................... 186
IOS FORM PROPERTIES AND METHODS ............................... 196
IOS FORM EVENTS .............................................................. 198
IOS COMPONENTS ............................................................... 200
CREATING AN OMNIS IOS APP ............................................. 235
TESTING YOUR OMNIS IOS APP ............................................ 237
DEPLOYING YOUR OMNIS IOS APP ....................................... 240
CHAPTER 5—ULTRA-THIN OMNIS .......................... 241
HTML FORMS AND REMOTE TASKS ................................... 241
USING TASK METHODS TO PROCESS REQUESTS .................. 244
RETURNING CONTENT TO THE CLIENT ................................. 247
PERSISTENT REMOTE TASKS ............................................... 251
MULTIPART FORM DATA ..................................................... 252
DIRECT CLIENT CONNECTIONS ............................................ 253
CHAPTER 6—LOCALIZATION ................................... 255
LOCALIZATION FOR THE JAVASCRIPT CLIENT ...................... 255
CHAPTER 7—DEPLOYING YOUR WEB & MOBILE APPS 260
OMNIS WEB ARCHITECTURE ............................................... 261
EDITING YOUR HTML PAGES ............................................. 261
SETTING UP THE OMNIS APP SERVER................................... 265
SETTING UP YOUR WEB SERVER......................................... 274
CREATING STANDALONE MOBILE APPS ............................... 282
THE JAVASCRIPT SERVERLESS CLIENT ................................ 287
INDEX ............................................................................... 299

5
About This Manual
About This Manual
This manual describes all the features in Omnis Studio that allow you to create web and
mobile apps for desktop and mobile platforms. It describes how you create Remote forms
using the JavaScript Client for displaying in the browser on web and mobile devices, as well
as setting up the Omnis App Server for deploying your applications.
If you are new to Omnis Studio
If you are new to Omnis, you should look at the Welcome screen in Omnis which is
displayed when you start Omnis and contains a tutorial as well as several sample web apps.
You can work through the same tutorial in this manual, while subsequent chapters will
provide you with all the information you need to create web and mobile apps using the
JavaScript Client.
You can read the Omnis Programming manual to learn about the general tasks and
techniques required for creating Omnis applications. In addition, there are the Omnis
Reference manuals containing information about all the Commands, Functions, and
Notation available in Omnis, together with a comprehensive Help system available from
within the Omnis development environment using the F1 key.

6
Starting Omnis
Chapter 1—Tutorial
The first section of this tutorial shows you how to create an Omnis application to browse a
picture database on your desktop computer. The database is a library of sample client
designs for a fictional design company including TV program idents, Album artworks, and
book jackets. You could, however, use the application to store any type of picture data, such
as a library of your digital photos. To use the application for your own data, you need to
work through the tutorial to create the application and then create and logon to your own
database, or you could use the library in the final folder, located inside the welcome/tutorial
folder.
Further sections of the tutorial show you how to view the same picture database in a web
browser and/or a mobile device such as a tablet or smartphone. (Note that some editions of
Omnis Studio may not allow you to develop web or mobile applications, but you will be
able to complete the first part of the tutorial.)
The first part of the tutorial will take about an hour to complete.
What will you learn?
The tutorial shows you how to create the Omnis class structure required to match the data
structure in an existing database (a SQLite database file) and how to create a simple data
entry window to browse and insert new pictures. Then it shows you how to create a web
form to browse the data in a web browser, either on a desktop computer or mobile device.

7
Chapter 1—Tutorial
Mouse and Keyboard Usage
In this tutorial, all mouse and key combinations are given in shorthand for all supported
platforms, therefore "press Ctrl/Cmnd-T" means you press Ctrl-T under Windows, and
Cmnd-T under OS X, and similarly "press F2/Cmnd-2" means you press the F2 key under
Windows, and Cmnd-2 under OS X.
Context Menus
Many of the tools in Omnis have context menus that provide options that speed up
development and navigation (to show a context menu click the Right mouse button on the
tool under Windows, or Ctrl-click on the tool under OS X).
Starting Omnis
To create an Omnis Studio application, you use the Development version. Once your
application exists, you normally use it in conjunction with the Runtime or Server version of
Omnis Studio. The Development version has all the browsers and debugging facilities that
you need to help you build an application, but also allows you to test your application in
runtime mode as you build it and without having to compile your app. During this tutorial,
you will be using the Development version.
When you start Omnis Studio, the Integrated Development Environment (IDE) will appear
and the Studio Browser is opened.

If you cannot see the Studio Browser then press the compass icon on the main Omnis Studio
toolbar, or press the F2/Cmnd-2. If any Omnis libraries are currently open, they will appear
under the Libraries node in the Folders tree list in the Browser. If you cannot see the tree
list in the Browser, press the Folders button on the Studio Browser window toolbar.
8
Creating a Library
Creating a Library
The starting point for your Omnis application is an Omnis library. A library stores all the
windows (forms), menus, reports, and other classes in your application. To create a library:

Press F2/Cmnd-2 or click on the Studio Browser to bring it to the top, then click on
the Libraries branch in the Folders tree list and select the New Library option to the
right of the Folders tree list in the Browser.
Starting from the folder where Omnis Studio is installed (under Windows Vista this may be
in your Local folder):

Navigate to the welcome/tutorial folder.
Under Windows XP the welcome\tutorial folder is in the main Omnis product tree in
Program Files, but under Windows Vista the welcome\tutorial folder is located in your
Local folder (note that you may need to enable hidden folders in the Windows File Manager
to access the AppData folder). The path under Windows Vista will be something like:
C:\Users\<your-name>\AppData\Local\TigerLogic\OS5x\welcome\tutorial

In the New Library dialog, type the name pics.lbs, including the extension .LBS, and
click on OK/Save.

9
Chapter 1—Tutorial
When you create or open a library it appears in the Studio Browser. To view the contents of
a library you expand the Libraries branch of the Folders tree list and click on the library
name.
An alternative way to expand a branch in the Folders tree list is to double-click the library.
The classes that belong to the selected library are listed to the right of the Folders tree list in
the Browser list. Using the View menu on the Browser window toolbar you can change the
display to Large Icons, Small Icons or Details.

Note that the list displaying the contents of your library initially contains a Startup Task
that initializes the library when it starts up and a folder containing some System Classes
(inside the folder) that are required to configure a library.
10