Author: ben
Date: 2007-09-24 15:19:31 -0700 (Mon, 24 Sep 2007)
New Revision: 6571
Added:
labs/newsmatch/newsmatch/
labs/newsmatch/newsmatch/classes.lzx
labs/newsmatch/newsmatch/feed.xml
labs/newsmatch/newsmatch/main.lzx
labs/newsmatch/newsmatch/resources.lzx
labs/newsmatch/newsmatch/resources/
labs/newsmatch/newsmatch/resources/laszlologo.gif
Removed:
labs/newsmatch/classes.lzx
labs/newsmatch/feed.xml
labs/newsmatch/main.lzx
labs/newsmatch/resources.lzx
labs/newsmatch/resources/circle-white.png
labs/newsmatch/resources/cover-match.png
labs/newsmatch/resources/cover-news.png
labs/newsmatch/resources/header-bkgnd.png
labs/newsmatch/resources/laszlologo.gif
labs/newsmatch/resources/logo.png
labs/newsmatch/resources/no-icon-8.png
Modified:
labs/newsmatch/iphone-openlaszlo.blog.html
labs/newsmatch/progression07/main07.lzx
Log:
Code cleanup, more blog entry, moved the final app into its own directory.
Deleted: labs/newsmatch/classes.lzx
Deleted: labs/newsmatch/feed.xml
Modified: labs/newsmatch/iphone-openlaszlo.blog.html
===================================================================
--- labs/newsmatch/iphone-openlaszlo.blog.html 2007-09-24 21:51:13 UTC (rev
6570)
+++ labs/newsmatch/iphone-openlaszlo.blog.html 2007-09-24 22:19:31 UTC (rev
6571)
@@ -185,18 +185,76 @@
and <tt>description</tt> views update their datamapped attributes.
<em>Wild, huh?</em> This dynamic do-what-I-mean interaction between datapaths
and user events and view attributes is a big part of making OpenLaszlo such a
fun platform for developing mashups.
</p>
<p>
- Notice, also, how I'm writing methods and creating attributes on objects
<em>or</em> classes. In a strict
- class-based language, you'd have to create a new class in order to have
the gDetails view. With the lzx class model,
- I can just reach in and add methods whereever I want. I'm also very loose
about typing; I actually have no
+ Notice, also, how I'm writing methods and creating attributes on objects
<em>or</em> classes, or even in the global scope.
+ In a strict
+ class-based language, you'd have to create a new class in order to have a
singleton <tt>gDetails</tt> view, and
+ you'd have to do some tricks to make sure that you only ever had one
instance of it.
+ With the lzx class model,
+ I can just reach in and add methods whereever I want. I could also turn an
instance into a class very easily, if
+ I decide I want more than one details view.
+</p>
+<p>
+ I'm also very loose about typing; I actually have no
idea what the type of <tt>this.datapath.p</tt>, which I pass as an
argument to <tt>gDetails.show()</tt>, but I
don't have to know; it just has to do the right thing when I pass it as a
parameter to <tt>this.datapath.setPointer()</tt>.
+ The ruby folks call this "duck typing." I just call it convenient.
</p>
-
-
-
-✂------✂------✂------✂------✂------✂------✂------✂------✂------✂------
-
-Main entry continued
-
-Copyright 2007 Laszlo Systems
+<h2>Swoosh, swoop</h2>
+<a
href="http://svn.openlaszlo.org/labs/newsmatch/progression07/main07.lzx";>(source)</a>.
+(live) [TODO linkme!]
+<p>
+ It's time for some swooshing. The seventh iteration (I skipped six) adds a
floating image
+ that "slides" the selected thumbnail down to the gDetails view. When it
arrives, the
+ description in the details view is updated. We manage this with an
animator (note how two
+ animators are run simultaneously for an interesting visual effect), a
partially-transparent
+ view (<tt>gFloatImage</tt>), and some mapping from the canvas coordinate
space to the
+ view's coordinate space:
+</p>
+<pre>
+ <view id="gFloatImage" opacity="0.5"
+ y="200" x="20" width="100"
height="100" clickable="false">
+ <method name="setTarget" args="v" >
+ this.movingView = v;
+ this.setX( v.getAttributeRelative('x',canvas) );
+ this.setY( v.getAttributeRelative('y',canvas) );
+ this.setWidth(v.width);
+ this.setHeight(v.height);
+ this.setSource(v.getAttribute("sourceUrl"));
+ this.setVisible( true );
+ animSlide.doStart();
+ </method>
+ <animatorgroup name="animSlide" start="false"
duration="1500" process="simultaneous" >
+ <animator attribute="y" to="$once{gDetails.y +
gDetails.img.y}" motion="easein" />
+ <animator attribute="x" to="$once{gDetails.x +
gDetails.img.x}" motion="easeout" />
+ <method event="onstop">
+ gDetails.show(gFloatImage.movingView.datapath.p);
+ gFloatImage.setVisible(false);
+ </method>
+ </animatorgroup>
+ </view>
+</pre>
+<p>Also in this iteration, I defer the loading of the thumbnails until after
the opening animation finishes.
+ The <tt>rssimage</tt> class has an empty view until <tt>loadThumbnail</tt>
is called on it; only then
+ does the app start loading the image resource:
+ <pre>
+ <class name="rssimage" >
+ <attribute name="sourceUrl"
value="$path{'content/@url'}" type="string" />
+ <view name="thumbnail">
+ ...
+ </view>
+ ...
+ <method name="loadThumbnail">
+ this.thumbnail.setSource(this.sourceUrl);
+ </method>
+ </class>
+ </pre>
+
+ This way, the application will start to appear while the images are still
loading; just another tweak
+ to improve the user experience. On a slow connection, you can see the
images pop in one by one.
+</p>
+<h2>Application Logic</h2>
+<p>
+ Didn't I say something about a matching game? Yep. The final code shows
how I did this.
+</p>
+<!-- Copyright 2007 Laszlo Systems -->
Deleted: labs/newsmatch/main.lzx
Copied: labs/newsmatch/newsmatch/classes.lzx (from rev 6551,
labs/newsmatch/classes.lzx)
Copied: labs/newsmatch/newsmatch/feed.xml (from rev 6551,
labs/newsmatch/feed.xml)
Copied: labs/newsmatch/newsmatch/main.lzx (from rev 6551,
labs/newsmatch/main.lzx)
Copied: labs/newsmatch/newsmatch/resources (from rev 6551,
labs/newsmatch/resources)
Copied: labs/newsmatch/newsmatch/resources/laszlologo.gif (from rev 6563,
labs/newsmatch/resources/laszlologo.gif)
Copied: labs/newsmatch/newsmatch/resources.lzx (from rev 6551,
labs/newsmatch/resources.lzx)
Modified: labs/newsmatch/progression07/main07.lzx
===================================================================
--- labs/newsmatch/progression07/main07.lzx 2007-09-24 21:51:13 UTC (rev
6570)
+++ labs/newsmatch/progression07/main07.lzx 2007-09-24 22:19:31 UTC (rev
6571)
@@ -15,8 +15,7 @@
</method>
<method name="loadThumbnail">
this.thumbnail.setSource(this.sourceUrl);
- </method>
-
+ </method>
</class>
<class name="rsslabel" bgcolor="0x2d4263" width="108" height="34">
@@ -105,6 +104,8 @@
<animator target="${cover.bottom}" attribute="y" to="360" />
<method event="onstart">
parent.tapToBegin.setVisible(false);
+ </method>
+ <method event="onstop">
canvas.loadThumbnails();
</method>
</animatorgroup>
Deleted: labs/newsmatch/resources/circle-white.png
Deleted: labs/newsmatch/resources/cover-match.png
Deleted: labs/newsmatch/resources/cover-news.png
Deleted: labs/newsmatch/resources/header-bkgnd.png
Deleted: labs/newsmatch/resources/laszlologo.gif
Deleted: labs/newsmatch/resources/logo.png
Deleted: labs/newsmatch/resources/no-icon-8.png
Deleted: labs/newsmatch/resources.lzx
_______________________________________________
Laszlo-checkins mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
