Flexers.cn

[面试最爱问的问题1]Flex/AS3的事件机制

momoko8443 — Mon, 19 Jul 2010 07:59:58 +0000

今天静下心来看了几篇as3事件机制的教程，终于整明白这个面试中最爱问的问题了，嘎嘎！

具体场景描述如下

容器深度：Application->Canvas->HBox->Button;

其中在HBox这个容器中有段代码

button.addEventListener(MouseEvent.Click,onButtonClickHandler);

阶段0：触发阶段，事件被触发，场景中的情况就是用户点击了Button,翻译为代码就是Button中执行了“ dispatch(new MouseEvent(MouseEvent.Click));”大家可以看下Event类中有个target的属性，这个属性就记录着Button这一事件发起者的对象

阶段1：捕获阶段，一旦有事件被触发，FP则会带着这个Event对象从整个程序的最上层开始往下遍历，顺序为Application->Canvas->HBox->Button，不停地匹配Event里面中的Target对象和当前遍历到的容器或是组件是不是为同一个对象

阶段2：目标阶段，终于在HBox这个容器中发现到了Button和Event中Target所指向的对象是同一个，ok，事件触发者Button终于被我挨家挨户的排查中找着了。

阶段3：冒泡阶段，从捕获到的目标Button，开始自下而上得往一级级parent走，看看到底是谁会关心Button被用户点击了。

于是再一级级往上HBox->Canvas->Application;果然在遍历到HBox的时候发现它曾经为Button的Click事件加过监听。

阶段4：执行阶段，事件的关心者HBox也找到了，那么执行onButtonClickHandler这个函数即可。

【转】Create Professional Flex Component

momoko8443 — Wed, 14 Jul 2010 06:18:01 +0000

Flex Builder has a great way to organize its components in tree mode, which is very a good way to organize things and make things clear to any user who are coming to Flex world.

By default, every component you create that is not part of default Flex components you will have placed in the [Custom] directory of Flex Components view in your Flex/Flash Builder, and no matter what properties you add to them, they will never be visible in the Flex Properties standard view.

But what if you want to customize that and create a component that have them all like flex components do? Well, it’s not that hard so let’s do that.

Create the Component

First, you have to create a new Flex Library Project. Do this by going to File->New and choose Flex Library Project. Give it a name, a location, choose whatever Flex SDK you wish to build this for and then click finish.

Now you have a blank library project in which you can create whatever components you want.
Is important to use packages correctly and namespaces and not just drop the component in the [src] folder (you’ll see later why). First create a package (eg. com.adm.component) in which you can add your custom component.

package com.adm.component
{
      import mx.containers.Canvas;

      public class mycomponent extends Canvas
      {
      }
}

Okay, now let’s create some methods to have something going. We’ll make this component be a big button with a method to enable the button and one to change it’s caption. We’ll use setters and getter’s for those properties because some other actions might be required when changing them. So:

package com.adm.component
{
     import mx.containers.Canvas;
     import mx.controls.Button;

      public class mycomponent extends Canvas
      {
            private var _title : String = 'Title';
            private var _active : Boolean = true;

            private var btn : Button = new Button();

            public function CustomComponent()
            {
                      super();
                      this.btn.width = 100;
                      this.btn.height = 100;
                      this.btn.label = this.label;
                      this.addChild(this.btn);
            }

            public function set title(val : String) : void
            {
                      this._title = val;
                      this.btn.label = val;
            }

            public function get title() : String
            {
                     return this._title;
            }

            public function set active(val : Boolean) : void
            {
                     this._active = val;
                     this.btn.enabled= val;
            }

            public function get active() : Boolean
            {
                    return this._active;
            }
      }
}

So, if you now build your project, a .swc file will be generated in your [bin] folder, which you can add in other projects and use. But now, the component will be placed in the [Custom] directory in the Components View and not the one you want. We’ll do that a bit later now let’s just….

Give it an icon

This is really simple. All you have to do is get a nice looking .png icon (16×16 pixels preferably) and place it next to your component. Then, use the IconFile metadata tag to link it to your component.

....
[IconFile("icon.png")]
public class mycomponent extends Canvas
{
       private var _title : String = 'Title';
       .......

Inspectable properties

If you have extra information about the property that will help code hints or the Property Inspector (such as enumeration values or that a String is actually a file path) then also add [Inspectable] metadata with that extra info. For our methods we have:

       ...
       [Inspectable(category="General", type="String", defaultValue="")]
       public function set title(val : String) : void
       .....
       .....
       [Inspectable(category="General", type="Boolean", defaultValue="true", enumeration="true,false")]
       public function set active(val : Boolean) : void

This will also help a lot when we’ll add this properties in the Flex Properties panel. For more informations about the [Inspectable] metadata tag visit http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001658.html

Create custom component folder

So, if you want to build a professional component, you can’t leave Flex add your component in the default [Custom] directory in the Components tree. So, in order to create your own folder, we must use few tricks.

First of all, you need two .xml files to describe the structure you want flex to use and overide it’s default behavior.
The first file is the manifest.xml which describes the components in the package and their namespaces. In our case we’ll have:

< ?xml version="1.0"?>

Second, we need another xml to describe the way the designer will interpret all this.

< ?xml version="1.0" ?>

In the design.xml, you can specify the namespaces you used for the components, in this case adm will point to components in the org.adm folder.

Categories tag describes the folders you want added in the Components panel. Each category must have an id which you’ll use to tell components where they should reside, a label for the category to stand as the directory name in the Components panel. defaultExpand is an optional parameter which if set to true, the folder will be showed expanded by default.

In the components tag, you specify which component goes in what category and under what title. The name parameter must match the id of a component listed in the manifest.xml. All the other parameters are pretty self explanatory.

Next, you have to include this two files in .swc package. To do that, follow the steps:

* Right Click at your project and select Properties
* In the left choose Flex Library Build Path
* Select the assets tab and mark to include manifest.xml and design.xml files
* Now select the Flex Library Compiler and include your namespace URL (in this case http://www.adm.org)
* Include the manifest file .xml you’ve created
* Click apply and ok to finish

After this, you should end up with something like this

Add properties to the Flex Properties view

As I said before, no matter what properties you add to your component, they will never be visible in the Flex Properties standard view, only in the category view and that only if you use the [Inspectable] metadata tag. But few more lines in the design.xml file should take care of that.

The id of the mxmlProperties tag should be the function/variable names from your component you want to edit. You can also define default values for those properties using the defaultAttribute tag below. Here we’ve only used the textfield and the combo type but there are few more you can use.

For combo boxes, if you use it for a Boolean property, it will automatically be populated with [true,false] values but if want something else, the [Inspectable] metadata tag has the enumeration property where you can define the properties from this combo.

Another thing you must do in order to apply the values as soon as you change them from the properties view, is to set the functions/variables as [Bindable].

    ....
    [Inspectable(category="General", type="String", defaultValue="")]
    [Bindable]
    public function set title(val : String) : void
	....
	....
    [Inspectable(category="General", type="Boolean", defaultValue="true", enumeration="true,false")]
    [Bindable]
    public function set active(val : Boolean) : void
	....
	....

One more thing

Now, compiling this will give you a 300 something KB .swc file which is a bit large to distribute. The user will use this component inside a flex component so embedding all the libraries and SDK inside your .swc is useless. So the next step is to go to Properties->Flex Library Build Path->Library path tab, expand the build path library try and edit everything inside the SDK tree on Link Type and choose External

Now the swc component only have 4KB. Big cut down, eh ?

Done

If this is to much trouble for you or you’ve missed something, I’ve attached the sources for this tutorial here. You can import this skeleton rename the package, namespace and the component and start building on this. I hope it all made sense and….happy coding.

XML、XMLList、XMLListCollection 三者的区别

momoko8443 — Thu, 04 Mar 2010 01:46:12 +0000

正好看到有网友在艾睿论坛上提问。http://bbs.airia.cn/FLEX/thread-10337-1-1.aspx

XML 和XMLList都继承于Object。如果XML是最小单位的话，XMLList与之的区别就是api doc中下面这句话。
The XMLList class contains methods for working with one or more XML elements. An XMLList object can represent one or more XML objects or elements (including multiple nodes or attributes), so you can call methods on the elements as a group or on the individual elements in the collection.

即XMLList是一个或多个XML的组合形式。
如XML的结构是

value1

那么XMLList的结构可以是一个XML

value1

也可以是多个XML

value1

value2

XMLListCollection 的继承于ListCollectionView,ListCollectionView这个类看着挺眼熟吧，不错我们最常用的 ArrayCollection就是继承于这个ListCollectionView。api doc中下面这句话描述了XMLListCollection的作用
The XMLListCollection class provides collection functionality to an XMLList object and makes available some of the methods of the native XMLList class.

XMLListCollection的作用是给XMLList 增加一些集合功能如addItem等，前提是你需要
new XMLListCollection(new XMLList())

[转]正则表达式备忘

momoko8443 — Wed, 03 Mar 2010 09:34:06 +0000

下表是元字符及其在正则表达式上下文中的行为的一个完整列表：
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。
^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的Multiline 属性，^ 也匹配 ’\n’ 或 ’\r’ 之后的位置。
$ 匹配输入字符串的结束位置。如果设置了 RegExp 对象的Multiline 属性，$ 也匹配 ’\n’ 或 ’\r’ 之前的位置。
* 匹配前面的子表达式零次或多次。
+ 匹配前面的子表达式一次或多次。+ 等价于 {1,}。
? 匹配前面的子表达式零次或一次。? 等价于 {0,1}。
{n} n 是一个非负整数，匹配确定的n 次。
{n,} n 是一个非负整数，至少匹配n 次。
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。在逗号和两个数之间不能有空格。
? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。
. 匹配除 "\n" 之外的任何单个字符。要匹配包括 ’\n’ 在内的任何字符，请使用象 ’[.\n]’ 的模式。
(pattern) 匹配pattern 并获取这一匹配。
(?:pattern) 匹配pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。
(?=pattern) 正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。
(?!pattern) 负向预查，与(?=pattern)作用相反

x|y 匹配 x 或 y。
[xyz] 字符集合。
[^xyz] 负值字符集合。
[a-z] 字符范围，匹配指定范围内的任意字符。
[^a-z] 负值字符范围，匹配任何不在指定范围内的任意字符。
\b 匹配一个单词边界，也就是指单词和空格间的位置。
\B 匹配非单词边界。
\cx 匹配由x指明的控制字符。
\d 匹配一个数字字符。等价于 [0-9]。
\D 匹配一个非数字字符。等价于 [^0-9]。
\f 匹配一个换页符。等价于 \x0c 和 \cL。
\n 匹配一个换行符。等价于 \x0a 和 \cJ。
\r 匹配一个回车符。等价于 \x0d 和 \cM。
\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
\S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\t 匹配一个制表符。等价于 \x09 和 \cI。
\v 匹配一个垂直制表符。等价于 \x0b 和 \cK。
\w 匹配包括下划线的任何单词字符。等价于[A-Za-z0-9_]。
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]。
\xn 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。
\num 匹配 num，其中num是一个正整数。对所获取的匹配的引用。
\n 标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。
\nm 标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。
\nml 如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。 \un 匹配 n，其中 n 是一个用四个十六进制数字表示的Unicode字符。
下面是常用的正则表达式——
验证数字：^[0-9]*$
验证n位的数字：^\d{n}$
验证至少n位数字：^\d{n,}$
验证m-n位的数字：^\d{m,n}$
验证零和非零开头的数字：^(0|[1-9][0-9]*)$
验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数：^\+?[1-9][0-9]*$
验证非零的负整数：^\-[1-9][0-9]*$
验证非负整数（正整数 + 0） ^\d+$
验证非正整数（负整数 + 0） ^((-\d+)|(0+))$
验证长度为3的字符：^.{3}$
验证由26个英文字母组成的字符串：^[A-Za-z]+$
验证由26个大写英文字母组成的字符串：^[A-Z]+$
验证由26个小写英文字母组成的字符串：^[a-z]+$
验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串：^\w+$
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。
验证是否含有 ^%&’,;=?$\” 等字符：[^%&',;=?$\x22]+
验证汉字：^[\u4e00-\u9fa5],{0,}$
验证Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
验证InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证电话号码：^($\d{3,4}$|\d{3,4}-)?\d{7,8}$：–正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。
验证身份证号（15位或18位数字）：^\d{15}|\d{}18$
验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为：01、09和1、31。
整数：^-?\d+$
非负浮点数（正浮点数 + 0）：^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数（负浮点数 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)?$

[转]Flex组件的继承关系

momoko8443 — Wed, 24 Feb 2010 01:46:54 +0000

通过继承，会了某一个组件的用法，与它有同样的继承关系的组件也就了解了

FLEX组件继承关系：
Object->EventDispather->DisplayObject->InteractiveObject->DisplayObjectContainer->Sprite->UIcomponet->All components

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 容器类组件

Application继承关系
UIComponent->Container->LayoutContainer->Application

ApplicationControlBar继承关系
UIcomponent->Container->Box->ControlBar->ApplicationControlBar
其主要用于全局导航，其是ControlBar的子类，后者用于Panel及itleWindow

Canvas继承关系
UIcomponent->Container->Canvas
其只有absolute布局

Box,HBox,VBox继承关系
UIcomponent->Container->Box,然后HBox,VBox是Box的子类，实际上Box有个属性direction,可以使其显示为HBox或HBox

DividedBox,HDividedBox,VDividedBox继承关系

UIcomponent->Container->Box->DividedBox ,然后HDividedBox,VDividedBox是其子类，三者之间的关系同Box与HBox,Vbox的关系一样

Panel继承关系
UIcomponent->Container->Panel
Panel可以在下部包含一个ControlBar
Panel的布局方式为absolute时，相当于Canvas
为vertical时，相当于VBox
为horizontal时，相当于HBox

TitleWindow继承关系
UIcomponent->Container->Panel->TitleWindow,其与Panel基本一样，
它可以在右上角显示一个关闭按钮，其一般当做弹出窗口使用,当做弹出窗口时，用PopUpManager类来管理
在Flex自带的帮助TitleWindow layout container中有大量的例子及教程，关于用PopUpManager来操作TitleWindow的

Form继承关系
UIcomponent->Container->Form
Form内部可以有
UIComponent->FormHeading
UIcomponent->Container->FormItem
这里看下Flex自带的帮助中的Form, FormHeading, and FormItem layout containers,里边有如何设置
各部分的间隔等教程

Title继承关系
UIcomponent->Container->Title

Grid继承关系UIcomponent->Container->Box->Grid
其内部可以有
UIcomponent->Container->Box->HBox->GridRow
UIcomponent->Container->Box->HBox->GridItem

Accordion继承关系
UIcomponent->Container->Accordion

ViewStack继承关系
UIcomponent->Container->ViewStack
ViewStack没有内建的切换内部容器的机制，其必须和一组按钮或
LinkBar,ButtonBar,ToggleButtonBar,TabBar配合使用,这些都是NavBar的子类或子子类

TabNavigator继承关系
UIcomponent->Container->ViewStack->TabNavigator
TabNavigato是ViewStack加TabBar的效果

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 常规组件
Alert继承关系
UIcomponent->Container->Panel->Alert

ColorPicker继承关系
UIcomponent->ComboBase->ColorPicker
其有个dataProvider属性，可以指定提供哪些颜色供选择

ComboBox继承关系
UIcomponent->ComboBase->ComboBox

HorizontalList继承关系
UIcomponent->ScrollControlBase->ListBase->TileBase->HorizontalList

TileList继承关系
UIcomponent->ScrollControlBase->ListBase->TileBase->TitleList

List继承关系
UIcomponent->ScrollControlBase->ListBase->List

Tree继承关系
UIcomponent->ScrollControlBase->ListBase->List->Tree

DataGrid继承关系
UIComponent->ScrollControlBase->ListBase->DataGridBase->DataGrid

TabBar继承关系
UIcomponent->Container->Box->NavBar->ButtonBar->ToggleButtonBar->TabBar
ButtonBar与ToggleButtonBar类似，后者放开鼠标后能显示按下的状态,TabBar也是显示按下状态，但外观不一样

LinkBar继承关系
UIcomponent->Container->Box->NavBar->LinkBar
其在内部根据数据源产生LinkButton

几个简单的组件:
UIcomponent->ProgressBar进度条
UIcomponent->Spacer 空生空白的空间
UIComponent->HRule及VRule 创建水平或坚直的线
UIComponent->NumericStepper 提供数据供选择，类似于ComboBox，但不产生下拉列表
UIComponent->Slider->HSlider及VSlider 通过拖到选择数据
UIComponent->ScrollBar->HScrollBar及VScrollBar,通常不单独使用,空间不够时自动产生

UIComponent->Button
UIComponent->Button->CheckBox
UIComponent->Button->RadioButton
Object->EventDispatcher->RadioButtonGroup 这个比较特别
UIComponent->Button->LinkButton
UIComponent->Button->PopUpButton　弹出一个菜单
UIComponent->Button->PopUpButton->PopUpMenuButton　数据源自动转成一个菜单
PopUpButton比Button多了一个pop-up button可以弹出Menu或List,通过属性Popup指定

UIComponent->DateChooser
UIcomponent->ComboBase->DateField

UIComponent->MenuBar 横向菜单

UIComponent->Label->Text Lable显示单行字，Text可以显示多行

UIComponent->ScrollControlBase->TextArea
UIComponent->TextInput
UIcomponent->Container->Panel-> RichTextEditor 这个控件的外观不是固定的，可以添加删除其它组件，具体看下帮助

补充：
一：集合
ArrayCollection,XMLListCollection 继承了
mx.collections.ListCollectionView ,其实现了mx.collections.ICollectionView 和mx.collections.IList接口. 这两个接口提供了查看和

修改数据的基本方法,ArrayCollection用一个数组做数据源. XMLListCollection用XMLLIST做数据源对象

总的来说集特征如下：当数据源发生改变生，组件即时更新显示,可以查看，修改，排序源数据

有两种数据源类型
线性的

层级的，一般用于Tree,Menu,MenuBar,PopUpMenuButton

定义数据源的方法
用标签
在AS中定义

二：层级数据对象

可以是XML相关格式或Objects

三：使用条目逞现器和编辑器,用于ListBase下相关的控件

四:Menu，这个只能通过AS来创建

使用RSL减少swf体积进阶篇

momoko8443 — Tue, 17 Nov 2009 08:20:00 +0000

国庆刚过，手头上没什么事，看看论坛，打打酱油，闲着也是闲着随便写点项目开发中小心得吧

市面上RSL文章很多，基础的我就不写了（一般都是把framework_3.x.x.xxxx.swz文件剥离出去），这里写几则平时不常见的RSL使用小技巧

技巧一：
datavisualization_3.x.x.xxxx.swz 还有rpc_3.x.x.xxxx.swz这两个文件也是可以剥离出去的

技巧二：
有些同学把datavisualization和rpc剥离出去后，发现除了runtimes exception，说什么tween effect有问题，这个时候就需要在Flex build path面板中进行加载顺序的设置了，把framework提升到最上面。

技巧三：
如果你将你的项目发布到Portal环境下，相对路径的URL都会进行转发，也就是说所有使用相对路径加载外部资源的都会失效，那么你就需要把你的swz文件放在一台http server上进行远程加载

技巧4：有些同学希望playerglobal.swc,flex.swx,utilites.swc这些包也分离出去，但是这些包是没有经过adobe 签名的，是不能常驻硬盘的，也就说他们生成不了swz文件，只能生成swf，他们可能会存在缓存中，但是当计算机重启或者浏览器关闭这些下载过一次外部类包可能就需要重新下载了，总的来说是得不偿失的。

技巧5：再补充一点，自定义的swc文件，生成后都是500k打底的，发布的时候要选择 merged into code这样其实只占工程文件的大小（20k左右），adobe不会傻到把一些公共类包重复编译（之前一直以为他会重复编译）。所以自定义的swc就不要去整什么RSL了。

十分感谢 jinni.cao 的补充和纠正

1.playerglobal.swc是Flash Player API，由Flash Player提供，所以任何时候都不需要做RSL
2.签名的SWZ由Flash Player缓存，非签名的SWF由浏览器缓存，取决于浏览器的自身的工作方式和用户设置，并不是”计算机重启或者浏览器关闭这些就需要重新下载了”
3.即使SWF不能被缓存，也未见得是”得不偿失”，这取决于你的需求，在某些情况下，RSL即使没有缓存这方面的能力也一样可以节省下载量。
4. “再补充一点，自定义的swc文件，生成后都是500k打底的”
swc文件的大小取决于你的类的大小，你放一个简单的自定义类到RSL试试，只有几百个字节。

开源项目as3wordpresslib测试版发布

momoko8443 — Fri, 06 Nov 2009 09:13:03 +0000

写在前面的话：
艾睿原创团队群的讨论时给我的灵感，as3wordpresslib项目从7月份开始勾划，当中由于工作原因搁置了2个月，其实实际的开发时间也就只有短短2周左右，由于需要筹备婚事，我感觉今后几个月之内不能全力support这个项目，但是不想让项目夭折，所以选择今天把这个完成度90%的项目发布出来，希望感兴趣的朋友能学习它，使用它，完善它，推广它。

项目简介

什么是as3wordpresslib？

as3wordpresslib 是一套as3类库，这套类库实现了wordpress 2.8中基于xmlrpc的service接口。flex/flash开发人员利用这套类库就可以轻易的访问wordpress后台，而把注意力集中在打造自己的个性化Blog UI。

使用as3wordpresslib你可以做些什么？

1. 使用Flex/Flash技术，实现blog的UI，打造个性化blog。
2. 使用Flex/AIR技术,实现blog离线撰写发布程序。

开发as3wordpresslib的目的？

1. 使得希望学习flex/flash开发而又缺少后台支持的初级程序员可以迅速方便的focus在自己感兴趣的领域。（其实这是本project的真正目的，希望每个初学者都可以毫无后顾之忧的使用as3wordpresslib写出自己第一个真正意义上的Hello World ）
2. 希望能带动其他的Flexers能和我一起做些虽然看似dirty work但是对于Flex应用推广和发展却有较大帮助的公益劳动。

为什么选择WordPress作为Blog后台

1. wordpress 目前非常火热，大部分技术人员都拥有自己的wordpress blog。（良好的群众基础）
2. wordpress 更新迅速，支持用户自定义插件皮肤，这正是Flex项目在开发中需要考虑的问题。

项目计划

* xmlrpc协议学习
* 开发环境搭建
* 开发架构搭建
* wordpress xmlrpc api接口定义
* wordpress xmlrpc api具体实现
* 接口测试
* 接口asdoc comments 撰写
* Demo编写
* Guide撰写
* 宣传与发布
* bug征集
* 升级维护

最新近况：

2009-08-04:API Reference Document及类包aswplib.swc已经发布（Download面板有下），邀请了艾睿原创团队的一些朋友先进行内测。
2009-08-03:接口的asdoc和api实现基本都已完成，除了少数几个only for AIR以及在测试过程中没有调通的接口。接下来就开始着手准备Demo，在实际开发中去解决上个阶段没有完成的一些遗留问题。
参考资料

项目地址：
http://code.google.com/p/as3wordpresslib/
SVN地址（含lib和FB4版最佳实践源码）：
http://as3wordpresslib.googlecode.com/svn/trunk/
接口完成情况：
WordPress API

No.	operation name	interface	implement	asdoc	assigner	remark
1	getUsersBlogs	/	/	/	momoko	完成
2	getTags	/	/	/	momoko	完成
3	getCommentCount	/	/	/	momoko	完成
4	getPostStatusList	/	/	/	momoko	完成
5	getPageStatusList	/	/	/	momoko	完成
6	getPageTemplates	/	/	/	momoko	完成
7	getOptions	/	/	/	momoko	完成
8	setOptions	/	/	/	momoko	完成
9	deleteComment	/	/	/	momoko	完成
10	editComment	/	/	/	momoko	完成
11	newComment	/	/	/	momoko	完成
12	getCommentStatusList	/	/	/	momoko	完成
13	getPage	/	/	/	momoko	完成
14	getPages	/	/	/	momoko	完成
15	getPageList	/	/	/	momoko	完成
16	newPage	/	/	/	momoko	完成
17	deletePage	/	/	/	momoko	完成
18	editPage	/	/	/	momoko	完成
19	getAuthors	/	/	/	momoko	完成
20	getCategories	/	/	/	momoko	完成
21	newCategory	/	/	/	momoko	完成
22	deleteCategory	/	/	/	momoko	完成
23	suggestCategories	/	/	/	momoko	完成
24	uploadFile	/	/	/	momoko	only for AIR 未测试
25	getComment	/	/	/	momoko	完成
26	getComments	/	/	/	momoko	完成

Blogger API

No.	operation name	interface	implement	asdoc	assigner	remark
1	getUsersBlogs	/	/	/	momoko	完成
2	getUserInfo	/	/	/	momoko	完成
3	getPost	/	/		momoko	完成
4	getRecentPosts	/	/	/	momoko	完成
5	getTemplate	/	/		momoko	该接口不能正常工作
6	setTemplate	/	/		momoko	该接口不能正常工作
7	newPost	/	/	/	momoko	完成
8	editPost	/	/	/	momoko	完成
9	deletePost	/	/	/	momoko	完成

MetaWeblog? API

No.	operation name	interface	implement	asdoc	assigner	remark
1	newPost	/	/	/	momoko	完成
2	editPost	/	/	/	momoko	完成
3	getPost	/	/	/	momoko	完成
4	getRecentPosts	/	/	/	momoko	完成
5	getCategories	/	/	/	momoko	完成
6	newMediaObject	/	/	/	momoko	only for AIR 未测试
7	deletePost	/	/	/	momoko	完成
8	getTemplate	/	/	/	momoko	底层实现调用了BloggerService?接口不能工作
9	setTemplate	/	/	/	momoko	底层实现调用了BloggerService?接口不能工作
10	getUsersBlogs	/	/	/	momoko	完成

MovableType? API

No.	operation name	interface	implement	asdoc	assigner	remark
1	getCategoryList	/	/	/	momoko	完成
2	getRecentPostTitles	/	/	/	momoko	完成
3	getPostCategories	/	/	/	momoko	完成
4	setPostCategories	/	/	/	momoko	完成
5	supportedMethods	/	/	/	momoko	完成
6	supportedTextFilters	/	/	/	momoko	测试时无返回结果，待进一步验证
7	getTrackbackPings	/	/	/	momoko	测试时无返回结果，待进一步验证
8	publishPost	/	/	/	momoko	完成

as3wordpresslib api用户指南

1 在本站“Downloads”下载as3wplib.swc（目前发布的1.0版本只支持Flex 4 SDK，以后会发布 SDK 3的版本）
2 在项目中导入swc类包
* 在FlashBuilder? 4中对新建的项目点击右键，选择“Properties”
* 在弹出面板左侧选择“Flex Build Path”一栏，在相应的右侧面板中选择“Library path” tab
* 点击“Add SWC”按钮导入之前下载的as3wplib.swc

3 为项目配置wordpress的xmlrpc地址（仅针对Flex 4 SDK，Flex3和flash的配置flashvars方法请自行google）
* 打开项目目录中的“html-template”文件夹下的“index.template.html”文件
* 对38行附近代码作如下修改，增加一个属性 flashvars.wp_xmlrpc，其指向的就是wordpress的xmlrpc地址。

var xiSwfUrlStr = “${expressInstallSwf}”;
var flashvars = {};
flashvars.wp_xmlrpc = “http://127.0.0.1/wordpress/xmlrpc.php”;
var params = {};
params.quality = “high”;

4 WordPress提供的API每一处调用都需要传递用户名密码，这么做对于我们使用Flex制作Blog UI来说非常不便，因为Flex不能load本地文件，这对于账号配置来说是非常不安全的，幸好WordPress提供个几种角色，我们只需配置一个只读角色给API即可。
* 使用管理员账号登陆WordPress，在User管理处新增一个Subscriber（订阅者）账号，这个账号只有只读权限。
* 同样使用flashvars方式，将Subscriber用户名密码配置在这里

5 WordPress中的API有一点让我很费解，就是某些get操作也需要写权限，这样的话，我们配置的Subscriber账号就无法访问这些API，我只好hack一些WordPress里xmlrpc.php中的代码了，将一些不合理接口的写权限验证给注释掉。（由于我现在无法统计出所有的不合情理的借口，所以请使用尝鲜版的用户自行注释，以后我会给出我修改好的xmlrpc.php文件，用户只需替换即可）

* 注释方法以getCategories()方法为例注释 2786两行即可。
//if( !current_user_can( ‘edit_posts’ ) )
// return new IXR_Error( 401, ( ‘Sorry, you must be able to edit posts on this blog in order to view categories.’ ) );

6 在你的AS3代码第一次调用as3wplib之前，配置xmlrpc的路径
Flex4：Configuration.getInstance().xmlrpcUrl = FlexGlobals?.topLevelApplication.parameters["wp_xmlrpc"];
Flex3：Configuration.getInstance().xmlrpcUrl = Application.application.parameters["wp_xmlrpc"];
Flash：Configuration.getInstance().xmlrpcUrl = LoaderInfo?（this.root.loaderInfo）.application.parameters["wp_xmlrpc"];
鸣谢：
艾睿原创群给予意见和帮助的朋友，特别是陆仕桑同学和kenshin

备注：
这是我修改的xmrpc.php，不过只修改了几个主要接口，同学们可以自行根据Guide上的提示自行修改
最佳实践测试截图

一个Flex3er学Flex4(2)——Groups vs Canvas

momoko8443 — Wed, 05 Aug 2009 07:32:20 +0000

这篇日志会维护Flex4中的Groups和Flex3中的Canvas的不同点，发现一点写一点。

正好艾睿论坛上有人问道这个问题。

Canvas中要设置它的背景和边框是十分容易的

Groups中则比较复杂了。

http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/halo”
height=”100″ width=”600″>

一个Flex3er学Flex4(1) ——加载启动参数flashvar

momoko8443 — Wed, 05 Aug 2009 07:08:53 +0000

flex3中的做法是在html-template下修改index.template.html如下

AC_FL_RunContent(
“src”, “${swf}”,
“width”, “${width}”,
“height”, “${height}”,
“align”, “middle”,
“id”, “${application}”,
“quality”, “high”,
“bgcolor”, “${bgcolor}”,
“name”, “${application}”,
“allowScriptAccess”,”sameDomain”,
“type”, “application/x-shockwave-flash”,
“pluginspage”, “http://www.adobe.com/go/getflashplayer“,
“flashvars”,”id=913092672″
);

然后在as3中使用Application.application.parameters["id"]来调用

Flex4中的设置方法有所改变，还是index.template.html,设置如下

在as3中调用方式也发生了改变

FlexGlobals.topLevelApplication.parameters["id"]

转:《Flex 4 & Flash Builder 4 快速入门》正式发布

momoko8443 — Fri, 26 Jun 2009 06:17:16 +0000

目录（图书目录已编入PDF”书签”栏）

第一章 Flash Builder 4 背景

1.1 从Flex Builder到Flash Builder

第二章 Flash Builder 4 界面
2.1 主界面
2.2 主菜单
2.3 工具条
2.4 主要窗口

第三章 Flash Builder 4 新特性
3.1 Package explorer
3.2 悬停时的ASDOC提示
3.3 Getter & Setter
3.4 自动生成EventHandler
3.5 条件断点

第四章 Flex SDK 4 新特性
4.1 主题
4.2 布局
4.3 特效
4.4 样式
4.5 状态
4.6 双向绑定
4.7 ASDoc
4.8 SWFObject 与 HTML Template

第五章自定义组件开发

5.1 自定义Flex组件
5.2 MXML组件开发
5.3 ActionScript组件开发

第六章与服务端通信

6.1 通过Http Service与服务端通信
6.2 通过Web Service与服务端通信
6.3 通过Remoting与服务端通信
6.4 与Flash Media Server交互

《Flash Builder 4 快速入门》内容简介

在Adobe发布Flash Builder 4后，艾睿论坛（bbs.airia.cn）编辑团队协作完成了这部教学。《Flash Builder 4 快速入门》6月25日正式发布第一个版本，今后还会根据读者需要进行更新。

本书适合谁读？

《Flash Builder 4 快速入门》除了适合想学习FLEX开发和正在学习FLEX开发的朋友，也广泛适用与FLASH、 Actionscript开发者进行转型和深入学习。包括.NET、JAVA开发人员在内，这本书都将为你日后的含RIA开发工作奠定牢固的知识基础。

章节简介：

本书1-2章主要为新接触FLEX开发的朋友提供入门帮助，以图文并茂的方式从零基础开始指引新手走进 FLEX开发，如果是有一定基础的FLEX开发者，这两章可以简单翻阅。3-5章开始进阶学习，介绍FB4 / FLEX SDK 4 新特性与开发实例，适合绝大多数的FLEX开发者阅读。第6章为通信服务方面的必备知识，这一章以实际案例的方式展示了FLEX与服务端通信的4种方式。

本书作者：

本书凝聚了艾睿编辑团队各位作者的大量心血，以下是参与本书编辑的作者，如果你在阅读的期间遇到问题也可以进入Flash Builder快速入门专栏联系作者，或进入作者的博客与其交流。

他们分别是（排名不分先后）：

罗楷
http://www.flextheworld.com
kevin.luo.sl@gmail.com

郭峰
http://www.hydra1983.com
Edison@airia.cn

郑会宾
http://www.flexers.cn
momoko8443@163.com

唐凡
http://www.tangfanzone.com
woodytf@sina.com

陆仕桑
http://lushisang.com
lushisang@gmail.com

《Flash Builder 4 快速入门》专栏：
http://www.airia.cn/flashbuilder/

《Flash Builder 4快速入门》PDF、源码包下载页：

http://www.airia.cn/flashbuilder/fb4Qbook/source/

下载 Adobe Reader 9 阅读器:

下载地址http://www.onlinedown.net/soft/2696.htm

本帖（以上内容）欢迎大家踊跃转载。让更多的朋友顺利走入FLEX开发。

FQA：

为什么我打开需要密码？

编辑团队对PDF的”修改权限”设置了密码，我们希望可以保证该文档的完整性、安全性，不希望文档被任意篡改,最终目的是为了保障读者权益。但这并不影响阅读和学习，通常低版本的Adobe Reader 会报出需要密码，请使用 Adobe Reader 9 阅读器。