构建一个Flex的Mobile APP
2012-03-14 11:25
323 查看
原文:/article/4755636.html
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添加一个事件,完整的代码:
事件中navigator.pushView的参数MyNewView为接下来准备创建的Component(组件)
在views包中添加一个组件,命名为“MyNewView”
同MyFirstMobileAppHomeView.mxml一样,在MyNewView.mxml也同样放置一个Label和一个Button组件,然后给它的Button添加一个事件,点击后让它回到Home(主页),完整的代码:
现在工程的目录结构:
右击工程,选择Debug AS –> Mobile Application
在弹出的面板中,选中“Launch method”的第一项“On deskop”,然后在下拉框中选择“HTC Desire”
应用并调试(Debug),这里因为没有应用任何的样式所以外观看上去有些粗糙 :(
应用样式后,看上去就不一样了,看上去很Nice..
构建第一个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..
相关文章推荐
- 构建一个Flex的Mobile APP
- 构建第一个Flex的Mobile APP
- nodejs + jquery Mobile构建一个简单的移动web ( 服务端index.js)
- 如何使用Maven 3.0, Flex Mojos 4.0和Flex 4.5构建一个简单的SWF程序
- JQuery Mobile+cordova构建一个Android项目
- iOS 同一个工程下 使用多target来构建大量相似App
- 【译】Android平台上的Flex开发(1)---- 创建一个新的Mobile工程
- 构建一个能够接收别的App数据的APP
- Android TV开发总结(一)构建一个TV app前要知道的事儿
- 构建一个Flex程序
- 使用Vue.js和Flask来构建一个单页的App的示例
- 用Flex开发移动应用(1)---- 创建一个新的Mobile工程
- Android TV开发总结(一)构建一个TV app前要知道的事儿
- 利用 Cordova 和 IBM Bluemix Mobile Data 服务构建一个混合移动应用程序
- 创建一个Hybird App应用框架 Ember.js + jQuery Mobile + PhoneGap
- Android TV开发总结(七)构建一个TV app中的剧集列表控件
- Mobile&nbsp;Web&nbsp;App一个页面的简单的东…
- Expo大作战(四)--快速用expo构建一个app,expo中的关键术语