借助于Adobe Flash Builder 4.5.1 TWaver Flex可以转换为iOS本地程序,从而运行在iPad、iPhone等iOS系统上。
准备:
- 首先需要安装Adobe Flash Builder 4.5.1或以上版本
- 如果需要在设备上调试或者发布到应用程序商店,还需要iOS开发者账号
开始:
1:创建Flex Library project(File -> New -> Flex Library Project)
在Build Paths -> Library path选项页, 点击Add SWC按钮添加TWaver.swc包, 并且将Framework linkage改为Merged into code:
创建示例程序:
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" 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)
修改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>
工程都已经建好,现在只要设置一下run configurations即可:
在ipad模拟器上运行效果如下:
注意:Flex Mobile projec是4.6新加的,因此3.5的Flex Library 引用在Flex Mobile project中运行是有问题的。
下次再详细介绍生成ipa文件,以及相关的配置文件。