Author: jsundman
Date: 2007-11-09 13:28:49 -0800 (Fri, 09 Nov 2007)
New Revision: 7204
Added:
openlaszlo/trunk/docs/src/developers/data-patterns-and-best-practices.dbk
openlaszlo/trunk/docs/src/developers/data-replication.dbk
openlaszlo/trunk/docs/src/developers/programs/currenttime.jsp
openlaszlo/trunk/docs/src/developers/programs/data-attributepathbinding.lzx
openlaszlo/trunk/docs/src/developers/programs/data-buffer_dataset.lzx
openlaszlo/trunk/docs/src/developers/programs/data-concatenatingattributes.lzx
openlaszlo/trunk/docs/src/developers/programs/data-setattribute_p.lzx
openlaszlo/trunk/docs/src/developers/programs/data-xpathstring.lzx
openlaszlo/trunk/docs/src/developers/programs/data_polling.lzx
openlaszlo/trunk/docs/src/developers/programs/datapointermove.lzx
openlaszlo/trunk/docs/src/developers/programs/incremental_loading.lzx
openlaszlo/trunk/docs/src/developers/programs/lib/
openlaszlo/trunk/docs/src/developers/programs/lib/contact.lzx
openlaszlo/trunk/docs/src/developers/programs/shareddata/
openlaszlo/trunk/docs/src/developers/programs/shareddata/README.html
openlaszlo/trunk/docs/src/developers/programs/shareddata/contacts_full.xml
openlaszlo/trunk/docs/src/developers/programs/shareddata/contacts_large.xml
openlaszlo/trunk/docs/src/developers/programs/sharedresources/
openlaszlo/trunk/docs/src/developers/programs/sharedresources/README.html
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_alfred.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_beck.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_calder.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_carey.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_dan.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_daniele.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_gretchen.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_karen.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_laura.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_lisa.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_mark.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_nicole.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_peter.jpg
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_todd.jpg
Modified:
openlaszlo/trunk/docs/src/developers/data-overview.dbk
openlaszlo/trunk/docs/src/developers/data-structures.dbk
openlaszlo/trunk/docs/src/developers/dynamic-databinding.dbk
openlaszlo/trunk/docs/src/developers/index.dbk
openlaszlo/trunk/docs/src/developers/static-databinding.dbk
openlaszlo/trunk/docs/src/developers/two-way-databinding.dbk
Log:
checkpointing data docs and examples
Modified: openlaszlo/trunk/docs/src/developers/data-overview.dbk
===================================================================
--- openlaszlo/trunk/docs/src/developers/data-overview.dbk 2007-11-09
18:06:34 UTC (rev 7203)
+++ openlaszlo/trunk/docs/src/developers/data-overview.dbk 2007-11-09
21:28:49 UTC (rev 7204)
@@ -1,12 +1,10 @@
-<example role="live-example">
+<?ignor example role="live-example">
<title>Runtime constraintes with applyConstraint</title>
<programlisting language="lzx">
<textobject><textdata fileref="programs/constraints-$1.lzx"/></textobject>
</programlisting>
-</example>
+</example?>
-<para>
-</para>
<chapter id="data-overview">
<title>Introduction to Data and Data-Driven Applications</title>
@@ -14,6 +12,13 @@
Summary: In this chapter we introduce key concepts at a high level. There is
little code, but a fair amount of diagramware to illustrate databinding and
replication.
</para>
<para>
+ Databinding marries the content of an XML datastructure with the
OpenLaszlo objects (such as nodes, or views).
+
+ Allows separation of content from presentation
+ Datapaths are objects that connect views to data.
+ Attribute values update automatically when the data changes.
+</para>
+<para>
We give a conceptual overview of the logical differences between the DOM-based
and datapointer/datapath-based ways of manipulating data, with a preview of how
these approaches will be reconciled in later chapters.
</para>
<para>
Added: openlaszlo/trunk/docs/src/developers/data-patterns-and-best-practices.dbk
Property changes on:
openlaszlo/trunk/docs/src/developers/data-patterns-and-best-practices.dbk
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: eol-style
+ native
Name: svn:eol-style
+ native
Name: svn:eol-sytle
+ native
Added: openlaszlo/trunk/docs/src/developers/data-replication.dbk
Property changes on: openlaszlo/trunk/docs/src/developers/data-replication.dbk
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Modified: openlaszlo/trunk/docs/src/developers/data-structures.dbk
===================================================================
--- openlaszlo/trunk/docs/src/developers/data-structures.dbk 2007-11-09
18:06:34 UTC (rev 7203)
+++ openlaszlo/trunk/docs/src/developers/data-structures.dbk 2007-11-09
21:28:49 UTC (rev 7204)
@@ -3,7 +3,88 @@
<title>Data, XML, and XPath</title>
<!-- change link for language-preliminaries per LPP-4923, IORIO 17 oct 2007 -->
+<title>Introduction to Data and Data-Driven Applications</title>
<para>
+Summary: In this chapter we introduce key concepts at a high level. There is
little code, but a fair amount of diagramware to illustrate databinding and
replication.
+</para>
+<para>
+ Databinding marries the content of an XML datastructure with the
OpenLaszlo objects (such as nodes, or views).
+
+ Allows separation of content from presentation
+ Datapaths are objects that connect views to data.
+ Attribute values update automatically when the data changes.
+</para>
+<para>
+We give a conceptual overview of the logical differences between the DOM-based
and datapointer/datapath-based ways of manipulating data, with a preview of how
these approaches will be reconciled in later chapters.
+</para>
+<para>
+Datareplication is introduced, and the difference between implicit and
explicit replication.
+</para>
+<para>
+We then explain some useful design patterns involving datasets, both locally
on the client, and between client and server.
+</para>
+<para>
+Finally, we introduce the abstract concept of the dataprovider.
+</para>
+<para>
+Outline:
+
+Data
+-- XML
+<ul>
+ <li>Definition and specification</li>
+ <li>White space</li>
+ <li>Character sets</li>
+ <li>Namespaces</li>
+</ul>
+
+-- Xpath
+------Notation
+------Supported subset in LZX
+Databinding -- conceptual overview
+-- Datasets - in-memory representation of XML data
+----- The LzDataNode type
+----- The LzDataElement type
+----- The LzDataText type
+-- Updating views by data (data determines behaviour of LZX object)
+-- Updating data by object (object updates dataset)
+Databinding APIs
+-- Datapointer (tag) APIs
+-- DOM (prodedural) APIs
+Replication
+-- Explicit Replication with <replicator> tag
+---Implicit replication without <replicator> tag
+Client-Server Data patterns
+--- REST and HTTP
+----- Query types
+----- Request and response headers
+----- Query Paremeters
+--- Ajax and the HttpRequest() object
+----- This is "syntactic sugar"; same functionality as with datasets
+--- Master-Detail
+-- Reconciling Server and Client data models (updating databases on server)
+The dataprovider object
+</para>
+<para>
+ Any subclass of LzNode can be data-bound.
+ All data-bound objects have a datapath.
+ The XPath may be absolute or relative.
+ <view datapath="ds:/path/to/data/text()" />
+ Individual attributes of nodes can be data-bound.
+ Attributes must be settable.
+ The object must have a datapath.
+ You must use relative XPaths for the attribute bindings.
+ Multiple attributes of the same object can be databound to
different locations.
+ <view datapath="ds:/path/to/data"
+ x="$path{'@xposition'}" />
+ Datapaths cascade through the view hierarchy
+<view datapath="ds:/path/to/data">
+ <view name="unboundView">
+ <text datapath="text()" />
+ </view>
+</view>
+</para>
+<para>
The term <indexterm
significance="preferred"><primary>data</primary></indexterm><glossterm>data</glossterm>
refers to numbers, characters, or text
in a form that can be displayed or manipulated by
a Laszlo application. The specific form that data takes in a Laszlo
application
@@ -263,4 +344,4 @@
-<para/></section></section></chapter>
\ No newline at end of file
+<para/></section></section></chapter>
Modified: openlaszlo/trunk/docs/src/developers/dynamic-databinding.dbk
===================================================================
--- openlaszlo/trunk/docs/src/developers/dynamic-databinding.dbk
2007-11-09 18:06:34 UTC (rev 7203)
+++ openlaszlo/trunk/docs/src/developers/dynamic-databinding.dbk
2007-11-09 21:28:49 UTC (rev 7204)
@@ -1,12 +1,3 @@
-<example role="live-example">
- <title>Runtime constraintes with applyConstraint</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/constraints-$1.lzx"/></textobject>
- </programlisting>
-</example>
-<para>
-</para>
-
<chapter id="dynamic-databinding">
<title>Dynamic Databinding</title>
<para>
@@ -18,28 +9,38 @@
<para>
Introduction and Philosphy of the DOM APIs
-
+</para>
<section>
<title>The LzDataNode object</title>
<para>
-</para>
-- attributes
-- methods
+</para>
+
</section>
<section>
<title>The LzDataElement object</title>
<para>
-</para>
-- attributes
-- methods
+</para>
+
</section>
<section>
The LzDataText object
<para>
-</para>
-- attributes
-- methods
+</para>
+
</section>
-
+<?example role="live-example">
+ <title>Runtime constraintes with applyConstraint</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="programs/constraints-$1.lzx"/></textobject>
+ </programlisting>
+</example?>
+<para>
+</para>
</chapter>
Modified: openlaszlo/trunk/docs/src/developers/index.dbk
===================================================================
--- openlaszlo/trunk/docs/src/developers/index.dbk 2007-11-09 18:06:34 UTC
(rev 7203)
+++ openlaszlo/trunk/docs/src/developers/index.dbk 2007-11-09 21:28:49 UTC
(rev 7204)
@@ -77,6 +77,9 @@
<xi:include href="databinding.dbk"/>
<xi:include href="tutorials/data_app.dbk"/>
<xi:include href="static-databinding.dbk"/>
+ <xi:include href="dynamic-databinding.dbk"/>
+ <xi:include href="two-way-databinding.dbk"/>
+ <xi:include href="data-replication.dbk"/>
<xi:include href="data-patterns-and-best-practices.dbk"/>
<xi:include href="dataprovider.dbk"/>
</part>
Added: openlaszlo/trunk/docs/src/developers/programs/currenttime.jsp
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/currenttime.jsp
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Added:
openlaszlo/trunk/docs/src/developers/programs/data-attributepathbinding.lzx
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/data-attributepathbinding.lzx
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Added: openlaszlo/trunk/docs/src/developers/programs/data-buffer_dataset.lzx
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/data-buffer_dataset.lzx
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Added:
openlaszlo/trunk/docs/src/developers/programs/data-concatenatingattributes.lzx
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/data-concatenatingattributes.lzx
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Added: openlaszlo/trunk/docs/src/developers/programs/data-setattribute_p.lzx
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/data-setattribute_p.lzx
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Added: openlaszlo/trunk/docs/src/developers/programs/data-xpathstring.lzx
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/data-xpathstring.lzx
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Added: openlaszlo/trunk/docs/src/developers/programs/data_polling.lzx
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/data_polling.lzx
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Added: openlaszlo/trunk/docs/src/developers/programs/datapointermove.lzx
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/datapointermove.lzx
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Added: openlaszlo/trunk/docs/src/developers/programs/incremental_loading.lzx
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/incremental_loading.lzx
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Added: openlaszlo/trunk/docs/src/developers/programs/lib/contact.lzx
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/lib/contact.lzx
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Name: svn:eol-style
+ native
Added: openlaszlo/trunk/docs/src/developers/programs/shareddata/README.html
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/shareddata/README.html
___________________________________________________________________
Name: svn:mime-type
+ text/html
Name: svn:eol-style
+ native
Added:
openlaszlo/trunk/docs/src/developers/programs/shareddata/contacts_full.xml
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/shareddata/contacts_full.xml
___________________________________________________________________
Name: svn:mime-type
+ text/xml
Name: svn:eol-style
+ native
Added:
openlaszlo/trunk/docs/src/developers/programs/shareddata/contacts_large.xml
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/shareddata/contacts_large.xml
___________________________________________________________________
Name: svn:mime-type
+ text/xml
Name: svn:eol-style
+ native
Added: openlaszlo/trunk/docs/src/developers/programs/sharedresources/README.html
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/README.html
___________________________________________________________________
Name: svn:mime-type
+ text/html
Name: svn:eol-style
+ native
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_alfred.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_alfred.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_beck.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_beck.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_calder.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_calder.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_carey.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_carey.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_dan.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_dan.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_daniele.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_daniele.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_gretchen.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_gretchen.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_karen.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_karen.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_laura.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_laura.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_lisa.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_lisa.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_mark.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_mark.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_nicole.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_nicole.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_peter.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_peter.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Added:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_todd.jpg
Property changes on:
openlaszlo/trunk/docs/src/developers/programs/sharedresources/headshots/pic_todd.jpg
___________________________________________________________________
Name: svn:mime-type
+ image/jpeg
Modified: openlaszlo/trunk/docs/src/developers/static-databinding.dbk
===================================================================
--- openlaszlo/trunk/docs/src/developers/static-databinding.dbk 2007-11-09
18:06:34 UTC (rev 7203)
+++ openlaszlo/trunk/docs/src/developers/static-databinding.dbk 2007-11-09
21:28:49 UTC (rev 7204)
@@ -1,6 +1,7 @@
<chapter id="static-databinding">
<section><title>Static Databinding with tag APIs</title></section>
+
<para>
Summary: In this chapter we explain how to instantiate global and local
datasets, populate them with "canned" data or from a remote source, and bind
their contents to views using datapaths. Datapointers are explained as a way to
position a logical cursor in a dataset.
</para>
@@ -39,8 +40,121 @@
Binding data to objects
-- binding nodes using datapaths
-- binding attributes using $path
- ---Concatenating Attributes
- </section>
+
+
+<section><title>
+Data Binding and Attributes</title>
+
+This example shows how to set the datapath on an object (in this case, a
button) and then set the attributes within that object to access the data that
the object is bound to.
+
+When the user clicks the button, it sets the value of a text field to that
person's phone number in the database.
+
+The datapath on the button is bound to the first person in the address book:
+
+<button datapath="dset:/addressbook/contacts/person[1]" text="Set Last
Name">
+
+ Inside the button, the attribute called phonenumber has its value set to the
phone attribute of the person node that the button is data bound to:
+
+ <attribute name="phonenumber" value="$path{'@phone'}"/>
+
+ The onclick event handler accesses the first phone text object and sets its
text to the phonenumber attribute:
+
+ <handler name="onclick">
+parent.firstphone.setText(this.phonenumber);
+</handler>
+
+The image of the first person is retrieved and displayed using the ondata
event. Also the path of the file is written to the debugger.
+
+ Databind the myimage view to the first person in the address book:
+
+<view name="myimage" datapath="dset:/addressbook/contacts/person[1]">
+
+Inside the view, the value of the attribute called imagefile is set to be the
phone attribute of the person node that the button is data bound to:
+
+ <attribute name="imagefile" value="$path{'@thumbnail'}"/>
+
+The ondata event handler method sets the source for the view to the image that
has now finished loading. We trace out to the debug window the path to the
image:
+
+<handler name="ondata">
+var imagepath = "../sharedresources/headshots/" + this.imagefile;
+Debug.write(imagepath);
+this.setSource(imagepath);
+</handler>
+
+We can retrieve the image of the second person and display it by overwriting
the applyData() method (also writing the path of the file to the debugger).
+Here's how to databind the myimage2 view to the thumbnail attribute of the
second person in the address book:
+
+<view name="myimage2"
datapath="dset:/addressbook/contacts/person[2]/@thumbnail">
+
+Inside the view, we create an applyData() method. Inside the method, the
source is set for the view to the image that has now finished loading. We trace
out to the debug window the path to the image:
+
+<method name="applyData">
+var imagepath = "../sharedresources/headshots/" + this.data;
+Debug.write(imagepath);
+this.setSource(imagepath);
+</method>
+
+<example role="live-example">
+ <title>Binding to attributes</title>
+ <programlisting language="lzx">
+ <textobject><textdata
fileref="programs/data-attributepathbinding.lzx"/></textobject>
+ </programlisting>
+</example>
+
+</section>
+Concatenating Attributes
+
+This example shows how to concatenate two attribute values into the text value
of a text object. It concatenates the firstname and lastname attributes from
within the first person node and display them in a text object.
+
+
+Databind the view to the first person node in the address book:
+
+<view datapath="dset:/addressbook/contacts/person[1]">
+
+Inside the view, we create two attributes, firstname and lastname, and set
their values to their respective attributes within the xml data that this view
is now bound to:
+
+<attribute name="firstname" value="$path{'@firstname'}"/>
+<attribute name="lastname" value="$path{'@lastname'}"/>
+
+Set the text attribute of the text object inside the view to be the firstname
attribute value, then concatenate a space, then concatenate the lastname
attribute:
+
+<text text="${parent.firstname + ' ' + parent.lastname}"/>
+<example role="live-example">
+ <title>Concatenating databound attributes</title>
+ <programlisting language="lzx">
+ <textobject><textdata
fileref="programs/data-concatenatingattributes.lzx"/></textobject>
+ </programlisting>
+</example>
+</section>
+<section>
+<title>Conditional logic with Paths</title>
+
+This example shows the use of boolean logic to set the value of object
attributes. Based on the values in the xml data, either male or female, we
will draw a blue view, or a pink view.
+
+First, we create a view that displays the color pink if the gender of the
first contact is female; or blue if male.
+
+ Databind the gendercolor1 view to the first person node in the address
book:
+
+ <view width="100" height="100" name="gendercolor1"
+
+ datapath="dset:/addressbook/contacts/person[1]">
+
+ Inside this view, we create an attribute called gender and set it's
value to be the sex attribute of the person node that the view is currently
data bound to:
+
+ <attribute name="gender" value="$path{'@sex'}"/>
+
+Now, we create a bgcolor attribute of the view and, using the ternary
operator, set its value to blue if the sex attribute is male and set its value
to be pink if the sex attribute is female:
+
+ <view width="100" height="100" name="gendercolor1"
+
+ datapath="dset:/addressbook/contacts/person[1]" log, you can reach
him at [EMAIL PROTECTED] bgcolor="${this.gender == 'female' ?
+
+ 0xFF7070 : 0x7585FF}">
+
+ Repeat steps 1 - 3 to produce the same effect for the second view.
+
+</section>
+
<section>
Changing a Datapath
--Setting the XPath Using a String
@@ -68,5 +182,46 @@
----- cursor movements calls such as selectNext(),
----- running an XPath request via setXPath()
</para>
+<para>
+<example role="live-example">
+ <title>Binding to attributes</title>
+ <programlisting language="lzx">
+ <textobject><textdata fileref="programs/datapointermove.lzx"/></textobject>
+ </programlisting>
+</example>
+</para>
+<para>
+Changing a Datapath
+
+This walkthrough explores using the datapath API (specifically selectNext()
and selectPrev()) to access and traverse through data in a dataset.
+
+
+Inside the onclick event handler inside the nextname button, invoke the
selectNext() method on the datapath object of the lastnameview view:
+
+lastnameview.datapath.selectNext();
+
+</para>
+<para>
+Setting the XPath Using a String
+
+This example shows how to build a string and then set the datapath of an
object to that string.
+
+
+ Inside the onclick event handler inside the nextname view, we create a
string called apath and set its value to be the string
+
+"dset:/addressbook/contacts/person[", then concatenate to the end of this
string the value of the idx attribute of the canvas, then concatenate the
string "]":
+
+ var apath = "dset:/addressbook/contacts/person[" + parent.idx++ +"]";
+
+ As the next line of code, still inside the onclick event handler, using the
setXPath() method, we set the XPath of the lastnameview view to the apath
string:
+
+ lastnameview.datapath.setXPath(apath);
+<example role="live-example">
+ <title>Setting XPath using a string</title>
+ <programlisting language="lzx">
+ <textobject><textdata
fileref="programs/data-xpathstring.lzx"/></textobject>
+ </programlisting>
+</example>
+</para>
</section>
</chapter>
Modified: openlaszlo/trunk/docs/src/developers/two-way-databinding.dbk
===================================================================
--- openlaszlo/trunk/docs/src/developers/two-way-databinding.dbk
2007-11-09 18:06:34 UTC (rev 7203)
+++ openlaszlo/trunk/docs/src/developers/two-way-databinding.dbk
2007-11-09 21:28:49 UTC (rev 7204)
@@ -1,17 +1,3 @@
-<example role="live-example">
- <title>Runtime constraintes with applyConstraint</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/constraints-$1.lzx"/></textobject>
- </programlisting>
-</example>
-<example role="live-example">
- <title>Runtime constraintes with applyConstraint</title>
- <programlisting language="lzx">
- <textobject><textdata fileref="programs/constraints-$1.lzx"/></textobject>
- </programlisting>
-</example>
-<para>
-</para>
<chapter id="two-way-databinding">
<title>Two-way databinding</title>
@@ -44,6 +30,213 @@
-- Every datapath/datapointer has a .p property, which is the node to which it
points.
--- therefore, you can use the DOM APIs on the .p attribute of datapaths and
datapointers
</para>
+<article lang="">
+ <informaltable frame="all">
+ <tgroup cols="3">
+ <tbody>
+ <row>
+ <entry>
+ <para>Datapointer Classes</para>
+ </entry>
+
+ <entry>
+ <para>DataNode Classes</para>
+ </entry>
+ <entry>
+ <para>Description</para>
+ </entry>
+ </row>
+ <row>
+
+ <entry>
+ <para>addNode</para>
+ </entry>
+ <entry>
+ <para>appendChild</para>
+ </entry>
+ <entry>
+ <para>Adds a new child node below the current
+ context</para>
+
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <para>deleteNode</para>
+ </entry>
+ <entry>
+ <para>removeChild</para>
+
+ </entry>
+ <entry>
+ <para>Removes the referenced node</para>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <para>deleteNodeAttribute</para>
+
+ </entry>
+ <entry>
+ <para>removeAttr</para>
+ </entry>
+ <entry>
+ <para>Removes the name attribute from the current
+ node</para>
+ </entry>
+ </row>
+
+ <row>
+ <entry>
+ <para>getChild</para>
+ </entry>
+ <entry>
+ <para>getFirstChild and getLastChild</para>
+ </entry>
+ <entry>
+
+ <para>Gets a specified child node</para>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <para>getNodeAttribute</para>
+ </entry>
+ <entry>
+
+ <para>getAttr</para>
+ </entry>
+ <entry>
+ <para>Returns the value of the current node's name
+ attribute</para>
+ </entry>
+ </row>
+ <row>
+ <entry>
+
+ <para>getNodeName</para>
+ </entry>
+ <entry>
+ <para>NodeName (LzDataNode attribute)</para>
+ </entry>
+ <entry>
+ <para>Gets the name of the node that the data pointer
+ is pointing to</para>
+
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <para>getNodeText</para>
+ </entry>
+ <entry>
+ <para>data (LzDataText attribute)</para>
+
+ </entry>
+ <entry>
+ <para>Returns a string that is a concatenation of the
+ text nodes beneath the current element</para>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <para>selectNext</para>
+
+ </entry>
+ <entry>
+ <para>getNextSibling</para>
+ </entry>
+ <entry>
+ <para>Selects the next sibling node in the
+ dataset</para>
+ </entry>
+ </row>
+
+ <row>
+ <entry>
+ <para>selectPrev</para>
+ </entry>
+ <entry>
+ <para>getPreviousSibling</para>
+ </entry>
+ <entry>
+
+ <para>Selects the previous sibling node in the
+ dataset</para>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <para>selectParent</para>
+ </entry>
+ <entry>
+
+ <para>parentNode (LzDataNode attribute)</para>
+ </entry>
+ <entry>
+ <para>Moves up the data hierarchy to the next parent
+ node in the dataset</para>
+ </entry>
+ </row>
+ <row>
+ <entry>
+
+ <para>serialize</para>
+ </entry>
+ <entry>
+ <para>serialize</para>
+ </entry>
+ <entry>
+ <para>Serializes the current element and its children
+ to an XML string</para>
+
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <para>setNodeAttribute</para>
+ </entry>
+ <entry>
+ <para>setAttr</para>
+
+ </entry>
+ <entry>
+ <para>Sets the name attribute of the current node to
+ the val argument</para>
+ </entry>
+ </row>
+ <row>
+ <entry>
+ <para>setNodeName</para>
+
+ </entry>
+ <entry>
+ <para>setNodeName</para>
+ </entry>
+ <entry>
+ <para>Sets the name of the current element to the name
+ argument</para>
+ </entry>
+ </row>
+
+ <row>
+ <entry>
+ <para>setNodeText</para>
+ </entry>
+ <entry>
+ <para>setData</para>
+ </entry>
+ <entry>
+
+ <para>Sets the current node's text to the text
+ argument</para>
+ </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </informaltable>
+ <para />
+</article>
<para>
Datapointer and DataElement
@@ -54,9 +247,43 @@
---Destroying a Node
</para>
<para>
-Changing Data Binding with Attribute p
+<section><title>
+Changing Data Binding with Attribute p</title>
+
+This example shows how to change the datapath of an object using the p
attribute.
+
+
+ Inside the onclick handler inside the button, set the p attribute of the
firstview object to be the p attribute of the secondview object:
+
+ parent.firstview.datapath.setAttribute("p",
parent.secondview.datapath.p);
+<example role="live-example">
+ <title>Changing Data Binding with Attribute p </title>
+ <programlisting language="lzx">
+ <textobject><textdata
fileref="programs/data-setattribute_p.lzx"/></textobject>
+ </programlisting>
+</example>
+</section>
+
Exploring Two-way Data Binding
+This example shows that when data in a dataset changes, any objects that are
databound to that data automatically get updated (there is automatic
synchronization between the data layer and the UI layer).
+
+
+Using the datapath attribute, display the last name of the first contact in
the first text object:
+
+<text resize="true" name="lastnameinitcaps"
+ datapath="dset:/addressbook/contacts/person[1]/@lastname" />
+
+Using the datapath attribute, databind the edittext object to the same
lastname attribute, as in Step 1:
+
+<edittext width="300" name="lastnameedit"
+ datapath="dset:/addressbook/contacts/person[1]/@lastname">
+
+The above shows how the dataset controls the what is displayed. Now let's look
at how the updateData() method works in the other direction, when the changes
to the databound attributes can be propagated back to the dataset. Examine the
+onclick event handler for the button. When the button is clicked, it
programmatically synchronizes the data and the UI layer of the lastnameedit
using the updateData() method of its datpath object:
+
+ parent.lastnameedit.datapath.updateData();
+
The .data property
-- .data is shorthand for datapath.p
-- Objects like views have a .data property when they are databound and
replicated. Otherwise .data is null.
_______________________________________________
Laszlo-checkins mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
