1. #1
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default Ext.ux.FlashControl - Mediator for Flash Movies

    Ext.ux.FlashControl - Mediator for Flash Movies


    Project Home: http://code.google.com/p/ext-ux-flashcontrol/
    Live example: http://www.siteartwork.de/flashcontrol/examples/

    Tired of (what seems to be) randomly restarting/crashing Flash Movies in your Ext-driven web application?
    Take a look at Ext.ux.FlashControl - a control that mediates between Ext.Container and Ext.FlashComponent.

    When using this control, the registered FlashComponent gets rendered on top of the document.body and adjusts its state (height, width, position, zIndex, visibility) based on the configuration passed and the state of the registered container it would usually have been added to.

    Ext.ux.FlashControl is a mediator for flash movies in Ext JS driven applications - it delegates state informations from the Ext.Container the flash movie would have been usually added to and takes care of properly rendering the flash movie into the UI, preventing flaws like reload/restart/loss of the flash movie during DOM operations.
    Here's a live example:
    http://www.siteartwork.de/flashcontrol/examples/

    Ext.ux.FlashControl is another component that grew out of a sub-project from conjoon.

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Thumbs up


    impressive

    how does this compare with @hendricd's ux.FlashPanel?
    or does this play a different role / serve a different purpose?

  3. #3
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Quote Originally Posted by mystix View Post
    how does this compare with @hendricd's ux.FlashPanel?
    good question, it's been some time since I last looked at Doug's solution.

    I guess FlashPanel automates a lot for you regarding component management, while FlashControl follows the approach of loose coupling - more or less the complete process of adjusting the FlashComponent's state is done using listeners, and due to this you are able to switch the Flash's parent during runtime - while the parent is not directly a parent in the DOM tree, but more a parent that gets observed by the mediator.

  4. #4
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default Ext.ux.FlashControl V0.1.1 available

    Ext.ux.FlashControl V0.1.1 available


    Ext.ux.FlashControl 0.1.1 has been commited to the trunk and introduces "autoAddListeners" which automates the process of adding some standard listeners for events that hide/show the FlashComponent. For a complete list of changes, see http://code.google.com/p/ext-ux-flas...rce/detail?r=5

  5. #5
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    291
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default


    Impressive!

    I didn't dive in the code yet, but is it possible to pass parameters to the swf, like you can in swfobject?

    Ronaldo
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mailinfo@twensoc.nl

  6. #6
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    291
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default Bug when used in a region (not in a window)

    Bug when used in a region (not in a window)


    Hi,

    I tried to use your FlashControl in an east region of a tabpanel in a form, in a tab in a viewport... A little complex but there's no window, which may cause trouble in the detectWindows method... (lastwindow == null)...

    So I changed (see bold)
    Code:
    if (Ext.isGecko && this.quirksFF && this.lastWindow && (this.lastWindow.maximizable) && this.lastWindow.container.dom == document.body) {
    And that worked. I'm not sure what is missing but in FF3.5.1 I can see a movie!

    There are some problems when switching to another tab, or closing the main tab. The FlashControl remains and overlaps other portions of the screen.
    I guess you expect the FlashControl to be always in a window, and thus it doesn't listen to close/hide events from other components .

    Anyway, any chances of being able to set parameters to the movieclip as in jsObject?

    Best regards,
    Ronaldo
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mailinfo@twensoc.nl

  7. #7
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Quote Originally Posted by Ronaldo View Post
    Hi,

    I tried to use your FlashControl in an east region of a tabpanel in a form, in a tab in a viewport... A little complex but there's no window, which may cause trouble in the detectWindows method... (lastwindow == null)...

    Ronaldo
    Hi Ronaldo,


    no, the quirksFF just has to be activated as soon as you want to use the flash movie within an Ext.Window, otherwise it is not needed. Try to use it without setting quirksFF=true.

    Setup in conjoon is as follows: Viewport - > East Region -> AccordionLayout->TabPanel->Tab. The tab can be dragged, as can the TabPanel.
    The TabPanel can be dragged between the east and the west panel of the workbench. The Tab itself can be dragged to the center TabPanel of the workbench itself and invokes creating a new Tab in the center panel of the workbench. Closing the TabPanel renders the FlashContainer back into teh original TabPanel sitting either in the west or in the east region of the workbench.

    I know my use case might differ from yours but maybe my setup of FlashControl can give you a hint:

    Code:
            return new Ext.ux.util.FlashControl({
                flashComponent    : player,
                container         : basePanel,
                getListenerConfig : function() {
    
                    var featurePanel = com.conjoon.groupware.service.youtube.ViewBaton.getFeaturePanel();
                    var quickPanel   = com.conjoon.groupware.QuickEditPanel.getComponent();
    
                    var westPanel = com.conjoon.util.Registry.get(
                        'com.conjoon.groupware.Workbench'
                    ).getWestPanel();
                    var eastPanel = com.conjoon.util.Registry.get(
                        'com.conjoon.groupware.Workbench'
                    ).getEastPanel();
    
                    var itemsWest = westPanel.items.items;
                    var itemsEast = eastPanel.items.items;
    
                    return {
                        activate : {
                            items  : [this.container, featurePanel],
                            fn     : function(){
                                var ct = this.container.ownerCt;
                                while(ct) {
                                    if (ct.hidden === true) {
                                        this.hideFlashComponent();
                                        return;
                                    }
                                    ct = ct.ownerCt;
                                }
                                this.showFlashComponent();
                            },
                            scope  : this,
                            strict : true
                        },
                        deactivate : {
                            items  : [this.container, featurePanel],
                            fn     : this.flashComponent.hide,
                            scope  : this.flashComponent,
                            strict : true
                        },
                        drop : {
                            items  : [eastPanel, westPanel],
                            fn     : 'refreshListeners',
                            strict : false
                        },
                        show : {
                            items  : [quickPanel, eastPanel, westPanel],
                            fn     : this.flashComponent.show,
                            scope  : this.flashComponent,
                            strict : true
                        },
                        hide : {
                            items  : [quickPanel, eastPanel, westPanel],
                            fn     : this.flashComponent.hide,
                            scope  : this.flashComponent,
                            strict : true
                        },
                        afterlayout : {
                            items  : [eastPanel, westPanel],
                            fn     : 'afterContainerLayout',
                            strict : true
                        },
                        beforeexpand : {
                            items  : itemsEast.concat(itemsWest),
                            fn     : this.flashComponent.hide,
                            scope  : this.flashComponent,
                            strict : [eastPanel, westPanel]
                        },
                        expand : {
                            items  : itemsEast.concat(itemsWest),
                            fn     : this.flashComponent.show,
                            scope  : this.flashComponent,
                            strict : [eastPanel, westPanel]
                        },
                        beforecollapse : {
                            items  : itemsEast.concat(itemsWest),
                            fn     : this.flashComponent.hide,
                            scope  : this.flashComponent,
                            strict : [eastPanel, westPanel]
                        },
                        collapse : {
                            items  : itemsEast.concat(itemsWest),
                            fn     : function(component) {
                                if (component != this.container.ownerCt) {
                                    this.flashComponent.show();
                                }
                            },
                            strict : [eastPanel, westPanel]
                        }
                    };
                }
            });

    Below are the two methods that get called when the FlashContainer (basePanel) should change its position. "featurePanel" is the panel thet gets rendered in the centerPanel of the workbench:

    Code:
            /**
             * Attempts to remove the basePanel from the
             * {com.conjoon.groupware.QuickEditPanel} container and add it to the
             * FeatureTab to the contentPanel. The feature tab will be build if not already
             * available and inserted at the specified position in the contentPanel.
             *
             */
            showInFeaturePanel : function(position)
            {
                if (!featurePanel) {
                    featurePanel = buildFeaturePanel();
                }
    
                var contentPanel = com.conjoon.util.Registry.get(
                    'com.conjoon.groupware.ContentPanel'
                );
    
                if (com.conjoon.groupware.QuickEditPanel.getComponent().findById(basePanel.getId())) {
                    basePanel.ownerCt.remove(basePanel, false);
                    featurePanel.add(basePanel);
                }
    
                flashControl.refreshListeners();
    
                if (!Ext.isNumber(position)) {
                    contentPanel.add(featurePanel);
                } else {
                    contentPanel.insert(position, featurePanel);
                }
                contentPanel.setActiveTab(featurePanel);
            },
    
            /**
             * Attempts to remove the basePanel from the featurePanel
             * container and add it to the QuickEditPanel. This is the listener for the
             * featurePanels 'close' operation. The feature panel will get destroyed, thus
             * we will reset the featurePanel variable to null.
             *
             * @return {com.conjoon.groupware.service.youtube.FeaturePanel}
             */
            showInQuickPanel : function(position)
            {
                var quickPanel = com.conjoon.groupware.QuickEditPanel.getComponent();
    
                if (featurePanel && basePanel.ownerCt == featurePanel) {
                    basePanel.ownerCt.remove(basePanel, false);
                    quickPanel.add(basePanel);
                }
    
                featurePanel = null;
    
                flashControl.refreshListeners();
    
                quickPanel.setActiveTab(basePanel);
            },
    Last edited by ThorstenSuckow; 29 Jul 2009 at 8:24 AM. Reason: I won't even care for "teh" vs "the" anymore!!!1eleven

  8. #8
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    291
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default


    Thanks! I got it now. I needed to grasp the intention of the getConfigListeners() method, the scope it runs in, but after that it works fine now.
    Thanks again!

    Ronaldo
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mailinfo@twensoc.nl

  9. #9
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    291
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default


    Hi,

    Do you know of an easy way to reload the complete swf file? During development, I'm also working on the as3 project, and after having changed the swf, I'd like to be able to reload the FlashComponent/FlashControl so that it reflects the latest changes in the swf.
    I have a 'reload swf' button in my interface which should just do that

    Otherwise, I have to reload the complete tab/interface over and over again...

    So, I'd like to be able to completely destroy the flash in the region, and re-add it, so the new swf is loaded, or somehow force a reload of the swf without closing and opening the surroundig tab/viewport.

    TIA
    Ronaldo
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mailinfo@twensoc.nl

  10. #10
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Quote Originally Posted by Ronaldo View Post
    Do you know of an easy way to reload the complete swf file?
    Not quite sure - did you take a look at the Ext.FlashComponent-API and see if the swfobject supports anything like that?

    Otherwise this might be a question for the help forum, I guess, since it's not related to the FlashControl - it only mediates between container/component.