Question

我刚开始使用OReilly“Programming Flex 3.0”学习flex。完成三章并开始第四章（ActionScript），并且没有足够的耐心等到完成第22章我开始练习:)

我现在最担心的一点是双编码模式（MXML vs ActionScript）

请看下面我的代码（它通过 mxmlc design.mxml 编译，第二个文件'code.as'应该在同一目录中）并告知我在视觉设计之间使用的分离和代码是合适的。

另外 - 如果一个聪明的家伙可以告诉我如何用* .as作为类文件[包？]重新编码相同的例子，我们将非常感激。我迷失了为包创建目录结构 - 并没有找到它最直观，特别是对于像我的例子这样有两个文件的小项目。

代码：design.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script source="code.as"/>
 <mx:VBox>
  <mx:TextInput creationComplete="initializeCalculator()" id="txtScreen"/>
  <mx:HBox>
   <mx:Button click="click('7')" id="btn7" label="7"/>
   <mx:Button click="click('8')" id="btn8" label="8"/>
   <mx:Button click="click('9')" id="btn9" label="9"/>
   <mx:Button click="click('C')" id="btnClear" label="C"/>
  </mx:HBox>
  <mx:HBox>
   <mx:Button click="click('4')" id="btn4" label="4"/>
   <mx:Button click="click('5')" id="btn5" label="5"/>
   <mx:Button click="click('6')" id="btn6" label="6"/>
   <mx:Button click="click('/')" id="btnDivide" label="/"/>
  </mx:HBox>
  <mx:HBox>
   <mx:Button click="click('1')" id="btn1" label="1"/>
   <mx:Button click="click('2')" id="btn2" label="2"/>
   <mx:Button click="click('3')" id="btn3" label="3"/>
   <mx:Button click="click('*')" id="btnMultiply" label="*"/>
  </mx:HBox>
  <mx:HBox>
   <mx:Button click="click('0')" id="btn0" label="0"/>
   <mx:Button click="click('=')" id="btnEqual" label="="/>
   <mx:Button click="click('-')" id="btnMinus" label="-"/>
   <mx:Button click="click('+')" id="btnPlus" label="+"/>
  </mx:HBox>
 </mx:VBox>
</mx:Application>

代码：code.as

public var res:int = 0;
public var previousOperator:String = "";
public var previousRes:int=0;

public function initializeCalculator():void{
 txtScreen.text = res.toString();
}
public function click(code:String):void{ 
 if (code=="1" || code=="2" || code=="3" || code=="4" || code=="5" ||
   code=="6" || code=="7" || code=="8" || code=="9" || code=="0"){
  res = res*10 + int(code);
  txtScreen.text = res.toString();
 }
 else if (code=="C"){
  res = 0;
  previousOperator ="";
  previousRes = 0;
  txtScreen.text = res.toString();
 }
 else{
  calculate(code);
 }
}
public function calculate(operator:String):void{
 var tmpRes:int;
 if (previousOperator=="+"){
  tmpRes = previousRes + res;
 }
 else if (previousOperator=="-"){
  tmpRes = previousRes - res;
 }
 else if (previousOperator=="/"){
  tmpRes = previousRes / res;
 }
 else if (previousOperator=="*"){
  tmpRes = previousRes * res;
 }
else{
 tmpRes = res;
}
 previousOperator = operator;
 previousRes = tmpRes;
 txtScreen.text = previousRes.toString();
res = 0;
 if (previousOperator=="=")
 {
  res = tmpRes;
  txtScreen.text=res.toString();
 }
}

PS。如果你有评论说这个计算器没有正确计算，那么他们也会受到赞赏，但最重要的是对Flex中最佳实践的评论。

Answer 1

在Flex应用程序中使用代码隐藏的这个example应该有助于清理用户界面和应用程序逻辑之间的链接。

Answer 2

我通常将代码写在CDATA标记内的<mx:script/>块中。

<mx:Script source="code.as">
  <![CDATA[
    //code here
  ]]>
</mx:Script>

这是在大多数教程和Adobe代码示例中完成的方式。一个mxml文件代表一个ActionScript class（文件design.mxml在根包中创建一个名为design的类），因此我认为将整个代码放在一个地方（文件）是有意义的 - 这是一个选择问题。

如果组件中的用户界面部件很小，则可以仅使用AS文件创建该组件。检查面板的代码，其中包含文本输入和按钮：

//MyPanel.as inside /your/folder/structure
package your.folder.structure
{
  //import appropriate classes here
  public class MyPanel extends Panel
  {
    [Bindable]
    public var txt:TextInput;
    [Bindable]
    public var btn:Button;
    public function MyPanel(){}
    override protected function createChildren():void
    {
       txt = new TextInput();
       txt.text = "Default text";
       txt.setStyle("color", 0xffff00);
       addChild(txt);
       btn = new Button();
       btn.label = "Click me!"
       btn.addEventListener(MouseEvent.CLICK, handleClick);
       addChild(btn);
    }
    private function handleClick(e:MouseEvent):void
    {
      trace("clicked");
    }
  }
}

（几乎）等效的mxml代码将是：

<!-- MyPanel.mxml inside /your/folder/structure -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 
  xmlns="your.folder.structure.*">
  <mx:TextInput id="txt" text="Default text" color="#ffff00"/>
  <mx:Button id="btn" label="Click me!" click="handleClick(event);"/>
  <mx:Script source="code.as">
    <![CDATA[
        private function handleClick(e:MouseEvent):void
        {
          trace("clicked");
        }
    ]]>
  </mx:Script>
</mx:Panel>

从flex开始 - 请告诉我方向是否正确（ActionScript vs MXML分离）

2 个答案: