This is an automated email from the ASF dual-hosted git repository.
andreww pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-docs.git
The following commit(s) were added to refs/heads/develop by this push:
new 179203c Update view.md
179203c is described below
commit 179203cb487f6446650aa7c361d0b01663ecb4ff
Author: Andrew Wetmore <[email protected]>
AuthorDate: Thu Feb 1 16:57:07 2018 -0400
Update view.md
Some text changes, and I added a link to the forthcoming page on data
binding.
---
create-an-application/application-tutorial/view.md | 26 +++++++++++++---------
1 file changed, 16 insertions(+), 10 deletions(-)
diff --git a/create-an-application/application-tutorial/view.md
b/create-an-application/application-tutorial/view.md
index c87d992..4893e6e 100644
--- a/create-an-application/application-tutorial/view.md
+++ b/create-an-application/application-tutorial/view.md
@@ -20,9 +20,9 @@ title: The view
# The view
-In an MVC application the View contains the user interface elements that
display data and accept user input. For sure, we want a way to display the
list of commits and also some useful information about those commits. In
Royale a popular way to do that is with a DataGrid.
+In an MVC application the View contains the user interface elements that
display data and accept user input. We want a way to display the list of
commits and also some useful information about those commits. In Royale a
popular way to do that is with a DataGrid.
-The main or initial view of an application is assigned as the "initialView"
property of the application. We want our user interface elements to appear
vertically so we will use VView as the view. So, we add:
+The main or initial view of an application is identified as its "initialView"
property. We want our user interface elements to appear vertically so we use
VView as the view:
```XML
<js:initialView>
@@ -30,14 +30,14 @@ The main or initial view of an application is assigned as
the "initialView" prop
</js:VView>
</js:initialView>
```
-Then inside the VView tag we add the DataGrid
+Inside the VView tag we add the DataGrid
```XML
<js:DataGrid id="dg">
</js:DataGrid>
```
-We want to display the date of the commit, who made the commit, and the commit
message each in thir own column on each row of the DataGrid. So inside the
DataGrid, we add:
+We want to display the date of the commit, who made the commit, and the commit
message, each in thir own column on each row of the DataGrid. So inside the
DataGrid, we add:
```XML
<js:columns>
@@ -53,21 +53,27 @@ Oh wait, we should have a label that displays the project
name above the DataGri
<js:Label text="{projectName} Commits Log"/>
```
-Notice how the text of the label is referencing the projectName variable in
the Model by wrapping the variable name in curly braces "{}". In Royale, this
is known as DataBinding. When the compiler sees curly braces in MXML attribute
values, it generates code that sets the destination property (in this case, the
Label's "text" property) to the value of the expression in the curly braces and
also adds code that detects changes to that property and updates the
destination property if it c [...]
+Notice how the text of the label uses the projectName variable in the Model by
wrapping the variable name in curly braces "{}". In Royale, this is known as
Data Binding. When the compiler sees curly braces in MXML attribute values, it
generates code that sets the destination property (in this case, the Label's
"text" property) to the value of the expression in the curly braces and also
adds code that detects changes to that property and updates the destination
property if the source val [...]
```ActionScript
myLabel.text = projectName;
```
-And we'd also have to write change detection code if the value could change at
runtime, which it doesn't in this case. To read more about DataBinding see
this [section].
+And we'd also have to write change detection code if the value could change at
runtime (which it doesn't in this case).
+
+See more about what this powerful feature can do for you on this page: [Data
binding](data-driven/data-binding.html).
Also, a commit message might be too long to read in a row of a DataGrid so we
will add a place to display the longer message of a selected commit.
<js:MultilineLabel text="{commits[dg.selectedIndex].message}" />
-Notice how with DataBinding, we've written very little if any "code" to
connect the DataGrid to the MultilineLabel.
+Notice how with data binding, we've written very little "code" to connect the
DataGrid to the MultilineLabel.
+
+We could use data binding to connect the commits array to the DataGrid, but it
turns out the commits array is initialized to an empty array at startup and the
commits variable is never assigned a different array so it never changes its
value. Only the contents of the thing it references change. So data binding
only detects changes in the expression, not changes to internal things
referenced by the expression.
+
+It is possible to create something other than an Array that will dispatch
change events so data binding will react, but due to the way the commits array
is populated, that might result in updating the view for every commit, which
isn't necessary (it might make a cool visual effect as rows appear, though).
There are many other ways to hook up the commits array to the DataGrid, but for
this case, we will listen for a dataReady event from the data model and assign
the commits array then.
-We could use DataBinding to connect the commits array to the DataGrid, but it
turns out the commits array is initialized to an empty array at startup and the
commits variable is never assigned a different array so it never changes its
value, only the contents of the thing it references change. So DataBinding
only detects changes in the expression, not changes to internal things
referenced by the expression. Now it is possible to create something other
than an Array that will dispatch c [...]
+In the script block we add a handler for the dataReady event.
```ActionScript
import org.apache.royale.collections.ArrayList;
@@ -78,13 +84,13 @@ private function dataReadyHandler(event:Event):void
}
```
-In the initialize handler, we add a listen for the dataReady event:
+In the initialize handler, we add a listener for the dataReady event:
```ActionScript
addEventListener('dataReady', dataReadyHandler);
```
-OK, so we've written the Model and now the View. On to the 'C' in MVC, the
Controller.
+OK, so we've written the Model and now the View. On to the 'C' in MVC, the
Controller.
{:align="center"}
[Previous Page](create-an-application/application-tutorial/data.html) \| [Next
Page](create-an-application/application-tutorial/controller.html)
--
To stop receiving notification emails like this one, please contact
[email protected].
