1. 引言
下面我们要讲的这个应用是相册应用,在该应用中通过dataset远程请求图片信息，根据当前设计的图片显示方式进行图片显示。2. 需求分析
2.1 首先运行该应用以后，通过dataset来远程采集数据，如果能够正确返回数据，在默认方式下每页显示4张图片，我们可以进行通过左右切换来进行页面信息的查看。在该页面中，我们还可以进行图片搜索，2.2 可以弹出菜单选择显示图片的方式，有每页显示4张图片，9张图片，全屏显示和滑动显示。
2.3 在全屏显示图片时，还可以进行具体图片的信息查看。
3. 编码详细讲解。
功能在上面我们已经基本上进行分析了，下面来讲一下具体的代码编写：1.1 远程数据采集
之前我们讲过通过ajax来请求数据，在该应用中显示的信息和图片都是通过dataset进行远程访问所得到的实时数据，把该部分代码放在dataman.lzx中，具体代码如下：
<library>
<!--
GLOBALS
-->
<node id="gGlobals">
<attribute name="SHAREDSECRET" type="string" value="b199acb45fd055e7"/>
<attribute name="API_KEY" type="string" value="563a40afe6128e60145dd1e347911e54"/>
<attribute name="RESTSRC" type="string" value="http://68.142.214.24/services/rest/"/>
</node>
<!--
DATA MANAGER
-->
<node name="gDataMan">
<!--
builds, signs and sends FlickrRequest
results go in provided dataset
REQUIRED ARG - ds - dataset to make call with
REQUIRED ARG - argobjarr - array of objects {argname:[name], argvalue:[value]}
SUPPORTS ALL METHODS DESCRIBED IN FLICKR SERVICES API
http://www.flickr.com/services/api/
-->
<method name="doFlickrRequest" args="ds, argobjarr"><![CDATA[
ds.setQueryParams([]);
var url = gGlobals.RESTSRC+"?";
ds.setSrc(gGlobals.RESTSRC);
argobjarr.push({argname:"api_key", argvalue:gGlobals.API_KEY});
var argcomparator = function (a, b) {
if (a.argname < b.argname) return -1;
if (a.argname > b.argname) return 1;
return 0
}
argobjarr.sort(argcomparator)
for (var i=0;i<argobjarr.length;i++)
{
var argobj=argobjarr[i];
ds.setQueryParam(argobj.argname, argobj.argvalue);
// url+=argobj.argname+"="+argobj.argvalue+"&"
}
ds.doRequest();
]]></method>
<!-- Only search for photos with a creative commons license:
http://creativecommons.org/licenses/by/2.0/
-->
<method name="loadPhotosByTag" args="tags">
var argobj;
if (tags == "interesting") {
argobj = [
{argname:"method",
argvalue:"flickr.interestingness.getList"}
]
} else if (tags=="recent") {
argobj = [
{argname:"method",
argvalue:"flickr.photos.getRecent"}
]
} else {
// search by tags
argobj = [
{argname:"method", argvalue:"flickr.photos.search"},
// Any Creative-Commons license (all include attribution)
{argname:"license", argvalue:"1,2,3,4,5,6"},
{argname:"tags", argvalue:tags},
{argname:"tag_mode", argvalue:"all"},
{argname:"sort", argvalue:"interestingness-desc"}
]
}
header_txt.setText('loading tags: ' + tags);
this.doFlickrRequest(photods, argobj);
</method>
<!-- Load details for the photo -->
<method name="loadPhotoDetails" args="photo_id">
var argobj = [
{argname:"method",
argvalue:"flickr.photos.getInfo"},
{argname:"photo_id",
argvalue: photo_id}
];
this.doFlickrRequest(canvas.infods, argobj);
//loadSizeInfo(photo_id);
</method>
<!-- Load owner info -->
<method name="loadUserInfo" args="user_id">
//Debug.write("loadUserInfo");
var argobj = [
{argname:"method",
argvalue:"flickr.people.getInfo"},
{argname:"user_id",
argvalue: user_id}
];
this.doFlickrRequest(canvas.userds, argobj);
</method>
<!-- Load size info. -->
<method name="loadSizeInfo" args="photo_id">
// Debug.write("loadSizeInfo");
var argobj = [
{argname:"method",
argvalue:"flickr.photos.getSizes"},
{argname:"photo_id",
argvalue: photo_id}
];
gDataMan.doFlickrRequest(canvas.sizeds, argobj);
</method>
</node>
<!-- ds to query for photos -->
<dataset name="photods" type="http"/>
<!-- ds to query for photo info -->
<dataset name="infods" type="http"/>
<!-- photo sizes -->
<dataset name="sizeds" type="http"/>
<!-- ds to query for user info -->
<dataset name="userds"/>
</library>
在该lzx文件中，首先定义了photods、infods、sizeds和userds4个dataset数据集，用来进行远程请求不同的数据信息。每次通过dataset请求数据时，需要调用gDataMan.doFlickRequest（）接口，传给它的参数分别为dataset对象和查询的内容。通过ds.setSrc(url)来设置查询的路径，ds.setQueryParam()设置查询的参数。当设置完查询的路径以后，通过ds.doRequest()方法把请求发送到指定的目标资源。1.2 界面编写。
在上面的分析中，我们把界面部分主要分成三部分：
主界面index.lzx主要用来显示进行图片的显示、搜索，由于在该界面中每次显示最多图片的数量为9张，所以我们定义了9个view视图来进行显示，根据设置决定让其中几个视图进行显示，并改变它的位置。
<canvas width="240" height="320" proxied="true" title="Mobiel Album" >
<include href="dataman.lzx"/>
<script>var photolen=0;
var serverg,idg,secretg,sg,argg,spersonal=new Array(3);
var index=0,focusindex=1,page=1,titlefocus=1;//focus position 10 is inputbox
var leng=0,initFocus=0;
var flag=0;
var searchFocus=0;
var state=0,tempstate=0;//state 0：four pic；1：nine pic；2：scroll；3：full
var popmenuvisible=0,popfoucs=0,popvalue=18;
var pagesize=4,fullanddetail=0;//0full 1detail
var sg,sgid,phototitle;
</script>
<method event="oninit">
var argobj = [
{argname:"method",
argvalue:"flickr.photos.search"},
{argname:"tags",
argvalue:"interesting"}
]
gDataMan.doFlickrRequest(photods, argobj);
</method>
<class name="photo" extends="view" />
<view name="container" id="container" resource="albumdi3.jpg" bgcolor="0x000000" width="${parent.width}" height="${parent.height}" clip="true">
<attribute name="lastphoto" value="null" />
<attribute name="from" value="1" />
<attribute name="to" value="9" />
<view id="titleView" y="23" visible="true" resource="biaoti.gif"/>
<text width="0" id="inform" datapath="photods:/rsp/photos">
<method name="ar" event="ondata">
<![CDATA[
var i,a,b,c;
var v;
index=0;
argg=this.datapath;
leng=argg.getNodeCount();
if(leng>0 && index==0){index=1;}
sg=placeView(index,state,leng,argg);
phototitle=getPhototitle();//save every pic's title
LzFocus.setFocus(v1);
]]>
</method>
</text>
<text id="everyphototitle" fgcolor="#ffffff" fontsize="14" text="phototitle" y="47"></text>
<view id="v" x="26.5" y="72">
<attribute name="radio" value="90" />
<view width="${parent.radio}" height="${parent.radio}" bgcolor="black" stretches="both" focusable="true" id="v1" onfocus="parent.focus()">
<handler name="onload" >
parent.loadph(this);
if(initFocus==0){ initFocus=1;
}
</handler>
</view>
<view x="${8+90}" width="90" height="90" bgcolor="black" stretches="both" focusable="true" id="v2" onfocus="parent.focus()">
<handler name="onload" >
parent.loadph(this);
</handler>
</view>
<view y="98" width="90" height="90" bgcolor="black" stretches="both" focusable="true" id="v3" onfocus="parent.focus()">
<handler name="onload" >
parent.loadph(this);
</handler>
</view>
<view x="98" y="${90+8}" width="90" height="90" bgcolor="black" stretches="both" focusable="true" id="v4" onfocus="parent.focus()">
<handler name="onload" >
parent.loadph(this);
</handler>
</view>
<view x="${8+57}" y="${57+8}" width="57" height="57" bgcolor="black" stretches="both" focusable="true" id="v5" onfocus="parent.focus()" visible="false">
<handler name="onload" >
parent.loadph(this);
</handler>
</view>
<view x="${8+8+57+57}" y="${57+8}" width="57" height="57" bgcolor="black" stretches="both" focusable="true" id="v6" onfocus="parent.focus()" visible="false">
<handler name="onload" >
parent.loadph(this);
</handler>
</view>
<view y="${57+57+8+8}" width="57" height="57" bgcolor="black" stretches="both" focusable="true" id="v7" onfocus="parent.focus()" visible="false">
<handler name="onload" >
parent.loadph(this);
</handler>
</view>
<view x="${8+57}" y="${57+57+8+8}" width="57" height="57" bgcolor="black" stretches="both" focusable="true" id="v8" onfocus="parent.focus()" visible="false">
<handler name="onload" >
parent.loadph(this);
</handler>
</view>
<view x="${8+8+57+57}" y="${57+57+8+8}" width="57" height="57" bgcolor="black" stretches="both" focusable="true" id="v9" onfocus="parent.focus()" visible="false">
<handler name="onload" >
parent.loadph(this);
</handler>
</view>
<method name="focus">
<![CDATA[
var foc=LzFocus.getFocus();
var refx,refy;
if(focusindex!=10){
refx=foc.x+26.5;
refy=foc.y+72;
}else{
refx=inputbox.parent.x+inputbox.x;
refy=inputbox.parent.y+inputbox.y;
}
draw.refresh(refx,refy,foc.width,foc.height);
everyphototitle.setText(phototitle[index+focusindex-1]);
pageinfo.setText(" page "+Math.ceil(index/pagesize)+" of "+Math.floor(leng/pagesize));
]]>
</method>
<method name="loadph" args="vi">
var stateloc;
if(state==0){
stateloc=90;
pagesize=4;
}
else if(state==1){
stateloc=57;
pagesize=9;
}
else if(state==2)stateloc=230;
else if(state==3){
stateloc=130;
pagesize=3;
}
layoutEveryView(state,vi);
place(vi.x,vi.y,vi,vi.resourcewidth,vi.resourceheight,stateloc);
this.focus();
</method>
</view>
<view id="leftArrow" x="20" y="${72+54}" visible="false" resource="zuo.gif"/>
<view id="rightArrow" x="191" y="${72+54}" visible="false" resource="you.gif"/>
<text y="260" id="pageinfo" x="${parent.width-this.width}" fontsize="12" fgcolor="#BCBBBB" text=""/>
<text x="170" y="267" id="fullchanget" fontsize="14" visible="false" fgcolor="#ffffff" text="DETAILS"/>
<view x="142" y="264" id="fullchangev" visible="false" resource="you.gif"/>
<view y="275" id="searchview" width="${parent.width}" bgcolor="white">
<view resource="fangdajing.gif"/>
<text name="search" x="20" fontsize="14" fgcolor="#8A8A8A" text="Flickr:"/>
<inputtext x="${20+parent.search.width}" id="inputbox" fontsize="14" focusable="true" text="interesting"/>
<switch>
<when runtime="eloo">
<handler name="onkeydown" reference="LzKeys" args="k">
if((k==66||k==0x1012) ){
var argobj = [
{argname:"method",
argvalue:"flickr.photos.search"},
{argname:"tags",
argvalue:inputbox.getText()}
]
gDataMan.doFlickrRequest(photods, argobj); }
</handler>
</when>
<otherwise>
<handler name="onkeydown" reference="LzKeys" args="k">
if((k==13) ){
var argobj = [
{argname:"method",
argvalue:"flickr.photos.search"},
{argname:"tags",
argvalue:inputbox.getText()}
]
gDataMan.doFlickrRequest(photods, argobj);
}
</handler>
</otherwise>
</switch>
</view>
<text x="20" y="300" id="lfkey" fgcolor="#ffffff" fontsize="16" text="OPTIONS"/>
<text x="${parent.width-this.width-20}" y="300" id="rfkey" fgcolor="#ffffff" fontsize="16" text="EXIT"/>
</view>
<handler name="onkeydown" reference="LzKeys" args="k"><![CDATA[
var f=LzFocus.getFocus();
if(k==65 || k==0x100c){//A
if(popmenuvisible==1){
popmenuvisible=0;
tempstate=state;
state=popfoucs;
lfkey.setText("OPTIONS");
rfkey.setText("EXIT");
popmenu.setVisible(false);
if(state==2){ //full
titleView.setVisible(false);
v1.setSource(sg[index+focusindex-1]);
titlefocus=focusindex;
focusindex=1;
LzFocus.setFocus(v1);
everyphototitle.setVisible(false);
fullchangev.setVisible(true);
fullchanget.setVisible(true);
lfkey.setVisible(false);
pageinfo.setVisible(false);
searchview.setVisible(false);
rfkey.setText("BACK");
}
else{
titleView.setVisible(true);
everyphototitle.setVisible(true);
fullchangev.setVisible(false);
fullchanget.setVisible(false);
lfkey.setVisible(true);
pageinfo.setVisible(true);
searchview.setVisible(true);
rfkey.setText("EXIT");
}
if(state==3){
focusindex=2;LzFocus.setFocus(v2);
leftArrow.setVisible(true);
rightArrow.setVisible(true);
}
else{
focusindex=1; LzFocus.setFocus(v1);
leftArrow.setVisible(false);
rightArrow.setVisible(false);
}
nextPage(index,state,leng,argg,sg);
layoutView(state);
fullanddetail=1;
}else if(state!=2) {
popmenuvisible=1;
popmenu.setVisible(true);
lfkey.setText("SELECT");
rfkey.setText("CANCEL");
}
}else if(k==68 || k==0x100d){ //D
popmenu.setVisible(false);
popmenuvisible=0;
lfkey.setText("OPTIONS");
rfkey.setText("EXIT");
if(popmenuvisible==0 && state==2){
if(fullanddetail==1){
//v1.setVisible(true);
details.setVisible(false);
fullanddetail=0;
backphotodetails();
rfkey.setText("BACK");
fullchanget.setText("DETAILS");
focusindex=1; LzFocus.setFocus(v1);
}else{
state=tempstate;
rfkey.setText("EXIT");
nextPage(index,tempstate,leng,argg,sg);
layoutView(tempstate);
titleView.setVisible(true);
everyphototitle.setVisible(true);
fullchangev.setVisible(false);
fullchanget.setVisible(false);
lfkey.setVisible(true);
pageinfo.setVisible(true);
searchview.setVisible(true);
focusindex=4; LzFocus.setFocus(v4);
}
}
}else if(k==38 || k==0x1010){
if(popmenuvisible==1){
if(popfoucs>0){
popfoucs--;
popvalue=popvalue-30;
popmenufocus.setY(popvalue);
}
}else if(state==0){
if(focusindex==10){
focusindex=3;
LzFocus.setFocus(v3);
}else if(focusindex==3){
focusindex=1;
LzFocus.setFocus(v1);
}
else if(focusindex==4){
focusindex=2;
LzFocus.setFocus(v2);
}
}else if(state==1){
if(focusindex==10){
focusindex=7;
LzFocus.setFocus(v7);
}else if(focusindex==7){
focusindex=4;
LzFocus.setFocus(v4);
}
else if(focusindex==4){
focusindex=1;
LzFocus.setFocus(v1);
}
else if(focusindex==8){
focusindex=5;
LzFocus.setFocus(v5);
}
else if(focusindex==5){
focusindex=2;
LzFocus.setFocus(v2);
}
else if(focusindex==9){
focusindex=6;
LzFocus.setFocus(v6);
}
else if(focusindex==6){
focusindex=3;
LzFocus.setFocus(v3);
}
}
else if(state==2){
if(focusindex==10){
focusindex=1; LzFocus.setFocus(v1);
}
}else if(state==3){
if(focusindex==10){
focusindex=2; LzFocus.setFocus(v2);
}
}
} else if(k==40 || k==0x1011){
if(popmenuvisible==1){
if(popfoucs<3){
popfoucs++;
popvalue=popvalue+30;
popmenufocus.setY(popvalue);
}
}else if(state==0){
if(focusindex==1){
focusindex=3;
LzFocus.setFocus(v3);
}else if(focusindex==3){
focusindex=10;
LzFocus.setFocus(inputbox);
}
else if(focusindex==2){
focusindex=4;
LzFocus.setFocus(v4);
}
}else if(state==1){
if(focusindex==1){
focusindex=4;
LzFocus.setFocus(v4);
}else if(focusindex==4){
focusindex=7;
LzFocus.setFocus(v7);
}
else if(focusindex==7){
focusindex=10;
LzFocus.setFocus(inputbox);
}
else if(focusindex==2){
focusindex=5;
LzFocus.setFocus(v5);
}
else if(focusindex==5){
focusindex=8;
LzFocus.setFocus(v8);
}
else if(focusindex==3){
focusindex=6;
LzFocus.setFocus(v6);
}
else if(focusindex==6){
focusindex=9;
LzFocus.setFocus(v9);
}
}
else if(state==2){
if(focusindex==10){
focusindex=1;LzFocus.setFocus(v1);
}
}else if(state==3){
if(focusindex==2){
focusindex=10; LzFocus.setFocus(inputbox);
}
}
}else if( (k==37 || k==0x100e) && popmenuvisible==0){
if(state==0){
if(focusindex==2){
focusindex=1;
LzFocus.setFocus(v1);
}else if(focusindex==4){
focusindex=3;
LzFocus.setFocus(v3);
}
else if(focusindex==1&& page>1){
index=index-4;
nextPage(index,state,leng,argg,sg);
page--;
}
}else if(state==1){
if(focusindex==3){
focusindex=2; LzFocus.setFocus(v2);
}else if(focusindex==2){
focusindex=1;
LzFocus.setFocus(v1);
}
else if(focusindex==6){
focusindex=5;
LzFocus.setFocus(v5);
}
else if(focusindex==5){
focusindex=4;
LzFocus.setFocus(v4);
}
else if(focusindex==9){
focusindex=8;
LzFocus.setFocus(v8);
}
else if(focusindex==8){
focusindex=7;
LzFocus.setFocus(v7);
}
else if(focusindex==1&& page>1){
index=index-9;
nextPage(index,state,leng,argg,sg);
page--;
}
}
else if(state==2){
if(focusindex==10){
focusindex=1;
LzFocus.setFocus(v1);
}
}else if(state==3){
if(index>2){
index--;
nextPage(index,state,leng,argg,sg);
}
}
}else if( (k==39|| k==0x100f) && popmenuvisible==0){
if(state==0){
if(focusindex==1){
focusindex=2;LzFocus.setFocus(v2);
}else if(focusindex==3){
focusindex=4;
LzFocus.setFocus(v4);
}
else if(focusindex==4&& page<leng/4){
index=index+4;
nextPage(index,state,leng,argg,sg);
page++;
}
}else if(state==1){
if(focusindex==1){
focusindex=2;LzFocus.setFocus(v2);
}else if(focusindex==2){
focusindex=3;
LzFocus.setFocus(v3);
}
else if(focusindex==4){
focusindex=5;
LzFocus.setFocus(v5);
}
else if(focusindex==5){
focusindex=6;
LzFocus.setFocus(v6);
}
else if(focusindex==7){
focusindex=8;
LzFocus.setFocus(v8);
}
else if(focusindex==8){
focusindex=9;
LzFocus.setFocus(v9);
}
else if(focusindex==9 && page<leng/9){
index=index+9;
nextPage(index,state,leng,argg,sg);
page++;
}
}
else if(state==2){
if(fullanddetail==0){
fullanddetail=1;
var s=index+focusindex;
v1.setVisible(false);
v1.x=-240;
v1.onfocus.sendEvent();
photodetails(s,index,focusindex);
details.setVisible(true);
rfkey.setText("BACK");
details.a.setText(phototitle[index+titlefocus-1]);
fullchanget.setText("PICTURE");
LzFocus.setFocus(detailtext);
}else if(fullanddetail==1){
//v1.setVisible(true);
details.setVisible(false);
fullanddetail=0;
backphotodetails();
rfkey.setText("BACK");
fullchanget.setText("DETAILS");
focusindex=1; LzFocus.setFocus(v1);
}
if(focusindex==10){
focusindex=1; LzFocus.setFocus(v1);
}
}else if(state==3){
if(index<leng){
index++;
nextPage(index,state,leng,argg,sg);
}
}
}
]]></handler>
<drawview id="draw" width="200" height="200">
<method name="refresh" args="x,y,width,height">
this.clear();
this.strokeStyle = 0xffff00;
this.lineWidth = 3;
this.setX(x);
this.setY(y);
this.beginPath();
this.rect(0, 0, width, height);
this.stroke();
</method>
</drawview>
<include href="photoinf.lzx"/>
<include href="popmenu.lzx"/>
<include href="js.lzx"/>
</canvas>
在初始时，我们通过oninit来触发首界面的显示，在该事件中，通过gDataMan.doFlickrRequest(photods, argobj)来进行dataset远程请求数据，由于在id为inform 的视图把datapath属性绑定到photos数据集上，所以当photos请求成功以后，会触发该视图下的ondata事件，在该事件中会把相应的数据显示到界面上。在该lzx中，还定义了一些全局变量来记录当前页面显示的状态。
具体运行的效果图如下：
在移动时，焦点框的大小随着图片的大小变化而变化，当焦点移动到interesting上面时，我们可以输入我们所要查询的图片。如输入test，即当前页则显示我们搜索到的图片。
在键盘上按A键或手机上的左功能键时，即可显示弹出式菜单，可以按上下键选择页面图片显示的方式，如：
当选择9 pics以后显示的效果如：
具体弹出式菜单部分的代码如下：popmenu.lzx
<library>
<view y="160" id="popmenu" resource="selectboard.gif" visible="false">
<view x="15" y="15">
<view resource="selectball.gif"></view>
<text x="20" fgcolor="#4A4646" fontsize="14" text="4 Pics"/>
</view>
<view x="15" y="45">
<view resource="selectball.gif"></view>
<text x="20" fgcolor="#4A4646" fontsize="14" text="9 Pics"/>
</view>
<view x="15" y="75">
<view resource="selectball.gif"></view>
<text x="20" fgcolor="#4A4646" fontsize="14" text="Full Screen"/>
</view>
<view x="15" y="105">
<view resource="selectball.gif"></view>
<text x="20" fgcolor="#4A4646" fontsize="14" text="Slide"/>
</view>
<view id="popmenufocus" x="18" y="18" resource="selectfocus.gif"/>
</view>
</library>
当选择Full Screen以后，会显示全屏图象，如图：当移动右键以后，可以查看详细的图片信息，具体代码如下：photoinf.lzx
<library>
<script>
var a,r=0,scrolly=0,k=1,scrolly;
</script>
<view y="100" id="details" visible="false" >
<text x="60" y="-60" multiline="true" width="100" height="50" name="a" fontsize="16" fgcolor="#DAD8D8"/>
<text x="10" y="-10" id="mytextb" fontsize="16" text="Description:" fgcolor="#DAD8D8"/>
<view x="5" y="10" width="220">
<view bgcolor="0xffffff" width="${parent.width+8}" height="2" />
<view bgcolor="0xffffff" width="${parent.width+8}" height="2" y="${parent.height - 5}" />
<view bgcolor="0xffffff" height="${parent.height-3}" width="2" />
<view bgcolor="0xffffff" height="${parent.height-3}" width="2" x="${parent.width+8}" />
<view id="myscroll" bgcolor="blue" height="${parent.height-10}" width="3" x="${parent.width +2}" y="3" />
<view x="0" width="210" height="135" clip="true">
<text x="15" y="0" id="detailtext" multiline="true" fontsize="14" fgcolor="#DAD8D8" text="" width="200" height="135">
<handler name="ondata"><![CDATA[
if(this.getTextHeight()>135){
a=myscroll.getHeight();
r=this.getTextHeight()/a+1;
//myscroll.setY();
myscroll.setHeight(a*a/this.getTextHeight());
scrolly=this.y;
}
]]>
</handler>
<method event="onkeydown" reference="LzKeys" args="k"><![CDATA[
if( (k==38 || k==0x1010) && r>1 && k>1 && k>r) {
scrolly=scrolly+135;
this.setY(scrolly);
k--;
}else if( (k==40 || k==0x1011 ) && r>1 && k>1 && k<r){
scrolly=scrolly-135;
this.setY(scrolly);
k++;
}
]]>
</method>
</text>
</view>
</view>
</view>
</library>
在处理上面的一些功能时，调用的一些具体的js代码如下：js.lzx
<script>
<![CDATA[
var sgid,phototitle;
function layoutView(bstate){ //state 0：four pic；1：nine pic；2：scroll；3：full
if(bstate==0){
v1.setX(0);
v1.setY(0);
v1.setWidth(90);
v1.setHeight(90);
v2.setX(90+8);
v2.setY(0);
v2.setWidth(90);
v2.setHeight(90);
v3.setX(0);
v3.setY(90+8);
v3.setWidth(90);
v3.setHeight(90);
v4.setX(90+8);
v4.setY(90+8);
v4.setWidth(90);
v4.setHeight(90);
v1.setVisible(true);
v2.setVisible(true);
v3.setVisible(true);
v4.setVisible(true);
v5.setVisible(false);
v6.setVisible(false);
v7.setVisible(false);
v8.setVisible(false);
v9.setVisible(false);
v1.onload.sendEvent();
v2.onload.sendEvent();
v3.onload.sendEvent();
v4.onload.sendEvent();
}else if(bstate==1){
v1.setX(0);
v1.setY(0);
v1.setWidth(57);
v1.setHeight(57);
v2.setX(57+8);
v2.setY(0);
v2.setWidth(57);
v2.setHeight(57);
v3.setX(57+8+57+8);
v3.setY(0);
v3.setWidth(57);
v3.setHeight(57);
v4.setX(0);
v4.setY(8+57);
v4.setWidth(57);
v4.setHeight(57);
v5.setX(8+57);
v5.setY(8+57);
v5.setWidth(57);
v5.setHeight(57);
v6.setX(8+57+8+57);
v6.setY(8+57);
v6.setWidth(57);
v6.setHeight(57);
v7.setX(0);
v7.setY(8+57+8+57);
v7.setWidth(57);
v7.setHeight(57);
v8.setX(8+57);
v8.setY(8+57+8+57);
v8.setWidth(57);
v8.setHeight(57);
v9.setX(8+57+8+57);
v9.setY(8+57+8+57);
v9.setWidth(57);
v9.setHeight(57);
v1.setVisible(true);
v2.setVisible(true);
v3.setVisible(true);
v4.setVisible(true);
v5.setVisible(true);
v6.setVisible(true);
v7.setVisible(true);
v8.setVisible(true);
v9.setVisible(true);
v1.onload.sendEvent();
v2.onload.sendEvent();
v3.onload.sendEvent();
v4.onload.sendEvent();
v5.onload.sendEvent();
v6.onload.sendEvent();
v7.onload.sendEvent();
v8.onload.sendEvent();
v9.onload.sendEvent();
}else if(bstate==2){
v1.setVisible(true);
v2.setVisible(false);
v3.setVisible(false);
v4.setVisible(false);
v5.setVisible(false);
v6.setVisible(false);
v7.setVisible(false);
v8.setVisible(false);
v9.setVisible(false);
v1.setX(-26.5);
v1.setY(-50);
v1.setWidth(230);
v1.setHeight(230);
v1.onload.sendEvent();
}else if(bstate==3){
//v4.setSource(v2.getSource());
v1.setX(0);
v1.setY(140);
v1.setWidth(50);
v1.setHeight(50);
v2.setX(65);
v2.setY(140);
v2.setWidth(50);
v2.setHeight(50);
v3.setX(130);
v3.setY(140);
v3.setWidth(50);
v3.setHeight(50);
v4.setX(25);
v4.setY(0);
v4.setWidth(130);
v4.setHeight(130);
v1.setVisible(true);
v2.setVisible(true);
v3.setVisible(true);
v4.setVisible(true);
v5.setVisible(false);
v6.setVisible(false);
v7.setVisible(false);
v8.setVisible(false);
v9.setVisible(false);
v1.onload.sendEvent();
v2.onload.sendEvent();
v3.onload.sendEvent();
v4.onload.sendEvent();
}
}
function layoutEveryView(bstate,v){
if(bstate==0){
if(v==v1){
v.setX(0);
v.setY(0);
v.setWidth(90);
v.setHeight(90);
}else if(v==v2){
v.setX(90+8);
v.setY(0);
v.setWidth(90);
v.setHeight(90);
}else if(v==v3){
v.setX(0);
v.setY(90+8);
v.setWidth(90);
v.setHeight(90);
}else if(v==v4){
v.setX(90+8);
v.setY(90+8);
v.setWidth(90);
v.setHeight(90);
}
}else if(bstate==1){
if(v==v1){
v1.setX(0);
v1.setY(0);
v1.setWidth(57);
v1.setHeight(57);
}else if(v==v2){
v2.setX(57+8);
v2.setY(0);
v2.setWidth(57);
v2.setHeight(57);
}else if(v==v3){
v3.setX(57+8+57+8);
v3.setY(0);
v3.setWidth(57);
v3.setHeight(57);
}else if(v==v4){
v4.setX(0);
v4.setY(8+57);
v4.setWidth(57);
v4.setHeight(57);
}else if(v==v5){
v5.setX(8+57);
v5.setY(8+57);
v5.setWidth(57);
v5.setHeight(57);
}else if(v==v6){
v6.setX(8+57+8+57);
v6.setY(8+57);
v6.setWidth(57);
v6.setHeight(57);
}else if(v==v7){
v7.setX(0);
v7.setY(8+57+8+57);
v7.setWidth(57);
v7.setHeight(57);
}else if(v==v8){
v8.setX(8+57);
v8.setY(8+57+8+57);
v8.setWidth(57);
v8.setHeight(57);
}else if(v=v9){
v9.setX(8+57+8+57);
v9.setY(8+57+8+57);
v9.setWidth(57);
v9.setHeight(57);
}
}else if(bstate==2){
if(v==v1){
v1.setX(-26.5);
v1.setY(-50);
v1.setWidth(230);
v1.setHeight(230);
}
}else if(bstate==3){
if(v==v1){
v1.setX(0);
v1.setY(140);
v1.setWidth(50);
v1.setHeight(50);
}else if(v==v2){
v2.setX(65);
v2.setY(140);
v2.setWidth(50);
v2.setHeight(50);
}else if(v==v3){
v3.setX(130);
v3.setY(140);
v3.setWidth(50);
v3.setHeight(50);
}else if(v==v4){
v4.setX(25);
v4.setY(0);
v4.setWidth(130);
v4.setHeight(130);
}
}
}
function place(ofx,ofy,v,w,h,bstate){
var absolutex,absolutey;
absolutex=v.x;
absolutey=v.y;
if(bstate==130 && v!=v4){
bstate=50;
}
if(bstate==130 && v==v4){
absolutex=v.x;
absolutey=0;
}
if(h<=w){
if(bstate==230 && v==v1){
absolutex=-26.5+5;
absolutey=-50;
}
v.setX(absolutex);
v.setY(absolutey+bstate/2-h*bstate/w/2.0);
v.setWidth(v.getWidth());
v.setHeight(h*bstate/w);
}else{
if(bstate==230 && v==v1){
absolutex=-26.5;
absolutey=-50;
}
v.setX(absolutex+bstate/2.0-w*bstate/h/2.0);
v.setY(absolutey);
v.setWidth(w*bstate/h);
v.setHeight(v.getHeight());
}
}
function placeView(index,bstate,leng,argg){
var sg = new Array( leng);
sgid=new Array(leng);
phototitle=new Array(leng);
sg[0]="12345";
var serverg,idg,secretg;
var i,a,b,c,d,r;
if(leng<=0)return;
for(i=1;i<=leng;i++){
a="photo["+i+"]/@server";
b="photo["+i+"]/@id";
c="photo["+i+"]/@secret";
d="photo["+i+"]/@title";
serverg=argg.xpathQuery(a);
idg=argg.xpathQuery(b);
secretg=argg.xpathQuery(c);
phototitle[i]=argg.xpathQuery(d);
sgid[i]=idg;
sg[i]="http://static.flickr.com/"+serverg+"/"+idg+"_"+secretg+"_m.jpg";
}
if(bstate==0){
r=90;
i=1;
if(index+0<=leng){
v1.setSource(sg[index+0]);
}
if(index+1<=leng){
v2.setSource(sg[index+1]);
}
if(index+2<=leng){
v3.setSource(sg[index+2]);
}
if(index+3<=leng){
v4.setSource(sg[index+3]);
}
}else if(bstate==1){
r=57;
if(index+0<=leng){
v1.setSource(sg[index+0]);
}
if(index+1<=leng){
v2.setSource(sg[index+1]);
}
if(index+2<=leng){
v3.setSource(sg[index+2]);
}
if(index+3<=leng){
v4.setSource(sg[index+3]);
}
if(index+4<=leng){
v5.setSource(sg[index+4]);
}
if(index+5<=leng){
v6.setSource(sg[index+5]);
}
if(index+6<=leng){
v7.setSource(sg[index+6]);
}
if(index+7<=leng){
v8.setSource(sg[index+7]);
}
if(index+8<=leng){
v9.setSource(sg[index+8]);
}
}else if(bstate==3){
if(index+0<=leng){
v1.setSource(sg[index+0]);
}
if(index+1<=leng){
var s=sg[index+1];
v4.setSource(s);
var s1=s.substring(0,s.length-6)+"_s.jpg";
v2.setSource(s1);
}
if(index+2<=leng){
v3.setSource(sg[index+2]);
}
}
return sg;
}
function sgidnumber(){
return sgid;
}
function getPhototitle(){
return phototitle;
}
function photodetails(s,index,focusindex){
v1.setVisible(true);
v2.setVisible(false);
v3.setVisible(false);
v4.setVisible(false);
v5.setVisible(false);
v6.setVisible(false);
v7.setVisible(false);
v8.setVisible(false);
v9.setVisible(false);
v1.setX(-10);
v1.setY(-30);
v1.setWidth(40);
v1.setHeight(40);
v1.onfocus.sendEvent();
gDataMan.loadPhotoDetails( sgid[s]);
details.setDatapath('infods:/rsp/photo/');
detailtext.setDatapath('description/text()');
}
function backphotodetails(){
v2.setVisible(false);
v3.setVisible(false);
v4.setVisible(false);
v5.setVisible(false);
v6.setVisible(false);
v7.setVisible(false);
v8.setVisible(false);
v9.setVisible(false);
v1.setVisible(true);
v2.setVisible(false);
v3.setVisible(false);
v4.setVisible(false);
v5.setVisible(false);
v6.setVisible(false);
v7.setVisible(false);
v8.setVisible(false);
v9.setVisible(false);
v1.setX(-26.5);
v1.setY(-50);
v1.setWidth(230);
v1.setHeight(230);
v1.onload.sendEvent();
}
function nextPage(index,bstate,leng,argg,sg){
if(bstate==0){
r=90;
i=1;
if(index+0<=leng){
v1.setSource(sg[index+0]);
}
if(index+1<=leng){
v2.setSource(sg[index+1]);
}
if(index+2<=leng){
v3.setSource(sg[index+2]);
}
if(index+3<=leng){
v4.setSource(sg[index+3]);
}
}else if(bstate==1){
r=57;
if(index+0<=leng){
v1.setSource(sg[index+0]);
}
if(index+1<=leng){
v2.setSource(sg[index+1]);
}
if(index+2<=leng){
v3.setSource(sg[index+2]);
}
if(index+3<=leng){
v4.setSource(sg[index+3]);
}
if(index+4<=leng){
v5.setSource(sg[index+4]);
}
if(index+5<=leng){
v6.setSource(sg[index+5]);
}
if(index+6<=leng){
v7.setSource(sg[index+6]);
}
if(index+7<=leng){
v8.setSource(sg[index+7]);
}
if(index+8<=leng){
v9.setSource(sg[index+8]);
}
}else if(bstate==3){
if(index+0<=leng){
v1.setSource(sg[index+0]);
}
if(index+1<=leng){
var s=sg[index+1];
v4.setSource(s);
var s1=s.substring(0,s.length-6)+"_s.jpg";
v2.setSource(s1);
}
if(index+2<=leng){
v3.setSource(sg[index+2]);
}
}
}
]]>
</script>