Avatar

Level 10

Buongiorno,

(I have no idea how this arrived in my Inbox in english!)

I don't think design mode would really help you here anyhow. What are you trying to customize?

  One easy option is to build your own UI that sits on top of SimpleChatModel. Here's a quick example. You could build your own component that uses SimpleChatModel to show whatever you'd like for the UI - we encourage it, since we know our default UI isn't that exciting.

Nota bene : This example is at least 10 times easier in MX, since for whatever reason, the Spark folks decided displaying HTMLText in a textArea was too useful, and removed that functionality.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:session="com.adobe.rtc.session.*" xmlns:authentication="com.adobe.rtc.authentication.*">
     <fx:Script>
          <![CDATA[
               import com.adobe.rtc.sharedModel.descriptors.ChatMessageDescriptor;
              
               import spark.utils.TextFlowUtil;
          ]]>
     </fx:Script>
     <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     <fx:Script>
          <![CDATA[
               import com.adobe.rtc.events.ChatEvent;
               import com.adobe.rtc.sharedModel.SimpleChatModel;
               [Bindable]
               protected var m_chatModel:SimpleChatModel = new SimpleChatModel();
              
               protected function init():void
               {
                    m_chatModel.sharedID = "myChat";
                    m_chatModel.subscribe();
                    m_chatModel.addEventListener(ChatEvent.HISTORY_CHANGE, onHistoryChange);
               }
              
               protected function onHistoryChange(p_evt:ChatEvent):void
               {
                    chatOutput.text += p_evt.message.displayName + ": " + p_evt.message.msg + "\n";
               }
              
               protected function sendMessage():void
               {
                    var chatMsg:ChatMessageDescriptor = new ChatMessageDescriptor();
                    chatMsg.msg = chatInput.text;
                    m_chatModel.sendMessage(chatMsg);
                    chatInput.text = "";
               }
          ]]>
     </fx:Script>


     <session:ConnectSessionContainer roomURL="https://collaboration.adobelivecycle.com/<account>/<room>" synchronizationChange="init()" width="100%" height="100%">
          <session:authenticator>
               <authentication:AdobeHSAuthenticator userName="<username>" password="<pass>"/>
          </session:authenticator>
          <s:TextArea id="chatOutput" width="300" height="400" editable="false"/>
          <s:TextInput id="chatInput" width="300" y="425" enter="sendMessage()"/>
     </session:ConnectSessionContainer>
    
</s:Application>

Grazie,

  nigel