[royale-docs] branch master updated: jewel-textinput: half docs and some corrections to button

[ca...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git


The following commit(s) were added to refs/heads/master by this push:
     new 906c1d6  jewel-textinput: half docs and some corrections to button
906c1d6 is described below

commit 906c1d6f04995475d1c2f1ff3e8d3690459926fb
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Aug 23 13:00:22 2019 +0200

    jewel-textinput: half docs and some corrections to button
---
 component-sets/jewel/jewel-button.md    |  8 ++-
 component-sets/jewel/jewel-textinput.md | 95 ++++++++++++++++++++++++++++++++-
 2 files changed, 99 insertions(+), 4 deletions(-)

diff --git a/component-sets/jewel/jewel-button.md b/component-sets/jewel/jewel-button.md
index afd3e31..d88bdf6 100644
--- a/component-sets/jewel/jewel-button.md
+++ b/component-sets/jewel/jewel-button.md
@@ -54,10 +54,13 @@ In __MXML__ declare a `Button` with a default look like this:
 In __ActionScript__ we can do the same in the following way: 
 
 ```as3
-var b:Button = new Button();
-b.text = "Button";
+var button:Button = new Button();
+button.text = "Button";
+parent.addElement(button);
 ```
 
+where `parent` is the container where the control will be added.
+
 Here is an example of the default button:
 
 <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
@@ -113,6 +116,7 @@ In __ActionScript__ we can add an event handler this way:
 var b:Button = new Button();
 b.text = "Button";
 b.addEventListener('click', clickHandler);
+parent.addElement(button);
 ```
 
 ## Relevant Beads
diff --git a/component-sets/jewel/jewel-textinput.md b/component-sets/jewel/jewel-textinput.md
index bacb68f..f852ff0 100644
--- a/component-sets/jewel/jewel-textinput.md
+++ b/component-sets/jewel/jewel-textinput.md
@@ -16,10 +16,101 @@
 
 layout: docpage
 title: Jewel TextInput
+description: The Jewel TextInput is a control for single-line text field
+
 ---
 
 # Jewel TextInput
 
-subtitle
 
-text
\ No newline at end of file
+## Reference
+
+Available since version __0.9.4__.
+
+| Class                 	    | Extends                           |
+|------------------------------	|----------------------------------	|
+| [org.apache.royale.jewel.TextInput](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/TextInput){:target='_blank'} | [org.apache.royale.jewel.supportClasses.textinput.TextInputBase](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.textinput/TextInputBase){:target='_blank'} |
+
+<sup>_Note: This component is currently only available for JavaScript._</sup>
+
+## Overview
+
+The Jewel TextInput implements the jewel control for single-line text field. It dispatches a change event when the user input text.
+
+> For multi line text input control see [TextArea](component-sets/jewel/jewel-textarea.html)
+
+## Example of use
+
+In __MXML__ declare a `TextInput` like this:
+
+```mxml
+<j:TextInput/>
+```
+
+In __ActionScript__ we can do the same in the following way: 
+
+```as3
+var textInput:TextInput = new TextInput();
+parent.addElement(textInput);
+```
+
+where `parent` is the container where the control will be added.
+
+Here is an example of the default button:
+
+<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
+width="100%" height="300" 
+src="assets/jewel/jewel_textinput/index.html"></iframe>
+
+[code here](https://github.com/apache/royale-docs/blob/master/assets/jewel/jewel_textinput/jewel_textinput.mxml){:target='_blank'}
+
+## Relevant Properties and Methods
+
+> Check the Reference of [org.apache.royale.jewel.TextInput](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/TextInput){:target='_blank'} for a more detailed list of properties and methods.
+
+### Properties
+
+| PROPERTY 	    | Type   	| Description                                                                   |
+|--------------	|----------	| -----------------------------------------------------------------------------	|
+| __text__    	| _String_ 	| The text inside the text field.                                            |
+| __html__  	| _String_ 	| The html text inside the text field.                                       |
+
+### Methods
+
+None.
+
+## Relevant Events
+
+The `TextInput` has _change_ event of type [org.apache.royale.events.Event](https://royale.apache.org/asdoc/index.html#!org.apache.royale.events/Event){:target='_blank'}. This event is dispatched when text in the control changes through user input. Notice that programatic changes will not trigger this event.
+
+You can attach callback listeners to the _change_ event in __MXML__ as follows:
+
+```mxml
+<j:TextInput change="changeHandler(event)"/>
+```
+
+the _change_ event will use the `changeHandler` callback function you provide in __ActionScript__:
+
+```mxml
+<fx:Script>
+    <![CDATA[      
+        private function changeHandler(event:Event):void {
+            trace("new text is: " + event.target.text);
+        }
+    ]]>
+</fx:Script>
+```
+
+When the user introduce text in the input field, the message _"new text is: "_ plus the text introduced will appear in the console log.
+
+In __ActionScript__ we can add an event handler this way: 
+
+```as3
+var textInput:TextInput = new TextInput();
+textInput.addEventListener('change', changeHandler);
+parent.addElement(textInput);
+```
+
+## Relevant Beads
+
+TODO
\ No newline at end of file