Author: ben
Date: 2007-09-24 21:03:12 -0700 (Mon, 24 Sep 2007)
New Revision: 6578
Removed:
labs/newsmatch/progression06/
Modified:
labs/newsmatch/iphone-openlaszlo.blog.html
Log:
adjusted/integrated feedback from jrobey
Modified: labs/newsmatch/iphone-openlaszlo.blog.html
===================================================================
--- labs/newsmatch/iphone-openlaszlo.blog.html 2007-09-25 03:08:15 UTC (rev
6577)
+++ labs/newsmatch/iphone-openlaszlo.blog.html 2007-09-25 04:03:12 UTC (rev
6578)
@@ -2,13 +2,12 @@
<body>
<h1>iPhone Development with OpenLaszlo</h1>
-<!--I've made Bret a co-author, so no 'Bret and I; -->
<p>
At <a href="http://www.ajaxworld.com/"; title="AJAXWorld Conference &
Expo">AjaxWorld</a> tomorrow, we'll be <a
href="http://www.ajaxworld.com/general/sessiondetail0907.htm?id=143";
title="Sept. 2007 Session Description @ AJAXWorld Conference & Expo">giving a
talk</a> about how we built an iPhone application in OpenLaszlo
at iPhoneDevCamp a few months ago.
</p>
-The iPhone application is
+The iPhone application is NEWSMATCH
<a href="http://labs.openlaszlo.org/ipdc/awip03/";
target="newsmatch">NEWSMATCH</a>.
It's a game that presents items from a Yahoo! News RSS feed, with images and
titles. The challenge is to match an image with the headline it illustrates. To
play, you click(or tap) on an image, then click (or tap) on a headline. If they
match, you're given the opportunity to read the story.
@@ -31,7 +30,7 @@
build of OpenLaszlo 4, after revision 6568. (As of this writing,
the nightly build isn't available yet.)
<a href="http://download.openlaszlo.org/nightly/";>Nightly builds are available
here.</a>
-The NEWMATCH code is available in
+The NEWSMATCH code is available in
<a href="http://svn.openlaszlo.org/labs/newsmatch";>our source code
repository</a>.
For the purposes of this article, we've rewritten the progression to be
@@ -83,6 +82,8 @@
<h2>Feed me! Bind me!</h2>
<a
href="http://svn.openlaszlo.org/labs/newsmatch/progression02/main02.lzx";>(source)</a>.
<a href="http://labs.openlaszlo.org/ipdc/progression02/";
target="newsmatch_app" title="progression02">(live)</a>
+<p><em>One dataset to rule them all, one datapath to find them, one constraint
to select it all and using XPath, bind them.</em>
+</p>
<p>
The next thing we did was to find some data, and show it. OpenLaszlo makes
this
sooo easy and tasty; it's one of our favorite things to do. We grabbed
@@ -120,7 +121,7 @@
<pre>
<simplelayout spacing="3" axis="y" />
</pre>
- and we've got progression02, (TODO: image!) the second stage in our
application development.
+ and we've got <a href="http://labs.openlaszlo.org/ipdc/progression02/";
target="newsmatch_app" title="progression02">the second stage in our
application development.</a>
</p>
<h2>Pretty pictures, please?</h2>
<a
href="http://svn.openlaszlo.org/labs/newsmatch/progression03/main03.lzx";>(source)</a>.
@@ -192,7 +193,8 @@
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,
- you can just reach in and add methods whereever you want. You can also
turn an instance into a class very easily, if
+ you can just reach in and add methods whereever you want. You can also
turn an instance into a class very easily,
+ (most of the time, just by wrapping the instance in a <tt>class</tt> tag)
if
you decide you want more than one details view.
</p>
<p>
@@ -204,9 +206,9 @@
<h2>Swoosh, swoop</h2>
<a
href="http://svn.openlaszlo.org/labs/newsmatch/progression07/main07.lzx";>(source)</a>.
-(live) [TODO linkme!]
+<a href="http://labs.openlaszlo.org/ipdc/progression07/"; title="progression07"
target="newsmatch_app">(live)</a>
<p>
- It's time for some swooshing. The seventh iteration (We're skipping the
sixth, but it's in the repository) adds a floating image
+ It's time for some swooshing. The seventh iteration (We're skipping the
sixth) 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
@@ -258,6 +260,8 @@
<h2>Application Logic</h2>
<p>
Didn't we say something about a matching game? Yep. The <a
href="http://svn.openlaszlo.org/labs/newsmatch/newsmatch/main.lzx"; title="final
code">final code</a> shows how we did this, by taking advantage of the guid
(global unique identifier) that the rss feed provides for each item. We bind
the guid to both the <tt>rssimage</tt> and the <tt>rsslabel</tt>. To see if a
title matches an image, we just compare their guid's.
+ (This code snippet includes <tt>gResult</tt>, which we haven't talked
about yet. It's another singleton object which shows the result
+ of the match.)
</p>
<pre>
<view id="gDetails" ... >
@@ -283,7 +287,6 @@
<h2>Custom Wrappers</h2>
<p>If you run <a href="http://labs.openlaszlo.org/ipdc/awip03/";
target="newsmatch">the final version of newsmatch</a> you'll notice that the
words NEWS/MATCH appear on the screen pretty fast, even on the iPhone over
EDGE, and that the "tap to begin" instruction doesn't appear for a while. This
is more sleight-of-hand. An OpenLaszlo application, even a DHTML application,
runs inside a standard html page generated by the OpenLaszlo server. This
"embed" page does some browser-sniffing and loads in a "loading" splash, which
is replaced by the actual OL application when it is ready. (See the <a
href="http://www.openlaszlo.org/lps4/docs/developers/browser-integration.html";
title="Chapter 35. Browser Integration">OpenLaszlo Developer's Guide
on Browser Integration</a>.)
</p>
-<!-- you so clever, you guys! -->
<p>
To do this trick, you have to do a SOLO deployment. (Please see the <a
href="http://www.openlaszlo.org/lps4/docs/developers/proxied.html";
title="Chapter 25. Proxied and SOLO Applications">OpenLaszlo
Developer's Guide</a> for a description of SOLO deployment.) For this
application, we edited the html wrapper so that the wrapper's splash exactly
matches the lzx startup screen. This was just plain old HTML work; we found the
div "lzsplash" in the wrapper page, and replaced the entire lzsplash div with
this:
<pre>
@@ -295,7 +298,8 @@
</p></div>
</pre>
</p>
-
+<h2>Go code!</h2>
+<p>Now go write some iPhone apps in OpenLaszlo! Let us know what you come up
with. We're sure you'll impress us; the OpenLaszlo developer community always
does.</p>
<!-- Copyright 2007 Laszlo Systems -->
</body>
</html>
_______________________________________________
Laszlo-checkins mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
