构建第一个Flex的Mobile APP

Flash Builder 4.5已经支持直接创建Flex Mobile Project,写一个最简单的例子

1、建立工程

右击--》新建--》输入工程名“MyFirstMobileApp”

点击“Next”进入下一步

修改初始化的标题文本信息为“Home”(默认为HomeView),勾选“Google Android”、“Automatically reorient”(默认这些已经都勾选了),然后点击“Finish”

系统将自动生成一个views包,如下图所示:

2、编写代码

双击“MyFirstMobileAppHomeView.mxml”,拖拽一个VGroup组件,然后删除x、y属性,修改width、height均为100%,添加horizontalAlign=”center” verticalAlign=”middle”,让其内容水平、垂直居中

在里面放置一个Label和一个Button,然后再给Button添加一个事件,完整的代码:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            private function button1_clickHandler(evt:MouseEvent):void {
                navigator.pushView(MyNewView);
            }
        ]]>
    </fx:Script>
    
    <s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
        <s:Label text="Hello,World!"/>
        <s:Button label="Continue" click="button1_clickHandler(event)" />
    </s:VGroup>
</s:View>

事件中navigator.pushView的参数MyNewView为接下来准备创建的Component(组件)

在views包中添加一个组件,命名为“MyNewView”

同MyFirstMobileAppHomeView.mxml一样,在MyNewView.mxml也同样放置一个Label和一个Button组件,然后给它的Button添加一个事件,点击后让它回到Home(主页),完整的代码:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="SecondScreen">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void
            {
                navigator.popView(); 
            }
        ]]>
    </fx:Script>
    
    <s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
        <s:Label text="Success!"/>
        <s:Button label="Back" click="button1_clickHandler(event)"/>
    </s:VGroup>
    
</s:View>

现在工程的目录结构:

右击工程,选择Debug AS –> Mobile Application

在弹出的面板中,选中“Launch method”的第一项“On deskop”,然后在下拉框中选择“HTC Desire”

应用并调试(Debug),这里因为没有应用任何的样式所以外观看上去有些粗糙 :(

应用样式后,看上去就不一样了,看上去很Nice..

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏代码世界

表单提交中的input、button、submit的区别

1.input[type=submit] 我们直接来看例子: ? 代码如下: <form> <input name="name"> <input...

38110
来自专栏进击的君君的前端之路

JS相关概念

1432
来自专栏飞雪无情的博客

Ubuntu下使用搜狗拼音输入法

对于经常使用Ubuntu操作系统并且不会使用五笔输入法的屌丝来说,选择一种好的拼音输入法能让你事半功倍。在window下我们都知道搜狗的输入法比较好用,更有一些...

1453
来自专栏mySoul

微信小程序初步入坑指南

https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html

1424
来自专栏iOS开发攻城狮的集散地

更改网页的标签

1634
来自专栏smy

prompt() 方法,弹框带输入框

prompt()  有alert的风格,却带着输入框,这是怎么实现的呢? 语法 prompt(text,defaultText) 参数 描述 t...

4105
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——系统更新以及配置字体

打造前端 Deepin Linux 工作环境——系统更新以及配置字体 安装好编辑器,然后就准备码代码了,但是感觉字体不是很好看。所以决定配置一下字体。顺便把系统...

4266
来自专栏疯狂的小程序

分享:微信小程序中的分享事件

在页面的js文件中定义了 onShareAppMessage 函数时,页面可以表示改页面可以转发。可以在函数中设置页面转发的信息。

5509
来自专栏CDA数据分析师

让你效率提高300%的Excel键盘技巧

本文为简书作者傲看今朝原创,CDA数据分析师已获得授权 刚进惠普的时候,听说公司里的某个领导操作Excel从不用鼠标,感觉真是太牛逼了,满是崇拜的眼神。然而经过...

2098
来自专栏小俊博客

Windows10中的键盘快捷方式

Windows 徽标键 + Shift + C打开超级按钮菜单Windows 徽标键 + D显示和隐藏桌面Windows 徽标键 + Alt + D显示和隐藏桌...

1402

扫码关注云+社区

领取腾讯云代金券