Author: ben Date: 2007-09-24 21:22:54 -0700 (Mon, 24 Sep 2007) New Revision: 6579
Modified: labs/newsmatch/iphone-openlaszlo.blog.html Log: cleaned up markup Modified: labs/newsmatch/iphone-openlaszlo.blog.html =================================================================== --- labs/newsmatch/iphone-openlaszlo.blog.html 2007-09-25 04:03:12 UTC (rev 6578) +++ labs/newsmatch/iphone-openlaszlo.blog.html 2007-09-25 04:22:54 UTC (rev 6579) @@ -1,166 +1,122 @@ +<?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> +<h1>iPhone Development with OpenLaszlo</h1> -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. +<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> -We wrote this app from scratch in two days, using OpenLaszlo. -It ran on the iPhone, with very few iPhone-specific modifications, from the -very first versions. +<p>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.</p> -In this article, we'll walk you through the progression -of NEWSMATCH from an empty application to (almost) the finished product, -highlighting how OpenLaszlo facilitates rapid development of iPhone -apps. +<p>We wrote this app from scratch in two days, using OpenLaszlo. It ran on the iPhone, with very few iPhone-specific modifications, from the very first versions. In this article, we'll walk you through the progression of NEWSMATCH from an empty application to (almost) the finished product, highlighting how OpenLaszlo facilitates rapid development of iPhone apps.</p> -OpenLaszlo is an XML and JavaScript platform for creating -runtime-independent rich internet applications. An OpenLaszlo -application can be compiled to run in Flash Player, or in browser-native DHTML, in most modern browsers. Yes, even IE6. More importantly for this article, OpenLaszlo applications run just fine in Safari. Which means that, in theory, they should more-or-less work on the iPhone. +<p><a href="http://www.openlaszlo.org";>OpenLaszlo</a> is an XML and JavaScript platform for creating runtime-independent rich internet applications. An OpenLaszlo application can be compiled to run in Flash Player, or in browser-native DHTML, in most modern browsers. Yes, even IE6. More importantly for this article, OpenLaszlo applications run just fine in Safari. Which means that, in theory, they should more-or-less work on the iPhone.</p> -When Apple announced that the SDK for iPhone application development was going to be (just) Ajax, we were very excited to build an OpenLaszlo application for it. We went to the boot camp with every hope that building an iPhone application would be as easy as building any other OpenLaszlo application, but we were aprehensive too--what if it didn't work? It did work, as you'll see-- proving that our strategy of producing high-performance standards-compliant DHTML was succeeding. +<p>When Apple announced that the SDK for iPhone application development was going to be (just) Ajax, we were very excited to build an OpenLaszlo application for it. We went to the boot camp with every hope that building an iPhone application would be as easy as building any other OpenLaszlo application, but we were aprehensive too--what if it didn't work? It did work, as you'll see-- proving that our strategy of producing high-performance standards-compliant DHTML was succeeding.</p> -(From this point on, if you want to follow along, get a recent nightly -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 NEWSMATCH code is available in -<a href="http://svn.openlaszlo.org/labs/newsmatch";>our source code repository</a>. +<p>(From this point on, if you want to follow along, get a recent nightly 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 NEWSMATCH code is available in <a href="http://svn.openlaszlo.org/labs/newsmatch";>our source code repository</a>.</p> -For the purposes of this article, we've rewritten the progression to be -cleaner and easier to follow, but kept the same development approach and patterns. If you would like to see the actual hour-by-hour development as it happened, check the svn log -from <a href="http://www.openlaszlo.org/svn/sandbox/ben/smush/"; -title="Revision 6569: /sandbox/ben/smush">Ben's sandbox</a>.) +<p>For the purposes of this article, we've rewritten the progression to be cleaner and easier to follow, but kept the same development approach and patterns. If you would like to see the actual hour-by-hour development as it happened, check the svn log from <a href="http://www.openlaszlo.org/svn/sandbox/ben/smush/"; title="subversion">Ben's sandbox</a>.)</p> -<h2>Hello, iPhone</h2> +<h2>Hello, iPhone <a href="http://svn.openlaszlo.org/labs/newsmatch/hello/hello_iphone.lzx";>(source)</a>. <a href="http://labs.openlaszlo.org/ipdc/hello/"; target="newsmatch_app" title="hello, iPhone">(live)</a></h2> -<a href="http://svn.openlaszlo.org/labs/newsmatch/hello/hello_iphone.lzx";>(source)</a>. -<a href="http://labs.openlaszlo.org/ipdc/hello/"; target="newsmatch_app" title="hello, iPhone">(live)</a> -To get started, we wrote a simple, four-line application to prove to ourselves that we could get something running on the iPhone very quickly. To run it on the iPhone, we invoke it: +<p>To get started, we wrote a simple, four-line application to prove to ourselves that we could get something running on the iPhone very quickly. To run it on the iPhone, we invoke it:</p> -<tt>http://localhost:8080/trunk/demos/newsmatch-labs/hello/hello_iphone.lzx?lzr=dhtml&lzt=html</tt> +<p><tt>http://localhost:8080/trunk/demos/newsmatch-labs/hello/hello_iphone.lzx?lzr=dhtml&lzt=html</tt></p> -Notice the query arguments - +<p>Notice the query arguments:</p> +<pre> <tt>lzr=dhtml</tt> +</pre> -means that the Laszlo Runtime is to be dhtml -- this tells the compiler which output format to translate the source to. - +<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> -means that the "wapper" for the application should be simple HTML. +<p>means that the "wapper" for the application should be simple HTML.</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>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> -(We have also included index.html in the newsmatch source, which has links to -all the examples in this article, with the correct query arguments.) +<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> -<h2>"Tap to begin"</h2> -<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> -The next thing we did was to create a startup experience. We knew the iPhone had -pretty slow data transfer when running over EDGE, so we wanted to give the user something to look at right away. So, we started NEWSMATCH with a kind of cover (the view named "cover") in front of where the actual content would go. When the program loads it shows the OpenLaszlo spinner splash. +<p>The next thing we did was to create a startup experience. We knew the iPhone had pretty slow data transfer when running over EDGE, so we wanted to give the user something to look at right away. So, we started NEWSMATCH with a kind of cover (the view named "cover") in front of where the actual content would go. When the program loads it shows the OpenLaszlo spinner splash.</p> -When the app is fully instantiated, it executes the script at the bottom of the -main lzx file: +<p>When the app is fully instantiated, it executes the script at the bottom of the main lzx file:</p> <pre> canvas.cover.tapToBegin.setVisible(true); </pre> -...which shows the text object that says "tap to begin." This little dance means that the user doesn't see "tap to begin" until the applicatoin is actually ready to interact. -<p> -When the user eventually does hit "tap to begin", the <tt>cover</tt> view catches the click, and starts the <tt>coverslide_anm</tt>. This is what we call an <i>animator</i>, a nifty sort of controller for visual transitions. The animator slides the two pieces of the cover offscreen, revealing the application content underneath. That animator, in turn, hides the "tap to begin" text when it starts animating, and hides the entire cover when it's done animating. - -That's a bit of a complex process just to get started, but it is really just a few lines of code that creates a "lively" feeling. -</p> -<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 - <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>...which shows the text object that says "tap to begin." This little dance means that the user doesn't see "tap to begin" until the application is actually ready to interact.</p> + +<p>When the user eventually does hit "tap to begin", the <tt>cover</tt> view catches the click, and starts the <tt>coverslide_anm</tt>. This is what we call an <i>animator</i>, a nifty sort of controller for visual transitions. The animator slides the two pieces of the cover offscreen, revealing the application content underneath. That animator, in turn, hides the "tap to begin" text when it starts animating, and hides the entire cover when it's done animating.</p> + +<p>That's a bit of a complex process just to get started, but it is really just a few lines of code that creates a "lively" feeling.</p> + +<h2>Feed me! Bind me! <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></h2> + +<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 <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 - <pre> - <rssitem datapath="rss:/rss/channel/item[1]" /> - </pre> - which means <em>"Create an instance of the rssitem class, and associate it with the first item in the rss dataset."</em> -</p> -<p> -Now here, a subtle problem arises. Since we have not seen the data, we don't know how many records will match our xpath query, which means that we don't know how many <tt>rssitem</tt>s we have. It could be zero, one, or several. Not knowing what will come, how do we plan for it? - -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> - <pre> - <rssitem datapath="rss:/rss/channel/item[1-12]" /> - </pre> - We throw in a layout to arrange these twelve items in a column: - <pre> - <simplelayout spacing="3" axis="y" /> - </pre> - 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>. -<a href="http://labs.openlaszlo.org/ipdc/progression03/"; title="progression03" target="newsmatch_app" >(live)</a> -<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: - <pre> - <view name="thumbnail" bgcolor="0x888888" source="$path{'content/@url'}"/> - </pre> -</p> -<h2>Tell me more...</h2> -<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> -<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. - <pre> +</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]" /> +</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> + +<p>Now here, a subtle problem arises. Since we have not seen the data, we don't know how many records will match our xpath query, which means that we don't know how many <tt>rssitem</tt>s we have. It could be zero, one, or several. Not knowing what will come, how do we plan for it?</p> + +<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]" /> +</pre> + +<p>We throw in a layout to arrange these twelve items in a column:</p> +<pre> + <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> + +<h2>Pretty pictures, please? <a href="http://svn.openlaszlo.org/labs/newsmatch/progression03/main03.lzx";>(source)</a>. <a href="http://labs.openlaszlo.org/ipdc/progression03/"; title="progression03" target="newsmatch_app">(live)</a></h2> + +<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'}"/> +</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> + +<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}"/> - </view> - </pre> -</p> + <text fgcolor="0x19195B" text="$path{'description/text()'}" + x="100" y="32" multiline="true" width="$once{parent.width-102}"/> + </view> +</pre> -<h2>Less ugly, please.</h2> -<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>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> @@ -204,9 +160,8 @@ The ruby folks call this "duck typing." We just call it convenient. </p> -<h2>Swoosh, swoop</h2> -<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>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 @@ -240,7 +195,7 @@ </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: + does the app start loading the image resource:</p> <pre> <class name="rssimage" > <attribute name="sourceUrl" value="$path{'content/@url'}" type="string" /> @@ -254,7 +209,7 @@ </class> </pre> - This way, the application starts to appear while the images are still loading. This is another tweak +<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> @@ -280,7 +235,7 @@ ]]></method> </view> </pre> -<h2>Birds in Flight</h2> +<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> @@ -288,7 +243,7 @@ <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: + 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;"> @@ -297,7 +252,7 @@ <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> + <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 --> _______________________________________________ Laszlo-checkins mailing list [email protected] http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
