NSB App Studio - User contributions [en]

Language reference

2015-11-21T21:32:02Z

Admin: Reverted edits by Ftaalish (talk) to last revision by Ghenne

EXE.pythonEval

2015-08-10T20:27:49Z

Admin:

EXE.pythonEval(''code''[, ''callback''])

== Description ==

EXE.pythonEval executes code in the EXE runtime wrapper. It only works in EXE apps. AppStudio's EXE apps work by wrapping your app in a executable wrapper which is written in Python. This function requires you to know Python to use it.

Code has to be properly formatted Python code, following all Python syntax rules. In addition to the base Python language, the following libraries can be used:
* os
* wx
* jason
* yaml

Other may be included in a future release.

Calls to EXE.pythonEval are processed asynchronously. To return values, put {callback}(value) in your code, and supply the name of the function you want called as ''callback''.

== Example (BASIC) ==

Do a simple calculation and return the result
<pre>
EXE.pythonEval("{callback}(4*4)", "showResult")

Function showResult(res)
MsgBox res
End Function
</pre>

== Example (JavaScript) ==

<pre>
EXE.pythonEval("{callback}(4*4)", "showResult");

function showResult(res) {
NSB.MsgBox(res);
}
</pre>

== Other examples ==

Exit the app
<pre>
EXE.pythonEval("sys.exit(0)")
</pre>

Put up a wx Message Box:
<pre>
EXE.pythonEval("wx.MessageBox('It works!', 'Info', wx.OK | wx.ICON_INFORMATION)", "MessageBox")
</pre>

Run a code snippet

Put the following code into a TextArea:
<pre>
# Code must be in Python.
# note how to return results.
a=64
{callback}(a*a)
</pre>

And execute it as follows:
<pre>EXE.pythonEval(TextArea1.value, "showResult")</pre>

== Output ==

== Related Items ==

[[Category:Language Reference]]

Version 5

2015-08-10T20:26:24Z

Admin: /* Version 5.0.13 */

If you own a previous version of AppStudio, you need to buy the upgrade to use Version 5. You can do this from within the app or from our [http://www.nsbasic.com/order.shtml order form.]

Until you have bought the upgrade, you can use AppStudio 5 in Demo mode. Once you buy, your copy will convert automatically to the full version.

== Version 5.0.15 ==
# Controls: [[Line]] bounds are now grouped.
# Controls: [[RadioButton]] width is now in the right place in the Property Window.
# [[Form|Forms]]: jQuery Mobile theme can now be set on a form.
# Localization: Files updated. Indonesian is now complete.
# [[Make Windows Executables|MakeEXE]]: Better messages and wait cursor.
# [[Make Windows Executables|MakeEXE]]: Debug window no longer appears.
# [[Make Windows Executables|MakeEXE]]: Windows Shell commands can now be executed.
# Samples: Possible error fixed when opening samples picker.

== Version 5.0.14 ==
# Code Window: Don't case correct "parse"
# Controls: Add corner property to [[TextArea]], [[TextBox]].
# Controls: Allow multiline style properties
# Controls: Eliminate default text-shadow on TextArea, TextBox
# Controls: Enable theme support for TextArea, TextBox.
# Controls: Make [[Container]] Responsive Design aware.
# Controls: Redo how TextBox is created.
# Controls: [[RadioButton]] horizontal in a [[Container]] fixed.
# [[Make Windows Executables|MakeEXE]]: return error if evalPython fails.
# Samples: Add Globalization plugin to PhoneGapAPI sample.
# Samples: Add some folder descriptions.
# Translator: Fix a false negative.
# Translator: Fix bad translate of 'emptyData'

== Version 5.0.13 ==
# Controls: Style and Class properties should work for all controls.
# Controls: [[Container|Containers]] cannot be nested.
# Controls: [[Grid]].addRows(), addCols() add one each if no arg.
# [[Code Window]]: Do not capitalize style.
# Setup: Get Info for Windows now shows all data.
# Sample: Fixes to Background, Sprite, LabRotation
# IDE: Problem opening projects with code files fixed. (like upload.nsx)
# IDE: Projects cannot be saved with illegal file names.
# MakeEXE: New [[windowStyle]] property.
# MakeEXE: New [[EXE.pythonEval]]() function.
# MakeEXE: new execPython sample.
# Properties Windows: return takes you to the next property.
# Docs: Locale files updated.

== Version 5.0.12 ==
# Samples: All samples now have BASIC and JavaScript versions.
# Samples: new jPlayer streaming video sample (Thanks, Adrian!)
# Samples: new ResponsiveRotation sample.
# Build: Fix Mac OS 'Get Info' data.
# Controls: Don't set button margin to 0 if position is relative.
# StyleHeaders: Process last, so its rules have precedence.
# StyleHeaders: Update Design Screen on close.
# Translater: Fix 'else' embedded in variable name.
# Translator: Fix regular expression error in array/function.

== Version 5.0.11 ==
# Controls: Add min, max values to [[Date, DateTime|Date]] Pickers - speeds up Android.
# Controls: Allow vh, vw sizes (viewport height, viewport width)
# Controls: Fix error in jqWidgets [[JqxTabs|Tabs]] control.
# Controls: [[NavBar]], [[Footerbar|FooterBar]]: All spaces are now converted to underscores for event argument.
# Controls: NavBar, FooterBar: Design time style now used at runtime.
# Deploy: Get project path to jqWidgets correctly.
# [[Form]]: Default form height is now 100vh.
# Make EXE: Unicode characters are now allowed.
# PhoneGap Build Status: Improve iOS message.

== Version 5.0.10 ==
# [[Design Screen]]: Error when deleting control in a Container fixed.
# Samples: New sample using [http://www.chartjs.org/ Chartjs] library.
# Controls: [[Grid]] cellstyle property used when adding new rows.
# Controls: Make a number of controls behave better when using [[Responsive Design Made Simple|Responsive Design]].
# jqWidgets: The path to the jqWidgets controls is now a Project Property.
# Controls: Formatting of [[NSB.MsgBox]] improved.
# Script Window: Allow other windows to be edited.

Breaking change:
# if you are using a local copy of jqWidgets, you need to set pathTo_jqWidgets in Project Properties.

== Version 5.0.9 ==
# [[Code Window]]: Much faster. Lag between keystrokes eliminated.
# Script Window: Lets you display code, but no longer to modify it.
# [[Modal Forms]]: Overlay parameter fixed.
# [[Design Screen]]: CSS files work again.
# Samples: New OpenStreetMaps/Leaflet sample (Thanks, Adrian!)
# Controls: Tune [[Footerbar]] defaults.
# Controls: [[List]] control had a problem with empty list.
# Code Window: Function tips work consistently.
# Documentation: Offline Wiki files updated.

== Version 5.0.8 ==
# [[Design Screen]]: Adding controls is now more than twice as fast.
# [[Project Explorer]]: Moving controls up and down about 8 times faster.
# [[Code Window]]: Intellisense for user functions much, much faster.
# [[ServerStorage]]: Docs for installing on your own server [https://github.com/artlogic/server-storage/blob/master/README.md are now available].
# Controls: [[jqxGrid]] now handles % heights properly.
# Design Screen: Copy and Paste of [[Container|Containers]] fixed.
# Design Screen: Zero value for designHeight, DesignWidth fixed.
# Project Explorer: Dragging and dropping sound files fixed.
# Design Screen: Scrollbar no longer appears when fullscreen is false.
# Controls: [[Select]] no longer shows gray circle for custom icon.
# Samples: New Swipe sample. (Thanks, Mike Burgher!)
# Localization: Thai is complete. (Thanks, Theprasit S.!)

== Version 5.0.7 ==
# Deploy: A message now appears if errors are encountered at runtime.
# Project Properties: New stopOnError property to hide runtime error messages.
# Controls: [[NSB.MsgBox|MsgBox]] appearance improved.
# [[Form|Forms]]: Modal forms now have onhide and onshow events.
# EXE Files: Put on Start menu, not Startup files list.
# [[Code Window|Code Window:]] False negative on location = fixed.
# DropBox: [[Using a Dropbox Datastore|DataStore API]] is being [https://blogs.dropbox.com/developers/2015/04/deprecating-the-sync-and-datastore-apis/ deprecated by DropBox].

== Version 5.0.6 ==
# EXE files: Icon handling improved.
# Forms: Bounds now in a group
# Forms: Bounds can now be percent, "auto" or a value.
# Deploy: Code is only minimized when requested.
# Design Screen: extra time during startup allowed for.
# Controls: Minor path error in [[JqxDateTimeInput|jqxDateTimeInput]] fixed.

== Version 5.0.5 ==
# EXE files: Support added for localStorage.
# EXE files: new properties for publisher, icon, title, height and width.
# EXE files: now run as a localServer
# Controls: jqxGrid was not initiated properly in jqWidgets 3.8.
# Deploy: fix encoding mode on LaunchIcon57.png.
# Deploy: jsmin fixed.
# jQuery: updated to 2.1.4
# Properties Window: Properties now have groups.
# Properties Window: Borders, Bounds, Fonts are grouped.
# Properties: for Chrome Packaged Apps removed.
# Samples: Grid sample cellrenderer fixed for jqWidgets 3.8.
# ToolBox: Function list was sometimes not refreshing.
# Translator: add some semicolons

== Version 5.0.4 ==
# jqWidgets: Library conflict caused by jqWidgets 3.8 fixed.
# Samples: new PhoneGapFileSystem sample.
# Languages: locale files updated.
# Native Build Status: now shows a wait cursor.

== Version 5.0.3 ==
# Deploy: Don't create manifest file if no caching.
# Deploy: PhoneGap CLI remembers to create config.xml
# Samples: new VisualEffects sample.
# Samples: several updates.
# Translator: Problems with Functions fixed.

== Version 5.0.2 ==
# Check for Update: Set up text for translation.
# Controls: Allow multiple entries for [[ChangeForm]] where needed.
# Controls: [[jqxEditor]] control now has grab handles in Design Screen for resizing.
# Controls: [[Panel]] - Fix how it appears on Design Screen. Remove unused properties.
# Controls: [[jqxTabs]] control now appears properly.
# Deploy: 'no cache' option added to Manifest File property.
# [[Form|Forms]]: Improved reset() function. Thanks, Buck!
# Internal: Went back to wxPython 2.9.5 to solve problem with Spanish locale.
# [[Make Windows Executables|Make EXE]]: correct delete file command in make script.
# Make EXE: Force a save before making exe.
# Samples: Update and rename ModalForm.
# Translation: Fix some tab characters.

== Version 5.0.1 ==
# [[Code Window]]: Format code problem fixed.
# Deploy: Adding/deleting files to [[Project Explorer]] forces full Deploy.
# Deploy: Don't change name of file when deploying.
# Deploy: Fix formatting error in manifest.
# Deploy: Warn users of spaces in file names.
# [[Form|Forms]]: .reset() function is back.
# IDE: [[Design Screen]] now checks for Internet Explorer 11.
# Internals: pyExecJS not needed.
# [[Make Windows Executables|Make exe]]: All needed folders are now included.
# Run menu: Replace "Make Desktop App" with '[[Make Windows Executables|Make exe']].

== Version 5.0.0 ==

===Major New Features===
# [[Responsive Design Made Simple|Responsive Design]] lets your app adapt smoothly to different screen sizes.
# [[Make Windows Executables]] (exe) apps.
# Ten new controls, including [[Container]], [[Collapsible]], [[jqxEditor|Editor]], [[JqxEditor|Password]] Input and [[jqxWindow|Window]].
# Use [[ChangeForm|Visual Effects]] to show forms.
# Use [[Modal Forms]]
# Internet Explorer 11 support.

===IDE - General===
# New look and feel for the IDE
# Tools Menu: New option to convert a BASIC project to JavaScript.
# [[Open Sample Dialog|Open Sample]]: Now allows nested folders, for better organization
# [[Open Sample Dialog|Open Sample]]: New Find option.
# [[About Screen]]: reformatted.
# Find: Opens with "Find What" selected.
# Help: now displays HTML formatted text with links.
# [[Open Sample Dialog|Open Sample]]: Samples are now sorted case insensitively.
# [[Properties Window|Project Properties]]: New styleheader property saves your styling rules.
# [[Properties Window]]: ChangeForm and firstform now have pickers.
# Properties Window: Events set properly on control copy and paste.
# Run menu: New [[Make Windows Executables]] (exe) App.
# Run menu: Improved menu names.
# Save: Saving a project no longer changes the Project ID.
# Startup: Projects with deprecated controls will get a message when loading is attempted.
# Startup: Splash screen on Mac OS startup no longer required.
# Startup: When project reopened, tabs are all reopened and same one returned to.
# View menu: New option to close all tabs.
# Installer: Checks if IE11 is installed on Windows
# Installer: Modifies registry so IE11 recognizes AppStudio.

===Code Window===
# [[Code Window|Code Window:]] New clickable Function List appears in the Toolbox pane.
# Code Window: ToolTips now appear for user functions.
# Code Window: 'error' is no longer auto capitalized.
# Code Window: Code converted to JS is now beautified.
# Code Window: Error when typing 'screen.' fixed.
# Code Window: JSONP files are now edited as JSON files.
# Code Window: Problem with auto indentation fixed.

===Design Screen===
# [[Design Screen]]: controls are relative if their parent is.
# Design Screen: new zoom icon. Use this to shrink size of Design Screen. Disables drag and drop.
# Design Screen: controls can be grouped using [[Container|Containers]].
# Design Screen: Right click to lock controls from accidental position changes.
# Design Screen: Double click opens [[Code Window]].
# Design Screen: Dump wxWebkit. Now smaller, faster.
# Design Screen: Internally uses IE to render controls.
# Design Screen: Paste now shows on the right click menu.
# Design Screen: Snap to grid is now gray, not black.

===Project Explorer===
# Project Explorer: Folders can now be dragged and dropped.
# Project Explorer: JSON files can now be dragged and dropped.
# Project Explorer: SQLite databases can now be dragged and dropped.
# [[Project Explorer]]: Delete file now has confirmation message.
# Project Explorer: Warning if drag and drop of existing file.

===Language===
# [[ChangeForm]]() now supports visual effects.
# [[Ajax]]() can now have a callback as a second argument.
# Ajax() can now take an object for its parameters.
# Ajax() now supports a fail callback.
# [[ReadFile]]() can now be used asynchronously.
# Case normalization is now handled in Code Window
# Case normalization moved out of hfunc.js, killing hundreds of lines of code.
# Language version bumped. Existing projects will take longer to compile first time they are run using the new version.
# Map is now a keyword.
# Overlay() function deleted - it was obsolete.
# Referencing a control by name itself will return its value.
# Referencing a control by name will return a numeric if possible.
# [[Style/End Style]] deprecated. See 'Breaking Changes'.
# [[NSBCurrentForm]] changed to NSB.currentForm.
# Arrays no longer have to be declared in all modules.

===Toolbox===
# New: [[Container]] control for text, html and other controls.
# All: New [[Properties and Methods|methods]] to hide and show controls: fadeIn, fadeOut, slideUp, slideDown.
# All: Updated to work with IE11.
# All: -webkit prefix removed from css.
# All: Border [[properties]] are now consistant.
# All: BorderColor and BorderWidth added all controls with borders.
# All: Bounds can now be 'inherit' and 'initial'.
# All: Disabled property fixed.
# All: font selectors normalized.
# All: HTML output for borders streamlined.
# All: New onresize [[events|event]].
# All: no longer load function code that is not needed.
# All: [[ToolBox Files|ToolBox Files]] can now share property definitions.
# [[Camera]]: value can now be set at Design Time.
# [[Date, DateTime|Date and Time]]: appearance improved.
# Dialog is now on top of scroll bars.
# [[Facebook]]: unneeded font property removed.
# Functions for AppStudio's controls moved from complexfunctions.js to nsbFunctions.js.
# Functions for jqMobile controls moved from complexfunctions.js to jqmFunctions.js.
# Functions for jqWidget controls moved from complexfunctions.js to jqxFunctions.js.
# [[Generic]]: Deprecated - replaced by Container.
# [[Grid]]: .cellstyle can be read at runtime.
# Grid: .colWidths can be read at runtime.
# Grid: Cells added at runtime are formatted with cellstyle.
# Grid: fix alignment style bug on first column.
# Grid: styling moved from complexfunctions to nsbstyle.css.
# Help now has pointers to Wiki.
# [[HTMLView|HTMLView]]: Emitted code improved.
# HTMLView: fix warning from Safari.
# HTMLView: Percentage widths fixed.
# [[NSB.MsgBox]]: Appearance improved on RTL systems.
# NSB.MsgBox: formatting error with two buttons fixed.
# NSB.MsgBox: iOS 6 style MsgBoxes are gone.
# NSB.MsgBox: now handles former _msgbox_confirm function.
# [[NSB.ShowProgress]] is now modal.
# [[PayPal]]: Allows user specified image.
# PayPal: Only deploy image which is used, not all four.
# [[Toolbox]]: Now has a Find area on the bottom.
# Toolbox: Right click now opens Wiki page for all controls.

===Forms===
# New [[Modal Forms|modal]] property: can make form float modally over rest of app.
# New visual effects: fadeIn, fadeOut, slideUp, slideDown.
# New BackgroundColor property.
# New BorderColor property.
# New BorderWidth property.
# New parentForm property.
# New position property. Can be absolute, fixed, etc. Good for [[Responsive Design Made Simple|Responsive Design]].
# Background renamed backgroundImage.
# Borders can be specified.
# Controls copy and pasted to new forms are not repositioned.
# Form submit properties removed from Toolbox.
# Forms are now a <div> element, not <form>
# Forms can now have bounds in percentages (if fullScreen is false).

===Runtime===
# Comments between forms added to output code.
# Indenting of code improved.
# Main div renamed to NSBPage from Page_jqm.
# Needless blank lines removed.
# Output code cleaned up.
# Return value of function renamed returnValue (was savethefunction_rval)
# ReturnValue code not created if function does not return a value.
# CSS files moved to head for faster rendering.
# Generated code reformatted by JSBeautifier when possible.

===Deploy===
# Option to create Windows Executable (exe) added to Run menu.
# Nicely formatted screen listing your deployed apps.
# Native Build Status: Starts automatically after build and auto refreshes.
# Drag and Drop to Project Explorer fills manifest automatically.
# Cache: error message improved.
# Cache: Mime types set on local server - Some Windows systems set incorrectly.
# Cache: New global [[NSB.cacheStatus]] is available to your app.
# Cache: User now prompted before web app is updated.
# Cache: To turn off update prompt, do NSB.confirmCacheUpdate=""
# [[Menu Options|Check Deployment]]: Additional checking added.
# [[Build Native App|Native Build Status]]: Auto refresh every 3 seconds.
# Native Build Status: Links added for iOS 'Error' message.
# Native Build Status: Links added to Tech Note for app stores.
# Native Build Status: Refresh button deleted.
# Native Build Status: Opens automatically after app submitted to PhoneGap.
# nsbapp.com: User image in nsb caused problems uploading to nsbapp.com fixed.
# [[PhoneGap CLI|PhoneGap]]: CLI progress window can now be closed.
# PhoneGap: Config.xml no longer gets deployed (It's only for PhoneGap)
# PhoneGap: Default configxml updated.
# PhoneGap: New PhoneGap Camera sample.
# PhoneGap: Project Location build uses [[PhoneGap AuthToken|AuthToken]].
# PhoneGap: [[SplashScreens|Splashscreen]] is now automatically added to manifest.
# PhoneGap: splashscreen property now uses image picker.
# PHP: Umlauts (and other extended characters) are now OK in PHP files.
# [[Preferences]]: Static localhost port# added.
# [[Project Explorer]]: Entire folders can be dragged and dropped.
# Project Explorer: JSON files can be dragged and dropped for deploy.
# Project Explorer: SQLite databases can be dragged and dropped for deploy.
# Run: from local filesystem uses default browser.
# Run: Local deploy is to 127.0.0.1 instead of localhost to deal with poorly configured systems.
# Run: Local deploy pathnames can now have spaces.

===jQuery Mobile Framework===
# New: [[Collapsible]] control shows popup text.
# All: Toolbox files tweaked for proper display in IE11.
# All: jQuery Mobile 1.3 controls and samples have been removed.
# [[Button]], [[List]]: Text appearance improved.
# [[Button]]: Groups now have ID numbers.
# Icons now draw more sharply.
# [[Panel]]: icon now drawn correctly.
# [[Select]]: addItem can now accept multiple items
# [[TextArea]]: Added maxlength property.

===jqWidgets Framework===
# New: [[jqxDateTimeInput|DateTimeInput]] control.
# New: [[jqxDocking|Docking]] control.
# New: [[jqxEditor|Editor]] control.
# New: [[jqxMaskedInput|MaskedInput]] control.
# New: [[jqxNavigationBar|NavigationBar]] control.
# New: [[jqxPasswordInput|PasswordInput]] control.
# New: [[jqxValidator|Validator]] control.
# New: [[jqxWindow|Window]] control.
# New themes: Android, Web, Bootstrap, Metro and Office.
# All: controls now have hidden, disabled, theme and rtl properties.
# All: Design settings are available at runtime in the NSB.jqxSettings[id] array.
# All: Functions for jqx controls moved from complexfunctions.js to jqxFunctions.js.
# All: Remove jqxSettings_ variables from global namespace. Now in NSB.jqxSettings["controlName"]
# All: Toolbox files have been streamlined.
# [[jqxCheckBox|Checkbox]]: Icon updated.
# [[JqxMenu|Menu]]: wrong height on pulldown fixed.
# Samples: Numerous fixes to samples.

===iWebKit Framework===
# All iWebKit controls and samples have been removed.

=== Samples ===
# Samples can be searched for keywords.
# Samples are now organized into subdirectories.
# New [[Collapsible|Collapsable]] sample.
# New [[Modal Forms|Modal]] form sample.
# New PhoneGap Camera sample.
# New samples for all the new jqWidgets controls.
# All samples updated to use the new release.
# Desktop files for [[WebSockets]] samples moved to Wiki in zip format.
# Fix incorrect default splashscreen paths.
# Many updates and fixes.
# Update Ajax samples to use asynchronous calls.

=== Documentation ===
# TechNotes: New [[Responsive Design Made Simple]]

=== Internals ===
# Internals: PyV8 no longer used.
# Internals: wxWebkit is no longer used.
# Internals: wxPython updated to 3.0.0.
# Internals: node.js now now used for translation and syntax checking.
# Internals: PyInstaller is now used to create Mac installer instead of Py2App.
# Internals: Complexfunctions and hfunc cleaned up using jshint.
# Internals: Complexfunctions and hfunc reformatted.
# Internals: hfunc and functions files minified.
# Internals: exception handling improved.
# Internals: FastClick updated to 1.0.6

==Breaking Changes==
# Windows XP and Vista are no longer supported, due to IE 11's minimum requirements. Microsoft is no longer issuing security patches for XP. http://windows.microsoft.com/en-ca/windows/end-support-help
# Internet Explorer 11 is now a prerequisite on Windows systems.
# iWebKit and jQuery Mobile 1.3 are no longer supported. The reason for the removal is that the developers of these controls were no longer maintaining them. The guys at iWebKit seem to have moved on to other projects, while jQuery Mobile 1.3 was replaced by jQuery Mobile 1.4 in 2013.<br>The affected controls have direct replacements. AppStudio 4 has a tool to automatically update the controls. When you launch AppStudio 4, it askes you whether you want to update your controls. It then makes a backup of your project and converts them. You may need to do some fine tuning to get them to look exactly as you want.<br>The best way to do this is with AppStudio 4. AppStudio 5 does not have the ability to convert the controls. To go back to AppStudio 4 to do this, uninstall AppStudio 5 and install 4. Here's the download info:<br>Mac: <https://dl.dropbox.com/u/4451197/AppStudio4.dmg><br>Win: <https://dl.dropbox.com/u/4451197/AppStudio4.exe>
# Chrome Packaged Apps are no longer supported - replaced by full Windows exe apps.
# Form submit() removed from Toolbox. [[Ajax]] is a better way to do this.
# iOS 6 style [[NSB.MsgBox|MsgBoxes]] have been updated to current style.
# Style/End Style is no longer supported. Putting styling rules inline in code is messy and can cause performance problems. Copy the code inside your Style/End Style blocks and paste into the new styleheader Project property. It will then be put in the correct place at runtime.
# [[A Field Guide to App Studio Controls|jqWidgets]]: settings variable renamed from controlName_setting to NSB.jqxSettings["controlName"]
# NSBCurrentForm replaced by NSB.currentForm
# [[Generic]] has been deprecated: use [[Container]] instead.

EXE.pythonEval

2015-08-10T20:25:27Z

Admin: Admin moved page EXE.execPython to EXE.pythonEval without leaving a redirect: Error in docs

EXE.execPython(''code''[, ''callback''])

== Description ==

EXE.execPython executes code in the EXE runtime wrapper. It only works in EXE apps. AppStudio's EXE apps work by wrapping your app in a executable wrapper which is written in Python. This function requires you to know Python ti use it.

Code has to be properly formatted Python code, following all Python syntax rules. In addition to the base Python language, the following libraries can be used:
* os
* wx
* jason
* yaml

Other may be included in a future release.

Calls to EXE.execPython are processed asynchronously. To return values, put {callback}(value) in your code, and supply the name of the function you want called as ''callback''.

== Example (BASIC) ==

Do a simple calculation and return the result
<pre>
EXE.pythonEval("{callback}(4*4)", "showResult")

Function showResult(res)
MsgBox res
End Function
</pre>

== Example (JavaScript) ==

<pre>
EXE.pythonEval("{callback}(4*4)", "showResult");

function showResult(res) {
NSB.MsgBox(res);
}
</pre>

== Other examples ==

Exit the app
<pre>
EXE.pythonEval("sys.exit(0)")
</pre>

Put up a wx Message Box:
<pre>
EXE.pythonEval("wx.MessageBox('It works!', 'Info', wx.OK | wx.ICON_INFORMATION)", "MessageBox")
</pre>

Run a code snippet

Put the following code into a TextArea:
<pre>
# Code must be in Python.
# note how to return results.
a=64
{callback}(a*a)
</pre>

And execute it as follows:
<pre>EXE.pythonEval(TextArea1.value, "showResult")</pre>

== Output ==

== Related Items ==

[[Category:Language Reference]]

Version 5

2015-04-17T20:45:00Z

Admin: /* IDE - General */

Form

2015-04-07T11:47:23Z

Admin: /* Description */

== Description ==

Forms act as containers for controls. To go to a new form, use the [[ChangeForm]]() function.

To add a Form to your app, choose Add Form from the Project menu at the top of the screen. Forms can be deleted in the Project Explorer.

Scrolling forms are allowed, with a couple of notes. Footerbars won't work (since the bottom needs to scroll up), nor will scrolling controls (which confuse the scroller).

The information on a form can be submitted to a URL by using the [[Ajax]] function.

== Properties ==

Standard [[properties and methods|properties]] are supported, plus:

{| class="wikitable"
|-
| backgroundImage || Will override the background with a pattern or an image. <pre>linear-gradient(#55aaee, #003366);</pre>
or
<pre>
url(http://www.nsbasic.com/images/eiffel.gif);</pre>
If you are using jQuery Mobile, the best way to control the background color is to use themes. It will work better on PhoneGap Build.
|-
| fullscreen || True/False. If True, the form will automatically fill the entire device screen. The IDE will still use height and width at design time.
|-
| height || The height of the form in pixels. Default is 460.
|-
| left || The left position of the form. Use this for forms that are not full screen.
|-
| locked || If set to true, the controls on the Design Screen cannot be moved
|-
| language || The programming language used in the code for the form. Can be BASIC or JavaScript.
|-
| method || Get or Post. The method that the http form is sent by.
|-
| openMode || Should the form be open at startup? Use this for forms which are to remain open. There is no need to set this for the first form of the project: that is set in [[Properties Window|Project Properties]].
|-
| script || Opens the Code Window for the form.
|-
| scroll_options || iScroll options. See iScroll docs at http://iscrolljs.com.
|-
| scrolling || Allow scrolling?
|-
| script || Opens the Code Window for the form.
|-
| style || The CSS style for the form.
|-
| setFocusID || The control to get the focus when the form is shown.
|-
| Url || The URL to be called when the form is submitted using the submit() function.
|-
| width || The width of the form in pixels. Default is 320. Percents can be set at runtime.
|-
| reset() || Clear all fields on the form. Runtime only.
|-
| submit() || Submit the data on the form to the specified URL. Runtime only. See [[Location]] as well.
|}

== Events ==

Standard [[events]] are supported, plus:

{| class="wikitable"
|-
| onhide() || Called when form hidden as a result of [[ChangeForm]]()
|-
| onkeypress(event) || Called when a key is tapped on a form.
|-
| onshow() || Called by firstform and when form is shown as a result of [[ChangeForm]]()
|-
| onsubmit() || Called when a form is submitted.
|}

== Example (Basic) ==

Change color at runtime

<pre>
Form1.style.backgroundColor="red"
Form1.style.width="100%"
</pre>

To prevent the image from repeating to fill the full window:

<pre>
NSBPage.style.backgroundRepeat = "no-repeat"
</pre>

== Example (JavaScript) ==

<pre>
Form1.style.backgroundColor="red";
Form1.style.width="100%";
</pre>

To prevent the image from repeating to fill the full window:

<pre>
NSBPage.style.backgroundRepeat = "no-repeat";
</pre>

== Output ==

<pre>
(Url is called with values in the query string)
</pre>

== Related Items ==

[[changeform|ChangeForm]], [[geturlparameter|GetUrlParameter]], [[properties and methods|Properties]]

[[Category:Language Reference]]

Form

2015-04-07T11:46:08Z

Admin: /* Example (JavaScript) */

== Description ==

Forms act as containers for controls. To go to a new form, use the [[ChangeForm]]() function.

To add a Form to your app, choose Add Form from the Project menu at the top of the screen. Forms can be deleted in the Project Explorer.

Scrolling forms are allowed, with a couple of notes. Footerbars won't work (since the bottom needs to scroll up), nor will scrolling controls (which confuse the scroller).

The information on a form can be submitted to a URL by calling the form.submit() function. The values for all controls on the form which have their Name property defined will be appended to the URL as an HTML query string.

== Properties ==

Standard [[properties and methods|properties]] are supported, plus:

{| class="wikitable"
|-
| backgroundImage || Will override the background with a pattern or an image. <pre>linear-gradient(#55aaee, #003366);</pre>
or
<pre>
url(http://www.nsbasic.com/images/eiffel.gif);</pre>
If you are using jQuery Mobile, the best way to control the background color is to use themes. It will work better on PhoneGap Build.
|-
| fullscreen || True/False. If True, the form will automatically fill the entire device screen. The IDE will still use height and width at design time.
|-
| height || The height of the form in pixels. Default is 460.
|-
| left || The left position of the form. Use this for forms that are not full screen.
|-
| locked || If set to true, the controls on the Design Screen cannot be moved
|-
| language || The programming language used in the code for the form. Can be BASIC or JavaScript.
|-
| method || Get or Post. The method that the http form is sent by.
|-
| openMode || Should the form be open at startup? Use this for forms which are to remain open. There is no need to set this for the first form of the project: that is set in [[Properties Window|Project Properties]].
|-
| script || Opens the Code Window for the form.
|-
| scroll_options || iScroll options. See iScroll docs at http://iscrolljs.com.
|-
| scrolling || Allow scrolling?
|-
| script || Opens the Code Window for the form.
|-
| style || The CSS style for the form.
|-
| setFocusID || The control to get the focus when the form is shown.
|-
| Url || The URL to be called when the form is submitted using the submit() function.
|-
| width || The width of the form in pixels. Default is 320. Percents can be set at runtime.
|-
| reset() || Clear all fields on the form. Runtime only.
|-
| submit() || Submit the data on the form to the specified URL. Runtime only. See [[Location]] as well.
|}

== Events ==

Standard [[events]] are supported, plus:

{| class="wikitable"
|-
| onhide() || Called when form hidden as a result of [[ChangeForm]]()
|-
| onkeypress(event) || Called when a key is tapped on a form.
|-
| onshow() || Called by firstform and when form is shown as a result of [[ChangeForm]]()
|-
| onsubmit() || Called when a form is submitted.
|}

== Example (Basic) ==

Change color at runtime

<pre>
Form1.style.backgroundColor="red"
Form1.style.width="100%"
</pre>

To prevent the image from repeating to fill the full window:

<pre>
NSBPage.style.backgroundRepeat = "no-repeat"
</pre>

== Example (JavaScript) ==

<pre>
Form1.style.backgroundColor="red";
Form1.style.width="100%";
</pre>

To prevent the image from repeating to fill the full window:

<pre>
NSBPage.style.backgroundRepeat = "no-repeat";
</pre>

== Output ==

<pre>
(Url is called with values in the query string)
</pre>

== Related Items ==

[[changeform|ChangeForm]], [[geturlparameter|GetUrlParameter]], [[properties and methods|Properties]]

[[Category:Language Reference]]

Form

2015-04-07T11:45:31Z

Admin: /* Example (Basic) */

== Description ==

Forms act as containers for controls. To go to a new form, use the [[ChangeForm]]() function.

To add a Form to your app, choose Add Form from the Project menu at the top of the screen. Forms can be deleted in the Project Explorer.

Scrolling forms are allowed, with a couple of notes. Footerbars won't work (since the bottom needs to scroll up), nor will scrolling controls (which confuse the scroller).

The information on a form can be submitted to a URL by calling the form.submit() function. The values for all controls on the form which have their Name property defined will be appended to the URL as an HTML query string.

== Properties ==

Standard [[properties and methods|properties]] are supported, plus:

{| class="wikitable"
|-
| backgroundImage || Will override the background with a pattern or an image. <pre>linear-gradient(#55aaee, #003366);</pre>
or
<pre>
url(http://www.nsbasic.com/images/eiffel.gif);</pre>
If you are using jQuery Mobile, the best way to control the background color is to use themes. It will work better on PhoneGap Build.
|-
| fullscreen || True/False. If True, the form will automatically fill the entire device screen. The IDE will still use height and width at design time.
|-
| height || The height of the form in pixels. Default is 460.
|-
| left || The left position of the form. Use this for forms that are not full screen.
|-
| locked || If set to true, the controls on the Design Screen cannot be moved
|-
| language || The programming language used in the code for the form. Can be BASIC or JavaScript.
|-
| method || Get or Post. The method that the http form is sent by.
|-
| openMode || Should the form be open at startup? Use this for forms which are to remain open. There is no need to set this for the first form of the project: that is set in [[Properties Window|Project Properties]].
|-
| script || Opens the Code Window for the form.
|-
| scroll_options || iScroll options. See iScroll docs at http://iscrolljs.com.
|-
| scrolling || Allow scrolling?
|-
| script || Opens the Code Window for the form.
|-
| style || The CSS style for the form.
|-
| setFocusID || The control to get the focus when the form is shown.
|-
| Url || The URL to be called when the form is submitted using the submit() function.
|-
| width || The width of the form in pixels. Default is 320. Percents can be set at runtime.
|-
| reset() || Clear all fields on the form. Runtime only.
|-
| submit() || Submit the data on the form to the specified URL. Runtime only. See [[Location]] as well.
|}

== Events ==

Standard [[events]] are supported, plus:

{| class="wikitable"
|-
| onhide() || Called when form hidden as a result of [[ChangeForm]]()
|-
| onkeypress(event) || Called when a key is tapped on a form.
|-
| onshow() || Called by firstform and when form is shown as a result of [[ChangeForm]]()
|-
| onsubmit() || Called when a form is submitted.
|}

== Example (Basic) ==

Change color at runtime

<pre>
Form1.style.backgroundColor="red"
Form1.style.width="100%"
</pre>

To prevent the image from repeating to fill the full window:

<pre>
NSBPage.style.backgroundRepeat = "no-repeat"
</pre>

== Example (JavaScript) ==

<pre>
btnSendData.onclick = function() {
Form1.submit();
}
</pre>

To prevent a form from being submitted when the return key is entered in a field:
<pre>
Form1.onsubmit = function(e) {
e.cancelBubble=true;
e.returnValue=false;
}
</pre>

To change the background image on a form:
<pre>
Form1.style.backgroundImage="url(https://www.nsbasic.com/images/lavalamp.gif)"
</pre>

== Output ==

<pre>
(Url is called with values in the query string)
</pre>

== Related Items ==

[[changeform|ChangeForm]], [[geturlparameter|GetUrlParameter]], [[properties and methods|Properties]]

[[Category:Language Reference]]

Form

2015-04-07T11:44:09Z

Admin: /* Properties */

== Description ==

Forms act as containers for controls. To go to a new form, use the [[ChangeForm]]() function.

To add a Form to your app, choose Add Form from the Project menu at the top of the screen. Forms can be deleted in the Project Explorer.

Scrolling forms are allowed, with a couple of notes. Footerbars won't work (since the bottom needs to scroll up), nor will scrolling controls (which confuse the scroller).

The information on a form can be submitted to a URL by calling the form.submit() function. The values for all controls on the form which have their Name property defined will be appended to the URL as an HTML query string.

== Properties ==

Standard [[properties and methods|properties]] are supported, plus:

{| class="wikitable"
|-
| backgroundImage || Will override the background with a pattern or an image. <pre>linear-gradient(#55aaee, #003366);</pre>
or
<pre>
url(http://www.nsbasic.com/images/eiffel.gif);</pre>
If you are using jQuery Mobile, the best way to control the background color is to use themes. It will work better on PhoneGap Build.
|-
| fullscreen || True/False. If True, the form will automatically fill the entire device screen. The IDE will still use height and width at design time.
|-
| height || The height of the form in pixels. Default is 460.
|-
| left || The left position of the form. Use this for forms that are not full screen.
|-
| locked || If set to true, the controls on the Design Screen cannot be moved
|-
| language || The programming language used in the code for the form. Can be BASIC or JavaScript.
|-
| method || Get or Post. The method that the http form is sent by.
|-
| openMode || Should the form be open at startup? Use this for forms which are to remain open. There is no need to set this for the first form of the project: that is set in [[Properties Window|Project Properties]].
|-
| script || Opens the Code Window for the form.
|-
| scroll_options || iScroll options. See iScroll docs at http://iscrolljs.com.
|-
| scrolling || Allow scrolling?
|-
| script || Opens the Code Window for the form.
|-
| style || The CSS style for the form.
|-
| setFocusID || The control to get the focus when the form is shown.
|-
| Url || The URL to be called when the form is submitted using the submit() function.
|-
| width || The width of the form in pixels. Default is 320. Percents can be set at runtime.
|-
| reset() || Clear all fields on the form. Runtime only.
|-
| submit() || Submit the data on the form to the specified URL. Runtime only. See [[Location]] as well.
|}

== Events ==

Standard [[events]] are supported, plus:

{| class="wikitable"
|-
| onhide() || Called when form hidden as a result of [[ChangeForm]]()
|-
| onkeypress(event) || Called when a key is tapped on a form.
|-
| onshow() || Called by firstform and when form is shown as a result of [[ChangeForm]]()
|-
| onsubmit() || Called when a form is submitted.
|}

== Example (Basic) ==

<pre>
Function btnSendData_onclick()
Form1.submit()
End Function
</pre>

To prevent a form from being submitted when the return key is entered in a field:
<pre>
Function Form1_onsubmit(e)
e.cancelBubble=True
e.returnValue=False
End Function
</pre>

== Example (JavaScript) ==

<pre>
btnSendData.onclick = function() {
Form1.submit();
}
</pre>

To prevent a form from being submitted when the return key is entered in a field:
<pre>
Form1.onsubmit = function(e) {
e.cancelBubble=true;
e.returnValue=false;
}
</pre>

To change the background image on a form:
<pre>
Form1.style.backgroundImage="url(https://www.nsbasic.com/images/lavalamp.gif)"
</pre>

== Output ==

<pre>
(Url is called with values in the query string)
</pre>

== Related Items ==

[[changeform|ChangeForm]], [[geturlparameter|GetUrlParameter]], [[properties and methods|Properties]]

[[Category:Language Reference]]

Form

2015-04-07T11:42:28Z

Admin: /* Properties */

== Description ==

Forms act as containers for controls. To go to a new form, use the [[ChangeForm]]() function.

To add a Form to your app, choose Add Form from the Project menu at the top of the screen. Forms can be deleted in the Project Explorer.

Scrolling forms are allowed, with a couple of notes. Footerbars won't work (since the bottom needs to scroll up), nor will scrolling controls (which confuse the scroller).

The information on a form can be submitted to a URL by calling the form.submit() function. The values for all controls on the form which have their Name property defined will be appended to the URL as an HTML query string.

== Properties ==

Standard [[properties and methods|properties]] are supported, plus:

{| class="wikitable"
|-
| backgroundImage || Will override the background with a pattern or an image. <pre>linear-gradient(#55aaee, #003366);</pre>
or
<pre>
url(http://www.nsbasic.com/images/eiffel.gif);</pre>
At runtime, you need to force a redraw:
<pre>
Form1.style.background="red"
Form1.style.width="100%"
</pre>
To prevent the image from repeating to fill the full window, do this:
<pre>
NSBPage.style.backgroundRepeat = "no-repeat"
</pre>
If you are using jQuery Mobile, the best way to control the background color is to use themes. It will work better on PhoneGap Build.
|-
| fullscreen || True/False. If True, the form will automatically fill the entire device screen. The IDE will still use height and width at design time.
|-
| height || The height of the form in pixels. Default is 460.
|-
| left || The left position of the form. Use this for forms that are not full screen.
|-
| locked || If set to true, the controls on the Design Screen cannot be moved
|-
| language || The programming language used in the code for the form. Can be BASIC or JavaScript.
|-
| method || Get or Post. The method that the http form is sent by.
|-
| openMode || Should the form be open at startup? Use this for forms which are to remain open. There is no need to set this for the first form of the project: that is set in [[Properties Window|Project Properties]].
|-
| script || Opens the Code Window for the form.
|-
| scroll_options || iScroll options. See iScroll docs at http://iscrolljs.com.
|-
| scrolling || Allow scrolling?
|-
| script || Opens the Code Window for the form.
|-
| style || The CSS style for the form.
|-
| setFocusID || The control to get the focus when the form is shown.
|-
| Url || The URL to be called when the form is submitted using the submit() function.
|-
| width || The width of the form in pixels. Default is 320. Percents can be set at runtime.
|-
| reset() || Clear all fields on the form. Runtime only.
|-
| submit() || Submit the data on the form to the specified URL. Runtime only. See [[Location]] as well.
|}

== Events ==

Standard [[events]] are supported, plus:

{| class="wikitable"
|-
| onhide() || Called when form hidden as a result of [[ChangeForm]]()
|-
| onkeypress(event) || Called when a key is tapped on a form.
|-
| onshow() || Called by firstform and when form is shown as a result of [[ChangeForm]]()
|-
| onsubmit() || Called when a form is submitted.
|}

== Example (Basic) ==

<pre>
Function btnSendData_onclick()
Form1.submit()
End Function
</pre>

To prevent a form from being submitted when the return key is entered in a field:
<pre>
Function Form1_onsubmit(e)
e.cancelBubble=True
e.returnValue=False
End Function
</pre>

== Example (JavaScript) ==

<pre>
btnSendData.onclick = function() {
Form1.submit();
}
</pre>

To prevent a form from being submitted when the return key is entered in a field:
<pre>
Form1.onsubmit = function(e) {
e.cancelBubble=true;
e.returnValue=false;
}
</pre>

To change the background image on a form:
<pre>
Form1.style.backgroundImage="url(https://www.nsbasic.com/images/lavalamp.gif)"
</pre>

== Output ==

<pre>
(Url is called with values in the query string)
</pre>

== Related Items ==

[[changeform|ChangeForm]], [[geturlparameter|GetUrlParameter]], [[properties and methods|Properties]]

[[Category:Language Reference]]

Form

2015-04-07T11:41:15Z

Admin: /* Properties */

== Description ==

Forms act as containers for controls. To go to a new form, use the [[ChangeForm]]() function.

To add a Form to your app, choose Add Form from the Project menu at the top of the screen. Forms can be deleted in the Project Explorer.

Scrolling forms are allowed, with a couple of notes. Footerbars won't work (since the bottom needs to scroll up), nor will scrolling controls (which confuse the scroller).

The information on a form can be submitted to a URL by calling the form.submit() function. The values for all controls on the form which have their Name property defined will be appended to the URL as an HTML query string.

== Properties ==

Standard [[properties and methods|properties]] are supported, plus:

{| class="wikitable"
|-
| backgroundImage || Will override the background with a pattern or an image. <pre>linear-gradient(#55aaee, #003366);</pre>
or
<pre>
url(http://www.nsbasic.com/images/eiffel.gif);</pre>
At runtime, you need to force a redraw:
<pre>
Form1.style.background="red"
Form1.style.width="100%"
</pre>
To prevent the image from repeating to fill the full window, do this:
<pre>
Page_jqm.style.backgroundRepeat = "no-repeat"
</pre>
If you are using jQuery Mobile, the best way to control the background color is to use themes. It will work better on PhoneGap Build.
|-
| fullscreen || True/False. If True, the form will automatically fill the entire device screen. The IDE will still use height and width at design time.
|-
| height || The height of the form in pixels. Default is 460.
|-
| left || The left position of the form. Use this for forms that are not full screen.
|-
| locked || If set to true, the controls on the Design Screen cannot be moved
|-
| language || The programming language used in the code for the form. Can be BASIC or JavaScript.
|-
| method || Get or Post. The method that the http form is sent by.
|-
| openMode || Should the form be open at startup? Use this for forms which are to remain open. There is no need to set this for the first form of the project: that is set in [[Properties Window|Project Properties]].
|-
| script || Opens the Code Window for the form.
|-
| scroll_options || iScroll options. See iScroll docs at http://iscrolljs.com.
|-
| scrolling || Allow scrolling?
|-
| script || Opens the Code Window for the form.
|-
| style || The CSS style for the form.
|-
| setFocusID || The control to get the focus when the form is shown.
|-
| Url || The URL to be called when the form is submitted using the submit() function.
|-
| width || The width of the form in pixels. Default is 320. Percents can be set at runtime.
|-
| reset() || Clear all fields on the form. Runtime only.
|-
| submit() || Submit the data on the form to the specified URL. Runtime only. See [[Location]] as well.
|}

== Events ==

Standard [[events]] are supported, plus:

{| class="wikitable"
|-
| onhide() || Called when form hidden as a result of [[ChangeForm]]()
|-
| onkeypress(event) || Called when a key is tapped on a form.
|-
| onshow() || Called by firstform and when form is shown as a result of [[ChangeForm]]()
|-
| onsubmit() || Called when a form is submitted.
|}

== Example (Basic) ==

<pre>
Function btnSendData_onclick()
Form1.submit()
End Function
</pre>

To prevent a form from being submitted when the return key is entered in a field:
<pre>
Function Form1_onsubmit(e)
e.cancelBubble=True
e.returnValue=False
End Function
</pre>

== Example (JavaScript) ==

<pre>
btnSendData.onclick = function() {
Form1.submit();
}
</pre>

To prevent a form from being submitted when the return key is entered in a field:
<pre>
Form1.onsubmit = function(e) {
e.cancelBubble=true;
e.returnValue=false;
}
</pre>

To change the background image on a form:
<pre>
Form1.style.backgroundImage="url(https://www.nsbasic.com/images/lavalamp.gif)"
</pre>

== Output ==

<pre>
(Url is called with values in the query string)
</pre>

== Related Items ==

[[changeform|ChangeForm]], [[geturlparameter|GetUrlParameter]], [[properties and methods|Properties]]

[[Category:Language Reference]]

Responsive Design Made Simple

2015-04-07T11:40:43Z

Admin: /* Forms */

== Introduction ==

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). Responsive Web Design is a method of building websites that are highly functional on wide range of desktops & provide “app-like” experiences on smart phones, tablets and e-readers. Responsive design is a preferable alternative to bespoke mobile versions as modern mobile devices are not set to a standard resolution. Producing a specific site for several resolutions would be incredibly time consuming and near impossible to get right.

Traditionally, developers have laid out app with controls in fixed places. Tools like Visual Studio made this easy: drag and drop your control where you want them on the design screen and they are fixed in place.

Websites have the ability to resize and flow their elements to adjust to different screen sizes dynamically.

RWD combines the two approaches. Developers can still layout the controls on their apps, but make them responsive to the screen size so they automatically adjust and reflow. In AppStudio 5, we have added the ability to use this in your apps.

== A Simple Example ==

Let's start with an example. We'll set up a [[Container]] which holds some buttons:

Container on a narrow screen:
[[File:Rwd01.png||none|Container on a narrow screen]]

The same container on a wide screen:
[[File:Rwd02.png||none|Container on a wide screen]]

It's the same container. No code is involved: the controls move themselves into position based on the screen width. The height of the container is set to auto, so the border adjusts based on the height of its contents. You don't need to have a border.

''How does this work?''

One of the style attributes of any control is position. Before AppStudio 5, the only option for this was 'absolute'. It can now also be 'relative'. By default, all controls in a container have position set to 'relative'. Forms also have this option: if position is set to relative, the controls on the form will all have their position set to relative.

The rest of the positioning for the controls is set in the style property of the controls. To center all the controls in the container, we add this to the Container's style control:
<pre>
text-align:center; margin:auto;
</pre>

For each button, style is set to
<pre>
margin: 6px;
</pre>

This forces a 6 pixel margin around each control.

== A Detailed Example ==

=== Add a couple of controls ===

Let's start a new project with some labels and input fields. First, add a container, a label and a textbox.

[[File:Rwd03.png]]

* Select Container1 and right click on it. A list of possible children is displayed. Choose Label1.
* Do the same with TextBox1.
* Your Design Screen should now look like this:

[[File:Rwd04.png]]

* AppStudio makes some changes to the styling of Label1 and TextBox1 when it adds them to the container, so they will be well behaved responsive elements.
* The left and top properties are changed to 'initial', which lets them flow to where the browser sends them.
* The style property has the string "float:left;" added to it. This makes the controls float to the left as far as possible.
* Label1 floats to the left margin.
* TextBox1 floats to the left until it hits Label1.

=== Add some Classes ===

We plan to add a number of labels and textboxes beneath the first two. There are a number of style properties we need to set for each one. Let's make it easy on ourselves by using Classes.

A Class is a collection of style properties. By adding the name of the Class into an control's class property, the control will automatically get the style properties of the class. It's a big timesaver. It's also easier to make a single change to a class than to modify every control. Controls can have multiple classes.

* Open an editor window for 'styleheaders' in Project Properties. Enter the following:
<pre>
.myLabel {
width: 120px !important;
height: 30px !important;
margin: 6px !important;
line-height: 30px;
}

.myTextbox {
width: 120px !important;
margin: 6px !important;
}</pre>

The above is in CSS ([http://en.wikipedia.org/wiki/Cascading_Style_Sheets Cascading Style Sheets]) format. It's a very powerful tool. The above statements set style properties. You can see the complete list [http://www.w3schools.com/cssref/ here].

Each rule starts with an identifer, followed by a list of styles wrapped in curly braces. The identifier indicates which controls will be affected by the rule. There are many options for identifiers, but here are a few important ones:

{| class="wikitable"
|-
! Identitier !! Applies to
|-
| .myClass || Any control which has 'myclass' in its class property
|-
| #PictureBox1 || A control with the id of PictureBox1
|-
| button || Any element of type button.
|}

Elements assemble their style attributes from a number of places. If the control is based on jQuery Mobile, it may have several classes already defined. AppStudio also applies some, based on the control's properties and definition. By putting !important after one of the properties, we indicate that we want this one to override any values for the same property.

* In the class property of Label1, enter myLabel.
* In the class property of Label2, enter myTextBox.
* Now, repeat this a few more times, adding labels and textboxes.
* You should end up with this:

[[File:Rwd05.png]]

== Forms ==

So far, we have worked with Containers. The same techniques will work on [[Form|forms]]. Forms have a position property. If that is set to 'relative', all controls on that form will use relative positioning.

== Media Queries ==

[http://en.wikipedia.org/wiki/Media_queries Media Queries] are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.

Here's a simple example of how you would use a Media Query to adjust your app if it was running in Portrait or Landscape mode:
<pre>
@media (orientation=portrait) {
#PictureBox1 {width:300px; height: 200px}
}
@media (orientation=landscape) {
#PictureBox1 {width:600px; height: 400px}
}
</pre>
These rules draw the PictureBox1 in different sizes depending on the screen orientation.

Here are the attributes you can test in a media query:

{| class="wikitable"
|-
! attribute !! Result
|-
| min-width || Rules applied for any browser width over the value defined in the query.
|-
| max-width || Rules applied for any browser width below the value defined in the query.
|-
| min-height || Rules applied for any browser height over the value defined in the query.
|-
| max-height || Rules applied for any browser height below the value defined in the query.
|-
| orientation=portrait || Rules applied for any browser where the height is greater than or equal to the width.
|-
| orientation=landscape || Rules for any browser where the width is greater than the height.
|}

ServerStorage

2014-11-06T16:33:15Z

Admin: /* Output */

serverStorage(''string'' | ''variable'')

== Description ==

ServerStorage allows you to save string data on the server so it is available next time you run the program. An entry can be created by assigning to serverStorage.setItem(''variableName'', ''value''), where ''variableName'' is chosen by you. Data is retrieved a similar way.

By default, the data is saved into a namespace with the same name as the app's ID. It can be set to any string, even that of another app, making it possible for apps to share data.

ServerStorage is insecure: there is currently no protection against other apps reading or changing the data.

This feature is currently experimental. It only works on apps deployed to nsbapp.com. It will not work locally or on your server at this time. Since the data is on the nsbapp.com test server, do not assume that data you save will be permanently available.

== Properties and Methods ==

{| class="wikitable"
|-
| clear() || Clear all entries in the current namespace.
|-
| deleteItem(''key'') || Deletes item ''key''.
|-
| getItem(''key'') || Get the item which is saved under ''key''. String.
|-
| key(''n'') || Get the ''n''th item in the namespace.
|-
| length || The number of items in the current namespace.
|-
| namespace || The group used by all serverStorage methods. Defaults to app ID.
|-
| setItem(''key'', ''value'') || Sets item ''key'' to ''value''. Creates item if it does not exist.
|}

== Example - BASIC ==

<pre>
Sub Main()
NameSpace.text = serverStorage.namespace
End Sub

Function Button1_onclick()
t=SysInfo(10)
For i = 1 To 10
serverStorage.setItem("item" & i, i)
Next
MsgBox "Write 10 items into serverStorage(secs): " & (SysInfo(10)-t)/1000
End Function

Function Button2_onclick()
NSB.Print(False)
For i=0 To serverStorage.length-1
key = serverStorage.key(i)
Print key, serverStorage.getItem(key)
Next
End Function

Function Button3_onclick()
serverStorage.clear()
End Function
</pre>

== Example - JavaScript ==
<pre>
function Main() {
NameSpace.text = serverStorage.namespace;
}

Button1.onclick = function() {
t=SysInfo(10);
for (i = 1; i <= 10; i ++) {
serverStorage.setItem("item" + i, i);
}
alert("Write 10 items into serverStorage(secs): " + (SysInfo(10)-t)/1000);
}

Button2.onclick = function() {
NSB.Print(False);
for (i=0; i <= serverStorage.length-1; i++) {
key = serverStorage.key(i);
NSB.Print((key+ " " + serverStorage.getItem(key)) + "<br>");
}
}

Button3.onclick = function() {
serverStorage.clear();
}
</pre>

== Output ==

(see serverStorage sample)

== Related Items ==

[[localstorage|LocalStorage]], [[sessionstorage|SessionStorage]], [[sql|SQL]]

[[Category:Language Reference]]

[[Category:Miscellaneous]]

ServerStorage

2014-11-06T16:32:38Z

Admin: /* Example */

serverStorage(''string'' | ''variable'')

== Description ==

ServerStorage allows you to save string data on the server so it is available next time you run the program. An entry can be created by assigning to serverStorage.setItem(''variableName'', ''value''), where ''variableName'' is chosen by you. Data is retrieved a similar way.

By default, the data is saved into a namespace with the same name as the app's ID. It can be set to any string, even that of another app, making it possible for apps to share data.

ServerStorage is insecure: there is currently no protection against other apps reading or changing the data.

This feature is currently experimental. It only works on apps deployed to nsbapp.com. It will not work locally or on your server at this time. Since the data is on the nsbapp.com test server, do not assume that data you save will be permanently available.

== Properties and Methods ==

{| class="wikitable"
|-
| clear() || Clear all entries in the current namespace.
|-
| deleteItem(''key'') || Deletes item ''key''.
|-
| getItem(''key'') || Get the item which is saved under ''key''. String.
|-
| key(''n'') || Get the ''n''th item in the namespace.
|-
| length || The number of items in the current namespace.
|-
| namespace || The group used by all serverStorage methods. Defaults to app ID.
|-
| setItem(''key'', ''value'') || Sets item ''key'' to ''value''. Creates item if it does not exist.
|}

== Example - BASIC ==

<pre>
Sub Main()
NameSpace.text = serverStorage.namespace
End Sub

Function Button1_onclick()
t=SysInfo(10)
For i = 1 To 10
serverStorage.setItem("item" & i, i)
Next
MsgBox "Write 10 items into serverStorage(secs): " & (SysInfo(10)-t)/1000
End Function

Function Button2_onclick()
NSB.Print(False)
For i=0 To serverStorage.length-1
key = serverStorage.key(i)
Print key, serverStorage.getItem(key)
Next
End Function

Function Button3_onclick()
serverStorage.clear()
End Function
</pre>

== Example - JavaScript ==
<pre>
function Main() {
NameSpace.text = serverStorage.namespace;
}

Button1.onclick = function() {
t=SysInfo(10);
for (i = 1; i <= 10; i ++) {
serverStorage.setItem("item" + i, i);
}
alert("Write 10 items into serverStorage(secs): " + (SysInfo(10)-t)/1000);
}

Button2.onclick = function() {
NSB.Print(False);
for (i=0; i <= serverStorage.length-1; i++) {
key = serverStorage.key(i);
NSB.Print((key+ " " + serverStorage.getItem(key)) + "<br>");
}
}

Button3.onclick = function() {
serverStorage.clear();
}
</pre>

== Output ==

<pre>
This is Data.
</pre>

== Related Items ==

[[localstorage|LocalStorage]], [[sessionstorage|SessionStorage]], [[sql|SQL]]

[[Category:Language Reference]]

[[Category:Miscellaneous]]

ServerStorage

2014-11-06T16:30:32Z

Admin: /* Example */

serverStorage(''string'' | ''variable'')

== Description ==

ServerStorage allows you to save string data on the server so it is available next time you run the program. An entry can be created by assigning to serverStorage.setItem(''variableName'', ''value''), where ''variableName'' is chosen by you. Data is retrieved a similar way.

By default, the data is saved into a namespace with the same name as the app's ID. It can be set to any string, even that of another app, making it possible for apps to share data.

ServerStorage is insecure: there is currently no protection against other apps reading or changing the data.

This feature is currently experimental. It only works on apps deployed to nsbapp.com. It will not work locally or on your server at this time. Since the data is on the nsbapp.com test server, do not assume that data you save will be permanently available.

== Properties and Methods ==

{| class="wikitable"
|-
| clear() || Clear all entries in the current namespace.
|-
| deleteItem(''key'') || Deletes item ''key''.
|-
| getItem(''key'') || Get the item which is saved under ''key''. String.
|-
| key(''n'') || Get the ''n''th item in the namespace.
|-
| length || The number of items in the current namespace.
|-
| namespace || The group used by all serverStorage methods. Defaults to app ID.
|-
| setItem(''key'', ''value'') || Sets item ''key'' to ''value''. Creates item if it does not exist.
|}

== Example ==

<pre>
Sub Main()
NameSpace.text = serverStorage.namespace
End Sub

Function Button1_onclick()
t=SysInfo(10)
For i = 1 To 10
serverStorage.setItem("item" & i, i)
Next
MsgBox "Write 10 items into serverStorage(secs): " & (SysInfo(10)-t)/1000
End Function

Function Button2_onclick()
NSB.Print(False)
For i=0 To serverStorage.length-1
key = serverStorage.key(i)
Print key, serverStorage.getItem(key)
Next
End Function

Function Button3_onclick()
serverStorage.clear()
End Function
</pre>

== Output ==

<pre>
This is Data.
</pre>

== Related Items ==

[[localstorage|LocalStorage]], [[sessionstorage|SessionStorage]], [[sql|SQL]]

[[Category:Language Reference]]

[[Category:Miscellaneous]]

ServerStorage

2014-11-06T16:29:01Z

Admin: /* Description */

serverStorage(''string'' | ''variable'')

== Description ==

ServerStorage allows you to save string data on the server so it is available next time you run the program. An entry can be created by assigning to serverStorage.setItem(''variableName'', ''value''), where ''variableName'' is chosen by you. Data is retrieved a similar way.

By default, the data is saved into a namespace with the same name as the app's ID. It can be set to any string, even that of another app, making it possible for apps to share data.

ServerStorage is insecure: there is currently no protection against other apps reading or changing the data.

This feature is currently experimental. It only works on apps deployed to nsbapp.com. It will not work locally or on your server at this time. Since the data is on the nsbapp.com test server, do not assume that data you save will be permanently available.

== Properties and Methods ==

{| class="wikitable"
|-
| clear() || Clear all entries in the current namespace.
|-
| deleteItem(''key'') || Deletes item ''key''.
|-
| getItem(''key'') || Get the item which is saved under ''key''. String.
|-
| key(''n'') || Get the ''n''th item in the namespace.
|-
| length || The number of items in the current namespace.
|-
| namespace || The group used by all serverStorage methods. Defaults to app ID.
|-
| setItem(''key'', ''value'') || Sets item ''key'' to ''value''. Creates item if it does not exist.
|}

== Example ==

<pre>
Rem serverStorage Save Example
serverStorage.data = "This is Data."
(run and exit program)
Rem serverStorage Retrieve Example
Print serverStorage.data

Rem Test if Private Browsing is turned on
Try
serverStorage.private = "test"
Catch err
MsgBox "Please turn Private Browsing off"
End Try

Rem Some additional samples:
serverStorage.setItem("key", value) 'creates serverStorage.key with defined value
serverStorage["key"] = value 'alternative method for above
serverStorage.getItem("key") 'calls serverStorage.key...useful to check if it exists
serverStorage.removeItem("key") 'deletes serverStorage.key
delete serverStorage.key 'alternative method for above
delete serverStorage["key"] 'another alternative method for above
serverStorage.clear() 'nuclear deletion of all serverStorage variables in the domain. Use with care.
serverStorage[DBRecords.rows.item(0)["ModsType"]] = "alpha"
</pre>

== Output ==

<pre>
This is Data.
</pre>

== Related Items ==

[[localstorage|LocalStorage]], [[sessionstorage|SessionStorage]], [[sql|SQL]]

[[Category:Language Reference]]

[[Category:Miscellaneous]]

ServerStorage

2014-11-06T16:24:59Z

Admin: /* Properties and Methods */

serverStorage(''string'' | ''variable'')

== Description ==

serverStorage allows you to save string data on the server so it is available next time you run the program. An entry can be created by assigning to serverStorage.setItem(''variableName'', ''value''), where ''variableName'' is chosen by you. Data is retrieved the same way.

serverStorage is shared among all apps deployed from the same web server. This can be useful if you have a family of apps which need to share data.

This feature is currently experimental. It only works on apps deployed to nsbapp.com. It will not work locally or on your server at this time. Since the data is on the nsbapp.com test server, do not assume that data you save will be permanently available.

== Properties and Methods ==

{| class="wikitable"
|-
| clear() || Clear all entries in the current namespace.
|-
| deleteItem(''key'') || Deletes item ''key''.
|-
| getItem(''key'') || Get the item which is saved under ''key''. String.
|-
| key(''n'') || Get the ''n''th item in the namespace.
|-
| length || The number of items in the current namespace.
|-
| namespace || The group used by all serverStorage methods. Defaults to app ID.
|-
| setItem(''key'', ''value'') || Sets item ''key'' to ''value''. Creates item if it does not exist.
|}

== Example ==

<pre>
Rem serverStorage Save Example
serverStorage.data = "This is Data."
(run and exit program)
Rem serverStorage Retrieve Example
Print serverStorage.data

Rem Test if Private Browsing is turned on
Try
serverStorage.private = "test"
Catch err
MsgBox "Please turn Private Browsing off"
End Try

Rem Some additional samples:
serverStorage.setItem("key", value) 'creates serverStorage.key with defined value
serverStorage["key"] = value 'alternative method for above
serverStorage.getItem("key") 'calls serverStorage.key...useful to check if it exists
serverStorage.removeItem("key") 'deletes serverStorage.key
delete serverStorage.key 'alternative method for above
delete serverStorage["key"] 'another alternative method for above
serverStorage.clear() 'nuclear deletion of all serverStorage variables in the domain. Use with care.
serverStorage[DBRecords.rows.item(0)["ModsType"]] = "alpha"
</pre>

== Output ==

<pre>
This is Data.
</pre>

== Related Items ==

[[localstorage|LocalStorage]], [[sessionstorage|SessionStorage]], [[sql|SQL]]

[[Category:Language Reference]]

[[Category:Miscellaneous]]

ServerStorage

2014-11-06T16:19:26Z

Admin: /* Properties and Methods */

serverStorage(''string'' | ''variable'')

== Description ==

serverStorage allows you to save string data on the server so it is available next time you run the program. An entry can be created by assigning to serverStorage.setItem(''variableName'', ''value''), where ''variableName'' is chosen by you. Data is retrieved the same way.

serverStorage is shared among all apps deployed from the same web server. This can be useful if you have a family of apps which need to share data.

This feature is currently experimental. It only works on apps deployed to nsbapp.com. It will not work locally or on your server at this time. Since the data is on the nsbapp.com test server, do not assume that data you save will be permanently available.

== Properties and Methods ==

{| class="wikitable"
|-
| clear() || The name of the form to go to if this button is clicked.
|-
| getItem(key) || round or square. jQuery Mobile only.
|-
| key(n) || If you have a group of buttons, set this to Start Vertical, Start Horizontal, Start Vertical Mini or start Horizontal Mini. jQuery Mobile only.
|-
| length || If you have a group of buttons, set this to Yes on the last one. jQuery Mobile only.
|-
| namespace || Set to false for no icon. You have a choice of 18 standard icons otherwise. jQuery Mobile only.
|-
| setItem(key, value) || Position of the icon. Can be none, left, right, top, bottom or notext. jQuery Mobile only.
|}

== Example ==

<pre>
Rem serverStorage Save Example
serverStorage.data = "This is Data."
(run and exit program)
Rem serverStorage Retrieve Example
Print serverStorage.data

Rem Test if Private Browsing is turned on
Try
serverStorage.private = "test"
Catch err
MsgBox "Please turn Private Browsing off"
End Try

Rem Some additional samples:
serverStorage.setItem("key", value) 'creates serverStorage.key with defined value
serverStorage["key"] = value 'alternative method for above
serverStorage.getItem("key") 'calls serverStorage.key...useful to check if it exists
serverStorage.removeItem("key") 'deletes serverStorage.key
delete serverStorage.key 'alternative method for above
delete serverStorage["key"] 'another alternative method for above
serverStorage.clear() 'nuclear deletion of all serverStorage variables in the domain. Use with care.
serverStorage[DBRecords.rows.item(0)["ModsType"]] = "alpha"
</pre>

== Output ==

<pre>
This is Data.
</pre>

== Related Items ==

[[localstorage|LocalStorage]], [[sessionstorage|SessionStorage]], [[sql|SQL]]

[[Category:Language Reference]]

[[Category:Miscellaneous]]

ServerStorage

2014-11-06T16:18:53Z

Admin: /* Description */

serverStorage(''string'' | ''variable'')

== Description ==

serverStorage allows you to save string data on the server so it is available next time you run the program. An entry can be created by assigning to serverStorage.setItem(''variableName'', ''value''), where ''variableName'' is chosen by you. Data is retrieved the same way.

serverStorage is shared among all apps deployed from the same web server. This can be useful if you have a family of apps which need to share data.

This feature is currently experimental. It only works on apps deployed to nsbapp.com. It will not work locally or on your server at this time. Since the data is on the nsbapp.com test server, do not assume that data you save will be permanently available.

== Properties and Methods ==

{| class="wikitable"
|-
| clear() || The name of the form to go to if this button is clicked.
|-
| getItem(key) || round or square. jQuery Mobile only.
|-
| key(n) || If you have a group of buttons, set this to Start Vertical, Start Horizontal, Start Vertical Mini or start Horizontal Mini. jQuery Mobile only.
|-
| length || If you have a group of buttons, set this to Yes on the last one. jQuery Mobile only.
|-
| namespace || Set to false for no icon. You have a choice of 18 standard icons otherwise. jQuery Mobile only.
|-
| setItem(key, value) || Position of the icon. Can be none, left, right, top, bottom or notext. jQuery Mobile only.
||}

== Example ==

<pre>
Rem serverStorage Save Example
serverStorage.data = "This is Data."
(run and exit program)
Rem serverStorage Retrieve Example
Print serverStorage.data

Rem Test if Private Browsing is turned on
Try
serverStorage.private = "test"
Catch err
MsgBox "Please turn Private Browsing off"
End Try

Rem Some additional samples:
serverStorage.setItem("key", value) 'creates serverStorage.key with defined value
serverStorage["key"] = value 'alternative method for above
serverStorage.getItem("key") 'calls serverStorage.key...useful to check if it exists
serverStorage.removeItem("key") 'deletes serverStorage.key
delete serverStorage.key 'alternative method for above
delete serverStorage["key"] 'another alternative method for above
serverStorage.clear() 'nuclear deletion of all serverStorage variables in the domain. Use with care.
serverStorage[DBRecords.rows.item(0)["ModsType"]] = "alpha"
</pre>

== Output ==

<pre>
This is Data.
</pre>

== Related Items ==

[[localstorage|LocalStorage]], [[sessionstorage|SessionStorage]], [[sql|SQL]]

[[Category:Language Reference]]

[[Category:Miscellaneous]]

Format

2014-04-02T16:40:48Z

Admin:

Format(''string'', ''replace0''[,''replace1''...])

== Description ==

Replaces {n} placeholders with arguments. One or more arguments can be passed, in addition to the string itself, to insert into the string.
== Example (Basic) ==

<pre>
Print Format("1{0}2","a")
Print Format("My name is {0} and I live in {1}.", "Cartman", "South Park")
</pre>

== Example (JavaScript) ==
<pre>
NSB.Print(Format("1{0}2","a"));
NSB.Print(Format("My name is {0} and I live in {1}.", "Cartman", "South Park"));
</pre>

== Output ==
<pre>
1a2
My name is Cartman and I live in South Park.
</pre>

[[Category:Language Reference]]

[[Category:Strings]]

Format

2014-04-02T16:40:17Z

Admin:

Format(''string'', ''replace0''[,''replace1''...])

== Description ==

Replaces {n} placeholders with arguments. One or more arguments can be passed, in addition to the string template itself, to insert into the string.
== Example (Basic) ==

<pre>
Print Format("1{0}2","a")
Print Format("My name is {0} and I live in {1}.", "Cartman", "South Park")
</pre>

== Example (JavaScript) ==
<pre>
NSB.Print(Format("1{0}2","a"));
NSB.Print(Format("My name is {0} and I live in {1}.", "Cartman", "South Park"));
</pre>

== Output ==
<pre>
1a2
My name is Cartman and I live in South Park.
</pre>

[[Category:Language Reference]]

[[Category:Strings]]

Format

2014-04-02T16:39:59Z

Admin:

Format(''string'', ''replace0''[,''replace1''...])

== Description ==

Replaces {n} placeholders with arguments. One or more arguments can be passed, in addition to the string template itself, to insert into the string.
== Example (Basic) ==

<pre>
Print Format("1{0}2","a")
Print Format("My name is {0} and I live in {1}.", "Cartman", "South Park")
</pre>

== Example (JavaScript) ==
<pre>
Print(Format("1{0}2","a"));
Print(Format("My name is {0} and I live in {1}.", "Cartman", "South Park"));
</pre>

== Output ==
<pre>
1a2
My name is Cartman and I live in South Park.
</pre>

[[Category:Language Reference]]

[[Category:Strings]]

Format

2014-04-02T16:39:16Z

Admin:

Format(''string'', ''replace0''[,''replace1''...])

== Description ==

Replaces {n} placeholders with arguments. One or more arguments can be passed, in addition to the string template itself, to insert into the string.
== Example (Basic) ==

<pre>
Print Format("1{0}2","a")
Print Format("My name is {0} and I live in {1}.", "Kartman", "South Park")
</pre>

== Example (JavaScript) ==
<pre>
NSB.Print(FormatCurrency(-3.5, 2, 0, true));
NSB.Print(FormatCurrency(123456, 2, true, false, true));
</pre>

== Output ==
<pre>
1a2
My name is Kartman and I live in South Park.
</pre>

[[Category:Language Reference]]

[[Category:Strings]]

Version 4

2014-01-28T22:01:03Z

Admin: /* Version 4.0.0 alpha 2 */

Documentation for AppStudio 4 (Unreleased)

If you own a previous version of AppStudio, you need to buy the upgrade to use version 4. You can do this from within the app or from our [http://www.nsbasic.com/order.shtml order form.]

Until you have bought the upgrade, you can use AppStudio 4 in Demo mode. Once you buy, your copy will convert automatically to the full version.

== Version 4.0.0 alpha 3 ==

# Code Modules: More file types can be editing in the Code Window.
# Code Modules: Files keep their names when drag and dropped to Code Window.
# Code Window: User can now choose font, font size, reverse colors and indents.
# Controls: New jQM [[PopUp]] control with sample.
# Controls:Footerbar no longer needs refresh().
# Design Screen: Controls can now be resized using percentages.
# Design Screen: Fix problem with alignment lines too short sometimes.
# Dropbox: Support for [[Using_Dropbox_to_save_files|Dropbox files]].
# Dropbox: Support for [[Using_a_Dropbox_Datastore|Dropbox Datastores]].
# Forms: New locked property stops changes to form layout.
# Forms: New setFocusID sets input field with initial focus.
# IDE: New, more modern look and feel.
# IDE: Windows do not reverse screen on right to left languages.
# IDE: New RTL Project Property for right to left languages.
# IDE: iWebKit text and buttons convert to jQuery Mobile on load.
# Language: add [[Format]] string function.
# Language: add [[Push]] array function.
# Language: add [[Splice]] array function.
# Language: New [[GetJSON]] function: see StockQuote sample.
# Language: New [[WaitCursor]] statement.
# Libraries: Obsolete Sencha and Cordova libraries removed.
# Libraries: jquery.js is always included.
# Libraries: jQuery updated to Version 2.1.0.
# Libraries: messages.js merged into hfunc.js.
# Libraries: new Shake library adds onshake() event.
# Preferences: New panel for Code Window.
# Project Properties: New rtl property for languages like Arabic, Farsi and Hebrew.
# Samples: Many new and updated samples.
# Samples: iWebKit samples removed.

jQuery Mobile
# jQM 1.4 is now the officially supported version.
# jQM 1.3 is deprecated.
# All jQM samples have been converted to jQM 1.4.
# New option to convert jQM projects to JQM 1.4 on project load
# jQM 1.4 has a much more modern look and feel.
# RTL appearance for control now available.
# Just two built in themes now: white(a) and black(b).
# FontFamily, FontSize, FontStyle and FontWeight can now be set in the Properties Window.
# More controls now have a square corners option.
# More controls now have a mini option for a smaller version of the control.
# Where possible, controls now set their height automatically.
# Icons updated, with many new ones added.

iWebKit
# iWebKit has been deprecated.
# iWebKit sample folder has been removed.
# All references to iWebKit in other samples have been converted.
# iWebKit Buttons, Text, Textarea and TitleBar controls can be converted to jQM 1.4 controls on project load.

Version 4

2014-01-28T21:50:34Z

Admin: /* Version 4.0.0 alpha 2 */

Documentation for AppStudio 4 (Unreleased)

If you own a previous version of AppStudio, you need to buy the upgrade to use version 4. You can do this from within the app or from our [http://www.nsbasic.com/order.shtml order form.]

Until you have bought the upgrade, you can use AppStudio 4 in Demo mode. Once you buy, your copy will convert automatically to the full version.

== Version 4.0.0 alpha 2 ==

# Code Window: User can now choose font, font size, reverse colors and indents.
# Controls: New jQM [[PopUp]] control with sample.
# Controls:Footerbar no longer needs refresh().
# Design Screen: Controls can now be resized using percentages.
# Design Screen: Fix problem with alignment lines too short sometimes.
# Dropbox: Support for [[Using_Dropbox_to_save_files|Dropbox files]].
# Dropbox: Support for [[Using_a_Dropbox_Datastore|Dropbox Datastores]].
# Forms: New locked property stops changes to form layout.
# IDE: Windows do not reverse screen on right to left languages.
# IDE: New RTL Project Property for right to left languages.
# Language: add [[Push]] array function.
# Language: add [[Splice]] array function.
# Language: New [[GetJSON]] function: see StockQuote sample.
# Language: New [[WaitCursor]] statement
# Libraries: Obsolete Sencha and Cordova libraries removed.
# Libraries: jQuery updated to Version 2.0.3.
# Preferences: New panel for Code Window.
# Project Properties: New rtl property for languages like Arabic, Farsi and Hebrew.
# Samples: Many new and updated samples.

jQuery Mobile
# jQM 1.4 is now the officially supported version.
# jQM 1.3 is deprecated.
# All jQM samples have been converted to jQM 1.4.
# New option to convert jQM projects to JQM 1.4 on project load
# jQM 1.4 has a much more modern look and feel.
# RTL appearance for control now available.
# Just two built in themes now: white(a) and black(b).
# FontFamily, FontSize, FontStyle and FontWeight can now be set in the Properties Window.
# More controls now have a square corners option.
# More controls now have a mini option for a smaller version of the control.
# Where possible, controls now set their height automatically.
# Icons updated, with many new ones added.

iWebKit
# iWebKit has been deprecated.
# iWebKit sample folder has been removed.
# All references to iWebKit in other samples have been converted.
# iWebKit Buttons, Text, Textarea and TitleBar controls can be converted to jQM 1.4 controls on project load.

GetJSON

2014-01-28T21:49:35Z

Admin: Admin moved page GetJSONP to GetJSON

GetJSON(''url'',''data'',''callback'')

== Description ==

GetJSON loads JSON-encoded data from the server using a GET HTTP request.

''url'' is the location that data is being requested from.

''data'' is the information about the request. If multiple fields are being passed, include them in a single string, separated by ampersand (&) characters. It's best to do an [[EncodeURIComponent/decodeURIComponent|encodeURIComponent]]() to the data to make sure that spaces and other special characters are properly formatted.

''callback'' is the name of the function in your program to be called when the request is complete. Since the request may take a little while to complete, your app will continue execution immediately after the GetJSON() function is called. The results will not be available until the ''callback'' function is called. The returned data is passed to the ''callback'' function.

This function is a wrapper for the jQuery $.getJSON() function. It works identically.

== Example ==

<pre>
Function btnLoad_onclick()
Dim city = encodeURIComponent(txtCity.value)
GetJSON("http://api.openweathermap.org/data/2.5/weather","q=" & city, weatherData)
End Function

Sub weatherData(data)
MsgBox "Temperature is " & data.main.temp - 273.15
End Sub
</pre>

== Related Items ==

[[ajax|Ajax]]

[[Category:Language Reference]]

[[Category:Miscellaneous]]

Deploying

2014-01-07T06:24:45Z

Admin: 25 revisions

= Differences between AppStudio and AppStudioEDU =

* In these sessions, we have been using the full version of AppStudio.
* In the classroom, the students will be using AppStudioEDU.
* AppStudioEDU has the following restrictions:
# Cannot deploy to other than the Ministry's servers.
# Cannot compile apps with PhoneGap
# Cannot create Chrome Desktop Apps.
# Commercial apps cannot be produced.
* As part of this training, everyone here gets the full version.
* Students and and teachers will be able to buy the full version for half price.

= Servers =

* In these sessions, we have been using the nsbasic.com server.
* The students will be using the school's servers.
* These servers need to be able to process http requests to run apps.
* They also need to support ftp so apps can be uploaded to them.
* Files that end in .appcache need to be served with mime type text/manifest.
* To test this, use http://web-sniffer.net/.
* Servers can be Apache or Microsoft IIS.

<div class="page-break"></div>

= PHP =

* [http://en.wikipedia.org/wiki/Php PHP] is a server side programming language
* When a web app talks to a server, the program on the server is most often PHP.
* There is increasing interest in [http://en.wikipedia.org/wiki/Node.js JavaScript] as a replacement.
* Not all servers have PHP installed or enabled.

= Web Apps vs Hybrid Apps =

http://www.youtube.com/watch?v=fchbLzwtexk

* So far, we have been running as our apps as Web Apps.
* But it is also possible to turn them into native apps.
* Native apps have a built in web browser control.
* If create a native app with one of those browsers, it can run an AppStudio in that browser.
* It's a combination of native code + HTML = Hybrid App.

<div class="page-break"></div>
{| class="wikitable"
! width=20% |
! width=40% | Web App
! width=40% | PhoneGap App
|-
| Size of created apps (minimum)
| About 100K
| About 250K
|-
| Maximum size of app + data
| 25 megs (iOS)
| Limited by device itself; 40 megs for PhoneGap Build.
|-
| Can apps run offline?
| yes
| yes
|-
| Where are apps stored on device?
| In browser's sandbox.
| In regular file store.
|-
| Performance
| Excellent
| Slower for CPU bound operations.
|-
| Eligible for Store?
| No.
| iOS: Yes. Can go into App Store.<br>
Android. Yes. Can go into Marketplace.
|-
| Distribute without going through store?
| Yes.
| iOS: No.<br>
Android. Yes.
|-
| Percent you have to give up
| 0%
| iOS: 30%<br>
Android. 30% (MarketPlace)
|-
| Security of code
| OK: obfuscated
| OK: obfuscated
|-
| Additional Plugins
|
| Many - see the complete list [https://build.phonegap.com/plugins on PhoneGap's site].
|-
| How to deploy
| To the test server: hit F6.
To your own server: Set up username and password, then hit F6.
Then, on the device, enter the app's URL into the browser, then save to Home screen.
| [[Submitting to the iOS App Store|iOS]]: join Apple's developer program, get certificates (Mac required), enter certificates into PhoneGap Build, use Apple's upload tool to submit to App Store, wait for approval or rejection. Customer can then get app through App Store.
[[Submitting to the Google Play and Amazon Stores|Android]]: Download result file from PhoneGap Build and distribute
directly or through Google marketplace.
|-
| How to update a deployed app
| Deploy the app to the server. Next time the user starts the app, it will be automatically updated.
| iOS: Go through the whole submission process again. Once complete, app will show up as an update in the App Store.
Android: distribute directly or through Google marketplace.
|-
| How to delete a deployed app
| User can delete manually. If app is deleted from server, it will be automatically deleted from user's device.
| User can delete manually.
|-
| How to delete app's data
| User can delete manually in Settings. If app is deleted from server, it will be automatically deleted from user's device.
| Will be deleted with app.
|-
| Sharing data between apps
| Apps from the same server can share SQLite databases (subject to browser space limit)
| Apps are sandboxed and cannot interfere with each other's data.
|-
| Other software needed
| Nothing.
| iOS: iOS Application Installer<br>
Android: Nothing
|-
| Development OS
| Windows XP, Vista, 7 or 8
| iOS: OS X<br>
Android: Windows, OS X or Linux
|}

<div class="page-break"></div>
= PhoneGap Build =

* [https://build.phonegap.com/ PhoneGap Build] is a webservice provided by Adobe.
* It takes a web app and turns it into a hybrid app.
* PhoneGap Build can make native apps for iOS, Android and Windows Phone.
* It's free for a single project.

Try an app compiled with PhoneGap Build here:
https://dl.dropboxusercontent.com/u/4451197/hello.apk

== Additional Project Properties ==

{| class = "wikitable"
|-
| PhoneGap configxml || Configuration information for [https://build.phonegap.com/docs/config-xml PhoneGap Build]. Includes things like icons, splash screens, autorotation (orientation) and more.
|-
| phonegapBuildID || Build number returned by PhoneGap Build.
|-
| phoneGapLanguages || Languages supported if PhoneGap project.
|}

== Quick Demo ==

# Check PhoneGap configxml. Everything OK?
# Build Native App with PhoneGap
# Check PhoneGap status
# When complete, download the Android version (apk).
# Put it on a server
# Navigate to the URL using the device browser.
# Download the apk file.
# Look for it in the Downloads folder.
# Tap on it to install.
# Installing to iOS is much more complex!
# For full details, see the the TechNotes for [[Submitting to the Google Play and Amazon Stores|Android]] and [[Submitting to the iOS App Store|iOS]].

== PhoneGap PlugIns ==

* [https://build.phonegap.com/plugins Plugins] are native code modules which can be included in PhoneGap projects.
* They can be called from AppStudio programs.
* There are currently 20 PhoneGap developed plugins and 64 third party developed ones.
* Most popular are BarcodeScanner, File, PushPlugin and Facebook Connect.
* These provide functionality that could not be done in AppStudio alone.

<div class="page-break"></div>

= Chrome Packaged Apps =

== Features ==
* AppStudio can make distributable Windows desktop apps, by making them into [[Making Desktop Apps with App Studio|Chrome Packaged Apps]].
* Users need need to have Chrome installed on their systems.
* The apps can be sold or given away for free in the Chrome Web Store.
* Mac support just added.
* Packaged apps deliver an experience as capable as a native app, but as safe as a web page.
* Packaged apps look and behave like native apps.
* They have native-like capabilities that are much more powerful than those available to web apps.
* There are additional API functions available.

== Restrictions ==
# Do not use alert, confirm or prompt (JavaScript) or [[MsgBox]] (BASIC). Use NSB.MsgBox instead.
# Do not use [[eval]]().
# Do not use [[localStorage]] or [[Sql|SQLite]]. Use the [https://developer.chrome.com/apps/app_storage.html FileSystem API] or [http://www.html5rocks.com/en/tutorials/indexeddb/todo/ IndexedDB].
# Follow the rules in [http://developer.chrome.com/apps/contentSecurityPolicy.html Chrome's Content Security Policy].
# Check to see that you are not using any other [https://developer.chrome.com/apps/app_deprecated.html disabled web features].

== Quick Demo ==
# Get your app ready
# Check ChromeAppLaunch in Project Properties
# Check ChromeManifest in Project Properties
# Click on "Build Desktop App" in the Run menu
# Sign on to your Google Developer Account
# Upload your zip file
# Publish Changes
# Let it bake.
# Download the App
# Start App using Chrome App Launcher
# Start App using a shortcut
# Run the App

Lab Session: Screen size and rotation

2014-01-07T06:24:42Z

Admin: 6 revisions

In this lab, you'll make changes to ''frmSavedData'' to make it rotate and resize properly in order to gain experience with these technologies.

== Student Outline ==

# Open LabRotation.nsx.
# Remove the [[orientation]] control you added previously, since we'll be handling orientation changes for ourselves (at least for ''frmSavedData'').
# Add an onorientation event to ''frmSavedData'' and verify the device reacts to orientation changes.
# The layout of ''frmSavedData'' will look better as two columns when in landscape mode. Change the top and left values of the 3 lower data labels and values so they sit beside the top three when orientation is in landscape mode.
# On a larger screen (such as a tablet), you may want more spacing between the labels and values. The easiest way to do this is by setting the left value to a percentage. Try this in portrait mode first. Verify that the labels change positions when the screen size changes.
# You'll notice the percentages need to be changed when the orientation changes to landscape mode. Experiment to find the correct values and verify this form now is properly arranged for many screen sizes and orientations.

IOS and Android

2014-01-07T06:24:40Z

Admin: 7 revisions

= Quirks, Things to know =

* Mobile device develop much more rapidly than desktop systems.
* There is much more variation in the marketplace.
* Parts of this presentation will no longer be valid in 6 months.
* HTML5 standards are being gradually adopted.
* You cannot assume all devices have all features.
* To check if an OS has a particular feature, check http://www.caniuse.com

== iOS ==
* 75% of users are on iOS 7 (the latest) already
* Less than 5% are older than iOS 6.
* All devices made by Apple

== Android ==
* 45% of users are in Android 4.x
* More than 50% are in Android 2.x
* Android 2.x devices are still being manufactured
* Two versions of the brower: Android Browser and Chrome.
* Android browser is no longer being developed.
* Chrome browser is much more advanced.
* Chrome browser only runs on Android 4+
* Devices are made by hundreds of manufacturers
* Since Android is open source, there is no standard on how Android is configured.
* Some manufacturers (Amazon, Samsung) put their own software on top of Android.
* As a result, Android devices have more quirks than iOS.

<div class="page-break"></div>
= Dealing with different screen sizes =

* Making apps which look good on all the devices they run on is hard.

== Different screen sizes ==

* Physical screen sizes on phone devices run from 3.5 inches to more than 5
* The ratio of width to height is not always the same.
* For example, the iPhone 4 is 320x480, while the iPhone 5 is 320x568.
* Actually, since the iPhone 5 is a retina, it is 640x1136.
* Positions on retina devices are based on the 320x578.
* Text and images are drawn more precisely using the extra pixels.
* Use [[SysInfo]](2) and [[SysInfo]](3) to get the current width and height.
* It is usually correct.
* No method has been found yet that gets the correct width and height for all devices!

== Orientation ==

* If you want to run your app in both portrait and landscape, you have to program this yourself.
* Simply scaling the controls will not work in most cases.
* You may even want to rethink the design for usability.

== Tablets ==

* You cannot simply scale all the controls up in size.
* If you do, your app will look terrible.
* Consider using the extra space for more usability.
* For example, display two forms size by side.

Lab Session: Use a library

2014-01-07T06:24:39Z

Admin: 1 revision

In this lab session, you will add the jQuery library to your application and modify some code to use it.

== Student Outline ==

# Open LabLibrary.nsx
# Add the jQuery library to the project.
# Replace instances of <pre>label.textContent = "value"</pre> with <pre>$("#label").text("value")</pre> to verify jQuery is working.

JavaScript, HTML, CSS

2014-01-07T06:24:38Z

Admin: 33 revisions

= What's behind the scenes? =

* In this section, we will learn more about the internals of AppStudio.
* AppStudio is built on top of [http://en.wikipedia.org/wiki/Html5 HTML5], [http://en.wikipedia.org/wiki/Css css3] and [http://en.wikipedia.org/wiki/Javascript JavaScript].
* We deliberately left those parts accessible.
* Makes it easy to learn more about HTML5, CSS and JavaScript.
* Advanced users can build almost anything.

<div class="page-break"></div>
== Translator ==

[[File:Translator.png|600px]]
<br>
* When an AppStudio program is run, all BASIC code is converted to JavaScript.
* JavaScript is [https://www.nsbasic.com/speedtest.htm fast]!
* JavaScript on a iPhone 5S is almost twice as fast as VB.Net on a desktop!
* Latest iPhones are 100x faster than the original.
* Translation happens only to code modules which have changed.
* You can see your BASIC translated to JavaScript by right clicking in the [[Code Window]].

<div class="page-break"></div>

== Controls ==

* The forms and controls in your project generate css and HTML
* The css defines the controls.
* Controls are identified by their ids.
* The ids are declared in the DOM window object.
* While is why we can do TextBox1.value.
* For each control, a string of HTML is also created.
* These strings are put into an array.
* The array is joined together and put into the form's innerHTML.
* Just like what we were doing the HTMLview!
* Let's look at the css for a button:

<pre>
#Button1 {position:absolute; left:43px; right:auto; top:96px;
bottom:auto; height:29px; width:100px}
</pre>
* Here is the generated HTML and JavaScript for that same button:
<pre>
Form1.innerHTML=[ "<div id='Button1' data-role='button' data-inline=true
data-theme=c data-icon=false data-iconpos=none data-mini=true
data-corners='true' class=' ' style='margin:0px; overflow:visible;
font-size:12px; font-family:helvetica; font-style:normal; font-weight:bold;
color:; background-color:; '>Button</div>",
].join('');
</pre>

<div class="page-break"></div>
== Generated Index.html ==

* The translated code for the app and the css, HTML and Javascript for the controls are all written to a file called Index.html.

* Let's have a look at the file.
* First, there is the manifest.
* This file contains the list of files to be saved locally on the device.
* An app cannot run offline unless all files are listed here.
<pre>
<!DOCTYPE HTML>
<html manifest="OfflineApp.appcache">
</pre>

* The <head> section sets up general information about the app.
* Much of it comes from the information in Project Properties.
<pre>
<head>
<meta charset="utf-8">
<title>Project2</title>
<meta name="generator" content="NSB/AppStudio 3.3.0.0$mgvb" />
<meta name="date" content="2013-12-12 13:44:58.613000" />
<meta name="version" content="1.0.0" />
<meta name="viewport" content="width=device-width minimum-scale=1.0, maximum-scale=0.6667, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="YES" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="">
<meta name="copyright" content="Copyright 2013 ABC Company" />
<link rel="apple-touch-icon" href="nsb/images/LauncherIcon57.png" />
<link rel="apple-touch-startup-image" href="nsb/images/SplashScreen.png" />
<link rel="shortcut icon" sizes="196x196" href="nsb/images/196.png"/>
</pre>

* This is where the files the app uses get loaded.
* JavaScript files use a script tag.
* css files use a link tag.
* The list of files depends on the controls which are used.
<pre>
<script src="nsb/hfunc.js"></script>
<script src="nsb/messages.js"></script>
<link href="nsb/nsbstyle.css" rel="stylesheet">
<script src="nsb/fastclick.js"></script>
<script src="nsb/jquery.js"></script>
<script src="nsb/jquery.mobile.js"></script>
<link href="nsb/jquery.mobile.css" rel="stylesheet">
</pre>

* Next comes the css for the controls
* and we define the default font for the form, also a Project Property.
<pre>
<style type="text/css">
#Button1 {position:absolute; left:43px; right:auto; top:96px; bottom:auto; height:29px; width:100px}
body * {font-family:helvetica}
</style>
</head>
</pre>

* Now it's time the body of our app.
* [https://github.com/ftlabs/fastclick FastClick] is a library which makes touch events as fast as clicks.
<pre>
<body style="margin:0px;">
<script>window.addEventListener('load', function() {new FastClick(document.body)}, false)</script>
</pre>

* Now it's time to define our forms.
* This project only has one: Form1
<pre>
<div data-role="page" id="Page_Project2" data-theme="c" style="">
<form id="Form1" action="" method="GET" onsubmit="return false;" style="display:none; height:100%; position:absolute; top:0px; left:0px; width:100%; ">
<script>
Form1.innerHTML=[ "<div id='Button1' data-role='button' data-inline=true data-theme=c data-icon=false data-iconpos=none data-mini=true data-corners='true' class=' ' style='margin:0px; overflow:visible; font-size:12px; font-family:helvetica; font-style:normal; font-weight:bold; color:; background-color:; '>Button</div>",
].join('');
</script>
</form>
</div>
</pre>

* With all that set up, we can start on the code.
* General housekeeping comes first.
* Put all the ids into the DOM window:
<pre>
<script>
(function(){var all=document.getElementsByTagName('*');for(var i=0;i<all.length;i++)if(typeof all[i].id!='undefined'&&typeof window[all[i].id]=='undefined')window[all[i].id]=all[i];})()
</pre>

* Put up a message if the browser does not support AppStudio
<pre>
browserWarningMessage('Please use Google Chrome, Apple Safari or another supported browser.');
</pre>

* Use a different splashscreen if running on an iPad
<pre>
if (navigator.userAgent.indexOf('iPad') !== -1) {
var splashscreen = document.createElement('link');
splashscreen.rel = 'apple-touch-startup-image';
splashscreen.href = '';
document.getElementsByTagName('head')[0].appendChild(splashscreen);
}
</pre>

* Add some properties to the controls and form so they act more like VB
<pre>
window.addEventListener('load', function() {
Form1.style.display = 'block';
NSB.addDisableProperty(Button1);
NSB.addProperties(Button1);

Form1.style.display = 'none';
}, false);
Form1.onsubmit=function(event){window.event.stopPropagation();window.event.preventDefault()};
NSB.addProperties(Form1);
</pre>

* Here is our actual code, converted to JavaScript
<pre>
Button1.onclick = function() { savethefunction_rvar="";
_msgbox_confirm("Hello World!");
return savethefunction_rvar; }
</pre>

* When loading is done, show the first form and call Sub Main()
<pre>
window.addEventListener('load', function() {
Form1.style.display = 'block';
Main();
if (typeof(Form1.onshow)=='function') Form1.onshow();
}, false);

var NSBCurrentForm = Form1;
</pre>

* and the rest is HTML formatting.
<pre>
</script>
</body>
</html>
</pre>

* Note that the details of the above may change in future releases.

<div class="page-break"></div>
= JavaScript Libraries =

* AppStudio makes it easy to include JavaScript libraries.
* These are equally easy to use from BASIC or JavaScript.
* If something can be done in JavaScript, there probably is a library for it already.

== Ways to include ==

# Drag it into the [[Project Explorer]]. It will get loaded into your Index.html when your app is generated.
# Create a new Code Module. Set its language to JavaScript. Paste the code in.
# Create a <script> line in the extraheaders Project Property.
# Put it in the middle of your BASIC code. Using the JavaScript statement, you can mix JavaScript and BASIC in the same module.
<pre>
x = x + 1 'BASIC
JavaScript
if(x==3){alert('x=3!'); //JavaScript
End JavaScript
x = x + 1 'BASIC
</pre>

== Included Libraries ==
[[File:Toolboxlibraries.png]]
* A number of libraries are installed with AppStudio
* To use them, select Project Properties and Global code in the [[Project Explorer]]
* The ToolBox will then show the list of libraries.
* Include one by clicking on its checkbox.
* Sample for these are in the folder 8 of the Samples directory.

=== Add to Home Screen ===

* This library is iOS only. When your app is run in the browser, it prompts you to save to the Home Screen.

=== jQuery ===

* This library is the most widely used JavaScript library on the net.
* jQuery Mobile and jqWidgets both use it.
* Usually no need to select it, since it will already be included.

=== Retina Display Support ===
* Displays Hi Res versions of images where supported.
* Requires two sets of all images in your project.
* Hi Res set is named filename@2x.jpg.

=== Sencha Touch ===

* This is large, fairly well known framework.
* Not so much used with AppStudio any more.

=== Spinning Wheel ===

* Nice spin control for selecting dates, etc.

=== Stanford Crypto Library ===

* Allow strings to be strongly encrypted for transmission over the net.
* Here's how to use it:
<pre>
Function btnEncrypt_onclick()
txtEncrypted.value=sjcl.encrypt(txtPassword.value, txtPlain.value)
End Function

Function btnDecrypt_onclick()
txtPlain.value=sjcl.decrypt(txtPassword.value, txtEncrypted.value)
End Function
</pre>

=== xml2json ===

* Convert XML formatted data to a JSON structure.

== Other Libraries ==

* There are several repositories which list hundred or even thousands of JavaScript libraries
* http://www.javascriptsource.com
* http://javascriptlibraries.com
* http://www.jsdb.io
* Lots more!

Lab Session: Add Twitter feed to the app

2014-01-07T06:24:33Z

Admin: 7 revisions

In this lab session, you will add AppStudio's twitter feed to your app.

== Student Outline ==

# Open LabTwitter.nsx.
# Create a Twitter widget ID (or use AppStudio's: 408316144626302976).
# Use the two Twitter controls to add a feed to the ''frmAbout''. One follow and one widget.

Social Media

2014-01-07T06:24:32Z

Admin: 31 revisions

= Twitter =
[[File:twitter.png|framed|center]]

* This sample shows a couple of [https://dev.twitter.com/docs/tfw-javascript Twitter APIs]

* No code needs to be written: Twitter does all the work.

* The display to be generated is set by a Twitter Widget ID

* To create a Twitter widget, sign onto Twitter

* Go to https://twitter.com/settings/widgets

* In the above image, the top widget is a Follow widget

* Beneath that, is a Timeline widget.

* There are many, many options to explore on Twitter's site.

<div class="page-break"></div>
= Facebook =
[[File:facebook.png|framed|center]]

* The above image is a dump of the Facebook graph.
* The [https://developers.facebook.com/docs/reference/javascript/ complete FaceBook API] is rich and complex.
* Docs are at https://developers.facebook.com/docs/reference/javascript/
* To get a Facebook graph of a facebook account, first make the request:

<pre>
Function btnRetrieve_onclick()
$.getJSON("https://graph.facebook.com/" & txtId.value, "callback=?", gotResult)
End Function</pre>
* $getJSON is a wrapper for an Ajax call
* We put the name of the person we want in the URL
* We supply the name of the function to call on return ("gotResult").
* This is an asynchronous call: we can do other things while waiting for the result.

<div class="page-break"></div>
<pre>
Function gotResult(data)
txtData.value = ""
If data["error"] Then
txtData.value = data.error.message
Else
For Each item in data
txtData.value = txtData.value & Eval("item") & ": " & item & vbCRLF
Next
End If
End Function
</pre>
* The data returned will be a JSON object, stored in data.
* This code dumps the name and value of the fields in data.

<div class="page-break"></div>

= PayPal =
[[File:Paypal1.jpg]]
<br clear="all">

* The [[PayPal]] control allows you to collect money from PayPal for sales, subscriptions and donations.
* Much easier to set up and use than a credit card.
* First, set yourself up as a PayPal Merchant.
* Assuming you already have a PayPal account, go to the Merchant Services tab on the main screen.
* On the left, click on a tab called “Website Payments Standard”.
* Once you are set up as a merchant, you will need to set up your product.
* Use the Merchant Services page: Choose the “Buy Now button” option.
* Enter a number of fields, including item name, item ID (a reference number for your own use), price, currency (21 choices!), shipping and tax info.
* Once complete, click on ‘Create Button’.
* It will go to a new page, showing the code for the button.
* You’re interested in the string just after “value=”.
* Copy into hostedButtonID in the control’s properties.
* When the user taps on "Buy Now", PayPal takes over using the information you set up in hostedButtonID.

Lab Session: Multimedia

2014-01-07T06:24:28Z

Admin: 10 revisions

This is an independent lab in which you'll explore Audio, Video, and HTMLViews.

# Create a new project.
# Add appropriate forms and navigation so that you have a main form, along with forms for audio, video, and HTMLView experiments.
# For the audio and video forms, include some of your favorite audio or video files. If you don't have files available, feel free to use Super.wav and https://www.nsbasic.com/SpaceOddity.mp4
# For the HTMLView form, embed some content you enjoy, for instance a YouTube video, map, or pdf.

MultiMedia

2014-01-07T06:24:26Z

Admin: 38 revisions

= PictureBox: Drawing, text, images, sprites =

The [[PictureBox]] control is a powerful container for images, drawing and text.

* Based on the [http://en.wikipedia.org/wiki/Canvas_element HTML5 Canvas] element.

* Before you can output anything to a PictureBox, a context must be created:
<pre>
pb = PictureBox1.getContext("2d")
</pre>
* All drawing, images, etc. are done to the context.

* Declare the context variable globally if needed.

* There are really only 3 things you can do with a PictureBox: Everything else deals with the context:
{| class="wikitable"
|-
| getContext("2d") || Gets the drawing context. Returns the object that the PictureBox Context functions use. "2d" is currently the only valid argument.
|-
| refresh() || Redraws the entire PictureBox. Required after resizing the box or scrolling.
|-
| toDataURL(type) || Returns the current picturebox in a Base64 string image. If type is not specified, it is in PNG format. Type can also be "image/jpeg" or "image/gif".
|}

[[File:Picturebox.png|framed|center|320px]]

<div class="page-break"></div>
== Drawing ==

* Here are some of the drawing commands.
* More are listed in the [[PictureBox|full documentation]]
{| class="wikitable"
| arc(x, y, radius, startAngle, endAngle, counterclockwise) || Adds an arc to the current path using a radius and specified angles(in radians).
|-
| arcTo(x1, y1, x2, y2, radius) || Adds an arc of a circle to the current sub path by using a radius and tangent points.
|-
| beginPath() || Creates a new path in the canvas and sets the starting point to the coordinate (0,0).
|-
| bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) || Adds a cubic Bezier's curve to the current sub path using two control points.
|-
| clearRect(x, y, width, height) || Clears the specified rectangle region and makes it transparent.
|-
| closePath() || Closes an open path and attempts to draw a straight line from the current point to starting point of the path. The use of closePath() is optional.
|-
| fill() || Closes the current path and paints the area within it.
|-
| fillRect(x, y, width, height) || Draws a filled rectangle.
|-
| fillStyle || color|gradient|pattern
|-
| lineCap || Sets style of end caps for a line. "butt", "round" or "square".
|-
| lineJoin || Set style where two lines meet. "bevel", "round" or "mitre".
|-
| lineWidth || The current line width, in pixels.
|-
| lineTo(x, y) || Adds a line segment from the current point to the specified coordinate.
|-
| rect(x, y, width, height) || Adds a rectangle.
|-
| stroke() || Actually draws the path you have defined
|-
| strokeRect(x, y, width, height) || Draws a rectangular outline.
|-
| strokeStyle || color|gradient|pattern
|-
| strokeText(text, x, y, maxWidth) || Draws text (with no fill) on the canvas.
|}

* Here is an example of some drawing:
<pre>
'start by setting our colors.
pb.strokeStyle = vbBlack
pb.fillStyle = vbRed
'Now, we define the lines we want to draw in a path.
pb.beginPath()
pb.arc(150,150,50,0,Math.PI*2,True)
pb.closePath()
'Path is complete: draw it
pb.stroke()
'and paint the area inside the path
pb.fill()
</pre>

<div class="page-break"></div>
== Text ==
* Here are the text functions
{| class="wikitable"
|-
| fillText(text, x, y) || Writes text using current settings of font, textAlign and textBaseline.
|-
| font || The font to use for text. It is a string with three parts: "''style'' ''size'' ''fontname''". ''style'' can be normal, italic or bold. Example: "italic 40px Calibri"
|-
| measureText(text) || Returns a rectangle object with text's size.
|-
| strokeText(text, x, y, maxWidth) || Draws text (with no fill) on the canvas.
|-
| textAlign || Controls text alignment. Possible values are <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> and <code>center</code>.
|-
| textBaseline || Controls where the text is drawn relative to the starting point. Possible values are <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code> and <code>bottom</code>.
|-
| style(x, y, width, height) || Any valid style string.
|}
* Here is some sample code
<pre>
pb.textBaseline = "top"
pb.font="16px sans-serif"
pb.fillText("This is a picturebox",100,0)
</pre>

<div class="page-break"></div>
== Images ==
* Images are loaded asynchronously, since they may take time to load.
* A global image object needs to be created to load the image into.
* When load is complete, a function with the image object _onload is called.
* It can then be drawn on the PictureBox.
<pre>
myImage=new Image()
</pre>
* Here are the image functions:
{| class="wikitable"
|-
| createImageData(width, height) || Creates a new, blank ImageData object.
|-
| drawImage(image, x, y, width, height) || Draw an image.
|-
| getImageData(x,y,height,width) || Return the image data for a portion of the image. Includes width, height, data array [rgba].
|-
| globalCompositeOperation(source-over, source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, xor ) || Sets or returns how a source (new) images are drawn onto a destination (existing) image.
|-
| putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight) || Puts the image data (from a specified ImageData object) back onto the canvas.
|}
* Here is how the code looks:
<pre>
myImage=new Image()
Function Button3_onclick()
'Set the image. When it finishes loading, Image1_onload will be called.
myImage.src="mario.jpg"
End Function

Function myImage_onload()
pb.drawImage(myImage,0,0)
End Function
</pre>
* Do not set the image in global code - the PictureBox will not be ready.
* Doing so in Sub Main or a button is fine.

<div class="page-break"></div>
== Sprites ==
* PictureBoxes can be moved on the screen so they act as sprites
* Here we move the complete PictureBox and flip it upside down.
<pre>
PictureBox1.Left=PictureBox1.Left+5
PictureBox1.style.webkitTransform="rotate(180deg)"
</pre>
* Animate a sprite by using a SetTimeout function to be run every few milliseconds.
<pre>
SetTimeout("moveMario()",10)
</pre>

<div class="page-break"></div>

= Multimedia =

== Audio ==
[[File:Audiovideo.png|framed|center]]
The [[Audio]] control is used to play sounds.

* Sound files can be any common format, including mp3, ogg, uncompressed wav and aac.

Here are some options for it:
{| class="wikitable"
|-
| autoplay || Audio will start playing as soon as ready. Not supported on iOS.
|-
| controls || Controls will be displayed, such as a Play.
|-
| loop || Audio will start over again when finished.
|-
| preload || Audio should be loaded when the page loads. Ignored if autoplay is present.
|-
| src || The name of the file. For example, Super.wav. It can be in the project folder or on a website.
|}

<pre>
Function Button1_onclick()
Audio1.play()
End Function
</pre>

<div class="page-break"></div>
== [[Video]] ==

The Video control is used to play a video.

* The video has to be in a specific format. Generally, H.264+AAC+MP4 will work.

{| class = "wikitable"
|-
| autoplay || Video will start playing as soon as ready.
|-
| controls || Controls will be displayed, such as a Play.
|-
| loop || Video will start over again when finished.
|-
| preload || Video should be loaded when the page loads. Ignored if autoplay is present.
|-
| src || The name of the file. For example, http://www.nsbasic.com/videotest.mp4. It should be in the project folder or on a web site.
|}

<pre>
Function Button2_onclick()
Video1.play()
End Function
</pre>

<div class="page-break"></div>
= HTMLView =

The HTMLView control is a general purpose control which can be used as a container for various kinds of data.

* Based on the HTML <div> element

* It can display any kind of HTML

* Anything that is valid HTML and assigned to innerHTML will display.

* If the image is too large for the display area, it can be scrolled.

== HTML ==
[[File:Htmlview1.png|framed|center]]
* Pure HTML can be displayed by assigning to innerHTML
<pre>
HTMLview1.innerHTML="This is an <b>HTMLview</b> with scrolling.</b><br>" & _
"<img src=mario.jpg width=100 height=200><br>" & _
"<img src=mario.jpg width=100 height=200>"
'reset the scroll area
HTMLview1.refresh()
</pre>
* The refresh() call is needed after adding data to reset the scrolling parameters.
* Information can be appende to the existing data in the view:
<pre>
HTMLview1.innerHTML=HTMLview1.innerHTML & "<br>Length is " & Len(HTMLview1.innerHTML)
HTMLview1.refresh()
</pre>

<div class="page-break"></div>
== Show a Map ==
[[File:Htmlview2.png|framed|center]]
* Static data returned from a website can be displayed

* In this example, we are getting an image from [http://en.wikipedia.org/wiki/Google_maps Google Maps].
<pre>
longitude = 48.8582
latitude = 2.2945
zoomsize=18 'specify zoom (0-21; bigger is closer)

' fill HTMLview box with GoogleMap with specified center and zoom level
HTMLview1.innerHTML="<img height=640 width=640 " _
"src=http://maps.google.com/maps/api/staticmap?" _
& "center=" latitude & "," & longitude & "&zoom="&zoomsize _
& "&size=640x640&maptype=hybrid&sensor=false></img>"
</pre>
* It's the Eiffel Tower in Paris!

<div class="page-break"></div>
== Show HTML file ==
[[File:Htmlview3.png|framed|center]]
* We can also display an HTML file.

* However, it has to be from the same server.

* Otherwise, there will be a [http://en.wikipedia.org/wiki/Same-origin_policy Cross Origin request] error.

<pre>
htm=ReadFile("year.htm")
If htm.status = 200 Then
HTMLview1.innerHTML=htm.responseText
HTMLview1.refresh()
Else
MsgBox "Could not read file. Are you running from a deployed app? It will not work locally."
End If
</pre>
* ReadFile is a simplified version of AJAX.
* It reads the entire contents of the file.

<div class="page-break"></div>
== Show PDF file ==
[[File:Htmlview4.png|framed|center]]

* pdf files can be included with the app
<pre>
HTMLview1.innerHTML="<iframe src='year.pdf' width=310 height=260 ></iframe>"
HTMLview1.refresh()
</pre>
* scrolling is automatically enabled
* The refresh() resets the scrolling area.

<div class="page-break"></div>
== Show YouTube video ==
[[File:Htmlview5.png|framed|center]]

* Embedded YouTube videos can be shown
* Get the YouTube video ID from YouTube
* Substitute it in the innerHTML string below
<pre>
HTMLview1.innerHTML="<iframe frameborder='0' allowfullscreen " _
& "src='http://www.youtube.com/embed/eDF7QRC3c3Y?feature=player_detailpage'>" _
& "</iframe>'"
HTMLview1.refresh()
</pre>
* More info on integrating YouTube with your apps here: https://developers.google.com/youtube/

Lab Session: Saving data into SQLite

2014-01-07T06:24:20Z

Admin: 4 revisions

In this lab you will modify your app so you can save historical weather data in SQLite.

== Student Outline ==

# Open LabSqlite.nsx
# Update your initialization code in ''Sub Main'' to create a table in the database, if it doesn't exist already.
# Update your ''btnSave'' click event to INSERT records into the table you created in the first step.
# Update your onshow event for ''frmSaves'' so it SELECTs the entries in an array that's used to populate the list.
# Modify your click event for ''lstSaves'' to use the array you populated in the previous step.

Lab Session: Saving data to localStorage

2014-01-07T06:24:19Z

Admin: 5 revisions

In this lab you will modify your app so you can save historical weather data in localStorage.

== Student Outline ==

# Open LabLocalStorage.nsx.
# Modify ''Sub Main'' to check ''localStorage'' for an element called ''weatherSaves''. If it does not exist, initialize it to an empty array. Remove the ''lstSaves'' initialization code.
# Modify the click code for ''btnSave'' so that it adds a new entry to the ''weatherSaves'' array of ''localStorage''. The entry should be an object containing all the weather data including the current date.
# Add an onshow event for ''frmSaves'' that initializes ''lstSaves'' with the entries from the ''weatherSaves'' array.
# Add a click event to ''lstSaves'' that retrieves the proper entry from ''weatherSaves'' when clicked, sets the proper values in ''frmSavedData'', and displays it.

Lab Session: Play with Features

2014-01-07T06:24:17Z

Admin: 8 revisions

In this lab, you will add a compass to your application, allow it to pull weather data by your location, and have it choose a random location on shake.

== Student Outline ==

The following lab contains three parts. Start by opening LabFeatures2.nsx.

=== Compass ===

Using the resources and code from the Compass sample, add a compass to ''frmCompass'' in your app.

=== Geolocation ===

# Attach an onchange event to ''flpCurrentLocation''. When it is switched to On, you should retrieve the current location using [[https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.getCurrentPosition navigator.geolocation.getCurrentPosition]] and disable ''txtCity'' and ''btnLoad''. When switched to off, ''txtCity'' and ''btnLoad'' should be re-enabled.
# When the current location has been retrieved, enable ''btnLoad''.
# When ''btnLoad'' is pressed and ''flpCurrentLocation'' is in the On position, load the weather information via latitude and longitude, using the following API: http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139

=== Accelerometer ===

# A shaking motion can be sensed by setting a threshold for change in [[Event|accelerationIncludingGravity]]. Experiment to determine what an acceptable threshold is for your device. (an example of this in JavaScript is available here: http://stackoverflow.com/a/4475330)
# When on ''frmMain'', listen for accelerometer events that could indicate a shaking motion. Set the location to a random latitude and longitude to load weather for that location.

== Bonus ==

* Modify the compass so it points somewhere other than north.
* As you saw in the lecture, it's possible to update the current location continuously. Modify your code to function this way, rather than only retrieving the location once.
* When retrieving a random location, it might be helpful to display what cities you are near, or what the latitude and longitude is. Modify your app to provide this functionality.
* The accelerometer is capable of detecting many movements beyond shakes. Now that you've modified your app to display the random location you've retrieved, modify it so that after a random location is retrieved tilting the phone will modify that location, increasing or decreasing the latitude or longitude.

Mobile Device Features 2

2014-01-07T06:24:15Z

Admin: 21 revisions

= Compass =

[[File:Compass.png|framed|right]]

* Certain devices have a built in compass sensor.

* If they do, they call the ondeviceorientation() function when the compass reading changes.

* An event object is passed to the function with the compass reading in evt.webkitCompassHeading.
<br clear="all">

<pre>
function window_ondeviceorientation(evt)
TextBox1.value=evt.webkitCompassHeading
End function
</pre>

* The Compass sample uses this information to rotate an image of a compass.

* The webKitTransform function rotates an image efficiently.
<pre>
pos="0"

function window_ondeviceorientation(e)
imgCompass.style.webkitTransform="rotate(" & pos & "deg)"
pos = e.webkitCompassHeading
imgCompass.style.webkitTransform="rotate(-" & pos & "deg)"
End function
</pre>

<div class="page-break"></div>

= Geolocation =

[[File:Geolocation.jpg|framed|left]]

* Geolocation uses GPS sensors to return the current location of the device.

* The watchPosition() function sets the frequency of the Geolocation events.

* When a Geolocation event is triggered, the function named in the watchPosition function is called.

* The following data is passed to the event:
<br clear="all">

{| class="wikitable"
|-
|location.coords.longitude || The current longitude of the device. GPS required.
|-
|location.coords.latitude || The current latitude of the device. GPS required.
|-
|location.coords.altitude|| The height of the location. GPS required.
|-
|location.coords.accuracy || The accuracy of the location. GPS required.
|-
|location.coords.altitudeAccuracy || The accuracy of the altitude. GPS required.
|-
|location.coords.heading|| Degrees clockwise from North. GPS required.
|-
|location.coords.speed|| Speed, meter per second. GPS required.
|-
|location.coords.timestamp || time and date of the observation. GPS required.
|}

* Here's the code to start generating geolocation events:
<pre>
Dim gps
function btnStart_onclick()
options={timeout: 5000, maximumAge: 5000, enableHighAccuracy: True}
gps=navigator.geolocation.watchPosition(onGeolocation, errorCallBack, options)
End function
</pre>
* This code will call onGeolocation every 5 seconds.
* If GPS data cannot be obtained, the errorCallBack function is called.
* Cancel it by executing:
<pre>
navigator.geolocation.clearWatch(gps)
</pre>
* Here's what the onGeolocation looks like. It gets called every 5 seconds.
<pre>
function onGeolocation(location)
Dim s
s = "Longitude: " + location.coords.longitude & vbCRLF
s = s & "Latitude: " + location.coords.latitude & vbCRLF
s = s & "Speed: " + location.coords.speed & " "
s = s & "Altitude: " + location.coords.altitude & vbCRLF
s = s & "Accuracy: " + location.coords.accuracy & " "
s = s & "Accuracy(altitude): " + location.coords.altitudeAccuracy & " " & vbCRLF
'Convert timestamp if needed.
if IsNumeric(location.timestamp) Then
gpsDate=new Date(location.timestamp)
else
gpsDate=location.timestamp
End if
TextArea1.value = s & "Timestamp: " + gpsDate
ShowMap(location.coords.latitude, location.coords.longitude)
End function
</pre>
* This function displays the GPS results in a TextArea.
* The code has to deal with the problem of different browsers returning timestamp in different formats.
* The ShowMap() function near the end displays a map from Google Maps.
<pre>
function ShowMap(latitude, longitude)
if SysInfo(10)-lastRefresh<10000 Then Exit function
lastRefresh=SysInfo(10)
s = "'https://maps.google.com/maps/api/staticmap?center=" & _
latitude & "," & longitude & _
"&zoom=14&size=300x200&maptype=roadmap&sensor=true&output=embed'"
Map.innerHTML="<img width=300 height=200 src=" & s & "></img>"
End function
</pre>
* This function displays a Google map.
* The map is updated every 10 seconds
* More info on Google maps here: http://code.google.com/apis/maps/documentation/staticmaps/
* We pack the latitude and longitude into a URL query string.
* We display the results of the URL in an HTMLview.

<div class="page-break"></div>

= Accelerometer =

[[File:Accelerometer.jpg|framed|left]]

The Accelerometer is a sensor that returns information about the device's movement.

* Results are returned in meters per second squared.
* Results can be with or without taking gravity into effect.
* Whenever motion is detected, the window_ondevicemotion function is called.
<br clear="all">

<pre>
Sub window_ondevicemotion(event)
ax = event.accelerationIncludingGravity.x;
ay = event.accelerationIncludingGravity.y;
End Sub
</pre>
* This code sets a couple of global variables: acceleration in the x direction (horizontal) and the y direction (vertical)
* We can use this data to move a ball around on the screen.
* We will sample the the movement 100 times per second.
* Based on how high the movement rate is, move the ball varying distances.

<div class="page-break"></div>
<pre>
delay = 10
SetInterval(moveBall, delay)
</pre>
* SetInterval is an AppStudio function which calls a function repeatedly.
* moveBall is the name of the function to call.
* delay is the time, in milliseconds.
<pre>
Sub moveBall()
vy = vy + -(ay)
vx = vx + ax

y = parseInt(y + vy * vMultiplier)
x = parseInt(x + vx * vMultiplier)

'do bounds checking
If x<0 Then
x = 0
vx = 0
End if
If y<0 Then
y = 0
vy = 0
End if
If x>document.documentElement.clientWidth-20 Then
x = document.documentElement.clientWidth-20
vx = 0
End if
If y>document.documentElement.clientHeight-20 Then
y = document.documentElement.clientHeight-20
vy = 0
End if

ball.style.top = y + "px"
ball.style.left = x + "px"
End Sub
</pre>
* The first 4 statements calculate the new position.
* The next section checks to make sure the ball does not roll off the screen.
* The last two statements do the actual movement.

The complete sample is called Accelerometer.

Lab Session: Device features

2014-01-07T06:24:12Z

Admin: 7 revisions

In this lab session, you will add features to your app that allow you to take a picture, record your feelings on the weather with emoji, and respond to device rotation.

== Student Outline ==

# Open LabFeatures.nsx
# Add the [[Orientation]] control
# Put your application in portrait mode and verify that it displays an error when rotated to landscape.
# Add code to ''frmPhoto'' that allows the user to take a photo and display it. You'll have to add the appropriate [[TextBox]] and [[PictureBox]].
# Replace the default values of ''selEmoji'' with a few Emoji characters so the user can select how they feel about the photo. Emoticons work best.
# Modify the click event for ''btnLoad'' on ''frmMain'' so the TextBox, PictureBox and ''selEmoji'' are reset on click.

== Bonus ==

* In later labs, we'll be recording current weather data. Modify the form you just created to make it clear it's for recording your impressions of the weather data. Add a [[TextArea]] so users can record textual thoughts as well. Make sure it's cleared when the weather is retrieved.
* A [[Select]] control is only good for a few items. Create a new form that's specifically for choosing between 20-30 Emoji characters and replace the Select with it.
* Add an upload button, and allow the photo to be uploaded to a server. Refer to the upload sample for details.

Mobile Device Features 1

2014-01-07T06:24:10Z

Admin: 20 revisions

In the next two segments, we will talk about some features that are unique to mobile devices and how to use them.

= Camera =
[[File:Cameraimage.jpg]]
* Being able to access the camera directly is a recent feature
* It may not be supported on older devices
* iOS has a serious bug - there is a workaround
* Done using a [[TextBox]], with inputType set to 'file'.
* Once the user has taken or selected a picture, TxtBox_onchange is executed:
<pre>
function txtGetPicture_onchange()
reader.readAsDataURL(txtGetPicture.files[0])
e=event
End function
</pre>
* Reading the picture in is asynchronous: pictures can be large and take time to load.
* Once the read is complete, reader_onload is called:
<pre>
function reader_onload(e)
img.src=e.target.result
End Function
</pre>
* To display the picture, we need to put it into a PictureBox object.
* Since this also can take some time, it is done asynchronously
* Once the loading is complete, img_onload is called.
<pre>
function img_onload()
drawImageIOSFix(pb,img,0,0,img.width,img.height, _
0,0,PictureBox1.width,PictureBox1.height)
End function
</pre>
* Normally, we would use the [[PictureBox|pb.drawImage]] function
* But there is a bug in iOS. The drawImageIOSFix function does it properly.

<div class="page-break"></div>

= Emoji =

[[File:Emoji.png]]

* Emoji are extended characters that are built into mobile devices.
* There are hundreds of them: arrows, letters, roman numerals, pictures of food, building, transportation, flags, animals. And of course, happy faces, sad faces, crying faces.
* They are saved as standard characters: each has its own character code number.
* There is a complete list here: http://en.wikipedia.org/wiki/Emoji
* Support varies by browser
* Most mobile devices are OK
* Desktop Safari works
* Desktop Chrome needs an (but an [https://chrome.google.com/webstore/detail/chromoji-emoji-for-google/cahedbegdkagmcjfolhdlechbkeaieki extension] to see these)
* The characters are in the format &#xxxxxx; where xxxxxx is the decimal value
* Cheeseburger is &#127828; (or &#x1F354 in hex)

<div class="page-break"></div>

= Orientation =

Mobile devices can be rotated. It's up to you to decide how you want your app to handle this.

* The two orientations are referred to as Portrait and Landscape.

* The layout of your form will be completely different between the two.

* If you don't want to support rotation, add the [[Orientation]] control to your app. Set its screenOrientation property to portrait or landscape. When the screen is rotated, this message will appear:
[[File:Orientation.png||400px]]

* If you do want to support orientation, you will want to take action when the screen is rotated
<pre>
Function window_onorientationchange()
'This function is called if the orientation of the device is changed.
MsgBox "orientation changed to " & window.orientation
End Function
</pre>

* You can now resize and reposition your controls, using code like this:
<pre>
Function window_onorientationchange()
If Abs(window.orientation)=90 Then 'Landscape
btnSubmit.Left="100px"
btnSubmit.Top="100px"
Else 'Portrait
btnSubmit.Left="20px"
btnSubmit.Top="120px"
End If
End Function
</pre>
* You will have to do this to all controls which are affected.

Lab Session: Weather Data

2014-01-07T06:24:07Z

Admin: 7 revisions

In this lab you will pull in some weather data from http://openweathermap.org/API.

== Student Outline ==

# Open LabWeather.nsx.
# Add a click event to ''btnLoad'' on ''frmMain''
# Have the click event use the value from ''txtCity'' to query OpenWeatherMap's API: http://api.openweathermap.org/data/2.5/weather?q=Riyadh,sa&callback=weatherData
#* Keep in mind that you should URL encode any user entered parameters, like city, using [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent encodeURIComponent]
#* Make sure you're using JSONP to make this request.
# Upon receiving the response, you should parse the response into the various Value labels on frmMain. The format of the response is described here: http://bugs.openweathermap.org/projects/api/wiki/Weather_Data

== Bonus ==

* The [http://bugs.openweathermap.org/projects/api/wiki/API_2_5 weather API] has a lot of functionality that we aren't using. Create new forms and fields to return and display either forecast data, historical data, or both.
* The city field requires a fairly exact name. If you'd like to allow for mistakes and abbreviations, you can integrate the [http://bugs.openweathermap.org/projects/api/wiki/Api_2_5_searhing city search api]. This returns a list of possible city matches. One way to use this is to present a list that the user can choose from in a new form.

Asynchronous Calls

2014-01-07T06:24:05Z

Admin: 9 revisions

== Using Ajax Asynchronously ==

In our last Ajax discussion, we discovered that it could take half a second for an [[Ajax]] call to complete (actually, due to network latency, it could even be a lot more than that.) How do we do [[Ajax]] calls and not make our app look slow?

Easy. We send the Ajax message off, then go do other stuff. When the response comes back, we respond to it. This is called Asynchronous operation.

We do this by adding the name of the function to be called on completion as the 4th parameter of our [[Ajax]] call:
<pre>
req=Ajax("ajax.php/?myText=" + txtSend.value, "", "", done)
</pre>
Our callback function is called 'done'. After we execute the Ajax call, the program goes on to the next statement in the program immediately. It doesn't wait for any response. We can update the screen, or wait for the user to do something else. When the reply comes back, our 'done' function will be called:
<pre>

Dim req

Function btnAjax_onclick()
req=Ajax("ajax.php/?myText=" + txtSend.value, "", "", done)
txtResponse.value="Waiting for result."
End Function

Function done()
If req.readyState<>4 Then Exit Function 'ignore progress reports
If req.status=200 Then 'success
txtResponse.value=req.responseText
Else 'failure
txtResponse.value="Error: " & req.err.message
End If
End Function
</pre>
'done' will actually be called several times with progress reports on the call. We only care if it completes, so we wait for req.readyState to be 4. The rest of our function works just like when we were not asynchronous.

One of the uses of this technique that we see every day is to return partial results on a search field (as in Google). Each time a character is entered, it is sent to the server for a list of possible matches. As the results come back, the window is updated. Entering characters in the field is unaffected by the server communications that are going on at the same time.

Check out the AjaxAsync app in the Samples to see this in action.

== Using JSONP to get a Stock Quote ==

Working with [[Ajax]], we have run into the [http://en.wikipedia.org/wiki/Same-origin_policy Same Origin Policy] over and over again. In this post, we'll show you another way to get around it. The Same Origin Policy restricts you from loading files from a server not your own. There is an exception: JavaScript (.js) files are allowed. There are sites on the web where you can request information and have it passed back in [http://en.wikipedia.org/wiki/JSONP JSONP] format. The "P" stands for padding: JSONP is JSON with padding. The results are returned as a function call, with the results as parameters. That function can then be called in your program.

Let's use this to get a stock quote from Yahoo. There are 3 parts to this: first, we have to make the request. Next, we handle the return. Finally, we execute the function.

==== Make the request ====
<pre>
Dim YQI, URL, callback
YQI = escape("select * from yahoo.finance.quotes where symbol in ('AAPL','GOOG','MSFT')")
callback="requestComplete"
URL = "http://query.yahooapis.com/v1/public/yql?q=" & YQI & _
"&format=json&env=http://datatables.org/alltables.env&callback=" & callback
loadScript(URL)
</pre>
Yahoo! has a very powerful API to look up all kinds of data. To make it easier, they have set up an interface using SQL like statements called YQI. In our code above, we start by creating our YQI request. The escape() function translates special characters and spaces so they can be sent in our Ajax call.

URL is then composed of our YQI request with the rest of the boilerplate that is needed. The most interesting part is the &callback part. It names the function that the return values will be wrapped in.

Having prepared everything, we can inject the script.

==== Inject the script ====

Yahoo! is going to return some code: it will be a call to the function we specified in callback, with the parameters all filled in. The following code will insert the code returned by Yahoo! into our program and execute it:
<pre>
Function loadScript(URL)
Dim head, script
head=document.getElementsByTagName("head")[0]
script=document.createElement("script")
script.src=URL
script.async=True
head.appendChild(script)
End Function
</pre>
We do the usual checking to see if the call is complete. If it is, we will have gotten a text string back that looks something like this:
<pre>
requestComplete({"query":
{"count":3,"created":"2012-03-20T11:34:00Z","lang":"en-US","results":
{"quote":...);
</pre>
This is a valid function call, so when it is run, the function is executed.

==== Execute the function ====

<pre>
Function requestComplete(data)
Dim quotes, i
quotes=data.query.results.quote
TextArea1.value=""
For i=0 To Len(quotes)-1
TextArea1.value=TextArea1.value+quotes[i].symbol & quotes[i].Ask & vbCRLF
Next
End Function
</pre>
The data that comes back is a fairly complex structure with a lot of data in it. You can copy it to the NotePad to see everything that is there. For now, we are just interested in the asking price of the stock. The results are returned in an array, with one element per stock.

=== Cool things you can get on the web ===

There are many web services that work in a similar fashion. One of the tip offs is if the calling string has an &callback argument. If it does, it probably can be used with this method.

Some of these services are free or limited, while others require an API key that you must obtain from the service.

Some places to go for services:

* The master list is here: [http://www.programmableweb.com Programmable Web]
* Lots of stuff: [http://developer.yahoo.com/javascript/ Yahoo]!
* Weather: [http://www.wunderground.com/weather/api/d/docs Wunderground]
* Elevation: [http://www.geonames.org/export/JSON-webservices.html Geonames]
* Geographic Info: [http://www.geonames.org/export/JSON-webservices.html Geonames]

Data Formats

2014-01-07T06:24:03Z

Admin: 8 revisions

There are several formats commonly used to transfer data to and from Web Services.

= JSON =

* [http://en.wikipedia.org/wiki/Json JSON] (JavaScript Object Notation) is the simplest and most commonly used.
* It is simply a JavaScript object turned into a string.
* It is the same as a BASIC object turned into a string.

Here is what it looks like in expanded form:
<pre>
{
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021"
},
"phoneNumber": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "fax",
"number": "646 555-4567"
}
]
}
</pre>

AppStudio has a couple of handy statements for manipulating JSON strings:

<pre>
myObject = [[JSON.Parse]](jsonString) 'Convert a JSON string to an object

jsonString = [[JSON.Stringify]](myObject) 'Convert an object into a JSON string
</pre>

<div class="page-break"></div>
= JSONP =

[http://en.wikipedia.org/wiki/JSONP JSONP] is a variation on JSON: "JSON with Padding". It wraps the JSON string in a function call. When your app receives the JSONP string, it executes it.

<pre>
functionCall({
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021"
},
"phoneNumber": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "fax",
"number": "646 555-4567"
}
]
}
)
</pre>

The above JSON string will call a function in your program called functionCall with the string as a parameter:

<pre>
Sub functionCall(customer)
Print customer.lastName 'Will print "Smith"
End Sub
</pre>

See the AjaxStockQuote for an example of this.

<div class="page-break"></div>
= XML =

* [http://en.wikipedia.org/wiki/Xml XML] is the X in AJAX.
* More verbose than JSON - more data to download
* Works just as well

<pre>
<pre>
<person>
<firstName>John</firstName>
<lastName>Smith</lastName>
<age>25</age>
<address>
<streetAddress>21 2nd Street</streetAddress>
<city>New York</city>
<state>NY</state>
<postalCode>10021</postalCode>
</address>
<phoneNumbers>
<phoneNumber type="home">212 555-1234</phoneNumber>
<phoneNumber type="fax">646 555-4567</phoneNumber>
</phoneNumbers>
</person>
<person firstName="John" lastName="Smith" age="25">
<address streetAddress="21 2nd Street" city="New York" state="NY" postalCode="10021" />
<phoneNumbers>
<phoneNumber type="home" number="212 555-1234"/>
<phoneNumber type="fax" number="646 555-4567"/>
</phoneNumbers>
</person>
</pre>

* Need to include the xml2json library to convert XML into an object
<pre>
data=$.xml2json(req.responseText)
</pre>

Web Services Fundamentals

2014-01-07T06:24:01Z

Admin: 26 revisions

= Introduction =

* Web Services are resources which are accessed over the web

* AppStudio Apps can access Web Services

* The information that is pulled from the web can make interesting apps

* Data can be pulled from your own server or someone else's.

* Mashups are apps which pull information from more than one source

= Same Origin Policy and CORS =

'''[http://en.wikipedia.org/wiki/Same-origin_policy Same Origin Policy (SOP)]''': The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number – to access each other's DOM with no specific restrictions, but prevents access to DOM on different sites.

'''[http://en.wikipedia.org/wiki/Cross-origin_resource_sharing Cross Origin Resource Sharing (CORS)]''': is a mechanism that allows scripts on a web page to make AJAX requests to another domain, not the domain the script originated from. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the Same Origin Policy.

* Suppose we create an AppStudio app.

* It gets saved on our server (nsbapp.com), together with all the files it needs to run.

* When someone runs it, they enter http://www.nsbapp.com/HelloWorld into their browser.

* The app is then loaded from the website and stored on the device.

* Since the app is loaded from nsbapp.com, SOP allows it to access resources on nsbapp.com: HTML, JavaScript, CSS files, images, etc.

* However, it would not be allowed full use of resources on another site, such as nsbasic.com.

* CORS is a way of allowing apps running from another server to access specific resources on the server.

<div class="page-break"></div>

= AJAX =

'''[http://en.wikipedia.org/wiki/Ajax_(programming) AJAX]''': stands for Asynchronous JavaScript and XML. It is a group of interrelated web development techniques used on the client-side to create asynchronous web applications.

* It has evolved since it was originally named.

* Now, it does not necessary involve asynchronous, JavaScript or XML!

* The AppStudio [[Ajax]] function allows an app to request information from a web service.

* It is based on the [http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp XMLHttpPost] function in JavaScript.

<div class="page-break"></div>
=== A Simple Exchange of Data with the server ===

Let's look at some code. We will have our AppStudio app send the server a string, which the server will return reversed. Here is what the app looks like:

[[File:Ajax1.png]]<br />

The only code in this app is the "Reverse" button. The [[Ajax]] function sends the contents of the top TextArea to a [http://en.wikipedia.org/wiki/PHP PHP] script that is running on the server. If it returns successfully, we display what came back. Otherwise, we show the error:
<pre>
Dim req
Function btnAjax_onclick()
req=Ajax("ajax.php/?myText=" & txtSend.value)
If req.status=200 Then 'success
txtResponse.value=req.responseText
Else 'failure
txtResponse.value="Error: " & req.err.message
End If
End Function
</pre>
The PHP script is even easier. It gets the input that is named myText, reverses it, and uses the echo statement to send it back.
<pre>
<?php
// Get the data from the client.
$myText = $_GET['myText'];
// Send back the text, reversed
echo "Data received from Device (reversed): " . strrev($myText);
?>
</pre>
Here is the result:

[[File:Ajax2.png]]

* The php script needs to be on the same folder on the server as the AppStudio app.
* It can be uploaded with the app.
* This is equivalent to entering the following URL into a browser:
https://www.nsbasic.com/i/Ajax/ajax.php/?myText=%22NSB/AppStudio%20makes%20Ajax%20easy!%22

<div class="page-break"></div>

=== Cross Origin Attacks! ===

What happens if we run this same example in our local browser, by just choosing Start in Desktop Browser under the Run menu?

[[File:Ajax3.png]]

* We get a cross origin request error.
* The traceback shows it is caused by our Ajax call.
* When we run in a local browser, the origin of the app is our local machine.
* So the browser protests when we try to run a PHP script on another machine.

<div class="page-break"></div>
=== Using POST to Send more Data to the Server and save it ===

Let's extend what we are doing a bit and talk about using the POST method.

We discussed the simplest [[Ajax]] call, which sends data to the server by adding it to the end of the URL, a method called, rather misleadingly, GET. But what if we want to send more data? GET has a limit, some say, of around 2000 characters. For more than that, we'll use the also badly named POST method. POST has an upload limit on most servers of 8 megabytes. If you need more, server settings can be adjusted.

Let's look at some code. You'll see it looks very much like our last post:
<pre>
Function btnAjax_onclick()
req=Ajax("ajaxPost.php","POST",txtSend.value)
If req.status=200 Then 'success
htmResponse.innerHTML=req.responseText
Else 'failure
htmResponse.innerHTML="Error: " & req.err
End If
End Function
</pre>
The difference is a couple of extra parameters. We add "POST" and the data we want to send as a separate parameter. Before we talk about what is going to happen at the server end, let's see what the app looks like:

[[File:Ajaxpost.png]]<br />

<div class="page-break"></div>
* Here is the PHP code on the server which we are calling:
<pre>
<?php
// uncomment the next line to see runtime error messages from this script
// ini_set('display_errors','1');

// Get the data from the client.
$myText = file_get_contents('php://input');
// Send back the text, reversed
echo "Data received from Device (reversed):<br>" . strrev($myText);

//write the data out to a file on the server
//make sure permissions are all OK!
$myFile = "AjaxPost/ajaxPost.txt";
echo "<p>Writing data to " . getcwd() . $myFile;
$f = fopen($myFile, 'w') or die("can't open file");
fwrite($f, $myText);
fclose($f);
?>
</pre>
The file_get_contents('php://input') call gets the data, exactly as it was sent. We'll do two things with it: echo it back reversed and we will write it to a file on the server. The first part is easy: anything in an echo statement is sent back to our app:
<pre>
echo "Data received from Device (reversed):" . strrev($myText);
</pre>
The second part involves a bit more PHP, but is straightforward. It writes the data which was received to a file.
<pre>
$myFile = "AjaxPost/ajaxPost.txt";
echo "<p>Writing data to " . getcwd() . $myFile;
$f = fopen($myFile, 'w') or die("can't open file");
fwrite($f, $myText);
fclose($f);
</pre>
What would you use this feature for?

* Upload a [http://en.wikipedia.org/wiki/JSON JSON] copy of your database.
* Upload some pictures in [http://en.wikipedia.org/wiki/Base64 Base64] format.
* Create a .htm file which can be accessed as a web page.
* Lots more ideas!

A tip on debugging PHP scripts Since PHP scripts run on the server and not on your screen, you don't get to see the error messages. This can make debugging difficult. If you put this statement at the top of your PHP script, the error messages will be echoed to your app:
<pre>
ini_set('display_errors','1');
</pre>
The error messages come back as HTML formatted text. The best way to look at them is to assign them to the innerText property of an HTMLview control.

<div class="page-break"></div>

=== Getting Data from Another Site ===

One of the basic security features of the modern web is the [http://en.wikipedia.org/wiki/Same_origin_policy Same Origin Policy]. It states that a web app cannot pull up just any data from another site. This becomes a problem if you need data on someone else's site.

Fortunately, they left an easy workaround. While a web app isn't allowed to access the files on another site, a PHP script is. We'll get our PHP script to do the dirty work for us and return the results to our app. The technique we will use is often called [http://en.wikipedia.org/wiki/Web_scraping scraping].

Time to look at some code again. Here's the AppStudio part that calls the PHP script. It looks very much like the code in A Simple Exchange of Data with the server above. The main difference is that we're calling a different PHP script.
<pre>
Function btnGetFile_onclick()
req=Ajax("ajaxGetURL.php/?urlToGet=" & txtURL.value)
If req.status=200 Then 'success
htmResponse.innerHTML=req.responseText
Else 'failure
htmResponse.innerHTML=req.err
End If
htmResponse.refresh()
End Function
</pre>
Before we talk about what is going to happen at the server end, let's see what the app looks like:

[[File:Ajaxgeturl.png]]<br />

And here is what the PHP script looks like:
<pre>
<?php
$ch = curl_init($_GET['urlToGet']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($ch);
curl_close($ch);
echo $data
?>
</pre>
Let's take apart this one line:

* $_GET('urlToGet') gets the parameter string that was attached to the URL in our AppStudio code.
* _file_get_contents get the contents of the file, in this case, the URL that was passed.
* echo sends the result back to our AppStudio program.

Pretty simple, isn't it?

(In this example, we're grabbing the robots.txt file from Microsoft's site, just to show we can get files from anywhere. Nearly all sites have a robots.txt file: it is used to guide search engines.)

There is a simpler way to do this, but it can run into security problems.
<pre>
<?php
echo file_get_contents($_GET['urlToGet']);
?>
</pre>

<div class="page-break"></div>
=== How fast is it? ===

If your app is going to communicate with your server while it is running, you've probably wondered how much your app will slow down when it has to wait for the server.

In this blog post, we're going to make a program to test this. We'll construct a little program which sends data to the server as many times as it can. The server will record the information in a log file. Here is what our app will do:
<pre>
Do Until SysInfo(10) > limit
req=Ajax("ajaxLog.php/?myText=" + Now)
counter=counter+1
Loop
</pre>
[[SysInfo]](10) is the current time in milliseconds. Limit is the time we want run to. You can run this test for up to about 5 seconds: after that, the system will think you are in a endless loop and shut you down.

On the server side, we need a PHP script to get the messages and write them out to disk. Here's the code:
<pre>
<?php
// read and append to file
$myFile = "AjaxLog/log.txt";
$f = fopen($myFile, 'a') or die("can't open file");
fwrite($f, $_GET['myText'] . Chr(13) . Chr(10));
fclose($f);
?>
</pre>
Now, let's run it on a few different devices and see how many accesses we can do per second:

{| class="wikitable"
|-
| Desktop (Ethernet) || 2745.0
|-
| iPhone 5 (WiFi) || 16.75
|-
| iPhone 5 (LTE) || 13.0
|-
| iPhone 4 (WiFi) || 10.5
|-
| iPhone (3G) || 2.5
|-
| Nexus S (WiFi) || 5.0
|-
| Kindle Fire (WiFi) || 9.0
|}

It's obvious that the speed that really depends on what kind of connection you have to the web. A hard wire to your router gets the best time. WiFi is much slower, and 3G is slower again. No real surprise here.

The speeds shown here probably are not what you will see if you run the same test. There are a number of factors that will affect the speed:

* Type of data connection
* Load on the network
* Number of hops the data has to make to get to the server
* Load on the server

(You can try this sample yourself - it is called AjaxLog in the Samples folder.)

Lab Session: Fix a program with syntax errors and make some enhancements

2014-01-07T06:23:55Z

Admin: 10 revisions

In this lab you will fix some problems in the code for your app and add some functionality.

== Student Outline ==

# Open LabFix.nsx
# Run the program in the browser. Several errors appear in the [[Chrome Debugger|debugger]]. Resolve these errors.
# Link the forms together using the ChangeForm properties:
#* On ''frmMain'':
#** Link ''hdrMain's'' buttons to ''frmAbout'' and ''frmSaves''.
#** Link ''btnCompass'' to ''frmCompass''.
#** Link ''btnPhoto'' to ''frmPhoto''.
#* On ''frmAbout'', link ''hdrAbout's'' button to ''frmMain''.
#* On ''frmSaves'', link ''hdrSaves''' button to ''frmMain''.
#* On ''frmSavedData'', link ''hdrSavedData's'' button to ''frmSaves''.
#* On ''frmCompass'', link ''hdrCompass''' button to ''frmMain''.
#* On ''frmPhoto'', link ''hdrPhoto's'' button to ''frmMain''.
# Add a click event for ''frmMain's'' ''btnSave'' and have it display a ''[[MsgBox]]'' when clicked.
# Add a few random entries to ''lstSaves'' in ''Sub Main'' and verify that ''lstSaves_onclick'' fires.

Fundamentals of BASIC

2014-01-07T06:23:52Z

Admin: 21 revisions

= Variables =
== Naming ==
The following list shows some variable names that are allowed by AppStudio:
<pre>
text
LLAMAS
Jupiter
W1Spec
SouthPark
btnSubmit
txtCustomer
</pre>

And some that are not allowed:
<pre>
1table          'starts with a number
X&Ycords        'uses special character &
first counter   'has a space
%correct        'does not start with a letter
print           'Keyword
</pre>

* Variable names are case sensitive.
* If you DIM a variable name, AppStudio will correct the case on entry.

<div class="page-break"></div>
== Variables ==

* All variables are of type Variant.
* No explicit types
* Variable get their types from the value that is assigned.
* Variables Dimmed outside of an Function or Sub are global.
* Variables Dimmed inside a Function or Sub are local.
* Variables which are not declared are global.

=== Numeric ===
* Floating point: 5e-324 (negative) to 1.7976931348623157e+308 (positive)
* Integers: reliable to 15 digits.
* Hex: 0x500 = 1280
* Octal: O500 = 320

=== Booleans ===

* True or False.

=== Colors ===

* From “#000000” to “#FFFFFF” (black to white)
* color = (red*65536) + (green * 256) + blue

=== Strings ===

* Maximum length depends on memory, up to 2 billion characters

=== Arrays ===

* Dim A(9) declares an array with 10 elements
* Dim B(8,8) creates a two dimensional array
* Elements can be referred to as A(3), B(2,3), etc.
* Dim statement has to be in each Code Module
* The following notation is also OK: a[3], B[2][3}
* Array elements do not exist until they are assigned.
* To create empty array, do this: a=[]
* Use the Ubound() function to get the number of items in an array.

<div class="page-break"></div>
=== Collections ===

* Like an Array, but uses string values to index
<pre>
Dim item1, myCollection(10)
item1="Knuth"

'Create our collection
myCollection[item1] = "firstKey"
Print myCollection[item1] 'displays "firstkey"
</pre>

=== Objects ===
* An object is a collection of named values, called properties
<pre>
Customer={Name: Lovelace, Age: 195, kids:{Byron: 1, Annabella: 2, Ralph: 3}}
Print Customer.name 'displays "LoveLace"
</pre>

=== Classes ===
<pre>
'Define a class like this
Function Person(name, gender)
'Add object properties like this
this.name = name
this.gender = gender
End Function

'Add methods like this. All Person objects will be able to invoke this
Function speakName()
Print "Howdy, my name is " & this.name
End Function

Person.prototype.speak = Eval("speakName")

'Instantiate new objects with 'new'
bob = new Person("Bob", "M")

'Invoke methods like this
bob.speak() 'Prints "Howdy, my name is Bob"
</pre>

<div class="page-break"></div>
= Control structures =
'''If...Then'''
<pre>
If a=b Then c=1

If a=b Then
c=1
End If

If a=b Then
C=1
Else
C=2
End If
</pre>
'''Loops'''
<pre>
For i=1 to 10
Print i
Next

i=0
Do While i<10
Print i
i=i+1
Loop

i=0
Do
Print i
i=i+1
Loop Until i=10

Rem While...Wend Example
'While...Wend repeats a group of statements

Dim Counter
Counter = 1
While Counter < 5
Print "Counter = " & Counter
Counter = Counter + 1
Wend
</pre>
'''With'''
<pre>
Rem With sample
'With statement allows accessing properties on a specified object

Dim theURL, theTitle
With document
theURL = .URL
.title = "New Title"
theTitle = .title
Print .URL
Print .title
End With
</pre>

<div class="page-break"></div>
'''Select Case'''
<pre>
Rem Select Case Example
'Select Case performs conditional execution
CheckHat("Blue")
CheckHat("Orange")
Sub CheckHat(Hat)
Select Case Hat
Case "Blue"
Print "Kyle's hat"
Case "Green"
Print "Stan's hat"
Case "Cyan"
Print "Eric's hat"
Case "Orange", "Hood"
Print "Kenny's hat"
Case "White"
Print "Chef's hat"
Case "Striped"
Print "Mr. Hat"
Case "Christmas", "Santa"
Print "Mr. Hankey's hat"
Case Else
Print "Unknown Hat"
End Select
End Sub
</pre>
'''Error trapping'''
<pre>
Rem Try Example
'Try catches run time errors
b=1
c=0
Try
If c=0 Then throw "Division by zero!"
a=b/c
Catch err
Print err
Finally
Print "done"
End Try
</pre>
'''Functions and Subroutines'''
<pre>
Sub mySubroutine(a,b)
Print a + b
End Sub

Function myFunction(a,b)
myFunction = a + b
End Function
</pre>

<div class="page-break"></div>
= Importing VB code =

* Code using the above statements can usually be pasted in
* Remember to remove the AS clauses
* Simple controls (Buttons, TextBoxes, etc) have similar properties
* Advanced controls and properties may be different

= A few interesting statements =
* [[Print]] "Some data"
* [[console.log]]("a = " & a)

Lab Session: Create an app with some Controls

2014-01-07T06:23:49Z

Admin: 17 revisions

In this lab you will create the controls for your app.

== Student Outline ==

# Start a new Project.
# Create the following 6 forms as shown in the images:

[[File:Screenshot_2013-12-11_04.45.16.png|300px]]
[[File:Screenshot_2013-12-11_04.45.37.png|300px]]

<div class="page-break"></div>
[[File:Screenshot_2013-12-11_04.45.47.png|300px]]
[[File:Screenshot_2013-12-11_04.46.23.png|300px]]
[[File:Screenshot_2013-12-11_15.24.57.png|300px]]
[[File:Screenshot_2013-12-13_13.04.24.png|300px]]

Some Controls in depth

2014-01-07T06:23:47Z

Admin: 82 revisions

Controls make the visual elements of your app.

* An app will have one or more forms. Each form will have a collection of controls on it, customized by you with different sizes and appearances.

* In this section, we will see how to add controls and forms to an app.

* Add controls to your app by dragging and dropping them into place. Then, resize and set the properties.

* It is good practice to name your controls consistently.

* A common way is to have three letters for the type, followed by a name for the control.

* For example, lblName, txtCustomer, butSave, lstSaves

Let's look at some controls.

<div class="page-break"></div>
= [[Label]] =

Controls are defined by their properties. The [[Label]] control is a simple control. Most of the properties for a control are set to default values when the control is created, so it is usable right away. Let's look at the options for customizing it.

[[File:Labelcontrol.png|right]]

{| class = "wikitable"
|-
| align|| left, center, right
|-
| alignVertical|| top, center, bottom (no % or multiline)
|-
| backgroundColor|| colors can be a name, #RRGGBB, rgb(R,G,B) or transparent
|-
| borderColor||
|-
| borderStyle|| solid, dotted, dashed, etc.
|-
| borderWidth|| pixels
|-
| bottom|| pixels, percent, auto
|-
| class|| grayTitle default. Can be custom css.
|-
| color|| Of the text
|-
| fontFamily|| helvetica is default
|-
| fontSize|| in pixels. 16 is the default.
|-
| fontStyle|| normal, italic or oblique
|-
| fontWeight|| normal, bold or a number
|-
| height||
|-
| hidden|| true or false
|-
| id|| The name of the control.
|-
| left||
|-
| onclick, etc|| names of functions to be called when
these events happen.
|-
| right||
|-
| style|| css style
|-
| textContent|| The content of the label. HTML is OK!
|-
| top||
|-
| width||
|}
<br><br><br><br><br>

<div class="page-break"></div>

= [[TextBox]] =
[[file:TextBox.jpg]]

The [[TextBox]] has many of the same properties as the label - plus some additional ones:

{| class = "wikitable"
|-
| autocapitalize || Automatically capitalize first letter? May not be available on all platforms.
|-
| autocomplete || Automatically complete words? May not be available on all platforms.
|-
| autocorrect || Spellcheck as entering? May not be available on all platforms.
|-
| inputType || Specifies what kind of data will be input. Choices are:
* color
* date
* datetime
* email
* file (iOS 6+ and Android 4+ only)
* hidden
* month
* number
* password
* range
* search
* tel
* text (default)
* time
* url
|-
| placeholder || Text to be displayed in the field just as a comment – does not change the value.
|-
| readonly || If set to “True”, the control cannot be edited. At runtime, use readOnly.
|-
| size || Maximum characters allowed.
|-
| text || The contents of the TextBox. Same as value.
|-
| value || The contents of the TextBox. This is always returned as a string. Convert it to a number before doing arithmetic on it.
|}

<div class="page-break"></div>
= [[Button]] =
[[file:Button.jpg]]

:'''iWebKit                         jQuery Mobile'''

There are many different appearances for [[Button|buttons]].

* Buttons can have an optional icon.
* Buttons can have optional text.
* Buttons can be grouped
* Different frameworks will have different appearances.

{| class="wikitable"
|-
| ChangeForm || The name of the form to go to if this button is clicked.
|-
| corners || round or square.
|-
| groupBegin || If you have a group of buttons, set this to Yes on the first one. jQuery Mobile only.
|-
| groupEnd || If you have a group of buttons, set this to Yes on the last one. jQuery Mobile only.
|-
| icon || Set to false for no icon. You have a choice of 18 standard icons otherwise. jQuery Mobile only.
|-
| iconPos || Position of the icon. Can be none, left, right, top, bottom or notext. jQuery Mobile only.
|-
| image || Path to image to show instead of title on the button. jQuery Mobile only.
|-
| mini || true/false. For jQuery Mobile, should the text be normal size or mini size?
|-
| onclick()|| The function to be called when this button is clicked.
|-
| value || The title of the button.
|}

Here is some sample code for when a button is clicked:
<pre>
Rem Button Example

Function Button1_onclick()
Msgbox "Hello World"
End Function
</pre>

<div class="page-break"></div>
= [[HeaderBar]] =
[[file:HeaderBar.jpg]]

The [[HeaderBar]] puts a title at the top of the form.

* The left and right buttons are optional. They can be with or without text or icons.

* When a button on it is clicked, the name of that button is passed to the onclick function.

* You can also use the buttons to go to a new form.

{| class = "wikitable"
|-
| leftChangeForm || The name of the form to go to if the left button is clicked.
|-
| leftButtonIcon || Names of icon for left button. Use false for no icon, or alert, arrow-d, arrow-l ,arrow-r, arrow-u ,back, check, delete, forward, gear, grid, home, info, minus, plus, refresh, search, star. Design time only.
|-
| leftButtonName || The name of the left icon. Design time only.
|-
| rightChangeForm || The name of the form to go to if the right button is clicked.
|-
| rightButtonIcon || Names of icon for right button. Use false for no icon, or alert, arrow-d, arrow-l ,arrow-r, arrow-u ,back, check, delete, forward, gear, grid, home, info, minus, plus, refresh, search, star. Design time only.
|-
| rightButtonName || The name of the right icon. Design time only.
|-
| title || The title which appears in the center of the bar. Design time only.
|}

Here is some code showing what happens in its onclick function:
<pre>
Function HeaderBar1_onclick(button)
If TypeName(button)="object" Then Exit Function
MsgBox "Button '" & button & "' clicked."
End Function
</pre>

<div class="page-break"></div>
= [[List]] =

[[file:List.jpg]]

The [[List]] control is used to display a menu list.

* Each line can have a name, a number and an image.

* Selecting one will call the onclick function for it, with the line number as a parameter.

* Lines can be added to deleted at runtime.

* List can also be made scrollable if there are more items than fit.

{| class="wikitable"
|-
| ChangeForm || A comma separated list of form names to go to if a line is clicked.
|-
| dividers || Is the item a divider? Comma separated list of Y and N. Design time.
|-
| dividerTheme || Which theme should all the dividers have? A-z. Design time
|-
| images || Image file names for each line, comma separated. Design time
|-
| imageStyle || None, 16x16 or 80x80. Design time
|-
| items || List of item names, comma separated. Since commas act as separators, use &#44; instead of a comma in the middle of your text. Items can be plain text or HTML. Hard returns are ignored. Design time.
Example: <code>Choose One, Apples, Oranges</code>
|-
| showNumbers || Show numbers to the left of each item. True/false. Design time
|-
| getItem(''i'') || Returns the text of item ''i''.
|-
| getItemCount() || Returns the number of of items. Runtime.
|-
| deleteItem("all") || Delete all items. With no argument, just the last item is deleted. Runtime.
|-
| addItem(''text'', ''img'', ''n'', ''header'') || Add a new item at postion ''n'' with ''text'' and ''img''. ''text'' can be html. Runtime. If ''header'' is true, the line appears as a heading. Only ''text'' is required.
|-
| replaceItem(''n'', ''text'', ''img'') || Replace item ''n'' with new ''text'' and optional ''img''. Runtime.
|-
| refresh() || Redraw list after updating. Runtime.
|-
| scroll_options || Set display options for scrolling.
|-
| Scrolling || on or off.
|-
| showNumbers || true/false
|}

* Here's how to handle the click event

<pre>
Function List1_onclick(i)
If TypeName(i)="object" Then Exit Function
MsgBox "Menu item chosen: " & i & " " & List1.getItem(i)
End Function
</pre>

* Here is how to clear the list and add items at runtime
<pre>
Function Button1_onclick()
List1.deleteItem("all")
List1.addItem("Days of the week","","",True)
For i=1 To 7
List1.addItem(WeekdayName(i))
Next
End Function
</pre>

<div class="page-break"></div>

= [[Form]] =

[[Form|Forms]] act as containers for controls.

* To add a Form to your app, choose Add Form from the Project menu at the top of the screen.

* Forms can be deleted in the Project Explorer.

* Forms can be exported or imported to different projects.

[[File:form.jpg|right]]

{| class="wikitable"
|-
| background || Specify the background you want. It can be the usual colors , or a fancy gradient:
<code>background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));
</code>
|-
| fullscreen || True/False. Should the form fill the entire screen?
|-
| height || The height of the form in pixels. Default is 460.
|-
| left || The left position of the form. Use this for forms that are not full screen.
|-
| fullscreen || The form will automatically be the same size as the device screen. The Design Screen will still use height and width.
|-
| language || The programming language used in the code for the form. Can be BASIC or JavaScript.
|-
| method || Get or Post. The method that the http form is sent by.
|-
| openMode || Should the form be open at startup? Use this for forms which are to remain open. There is no need to set this for the first form of the project: that is set in [[Properties Window|Project Properties]].
|-
| script || Opens the Code Window for the form.
|-
| style || The CSS style for the form.
|-
| Url || The URL to be called when the form is submitted using the submit() function.
|-
| width || The width of the form in pixels. Default is 320. Percents can be set at runtime.
|-
| reset() || Clear all fields on the form. Runtime only.
|-
| submit() || Submit the data on the form to the specified URL. Runtime only. See [[Location]] as well.
|}

Frameworks

2014-01-07T06:23:35Z

Admin: 19 revisions

A Framework is a collection of controls. These controls appear in the ToolBox, organized by Framework.

* Usually developed by a company or organization.

* Designed to have a similar look and feel.

* May be open source or commercial.

* Each has its own set of js and css files.

* AppStudio automatically builds the files into the app.

* Using more than one framework bloats apps

* Frameworks may interfere with each other.

= Common Controls =

* These are simple controls which can be used with any Framework.

* Provide basic functionality

* Include [[Grid]], [[Image]], [[Label]], [[Line]], [[Orientation]], [[PictureBox]] and [[ProgressBar]].

* Advanced ones include [[Date]], [[Date, DateTime|DateTime]], [[Month]], [[Time]], [[Audio]], [[HTMLView|HTMLview]], [[Image]], [[Video]], [[Adsense]], [[Facebook]], [[PayPal]] and [[Twitter]].

= [[A_Field_Guide_to_App_Studio_Controls#jQuery_Mobile_Controls|jQuery Mobile]] =

* One of the most popular

* Developed by same group as the popular jQuery library.

* MIT licence (one of the best open source licenses)

* AppStudio includes 14 jQuery Mobile controls: [[Button]], [[Checkbox]], [[FlipToggle]], [[FooterBar]], [[HeaderBar]], [[List]], [[PopUp]], [[RadioButton]], [[Select]], [[Slider]], [[TextArea]], [[TextBox]], [[ToolTip]]

* New controls being added.

* Actively being developed.

= [[A_Field_Guide_to_App_Studio_Controls#jqWidgets_Controls|jqWidgets]] =

* Contains some rich and powerful controls.

* Commercial, so it is not free for all apps.

* No charge for use in non-profit organizations.

* AppStudio includes 16 jqWidgets controls: [[jqxButton]], [[JqxCalender|Calendar]], [[jqxChart|Chart]], [[jqxCheckBox|CheckBox]], [[jqxColorPicker|ColorPicker]], [[jqxDragDrop|DragDrop]], [[jqxGrid|Grid]], [[jqxInput|Input]], [[jqxListBox|ListBox]], [[jqxMenu|Menu]], [[jqxPhotoGallery|PhotoGallery]], [[jqxRadialGauge|RadialGauge]], [[jqxRating|Rating]], [[jqxSwitchButton|SwitchButton]], [[jqxTabs|Tabs]] and [[jqxTree|Tree]].

* Actively being developed.

= [[A_Field_Guide_to_App_Studio_Controls#iWebKit_Controls|iWebKit]] =

* One of the first frameworks: existed well before jQuery Mobile.

* Controls are small, efficient, not fancy.

* No longer being developed or supported.

* Version 5.0.3 under MIT License.

= Other Frameworks =

* Wikipedia lists more than 100!

* New frameworks are being announced regularly on the net

* To add them to AppStudio, [[ToolBox Files]] need to be created.

* Doing so requires skills not covered in this training.