TWaver - 專注UI技術

          http://twaver.servasoft.com/
          posts - 171, comments - 191, trackbacks - 0, articles - 2
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          TWaver Flex轉iOS

          Posted on 2013-07-19 14:19 TWaver 閱讀(1357) 評論(1)  編輯  收藏
          借助于Adobe Flash Builder 4.5.1 TWaver Flex可以轉換為iOS本地程序,從而運行在iPad、iPhone等iOS系統上。

          準備:

          1. 首先需要安裝Adobe Flash Builder 4.5.1或以上版本
          2. 如果需要在設備上調試或者發布到應用程序商店,還需要iOS開發者賬號

          開始:

          1:創建Flex Library project(File -> New -> Flex Library Project)

          創建TWaver Flex Mobile Library
          在Build Paths -> Library path選項頁, 點擊Add SWC按鈕添加TWaver.swc包, 并且將Framework linkage改為Merged into code:創建工程時添加“TWaver.swc”
          創建示例程序:
            1 </pre>
            2 <?xml version="1.0" encoding="utf-8"?>
            3  <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
            4  xmlns:s="library://ns.adobe.com/flex/spark"
            5  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
            6  xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex" creationComplete="init()">
            7 
            8 <fx:Script>
            9  <![CDATA[
           10  import mx.managers.CursorManager;
           11 
           12 import org.osmf.events.TimeEvent;
           13 
           14 import twaver.Consts;
           15  import twaver.Element;
           16  import twaver.ElementBox;
           17  import twaver.Node;
           18  import twaver.Styles;
           19  import twaver.Utils;
           20 
           21 private var node:Node = new Node("node1");
           22  private var lineList1:Array = new Array();
           23  private var lineList2:Array = new Array();
           24  private var xScaleTextsList:Array = new Array();
           25  private var box:ElementBox = new ElementBox();
           26 
           27 [Embed(source="images/02.png")]
           28  public static const backImage:Class;
           29 
           30 private function init():void{
           31  node.setStyle(Styles.CHART_VALUE,Utils.randomInt(100));
           32  node.setStyle(Styles.CHART_COLOR,0xFFFFFF);
           33  node.setStyle(Styles.CHART_LINE_WIDTH,5);
           34  dialChart.dataBox.add(node);
           35  dialChart.minorScaleLineLength = 0;
           36  dialChart.majorScaleLineLength = 0;
           37  dialChart.scaleTextVisible = false;
           38  dialChart.valueVisible = false;
           39  dialChart.xTranslateEnabled = false;
           40  dialChart.yTranslateEnabled = false;
           41  this.addLineChartData();
           42  this.lineChart.dataBox = box;
           43  this.lineChart.lowerLimit = -100;
           44  lineChart.upperLimit = 100;
           45 
           46 lineChart.xTranslateEnabled = false;
           47  lineChart.yTranslateEnabled = false;
           48 
           49 initLineChart();
           50 
           51 }
           52 
           53 private function initLineChart():void{
           54  lineChart.xScaleTexts = xScaleTextsList;
           55  var element:Element = new Element();
           56  element.name = "Line1";
           57  element.setStyle(Styles.CHART_COLOR, Utils.randomColor());
           58  element.setStyle(Styles.CHART_ANCHOR_SHAPE, Consts.SHAPE_CIRCLE);
           59  element.setStyle(Styles.CHART_VALUES,lineList1);
           60  box.add(element);
           61  element = new Element();
           62  element.name = "Line2";
           63  element.setStyle(Styles.CHART_COLOR, Utils.randomColor());
           64  element.setStyle(Styles.CHART_ANCHOR_SHAPE, Consts.SHAPE_DIAMOND);
           65  element.setStyle(Styles.CHART_VALUES,lineList2);
           66  box.add(element);
           67  }
           68 
           69 private function addLineChartData():void{
           70  xScaleTextsList.splice(lineList1.length,0,70);
           71  xScaleTextsList.splice(lineList1.length,0,60);
           72  xScaleTextsList.splice(lineList1.length,0,50);
           73  xScaleTextsList.splice(lineList1.length,0,40);
           74  xScaleTextsList.splice(lineList1.length,0,30);
           75  xScaleTextsList.splice(lineList1.length,0,20);
           76  xScaleTextsList.splice(lineList1.length,0,10);
           77  lineList1.splice(lineList1.length,0,-10);
           78  lineList1.splice(lineList1.length,0,30);
           79  lineList1.splice(lineList1.length,0,60);
           80  lineList1.splice(lineList1.length,0,90);
           81  lineList1.splice(lineList1.length,0,-80);
           82  lineList1.splice(lineList1.length,0,70);
           83  lineList1.splice(lineList1.length,0,20);
           84  lineList2.splice(lineList2.length,0,15);
           85  lineList2.splice(lineList2.length,0,23);
           86  lineList2.splice(lineList2.length,0,45);
           87  lineList2.splice(lineList2.length,0,-65);
           88  lineList2.splice(lineList2.length,0,75);
           89  lineList2.splice(lineList2.length,0,80);
           90  lineList2.splice(lineList2.length,0,95);
           91  }
           92 
           93 ]]>
           94  </fx:Script>
           95 
           96 <mx:VBox width="100%" height="100%">
           97  <mx:Canvas id="canvas" width="256"&nbsp; height="256">
           98  <s:Image id="image" source="{backImage}" backgroundColor="0x000000" backgroundAlpha="0" left="0" top="0">
           99  </s:Image>
          100  <twaver:DialChart id="dialChart" width="100%" height="100%" />
          101  </mx:Canvas>
          102  <twaver:LineChart id="lineChart" width="256" height="256" backgroundColor="0x000000" backgroundAlpha="0"/>
          103  </mx:VBox>
          104 
          105 </mx:VBox>
          106 <pre>
          工程截圖如下:
          工程截圖
          2:創建TWaver Mobile工程(File -> New -> Flex Mobile Project)
          創建TWaver Flex Mobile工程
          創建TWaver Flex Mobile工程(生成路徑)
          添加Twaver Flex Library 修改Flex Mobile工程主程序, 代碼如下:
           1 </pre>
           2 <?xml version="1.0" encoding="utf-8"?>
           3  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           4  xmlns:s="library://ns.adobe.com/flex/spark"
           5  applicationDPI="160"
           6  xmlns:locale="*">
           7  <fx:Declarations>
           8  <!-- Place non-visual elements (e.g., services, value objects) here -->
           9  </fx:Declarations>
          10  <locale:tw_mobile/>
          11  </s:Application>
          12 <pre>
          TWaver Flex Mobile 工程截圖
          工程都已經建好,現在只要設置一下run configurations即可:
          TWaver Flex Mobile run configurations
          在ipad模擬器上運行效果如下:
          運行在模擬器上的效果圖
          注意:Flex Mobile projec是4.6新加的,因此3.5的Flex Library 引用在Flex Mobile project中運行是有問題的。
          下次再詳細介紹生成ipa文件,以及相關的配置文件。
          

          評論

          # re: TWaver Flex轉iOS  回復  更多評論   

          2014-08-09 20:19 by 司馬青衫
          謝謝分享,。。。





          原創文學blog.simaqingshan.com

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 通海县| 都安| 朝阳区| 广灵县| 通榆县| 西乌| 平江县| 东丽区| 和林格尔县| 宣汉县| 和静县| 木兰县| 偏关县| 桑植县| 剑河县| 冷水江市| 资中县| 耒阳市| 射洪县| 于都县| 五常市| 沿河| 康马县| 镇雄县| 兖州市| 育儿| 绵竹市| 无棣县| 天祝| 咸丰县| 苏尼特左旗| 永嘉县| 荣昌县| 乌兰察布市| 阿克苏市| 武汉市| 阿合奇县| 盱眙县| 扎鲁特旗| 崇明县| 乡宁县|