Adobe LiveCycle (Archived)

SreejaVirtus · 11/10/10

hi,

I need to have an appliaction like this http://blogs.adobe.com/arunpon/swfs/WBTriangle.swf

I had used sampleApps -WhiteBoardCustomShapes-class files into my application.But i dont know how its possible to have a whiteboard toolbar with image icon as in the link above.My sample code is as follows.

     <fx:Declarations>
        <rtc:AdobeHSAuthenticator id="auth" />
        <rtc:RoomSettings id="settings" autoPromote="true"/>

    </fx:Declarations>

<mx:Canvas id="cv_home" width="1324" height="739" y="10" x="0" >
        <mx:TextInput visible="false" id="roomURL" width="295" tabIndex="1">
            <mx:text>https://collaboration.adobelivecycle.com/flexapp/myfirstroom</mx:text>
        </mx:TextInput>
        <mx:Text id="notificationMessage" text=""/>
        <mx:ProgressBar leading="10" x="318" y="138" minimum="0" maximum="100" id="pb"/>

        <rtc:ConnectSessionContainer id="sess"
                                     authenticator="{auth}"
                                     initialRoomSettings="{settings}" autoLogin="false" width="1314" height="714" y="15" x="0">

            <myPackages:SuperPanel backgroundColor="#000000" backgroundAlpha="0.2" alpha="1.0" id="sp_wb" title="White Board" width="732"                      height="414" x="0" y="50"   showControls="true" enableResize="true" layout="absolute" >
                <mx:Canvas disabledOverlayAlpha="0" enabled="true">
                </mx:Canvas>
                <rtc:SharedWhiteBoard    addedToStage="{myPackages.WBTriangleShape}" backgroundColor="#fdf9f9" id="wb" width="100%" height="100%"                     y="1" x="1" creationComplete="wb.shapesToolBar.move(0,0)"/>

                <myPackages:WBFileImageShapeToolBar x="161" y="42" height="146" width="214"/>

            </myPackages:SuperPanel>
            <rtc:AudioPublisher left="779" right="223" id="audioPub" y="147" height="128"/>
            <rtc:AudioSubscriber x="-54" y="188"/>

            <s:Label x="758" y="29" text="Connected to the Room" color="#3D3B3B" fontSize="10" fontFamily="Verdana" fontWeight="bold"                textDecoration="none" height="20" fontStyle="italic"/>
            <s:Label x="896" y="29" id="lbl_classroom" text="   {index.roomName} " color="#0E629C" fontSize="10" fontFamily="Verdana" fontWeight="bold"                height="22" fontStyle="italic"/>

            
            <myPackages:SuperPanel id="sp_chat" title="Chat" x="743" y="329" showControls="true" enableResize="true" width="318" height="185"                layout="absolute">
                <rtc:SimpleChat newMessageColor="0x000000" x="10" y="0" width="100%" height="100%"/>
            </myPackages:SuperPanel>

            <myPackages:SuperPanel title="FileShare" id="sp_fileshare" x="745" y="524" showControls="true" enableResize="true" width="316" height="197"                layout="absolute">
                <rtc:FileShare id="fs" width="100%" height="100%" x="6" y="0"/>
            </myPackages:SuperPanel>
            <myPackages:SuperPanel id="sp_roster" title="Participants" height="157" x="486" y="472" width="235" showControls="true" enableResize="true"                layout="absolute">
                <rtc:Roster   dataProvider="{sess.userManager.userCollection}" labelField="displayName" fontSize="11" width="100%" height="100%" y="4"                x="6"/>
            </myPackages:SuperPanel>
            <myPackages:SuperPanel id="sp_webcam" title="WebCam" x="740" y="50" showControls="true" enableResize="true" width="321" height="267"                layout="absolute" >
                <rtc:WebCamera width="100%" height="100%" x="2" y="24"/>
                <mx:Button label="Start My Audio"
                            toggle="true" id="audioButt" color="#3A3838"
                            click="audio_click(event)" y="0" height="18" fontWeight="normal" width="149" x="0" fontSize="10"/>
            </myPackages:SuperPanel>
            <myPackages:SuperPanel id="sp_sharedNotes" title="Shared Notes" x="124" y="472" showControls="true" enableResize="true" width="354"                height="209" layout="absolute" >
                <rtc:Note id="simpleNote" width="100%" height="100%" x="0" y="-2" />
            </myPackages:SuperPanel>
            <myPackages:WBTriangleShape x="70" y="472" width="50" height="50" />

        </rtc:ConnectSessionContainer>

    </mx:Canvas>

and the class file WBFileImageShapeToolBar is as follows:

package myPackages
{
    import com.adobe.coreUI.controls.whiteboardClasses.IWBPropertiesToolBar;
    import com.adobe.coreUI.events.WBCanvasEvent;
    import com.adobe.rtc.collaboration.FilePublisher;
    import com.adobe.rtc.events.FileManagerEvent;
    import com.adobe.rtc.messaging.NodeConfiguration;
    import com.adobe.rtc.messaging.UserRoles;
    import com.adobe.rtc.session.ConnectSession;
    import com.adobe.rtc.sharedManagers.FileManager;
    import com.adobe.rtc.sharedManagers.UserManager;
    import com.adobe.rtc.sharedManagers.descriptors.FileDescriptor;

    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.net.FileFilter;

    import mx.containers.HBox;
    import mx.controls.Button;
    import mx.controls.ComboBox;
    import mx.core.UIComponent;
    import mx.managers.PopUpManager;
    import mx.utils.UIDUtil;

    /**
     * @private
     * The Idea is to use FileManager to save images and use the file or image URL's to display the image shape.
     * Sometimes the URL might be bad the image might be broken or the image is broken if the internet connection is slow
     * Note:
     * Known Issues: When a image Shape is selected, the image toolBar is displayed, and choosing an image from the toolBar would not set the
     * new shape to be drawn.
     */
    public class WBFileImageShapeToolBar extends UIComponent implements IWBPropertiesToolBar
    {
        protected var _imageComboBox:ComboBox;
        protected var _imageFileURL:String;
        protected var _imageName:String;
        protected var _hBoxHolder:HBox;

        protected var _connectSession:ConnectSession;
        protected var _filePublisher:FilePublisher;
        protected var _fileManager:FileManager;
        protected var _userManager:UserManager;
        public static const groupid:String = "toolBarImages";
        protected var _thumbNailDialog:ThumbNailDialog;
        import myPackages.ThumbNailDialog;
        //Initialize the FileManager and initialize a thumb nail dialog to display the images.
        public function WBFileImageShapeToolBar()
        {
            super();
            _connectSession = ConnectSession.primarySession as ConnectSession;
            _filePublisher = new FilePublisher();
            _filePublisher.initialize();
            _filePublisher.addEventListener(FileManagerEvent.FILE_ALERT,onFileAlert);
            _fileManager = ConnectSession.primarySession.fileManager;
            _fileManager.addEventListener(FileManagerEvent.UPDATED_FILE_DESCRIPTOR,onNewImageAdded);
            //_userManager = ConnectSession.primarySession.userManager;

            _thumbNailDialog = new ThumbNailDialog(_fileManager,this);

        /*    if(!_fileManager.isGroupDefined(groupid) && _fileManager.getUserRole(_userManager.myUserID) == UserRoles.PUBLISHER) {
                var nodeConfig:NodeConfiguration = new NodeConfiguration();
                nodeConfig.sessionDependentItems = false;
                _filePublisher.createAndUseGroup(groupid, nodeConfig);
            }else {
                _filePublisher.groupName = groupid;
            }        */
        }

        // set the imageURL to the latest file uploaded. imageURL would be the propertydata and definiondata for the imageshape
        protected function onNewImageAdded(p_evt:FileManagerEvent):void
        {
            var fileDescriptor:FileDescriptor = p_evt.fileDescriptor;
            if (fileDescriptor.groupName == groupid && fileDescriptor.uploadProgress == 100) {
                _imageFileURL = fileDescriptor.downloadUrl;
                _imageName = fileDescriptor.name;
            }
        }

        // set the imageURL to the latest file uploaded. imageURL would be the propertydata and definiondata for the imageshape
        public function set imageFileURL(p_URL:String):void
        {
            _imageFileURL = p_URL;
        }

        public function set imageName(p_imageName:String):void
        {
            _imageName = p_imageName;
        }

        protected function onFileAlert(p_evt:FileManagerEvent):void
        {
            trace(p_evt.alertMessage);
        }

        //Return the property data ie imageURL of the image selected in the ThumbNailDialog
        public function get propertyData():*
        {
            var returnObj:Object = new Object();
            returnObj.imageName = _imageName;
            return returnObj;
        }
        public function set propertyData(p_data:*):void
        {
            _imageName = p_data.imageName;
        }
        public function set isFilledShape(p_filled:Boolean):void
        {
            //do nothing for now...
        }

        // Add the buttons and their eventlisteners needed for the property toolBar. There is room for more controls
        override protected function createChildren():void
        {
            //<mx:HBox id="shapeController" alpha="1.0" backgroundColor="#000000" backgroundAlpha="0.5" left="5" right="5" bottom="10" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5" verticalAlign="middle">
            var maxHeight:Number = 0;
            _hBoxHolder = new HBox();
            addChild(_hBoxHolder);
            _hBoxHolder.alpha = 1.0;
            _hBoxHolder.setStyle("backgroundColor","#000000");
            _hBoxHolder.setStyle("backgroundAlpha",0.5);
            _hBoxHolder.percentHeight = 100;
            _hBoxHolder.percentWidth = 100;

            var addButton:Button = new Button();
            addButton.label = "Add Image";
            addButton.addEventListener(MouseEvent.CLICK,uploadImage);
            addButton.width = 120;
            addButton.height = 25;
            _hBoxHolder.height = Math.max(addButton.height,maxHeight);
            maxHeight = _hBoxHolder.height;
            _hBoxHolder.width += addButton.width;
            _hBoxHolder.addChild(addButton);

            var removeButton:Button = new Button();
            removeButton.label = "Choose..";
            removeButton.addEventListener(MouseEvent.CLICK,removeImage);
            removeButton.width = 90;
            removeButton.height = 25;
            _hBoxHolder.height = Math.max(removeButton.height,maxHeight);
            maxHeight = _hBoxHolder.height;
            _hBoxHolder.width += removeButton.width;
            _hBoxHolder.addChild(removeButton);

            //Add edges & Border & padding at the end
            _hBoxHolder.width += 20;
            _hBoxHolder.height += 10;
            _hBoxHolder.setStyle("paddingTop",5);
            _hBoxHolder.setStyle("paddingRight",5);
            _hBoxHolder.setStyle("paddingBottom",5);
            _hBoxHolder.setStyle("paddingLeft",5);
        }

        public function upload():void
        {
            uploadImage();
        }

        //Upload Image using the FilePublisher
        protected function uploadImage(p_evt:Event=null):void
        {
            var filterArray:Array=[new FileFilter("Images", "*.jpg;*.gif;*.png;*.jpeg")];
            _filePublisher.browse(UIDUtil.createUID(), filterArray);
            if (_thumbNailDialog.isPopUp) {
                PopUpManager.removePopUp(_thumbNailDialog);
            }
        }

        protected function removeImage(p_evt:Event):void
        {
            PopUpManager.addPopUp(_thumbNailDialog,parent);
            PopUpManager.centerPopUp(_thumbNailDialog);
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
    }
}

what change i have to do for getting an application like in the above link.

Expecting your immediate reply.

Thanks and Regards,

Sreeja.T

Report · 11/10/10

Hi Sreeja,

I guess you are missing the sole point of our help. We can help you with some issue in our framework or can give a generic idea, but it's absolutely NOT WELCOME to expect us to debug thru your 100s of lines of code. You have to figure these things by yourself but if it’s a framework issue that’s troubling you, we are always available for help.

Hope this sets the expectations correctly

Thanks

Hironmay Basu

SreejaVirtus · 11/11/10

yes hironmay,

i understood my mistake.I will try find the solution.

Thanks,

sreeja.T

aponnusa · 11/11/10

Hi Sreeja,

In my opinion you are complicating your own code. Refer to WBTriangle.mxml on how to add custom images to your whiteboard. Copy that piece of code into your app's mxml file. Understanding this file would help you integrating the custom shapes sample app into you app.

Drag the files [ThumbnailDialog.as, WBFileImageShape.as, WBFileImageShapeToolBar] into your project. And you must be set.

Code you might need to add to your main mxml file

[Embed (source = '../assets/WBFileImage.png')]
public static var ICON_IMAGE:Class;

// Add it onCreationcomplete of your WhiteBoard or under synchronization change of your app

sharedWB.addEventListener(CollectionNodeEvent.SYNCHRONIZATION_CHANGE, onToolBarAdd);

//And this is all that is required to add images to ur WhiteBoard

//once you have dragged the classes you have mentioned

protected function onToolBarAdd(p_evt:Event):void
{

//Adding Images to the WhiteBoard
//Modify WBFileImageShape or WBFileImageShapeToolBar for your custom Needs
var imageShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.TOOL);
imageShape.toolTip ="Image";
imageShape.shapeFactory = new WBCustomShapeFactory(WBFileImageShape, WBSimpleShapeFactory.CURSOR_RECTANGLE, new WBFileImageShapeToolBar());
imageShape.icon = ICON_IMAGE;
toolBar.addCustomShapeToToolBar(imageShape);

}

SreejaVirtus · 11/11/10

Thank you sooo much aponnusa.It will really help me in my project.I will

defenitly try it and inform u the result.

Thanks,

Sreeja

SreejaVirtus · 11/11/10

Its working fine.Thanks again.

Adobe LiveCycle (Archived)

Whiteboard with image

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe