A Field Guide to App Studio Controls: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
(42 intermediate revisions by 3 users not shown)
Line 1: Line 1:
''Note: This page uses features only supported by mobile browsers (Android and Safari). It will not show properly in Internet Explorer.''
''Note: This page uses features only supported by mobile browsers (Android and Safari). It will not show properly in Internet Explorer.''


Here are App Studio's screen controls.
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.
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.


App Studio supports multiple frameworks: jQuery Mobile, Classic and jqWidgets. A framework is a set of controls which share underlying formatting structures. Certain frameworks, such as jQuery Mobile and Classic, are mutually exclusive. Putting them in the same project will lead to conflicts. The IDE will usually prevent you from doing this by accident.
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.
 
* [http://www.jquerymobile.com 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 [http://www.jqWidgets.com jqWidgets] controls are a set of advanced controls that provide some amazing functionality. Full details can be found at [http://www.jqwidgets.com jqWidget's website]. The controls are free for non commercial use, $99 otherwise.  
 


= jQuery Mobile Controls =
= jQuery Mobile Controls =


jQuery Mobile provides a set of attractive and powerful controls. Here is an actual App Studio App which uses them:
Here is an actual AppStudio App which uses them:




Line 22: Line 28:
-->
-->


= Classic Controls =


The Classic controls are easy to use and efficient. For these, we will show each control on its own. Many of these controls (the ones which are not marked "Classic") can also be used with the jQuery Mobile framework.
== Button (Classic) ==


[[File:Button.jpg]]<br><br />
= General controls - all frameworks =


The Button control is used to cause an action in your program.
== Grid ==


== ButtonBar (Classic) ==
[[File:Grid.jpg]]<br>
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.


[[File:buttonbar.jpg]]<br>
== InputBox and NSB.InputBox ==


The ButtonBar control lets you arrange two or three buttons, either as a titlebar or lower down on the form. This are usually used for apps with multiple forms to switch between. Each form will have a buttonbar control on it, with a different button highlighted.
[[File:NsbInputBoxAndroid.png]]


== Checkbox (Classic) ==
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.


[[File:Checkbox.jpg]]<br>
== MsgBox and NSB.MsgBox ==
A Checkbox control is used to select a true or false value. It can have one or more items.


== ComboBox (Classic) ==
[[File:NsbMsgBox1android.png]]
[[File:NsbMsgBox2android.png]]
[[File:NsbMsgBox3android.png]]


[[File:ComboBox.jpg]]<br>
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.
Use the ComboBox to select a value from a list. The list is populated at runtime.


== Menu (Classic) ==
= jqWidgets Controls =


[[File:Menu.jpg]]<br>
jqWidgets is platform independent, cross-browser compatible framework which works on PC and mobile devices.  
The Menu control give you a list of buttons to control actions. There can be one or more of them.


== MenuNumberTitleDescArrow (Classic) ==
It is a commercial product, which depending on how you use it, requires a license fee. Complete details are [http://www.jqwidgets.com/license/ here]. The product is well supported.


[[File:menuNumberTitleDescArrow.jpg]]<br>
Complete documentation is at [http://www.jqwidgets.com jqWidgets.com].
The MenuNumberTitleDescArrow control shows a number (or word), title, optional description and an arrow. There can be one or more of them.


== MenuNumberTitleTime (Classic) ==
=== Using jqWidgets ===


[[File:menuNumberTitleTime.jpg]]<br>
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.
The MenuNumberTitleTime control shows a number (or word), title and optional time. There can be one or more of them.


== MenuTextBlock (Classic) ==
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.


[[File:menuTextBlock.jpg]]<br>
== Buttons ==
The MenuTextBlock control shows blocks of text and an arrow. There can be one or more of them.


== MultiInput (Classic) ==
[[File:button1_jqw.jpg]]<br>
[[File:button2_jqw.jpg]]<br>
jqWidget's buttons have some features not found in other buttons: repeating and toggle among them.


[[File:Multiinput.jpg]]<br>
== Calendar ==
MultiInput allows you to have one or more input fields in a column. For each row, you can specify a placeholder, a default value and an input type (text, number, etc). It also has the option of putting a title in each input box.
[[File:jqxCalendar.png]]<br>
jqxCalendar represents a jQuery calendar widget that enables the user to select a date using a visual monthly calendar display.


== NSB.ShowProgress ==
== Chart ==
[[File:chart_jqw.jpg]]<br>
There's a powerful charting control. It can do column, line, area, stacked area, pie, bubble and scatter charts.


[[File:showprogress.png]]
== CheckBox ==
NSB.ShowProgress lets you put a temporary message on the screen. It can be dismissed by the user or by the app at any time.
[[File:jqxcheckbox.png]]<br>
The jqxCheckBox widget displays a check box that allows the end-user to select a true, false or indeterminate condition.


== Slider ==
== ColorPicker ==
[[File:jqxcolorpicker.png]]<br>
[[File:slider1.jpg]]<br>
The ColorPicker control lets you easily select a color.
[[File:slider2.jpg]]<br>
The Slider control allows you to have an input slider. (iOS 5++).


== RadioButton (Classic) ==
== DateTimeInput ==
[[File:Jqxdatetimeinput.png]]<br>
jqxDateTimeInput represents a highly configurable widget for displaying and selecting date and time values by using a popup Calendar display or by keyboard input into the text field.


[[File:RadioButton.jpg]]<br>
== Docking ==
The RadioButton presents a list of choices which are mutually exclusive. Selecting one deselects any others. (This control replaced OptionButton.)
[[File:Jqxdocking.png]]<br>
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.


== TextArea ==
== DragDrop ==
 
[[File:drag_jqw.jpg]]<br>
[[File:Textarea.jpg]]<br>
jqWidgets can make any other control draggable. An event can be fired when it is dragged onto another control.
TextArea is a multiline input area. You can also specify autocapitalize, autocomplete and autocorrect.
 
== TextBox ==
 
[[File:Textbox.jpg]]<br>
TextBox is a single line input area. You can specify the type of input that is allowed: email, number, password,search, tel, text or url. Depending on the device you are running on, the appearance and pop up keyboard will be customized for the input type. You can also specify autocapitalize, autocomplete and autocorrect.
 
== TitleBar (Classic) ==
 
[[File:TitleBar1.jpg]]<br>
[[File:TitleBar2.jpg]]<br>


The TitleBar control sets the top bar on the screen. It has optional buttons on each side: either navigation style (arrow shaped) or plain. The buttons can have the default color or be blue. There are also a number of graphics that are substituted for specific button names.
== Editor ==
 
[[File:Jqxeditor.png]]<br>
= General controls - all frameworks =
jqxEditor represents a ready-for-use HTML text editor which can simplify web content creation or be a replacement of your HTML Text Areas.


== Grid ==
== Grid ==
[[File:jqxGrid.png]]<br>
The Grid is a powerful jQuery widget that displays tabular data. It offers rich support for interacting with data, including paging, grouping, sorting, filtering and editing.


[[File:Grid.jpg]]<br>
== Input ==
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.
[[File:jqxinput.png]]<br>
The Input widget provides suggestions while you type into the field. The datasource is a simple array, provided to the control using the "source" property.


== InputBox and NSB.InputBox ==
== ListBox ==
[[File:jqxlistbox.png]]<br>
The jqxListBox represents a jQuery listbox widget that contains a list of selectable items.


[[File:Inputbox.jpg]]<br>
== MaskedInput ==
[[File:nsbinputbox.jpg]]<br>
[[File:Jqxmaskedinput.png]]<br>
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.
The jqxMaskedInput widget uses a mask to distinguish between proper and improper user input. You can define phone number, ssn, zip code, dates, etc. masks by setting the jqxMaskedInput mask property.


== MsgBox and NSB.MsgBox ==
== Menu ==
[[File:jqxMenu.png]]<br>
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.


[[File:MsgBox.jpg]]<br>
== NavigationBar ==
[[File:nsbmsgbox1.jpg]]<br>
[[File:Jqxnavigationbar1.png]]<br>
[[File:nsbmsgbox2.jpg]]<br>
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.
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.


== PasswordInput ==
[[File:Jqxpasswordinput.png]]<br>
jqxPassword manages inputting passwords. It features the ability to measure the strength of passwords.


= jqWidgets Controls =
== PhotoGallery ==
[[File:PhotoGallery1.png]]<br>
yqxPhotoGallery displays a slide show of images.


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.
== Rating ==
== Buttons ==
[[File:jqxrating.png]]<br>
The rating control lets you enter and display a number of stars in a row.  
[[File:button1_jqw.jpg]]<br>
[[File:button2_jqw.jpg]]<br>
jqWidget's buttons have some features not found in other buttons: repeating and toggle among them.


== Chart ==
== RadialGauge ==
[[File:jqxradialgauge.png]]<br>
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.


[[File:chart_jqw.jpg]]<br>
== SwitchButton ==
There's a powerful charting control. It can do column, line, area, stacked area, pie, bubble and scatter charts.
[[File:toggle1_jqw.jpg]]<br>
 
[[File:toggle2_jqw.jpg]]<br>
== Drag ==
It's a simple on/off toggle, but has some nice customization features.
[[File:drag_jqw.jpg]]<br>
jqWidgets can make any other control draggable. An event can be fired when it is dragged onto another control.


== Tabs ==
== Tabs ==
[[File:tab_jqw.jpg]]<br>
[[File:tab_jqw.jpg]]<br>
Tabs let you organize more information on the screen.
Tabs let you organize more information on the screen.


== Toggle ==
== Tree ==
[[File:jqxTree.png]]<br>
[[File:toggle1_jqw.jpg]]<br>
jqxTree represents a jQuery Tree widget that displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.
[[File:toggle2_jqw.jpg]]<br>
 
It's a simple on/off toggle, but has some nice customization features.
== Validator ==
[[File:Jqxvalidator.png]]<br>
jqxTree represents a jQuery Tree widget that displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.
 
== Window ==
[[File:Jqxwindow1.png]]<br>
[[File:Jqxwindow2.png]]<br>
jqxTree represents a jQuery Tree widget that displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.


= MultiMedia Controls =
= MultiMedia Controls =
Line 160: Line 170:


[[File:audio.jpg]]<br>
[[File:audio.jpg]]<br>
The Audio control contains a sound and has the ability to play and pause it. It can show its controls or be invisible.
The [[Audio]] control contains a sound and has the ability to play and pause it. It can show its controls or be invisible.


== HTMLview ==
== HTMLview ==


[[File:HTMLview.jpg]]<br>
[[File:HTMLview.jpg]]<br>
The HTMLview is used to display HTML formatted text. It can include any valid HTML, including links, JavaScript and CSS. It supports multi touch gestures.
The [[HTMLView]] is used to display HTML formatted text. It can include any valid HTML, including links, JavaScript and CSS. It supports multi touch gestures.


== Image ==
== Image ==


[[File:Image.jpg]]<br>
[[File:Image.jpg]]<br>
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.
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 ==
== PictureBox ==
Line 179: Line 189:
== Video ==
== Video ==
[[File:video.jpg]]<br>
[[File:video.jpg]]<br>
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.
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 =
= Financial & Social Media Controls =
Line 186: Line 196:


[[File:adsense.jpg]]<br>
[[File:adsense.jpg]]<br>
The AdSense control allows you to earn money from advertising in your app.
The [[Adsense]] control allows you to earn money from advertising in your app.


== Facebook ==
== Facebook ==


[[File:facebook.jpg]]
[[File:facebook.jpg]]
The Facebook control lets you add a 'like' button to your app.
The [[Facebook]] control lets you add a 'like' button to your app.


== PayPal ==
== PayPal ==


[[File:paypal.jpg]]
[[File:paypal.jpg]]
The PayPal control provides an easy way to collect a payment or a donation from a user. Tapping on it will bring up the PayPay 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 [[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..


== Twitter ==
== Twitter ==


[[File:twitter.jpg]]<br>
[[File:twitter.jpg]]<br>
The Twitter control allows lets people follow your app.
The [[Twitter]] control allows lets people follow your app.


= Date and Time Controls =
= Date and Time Controls =
[[file:Dateios.png|thumb|200px|Date on iOS]]
[[file:Timeios.png|thumb|200px|Time on iOS]]
[[File:DateAndroidMM.png|thumb|200px|Date control on Android Chrome]]


== Date ==
== Date ==


[[File:date.jpg]]<br>
The [[Date]] control allow you to enter dates.
The Date control allow you to enter dates. (iOS 5+)
<br>
<br>
<br>
<br>


== DateTime ==
== DateTime ==


[[File:datetime.jpg]]<br>
The [[Datetime]] control allow you to enter dates and times.  
The DateTime control allow you to enter dates and times. (iOS 5+)
<br>
<br>
<br>
<br>


== Month ==
== Month ==
<br>
<br>
<br>
<br>


[[File:month.jpg]]<br>
The [[Month]] control allow you to enter a month and year.  
The Month control allow you to enter a month and year. (iOS 5+)


== Time ==
== Time ==


[[File:time.jpg]]<br>
[The [[Time]] control allow you to enter a time.  
The Time control allow you to enter a time. (iOS 5+)
<br>
<br>
<br>
<br>

Revision as of 22:57, 22 January 2016

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.


jQuery Mobile Controls

Here is an actual AppStudio App which uses them:


{{#widget:Iframe |url=http://www.nsbasic.com/KitchenSink |width=322 |height=480 |border=0 }}


General controls - all frameworks

Grid


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 Controls

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.

Using jqWidgets

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.

Buttons



jqWidget's buttons have some features not found in other buttons: repeating and toggle among them.

Calendar


jqxCalendar represents a jQuery calendar widget that enables the user to select a date using a visual monthly calendar display.

Chart


There's a powerful charting control. It can do column, line, area, stacked area, pie, bubble and scatter charts.

CheckBox


The jqxCheckBox widget displays a check box that allows the end-user to select a true, false or indeterminate condition.

ColorPicker


The ColorPicker control lets you easily select a color.

DateTimeInput


jqxDateTimeInput represents a highly configurable widget for displaying and selecting date and time values by using a popup Calendar display or by keyboard input into the text field.

Docking


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.

DragDrop


jqWidgets can make any other control draggable. An event can be fired when it is dragged onto another control.

Editor


jqxEditor represents a ready-for-use HTML text editor which can simplify web content creation or be a replacement of your HTML Text Areas.

Grid


The Grid is a powerful jQuery widget that displays tabular data. It offers rich support for interacting with data, including paging, grouping, sorting, filtering and editing.

Input


The Input widget provides suggestions while you type into the field. The datasource is a simple array, provided to the control using the "source" property.

ListBox


The jqxListBox represents a jQuery listbox widget that contains a list of selectable items.

MaskedInput


The jqxMaskedInput widget uses a mask to distinguish between proper and improper user input. You can define phone number, ssn, zip code, dates, etc. masks by setting the jqxMaskedInput mask property.

Menu


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.

NavigationBar


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.

PasswordInput


jqxPassword manages inputting passwords. It features the ability to measure the strength of passwords.

PhotoGallery


yqxPhotoGallery displays a slide show of images.

Rating


The rating control lets you enter and display a number of stars in a row.

RadialGauge


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.

SwitchButton



It's a simple on/off toggle, but has some nice customization features.

Tabs


Tabs let you organize more information on the screen.

Tree


jqxTree represents a jQuery Tree widget that displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.

Validator


jqxTree represents a jQuery Tree widget that displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.

Window



jqxTree represents a jQuery Tree widget that displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.

MultiMedia Controls

Audio


The Audio control contains a sound and has the ability to play and pause it. It can show its controls or be invisible.

HTMLview


The HTMLView is used to display HTML formatted text. It can include any valid HTML, including links, JavaScript and CSS. It supports multi touch gestures.

Image


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


PictureBox allows you to draw images, text and graphics. It's based on HTML5's Canvas type and has numerous features.

Video


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

AdSense


The Adsense control allows you to earn money from advertising in your app.

Facebook

The Facebook control lets you add a 'like' button to your app.

PayPal

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..

Twitter


The Twitter control allows lets people follow your app.

Date and Time Controls

Date on iOS
Time on iOS
Date control on Android Chrome

Date

The Date control allow you to enter dates.



DateTime

The Datetime control allow you to enter dates and times.



Month





The Month control allow you to enter a month and year.

Time

[The Time control allow you to enter a time.