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 阅读(1341) 评论(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

只有注册用户登录后才能发表评论。


网站导航: