Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Modular Application

Avatar

Level 2

Hello,

I am at the conceptualisation stage in my project design and new to cocomo.

Is it possible to build a modular application, say using puremvc that only loads cocomo components as and when required – i.e. if the user wants to use the whiteboard then it is loaded in, if they want to chat then the chat module is loaded in etc. All the components would need to connect to the same room.

Or, do all the interactive cocomo components you want to use have to go inside one big ConnectSessionContainer?

If it is possible would it be tricky to implement?

1 Accepted Solution

Avatar

Correct answer by
Former Community Member

Hi Andy,

Like other Flex application , you can build modules for AFCS pods and then you can use them to load as an when required.

Here is one example of a simple chat module I wrote some time back using AFCS

This file below is  ChatModule.mxml , it makes a chat module.

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
     layout="absolute" width="400" height="300"
     xmlns:temp="*" xmlns:pods="com.adobe.rtc.pods.*">
    <mx:Script>
        <![CDATA[
       
       
        ]]>
    </mx:Script>
    <pods:SimpleChat width="100%" height="100%" />
</mx:Module>


Now a main example of an app that uses the module above is given below . It shows how you can load/unload the module. I wrote this module sometime back as a test but it gives a good idea of how you can use modules with cocomo components.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:authentication="com.adobe.rtc.authentication.*"
    xmlns:session="com.adobe.rtc.session.*"
    xmlns:pods="com.adobe.rtc.pods.*"
    xmlns:collab="com.adobe.rtc.collaboration.*"
    applicationComplete="init()" width="1000" height="500"
    >
  
    <mx:Script>
        <![CDATA[
            import com.adobe.rtc.events.AuthenticationEvent;
            import com.adobe.rtc.events.ConnectSessionEvent;
            import com.adobe.rtc.events.SessionEvent ;
            import mx.events.ModuleEvent;
            import mx.modules.ModuleManager;
      
             private function errorHandler(e:ModuleEvent):void {
                    mx.controls.Alert.show("There was an error loading the module." +
                        " Please contact the Help Desk.");
                        trace(e.errorText);
                }

            public function createModule():void {
                if (chatModuleLoader.url == ti1.text) {
                // If they are the same, call loadModule. 
                    chatModuleLoader.loadModule();
                } else {
                // If they are not the same, then change the url,
                // which triggers a call to the loadModule() method.
                chatModuleLoader.url = "http://localhost/CocomoModule.swf";
                }
            }
      
               public function removeModule():void {
                chatModuleLoader.unloadModule();
            }
        ]]>
    </mx:Script>

     
                  
                <mx:Panel title="Module Example"
                    height="90%"
                    width="90%"
                    paddingTop="10"
                    paddingLeft="10"
                    paddingRight="10"
                    paddingBottom="10"
                >
                    <mx:HBox>
                        <mx:Label text="URL:"/>
                        <mx:TextInput width="200" id="ti1" text="http://localhost/ChatModule.swf"/>
                        <mx:Button label="Load" click="createModule()"/>
                        <mx:Button label="Unload" click="removeModule()"/>
                    </mx:HBox>
                    <mx:ModuleLoader id="chatModuleLoader" error="errorHandler(event)"/>
                </mx:Panel>
</mx:Application>

Hope this helps.

Thanks

Hironmay Basu

View solution in original post

6 Replies

Avatar

Employee

Hi Andy,

Yes it can be modularized. You can load pods on a need basis. Instead of using connectsessionContainer use connectSession.

For ex..

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:authentication="com.adobe.rtc.authentication.*" xmlns:session="com.adobe.rtc.session.*" xmlns:pods="com.adobe.rtc.pods.*" xmlns:collabs="com.adobe.rtc.collaboration.*">
<mx:Script>
    <![CDATA[
        import com.adobe.rtc.pods.SharedWhiteBoard;
        import com.adobe.rtc.events.SessionEvent;
        protected function init():void
        {
            sess.login();
            sess.addEventListener(SessionEvent.SYNCHRONIZATION_CHANGE, onLogin);
        }
       
        protected function onLogin(p_evt:SessionEvent):void
        {
            var sharedWBoard:SharedWhiteBoard = new SharedWhiteBoard();
            sharedWBoard.connectSession = sess;
            holdCanvas.addChild(sharedWBoard);
            sharedWBoard.subscribe();
            sharedWBoard.percentHeight = 100;
            sharedWBoard.percentWidth = 100;
        }
    ]]>
</mx:Script>
    <authentication:AdobeHSAuthenticator id="auth" userName="uname@domain.com" password="passwd"/>
    <session:ConnectSession id="sess" authenticator="{auth}" roomURL="http://connectnow.acrobat.com/uname/roomName"/>
        <mx:Button id="createPod" label="create Pod" click="init()" />
        <mx:Canvas width="100%" height="100%" id="holdCanvas" />
</mx:Application>

Avatar

Correct answer by
Former Community Member

Hi Andy,

Like other Flex application , you can build modules for AFCS pods and then you can use them to load as an when required.

Here is one example of a simple chat module I wrote some time back using AFCS

This file below is  ChatModule.mxml , it makes a chat module.

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
     layout="absolute" width="400" height="300"
     xmlns:temp="*" xmlns:pods="com.adobe.rtc.pods.*">
    <mx:Script>
        <![CDATA[
       
       
        ]]>
    </mx:Script>
    <pods:SimpleChat width="100%" height="100%" />
</mx:Module>


Now a main example of an app that uses the module above is given below . It shows how you can load/unload the module. I wrote this module sometime back as a test but it gives a good idea of how you can use modules with cocomo components.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:authentication="com.adobe.rtc.authentication.*"
    xmlns:session="com.adobe.rtc.session.*"
    xmlns:pods="com.adobe.rtc.pods.*"
    xmlns:collab="com.adobe.rtc.collaboration.*"
    applicationComplete="init()" width="1000" height="500"
    >
  
    <mx:Script>
        <![CDATA[
            import com.adobe.rtc.events.AuthenticationEvent;
            import com.adobe.rtc.events.ConnectSessionEvent;
            import com.adobe.rtc.events.SessionEvent ;
            import mx.events.ModuleEvent;
            import mx.modules.ModuleManager;
      
             private function errorHandler(e:ModuleEvent):void {
                    mx.controls.Alert.show("There was an error loading the module." +
                        " Please contact the Help Desk.");
                        trace(e.errorText);
                }

            public function createModule():void {
                if (chatModuleLoader.url == ti1.text) {
                // If they are the same, call loadModule. 
                    chatModuleLoader.loadModule();
                } else {
                // If they are not the same, then change the url,
                // which triggers a call to the loadModule() method.
                chatModuleLoader.url = "http://localhost/CocomoModule.swf";
                }
            }
      
               public function removeModule():void {
                chatModuleLoader.unloadModule();
            }
        ]]>
    </mx:Script>

     
                  
                <mx:Panel title="Module Example"
                    height="90%"
                    width="90%"
                    paddingTop="10"
                    paddingLeft="10"
                    paddingRight="10"
                    paddingBottom="10"
                >
                    <mx:HBox>
                        <mx:Label text="URL:"/>
                        <mx:TextInput width="200" id="ti1" text="http://localhost/ChatModule.swf"/>
                        <mx:Button label="Load" click="createModule()"/>
                        <mx:Button label="Unload" click="removeModule()"/>
                    </mx:HBox>
                    <mx:ModuleLoader id="chatModuleLoader" error="errorHandler(event)"/>
                </mx:Panel>
</mx:Application>

Hope this helps.

Thanks

Hironmay Basu

Avatar

Level 2

Thanks guys,

That is was I needed to know - it will work.

I see these colloboration pods/components being great supplementry interactions for elearning applications.

Thankyou.

Avatar

Level 3

If you are still interested, I will be posting an AFCS app built on PureMVC sometime soon. Just need to find the time to tidy it up. It works quite well once you understand what should go where

Cheer

Stefan

Avatar

Level 2

Stefan,

That would be very very helpful.

I started with puremvc only last year and it has really helped me tidy up my approach to application design. Although it did take me a long time to get my head around everything.... particularly pipes. Very clever stuff.

No pressure for the post! I am currently finishing of my teaching term and then I will get more free time to dabble with AFCS.

Please tell me when you do post anything.

Avatar

Level 2

why do you guys keep sending me these things?

The following has evaluated to null or missing: ==> liqladmin("SELECT id, value FROM metrics WHERE id = 'net_accepted_solutions' and user.id = '${acceptedAnswer.author.id}'").data.items [in template "analytics-container" at line 83, column 41] ---- Tip: It's the step after the last dot that caused this error, not those before it. ---- Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign answerAuthorNetSolutions = li... [in template "analytics-container" at line 83, column 5] ----