《Hello Flex 4》筆記——1 Getting started

不要被篇幅嚇到，內容比較基礎，代碼易讀，提醒下本身 - -|||

開始看以前先把Flash Builder裝上了...

Why Flex 4?(這是爲何呢)

Flex 4 is a sexy framework that lets you write code that feels more like coding a desktop application—except it runs inside the Flash Player. Because it targets the Flash Player, you can build new rich Internet applications (RIAs) without worrying about browser compatibility nonsense, JavaScript, CSS, and so on. Because Flex 4 targets one platform (Flash 10), you don’t have to worry about platform compatibility(平臺兼容性) issues. The write once, run anywhere (WORA) dream that client-side Java programmers had—before it turned into write once, debug everywhere—can finally be realized, but with Flex. Flex achieves what previous technologies such as Java applets failed miserably in attempting: applications that feel like desktop applications but that run inside any modern web browser on Windows and Mac. We can use Flex 4 to build RIAs today that look and feel more like Web 3.0 than many of the 「me too [point oh]」 sites you see copying 37signals and each other today.

Flex 4 overview(就是這麼個東西而已)

In Flex 4, we write code in MXML(XML files with an .mxml extension; M for Macromedia, the company that created Flex and that was acquired in 2005 by Adobe) and ActionScript(text files with an .as extension) files and compile them into an SWF file(that is, a Flash movie), which runs in the Flash Player. This SWF is usually referenced by an HTML file, so that when a user with a modern web browser loads the HTML file, it plays the Flash movie (prompting the user to download Flash 10 if it’s not present). The SWF contained in the web page can interact with the web page it’s contained in and with the server it was sent from.

A Flex 4 application is just a Flash movie (SWF), which lives inside a web page loaded by a web browser that has Flash 10 installed.

Flex vs. Ajax? Flex and Ajax?(It depends...)

「Are you building a publication or an application?」 The more 「application like」 what you’re building is, the better a fit Flex usually is. (Another way of thinking about this is to ask yourself if you could visualize your app being or competing with a desktop application.)

Getting Flex 4 and Flash Builder 4(開發工具)

書上囉嗦不少，一句話，用這個工具學起來方便點。

SESSION 1 Hello! Flex

直接在FB4裏面導入源代碼就能運行了，囉嗦點：文件-》導入-》現有項目到工做空間中，而後在下載的源代碼中選擇SESSION01這個文件夾，肯定導入就行，其它各節同樣。

SESSION01/SRC/HELLO.MXML

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx">
  <s:Label text="Hello! Flex 4"
  	fontSize="128"/>
</s:Application>

Flex applications start with an Application tag.

SESSION 2 Dispatching and listening for events

Flex development is distinguished by the pervasiveness （無所不在） of two main things: events and data binding.

SESSION02/SRC/HELLO.MXML

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  initialize="init()">
<fx:Script><![CDATA[
  private function init():void {
    button3.addEventListener(MouseEvent.CLICK, handleClick);
  }
  private function handleClick(event:MouseEvent):void {
    if (event.target == button2) {
      label.text += 'Button 2 clicked\n';
    } else if (event.target == button3) {
      label.text += 'Button 3 clicked\n';
    }
  }
]]></fx:Script>
  <s:VGroup width="100%">
    <s:Button id="button1" label="Button 1"
      click="label.text += 'Button 1 clicked\n'"/>
    <s:Button id="button2" label="Button 2"
      click="handleClick(event)"/>
    <s:Button id="button3" label="Button 3"/>
    <s:Label id="label"/>
  </s:VGroup>
</s:Application>

ActionScript 3:

<fx:Script><![CDATA[
...
]]></fx:Script>

event爲自動建立的變量，在上面的程序中類型爲MouseEvent，關鍵部分是addEventListener，例子展現了三種添加事件監聽的方法。

口語化說就是：告訴button(對象)：「當鼠標點擊(MouseEvent.CLICK)你的時候，你要告訴label要加上一段文字(handleClick)」，而後button就傻傻的等着鼠標點擊

SESSION 3  The Bindable annotation and data binding

「Diving in the Flex Data Binding Waters」 

one-way and two-way data binding

先看單向：session03/src/OneWay.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo">
  <s:layout>
    <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
  </s:layout>
  <s:TextInput id="textInput1" text="{textInput2.text}"/>
  <s:TextInput id="textInput2" text="{textInput1.text}"/>
  <s:Label text="# chars: {textInput1.text.length}"/>
</s:Application>

Each TextInput ’s text property is bound (with the {} syntax) to the other TextInput ’s text property.

神奇

懶惰的程序員：session03/src/TwoWay.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo">
  <s:layout>
    <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
  </s:layout>
  <s:TextInput id="textInput1" text="@{textInput2.text}"/>
  <s:TextInput id="textInput2"/>
  <s:Label text="# chars: {textInput1.text.length}"/>
</s:Application>

@{}   「bind this both ways.」

主要用途：

It’s primarily used to get data in and out of ActionScript 3 model objects.

建立第一個.as文件：session03/src/model/Task.as (package後面跟大括號)

package {
  public class Task {
    [Bindable]
    public var name:String;      
    
    public function Task(name:String = "") {
      this.name = name;
    }
  }
}

The Bindable annotation on the name variable ensures it can be the source of a data binding.

this annotation means that other code can be automatically notified when the value changes.

session03/src/BindingToModel.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Script>
<![CDATA[
  [Bindable]
  private var _task:Task = new Task("Learn Binding"); 
]]>
</fx:Script>
  <s:layout>
    <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
  </s:layout>
  <s:TextInput id="textInput1" text="{_task.name}" 
    focusOut="_task.name = textInput1.text;"/>
  <s:TextInput id="textInput2" text="{_task.name}"
    focusOut="_task.name = textInput2.text;"/>
</s:Application>

這裏使用雙向綁定 @{_task.name} 的話，會致使_task.name爲空，由於 TextInput 控件的text初始爲空（本人拙見）

Data binding 「magically」 copies the value of one property to another property. (Well, it’s not magic: PropertyChangeListeners are used. But for the purposes of chapter 1 of this book, it’s magic.) 

For data binding to work (and not generate compiler warnings), the [Bindable] annotation must be used on the property that’s the source of the data binding as well as on the variable that contains the reference to the Object with the property in question. 

Two-way data binding saves time when dealing with UI components, but be careful when using it with models.

SESSION 4 Flex application structure overview

session04/src/com/pomodo/model/Task.as

package com.pomodo.model { 
    public class Task {
        [Bindable]
        public var name:String;  
            
        public function Task(name:String = "") { 
            this.name = name;
        }
    }
}

session04/src/TodoList.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Script>
<![CDATA[
  import mx.collections.ArrayCollection;
  import com.pomodo.model.Task;
  
  [Bindable] //this variable is the source of a data binding in the List,so we need to mark it with the [Bindable] annotation.
  private var _tasks:ArrayCollection = new ArrayCollection();
  
  private function createTask():void {
    _tasks.addItem(new Task(newTaskTI.text));
  }
  
  private function deleteSelectedTask():void {
    _tasks.removeItemAt(taskList.selectedIndex);
  }
]]>
</fx:Script>
  <s:Panel title="Todo List" width="100%" height="100%">
    <s:VGroup width="100%" height="100%">
      <s:HGroup width="100%" verticalAlign="middle">
        <s:Label text="New Task"/>
        <s:TextInput id="newTaskTI" width="100%"
          enter="createTask()"/>
        <s:Button label="Create" click="createTask()"/>
      </s:HGroup>
      <s:List id="taskList" width="100%" height="100%"
        labelField="name" //name爲Task中的屬性名
        dataProvider="{_tasks}"/>
      <s:HGroup width="100%">
        <s:Button label="Delete" width="100%" height="30"
          enabled="{taskList.selectedItem != null}"
          click="deleteSelectedTask()"/>
      </s:HGroup>
    </s:VGroup>
  </s:Panel>
</s:Application>

 

SESSION 5  Spark(new), Halo(old), and Flex 4(core) namespaces

Spark(s)是Flex 4中引進的，Halo(mx)用在Flex 1-3

Flex 4 applications typically use three XML namespaces, since Flex 4 is introducing an entirely new set of components (the Spark components). 

The old school Halo components are what were used in Flex 1-3. They have the mx prefix by convention, since that’s what was used in Flex 1 through 3. The namespace for the Halo components is library://ns.adobe.com/flex/halo . You still need to use the Halo components where there are no Spark equivalents yet, such as DataGrid . 

The new Spark components use, by convention, an s prefix for the new namespace of library://ns.adobe.com/flex/spark . These components have 「Design in Mind,」 which will allow designers and developers to work together in a more harmonious way. 

The fx prefix is for the core Flex namespace ( http://ns.adobe.com/mxml/2009 ). This is for things like declarations, metadata, and script blocks—basically, for nonvisual language elements.

瞭解一下就好

第一章結束，內容比較基礎，快速入門