[Laszlo-checkins] r6535 - labs/newsmatch
ben@openlaszlo.org
ben at openlaszlo.org
Wed Sep 19 17:46:51 PDT 2007
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
More information about the Laszlo-checkins
mailing list