Author: ben Date: 2007-09-19 17:46:49 -0700 (Wed, 19 Sep 2007) New Revision: 6535
Added: labs/newsmatch/feed.xml labs/newsmatch/filter.xsl Removed: labs/newsmatch/yahooimags.xml Modified: labs/newsmatch/README.txt labs/newsmatch/classes.lzx labs/newsmatch/main.lzx labs/newsmatch/resources.lzx Log: Added xsl filter to generate slimmed-down feed. Updated sample data. Added lots of developer information to README.txt. Modified: labs/newsmatch/README.txt =================================================================== --- labs/newsmatch/README.txt 2007-09-20 00:30:15 UTC (rev 6534) +++ labs/newsmatch/README.txt 2007-09-20 00:46:49 UTC (rev 6535) @@ -1,8 +1,50 @@ -Use the SOLO deploy wizard. Unzip the contents of the solo deploy zip to -this directory. Modify the generated index file in two ways: +[TODO: give a blank app that will look right on the iPhone] +Running the application: + +To run this application during development, use Safari, and visit: +http://localhost:8080/trunk/demos/newsmatch/main.lzx?lzr=dhtml&lzt=html + +To run this application with the developer's console: +http://localhost:8080/trunk/demos/newsmatch/main.lzx?lzr=dhtml + +And, yes, it runs just the same in swf output: +http://localhost:8080/trunk/demos/newsmatch/main.lzx?lzr=swf8&lzt=html + +Use the SOLO deploy wizard to deploy as dhtml solo. [TODO: explain how.] + +Unzip the contents of the solo deploy zip. +Modify the generated index file main.lzx.html in two ways: + 1) Put in the special viewport meta tag: <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> 2) If desired, edit the wrapper page to be dhtml that matches how the laszlo app looks when startup is complete. + +Notes: +The workflow can be modified to suit your circumstances. I don't run +an OpenLaszlo server live where I can hit it with an iPhone, so I do +most development for the iPhone by running locally in Safari then +solo-deploying. + +yahooimags.xml - for development, we captured a particular snapshot +of the yahoo images rss feed, and hand-edited it to contain just +the information we want to present. This let us minimize uncessary +downloading. In live deployment, you would do server-side +processing on the xml feed to get it into exactly the shape +you want it. XSLT comes to mind, but whatever server-side +technology you like will do. + +When data transfer is slower than a laden african swallow, +you have to be very careful with your bloated feeds. + +Only download exactly what you need. + +Other files in this directory: + +deployer.rb automates these changes and a few others necessary for deployment on the openlaszlo.org website. Your particular deployment needs will +vary. + +resources/ contains various image resources. + Modified: labs/newsmatch/classes.lzx =================================================================== --- labs/newsmatch/classes.lzx 2007-09-20 00:30:15 UTC (rev 6534) +++ labs/newsmatch/classes.lzx 2007-09-20 00:46:49 UTC (rev 6535) @@ -1,8 +1,7 @@ <library> - <!-- merged by ben --> <class name="rssimage" clip="true" > - <attribute name="urlText" value="$path{'content/@url'}"/> + <attribute name="urlText" value="$path{'content/@url'}"/> <attribute name="guid" value="$path{'guid/text()'}" /> <view name="thumbnail" bgcolor="0xAABB00" stretches="both" width="${parent.width}" height="${parent.height}" /> <method event="onclick"> @@ -10,43 +9,43 @@ </method> <method name="loadThumbnail"> - this.thumbnail.setSource(this.urlText); + this.thumbnail.setSource(this.urlText); </method> - + <method name="setSelected" args="s" > // copy image to floatimage // animate floatimage to destination view // set destination view with correct image if ( s ) { floatview.setTarget( this ); - } + } </method> - </class> + </class> <class name="rsslabel" bgcolor="0x2d4263"> <text name="title" fontsize="9" fgcolor="0xc1d3ef" - x="4" y="8" - width="${parent.width-8}" + x="4" y="8" + width="${parent.width-8}" datapath="title[1]/text()" multiline="false" /> <attribute name="content" value="$path{'description/text()'}" type="string" /> <attribute name="link" value="$path{'link/text()'}" type="string"/> - <attribute name="guid" value="$path{'guid/text()'}" /> - + <attribute name="guid" value="$path{'guid/text()'}" /> + <method name="setSelected" args="s" > if ( s ) { this.setBGColor(0x2e60b0) } else this.setBGColor(0x2d4263) </method> - + <handler name="onclick"> parent.selman.select( this ); gDetails.showTitle(this); </handler> - + </class> - + <class name="mygridlayout" extends="layout" > <attribute name="columns" value="2" /> <attribute name="vspacing" value="2" /> @@ -63,7 +62,7 @@ <animator attribute="xoffset" duration="1000" from="350" to="2" /> <method event="onstop"> canvas.loadThumbnails(); - </method> + </method> </animatorgroup> <handler name="oninit" > @@ -77,7 +76,6 @@ super.addSubview( newsub ); </method> - <!-- wrap in rows of 3 at 34x34 icon size --> <method name="update" > <![CDATA[ @@ -86,21 +84,21 @@ var v; // view var ri = 0; //current row index for ( var i = 0; i < this.subviews.length; i++ ) { - // Debug.write(" update x,y:",x,y); + // Debug.write(" update x,y:",x,y); v = this.subviews[i]; - + //set positional params x = xoffset + (hsize+hspacing)*(i % columns); v.setX( x ); ri = parseInt(i / columns); if ( ri < rowgapindex ) y = yoffset + (vsize+vspacing)*ri; else y = yoffset + rowgapvalue + (vsize+vspacing)*ri; - + v.setY( y ); - v.setWidth( hsize ); v.setHeight( vsize ); + v.setWidth( hsize ); v.setHeight( vsize ); } ]]> </method> </class> </library> -<!-- Copyright 2007 Laszlo Systems --> +<!-- Copyright 2007 Laszlo Systems --> Added: labs/newsmatch/feed.xml Property changes on: labs/newsmatch/feed.xml ___________________________________________________________________ Name: svn:mime-type + text/xml Name: svn:eol-style + native Added: labs/newsmatch/filter.xsl Property changes on: labs/newsmatch/filter.xsl ___________________________________________________________________ Name: svn:mime-type + text/plain Name: svn:eol-style + native Modified: labs/newsmatch/main.lzx =================================================================== --- labs/newsmatch/main.lzx 2007-09-20 00:30:15 UTC (rev 6534) +++ labs/newsmatch/main.lzx 2007-09-20 00:46:49 UTC (rev 6535) @@ -1,23 +1,24 @@ -<canvas width="320" height="356" bgcolor="0x000000"> - +<canvas width="320" height="356" bgcolor="0x000000"> + <!-- See README.txt for information. --> + <!-- data --> - <dataset name="rss" src="yahooimags.xml" id="ds1" /> - + <dataset name="rss" src="feed.xml" id="ds1" /> + <!-- classes and resources --> <include href="classes.lzx" /> <include href="resources.lzx" /> - + <!-- Wait to load thumbnails until after the app is initialized --> <method name="loadThumbnails"> - Debug.write("loadThumbnails"); + Debug.write("loadThumbnails"); for (i in gThumbnails.subviews) { gThumbnails.subviews[i].loadThumbnail(); - } + } </method> - + <!-- views --> <view width="${parent.width}" height="${parent.height}" bgcolor="white"> - + <!-- layout --> <simplelayout axis="y" /> @@ -25,40 +26,38 @@ <view id="tbar" width="${parent.width}" opacity="1" > <view resource="headerbkgnd" stretches="width" width="${parent.width}" /> <view resource="logo" x="7" y="7" /> - <text text="match a story with a picture to read the article" multiline="true" y="5" width="90" x="220" fontsize="9" fgcolor="0x2d4263" /> - <animator name="headerfade_anm" attribute="opacity" to="1" duration="500" start="false"> - </animator> - </view> - + <text text="match a story with a picture to read the article" + multiline="true" y="5" width="90" x="220" fontsize="9" fgcolor="0x2d4263" /> + <animator name="headerfade_anm" attribute="opacity" to="1" duration="500" start="false" /> + </view> + <!-- headline and photo content --> <view> <simplelayout axis="x" /> - <view> + <view> <selectionmanager name="selman" toggle="false" /> - <mygridlayout id="txtlayout" hspacing="250" xoffset="400" name="lyout" hsize="106" vsize="34" /> - <rsslabel datapath="rss:/rss/channel/item[1-12]" width="320" /> - + <rsslabel datapath="rss:/rss/channel/item[1-12]" width="320" /> <handler name="oninit" > - super.init(); + super.init(); this.lyout.update(); </handler> - </view> + </view> <view id="gThumbnails"> - <rssimage datapath="rss:/rss/channel/item[1-12]" width="320" /> + <rssimage datapath="rss:/rss/channel/item[1-12]" width="320" /> <mygridlayout id="piclayout" name="lyout" hsize="49" vsize="34" columns="2"/> <handler name="oninit" > - super.init(); + super.init(); this.lyout.update(); </handler> </view> </view> <!-- selection details --> - <view id="gDetails" bgcolor="white" - y="${tbar.height + 3*(txtlayout.vsize + 2) + 2}" - width="${parent.width}" - height="90" + <view id="gDetails" bgcolor="white" + y="${tbar.height + 3*(txtlayout.vsize + 2) + 2}" + width="${parent.width}" + height="90" options="ignorelayout" > <method name="showImage" args="item"> this.currentImageSelection = item; @@ -78,7 +77,7 @@ var titleGuid = this.currentTitleSelection.guid; var imageGuid = this.currentImageSelection.guid; if (titleGuid == imageGuid) { - gResult.showResult(true); + gResult.showResult(true); } else { gResult.showResult(false); } @@ -87,39 +86,40 @@ <method name="reset"> this.currentImageSelection = null; - this.currentTitleSelection = null; + this.currentTitleSelection = null; </method> - + <!-- selected headline and text --> - <view id="gInfo" name="infoArea" width="$once{parent.width-4}" height="$once{parent.height}" bgcolor="0xFFFFFF"> <!-- 0x778daa--> - <text x="6" y="3" fontsize="14" name="title" width="195" multiline="true" height="$once{parent.height-4}" - fgcolor="0x000000" fontstyle="bold" /> + <view id="gInfo" name="infoArea" width="$once{parent.width-4}" height="$once{parent.height}" bgcolor="0xFFFFFF"> + <text x="6" y="3" fontsize="14" name="title" width="195" multiline="true" height="$once{parent.height-4}" + fgcolor="0x000000" fontstyle="bold" /> </view> - + <!-- selected image --> - <view id="gPreview" name="imgpreview" x="$once{parent.width-this.width - 2}" y="0" width="100" height="90" bgcolor="0xffffff" clip="true" /> + <view id="gPreview" name="imgpreview" x="$once{parent.width-this.width - 2}" + y="0" width="100" height="90" bgcolor="0xffffff" clip="true" /> </view> - + </view> - - <view id="floatview" visible="false" > <!-- bgcolor="0xb10db3" --> + + <view id="floatview" visible="false" > <view name="shadow" bgcolor="0x000000" x="3" y="3" width="${parent.width}" height="${parent.height}" opacity=".5" /> <view name="image" width="${parent.width}" height="${parent.height}" stretches="both"/> <method name="setTarget" args="v" > - this.movingView = 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.setHeight(v.height); this.image.setSource(v.urlText); this.setVisible( true ); - animSlide.doStart(); - </method> + animSlide.doStart(); + </method> <animatorgroup name="animSlide" start="false" duration="500" process="simultaneous" > - <animator attribute="y" to="191" motion="easein" /> - <animator attribute="x" to="245" motion="easeout" /> + <animator attribute="y" to="191" motion="easein" /> + <animator attribute="x" to="245" motion="easeout" /> <method event="onstop"> - gDetails.showImage(floatview.movingView); + gDetails.showImage(floatview.movingView); floatview.setVisible(false); </method> </animatorgroup> @@ -128,136 +128,136 @@ this.bg.setBGColor( c); </method> </view> - + <view id="gResult" x="2" y="157" width="316" height="90" > <attribute name="matched" value="false" type="boolean" /> <method name="showResult" args="match"> this.matched = match; if (match) this.showMatch(); - else - this.showMismatch(); + else + this.showMismatch(); </method> <method name="showMatch"> // hide nomatch icon and text - this.nomatch.setVisible(false); + this.nomatch.setVisible(false); this.capsule.txt_nomatch.setVisible( false ); - + // show match text this.capsule.match.setVisible( true ); - + //animate results this.showResultAnim.doStart(); </method> - + <method name="showMismatch"> // show nomatch icon and text - this.nomatch.setVisible(true); + this.nomatch.setVisible(true); this.capsule.txt_nomatch.setVisible( true ); - + // hide match text this.capsule.match.setVisible( false ); - + //animate results this.showResultAnim.doStart(); </method> - + <view name="film" width="${parent.width}" height="$once{parent.height}" bgcolor="0x000000" opacity="0"> - <!-- click to dismiss --> + <!-- click to dismiss --> <method event="onclick"> gResult.hideResult(); - </method> + </method> </view> - <method name="hideResult"> + <method name="hideResult"> this.hideResultAnim.doStart(); if (this.matched) { - this.nomatch.setVisible(false); + this.nomatch.setVisible(false); gMoreInfo.title.setText(gDetails.currentTitleSelection.title.text); - gMoreInfo.txt.setText(gDetails.currentTitleSelection.content); - gMoreInfo.img.setSource(gDetails.currentImageSelection.urlText); + gMoreInfo.txt.setText(gDetails.currentTitleSelection.content); + gMoreInfo.img.setSource(gDetails.currentImageSelection.urlText); gMoreInfo.show(); - } + } </method> - + <view name="capsule" opacity="0" x="76" y="27" width="156" > <view name="capl" x="0" resource="circle" /> <view name="capsule" bgcolor="0xFFFFFF" x="15" width="${parent.width - 30}" height="37" /> - <view name="capr" x="$once{parent.width - width}" resource="circle" /> - - <text name="txt_nomatch" text="NO MATCH" x="17" y="6" width="$once{parent.width-10}" fontsize="16" fontstyle="bold" resize="true" /> - + <view name="capr" x="$once{parent.width - width}" resource="circle" /> + + <text name="txt_nomatch" text="NO MATCH" x="17" y="6" width="$once{parent.width-10}" + fontsize="16" fontstyle="bold" resize="true" /> + <view name="match" x="45" y="6" width="$once{parent.width-10}" > <text text="MATCH" fontsize="16" fontstyle="bold" resize="true" y="-5"/> <text text="click to read article" fontsize="9" y="16" x="-10" /> </view> - + </view> - - <animatorgroup name="showResultAnim" start="false"> - <animator - attribute="opacity" to="0.7" start="false" duration="300" target="gResult.film"/> - <animator - attribute="opacity" to="1" start="false" duration="0" target="gResult.capsule"/> + <animatorgroup name="showResultAnim" start="false"> + <animator + attribute="opacity" to="0.7" start="false" duration="300" target="gResult.film"/> + <animator + attribute="opacity" to="1" start="false" duration="0" target="gResult.capsule"/> + <method event="onstop"> if (!gResult.matched) { gResult.hideResultAnim.doStart(); } - </method> + </method> </animatorgroup> - + <animatorgroup name="hideResultAnim" process="sequential" start="false"> - <animator duration="1000" /> <!-- pause for a second --> + <animator duration="1000" /> <!-- pause for a second --> <animatorgroup> - <animator - attribute="opacity" to="0" start="false" duration="0" target="gResult.capsule"/> - <animator - attribute="opacity" to="0" start="false" duration="500" target="gResult.film"/> + <animator + attribute="opacity" to="0" start="false" duration="0" target="gResult.capsule"/> + <animator + attribute="opacity" to="0" start="false" duration="500" target="gResult.film"/> </animatorgroup> - </animatorgroup> - + <view id="gMismatch" name="nomatch" x="203" y="27" width="38" height="38" visible="false" > - <view name="nmc" x="-7" resource="circle" height="38" width="38"/> - <view name="nmi" resource="nomatchicon" x="-1" y="6" height="38" width="38" /> + <view name="nmc" x="-7" resource="circle" height="38" width="38"/> + <view name="nmi" resource="nomatchicon" x="-1" y="6" height="38" width="38" /> </view> - </view> - + </view> + <view id="gMoreInfo" width="$once{parent.width}" height="$once{parent.height}" bgcolor="0xFFFFFF" y="${canvas.height}"> <animator name="animIn" attribute="y" to="0" duration="1000" start="false" /> - <animator name="animOut" attribute="y" to="${canvas.height}" duration="1000" start="false" /> + <animator name="animOut" attribute="y" to="${canvas.height}" duration="1000" start="false" /> <method name="show"> animIn.doStart(); </method> <simplelayout axis="y" spacing="2" /> - <text name="title" width="$once{gInfo.title.width}" text="Article Title" - y="8" x="$once{gInfo.title.x}" fontstyle="bold" + <text name="title" width="$once{gInfo.title.width}" text="Article Title" + y="8" x="$once{gInfo.title.x}" fontstyle="bold" multiline="true" /> <text name="txt" multiline="true" width="$once{gInfo.title.width}" height="$once{parent.height}" x="$once{gInfo.title.x}" y="20" /> - <view name="img" x="${gPreview.x-5}" width="${gPreview.width}" y="8" - height="$once{gPreview.height}" clip="true" + <view name="img" x="${gPreview.x-5}" width="${gPreview.width}" y="8" + height="$once{gPreview.height}" clip="true" options="ignorelayout" /> <method event="onclick"> animOut.doStart(); </method> - </view> + </view> <view name="cover" width="320" height="356" onclick="coverslide_anm.doStart()" > <view name="top" bgcolor="0x000000" height="178" width="320" > <view resource="resources/cover-news.png" x="55" y="$once{parent.height-height}" /> </view> - + <view name="bottom" bgcolor="0xffffff" height="178" width="320" y="178" > <view resource="resources/cover-match.png" x="55" y="0" /> </view> - + <animatorgroup name="coverslide_anm" process="simultaneous" start="false" duration="500" > <animator target="${cover.top}" attribute="y" to="-180" /> <animator target="${cover.bottom}" attribute="y" to="360" /> @@ -265,22 +265,20 @@ parent.tapToBegin.setVisible(false); </method> </animatorgroup> - - <text name="tapToBegin" y="300" x="120" visible="false" text="tap to begin"> - </text> - + + <text name="tapToBegin" y="300" x="120" visible="false" text="tap to begin" /> + <handler name="onstop" reference="coverslide_anm" > this.setVisible(false); txtlayout.intro.doStart(); - // tbar.headerfade_anm.doStart(); </handler> - + </view> - + <script> canvas.cover.tapToBegin.setVisible(true); </script> - + </canvas> -<!-- Copyright 2007 Laszlo Systems --> +<!-- Copyright 2007 Laszlo Systems --> Modified: labs/newsmatch/resources.lzx =================================================================== --- labs/newsmatch/resources.lzx 2007-09-20 00:30:15 UTC (rev 6534) +++ labs/newsmatch/resources.lzx 2007-09-20 00:46:49 UTC (rev 6535) @@ -1,7 +1,7 @@ <library> <resource name="headerbkgnd" src="resources/header-bkgnd.png" /> <resource name="logo" src="resources/logo.png" /> - <resource name="nomatchicon" src="resources/no-icon-8.png" /> - <resource name="circle" src="resources/circle-white.png" /> + <resource name="nomatchicon" src="resources/no-icon-8.png" /> + <resource name="circle" src="resources/circle-white.png" /> </library> -<!-- Copyright 2007 Laszlo Systems --> +<!-- Copyright 2007 Laszlo Systems --> Deleted: labs/newsmatch/yahooimags.xml _______________________________________________ Laszlo-checkins mailing list [email protected] http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
