{"id":218,"date":"2011-01-13T15:22:57","date_gmt":"2011-01-13T14:22:57","guid":{"rendered":"http:\/\/www.capri-soft.de\/blog\/?p=218"},"modified":"2011-04-12T09:16:20","modified_gmt":"2011-04-12T07:16:20","slug":"flex-3-bemalbares-canvas-mit-fluorinefx-messaging-montagsmaler","status":"publish","type":"post","link":"https:\/\/www.capri-soft.de\/blog\/?p=218","title":{"rendered":"Flex 3: Bemalbares mx:Canvas mit FluorineFX-Messaging (Montagsmaler)"},"content":{"rendered":"

Aufgabenstellung<\/h1>\n

Unter Verwendung der FluorineFX Messaging-API soll eine Montagsmaler-Anwendung implementiert werden. Dies bedeutet dass ein User auf eine Leinwand zeichnet und die anderen Seitenbesucher in Echtzeit eine Aktualisierung auf dem Bildschirm erhalten. Dies kann auch als Grundlage f\u00fcr weitere Kollaborationsanwendungen genutzt werden, in denen man gemeinsam ein Dokument konstruieren m\u00f6chte. <\/p>\n

Ansatz<\/h1>\n

Nachdem die Zeichnenfunktionalit\u00e4t implementiert ist, werden die Bildpunkte beim loslassen der Maustaste (MOUSE_RELEASE_EVENT) an alle Clients \u00fcbertragen. Die Clients reagieren bei einer einkommenden Menge an Bildpunkten und zeichnen sofort auf die Leinwand. Es wird immer die komplette Leinwand mit allen Bildpunkten beim Mouse-Release gesendet. <\/p>\n

Durch das Publisher\/Subscriber-Prinzip abonniert die Flex-Anwendung beim Start sofort die Datenquelle „painter<\/strong>„. Die Datenquelle erh\u00e4lt Bildpunkte und verteilt sie an alle Abonennten, wenn diese nach dem zeichnen die Maus gesehn lassen. <\/p>\n

Vorraussetzungen<\/h1>\n

Die FluorineFX-Konfigurationsdatei wird angepasst, so das es eine neue Messaging Quelle „painter“ existiert. <\/p>\n

Konfiguration des Backends<\/h2>\n

services-config.xml:<\/p>\n

\r\n<?xml version="1.0" encoding="utf-8" ?> \r\n<services-config>\r\n    <services>\r\n        <service-include file-path="remoting-config.xml" \/>\r\n        <service-include file-path="messaging-config.xml" \/>\r\n    <\/services>\r\n    \r\n    <!-- Custom authentication -->\r\n    <security>\r\n    <\/security>\r\n    \r\n    <channels>\r\n        <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">\r\n           <endpoint uri="http:\/\/{server.name}:{server.port}\/{context.root}\/Gateway.aspx" \r\n             class="flex.messaging.endpoints.AMFEndpoint"\/> \r\n            <properties>\r\n            <\/properties>\r\n        <\/channel-definition>\r\n\r\n        <channel-definition id="my-rtmp" class="mx.messaging.channels.RTMPChannel">\r\n            <endpoint uri="rtmp:\/\/{server.name}:2037" \r\n            class="flex.messaging.endpoints.RTMPEndpoint"\/>\r\n            <properties>\r\n                <idle-timeout-minutes>20<\/idle-timeout-minutes>\r\n            <\/properties>\r\n        <\/channel-definition>\r\n\r\n    <\/channels>\r\n<\/services-config>\r\n<\/pre>\n
messaging-config.xml:<\/p>\n
\r\n<?xml version="1.0" encoding="UTF-8"?>\r\n<service id="message-service" class="flex.messaging.services.MessageService" \r\n    messageTypes="flex.messaging.messages.AsyncMessage">\r\n\r\n     <!-- DO NOT CHANGE <adapters> SECTION-->\r\n    <adapters>\r\n\t<adapter-definition id="messagingAdapter" \r\n             class="FluorineFx.Messaging.Services.Messaging.MessagingAdapter" \r\n             default="true"\/>\r\n    <\/adapters>\r\n    <destination id="chat">\r\n\t<adapter ref="messagingAdapter"\/>\r\n        <properties>\r\n            <network>\r\n                <session-timeout>0<\/session-timeout>\r\n            <\/network>\r\n        <\/properties>\r\n        <channels>\r\n            <channel ref="my-rtmp"\/>\r\n        <\/channels>\r\n    <\/destination>\r\n    <destination id="textchat">\r\n\t<adapter ref="messagingAdapter"\/>\r\n        <properties>\r\n            <network>\r\n                <session-timeout>0<\/session-timeout>\r\n            <\/network>\r\n        <\/properties>\r\n        <channels>\r\n            <channel ref="my-rtmp"\/>\r\n        <\/channels>\r\n    <\/destination>\r\n    <destination id="painter">\r\n\t<adapter ref="messagingAdapter"\/>\r\n        <properties>\r\n            <network>\r\n                <session-timeout>0<\/session-timeout>\r\n            <\/network>\r\n        <\/properties>\r\n        <channels>\r\n            <channel ref="my-rtmp"\/>\r\n        <\/channels>\r\n    <\/destination>\r\n    <destination id="opminboxrefresher">\r\n\t<adapter ref="messagingAdapter"\/>\r\n    \t<properties>\r\n\t    <network>\r\n            \t<session-timeout>0<\/session-timeout>\r\n            <\/network>\r\n    \t<\/properties>\r\n    \t<channels>\r\n         \t<channel ref="my-rtmp"\/>\r\n    \t<\/channels>\r\n    <\/destination> \r\n<\/service>\r\n<\/pre>\n
Konfiguration des Frontends<\/h2>\n
Bei den Frontend Konfigurationsdateien kann einfach die Datei services-config.xml und die Datei messaging-config.xml kopiert werden. Es k\u00f6nnen aber absolute Pfade anstelle der Platzhalter wie {server.name},{server.port},{context.root} genutzt werden. Hierdurch ist eine lokale Entwicklung der Flex-Anwendungen mit einem entfernten IIS Server m\u00f6glich. <\/p>\n
L\u00f6sung<\/h1>\n
PaintMessaging.mxml (Projektdatei)<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<mx:Application creationComplete="{init()}" xmlns:mx="http:\/\/www.adobe.com\/2006\/mxml" \r\n\tlayout="absolute" xmlns:components="components.*">\r\n\t<mx:Script>\r\n\t\t<!&#91;CDATA&#91;\r\n\t\t\timport models.ModelLocator;\r\n\t\t\timport mx.controls.Alert;\r\n\t\t\timport mx.messaging.events.MessageFaultEvent;\r\n\t\t\timport mx.messaging.events.MessageEvent;\r\n\t\t\timport mx.messaging.messages.AsyncMessage;\r\n\t\t\timport mx.managers.CursorManager;\r\n\t\t\t&#91;Bindable&#93;\r\n            &#91;Embed(source="..\/assets\/stiftklein.png")&#93;\r\n            private var stift:Class;\r\n            \r\n            public var cursorID:int;\r\n            \r\n            public function init():void \r\n            {\r\n            \tconsumer.subscribe();\r\n            }\r\n            \r\n            public function mouseOverHandler(event:MouseEvent):void\r\n            {\r\n            \t\r\n            }\r\n            \r\n            public function downEvent(event:MouseEvent):void \r\n            {\r\n            \t\r\n            } \r\n            \r\n            public function upEvent(event:MouseEvent):void\r\n            {\r\n            \t\r\n            }\r\n            \r\n\tprivate function messageHandler(event:MessageEvent):void\r\n    \t{\r\n    \t    ModelLocator.getInstance().lines=event.message.body as Array;\r\n    \t    dc_main.invalidateDisplayList();\r\n    \t}\r\n   \r\n   \tprivate function messagefaultHandler(event:MessageFaultEvent):void\r\n   \t{ \r\n   \t   Alert.show(event.faultCode+' '+event.faultDetail+' '+event.faultString); \r\n   \t}     \t\t\r\n            \r\n\t&#93;&#93;>\r\n\t<\/mx:Script>\r\n\t<mx:Consumer id="consumer" destination="painter" \r\n\t\tmessage="messageHandler(event)" fault="messagefaultHandler(event)"\/>\r\n    <mx:Producer id="producer" destination="painter" \r\n    \tfault="messagefaultHandler(event)"\/>\t\t\r\n\r\n    <mx:Panel mouseOver="{ cursorID = CursorManager.setCursor(stift); }" \r\n    \tmouseOut="{CursorManager.removeCursor(cursorID);}" \r\n    \tlayout="absolute" \r\n    \ttitle="Montagsmaler by Bj\u00f6rn Karpenstein" \r\n    \tbackgroundColor="#ffffff" \r\n    \tborderThicknessBottom="10" left="20" \r\n    \tright="20" top="20" bottom="20">\r\n       <components:DrawableCanvas id="dc_main" backgroundColor="#ffff80" \r\n       \tbackgroundAlpha="0" width="100%" height="100%" y="0" x="0">\r\n       <\/components:DrawableCanvas>\r\n    <\/mx:Panel>\r\n\t\t\r\n<\/mx:Application>\r\n<\/pre>\n
DrawableCanvas.mxml<\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<mx:Canvas xmlns:mx="http:\/\/www.adobe.com\/2006\/mxml" width="400" height="300" \r\n       creationComplete="init()">\r\n    \r\n    <mx:Script>\r\n        <!&#91;CDATA&#91;\r\n            \r\n            public var lineWidth:Number = 5;\r\n            \r\n            public var lineColour:uint = 1;\r\n            \r\n            public var lineAlpha:Number = 1;\r\n            \r\n            \r\n            private var enabler:DrawingEnabler;\r\n            \r\n            private function init():void\r\n            {\r\n                enabler = new DrawingEnabler(this);\r\n            }            \r\n            \r\n            protected override function updateDisplayList(unscaledWidth:Number,\r\n                            unscaledHeight:Number):void\r\n            {\r\n                super.updateDisplayList(unscaledWidth, unscaledHeight);\r\n            \r\n                if( enabler != null ) enabler.drawLines(graphics, lineWidth, \r\n                lineColour, lineAlpha);\r\n            }\r\n        &#93;&#93;>\r\n    <\/mx:Script>\r\n<\/mx:Canvas>\r\n<\/pre>\n
DrawingEnabler.as<\/p>\n
package components
\n{
\n   import flash.display.Graphics;
\n   import flash.events.MouseEvent;<\/p>\n
   import models.ModelLocator;<\/p>\n
   import mx.core.Application;
\n   import mx.core.UIComponent;
\n   import mx.messaging.messages.AsyncMessage;<\/p>\n
    public class DrawingEnabler
\n    {
\n        private var _target:UIComponent;<\/p>\n
        private var _curentLine:Array;<\/p>\n
        public function DrawingEnabler( target:UIComponent ):void
\n        {
\n            _target = target;
\n            _target.addEventListener(MouseEvent.MOUSE_DOWN, downEvent);
\n            _target.addEventListener(MouseEvent.MOUSE_UP, upEvent);
\n            _target.addEventListener(MouseEvent.MOUSE_OUT, upEvent);
\n        }<\/p>\n
\t\tpublic function sendMessage(stream:Array):void
\n    \t{
\n   \t\t\tvar message:AsyncMessage = new AsyncMessage();
\n   \t\t\tmessage.body = stream;
\n   \t\t\tApplication.application.producer.send(message);
\n   \t\t}                  <\/p>\n
        public function newLine():void
\n        {
\n            _curentLine = new Array();
\n            ModelLocator.getInstance().lines.push( _curentLine );<\/p>\n
            if( ModelLocator.getInstance().lines.length > 10 )
\n                ModelLocator.getInstance().lines.shift();
\n        }<\/p>\n
        public function addPoint(xIN:int, yIN:int):void
\n        {
\n            _curentLine.push( { x:xIN, y:yIN } );
\n            _target.invalidateDisplayList();
\n        }<\/p>\n
        public function drawLines(graphics:Graphics,lw:Number,lc:uint,la:Number):void
\n        {
\n            graphics.clear();
\n            graphics.lineStyle(lw,lc,la);<\/p>\n
            for( var j:int = 0; j\n