You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2019/12/26 15:57:21 UTC

[royale-docs] branch master updated: data-binding code highlight need to use "mxml" and "as3" for better highlight

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 b1f10ba  data-binding code highlight need to use "mxml" and "as3" for better highlight
b1f10ba is described below

commit b1f10baeb3ecf63a3682c7b32210aeaa9e774bdc
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Dec 26 16:57:11 2019 +0100

    data-binding code highlight need to use "mxml" and "as3" for better highlight
---
 features/data-binding.md | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/features/data-binding.md b/features/data-binding.md
index c7ee9e0..acec058 100644
--- a/features/data-binding.md
+++ b/features/data-binding.md
@@ -33,11 +33,6 @@ There are several ways to deploy data binding:
 * [Using data binding in MXML](features/data-binding.html#mxml)
 * [Using data binding in ActionScript](features/data-binding.html#actionscript)
 
-
-
-
-
-
 ## Using curly braces ({}) {#curly-braces}
 
 You can bind the value of a property in the user interface to that value of another property very simply. One of the TextInput examples in [Tour de Jewel](https://royale.apache.org/tourdejewel){:target='_blank'} uses data binding twice:
@@ -45,14 +40,16 @@ You can bind the value of a property in the user interface to that value of anot
 If you clear the existing text in the first text field in the example, then type in a string, what you type in appears in the second and fourth text fields, as you type it.
 
 The **source property** is the text property of a TextInput control. The key part of its code is 
-```
+
+```mxml
 <j:TextInput text="A TextInput" change="textInputChange(event)"/>
 ```
+
 When you first open the example, the control displays "A Text Input".
 
 The **destination property** is the text property of two other TextInput controls. The ID for the first one is "textToChange", and its code looks like this:
 
-```
+```mxml
 <j:TextInput id="textToChange">
   <j:beads>
     <j:TextPrompt prompt="With prompt..."/>
@@ -62,7 +59,7 @@ The **destination property** is the text property of two other TextInput control
  
 The second destination shows a different way to bind properties. This TextInput control is disabled, but the value of its text property is bound to the "textToChange" text property value:
  
-```
+```mxml
 <j:TextInput text="{textToChange.text}">
   <j:beads>
     <j:TextPrompt prompt="Disabled with prompt..."/>
@@ -71,18 +68,19 @@ The second destination shows a different way to bind properties. This TextInput
 </j:TextInput>
 ```
  
- This second destination's value won't change until the first one's does.
+This second destination's value won't change until the first one's does.
 
 The **triggering event** is any change to the text property of the first control: `change="textInputChange(event)"`. 
 
 When there's a change, the control sends an event to its change handler, _textInputChange()_, the **function** that carries out the changes. Its code looks like this:
 
-```
+```as3
 private function textInputChange(event:Event):void
   {
     textToChange.text = event.target.text;
   }
 ```
+
 _more to come!_
 
 ## Using data binding in MXML {#mxml}