ToolBox Files - Revision history

Ghenne: /* Elements of a ToolBox File */

2022-09-12T16:13:50Z

Elements of a ToolBox File

← Older revision		Revision as of 16:13, 12 September 2022
Line 23:		Line 23:
	"_base": ["jqxAll","Widget"],		"_base": ["jqxAll","Widget"],
	</pre>		</pre>
	Controls are categorized by palette number. For ~~use~~ defined controls, this is usually 4:		Controls are categorized by palette number. For user defined controls, this is usually 4:
	<pre>		<pre>
	"_palette": 4,		"_palette": 4,

Ghenne at 14:24, 2 December 2019

2019-12-02T14:24:50Z

← Older revision		Revision as of 14:24, 2 December 2019
Line 10:		Line 10:
	Here is an annotated tour through one of the ToolBox files: Button_jqm.js. We will look at the file for the [http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm jqWidgets Button] control:		Here is an annotated tour through one of the ToolBox files: Button_jqm.js. We will look at the file for the [http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm jqWidgets Button] control:

	The file is formatted as a JSON structure. They are loaded into the IDE at startup. It's important to keep the syntax correct: the control will not load properly if there are any errors. If you make changes to the file, you need to restart the IDE to see the effect. You can edit the file in a standard text editor, or copy it into an [~~http~~://~~www.~~jsoneditoronline.org online JSON editor].		The file is formatted as a JSON structure. They are loaded into the IDE at startup. It's important to keep the syntax correct: the control will not load properly if there are any errors. If you make changes to the file, you need to restart the IDE to see the effect. You can edit the file in a standard text editor, or copy it into an [https://jsoneditoronline.org/ online JSON editor].

	=== Elements of a ToolBox File ===		=== Elements of a ToolBox File ===

Ghenne at 12:54, 3 June 2019

2019-06-03T12:54:51Z

← Older revision		Revision as of 12:54, 3 June 2019
Line 214:		Line 214:
	<pre>		<pre>
	"_htmltemplate":		"_htmltemplate":
	"\"<input type='button' id='{id}' {hidden}{disabled} style='{style}' name='{name}' value='{value}' data-role='none'>\"",		"\"<input type='button' id='{id}' {hidden}{disabled} style='{style}' name='{name}' value='{value}' data-role='none'>\",",
	</pre>		</pre>
	<pre>		<pre>

Ghenne: /* Elements of a ToolBox File */

2019-06-02T12:22:51Z

Elements of a ToolBox File

← Older revision		Revision as of 12:22, 2 June 2019
Line 211:		Line 211:
	"#{id} {{position:absolute; left:{left}px; top:{top}px; height:{height}px; width:{width}px}}",		"#{id} {{position:absolute; left:{left}px; top:{top}px; height:{height}px; width:{width}px}}",
	</pre>		</pre>
	The htmltemplate lays out the html for the control. It's placed at the top of the app, so it is executed when the app is first loaded. It uses the same substitution tricks as csstemplate. If you want to execute a script to generate the HTML, you can ~~include it in <script> tags~~.		The htmltemplate lays out the html for the control. It's placed at the top of the app, so it is executed when the app is first loaded. It uses the same substitution tricks as csstemplate. If you want to execute a script to generate the HTML, you can call a function which returns the HTML.
	<pre>		<pre>
	"_htmltemplate":		"_htmltemplate":
	"<input type='button' id='{id}' {hidden}{disabled} style='{style}' name='{name}' value='{value}' data-role='none'>",		"\"<input type='button' id='{id}' {hidden}{disabled} style='{style}' name='{name}' value='{value}' data-role='none'>\"",
	</pre>		</pre>
			<pre>
			"_htmltemplate": " NSB.bs.dropdown.make('{id}', '{value}', '{dropdown}', '{blockLevel} {class}', '{disabled}', '{_fontcss!i}{_bordercss!i}{_margincss!i}{_paddingcss!i}{_colorscss!i}{hidden}{style!j}', '{_fontcss!i}{_bordercss!i}{_margincss!i}{_paddingcss!i}{_colorscss!i}{hidden}{style!j}', '{appearance}', '{outline}', '{size}', '{icon}', '', '{align}', '{items!j}', '{grouping}', '{groupStyle}', '{_bsBadge!i}', '{_bsPopover2!i}', '{filter}', '{filterPlaceholder}'),",
			</pre>

	jstemplate is some optional JavaScript code that is executed once all the controls are created. It uses the same substitution tricks. Any valid JavaScript can be used here.		jstemplate is some optional JavaScript code that is executed once all the controls are created. It uses the same substitution tricks. Any valid JavaScript can be used here.
	<pre>		<pre>

Ghenne: /* Conditionals */

2019-02-01T16:27:10Z

Conditionals

← Older revision		Revision as of 16:27, 1 February 2019
Line 314:		Line 314:

	Python functions can be used in the expressions.		Python functions can be used in the expressions.
			<pre>
			class='btn{eval appearance[0:5] + outline + appearance[5:]}{size}{blockLevel} {class}'
			</pre>

	=== Iteration ===		=== Iteration ===

Ghenne: /* Parent */

2018-01-11T16:41:40Z

Parent

← Older revision		Revision as of 16:41, 11 January 2018
Line 345:		Line 345:

	<pre>		<pre>
	{if _parent.firstform) == id} console.log("first form!");{/if}		{if _parent.firstform} == id} console.log("first form!");{/if}
	</pre>		</pre>

Ghenne at 10:16, 11 January 2018

2018-01-11T10:16:39Z

← Older revision		Revision as of 10:16, 11 January 2018
Line 1:		Line 1:
	The Toolbox files describe controls to the IDE. They are used to create entries in the Toolbox window and to describe the operation of the control to the IDE. The files reside in:		The Toolbox files describe controls to the IDE. They are used to create entries in the Toolbox window and to describe the operation of the control to the IDE. The files reside in:
	* Windows: \Program Files\NSB AppStudio\toolbox		* Windows: \Program Files\NSB AppStudio\toolbox
	* Mac: Applications/AppStudio.app/Contents/~~Resources~~/toolbox		* Mac: Applications/AppStudio.app/Contents/MacOS/toolbox
	You are welcome to create your own Toolbox files - but do not make changes in the above directories. Instead, save your new and modified Toolbox files to a directory named "AppStudio Toolbox" in your Documents folder. You can specify a different location in the Advanced tab of [[Preferences]].		You are welcome to create your own Toolbox files - but do not make changes in the above directories. Instead, save your new and modified Toolbox files to a directory named "AppStudio Toolbox" in your Documents folder. You can specify a different location in the Advanced tab of [[Preferences]].

Ghenne: /* Parent */

2017-06-02T20:26:27Z

Parent

← Older revision		Revision as of 20:26, 2 June 2017
Line 342:		Line 342:
	=== Parent ===		=== Parent ===

	You can test a value in the parent of the control. For a control, that would mean the form it is on. For a form, that would be the project.		You can test a value in the parent of the control. For a control, that would mean the container or form it is in. For a form, that would be the project.

	<pre>		<pre>

Ghenne: /* Grouping Properties */

2017-01-23T20:49:47Z

Grouping Properties

← Older revision		Revision as of 20:49, 23 January 2017
Line 234:		Line 234:

	There are several advanced templating techniques available to help make writing templates easier and more concise.		There are several advanced templating techniques available to help make writing templates easier and more concise.

			=== Preventing Translation ===

			To prevent a field from being picked up for translation (internationalization), add the following property to an item:
			<pre>
			"i18n": false,
			</pre>

	=== Grouping Properties ===		=== Grouping Properties ===

Ghenne: /* Elements of a ToolBox File */

2016-04-14T15:39:47Z

Elements of a ToolBox File

← Older revision		Revision as of 15:39, 14 April 2016
Line 223:		Line 223:
	</pre>		</pre>
	And that brings us to the end of the file. One more thing: You can use multiple lines in any of the templates by using an array of strings, one string per line. (The requiredfiles element above is an example of this.)		And that brings us to the end of the file. One more thing: You can use multiple lines in any of the templates by using an array of strings, one string per line. (The requiredfiles element above is an example of this.)

			=== Hiding controls from jQuery Mobile ===

			jQuery Mobile's CSS will enhance all the controls in your project - not just jQuery Mobile controls. To stop this from happening, add this to the outmost element of the control:
			<pre>
			data-role='none' data-enhance='false'
			</pre>

	== Advanced Templating ==		== Advanced Templating ==