A Simple Program - JS - Revision history

Ghenne: /* Run on an iPhone */

2016-11-01T20:07:41Z

Run on an iPhone

← Older revision		Revision as of 20:07, 1 November 2016
Line 72:		Line 72:
	=== Run on an iPhone ===		=== Run on an iPhone ===

	1. Good work! Now let's run it on a phone. From the ~~Deploy picker~~, choose "Deploy ~~to AppStudio Server". We have set this one up for AppStudio users for testing.~~ (We're using an iPhone here. We'll do it for Android next.)		1. Good work! Now let's run it on a phone. From the Run menu, choose Deploy, then pick the 3rd option: (We're using an iPhone here. We'll do it for Android next.)

	[[File:TT01.10.~~JPG~~]]<br>		[[File:TT01.10.png]]<br>
			<br><br>
			[[File:TT01.10a.png]]<br>
	<br><br>		<br><br>

Ghenne at 08:52, 27 August 2015

2015-08-27T08:52:49Z

← Older revision		Revision as of 08:52, 27 August 2015
Line 72:		Line 72:
	=== Run on an iPhone ===		=== Run on an iPhone ===

	1. Good work! Now let's run it on a phone. From the Deploy picker, choose "Deploy to ~~nsbapp.com server~~"~~. The IDE will upload your complete app to a webserver called nsbapp.com~~. We have set this one up for AppStudio users for testing. (We're using an iPhone here. We'll do it for Android next.)		1. Good work! Now let's run it on a phone. From the Deploy picker, choose "Deploy to AppStudio Server". We have set this one up for AppStudio users for testing. (We're using an iPhone here. We'll do it for Android next.)

	[[File:TT01.10.JPG]]<br>		[[File:TT01.10.JPG]]<br>

Ghenne: /* Startup */

2015-05-11T20:22:05Z

Startup

← Older revision		Revision as of 20:22, 11 May 2015
Line 51:		Line 51:
	<br><br>		<br><br>

	6. In the Properties Editor, choose ~~onclick~~. It will show a popup with '~~Button1_onclick()~~'. Select that, and you will go into the Code Window:		6. In the Properties Editor, choose Events. It will show a popup with with the events for buttons. Near the top, you will see 'onclick'. Select that, and you will go into the Code Window:

	[[File:TT01.07js.png]]<br>		[[File:TT01.07js.png]]<br>

Ghenne at 18:39, 1 April 2014

2014-04-01T18:39:23Z

← Older revision		Revision as of 18:39, 1 April 2014
Line 24:		Line 24:
	# Hints: Some tips on the current object.		# Hints: Some tips on the current object.
	# (not shown yet) Code Window: An editor for your program code.		# (not shown yet) Code Window: An editor for your program code.
			<br><br>

	2. Create a new project. Select menu item File...New. Choose JavaScript as your programming language, the default iPhone/Nexus size and use HelloWorld as your new File name.		2. Create a new project. Select menu item File...New. Choose JavaScript as your programming language, the default iPhone/Nexus size and use HelloWorld as your new File name.

	[[File:TT01.02.png]]<br>		[[File:TT01.02.png]]<br>
			<br><br>

	It's best to create your project in a new folder.		It's best to create your project in a new folder.

	[[File:TT01.03.JPG]]<br>		[[File:TT01.03.JPG]]<br>
			<br><br>

	3. Add a Button. Select the button in the ToolBox and drag & drop it where you like.		3. Add a Button. Select the button in the ToolBox and drag & drop it where you like.

	[[File:TT01.04.JPG]]<br>		[[File:TT01.04.JPG]]<br>
			<br><br>

	4. Edit the Value of the button to say "Click Me!"		4. Edit the Value of the button to say "Click Me!"

	[[File:TT01.05.JPG]]<br>		[[File:TT01.05.JPG]]<br>
			<br><br>

	5. We can actually run the program now. Choose Run...Start in Desktop Browser. It runs in your default browser: we recommend using Chrome or Safari, as these support the WebKit extensions which mobile devices use. We could even run this on a device, but let's do a bit more first...		5. We can actually run the program now. Choose Run...Start in Desktop Browser. It runs in your default browser: we recommend using Chrome or Safari, as these support the WebKit extensions which mobile devices use. We could even run this on a device, but let's do a bit more first...

	[[File:TT01.06.JPG]]<br>		[[File:TT01.06.JPG]]<br>
			<br><br>

	6. In the Properties Editor, choose onclick. It will show a popup with 'Button1_onclick()'. Select that, and you will go into the Code Window:		6. In the Properties Editor, choose onclick. It will show a popup with 'Button1_onclick()'. Select that, and you will go into the Code Window:

	[[File:TT01.07js.png]]<br>		[[File:TT01.07js.png]]<br>
			<br><br>

	7. Add the following code into the function:		7. Add the following code into the function:
	alert( "Hello World");		alert( "Hello World");
Line 51:		Line 64:

	[[File:TT01.08js.png]]<br>		[[File:TT01.08js.png]]<br>
			<br><br>

	8. Now, run it again and click on "Click Me!"		8. Now, run it again and click on "Click Me!"

Line 60:		Line 75:

	[[File:TT01.10.JPG]]<br>		[[File:TT01.10.JPG]]<br>
			<br><br>

	2. Now, get your iPhone and go into Safari. Enter in the URL from the last step.		2. Now, get your iPhone and go into Safari. Enter in the URL from the last step.

	[[File:TT01.11.png]]<br>		[[File:TT01.11.png]]<br>
			<br><br>

	3. Hit Go. The page will appear. You can tap on "Click Me!", and you'll see: a working app in AppStudio.		3. Hit Go. The page will appear. You can tap on "Click Me!", and you'll see: a working app in AppStudio.

	[[File:TT01.12.png]]<br>		[[File:TT01.12.png]]<br>
			<br><br>

	4. But this isn't a real app: it's just a web page that looks like one. Let's turn it into a real app on the Home Screen. First, we'll tap on the box with an arrow icon at the bottom of the screen.		4. But this isn't a real app: it's just a web page that looks like one. Let's turn it into a real app on the Home Screen. First, we'll tap on the box with an arrow icon at the bottom of the screen.

	[[File:TT01.13.png]]<br>		[[File:TT01.13.png]]<br>
			<br><br>

	5. Choose "Add To Home Screen", then click on Add.		5. Choose "Add To Home Screen", then click on Add.

	[[File:TT01.14.png]]<br>		[[File:TT01.14.png]]<br>
			<br><br>

	6. We're done. Let's have a look. Here is the Home Screen:		6. We're done. Let's have a look. Here is the Home Screen:

	[[File:TT01.15.png]]<br>		[[File:TT01.15.png]]<br>
			<br><br>

	7. Click on the HelloWorld icon, and this splash screen shows up:		7. Click on the HelloWorld icon, and this splash screen shows up:

	[[File:TT01.16.png]]<br>		[[File:TT01.16.png]]<br>
			<br><br>

	8. Now the app itself is showing. Notice the top Safari bar is not there? This app now looks and runs like a normal phone app. It will even run if the device is offline.		8. Now the app itself is showing. Notice the top Safari bar is not there? This app now looks and runs like a normal phone app. It will even run if the device is offline.

Line 89:		Line 118:

	[[File:TT01.18.png\|240px\|320px]]<br>		[[File:TT01.18.png\|240px\|320px]]<br>
			<br><br>

	2. Tap on the menu button to bring up your choices. Click on Add to homescreen.		2. Tap on the menu button to bring up your choices. Click on Add to homescreen.

	[[File:TT01.19.png\|240px\|320px]]<br>		[[File:TT01.19.png\|240px\|320px]]<br>
			<br><br>

	3. Click on Add to add it to your Home Screen.		3. Click on Add to add it to your Home Screen.

	[[File:TT01.20.png\|240px\|320px]]<br>		[[File:TT01.20.png\|240px\|320px]]<br>
			<br><br>

	4. Here is how it looks on the homescreen.		4. Here is how it looks on the homescreen.

	[[File:TT01.21.png\|240px\|320px]]<br>		[[File:TT01.21.png\|240px\|320px]]<br>
			<br><br>

	5. Here is how it looks running on the homescreen.		5. Here is how it looks running on the homescreen.

	[[File:TT01.22.png\|240px\|320px]]<br>		[[File:TT01.22.png\|240px\|320px]]<br>

Ghenne: /* Startup */

2014-03-29T20:22:27Z

Startup

← Older revision		Revision as of 20:22, 29 March 2014
Line 42:		Line 42:
	6. In the Properties Editor, choose onclick. It will show a popup with 'Button1_onclick()'. Select that, and you will go into the Code Window:		6. In the Properties Editor, choose onclick. It will show a popup with 'Button1_onclick()'. Select that, and you will go into the Code Window:

	[[File:TT01.07.~~JPG~~]]<br>		[[File:TT01.07js.png]]<br>
	7. Add the following code into the function:		7. Add the following code into the function:
	alert( "Hello World");		alert( "Hello World");

Ghenne at 20:20, 29 March 2014

2014-03-29T20:20:38Z

← Older revision		Revision as of 20:20, 29 March 2014
Line 50:		Line 50:
	NSB.MsgBox("Hello World");		NSB.MsgBox("Hello World");

	[[File:TT01.08.~~JPG~~]]<br>		[[File:TT01.08js.png]]<br>
	8. Now, run it again and click on "Click Me!"		8. Now, run it again and click on "Click Me!"

Ghenne at 20:15, 29 March 2014

2014-03-29T20:15:10Z

← Older revision		Revision as of 20:15, 29 March 2014
Line 13:		Line 13:
	1. Start AppStudio from the Start menu. Here is what you will see:		1. Start AppStudio from the Start menu. Here is what you will see:

	[[File:TT01.01.~~JPG~~]]<br>		[[File:TT01.01.png]]<br>
	# ~~ToolBar~~: ~~A list of common functions, made quickly accessible~~. If you ~~are not sure what one is, hover over~~ it ~~with~~ your ~~cursor~~ and ~~its description will appear~~.		# Deploy Bar: Starts your app. The picker lets you choose where you want it run.
	# ToolBox: A list of ~~objects~~ you can put on a form.		# Tab Bar: Use this to switch between your open designs and code.
			# ToolBox: A list of controls you can put on a form.
			# Editor Bar: Choose Design Screen or Code Window, also Find and go to a function.
	# Design Screen: Here is where you layout the objects on the form.		# Design Screen: Here is where you layout the objects on the form.
	# Project Explorer: See the structure of your code. Use this to select objects and to bring up the Properties for them.		# Project Explorer: See the structure of your code. Use this to select objects and to bring up the Properties for them.
Line 25:		Line 27:
	2. Create a new project. Select menu item File...New. Choose JavaScript as your programming language, the default iPhone/Nexus size and use HelloWorld as your new File name.		2. Create a new project. Select menu item File...New. Choose JavaScript as your programming language, the default iPhone/Nexus size and use HelloWorld as your new File name.

	[[File:~~TT-JS-01~~.~~gif]]<br>~~		[[File:TT01.02.png]]<br>
	~~[[File:TT-JS-~~02.~~gif~~]]<br>
	It's best to create your project in a new folder.		It's best to create your project in a new folder.

Line 41:		Line 42:
	6. In the Properties Editor, choose onclick. It will show a popup with 'Button1_onclick()'. Select that, and you will go into the Code Window:		6. In the Properties Editor, choose onclick. It will show a popup with 'Button1_onclick()'. Select that, and you will go into the Code Window:

	[[File:~~TT-JS-03~~.~~gif~~]]<br>		[[File:TT01.07.JPG]]<br>
	7. Add the following code into the function:		7. Add the following code into the function:
	alert("Hello World!");		alert( "Hello World");

			or, for a better appearance,

	~~[[File:TT-JS-04~~.~~gif]]<br>~~		NSB.MsgBox("Hello World");
	~~8. Now, run it again and click on~~ "~~Click Me!~~" ~~(To get a prettier MsgBox, use NSB.MsgBox instead.~~)

	[[File:~~TT-JS-06~~.~~gif~~]]<br>		[[File:TT01.08.JPG]]<br>
	[[File:~~TT-JS-07~~.~~gif~~]]<br>		8. Now, run it again and click on "Click Me!"

			[[File:TT01.09.JPG]]<br>

	=== Run on an iPhone ===		=== Run on an iPhone ===

	1. Good work! Now let's run it on a phone. From the ~~Run menu~~, choose Deploy. The IDE will upload your complete app to a webserver called nsbapp.com. We have set this one up for ~~NS Basic~~ users for testing. (We're using an iPhone here. We'll do it for Android next.)		1. Good work! Now let's run it on a phone. From the Deploy picker, choose "Deploy to nsbapp.com server". The IDE will upload your complete app to a webserver called nsbapp.com. We have set this one up for AppStudio users for testing. (We're using an iPhone here. We'll do it for Android next.)

	[[File:~~TT-JS-08~~.~~gif~~]]<br>		[[File:TT01.10.JPG]]<br>
	2. Now, get your iPhone and go into Safari. Enter in the URL from the last step.		2. Now, get your iPhone and go into Safari. Enter in the URL from the last step.

	[[File:TT01.11.~~JPG~~]]<br>		[[File:TT01.11.png]]<br>
	3. Hit Go. The page will appear. You can tap on "Click Me!", and you'll see: a working app in AppStudio.		3. Hit Go. The page will appear. You can tap on "Click Me!", and you'll see: a working app in AppStudio.

	[[File:TT01.12.~~JPG~~]]<br>		[[File:TT01.12.png]]<br>
	4. But this isn't a real app: it's just a web page that looks like one. Let's turn it into a real app on the Home Screen. First, we'll tap on the arrow icon at the bottom of the screen.		4. But this isn't a real app: it's just a web page that looks like one. Let's turn it into a real app on the Home Screen. First, we'll tap on the box with an arrow icon at the bottom of the screen.

	[[File:TT01.13.~~JPG~~]]<br>		[[File:TT01.13.png]]<br>
	5. Choose "Add To Home Screen", then click on Add.		5. Choose "Add To Home Screen", then click on Add.

	[[File:TT01.14.~~JPG~~]]<br>		[[File:TT01.14.png]]<br>
	6. We're done. Let's have a look. Here is the Home Screen:		6. We're done. Let's have a look. Here is the Home Screen:

	[[File:TT01.15.~~JPG~~]]<br>		[[File:TT01.15.png]]<br>
	7. Click on the HelloWorld icon, and this splash screen shows up:		7. Click on the HelloWorld icon, and this splash screen shows up:

	[[File:TT01.16.~~JPG~~]]<br>		[[File:TT01.16.png]]<br>
	8. Now the app itself is showing. Notice the top Safari bar is not there? This app now looks and runs like a normal phone app. It will even run if the device is offline.		8. Now the app itself is showing. Notice the top Safari bar is not there? This app now looks and runs like a normal phone app. It will even run if the device is offline.

	[[File:TT01.17.~~JPG~~]]<br>		[[File:TT01.17.png]]<br>

	=== Run on an Android device ===		=== Run on an Android device ===
Line 84:		Line 88:
	1. Here is how our app looks.		1. Here is how our app looks.

	[[File:TT01.18.~~JPG~~\|240px\|320px]]<br>		[[File:TT01.18.png\|240px\|320px]]<br>
	2. Tap on the menu button to bring up your choices~~. Click on Bookmarks.~~		2. Tap on the menu button to bring up your choices. Click on Add to homescreen.

	~~[[File:TT01.19.JPG\|240px\|320px]]<br>~~
	3. Click on Add to ~~add it to your bookmarks.~~

	~~[[File:TT01.20.JPG\|240px\|320px]]<br>~~
	~~4. Change the name if you need to, then tap on OK.~~

	~~[[File:TT01.21.JPG\|240px\|320px]]<br>~~
	~~5. Hit the Home key to get back to the Home Screen~~

	~~[[File:TT01.22.JPG\|240px\|320px]]<br>~~
	~~6. Hold your finger down on the Home Screen until this pops up. Select Shortcuts~~.

	[[File:TT01.23.~~JPG~~\|240px\|320px]]<br>		[[File:TT01.19.png\|240px\|320px]]<br>
	7. ~~Select Bookmark~~.		3. Click on Add to add it to your Home Screen.

	[[File:TT01.24.~~JPG~~\|240px\|320px]]<br>		[[File:TT01.20.png\|240px\|320px]]<br>
	8. ~~Select HelloWorld~~.		4. Here is how it looks on the homescreen.

	[[File:TT01.25.~~JPG~~\|240px\|320px]]<br>		[[File:TT01.21.png\|240px\|320px]]<br>
	9. ~~And here~~ is ~~our new Home Screen. The new app~~ on the ~~home screen will run whether the device is connected to the net or not~~.		5. Here is how it looks running on the homescreen.

	[[File:TT01.26.~~JPG~~\|240px\|320px]]<br>		[[File:TT01.22.png\|240px\|320px]]<br>

JwellsNB: JavaScript version of Simple Program

2013-07-07T05:46:25Z

JavaScript version of Simple Program

← Older revision		Revision as of 05:46, 7 July 2013
Line 41:		Line 41:
	6. In the Properties Editor, choose onclick. It will show a popup with 'Button1_onclick()'. Select that, and you will go into the Code Window:		6. In the Properties Editor, choose onclick. It will show a popup with 'Button1_onclick()'. Select that, and you will go into the Code Window:

	[[File:~~TT01~~.~~07.JPG~~]]<br>		[[File:TT-JS-03.gif]]<br>
	7. Add the following code into the function:		7. Add the following code into the function:
	~~Msgbox~~ "Hello World!"		alert("Hello World!");

	[[File:~~TT01~~.~~08.JPG~~]]<br>		[[File:TT-JS-04.gif]]<br>
	8. Now, run it again and click on "Click Me!" (To get a prettier MsgBox, use NSB.MsgBox instead.)		8. Now, run it again and click on "Click Me!" (To get a prettier MsgBox, use NSB.MsgBox instead.)

	[[File:~~TT01~~.09.~~JPG~~]]<br>		[[File:TT-JS-06.gif]]<br>
			[[File:TT-JS-07.gif]]<br>

	=== Run on an iPhone ===		=== Run on an iPhone ===
Line 54:		Line 55:
	1. Good work! Now let's run it on a phone. From the Run menu, choose Deploy. The IDE will upload your complete app to a webserver called nsbapp.com. We have set this one up for NS Basic users for testing. (We're using an iPhone here. We'll do it for Android next.)		1. Good work! Now let's run it on a phone. From the Run menu, choose Deploy. The IDE will upload your complete app to a webserver called nsbapp.com. We have set this one up for NS Basic users for testing. (We're using an iPhone here. We'll do it for Android next.)

	[[File:~~TT01~~.~~10.JPG~~]]<br>		[[File:TT-JS-08.gif]]<br>
	2. Now, get your iPhone and go into Safari. Enter in the URL from the last step.		2. Now, get your iPhone and go into Safari. Enter in the URL from the last step.

JwellsNB at 05:41, 7 July 2013

2013-07-07T05:41:15Z

← Older revision		Revision as of 05:41, 7 July 2013
Line 25:		Line 25:
	2. Create a new project. Select menu item File...New. Choose JavaScript as your programming language, the default iPhone/Nexus size and use HelloWorld as your new File name.		2. Create a new project. Select menu item File...New. Choose JavaScript as your programming language, the default iPhone/Nexus size and use HelloWorld as your new File name.

	[[File:TT-JS-01.~~GIF~~]]<br>		[[File:TT-JS-01.gif]]<br>
	[[File:TT-JS-02.~~GIF~~]]<br>		[[File:TT-JS-02.gif]]<br>
	It's best to create your project in a new folder.		It's best to create your project in a new folder.

JwellsNB at 05:40, 7 July 2013

2013-07-07T05:40:31Z

← Older revision		Revision as of 05:40, 7 July 2013
Line 25:		Line 25:
	2. Create a new project. Select menu item File...New. Choose JavaScript as your programming language, the default iPhone/Nexus size and use HelloWorld as your new File name.		2. Create a new project. Select menu item File...New. Choose JavaScript as your programming language, the default iPhone/Nexus size and use HelloWorld as your new File name.

	[[File:TT-JS-01.~~JPG~~]]<br>		[[File:TT-JS-01.GIF]]<br>
	[[File:TT-JS-02.~~JPG~~]]<br>		[[File:TT-JS-02.GIF]]<br>
	It's best to create your project in a new folder.		It's best to create your project in a new folder.