BlogJava-【永恒的瞬间】 -文章分类-flex2Cairngorm

Flex中自定义事件

☜♥☞MengChuChen — Wed, 28 Feb 2007 09:00:00 GMT

Flex中的事件机制

2006-11-28 10:37

一. 事件简介
事件可以由外设触发, 比如:键盘,鼠标, 也可能是外部输入, 比如:web service的返回.
事件还能由组件的外观和生命周期发生变化时触发, 比如:组件的创建或者改变大小.
所有用户与应用交互都会产生事件.用户没有直接与应用交互也可能产生事件, 比如:数据装载完毕.
你可以在程序中使用事件监听器监听这些事件. 事件监听器是函数方法用于响应指定的事件. 有时也称之为事件处理器.
Flex的事件模型基于DOM3事件模型.
组件产生派发事件并消费(监听)其他事件.如果一个对象想要了解其他对象事件的信息, 可以注册一个监听器.
当事件发生时,对象派发此事件到所有注册过的监听器中.
组件有Flex提供的内建事件. 也可以使用派发-监听模型定义自己的事件监听器, 并指定监听器监听何种事件.
二. 事件流简介
当一个事件被派发出来时, 事件对象从根节点开始自上而下开始扫描display list, 一直到目标对象, 检查每个节点是否有相应的监听器.
目标对象指的是display list中产生事件的对象. 比如:

如何此时 resize了VBox, 则会从根(Application)开始, 下来检查Panel, HBox, 直到目标对象-产生resize事件的VBox为止.

三. 事件的派发
Flex中可以通过dispatchEvent()方法手工派发事件, 所有UIComponent的子类都可以调用此方法.
语法:
objectInstance.dispatchEvent(new Event("event_type"):Boolean
参数event_type是Event对象的type属性. 函数的返回值总是True.
可以使用此方法派发任意事件, 而不仅仅是用户自定义事件, 比如: 可以派发一个Button的Click事件.
var result:Boolean = buttonInstance.dispatchEvent(new Event(MouseEvent.CLICK));

在Flex应用中不是必须对新派发的事件进行处理, 如果触发了一个事件, 而没有对应的Listener时,Flex忽略此事件.
如果想给Event对象添加新属性, 就必须继承Event类,然后定义新属性

四.事件的传播:
事件触发后, Flex有3个检测事件监听器的阶段, 3个阶段的发生的顺序如下:
1. 捕获
2. 目标
3. 上浮
在任意一个阶段, 节点们都有机会操作事件. 比如: 用户点击了一个在VBox中的Button,
在捕获阶段, Flex检查Application对象(根节点)和VBox是否有监听器处理此事件. Flex然后在目标阶段触发按钮的监听器.
在上浮阶段, VBox和应用以与捕获阶段相反的顺序再次获得机会处理事件.
在Actionscript3.0中,你可以在任意目标节点上注册事件监听器. 但是部分事件会被直接传给目标节点,比如Socket类.
捕获阶段的节点顺序是从父节点到子节点的, 而上浮阶段刚好相反.
捕获事件缺省是关闭的,也就是说如果要捕获事件, 必须显式指定在捕获阶段进行处理.
每一个Event都有target和currentTarget属性, 帮助跟踪事件传播的过程.

捕获阶段:
在捕获阶段,Flex在显示列表中检查事件的祖先是否注册了事件的监听器. Flex从根节点开始顺序而下.
大多数情况中, 根节点是Application对象. 同时, Flex改变事件的currentTarget值.
缺省情况下, 在此阶段,没有容器监听事件. use_capture参数的值是False,在此阶段添加监听的唯一方法是在调用add_listener时,
传入一个为True值的use_capture参数, 比如:
myAccordion.addEventListener(MouseEvent.MOUSE_DOWN, customLogEvent, true);
如果是在Mxml中添加监听, Flex设置此参数为False, 没有办法进行修改.
如果设置了use_capture为True, 那么事件将不会上浮. 如果既想捕获又想上浮就必须调用 addEventListener两次.
一次use_capture参数为true, 一次为false;
捕获很少使用, 上浮的使用更为普遍.

目标阶段:
在目标阶段, Flex激发事件的监听程序, 不检查其他的节点.

上浮阶段:
事件只在bubbles属性为True时才进行上浮. 可以上浮的事件包括: change, click, doubleClick, keyDown, keyUp, mouseDown, mouseUp.
在上浮阶段, Flex改变事件的currentTarget属性, 而target属性是初始派发事件的对象.

查询事件阶段:
使用事件的eventPhase可以获得事件当前的阶段,
1: CAPTURE_PHASE
2: AT_TARGET
3: BUBBLING_PHASE
示例: private function determineState(event:MouseEvent):Void { Debug.trace(event.eventPhase + ":" + event.currentTarget.id); }

停止传播:
使用下面两个函数停止事件的传播:
stopPropagation()
stopImmediatePropagation()

件是一个非常有用的功能，通常用于信息传递交互大大提高程序编写的灵活性。在高级语言中都会集成这方面特性；Flex也不例外几乎所有控件中都集成了大量的事件，如果Button的Click事件等。但实际应用中控件自有的事件是不能满真实需要的，特别在自己编写自定义控件时，自定义控件内部信息的改变如何及时通知所在的容器变得很更要；这个时候自定义事件就起到它的作用。

在Flex中定义事件有两中情况，分别是ActionScript和MXML中定义。

在ActionScript中定义：

CODE:

[Copy to clipboard]

[Event(name="myEnableEvent", type="flash.events.Event")]

public class MyComponent extends UIComponent

{

...

}

在MXML中定义：

CODE:

[Copy to clipboard]

[Event(name="DataChange", type="DataChangeEvent")]

DataChangeEvent事件参数的定义：

CODE:

[Copy to clipboard]

import flash.events.Event;

public class DataChangeEvent extends flash.events.Event

{

   public function DataChangeEvent()

   {

            super("DataChange");

   }

   public var Data:Object;

}

在自定义控件中定义和触发事件:

CODE:

[Copy to clipboard]

      [Event(name="DataChange", type="DataChangeEvent")]




                  function Change():void

                  {

                        this.dispatchEvent(new DataChangeEvent());

                  }

            ]]>

容器接收相关自定义控件事件：

CODE:

[Copy to clipboard]

                  import mx.controls.Alert;

                  function onChange(e:DataChangeEvent)

                  {



                  }

            ]]>

其实自定义事件的现实也很简单,但起着非常重要的作用；正是因为有了事件的机制，使得大部分重复的功能抽取到自定义控件中，从而达到一个很高的代码重用性。

☜♥☞MengChuChen 2007-02-28 17:00 发表评论

架构一个Flex应用程序

☜♥☞MengChuChen — Wed, 28 Feb 2007 08:55:00 GMT

架构一个Flex应用程序

使用Flex的web开发者可能最初会对用户界面模型感到困惑。虽然传统的、类似servlet的、请求-响应（request-response）模型将会在Flex中应用，但是却存在一种更好的方法。由于ActionScript语言中的“[Binding]”标签，你可以把你的视图绑定到模型数据，这样一来模型的更改就会自动影响到视图。Cairngorm 微型架构使这种方法得到形式化，而且它也是那些想要领会如何“让它们在一起工作”的开发者的一个非常好的起点。在这篇文章中我将描述变量绑定，特性驱动开发和Carigorm在NoteTag中是如何一起工作的

这里是一个典型的Flex应用程序可能的架构：

域（Domain）
·组成域模型的所有类。在NoteTag中，它包含了Notes（记录），Tasks（事务）以及Subscriptions（订阅）（Subscriptions是相关Notes或Tasks的一个群集（collection））。

模型（Model）
·一个保存域模型的可绑定实例的一个单体（singleton）。在NoteTag中，ModeLocator单体保存了用户的订阅清单，用户的连接，当前的订阅，当前的记录以及其他。

视图（View）
·UI组件（通常来说就是MXML文件，虽然并不总是）。依赖状态（state-dependent）的UI组件被绑定到ModeLocator的实例变量。如果ModeLocator中数据被标记为“[Bindable]”，那么它的任何改变都会导致UI自动更新。NoteTag中的一个例子就是NoteListView，它显示了当前订阅中的记录列表。如果当前的订阅或者它的任何一个记录改变了，那么NoteListView将会自动更新来反应这些改变。

控制器（Controller）
·同事件驱动的Commands一样执行特性所需的下部构造。NoteTag中的例子包括GetSubscriptionCommand, GetNoteCommand 以及其他。

业务（Business）
·完成域中对象操作的业务逻辑类，经常呼叫远程服务并且异步返回结果。对大部分NoteTag的业务逻辑来说SubscriptionManager类是entry point。

服务（Service）
·服务层，保存了用来呼叫远程服务（HTTPService,RemoteService和WebService）的所有类。NoteTag 使用了一个服务工厂（factory）类集合，减轻了对特殊的HTTP服务的部署，这些HTTP服务来自进行HTTP 服务呼叫的组件。

多数应用程序特性都有上面的一些或者全部结构。下面是一个典型特性的工作流程：
1.视图（view）广播一个事件。
2.单体控制器（controller）收到这个事件，把它映射到相应的Command，并且执行这个Command。
3.Command委托适当的业务（Business）对象执行业务逻辑。
4.业务（Business）对象执行业务逻辑，可能对不同的Service进行一个或者多个异步呼叫，并且通过分派（dispatch）一个新的事件给Command来返回结果。
5.Command将结果赋给单体模型。
6.绑定到单体模型中的数据的所有视图都自动更新。

它是如何在一个特定的特性中工作的呢？当用户从Notes列表（看下面，在屏幕的顶端）中选中了一个Note时，这个Note就会从适当的存储（Blogger或TypePad）中加载并显示在编辑器中（看下面，在屏幕的底端）：

1.广播事件

当用户在第一个Note上点击时，NoteListView分派一个事件，如下：

程序代码

// NoteListView.mxml
private function getSelectedEntry(event:ListEvent) : void
{
  var selectedEntry:TagBasedEntry =
    TagBasedEntry(currentFeed.entries[event.rowIndex-1]);
  Application.application.dispatchEvent(
    new GetNoteEvent(selectedEntry.metadata,true));
}

2. 对事件相应

因为NoteTag的Front Controller已经把它自身注册来监听所有的Command Event，当GetNoteEvent 被分派的时候它将会被通知。

程序代码

// NoteTagController.as
public class NoteTagController extends FrontController
{
  public function NoteTagController()
  {
    addCommand(LoginEvent.EVENT_LOGIN, LoginCommand);
    addCommand(GetNoteEvent.EVENT_GET_NOTE, GetNoteCommand);
    addCommand(GetTaskEvent.EVENT_GET_TASK, GetTaskCommand);
    addCommand(PostNoteEvent.EVENT_POST_NOTE, PostNoteCommand);
    // more commands...
  }
}

Cairngorm的 Front Controller通过执行适当的command提供了监听事件和响应事件的基础构造。

3. 执行 Command

为了获得这个Note，NoteTag需要呼叫存储了用户note的blog服务器。实现了Cairngorm的Command接口的GetNoteCommand就像这样：

程序代码

// GetNoteCommand.as
internal class GetNoteCommand extends ChainedCommand
{
  public override function execute(event:CairngormEvent):void
  {
    var initialEvent:GetNoteEvent = GetNoteEvent(event);

    var subscriptionManager:SubscriptionManager =
      ModelLocator.getInstance().subscriptionManager;

    setNextEventHandler(subscriptionManager,
      handleLoadNote,
      LoadNoteEvent.EVENT_LOAD_NOTE,
      onSubscriptionFault,
      SubscriptionFaultEvent.EVENT_SUBSCRIPTION_FAULT);
    subscriptionManager.loadNote(initialEvent.metadata);
  }

  private function handleLoadNote(event:LoadNoteEvent):void
  {
    // handle result here...
  }

  // ...
}

（你可能已经发现了GetNoteCommand 继承了 ChainedCommand——这个类使用setNextEventHandler 方法共同进行一系列异步呼叫。在以后的文章里，我将更深入地讨论ChainedCommand，并大体说一下异步回应器（responder）。）

4. 执行业务逻辑

SubscriptionManager通过执行对tag服务器和blog服务器一系列的HTTP service呼叫来触发Note的加载。当note被加载完毕时，SubscriptionManager 将分派一个LoadNoteEvent，这个事件将会被GetNoteCommand.handleLoadNote（参见下一条）触发。

5. 更新模型

GetNoteCommand 通过把加载的Note赋给ModelLocator中适当的数据成员来响应事件。

程序代码

// GetNoteCommand.as
internal class GetNoteCommand extends ChainedCommand
{
  // ...

  private function handleLoadNote(event:LoadNoteEvent):void
  {
    ModelLocator.getInstance().currentNote = event.note;
  }

  // ...
}

6. 更新视图

任何绑定到ModelLocator的currentNote成员的视图都将会自动更新来反映新的数据。NoteView，负责在编辑器中显示Note的组件，是这样的一个视图：

程序代码

// NoteView.mxml
http://www.adobe.com/2006/mxml"
    xmlns:view="com.adobe.kiwi.notetag.view.*"
    xmlns="*">

      import com.adobe.kiwi.notetag.model.*;
    [Bindable] private var model:ModelLocator = ModelLocator.getInstance();
  ]]>


      note="{model.currentNote}" />

所有的其它特性——发布一个Note，获得一个Subscription，更新一个Task——会通过同样的Event-to-Command-to-Model-to-View途径来实现。Command-specific事件可以从多种内容中被分派，，而不需要知道哪一个视图会被影响。视图可以绑定到模型的变化而并不需要知道引发的事件是从什么地方被分派的。由于松耦合，出现了更清洁，更容易维护的代码。

☜♥☞MengChuChen 2007-02-28 16:55 发表评论

在 DataGrid 中分页显示记录

☜♥☞MengChuChen — Sat, 24 Feb 2007 01:10:00 GMT

http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initVars()" viewSourceURL="srcview/index.html">

                    import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;

        //holds all the records in the query returned by the CFC function
        private var submissionsAllAryCol:ArrayCollection;

        //holds all the records in an Array
        //so we can use Array methods to
        //get a subset of the records for paging
        private var submissionsAllAry:Array;

        //The subset of the records for the current page
        private var submissionsSlicedAry:Array;

        //The subset of the records in the ArrayCollection
        //that is the dataprovider for the datagrid
        [Bindable]
        private var submissionsViewAryCol:ArrayCollection;

        [Bindable]
        private var start:int; //what record to start with on the current page

        private var increment:int ; //how many records to show per page

        [Bindable]
        private var end:int ; //what record (end-1) to end with on the current page

        [Bindable]
        private var total:int ; //how many total records




        // initialize the variables and get all submissions
        private function initVars():void {

            //initial start and end positions for slicing the Array
            start = 0;
            increment = 10; //how many records to display
            end = 0;

           //Call the CFC method to get the submissions
           myService.getAllSubmissions(139);

        }  //end function initVars()

         /*Handles the result returned by calling the getAllSubmissions method
            of the CFC
            */
            public function handleQueryResult(event:ResultEvent):void{

                //place the query results into an ArrayCollection
                submissionsAllAryCol = event.result as ArrayCollection;

                //convert ArrayCollection to a standard Array
                //so we can use Array slice function
                submissionsAllAry = submissionsAllAryCol.toArray();

                //how many total submissions?
                total = submissionsAllAry.length;

                //determine initial value for end (cannot exceed total)

                if ( total < increment) {

                    end = total;

                } else {

                    end = increment ;

                }//end if


                //take out of the array records start to end (includes records from start to end-1)
                submissionsSlicedAry = submissionsAllAry.slice(start, end);

                //Create an ArrayCollection using the subset of our Array
                //and assign it to the data provider for the datagrid
                submissionsViewAryCol = new ArrayCollection( submissionsSlicedAry );

                //determine if Next button should be enabled
                //as its possible that the number or records returned
                //is less than our number per page (increment)
                nextBtn.enabled = isNextBtnEnabled();


            } //end function

            /*Get the next increment of records for display in the datagrid
            */
            private function getNext():void {

                //going forward so
                //increase start and end by the increment

                start = start + increment ;
                end = end + increment ;

                //don't let the value of end be larger than the
                //total number of records
                if (end > total) {

                    end = total;

                }

                //create a subset of the Array that is holding all the submissions
                submissionsSlicedAry = submissionsAllAry.slice(start, end);

                //update the dataprovider for the datagrid
                submissionsViewAryCol = new ArrayCollection( submissionsSlicedAry );

                //determine if Next button should be enabled

                nextBtn.enabled = isNextBtnEnabled();

                //enable previous button
                //since we have gone to a next page of records
                previousBtn.enabled = true;


            }//end getNext


           /*Get the previous increment of records for display in the datagrid
           */
           private function getPrevious():void {


                   //going backwards
                   end = start;

                //decrease start by the increment

                start = start - increment ;

                //create a subset of the Array that is holding all the submissions
                submissionsSlicedAry = submissionsAllAry.slice(start, end);

                //update the dataprovider for the datagrid
                submissionsViewAryCol = new ArrayCollection( submissionsSlicedAry );

                //determine if previous button should be enabled
                previousBtn.enabled = isPreviousBtnEnabled();

                //enable next button
                //since we have gone to a previous page of records
                nextBtn.enabled = true;


            }//end getPrevious

            /*Return true if button should be enabled
            */
            private function isNextBtnEnabled():Boolean {

                var enableBtn:Boolean = false ;

                if ( end < total ) {

                    enableBtn = true ;

                }

                return enableBtn;


            }//end function isNextBtnEnabled


            /*Return true if button should be enabled
            */

            private function isPreviousBtnEnabled():Boolean {

                var enableBtn:Boolean = false ;

                if ( start >= increment ) {

                    enableBtn = true ;

                }

                return enableBtn;



            }//end function isNextBtnEnabled


        ]]>



            id="myService"
        destination="ColdFusion"
        source="flex.pagingdatagrid.SubmissionsGateway"
        showBusyCursor="true"
        >
                        fault="Alert.show(event.fault.message)"/>




            horizontalAlign="center" verticalAlign="top">








                            click="getPrevious()"/>









                            click="getNext()"/>




                    fontFamily="Verdana" fontSize="10">

☜♥☞MengChuChen 2007-02-24 09:10 发表评论

如何利用 google 查找 Flex 程序

☜♥☞MengChuChen — Sat, 10 Feb 2007 06:01:00 GMT

网上有很多人提供了很多的 Flex 2 制作的程序，并且提供源代码供人查看，但是基本上都是在个人的博客中发表，查找起来很累，基本上是漫无目的溜。其实利用 google 可以很容易查找到各种源代码。
方法：源代码分为 mxml 和 as，而 mxml 文件中肯定包含 http://www.macromedia.com/2006/mxml"> 这句话，因此，只要在搜索框中搜索“mx Application 2006 filetype:mxml”，所有的 Flex 2 代码一览无余。如果要搜 as 文件的话，搜索 "import mx filetype:as"，这个却容易找到一些 as2 的文件，美中不足...

☜♥☞MengChuChen 2007-02-10 14:01 发表评论

Cairngorm

☜♥☞MengChuChen — Thu, 08 Feb 2007 10:00:00 GMT

Cairngorm主要就是对开发Flex应用程序应用了一系列的设计模式，从而使开发出来Flex程序可扩展性，可维护性都大大提高。其工作流程很清晰：

1.Front Controller Listens for User Gestures
前端的控件监听用户的行为。注意它只是监听，并不会做任何反应。

2.Commands Do All the Work
控件监听以后调用Commands来做相应的事情，Command做了所有工作。

3.Delegate Server-Side Business Logic to Business Delegates
把服务器端的业务逻辑委托到 Bussiness Delegates中。因为很多时候command需要获得服务器端数据，所以这样一来它可以直接调用Bussiness Delegates而不用关注如何连接数据的细节，实现了信息隐藏。

4.Business Delegate Finds Services with the Service Locator
Command调用Business Delegate 后，Business Delegate 通过Service Locator来找到相应的RPC services，然后执行实现从服务器端取数据。

5.Transfer Data as Value Objects
把传输过来的数据存储为Value Objects。这点大家应该都很熟悉，比如想要查询一个公告，就必定创建一个公告类，来存储每一个公告的标题等信息。

6.Store State in the Model Locator and Let Model Notify View
在Model Locator 保存状态并且能使Model检测到View的变化。这样一来用户操作就能直接影响Model，比如添加物品到购物车，Model中的购物商品就会自动增加。

☜♥☞MengChuChen 2007-02-08 18:00 发表评论

为什么要选择Cairngorm开发框架？

☜♥☞MengChuChen — Tue, 06 Feb 2007 06:55:00 GMT

我是一个JAVA EE开发人员，从业已经有近七、八年的时间了。对JavaEE的企业用户开发技术框架方面的比较熟悉。对Spring，Struts，Webwork，Hibernate等流行的开源框架也一直在工作中使用。

在现在的MVC框架中，我比较倾向于采用WebWork，灵活轻巧Struts2其实质就是对WebWork2的一次升级，这也说明了WebWork相对与Struts1的优势所在。在现在的RIA开发成为趋势之后，在工作中也使用了DWR做Ajax服务器端的数据处理，并采用js template的脚本处理页面显示数据，其中最大的痛苦就是调试JavaScript，尽管我们使用了firefox的插件调试javascrpt。

正如“JAVA程序员当如何选择RIA开发环境”所提到ajax的的先天缺陷，并不适合RIA的全应用开发，如果只是在页面中的局部使用是有一些优势，根据具体情况选择最合适的。

在Flex的应用程序开发当中，学习了很对范例，基本上浏览了一遍Flex的帮助文档，并自己做了些小程序。

其中遇到最大的困难不是在程序调试方面，而且程序管理方面的，代码混乱，难以控制，尤其在多人开发的时候，更加容易出现这样的情况。这样的情况下RIA的开发是痛苦的，不适宜的。

Cairngorm开发框架说白了就是一个FLEX应用开发的MVC框架（自己的感觉）。将Model，view，Control独立分开，清晰明了。

什么是Cairngorm？Cairngorm是一个通过逻辑功能、数据、用户视图和代码控制的任何事情来划分你的应用程序代码的基础方法论，可以叫做MVC（Model-View-Control）的一种实践方式。

Cairngorm的划分
Model Locator（模型定位器）：存储你的应用中所有的Value Objects（数据）和共享变量在一个位置。和Http的Session对象类似，只是它存储在Flex接口的客户端而不是在中间件应用服务器的服务器端。

View（界面）：通过一个或者多个Flex组件（按钮、面板、组合框、Tile等等）组合在一起的一个个命名单元，绑定数据在Model Locator（模型定位器）中，并且产生基于用户操作（点击、滚动、拖拽等）的自定义的Cairngorm事件。

Front Controller（前端控制器）：接收Cairngorm事件并映射他们到Cairngorm命令控制器上。

Command（命令控制器）：处理商业逻辑，调用Caringorm代理和（或）其它命令。

Delegate（代理）：由命令创建，实例化远程过程调用（HTTP、Web Service等等）并且处理命令的返回结果数据。

Service（服务）：定义连接远程数据存储的远程过程调用（HTTP、Web Service等等）。

有关Cairngorm的资料：/P>

Cairngorm 是Iteration::two的开源项目, 是使用macromedia Flex的RIA开发的最佳
实践(best-practice)框架.
在Cairngorm基础上开发RIA, 将会在Iteration::two的专家体系和现有的灵活可维
护企业解决方案中达到平衡.
Cairngorm本身并不是一个完整的企业应用, 它只是提供了一个开发的骨架, Iteration::two称
之为体系.
在这个体系中包括以下几个部分:
1. Business(业务逻辑部分)
2. Command(命令部分)
3. Control(控制部分)
4. Model(数据模型)
5. View(界面视图)
6. VO(ValueObject)

我们从Control说起:
在Control中, 定义了3个基类: Event, EventBroadcaster, FrontController.
Event用于在应用不同的层之间传递事件, 并携带事件的数据. 包含type和data两个
成员.
type存放一个区别不同事件的名称,将会在FrontController中进行注册.
而在命令(Command)类中, 会对事件进行响应.

EventBroadcaster是一个单例类(singleton), 用于广播用户动作对应的事件. 使用
方法: EventBroadcaster.getInstance().broadcastEvent( ... )

FrontController稍微复杂一点点. 用于将特定的用户动作分发到指定的命令类.
FrontConroller是请求处理的核心类. 整个体系中遍布的EventBroadcaster.getInstance(
).broadcastEvent( ... )这样的调用,
都是用来通知监听控制器: 用户发出了请求. 在实际应用中, 开发者应该生成一个
FrontContoller的子类,
并在构造函数中调用addCommand()注册预期事件的处理命令. FrontController的具
体实现类应该创建一次而且只能创建一次.

http://cairngormdocs.org/

http://labs.adobe.com/wiki/index.php/Cairngorm

☜♥☞MengChuChen 2007-02-06 14:55 发表评论