AppInventor: Input text - Revision history

Onnowpurbo: /* Tampilan Designer */

2015-10-10T13:15:35Z

Tampilan Designer

← Older revision		Revision as of 13:15, 10 October 2015
Line 26:		Line 26:
	[[Image:MultilineProperties.png\|center\|200px\|thumb]]		[[Image:MultilineProperties.png\|center\|200px\|thumb]]


	==Tampilan Blocks==		==Tampilan Blocks==

Onnowpurbo: /* Blocks View */

2015-10-10T13:00:35Z

Blocks View

← Older revision		Revision as of 13:00, 10 October 2015
Line 27:		Line 27:


	==Blocks ~~View~~==		==Tampilan Blocks==

	~~After all that description, how do we implement this feature? With one~~ block ~~to hide the keyboard after~~ data entry!		Implentasi dilakukan dengan satu block untuk Hide Keyword setelah data entry.

	[[Image:MultilineBlocks.png\|center\|200px\|thumb]]		[[Image:MultilineBlocks.png\|center\|200px\|thumb]]

	~~The trick for the~~ multiline input box ~~is to~~ set ~~the~~ multiline property to true~~, and then add another control to indicate when~~ data entry ~~is finished~~. ~~Here~~, ~~we use a Button and~~ handle ~~the~~ click event ~~by calling the~~ HideKeyboard method of TextBox1.		Trik multiline input box adalah men-set multiline property > true.
			Tambahkan kontrol tambahan untuk memberitahukan saat data entry selesai.
			Disini, kita menggunakan Tombol dan handle click event dengan memanggil HideKeyboard method dari TextBox1.

	~~To obtain the entered~~ text, ~~refer to the~~ Text property of TextBox1:		Untuk memperoleh text yang dimasukan, dapat mengacu ke Text property dari TextBox1:

	[[Image:Mutliline-text.png\|center\|200px\|thumb]]		[[Image:Mutliline-text.png\|center\|200px\|thumb]]


	==Referensi==		==Referensi==

Onnowpurbo at 12:55, 10 October 2015

2015-10-10T12:55:32Z

← Older revision		Revision as of 12:55, 10 October 2015
Line 1:		Line 1:
	Sumber: http://appinventor.pevest.com/?p=674		Sumber: http://appinventor.pevest.com/?p=674

	~~The App Inventor~~ TextBox ~~control supports both~~ single line ~~and~~ multi-line input~~; the~~ TextBox control default to single line mode ~~– and you may not have realized it can support multiple line text input too!~~		AppInventor TextBox menudung single line dan multi-line input.
			TextBox control default adalah single line mode.

	In single line input, text is entered using the on screen keyboard, followed by the Enter key (or you can use an external Bluetooth keyboard). Once the enter key is pressed, the on screen keyboard goes away.		==Tampilan App==

	~~Multi-line mode is enabled by checking the~~ Multiline checkbox item in the control properties. However, the Enter key is used to enter multiple text lines – that means you need to complete the multiline text entry by adding another control, such as a Done button.		Multiline TextBox seperti single line text box.

	~~The multi-line control is easy to use – and needs just a single line of blocks code to implement! Describing the operation of the control takes more time!~~

	~~==App View==~~

	~~The multiline~~ TextBox ~~looks like a~~ single line text box~~, as shown here, after entering “first line” into the TextBox control as the app is running~~.

	[[Image:Screenshot 2015-04-08-18-03-40-576x1024.png\|center\|200px\|thumb]]		[[Image:Screenshot 2015-04-08-18-03-40-576x1024.png\|center\|200px\|thumb]]


	~~To enter a second~~ (~~or third…~~) ~~line~~, tap ~~the green/blue~~ Enter ~~button at the lower right of the~~ onscreen keyboard. ~~Here is the result after typing three lines of text~~:		Untuk memasukan line ke dua (atau ke tiga), tap tombol Enter di sebelah kanan bawah dari onscreen keyboard. Hasilnya:

	[[Image:Screenshot 2015-04-08-18-03-57-576x1024.png\|center\|200px\|thumb]]		[[Image:Screenshot 2015-04-08-18-03-57-576x1024.png\|center\|200px\|thumb]]


	==~~The~~ Designer ~~View~~==		==Tampilan Designer==

	To set up a multiline TextBox, drag the TextBox control from the palette to the Canvas. Add a Button control and change the text on the button to say “Done:.		To set up a multiline TextBox, drag the TextBox control from the palette to the Canvas. Add a Button control and change the text on the button to say “Done:.

Onnowpurbo: /* Referensi */

2015-10-06T03:18:17Z

Referensi

← Older revision		Revision as of 03:18, 6 October 2015
Line 48:		Line 48:

	* http://appinventor.pevest.com/?p=674		* http://appinventor.pevest.com/?p=674
			* https://sites.google.com/site/blocks123/playingwithtext
	* http://stackoverflow.com/questions/29570154/how-to-validate-input-txt-in-app-inventor-2		* http://stackoverflow.com/questions/29570154/how-to-validate-input-txt-in-app-inventor-2

Onnowpurbo: /* Referensi */

2015-10-06T03:08:48Z

Referensi

← Older revision		Revision as of 03:08, 6 October 2015
Line 48:		Line 48:

	* http://appinventor.pevest.com/?p=674		* http://appinventor.pevest.com/?p=674
			* http://stackoverflow.com/questions/29570154/how-to-validate-input-txt-in-app-inventor-2

Onnowpurbo at 02:44, 6 October 2015

2015-10-06T02:44:32Z

← Older revision		Revision as of 02:44, 6 October 2015
Line 8:		Line 8:

	The multi-line control is easy to use – and needs just a single line of blocks code to implement! Describing the operation of the control takes more time!		The multi-line control is easy to use – and needs just a single line of blocks code to implement! Describing the operation of the control takes more time!
	App View
			==App View==

	The multiline TextBox looks like a single line text box, as shown here, after entering “first line” into the TextBox control as the app is running.		The multiline TextBox looks like a single line text box, as shown here, after entering “first line” into the TextBox control as the app is running.

	~~Screenshot_2015~~-04-08-18-03-40		[[Image:Screenshot 2015-04-08-18-03-40-576x1024.png\|center\|200px\|thumb]]


	To enter a second (or third…) line, tap the green/blue Enter button at the lower right of the onscreen keyboard. Here is the result after typing three lines of text:		To enter a second (or third…) line, tap the green/blue Enter button at the lower right of the onscreen keyboard. Here is the result after typing three lines of text:

	~~Screenshot_2015~~-04-08-18-03-57		[[Image:Screenshot 2015-04-08-18-03-57-576x1024.png\|center\|200px\|thumb]]

	The Designer View
			==The Designer View==

	To set up a multiline TextBox, drag the TextBox control from the palette to the Canvas. Add a Button control and change the text on the button to say “Done:.		To set up a multiline TextBox, drag the TextBox control from the palette to the Canvas. Add a Button control and change the text on the button to say “Done:.

	MultilineDesigner		[[Image:MultilineDesigner.png\|center\|200px\|thumb]]



	Click the mouse (or select) the TextBox control and then refer to the control’s properties on the right side of the Designer view. In the Properties list, scan down to the MultiLine item and check the checkbox.		Click the mouse (or select) the TextBox control and then refer to the control’s properties on the right side of the Designer view. In the Properties list, scan down to the MultiLine item and check the checkbox.

	MultilineProperties		[[Image:MultilineProperties.png\|center\|200px\|thumb]]


	Blocks View		==Blocks View==

	After all that description, how do we implement this feature? With one block to hide the keyboard after data entry!		After all that description, how do we implement this feature? With one block to hide the keyboard after data entry!

	MultilineBlocks		[[Image:MultilineBlocks.png\|center\|200px\|thumb]]

	The trick for the multiline input box is to set the multiline property to true, and then add another control to indicate when data entry is finished. Here, we use a Button and handle the click event by calling the HideKeyboard method of TextBox1.		The trick for the multiline input box is to set the multiline property to true, and then add another control to indicate when data entry is finished. Here, we use a Button and handle the click event by calling the HideKeyboard method of TextBox1.
Line 41:		Line 42:
	To obtain the entered text, refer to the Text property of TextBox1:		To obtain the entered text, refer to the Text property of TextBox1:

	Mutliline-text		[[Image:Mutliline-text.png\|center\|200px\|thumb]]

	~~Easy, huh?~~

	~~Please Share on Social Media~~

	~~Please click on the buttons below this post to share with your friends on Facebook or other social media~~.

	~~If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!~~

Onnowpurbo at 02:36, 6 October 2015

2015-10-06T02:36:22Z

← Older revision		Revision as of 02:36, 6 October 2015
Line 1:		Line 1:
	Sumber: http://appinventor.pevest.com/?p=674		Sumber: http://appinventor.pevest.com/?p=674

			The App Inventor TextBox control supports both single line and multi-line input; the TextBox control default to single line mode – and you may not have realized it can support multiple line text input too!

			In single line input, text is entered using the on screen keyboard, followed by the Enter key (or you can use an external Bluetooth keyboard). Once the enter key is pressed, the on screen keyboard goes away.

			Multi-line mode is enabled by checking the Multiline checkbox item in the control properties. However, the Enter key is used to enter multiple text lines – that means you need to complete the multiline text entry by adding another control, such as a Done button.

			The multi-line control is easy to use – and needs just a single line of blocks code to implement! Describing the operation of the control takes more time!
			App View

			The multiline TextBox looks like a single line text box, as shown here, after entering “first line” into the TextBox control as the app is running.

			Screenshot_2015-04-08-18-03-40

			To enter a second (or third…) line, tap the green/blue Enter button at the lower right of the onscreen keyboard. Here is the result after typing three lines of text:

			Screenshot_2015-04-08-18-03-57

			The Designer View

			To set up a multiline TextBox, drag the TextBox control from the palette to the Canvas. Add a Button control and change the text on the button to say “Done:.

			MultilineDesigner



			Click the mouse (or select) the TextBox control and then refer to the control’s properties on the right side of the Designer view. In the Properties list, scan down to the MultiLine item and check the checkbox.

			MultilineProperties


			Blocks View

			After all that description, how do we implement this feature? With one block to hide the keyboard after data entry!

			MultilineBlocks

			The trick for the multiline input box is to set the multiline property to true, and then add another control to indicate when data entry is finished. Here, we use a Button and handle the click event by calling the HideKeyboard method of TextBox1.

			To obtain the entered text, refer to the Text property of TextBox1:

			Mutliline-text

			Easy, huh?

			Please Share on Social Media

			Please click on the buttons below this post to share with your friends on Facebook or other social media.

			If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!

Onnowpurbo: New page: Sumber: http://appinventor.pevest.com/?p=674 ==Referensi== * http://appinventor.pevest.com/?p=674

2015-10-06T02:35:11Z

New page: Sumber: http://appinventor.pevest.com/?p=674 ==Referensi== * http://appinventor.pevest.com/?p=674

New page

Sumber: http://appinventor.pevest.com/?p=674

==Referensi==

* http://appinventor.pevest.com/?p=674