A Field Guide to App Studio Controls
Note: This page uses features only supported by mobile browsers (Android and Safari). It will not show properly in Internet Explorer.
Here are AppStudio's screen controls.
The appearance of these controls will differ based on the device they are running on, based on factors such as screen size, default UI specifications and operating system.
AppStudio supports multiple frameworks: jQuery Mobile and jqWidgets. A framework is a set of controls which share underlying formatting structures.
Each framework has its own features and advantages. If all your controls are from the same framework, your app size will be minimized and will have the most consistant look and feel.
- jQuery Mobile provides a set of attractive and powerful controls. They are not small, but run on a wide variety of platforms. It is open source and being very actively developed.
- The jqWidgets controls are a set of advanced controls that provide some amazing functionality. Full details can be found at jqWidget's website. The controls are free for non commercial use, $99 otherwise.
- 1 jQuery Mobile Controls
- 2 General controls - all frameworks
- 3 jqWidgets Controls
- 3.1 Using jqWidgets
- 3.2 Buttons
- 3.3 Calendar
- 3.4 Chart
- 3.5 CheckBox
- 3.6 ColorPicker
- 3.7 DateTimeInput
- 3.8 Docking
- 3.9 DragDrop
- 3.10 Editor
- 3.11 Grid
- 3.12 Input
- 3.13 ListBox
- 3.14 MaskedInput
- 3.15 Menu
- 3.16 NavigationBar
- 3.17 PasswordInput
- 3.18 PhotoGallery
- 3.19 Rating
- 3.20 RadialGauge
- 3.21 SwitchButton
- 3.22 Tabs
- 3.23 Tree
- 3.24 Validator
- 3.25 Window
- 4 MultiMedia Controls
- 5 Financial & Social Media Controls
- 6 Date and Time Controls
jQuery Mobile Controls
Here is an actual AppStudio App which uses them:
General controls - all frameworks
Use the Grid to display data that is in a table. You can specify titles, the number of rows and columns, together with their heights and widths, at design time. The value are filled in at runtime.
InputBox and NSB.InputBox
The InputBox brings up a one line modal input field. Use NSB.InputBox if you want to specify your own title. Both "Message area" and "Default text" can be set at runtime.
MsgBox and NSB.MsgBox
The MsgBox is a modal box that can be used to give messages to the user. It has the option of having a Cancel button as well. Use NSB.MsgBox to specify your own title, have multiple OK/Cancel buttons and to use custom icons.
jqWidgets is platform independent, cross-browser compatible framework which works on PC and mobile devices.
It is a commercial product, which depending on how you use it, requires a license fee. Complete details are here. The product is well supported.
Complete documentation is at jqWidgets.com.
The jqWidgets samples use jqWidgets files directly from their website. This may not be best for you, since they can change these files at any time. A better way to use jqWidget's library is to download the files from jqWidgets, then copy the jqwidgets folder from it into your project folder.
Then, in the Project Properties of each jqWidgets control you use, change the value of 'pathTo_jqWidgets' to 'jqwidgets/'. Deploy will then use your copy of the files, not the ones on jqWidget's website. You will have control of when the files get updated.
jqxDocking represents a jQuery widget which allows you to manage multiple windows and even the layout of your web page. Each window in the jqxDocking can be resized, dragged around the Web page, docked into docking zones, removed from the docking, collapsed into a minimized state to hide its content, expanded to display its content or pinned in place. With the jqxDocking API, you can Save or Load the Docking's Layout in JSON.
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting.
jqxNavigationBar is a versatile jQuery widget for building collapsible side-menu systems. It has header and content sections(like tabs). Users can expand or collapse a content section by clicking its associated header.
jqxRadialGauge displays an indicator within a range of values. Gauges can be used in a table or matrix to show the relative value of a field in a range of values in the data region, for example, as a KPI. It supports SVG and VML rendering.
The Audio control contains a sound and has the ability to play and pause it. It can show its controls or be invisible.
The Image control is used to display images. They can be jpg, gif, png or bmp. An image can be clickable, making it an easy to use PictureButton. It can also be moved at runtime, as a sprite.
PictureBox allows you to draw images, text and graphics. It's based on HTML5's Canvas type and has numerous features.
The Video control contains a sound and has the ability to play and pause it. It can show its controls or be invisible. On some devices, it takes over the entire screen while it is playing.
Financial & Social Media Controls
The Adsense control allows you to earn money from advertising in your app.
The Facebook control lets you add a 'like' button to your app.
The PayPal control provides an easy way to collect a payment or a donation from a user. Tapping on it will bring up the PayPal Payments screen with the user and amount filled in - all they have to do is approve the transation. To use it, you need to have a PayPal Merchant Account (easy to set up), and use Merchant Services to create a button. Use the ID number it gives you in the properties of the button, and specify whether this is a Donation or Purchase. This feature will be handy for those selling commercial or donationware apps..
The Twitter control allows lets people follow your app.
Date and Time Controls
The Date control allow you to enter dates.
The Datetime control allow you to enter dates and times.
The Month control allow you to enter a month and year.
[The Time control allow you to enter a time.