《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.

了解一下就好

第一章结束，内容比较基础，快速入门