Ext.ux.FlashControl - Mediator for Flash Movies

[ThorstenSuckow]

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.

[mystix]

impressive

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

[ThorstenSuckow]

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.

[ThorstenSuckow]

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

[Ronaldo]

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

[Ronaldo]

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)

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

[ThorstenSuckow]

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:

        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:

        /**
         * 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);
        },

[Ronaldo]

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

[Ronaldo]

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

[ThorstenSuckow]

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.