前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >构建第一个Flex的Mobile APP

构建第一个Flex的Mobile APP

作者头像
meteoric
发布2018-11-15 17:44:55
4660
发布2018-11-15 17:44:55
举报
文章被收录于专栏:游戏杂谈游戏杂谈游戏杂谈

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

1、建立工程

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

image
image

点击“Next”进入下一步

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

image
image

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

image
image

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”

image
image

同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>

现在工程的目录结构:

image
image

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

image
image

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

image
image

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

image
image
image
image

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2011-07-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档