Widget Programmers' Guide
Quantum Visualizer is a powerful yet easy-to-use integrated development environment (IDE) for developing, building, testing, debugging, and deploying mobile applications for multiple platforms—all from a single code base. To learn how to use Quantum Visualizer, see the Quantum Visualizer User Guide.
Quantum Visualizerallows you to create applications visually by dragging widgets from the Widget Library, and dropping them onto a form or other container object, quickly creating the user interface for a mobile application. These widgets have properties that can be set in Quantum Visualizer, and can also be set and modified by code you write as part of your application.
For information on revision history, click Revision History.
The Quantum Visualizer Widget Programmers' Guide describes each widget, its properties, and how you can write JavaScript code to change properties and control the behavior of widgets within your application.
Widgets Overviews
This section of the Quantum Visualizer Widget Programmer's Guide provides general information on the use of Widgets within your Visualizer applications.
Widgets are visual components in Quantum Visualizer that are used to build application user interfaces quickly and with a minimum of custom code. Although most widget properties can be set using the Quantum Visualizer IDE, some properties need to be set and managed from custom JavaScript code. This guide describes how this is done, and lists the properties and events you will use to interact with Quantum Visualizer widgets.
Widgets are small chunks of re-usable code which include graphical user-interface elements that scale gracefully depending on the power and resolution of your mobile device targets. Some widgets function as containers to hold other widgets.
Quantumwidgets also include support for platform specific properties. These platform specific properties allow your apps to have a native look and feel on each platform.
Widgets are categorized as Containers, Basic, and Advanced based on the behavior and characteristics of the widgets.
- Basic Widgets: These widgets are used for basic functions on a form. They are the most commonly used widgets in an application design. These widgets are components that act independently of the Container Widgets.
- Container Widgets: These hold container, basic or advanced widgets within them.
- Advanced widgets: Used to achieve advanced interaction within an application. You can use these widgets along with basic widgets to achieve a complex interaction design.
Widgets List
| Widget | Comments | Category |
|---|---|---|
| Alert | A pre-configured dialog box that pops-up with a message such as a confirmation or an error. | Basic Widgets |
| App Menu | Usually a menu bar displayed at the bottom of a form in an app. | Basic Widgets |
| ARRenderer | Helps you to implement augmented reality in your app. | Advanced Widgets |
| Browser | Displays HTML content in the context of your application without navigating away from the application or opening the native browser from your application | Advanced Widgets |
| Button | A rectangle or rounded rectangle with a descriptive caption in its center. Use a button to trigger actions, such as navigating to a form or interacting with a dialog box. | Basic Widgets |
| Calendar | Presents a calendar to the user so that the user can pick one or more dates. | Basic Widgets |
| Camera | Controls the on-device camera for taking pictures and videos. | Advanced Widgets |
| CheckBoxGroup | Displays a group of related checkboxes so that the user can select one or more items from the group. | Basic Widgets |
| ComboBox | Presents a drop-down list to the user allowing them to select a single item | Basic Widgets |
| CordovaBrowser | Displays HTML content in your application without navigating away from the application or opening the native browser. Use the CordovaBrowser widget to port your web or Apache Cordova (PhoneGap) app to Quantum Visualizer. | Advanced Widgets |
| DataGrid | Presents a tabular view of data to the user. | Basic Widgets |
| FlexContainer | Allows you to arrange multiple widgets in horizontal, vertical or free-form order. You can only add the FlexContainer to a Flex form. | Container Widgets |
| FlexForm | A FlexForm is the top most container widget and you can place any number of widgets on it, Navigating between forms is a common way to structure the functionality of an app. | Container Widgets |
| FlexScrollContainer | Scrollable UI container form that allows more items to be displayed in a list than allowed by screen size. | Container Widgets |
| Image | Displays a graphic (local or remote) from a PNG file. | Basic Widgets |
| Label | Shows non-editable text on a form. | Basic Widgets |
| ListBox | Presents a drop-down list to the user and enables the user to select one or more items. | Basic Widgets |
| Map | Provides your app with the capability to display predefined locations (latitude and longitude) on an onscreen map. | Advanced Widgets |
| MLCamera | Provides your app with image recognition and classification capability. | Advanced Widgets |
| NativeContainer | Customizable widget that enables you to wrap native device functionality in a widget that you can then instantiate and use in your JavaScript app. | Container Widgets |
| PDFView | Displays the content of the PDF URL in your app. | Advanced Widgets |
| Phone | Allows your phone app to call a phone number. | Advanced Widgets |
| PickerView | Uses a spinning wheel metaphor to display multiple sets of values and allows you to select a single combination of values. | Advanced Widgets |
| RadioButtonGroup | Presents a group of radio buttons to the user and enables the user to select one. | Basic Widgets |
| RichText | Displays a string in rich text format. | Basic Widgets |
| SegmentedUI | A widget that can be used for menus and grouped lists and that consists of multiple segments (rows or records), each segment (row or record) possibly having multiple child widgets. | Advanced Widgets |
| Slider | Allows users to select a value from a range of values by moving an indicator. | Basic Widgets |
| Switch | Presents two mutually exclusive choices or states. | Advanced Widgets |
| TabPane | Tabbed UI form. | Container Widgets |
| TextArea | An editable widget that enables users to enter multi-line text. | Basic Widgets |
| TextBox | An editable text component that is used to obtain an input from a user. | Basic Widgets |
| Video | Allows your app to play video files captured using the device's camera, videos from app resources, and from servers/websites within a form. | Advanced Widgets |
For a more hands-on approach on the functionality of the various widgets and APIs provided by Quantum AppPlatform. import and preview the Kitchen Sink app by using Quantum Visualizer.
Contact Us
We welcome your feedback on our documentation. Write to us at techpubs@kony.com.For technical questions, suggestions, comments, or to report problems on Quantum's product line, contact support@kony.com.