Properties Window: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
(40 intermediate revisions by the same user not shown)
Line 9: Line 9:
{| class = "wikitable"
{| class = "wikitable"
|-
|-
| backgroundColor || Sets the default background color for all forms. Can be a color name, #RRGGBB, rgb(R,G,B), or transparent. Also used as the background color for Chrome splash screens.
| backgroundColor || Sets the default background color for all forms. Can be a color name, #RRGGBB, rgb(R,G,B), or transparent. To enable [https://blog.appstudio.dev/2020/01/appstudio-8-dark-mode/ Dark Mode], set to 'inherit'.
|-
|-
| backgroundImage || Sets the default background pattern or image for all forms. Overrides the backgroundColor property. Works best if image is in the project folder. Do not use absolute paths. To stop image from repeating to fill the screen, put <code>background-repeat:no-repeat;</code> into the style property of Project Properties. Gradients like <code>linear-gradient(#55aaee,#003366)</code> can be set at design time or runtime. URLs like <code>url(https://www.nsbasic.com/images/eiffel.gif)</code> can be set at runtime only.
| backgroundImage || Sets the default background pattern or image for all forms. Overrides the backgroundColor property. Works best if image is in the project folder. Do not use absolute paths. To stop image from repeating to fill the screen, put <code>background-repeat:no-repeat;</code> into the style property of Project Properties. Gradients like <code>linear-gradient(#55aaee,#003366)</code> can be set at design time or runtime. URLs like <code>url(https://www.nsbasic.com/images/eiffel.gif)</code> can be set at runtime only.
Line 15: Line 15:
| browserwarnmsg || Message which appears is app is run on an unsupported browser. If blank, the warning does not appear. See also [[Projects,_Forms,_and_Controls#Browser_Warning_Message|browserWarningMessageAfterScript]].
| browserwarnmsg || Message which appears is app is run on an unsupported browser. If blank, the warning does not appear. See also [[Projects,_Forms,_and_Controls#Browser_Warning_Message|browserWarningMessageAfterScript]].
|-
|-
| [https://en.wikipedia.org/wiki/Content_Security_Policy contentSecurityPolicy] || The Content Security Policy defines the security rules that the browser should enforce. The default is to allow everything, which is not sufficient for secure apps. Required by PhoneGap apps.
| [https://en.wikipedia.org/wiki/Content_Security_Policy contentSecurityPolicy] || The Content Security Policy defines the security rules that the browser should enforce. The default is to allow everything, which is not sufficient for secure apps. Required by VoltBuilder apps. This can be multiline for complex policies. The Content Security Policy is not used if you are running on the desktop.
|-
|-
| copyright || The copyright message. This will be placed in the generated code.
| copyright || The copyright message. This will be placed in the generated code.
|-
| Debugger || Enable [[AppStudio Server Debugger]]?
|-
|-
| defaultformsize || The default size used for new forms. If you want a size not on the list, set the height and width for each form in Form Properties.
| defaultformsize || The default size used for new forms. If you want a size not on the list, set the height and width for each form in Form Properties.
Line 27: Line 25:
| enableAppScroll || Allow app to scroll? Use for forms longer than the screen. See [http://blog.nsbasic.com/2016/01/making-apps-which-scroll/ Making Apps which Scroll].  Needs to be set to true for jQuery Mobile swipeleft and swiperight.
| enableAppScroll || Allow app to scroll? Use for forms longer than the screen. See [http://blog.nsbasic.com/2016/01/making-apps-which-scroll/ Making Apps which Scroll].  Needs to be set to true for jQuery Mobile swipeleft and swiperight.
|-
|-
| enableBrowserArrows || After ChangeForm, enable the back and forward arrows of the browser to move between forms. Defaults to false.
| enableBrowserArrows || After [[ChangeForm]], enable the back and forward arrows of the browser to move between forms. Defaults to false.
|-
| enableNiceLinks || Don't use hash (#) in URL? Also needs to be [[Manage_apps|set in Dashboard]].
|-
| eslintRules || For syntax checking. A JSON configuration object that modifies the [https://github.com/airbnb/javascript default style guide]. <p>See the [https://eslint.org/docs/developer-guide/nodejs-api#cliengine Eslint Developer Guide] to modify your rules.
|-
| enableNiceLinks || On servers where this is enabled, do not show '#' character in URL. If you are deploying to VoltServer, go into the Dashboard for your app and set Nice Links to true as well. Defaults to false.
|-
| EULA || The text of the End User License Agreement that the user has to agree to before the app will run.
|-
|-
| events || Project wide events which are responded to.
| events || Project wide events which are responded to.
|-
|-
| EULA || The text of the End User License Agreement that the user has to agree to before the app will run.
| extrafiles || Files to include with your project. These files should be in your project's folder. If you include the name of a folder, the folder and all of its files will be included.
|-
|-
| extraheaders || Additional lines to the header. This is a good place to include extra JavaScript libraries.
| extraheaders || Additional lines to the header. This is a good place to include extra JavaScript libraries.
|-
| [http://blog.nsbasic.com/2013/04/what-does-fastclick-do/ FastClick] || Built-in library that improves click event response time. Defaults to false: most browsers no longer need this.
|-
|-
| firstform || The name of the initial form to display. If left blank, the first form is used. If the form specified no longer exists, it will be changed to the first form on the next deploy.
| firstform || The name of the initial form to display. If left blank, the first form is used. If the form specified no longer exists, it will be changed to the first form on the next deploy.
Line 41: Line 45:
| fontfamily || The default font for all controls. Default value is system, which uses the default font for each device. Android and iOS each have custom fonts: Roboto and San Francisco. To use a single font for all platforms, use something like Helvetica.
| fontfamily || The default font for all controls. Default value is system, which uses the default font for each device. Android and iOS each have custom fonts: Roboto and San Francisco. To use a single font for all platforms, use something like Helvetica.
|-
|-
| homescreenTitle || The title to be used for the app when saved to the Home Screen on the device. iOS only.
| icon || Should be 512x512 in png format. If you are not building for Electron, 192x192 is OK. Works best if the image is in the project folder. If you do not specify an icon, the AppStudio icon will be used. Do not use absolute paths. Unix file names must be used: you cannot include spaces or invalid characters such as colon (":") or parentheses ("()").  
|-
| icon || The icon to be used when the app is saved to the Home Screen. For iOS, it should be 180x180. Works best if the image is in the project folder. Do not use absolute paths. Unix file names must be used: you cannot include spaces or invalid characters such as colon (":") or parentheses ("()"). If ChromeSplash is set to True, [[SplashScreens|make sure the splash folder is set up]]: otherwise, the icons will not display on Android devices.
|-
|-
| language || BASIC or JavaScript. If BASIC, code is converted to JavaScript before running.  
| language || BASIC or JavaScript. If BASIC, code is converted to JavaScript before running.  
|-
|-
| manifest || A list of files to be saved with the project. See “[[Distributing your App]]”.
| [[Obfuscation|obfuscation]] || Name of the external routine to obfuscate the runtime code.
|-
|-
| manifestFile || “appcache” or “manifest”. “appcache” is recommended for all new projects.
| [[Obfuscation|obfuscatorSettings]] || If obfuscation is set to js-obfuscator-custom, these settings are used.
|-
| newVersionWarning || Ask the user before installing a new version of the app? Defaults to false: new versions will load automatically,
|-
| obfuscation || Name of the external routine to obfuscate the runtime code.
|-
|-
| [[Responsive Design Made Simple|projectCSS]] || Opens an editor window with CSS rules for the project.
| [[Responsive Design Made Simple|projectCSS]] || Opens an editor window with CSS rules for the project.
Line 61: Line 59:
| script || Opens a Code Window with the Global Code for the project.
| script || Opens a Code Window with the Global Code for the project.
|-
|-
| statusbar || The appearance of the status bar at the very top of the screen. Choices are default, black or black-translucent.
| statusbar || The appearance of the iOS status bar at the very top of the screen. If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.
|-
|-
| stopOnError || Show a MsgBox if error at runtime?
| stopOnError || Show a MsgBox if error at runtime?
Line 67: Line 65:
| [[style]] || The style used by the body of the app. See the [[Style]] page for more info. Must be on a single line.
| [[style]] || The style used by the body of the app. See the [[Style]] page for more info. Must be on a single line.
|-
|-
| title || The public title of the program. Special characters like "&" are not allowed if compiling with PhoneGap.
| title || The public title of the program. Special characters like "&" are not allowed if compiling with VoltBuilder.
|-
|-
| useStrict || Do additional syntax checking at runtime, such as undeclared variables.
| useStrict || Do additional syntax checking at runtime, such as undeclared variables.
|-
|-
| version || Version number of app. User specified.  
| version || Version number of app. User specified.  
|-
| viewportFit || iOS: How should the app cover the screen?<br><b>auto</b> currently same as <b>contain</b>.<br><b>cover</b> fills the entire screen.<br><b>contain</b> sticks within the safe area.<p>[http://blog.nsbasic.com/?p=3127&preview=true More info]
|-
! Electron
|-
| Chrome Dev Tools? || Open Chrome Dev Tools automatically at run time?
|-
| electronMain.js || Startup module for app. [https://electronjs.org/docs/api/browser-window More info].
|-
| icon (512) || Icon template. Must be 512x512 png, jpg or jpeg. If not supplied, AppStudio icon will be used.
|-
| package.json || Parameters for app. Node modules, etc. [https://docs.npmjs.com/files/package.json More Info].
|-
|-
! Frameworks
! Frameworks
Line 80: Line 90:
|-
|-
| jQueryMobileTheme || If jQuery Mobile is used, the default theme.
| jQueryMobileTheme || If jQuery Mobile is used, the default theme.
|-
| jqWidgetsLicence || When you pay for a jqWidgets license, you'll get a serial number. Enter it here.
|-
|-
| pathTo_jqWidgets || The path to the jqWidgets files. Should end in "/" if local path. See this [http://blog.nsbasic.com/2015/05/appstudio-5-using-a-local-copy-of-jqwidgets/ blog post] for changing the path to a local folder.
| pathTo_jqWidgets || The path to the jqWidgets files. Should end in "/" if local path. See this [http://blog.nsbasic.com/2015/05/appstudio-5-using-a-local-copy-of-jqwidgets/ blog post] for changing the path to a local folder.
|-
|-
! EXE Settings
! Progressive Web App
|-
| homescreenTitle || App title when saved to Home Screen.
|-
| Make PWA? || Make a PWA? Defaults to true.
|-
| manifest || Manifest for PWA. See [[Progressive Web Apps]].
|-
! VoltServer
|-
| AppID || ID of the app in VoltServer. Assigned automatically when deployed to VoltServer.
|-
| Dashboard Access || Allow the app access to user data on VoltServer, much like the Dashboard has.
|-
| Domain || The location of the app on VoltServer. For example, signon-controls-sharply.volt.live.
|-
|-
| AppPublisher || Must be a single line.
! VoltBuilder and Cordova
|-
|-
| EXE icon || App Icon. Must be a .ico file.
| Android alias || Name of the alias in the android keystore file. Must be in certificates folder.
|-
|-
| EXE title || Page and Start menu title.
| Android alias password || Password for alias in the Android keystore file
|-
|-
| height || Height of app's window. Defaults to defaultformsize.
| Android keystore || Distinguished Name. User identification for creating Keystore file. Substitute your information. String format is cn=myname, ou=mygroup, o=mycompany, c=mycountry.
|-
|-
| width || width of app's window. Defaults to defaultformsize.
| Android keystore password || Password for Android keystore file
|-
|-
| Window Style || See [[WindowStyle]] for more info.
| BuildCounter || Counts the number of builds, so each build has a unique versionCode.
|-
|-
! PhoneGap
| config.xml || Configuration information for VoltBuilder. Includes things like plugins, security, autorotation (orientation) and more.
|-
|-
| BuildID || The ID assigned by PhoneGap Build.
| Cordova build.json || Signing parameters for Cordova apps. See [https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#signing-an-app Android Signing] and [iOS Signing https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#signing-an-app].
|-
|-
| configxml || Configuration information for [https://build.phonegap.com/docs/config-xml PhoneGap Build]. Includes things like icons, splash screens, autorotation (orientation) and more.
| Cordova command || Command to start Cordova. See [https://wiki.appstudio.dev/Cordova#Cordova_Commands].
|-
|-
| Languages || Languages supported if PhoneGap project.  
| Google Play Key || This is the name of the keyfile which will let VoltBuilder submit to Google, without allowing VoltBuilder to see any secure information. Go to [https://volt.build/docs/google_play/ Upload to Google Play] for instructions on getting your key.
|-
|-
| Splashscreen || The default splash screen for PhoneGap apps.
| Google Play Track || https://volt.build/docs/google_play/
|-
|-
| statusbarColor || Background Color of statusbar as #RRGGBB. Can not be blank. See https://www.npmjs.com/package/cordova-plugin-statusbar.
| icon (1024) || Icon file. Should be 1024x1025 in png format. Used to generate all needed icon files.
|-
| iOS Dev p12 file || Name of iOS Development p12 file. Must be in certificates folder.
|-
| iOS Dev p12 password || Password for ios Development .p12 keystore file
|-
| ios Dev mobileprovision file || Name of iOS development mobileprovision file. Must be in certificates folder.
|-
| iOS Dist p12 file || Name of iOS development mobileprovision file. Must be in certificates folder.
|-
|-
| statusbarOverlay || Should the statusbar overlay the app?
| iOS Dist p12 password || Password for iOS Distribution .p12 keystore file.
|-
|-
| statusbarStyle || What color should the status bar be? (default, lightcontent, blacktransluscent, blackopaque)
| iOS Dist mobileprovision file || Password for iOS Distribution .p12 keystore file
|-
|-
| Version || Which version of PhoneGap to use. If blank, use the latest version.
| iOS distribution type || What type of distribution is this? app-store, ad-hoc or enterprise.
|-
|-
! Volt
| iTunes Account || What type of distribution is this?
|-
|-
| AppID || ID of the app in Volt. Assigned automatically when deployed to Volt.
| iTunes App Password || This is an app specific password will let VoltBuilder submit to Apple, without allowing VoltBuilder to see any secure information. Go to the [https://appleid.apple.com/ Apple ID] page and sign in. In the Security section, click on “Generate Password…” Use VoltBuilder as your password label. You’ll get back a string like wxyz-ymul-hbqn-xxxx which you paste here.
|-
|-
| Dashboard Access || Allow the app access to user data on Volt, much like the Dashboard has?
| splash (2732) || Splash file. Should be 2732x2732 in png format. Used to generate all needed splash screen files.
|-
|-
| Domain || The location of the app on Volt. For example, signon-controls-sharply.volt.live
| statusbarColor || Background Color of statusbar as #RRGGBB. Can not be blank. See https://www.npmjs.com/package/cordova-plugin-statusbar.
|-
| statusbarOverlay || Should the statusbar overlay the app?
|-
| statusbarStyle || What color should the status bar be? (default, lightcontent, blacktransluscent, blackopaque)
|-
|-
|}
|}
Line 132: Line 170:
|-
|-
| Language || The programming language used in the Code Module. Can be JavaScript, BASIC or PHP.
| Language || The programming language used in the Code Module. Can be JavaScript, BASIC or PHP.
|-
| loadType || How will this JavaScript module be loaded?
* default: simple load.
* async: execute right away
* defer: execute when page finishes
* webworker: loaded as a webworker
* noload: module is not loaded by app
|-
|-
| script || Opens a Code Window to edit the script.
| script || Opens a Code Window to edit the script.

Revision as of 15:33, 25 February 2021


The project, its forms and the controls on those forms have information about them that can be edited in the Properties Window.

  • If a change would affect the appearance of a form or control, the Design Screen will be updated.
  • A short description of the property appears in the Help window below the Properties Window.

Project Properties

backgroundColor Sets the default background color for all forms. Can be a color name, #RRGGBB, rgb(R,G,B), or transparent. To enable Dark Mode, set to 'inherit'.
backgroundImage Sets the default background pattern or image for all forms. Overrides the backgroundColor property. Works best if image is in the project folder. Do not use absolute paths. To stop image from repeating to fill the screen, put background-repeat:no-repeat; into the style property of Project Properties. Gradients like linear-gradient(#55aaee,#003366) can be set at design time or runtime. URLs like url(https://www.nsbasic.com/images/eiffel.gif) can be set at runtime only.
browserwarnmsg Message which appears is app is run on an unsupported browser. If blank, the warning does not appear. See also browserWarningMessageAfterScript.
contentSecurityPolicy The Content Security Policy defines the security rules that the browser should enforce. The default is to allow everything, which is not sufficient for secure apps. Required by VoltBuilder apps. This can be multiline for complex policies. The Content Security Policy is not used if you are running on the desktop.
copyright The copyright message. This will be placed in the generated code.
defaultformsize The default size used for new forms. If you want a size not on the list, set the height and width for each form in Form Properties.
description Description of the project. Used in config.xml.
enableAppScroll Allow app to scroll? Use for forms longer than the screen. See Making Apps which Scroll. Needs to be set to true for jQuery Mobile swipeleft and swiperight.
enableBrowserArrows After ChangeForm, enable the back and forward arrows of the browser to move between forms. Defaults to false.
enableNiceLinks Don't use hash (#) in URL? Also needs to be set in Dashboard.
eslintRules For syntax checking. A JSON configuration object that modifies the default style guide.

See the Eslint Developer Guide to modify your rules.

enableNiceLinks On servers where this is enabled, do not show '#' character in URL. If you are deploying to VoltServer, go into the Dashboard for your app and set Nice Links to true as well. Defaults to false.
EULA The text of the End User License Agreement that the user has to agree to before the app will run.
events Project wide events which are responded to.
extrafiles Files to include with your project. These files should be in your project's folder. If you include the name of a folder, the folder and all of its files will be included.
extraheaders Additional lines to the header. This is a good place to include extra JavaScript libraries.
firstform The name of the initial form to display. If left blank, the first form is used. If the form specified no longer exists, it will be changed to the first form on the next deploy.
fontfamily The default font for all controls. Default value is system, which uses the default font for each device. Android and iOS each have custom fonts: Roboto and San Francisco. To use a single font for all platforms, use something like Helvetica.
icon Should be 512x512 in png format. If you are not building for Electron, 192x192 is OK. Works best if the image is in the project folder. If you do not specify an icon, the AppStudio icon will be used. Do not use absolute paths. Unix file names must be used: you cannot include spaces or invalid characters such as colon (":") or parentheses ("()").
language BASIC or JavaScript. If BASIC, code is converted to JavaScript before running.
obfuscation Name of the external routine to obfuscate the runtime code.
obfuscatorSettings If obfuscation is set to js-obfuscator-custom, these settings are used.
projectCSS Opens an editor window with CSS rules for the project.
rtl Use right to left language on controls?
script Opens a Code Window with the Global Code for the project.
statusbar The appearance of the iOS status bar at the very top of the screen. If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.
stopOnError Show a MsgBox if error at runtime?
style The style used by the body of the app. See the Style page for more info. Must be on a single line.
title The public title of the program. Special characters like "&" are not allowed if compiling with VoltBuilder.
useStrict Do additional syntax checking at runtime, such as undeclared variables.
version Version number of app. User specified.
viewportFit iOS: How should the app cover the screen?
auto currently same as contain.
cover fills the entire screen.
contain sticks within the safe area.

More info

Electron
Chrome Dev Tools? Open Chrome Dev Tools automatically at run time?
electronMain.js Startup module for app. More info.
icon (512) Icon template. Must be 512x512 png, jpg or jpeg. If not supplied, AppStudio icon will be used.
package.json Parameters for app. Node modules, etc. More Info.
Frameworks
BootstrapPath The path to the Bootstrap.Leave blank for the default, but if you have a custom build of Bootstrap, put the path here. If to a local folder, should end in /. Must be single line.
BootstrapTheme The theme used by Bootstrap. Affects the appearance of all Bootstrap controls.
jQueryMobileTheme If jQuery Mobile is used, the default theme.
jqWidgetsLicence When you pay for a jqWidgets license, you'll get a serial number. Enter it here.
pathTo_jqWidgets The path to the jqWidgets files. Should end in "/" if local path. See this blog post for changing the path to a local folder.
Progressive Web App
homescreenTitle App title when saved to Home Screen.
Make PWA? Make a PWA? Defaults to true.
manifest Manifest for PWA. See Progressive Web Apps.
VoltServer
AppID ID of the app in VoltServer. Assigned automatically when deployed to VoltServer.
Dashboard Access Allow the app access to user data on VoltServer, much like the Dashboard has.
Domain The location of the app on VoltServer. For example, signon-controls-sharply.volt.live.
VoltBuilder and Cordova
Android alias Name of the alias in the android keystore file. Must be in certificates folder.
Android alias password Password for alias in the Android keystore file
Android keystore Distinguished Name. User identification for creating Keystore file. Substitute your information. String format is cn=myname, ou=mygroup, o=mycompany, c=mycountry.
Android keystore password Password for Android keystore file
BuildCounter Counts the number of builds, so each build has a unique versionCode.
config.xml Configuration information for VoltBuilder. Includes things like plugins, security, autorotation (orientation) and more.
Cordova build.json Signing parameters for Cordova apps. See Android Signing and [iOS Signing https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#signing-an-app].
Cordova command Command to start Cordova. See [1].
Google Play Key This is the name of the keyfile which will let VoltBuilder submit to Google, without allowing VoltBuilder to see any secure information. Go to Upload to Google Play for instructions on getting your key.
Google Play Track https://volt.build/docs/google_play/
icon (1024) Icon file. Should be 1024x1025 in png format. Used to generate all needed icon files.
iOS Dev p12 file Name of iOS Development p12 file. Must be in certificates folder.
iOS Dev p12 password Password for ios Development .p12 keystore file
ios Dev mobileprovision file Name of iOS development mobileprovision file. Must be in certificates folder.
iOS Dist p12 file Name of iOS development mobileprovision file. Must be in certificates folder.
iOS Dist p12 password Password for iOS Distribution .p12 keystore file.
iOS Dist mobileprovision file Password for iOS Distribution .p12 keystore file
iOS distribution type What type of distribution is this? app-store, ad-hoc or enterprise.
iTunes Account What type of distribution is this?
iTunes App Password This is an app specific password will let VoltBuilder submit to Apple, without allowing VoltBuilder to see any secure information. Go to the Apple ID page and sign in. In the Security section, click on “Generate Password…” Use VoltBuilder as your password label. You’ll get back a string like wxyz-ymul-hbqn-xxxx which you paste here.
splash (2732) Splash file. Should be 2732x2732 in png format. Used to generate all needed splash screen files.
statusbarColor Background Color of statusbar as #RRGGBB. Can not be blank. See https://www.npmjs.com/package/cordova-plugin-statusbar.
statusbarOverlay Should the statusbar overlay the app?
statusbarStyle What color should the status bar be? (default, lightcontent, blacktransluscent, blackopaque)

Code Module Properties

id The name of the Code Module.
Language The programming language used in the Code Module. Can be JavaScript, BASIC or PHP.
loadType How will this JavaScript module be loaded?
  • default: simple load.
  • async: execute right away
  • defer: execute when page finishes
  • webworker: loaded as a webworker
  • noload: module is not loaded by app
script Opens a Code Window to edit the script.
src Location of the external file this Code Module refers to.

Form Properties

See the Form page.

Control Properties

See the Properties and Methods page.

Next: Status Bar