parsley例4-视图

1.本例目的
    parsley视图的基本原理演示
    视图的模块化
    视图类与视图逻辑类的分离

2.本例代码结构
src
  默认包
    --MainFrame1.mxml  //主程序
    --MainFrame1Config.mxml   //配置文件
    --styles.css  //CSS
  sample1
    --HelloWorldMessage.as  //消息内容类，用于演示嵌套注入
    --ReceiveModel.as   //接收model
    --ReceivePanel.mxml  //接收视图
    --SendModel.as      //发送model
    --SendPanel.mxml    //发送视图
    --SharedModel.as    //共享model
 

3.明确组件注入举例

    绝大部分时候，我们都明确知道将哪些自定义组件交给parsley托管。只有被parsley托管了的视图组件中，才能够使用parsley的元标签，比如[Inject], [MessageHandler], [Init]等。

    将自定义组件注入到parsley中，只需在自定义组件中加入即可。
MainFrame1.mxml
    主窗体中中调用了二个自定义视图组件，这二个视图组件：接收视图和发送视图。

       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:sf=""
       xmlns:hw="org.spicefactory.parsley.sample.helloworld.*"
       minWidth="955" minHeight="600">
  
   
  
  
 

 
  
 
  

 
  
  
 
 

HelloworldConfig.mxml

    xmlns:mx=""
    xmlns:hw="org.spicefactory.parsley.sample.helloworld.*">

   
   
   


HelloworldMessage.mxml
package org.spicefactory.parsley.sample.helloworld
{
 /**
  * 消息类，这个类里面只有一个消息，由Parsley Message Dispatcher派发
  */
 public class HelloWorldMessage
 {
  public var text:String = "Hello World!";
 }
}

ReceiveModel.as
package org.spicefactory.parsley.sample.helloworld
{
    public class ReceiveModel
    {
        [Bindable]
        public var messages:String = "";

        [Inject]
        [Bindable]
        public var sharedModel:SharedModel;

/**
   * The [MessageHandler]标签告诉Parsley 捕获HelloWorldMessage类型消息并由下面的函数处理
   */
        [MessageHandler]
        public function helloMessageHandler (message:HelloWorldMessage) : void {
            messages += message.text + "\n";
        }
    }
}

ReceivePanel.mxml

 xmlns:fx=""
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 xmlns:parsley=""
 title="Receive Panel"
 >
 
  
 
 
 
 
     /** 
    *通过[Inject]标签注入ReceiveModel对象。
    */
   [Inject]
   [Bindable]
   public var model:ReceiveModel;
  ]]>
 
 
 
 
  
 
 
 

 
 
 
 
 


SendModel.mxml
package org.spicefactory.parsley.sample.helloworld
{
    /**
     * 这个model在HelloWorldConfig配置文件内声明，并注入到SendPanel视图组件中。
     */
    public class SendModel
    {
        [Bindable]
        public var initialized:Boolean;
       
        /**
         * The [Inject] metadata tells Parsley to inject a dependency by
         * searching the context for an object of matching type.
         */
        [Inject]
        [Bindable]
        public var sharedModel:SharedModel;

        /**
         * [MessageDispatcher]元标签告诉parsley注入派发函数，用于派发消息。
         */
        [MessageDispatcher]
        public var sendMessage:Function;
       
        /**
         * Init标签告诉Parsley在对象实例化和配置完成后，调用标识的方法.
         */
        [Init]
        public function init() : void {
            initialized = true;
        }
       
        /**
         * 派发消息
         */
        public function sayHello() : void {
            sendMessage(new HelloWorldMessage());
        }
    }
}

SendPanel.mxml


 xmlns:fx=""
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 xmlns:parsley=""
 title="Send Panel"
 >
 
  
 
 
 
     /**
    * [Inject]元标签告诉告诉告诉parsley在上下文中寻找匹配的对象，并注入到这里。
    */
   [Inject]
   [Bindable]
   public var model:SendModel;
   
   
  ]]>
 
 
 
 
  
 
 
 
   label="Model injected?"
  labelPlacement="left"
  enabled="false"
  selected="{ model != null }"/>
   label="Model initialized?"
  labelPlacement="left"
  enabled="false"
  selected="{ model.initialized }"/>
 
 
   label="Click to send a "Hello World!" message"
  click="model.sayHello()"/>
 
 
 
 
 

SharedMode.as
package org.spicefactory.parsley.sample.helloworld
{
    /**
     * A single instance of this model is declared in the MXML configuration
     * file. The same instance is then injected into both the SendModel and
     * ReceiveModel.
     */
    public class SharedModel
    {
        [Bindable]
        public var slogan:String =
            "Parsley is simple, powerful and proven in the enterprise.";
    }
}

 

说明

在自定义组件SendPanel和ReceivePanel中，注入modelPM类有两种写法

一、通过元标签注入

   [Inject]
   public var model:SendModel;

二、如果视图组件注入到parsley中，但视图数据类ReceiveModel，并不想注入到parsley中，则写法如下

   xmlns:view=""

   
  
   理论上应该是ReceiveModel类不能使用parsley元标签，但实际可以使用，不知道为什么？

   代码详细sample2.ReceivePanel.mxml

    xmlns:fx=""
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:parsley=""
    xmlns:sample2="sample2.*"
    title="Receive Panel"
    >
   
       
   
   
   
   
                    /** 
             *通过[Inject]标签注入ReceiveModel对象。
            */
        ]]>
   
   

   
   
       
       
   
   
   

   
   
   
   
   

4.组件优化举例

    Parsley对所有管理对象和组件反射操作代价很大，主要是由于其属性、方法和事件太多。一个组件可能花费30毫秒。parsley维护一个内部反射缓存，如果你使用了大多的不同组件，缓存的意义就不大了。

    通过parsley标签[fastInject]，由容器panel创建模型对象，然后注入到自定义组件中。这种方法的主要优点是，该模型可以在组件之间共享。这只是解决性能是一个方法。

代码详见sample.SendPanel.mxml

    xmlns:fx=""
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:parsley=""
    title="Send Panel"
    >
   
       
   
   
   
                    import sample2.*;
           
            [Bindable]
            public var model:SendModel;
           
           
        ]]>
   
   
   
   
       
   
   
   
            label="Model injected?"
        labelPlacement="left"
        enabled="false"
        selected="{ model != null }"/>
            label="Model initialized?"
        labelPlacement="left"
        enabled="false"
        selected="{ model.initialized }"/>
   
   
            label="Click to send a "Hello World!" message"
        click="model.sayHello()"/>