Flex实现QQ网页提取天气信息
1、预备知识
Flex是Adobe提供的基于Flash环境的RIA展现技术,主要采用MXML+Action Script来编写程序、界面,然后通过编译器编译成flash格式的SWF文件发布到网站上。
实现该功能需要安装Flex SDK,可以从Adobe网站上面下载,或者安装Flex Builder plugin+Eclipse来开发。
同时需要具备简单的正则表达式知识。
2、界面布局、代码实现
文件:QQWeather.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="213" height="234" creationComplete="initApp()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#F6FBFC, #3FEEDC]">
<mx:Style>
.myfont{font-size:12pt;font-family:'宋体';}
</mx:Style>
<mx:Script source="QQWeather.as"></mx:Script>
<mx:Label x="10" y="53" text="选择城市:" styleName="myfont"/>
<mx:ComboBox id="cmbCity" x="66" y="49" width="133" rowCount="6" change="changeHandler(event);" styleName="myfont"></mx:ComboBox>
<mx:Image x="10" y="10" source="@Embed('../title.gif')" width="189" />
<mx:Image x="10" y="106" source="@Embed('../tem1.png')" width="57" height="13"/>
<mx:Image x="10" y="132" source="@Embed('../tem2.png')" width="57" height="13"/>
<mx:Image x="10" y="178" source="@Embed('../tem3.png')" width="57" height="13"/>
<mx:Image x="10" y="154" source="@Embed('../tem5.png')" width="57" height="13"/>
<mx:Label x="75" y="103.5" text="" width="110" styleName="myfont" id="t1"/>
<mx:Label x="75" y="129.5" text="" width="110" styleName="myfont" id="t2"/>
<mx:Label x="75" y="151.5" text="" width="110" styleName="myfont" id="t3"/>
<mx:Label x="75" y="175.5" text="" width="110" styleName="myfont" id="t4"/>
<mx:Label x="34" y="202" text="Label" width="169" styleName="myfont" textAlign="right" id="lbToday"/>
<mx:Label x="10" y="80" width="193" id="t0"
相关文档:
Adobe Flex开发与传统的Web开发有很多不同之处。正确的理解和利用这些不同之处,可以帮助我们创建更丰富的用户体验,也可以反过来增加网站的可用性以及浏览和更新速度。Flex还提供了大量的组件和技术库来让Web开发更加轻松——它提供的强大工具要远远超过传统Web 2.0中的异步JavaScript和XML(Ajax)应用。此外, ......
在官方网站adobe上可以下载到编写Flex程序的基本工具,首先我们还是运用text的方式来开发我们的第一个程序,并且建议运用Ant工具来部署运行我们的程序。具体情况如下:
设置环境变量path=D:\FreeFlex\sdks\3.2.0\bin
文件名称:mxmlc HelloWorld.mxml
mxmlc -keep-generated-actionscript ......
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Zoom effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style />
<mx:Script>
& ......
No.1 某字符器放到粘贴版:
System.setClipboard(strContent);
No.2 复制数组:
//dummy solution( well, it works )
var bar:ArrayCollection = new ArrayCollection();
for each ( var i:Object in ac ){
bar.addItem( i );
}
// fantastic ! //
var bar:ListCollectionView = new ListCollectionVi ......
通常大家都会设置visible属性为false。但这样做还是会有问题:组件仍然占用原来的位置。
最后同时使用includeInLayout与visible属性来解决。
实现效果图如下:
实现的效果是当点击hide text的时候,中间文字将消失,同时show text按钮自动向上移动对齐(因为Application的layout属性为vertical)
......