从 flex 开始 - 请让我知道方向是否正确（ActionScript 与 MXML 分离）

Question

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

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

拜托看看下面我的代码（它通过 mxmlc design.mxml 编译，第二个文件“code.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 应用程序中使用代码隐藏的示例应该会有所帮助清理用户界面和应用程序逻辑之间的链接。

Answer 2

我通常将代码编写在 标记本身内的 CDATA 块中。

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

大多数教程和 Adob​​e 代码示例都是采用这种方式。 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>