Author: ben Date: 2007-09-24 15:51:00 -0700 (Mon, 24 Sep 2007) New Revision: 6572
Modified: labs/newsmatch/iphone-openlaszlo.blog.html labs/newsmatch/progression07/main07.lzx labs/newsmatch/progression08/main08.lzx Log: lots more info on the blog entry. Modified: labs/newsmatch/iphone-openlaszlo.blog.html =================================================================== --- labs/newsmatch/iphone-openlaszlo.blog.html 2007-09-24 22:19:31 UTC (rev 6571) +++ labs/newsmatch/iphone-openlaszlo.blog.html 2007-09-24 22:51:00 UTC (rev 6572) @@ -1,5 +1,7 @@ -Title: iPhone Application Development in OpenLaszlo 4 - +<html> +<body> + + <h1>iPhone Development with OpenLaszlo</h1> <p> At AjaxWorld tomorrow, I'll be giving a talk, with Bret Simister, co-founder of Laszlo Systems, about how we built an iPhone application in OpenLaszlo @@ -52,9 +54,9 @@ (The developer console is the purple bar at the bottom of an OL application page with checkboxes for runtime, debug, and other options.) To get just the app without the console, add query args -<code>lzr=dhtml&lzt=html</code> to your url. For instance, I run my +<tt>lzr=dhtml&lzt=html</tt> to your url. For instance, I run my hello, iPhone app at -<code>http://localhost:8080/trunk/demos/newsmatch-labs/hello/hello_iphone.lzx?lzr=dhtml&lzt=html</code> +<tt>http://localhost:8080/trunk/demos/newsmatch-labs/hello/hello_iphone.lzx?lzr=dhtml&lzt=html</tt> (I've also included index.html in the newsmatch source, which has links to all the examples in this article, with the correct query arguments.) @@ -67,9 +69,9 @@ in front of where the actual content will go, and we show the OpenLaszlo spinner splash. When the app is fully instantiated, it will execute the script at the bottom of the main lzx file: -<code> +<pre> canvas.cover.tapToBegin.setVisible(true); -</code> +</pre> ...which shows the text object that says "tap to begin." That little dance means that the user doesn't see "tap to begin" until the app is ready to interact. <p> @@ -88,7 +90,9 @@ The next thing we did was to find some tasty data, and show it. OpenLaszlo makes this sooo easy and tasty; it's one of my 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. Then we created a tiny class + Yahoo! News</a>; this one has photos for every item. (For development, I grabbed this feed once, + saved it locally as an xml file, then served it up myself; there's no reason to abuse Yahoo's servers.) + Then we created a tiny class to visually represent an item in the rss feed: <pre> <class name="rssitem" bgcolor="0x2d4263" width="70" height="30"> <!-- height, width, color so we can see it --> @@ -255,6 +259,43 @@ </p> <h2>Application Logic</h2> <p> - Didn't I say something about a matching game? Yep. The final code shows how I did this. + Didn't I 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 I did this, by taking advantage of the guid (global unique identifier) that the rss feed provides for each item. I bind the guid to both the <tt>rssimage</tt> and the <tt>rsslabel</tt>. To see if a title matches an image, I just compare their guid's. </p> +<pre> + <view id="gDetails" ... > + <method name="checkForMatch"><![CDATA[ + // only check for a match if both a headline and an image have been selected + if ((("currentTitleSelection" in this) && ("currentImageSelection" in this)) + && (this.currentTitleSelection != null) && (this.currentImageSelection != null)) { + var titleGuid = this.currentTitleSelection.guid; + var imageGuid = this.currentImageSelection.guid; + if (titleGuid == imageGuid) { + gResult.showResult(true); + } else { + gResult.showResult(false); + } + } + ]]></method> + </view> +</pre> +<h2>Birds in Flight</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 I need for this application, and it has lots of duplicate information; it started out at around 150k. I'm grooving on XSLT these days, so I 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 I need. This got the feed info down to around 11k. If I was deploying newsmatch live, I'd insert this filter into the data flow from the rss provider to newsmatch; as is, I just run it by hand offline when I 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 OL 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: +<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;"> + + <div style="width:100%; height:50%; position:absolute; top:0px; left:0px; background-color:#000000;"><img src="resources/cover-news.png" style="display: block; position:absolute; bottom:0%; left:55px"></div> + <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> +</p> <!-- Copyright 2007 Laszlo Systems --> +</body> +</html> Modified: labs/newsmatch/progression07/main07.lzx =================================================================== --- labs/newsmatch/progression07/main07.lzx 2007-09-24 22:19:31 UTC (rev 6571) +++ labs/newsmatch/progression07/main07.lzx 2007-09-24 22:51:00 UTC (rev 6572) @@ -2,7 +2,7 @@ <!-- data --> <dataset name="rss" src="feed.xml" id="ds1" /> - <include href="../resources.lzx" /> + <include href="../newsmatch/resources.lzx" /> <class name="rssimage" width="49" height="34"> Modified: labs/newsmatch/progression08/main08.lzx =================================================================== --- labs/newsmatch/progression08/main08.lzx 2007-09-24 22:19:31 UTC (rev 6571) +++ labs/newsmatch/progression08/main08.lzx 2007-09-24 22:51:00 UTC (rev 6572) @@ -2,7 +2,7 @@ <!-- data --> <dataset name="rss" src="feed.xml" id="ds1" /> - <include href="../resources.lzx" /> + <include href="../newsmatch/resources.lzx" /> <class name="rssimage" width="49" height="34"> _______________________________________________ Laszlo-checkins mailing list [email protected] http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
