当前位置: 首页 > 工具软件 > Swiz > 使用案例 >

Swiz-快速上手

雍志文
2023-12-01

简单配置

再视图中可以这样声明swiz:定义BeanProvider和一些配置属性

<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:view="org.swizframework.quickswiz.view.*" xmlns:config="org.swizframework.quickswiz.config.*"
    xmlns:swiz="http://swiz.swizframework.org">
 
    <fx:Declarations>
        <swiz:Swiz>
 
            <!-- 可以直接在beanProviders中定义bean,也可以定义非视图的bean组件 -->
            <swiz:beanProviders>
                <config:Beans />
            </swiz:beanProviders>
 
            <swiz:loggingTargets>
                        <swiz:SwizTraceTarget id="myTraceTarget" />
                    </swiz:loggingTargets>
 
            <swiz:config>
                <!-- The eventPackages 是事件类的包路径,and viewPackages 可选择项,是视图组件的包路径. -->
                <swiz:SwizConfig
                    eventPackages="org.swizframework.quickswiz.event.*"
                    viewPackages="org.swizframework.quickswiz.view.*" />
            </swiz:config>
 
        </swiz:Swiz>
    </fx:Declarations>
     
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" paddingTop="20" />
    </s:layout>
     
    <view:UserForm id="userForm" />
 
</s:Application>

非视图组件可以这样声明swiz

<swiz:BeanProvider
    xmlns:swiz="http://swiz.swizframework.org" xmlns:service="org.swizframework.quickswiz.service.*"
    xmlns:controller="org.swizframework.quickswiz.controller.*">
 
    <service:UserService id="userService"/>
    <controller:UserController id="userController"/>
 
    <!-- 通过servicehelper 与服务端 -->
    <swiz:ServiceHelper id="serviceHelper" />
 
</swiz:BeanProvider>

依赖注入,事件控制,服务端交互

通过[Inject]标识 依赖注入

package org.swizframework.quickswiz.controller
{
    import org.swizframework.quickswiz.model.User;
    import org.swizframework.quickswiz.service.UserService;
     
    public class UserController
    {  
        [Inject]
        public var userService : UserService;  
         
        [Bindable]
        public var currentUser : User;
    }
}

不仅可以注入一个类,还以注入类中自己的属性。下面的UserForm没有必要在BeanProvider中声明。因为先前已经在配置里面定义了视图的包路径,所以swiz会自动扫描处理注释。

<s:Panel
    xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
     
    <fx:Script>
        <![CDATA[
            import org.swizframework.quickswiz.event.UserEvent;
            import org.swizframework.quickswiz.model.User;
             
            [Bindable]
            [Inject( source="userController.currentUser", bind="true" )]
            /**
             * 既可以注入整个controller实例,也可以注入controller实例中的currentUser属性
             */
            public var user : User;
        ]]>
    </fx:Script>
     
    <mx:Form>
        <mx:Text id="userId" text="{isNaN( user.id ) ? 'N/A' : user.id}" />
        <s:TextInput id="firstName" text="{user.firstName}" />
        <s:TextInput id="lastName" text="{user.lastName}" />
        <s:TextInput id="email" text="{user.email}" />
        <s:Button label="Save" />
    </mx:Form>
     
</s:Panel>

派发和处理事件

<s:Panel
    xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
     
    <fx:Script>
        <![CDATA[
            import org.swizframework.quickswiz.event.UserEvent;
            import org.swizframework.quickswiz.model.User;
             
            [Bindable]
            [Inject( source="userController.currentUser", bind="true" )]
            /**
             * We could inject the whole controller instance, but we only need
             * one property from the controller, the current user, so we just
             * inject that property.
             */
            public var user : User;
             
            /**
             * 这里派发的是一个标准的Flex事件,不是swiz特有的。
             */
            private function saveUser() : void
            {
                user.firstName = firstName.text;
                user.lastName = lastName.text;
                user.email = email.text;
                var event : UserEvent = new UserEvent( UserEvent.SAVE_USER_REQUESTED );
                event.user = user;
                dispatchEvent( event );
            }
             
        ]]>
    </fx:Script>
     
    <mx:Form>
        <mx:Text id="userId" text="{isNaN( user.id ) ? 'N/A' : user.id}" />
        <s:TextInput id="firstName" text="{user.firstName}" />
        <s:TextInput id="lastName" text="{user.lastName}" />
        <s:TextInput id="email" text="{user.email}" />
        <s:Button label="Save" click="saveUser()" />
    </mx:Form>
     
</s:Panel>

UserEvent的代码,唯一注意的是把bubbles设置为true,才可以让swiz捕获。在下面的例子中,controller中添加了一个事件处理方法。

package org.swizframework.quickswiz.event
{
    import org.swizframework.quickswiz.model.User;
    import flash.events.Event;
     
    public class UserEvent extends Event
    {
        public static const SAVE_USER_REQUESTED : String = "saveUser";
        public var user : User;
         
        /**
         * This is just a normal Flex event. The only thing to note is that we set 'bubbles' to true,
         * so that the event will bubble up the display list, allowing Swiz to listen for your events.
         */
        public function UserEvent( type:String )
        {
            super( type, true );
        }
    }
}

上面知道了如何派发事件,下面看下如何处理事件。swiz提供了[EventHandle]的注释。当有UserEvent.SAVE_USER_REQUESTED类型的事件发生时,swiz会自动调用controller中的saveuser的方法,并且会把user当做参数传入

package org.swizframework.quickswiz.controller
{
    import org.swizframework.quickswiz.model.User;
    import org.swizframework.quickswiz.service.UserService;
     
    public class UserController
    {
        [Inject]
        public var userService : UserService;
         
        [Bindable]
        public var currentUser : User;
         
        [PostConstruct]
        /**
         * [PostConstruct] 注释是表示所有依赖都注入完成后调用的方法。
         * 这个例子表示所有依赖注入完成后会new user的实例
         */
        public function createDefaultUser() : void
        {
            currentUser = new User();
        }
         
        [EventHandler( event="UserEvent.SAVE_USER_REQUESTED", properties="user" )]
        /**
         * Perform a server request to save the user
         */
        public function saveUser( user : User ) : void
        {
            // TODO: Add server interaction
        }
         
    }
}

当非视图组件例如controller和service派发事件时,应该怎么做?swiz提供[Dispatcher]注释使用。

package org.swizframework.quickswiz.service
{
    import org.swizframework.quickswiz.model.User;
    import flash.events.IEventDispatcher;
    import mx.rpc.AsyncToken;
     
    import org.swizframework.utils.services.MockDelegateHelper;
 
    public class UserService
    {
        [Dispatcher]
        /**
         * 通过[Dispatcher]注入一个事件派发器.
         * 通过派发器触发相关的 [EventHandler].
         */
        public var dispatcher : IEventDispatcher;
 
        /**
         * 避免与服务器的依赖 我们可以使用 Swiz helper class 创建一个模拟的AsyncTokens
         */
        private var mockHelper : MockDelegateHelper;
         
        public function UserService()
        {
            mockHelper = new MockDelegateHelper();
        }
         
        /**
         * 一般在应用中,我们需要调用 RemoteObject, HTTPService, etc.
         */
        public function saveUser( user : User ) : AsyncToken
        {
            user.id = Math.round( Math.random() * 100 );
            return mockHelper.createMockResult( user );
        }
    }
}

与服务器交互

现在controller可以相应保存user的事件了,最后一步就是请求后台服务器包user保存到数据库中。一般来说是自己构造请求,并处理ResultEvent和FaulEvent事件。Swiz可以简化这些流程。下面的controller中你可以看到Swiz自己的类 ServiceHelper已经注入,可以调用executeServiceCall方法该方法将自动获得AsyncToken RPC调用和创建响应者对象。下面即调用userService中的saveUser方法

package org.swizframework.quickswiz.controller
{
    import org.swizframework.quickswiz.model.User;
    import org.swizframework.quickswiz.service.UserService;
    import mx.controls.Alert;
    import mx.rpc.events.ResultEvent;  
    import org.swizframework.utils.services.ServiceHelper;
     
    public class UserController
    {
        [Inject]
        public var userService : UserService;
 
        [Inject]
        public var serviceHelper : ServiceHelper;
                 
        [Bindable]
        public var currentUser : User;
         
        [PostConstruct]
        /**
         * [PostConstruct] methods are invoked after all dependencies are injected.
         * In this example, we set up a default user after the bean is created.
         */
        public function createDefaultUser() : void
        {
            currentUser = new User();
        }
         
        [EventHandler( event="UserEvent.SAVE_USER_REQUESTED", properties="user" )]
        /**
         * Perform a server request to save the user
         */
        public function saveUser( user : User ) : void
        {
            serviceHelper.executeServiceCall( userService.saveUser( user ), handleSaveUserResult );// handleSaveUserResult 是成功请求后的回调函数
        }
         
        /**
         * Handle the server call result
         */
        private function handleSaveUserResult( event : ResultEvent ) : void
        {
            // Show an Alert just to make it obvious that the save was successful.
            Alert.show( 'User saved successfully!' );
        }
         
    }
}






转载于:https://my.oschina.net/tsmaldragon/blog/198545

 类似资料: