Author: ben Date: 2007-09-24 21:32:00 -0700 (Mon, 24 Sep 2007) New Revision: 6580
Modified: labs/newsmatch/iphone-openlaszlo.blog.html Log: more markup cleanup, replacing quotes with entities Modified: labs/newsmatch/iphone-openlaszlo.blog.html =================================================================== --- labs/newsmatch/iphone-openlaszlo.blog.html 2007-09-25 04:22:54 UTC (rev 6579) +++ labs/newsmatch/iphone-openlaszlo.blog.html 2007-09-25 04:32:00 UTC (rev 6580) @@ -1,9 +1,3 @@ -<?xml version="1.0" encoding="utf-8" ?> -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" - "http://www.w3.org/TR/html4/strict.dtd";> -<html> - <head></head> -<body> <h1>iPhone Development with OpenLaszlo</h1> <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> @@ -26,18 +20,8 @@ <p><tt>http://localhost:8080/trunk/demos/newsmatch-labs/hello/hello_iphone.lzx?lzr=dhtml&lzt=html</tt></p> -<p>Notice the query arguments:</p> -<pre> -<tt>lzr=dhtml</tt> -</pre> +<p>Notice the query arguments:<tt>lzr=dhtml</tt> means that the Laszlo Runtime is to be dhtml -- this tells the compiler which output format to translate the source to. <tt>lzt=html</tt> means that the "wapper" for the application should be simple HTML.</p> -<p>means that the Laszlo Runtime is to be dhtml -- this tells the compiler which output format to translate the source to.</p> -<pre> -<tt>lzt=html</tt> -</pre> - -<p>means that the "wapper" for the application should be simple HTML.</p> - <p>When you're developing, you generally want the wrapper to include the Developer's Console. The Developer's Console is a bar at the bottom of an OpenLaszlo application page with checkboxes for runtime, debug, and other options. It's the default wrapper, so if you don't include an lzt query argument, that's what you get.</p> <h2>"Tap to begin" <a href="http://svn.openlaszlo.org/labs/newsmatch/progression01/blank.lzx";>(source)</a>. <a href="http://labs.openlaszlo.org/ipdc/progression01/"; target="newsmatch_app" title="progression01">(live)</a></h2> @@ -61,15 +45,15 @@ <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 <a href="http://rss.news.yahoo.com/imgrss/441"; title="Photo Highlight on Yahoo! News Photos">an RSS feed from Yahoo! News</a>; this one has photos for every item. (For development, we grabbed this feed once, saved it locally as an xml file, then served it up statically; there's no reason to abuse Yahoo's servers.) Then we created a tiny class to visually represent an item in the rss feed:</p> <pre> - <class name="rssitem" bgcolor="0x2d4263" width="70" height="30"> <!-- height, width, color so we can see it --> - <view name="thumbnail" bgcolor="0x888888" stretches="both" width="${parent.width}" height="${parent.height}" /> - <text fgcolor="white" datapath="title[1]/text()" x="2" y="2" /> + <class name="rssitem" bgcolor="0x2d4263" width="70" height="30"> <!-- height, width, color so we can see it --> + <view name="thumbnail" bgcolor="0x888888" stretches="both" width="${parent.width}" height="${parent.height}" /> + <text fgcolor="white" datapath="title[1]/text()" x="2" y="2" /> </class> </pre> <p>The best part of that little class is <b><tt>datapath="title[1]/text()"</tt></b>. That is an XPath query that says, <em>"Give me the text from the first "title" node in the data associated with this rssitem."</em> Which rss item? Well, we create an instance of one of them by <b>binding</b> it to another XPath query. The simplest way to do this in lzx is by binding a datapath to an object</p> <pre> - <rssitem datapath="rss:/rss/channel/item[1]" /> + <rssitem datapath="rss:/rss/channel/item[1]" /> </pre> <p>which means <em>"Create an instance of the rssitem class, and associate it with the first item in the rss dataset."</em></p> @@ -78,12 +62,12 @@ <p>OpenLaszlo's <b>implicit replication</b> shines here. We want to make an instance of <tt>rssitem</tt> for each of the first 12 items in the rss feed, so, we just <em>make my XPath query ask for the first 12 items:</em></p> <pre> - <rssitem datapath="rss:/rss/channel/item[1-12]" /> + <rssitem datapath="rss:/rss/channel/item[1-12]" /> </pre> <p>We throw in a layout to arrange these twelve items in a column:</p> <pre> - <simplelayout spacing="3" axis="y" /> + <simplelayout spacing="3" axis="y" /> </pre> <p>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> @@ -92,7 +76,7 @@ <p>Next, we wanted to display the nice images that Yahoo provided, associated with each item. We've already seen how data-binding can do XPath queries for us; we now apply the same pattern to create a thumbnail and bind it to the url specified in the feed:</p> <pre> - <view name="thumbnail" bgcolor="0x888888" source="$path{'content/@url'}"/> + <view name="thumbnail" bgcolor="0x888888" source="$path{'content/@url'}"/> </pre> <h2>Tell me more... <a href="http://svn.openlaszlo.org/labs/newsmatch/progression04/main04.lzx";>(source)</a>. <a href="http://labs.openlaszlo.org/ipdc/progression04/"; title="progression04" target="newsmatch_app">(live)</a></h2> @@ -100,30 +84,26 @@ <p>We wanted to show some more information about these items, more than just a few words from their title, so we create a view to display details about one item at a time. We gave it an id, <tt>gDetails</tt>, so that we could address it from any scope. We used datapaths to bind it to a particular item in the rss feed. For now, we just choose the third item.</p> <pre> <!-- view to hold details about the item of interest --> - <view id="gDetails" y="150" bgcolor="0xFFFFFF" width="$once{parent.width}" height="120" - datapath="rss:/rss/channel/item[3]" > + <view id="gDetails" y="150" bgcolor="0xFFFFFF" width="$once{parent.width}" height="120" + datapath="rss:/rss/channel/item[3]" > <!-- the image associated with this news item --> - <view name="img" x="10" y="10" width="${parent.width-20}" height="100" clip="true" - source="$path{'content/@url'}" /> + <view name="img" x="10" y="10" width="${parent.width-20}" height="100" clip="true" + source="$path{'content/@url'}" /> <!-- the title of this news item --> - <text fgcolor="0x19195B" x="100" y="10" width="$once{parent.width-102}" multiline="true" fontstyle="bold" - text="$path{'title[1]/text()'}" /> + <text fgcolor="0x19195B" x="100" y="10" width="$once{parent.width-102}" multiline="true" fontstyle="bold" + text="$path{'title[1]/text()'}" /> <!-- the description of this news item --> - <text fgcolor="0x19195B" text="$path{'description/text()'}" - x="100" y="32" multiline="true" width="$once{parent.width-102}"/> + <text fgcolor="0x19195B" text="$path{'description/text()'}" + x="100" y="32" multiline="true" width="$once{parent.width-102}"/> </view> </pre> +<h2>Less ugly, please. <a href="http://svn.openlaszlo.org/labs/newsmatch/progression05/main05.lzx";>(source)</a>. <a href="http://labs.openlaszlo.org/ipdc/progression05/"; title="progression05" target="newsmatch_app">(live)</a></h2> -<h2>Less ugly, please. <a href="http://svn.openlaszlo.org/labs/newsmatch/progression05/main05.lzx";>(source)</a>. -<a href="http://labs.openlaszlo.org/ipdc/progression05/"; title="progression05" target="newsmatch_app">(live)</a></h2> -<p> - Around this point in iPhoneDevCamp, we took a break and went off in search of coffee. (This was when we discovered <a href="http://sbshine.net/blog/2007/07/philz-coffee.html"; title="shinyblog: Philz Coffee">Philz Coffee</a>.) We started to make things look nicer, by writing a custom layout, picking colors, sizing fonts, that sort of thing. (The code you're seeing here is somewhat simplified, to be easier to follow. At the iPhone camp we wrote a new layout with animation, and arranged everything pixel-perfect. That's another cool thing about LZX; you can create your own layouts of arbitrary complexity. For this article, we've approximated our process.) To make arrangement easier, we broke up the <tt>rssitem</tt> class into a <tt>rssimage</tt> class and a <tt>rsslabel</tt> class. -</p> -<p> - Also at this stage, we added a bit of interaction: if you click on a thumbnail image, the <tt>gDetails</tt> view shows the title and description and a larger image from that item. That was another cool trick here; we added an <tt>onclick</tt> handler to the rssimage: -</p> - <pre> +<p>Around this point in iPhoneDevCamp, we took a break and went off in search of coffee. (This was when we discovered <a href="http://sbshine.net/blog/2007/07/philz-coffee.html"; title="shinyblog: Philz Coffee">Philz Coffee</a>.) We started to make things look nicer, by writing a custom layout, picking colors, sizing fonts, that sort of thing. (The code you're seeing here is somewhat simplified, to be easier to follow. At the iPhone camp we wrote a new layout with animation, and arranged everything pixel-perfect. That's another cool thing about LZX; you can create your own layouts of arbitrary complexity. For this article, we've approximated our process.) To make arrangement easier, we broke up the <tt>rssitem</tt> class into a <tt>rssimage</tt> class and a <tt>rsslabel</tt> class.</p> + +<p>Also at this stage, we added a bit of interaction: if you click on a thumbnail image, the <tt>gDetails</tt> view shows the title and description and a larger image from that item. That was another cool trick here; we added an <tt>onclick</tt> handler to the rssimage:</p> +<pre> <class name="rssimage" > ... <method event="onclick"> @@ -137,46 +117,25 @@ this.datapath.setPointer(v); </method> </view> - </pre> -<p> - When the user clicks on an <tt>rssimage</tt>, it sets the datapath of the <tt>gDetails</tt> view to the datapath of - the <tt>rssimage</tt> clicked on. This <em>automagically</em> makes the <tt>gDetails</tt> <tt>img</tt> and <tt>title</tt> - 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 we have been 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, - 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> - We have also been very loose about typing. We actually have no - idea what the type of <tt>this.datapath.p</tt>, which we pass as an argument to <tt>gDetails.show()</tt>, but we - don't have to know; it just has to do the right thing when we pass it as a parameter to <tt>this.datapath.setPointer()</tt>. - The ruby folks call this "duck typing." We just call it convenient. -</p> + +</pre> -<h2>Swoosh, swoop <a href="http://svn.openlaszlo.org/labs/newsmatch/progression07/main07.lzx";>(source)</a>. -<a href="http://labs.openlaszlo.org/ipdc/progression07/"; title="progression07" target="newsmatch_app">(live)</a></h2> -<p> - 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 - view (<tt>gFloatImage</tt>), and some mapping from the canvas coordinate space to the - view's coordinate space: -</p> +<p>When the user clicks on an <tt>rssimage</tt>, it sets the datapath of the <tt>gDetails</tt> view to the datapath of the <tt>rssimage</tt> clicked on. This <em>automagically</em> makes the <tt>gDetails</tt> <tt>img</tt> and <tt>title</tt> 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 we have been 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, 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>We have also been very loose about typing. We actually have no idea what the type of <tt>this.datapath.p</tt>, which we pass as an argument to <tt>gDetails.show()</tt>, but we don't have to know; it just has to do the right thing when we pass it as a parameter to <tt>this.datapath.setPointer()</tt>. The ruby folks call this "duck typing." We just call it convenient.</p> + +<h2>Swoosh, swoop <a href="http://svn.openlaszlo.org/labs/newsmatch/progression07/main07.lzx";>(source)</a>. <a href="http://labs.openlaszlo.org/ipdc/progression07/"; title="progression07" target="newsmatch_app">(live)</a></h2> + +<p>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 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.setX( v.getAttributeRelative('x',canvas) ); + this.setY( v.getAttributeRelative('y',canvas) ); this.setWidth(v.width); this.setHeight(v.height); this.setSource(v.getAttribute("sourceUrl")); @@ -193,12 +152,11 @@ </animatorgroup> </view> </pre> -<p>Also in this iteration, the loading of the thumbnails is defered until after the opening animation has finished. - 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:</p> - <pre> + +<p>Also in this iteration, the loading of the thumbnails is defered until after the opening animation has finished. 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:</p> +<pre> <class name="rssimage" > - <attribute name="sourceUrl" value="$path{'content/@url'}" type="string" /> + <attribute name="sourceUrl" value="$path{'content/@url'}" type="string" /> <view name="thumbnail"> ... </view> @@ -207,17 +165,14 @@ this.thumbnail.setSource(this.sourceUrl); </method> </class> - </pre> -<p>This way, the application starts to appear while the images are still loading. This is another tweak - to improve the user experience. On a slow connection, you can see the images pop in one by one. -</p> +</pre> + +<p>This way, the application starts to appear while the images are still loading. This is 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 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> + +<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" ... > <method name="checkForMatch"><![CDATA[ @@ -235,15 +190,16 @@ ]]></method> </view> </pre> -<h2>Birds in Flight <a href="http://svn.openlaszlo.org/labs/newsmatch/filter.xsl"; title="xslt filter">(xslt source)</a</h2> -<p>EDGE data transfer can be slower than a laden African swallow, so you have to be very careful with your bloated feeds. - The rss feed served up by yahoo is much bigger than we needed for this application, and it has lots of duplicate information; it started out at around 150k. So, we made a <a href="http://svn.openlaszlo.org/labs/newsmatch/filter.xsl"; title="xslt filter">little xslt filter</a> that pulls out just the information needed for NEWSMATCH. This got the feed info down to around 11k. If we were deploying NEWSMATCH live, we would insert this filter into the data flow from the rss provider to newsmatch; as is, we just run it by hand offline when we want some new data. -</p> + +<h2>Birds in Flight <a href="http://svn.openlaszlo.org/labs/newsmatch/filter.xsl"; title="xslt filter">(xslt source)</a></h2> + +<p>EDGE data transfer can be slower than a laden African swallow, so you have to be very careful with your bloated feeds. The rss feed served up by yahoo is much bigger than we needed for this application, and it has lots of duplicate information; it started out at around 150k. So, we made a <a href="http://svn.openlaszlo.org/labs/newsmatch/filter.xsl"; title="xslt filter">little xslt filter</a> that pulls out just the information needed for NEWSMATCH. This got the feed info down to around 11k. If we were deploying NEWSMATCH live, we would insert this filter into the data flow from the rss provider to newsmatch; as is, we just run it by hand offline when we want some new data.</p> + <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> -<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: </p> + +<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> + +<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:</p> <pre> <div id="lzsplash" style="z-index: 10000000; top: 0; left: 0; width: 320px; height: 356px; position: fixed; display: table"><p style="display: table-cell; vertical-align: middle;"> @@ -251,10 +207,8 @@ <div style="width:100%; height:50%; position:absolute; top:50%; left:0px; background-color:#FFFFFF;"><img src="resources/cover-match.png" style="display: block; position:relative; top:0px; left:55px"></div> <div style="width:100%; height:50%; position:absolute; top:277px; left:64px; background-color:#FFFFFF;"><img src="lps/includes/spinner.gif" style="display: block; position:relative; top:0px; left:0"></div> </p></div> -</pre> +</pre> <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> + +<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 . --Ben Shine and Bret Simister, Laszlo Systems.</p><!-- Copyright 2007 Laszlo Systems --> _______________________________________________ Laszlo-checkins mailing list [email protected] http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
