Flex Examples » mouseEnabled http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Preventing the user from clicking the track on a Spark HSlider control in Flex 4 http://blog.flexexamples.com/2010/03/31/preventing-the-user-from-clicking-the-track-on-a-spark-hslider-control-in-flex-4/ http://blog.flexexamples.com/2010/03/31/preventing-the-user-from-clicking-the-track-on-a-spark-hslider-control-in-flex-4/#comments Wed, 31 Mar 2010 22:46:34 +0000 Peter deHaan http://blog.flexexamples.com/?p=2665 The following example shows how you can toggle whether a user is allowed to click on a Spark HSlider control’s track in Flex 4 by setting the Boolean mouseEnabled property on the HSlider controls track skin part.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/31/preventing-the-user-from-clicking-the-track-on-a-spark-hslider-control-in-flex-4/ --> <s:Application name="Spark_HSlider_track_mouseEnabled_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <mx:Form> <mx:FormItem label="track.mouseEnabled:"> <s:CheckBox id="chckBx" [...]]]> The following example shows how you can toggle whether a user is allowed to click on a Spark HSlider control’s track in Flex 4 by setting the Boolean mouseEnabled property on the HSlider controls track skin part.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/31/preventing-the-user-from-clicking-the-track-on-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_track_mouseEnabled_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="track.mouseEnabled:">
                <s:CheckBox id="chckBx" selected="true" change="chckBx_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function chckBx_changeHandler(evt:Event):void {
                sl.track.mouseEnabled = chckBx.selected;
            }
        ]]>
    </fx:Script>
 
    <s:HSlider id="sl"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/03/31/preventing-the-user-from-clicking-the-track-on-a-spark-hslider-control-in-flex-4/feed/ 1 Disabling the mouse on the Spark VideoPlayer control scrub bar in Flex 4 http://blog.flexexamples.com/2009/12/08/disabling-the-mouse-on-the-spark-videoplayer-control-scrub-bar-in-flex-4/ http://blog.flexexamples.com/2009/12/08/disabling-the-mouse-on-the-spark-videoplayer-control-scrub-bar-in-flex-4/#comments Tue, 08 Dec 2009 15:03:01 +0000 Peter deHaan http://blog.flexexamples.com/?p=2238 The following example shows how you can disable the mouse on the Spark VideoPlayer control scrub bar in Flex 4 by setting the Boolean mouseEnabled and mouseChildren properties.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/12/08/disabling-the-mouse-on-the-spark-videoplayer-control-scrub-bar-in-flex-4/ --> <s:Application name="Spark_VideoPlayer_scrubBar_mouseEnabled_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <s:CheckBox id="chBx" label="mouseEnabled/mouseChildren" selected="true" change="chBx_changeHandler(event);" /> </s:controlBarContent>   <fx:Script> [...]]]> The following example shows how you can disable the mouse on the Spark VideoPlayer control scrub bar in Flex 4 by setting the Boolean mouseEnabled and mouseChildren properties.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/12/08/disabling-the-mouse-on-the-spark-videoplayer-control-scrub-bar-in-flex-4/ -->
<s:Application name="Spark_VideoPlayer_scrubBar_mouseEnabled_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:CheckBox id="chBx"
                label="mouseEnabled/mouseChildren"
                selected="true"
                change="chBx_changeHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function chBx_changeHandler(evt:Event):void {
                vdPlyr.scrubBar.mouseEnabled = chBx.selected;
                vdPlyr.scrubBar.mouseChildren = chBx.selected;
            }
        ]]>
    </fx:Script>
 
    <s:VideoPlayer id="vdPlyr"
            source="http://helpexamples.com/flash/video/caption_video.flv"
            muted="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/12/08/disabling-the-mouse-on-the-spark-videoplayer-control-scrub-bar-in-flex-4/feed/ 0 Preventing users from clicking on an Accordion container’s header in Flex http://blog.flexexamples.com/2008/05/30/preventing-users-from-clicking-on-an-accordion-containers-header-in-flex/ http://blog.flexexamples.com/2008/05/30/preventing-users-from-clicking-on-an-accordion-containers-header-in-flex/#comments Sat, 31 May 2008 06:19:48 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/30/preventing-users-from-clicking-on-an-accordion-containers-header-in-flex/ The following examples show how you can prevent a user from clicking a Flex Accordion container’s header by creating a custom Accordion header renderer.

Full code after the jump.

The following example uses a custom header renderer (MyAccHeader) which sets the header’s mouseEnabled property to false, preventing the user from changing the currently selected [...]]]> The following examples show how you can prevent a user from clicking a Flex Accordion container’s header by creating a custom Accordion header renderer.

Full code after the jump.

The following example uses a custom header renderer (MyAccHeader) which sets the header’s mouseEnabled property to false, preventing the user from changing the currently selected accordion child by clicking on the header. Instead, users are forced to change the active child by clicking the next and previous buttons.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/30/preventing-users-from-clicking-on-an-accordion-containers-header-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function prevChild():void {
                accordion.selectedIndex--;
            }

            private function nextChild():void {
                accordion.selectedIndex++;
            }
        ]]>
    </mx:Script>

    <mx:Accordion id="accordion"
            headerRenderer="comps.MyAccHeader"
            width="100%" height="100%">
        <mx:VBox id="v1" label="One" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="One" />
            </mx:VBox>
            <mx:ControlBar horizontalAlign="right" width="100%">
                <mx:Spacer width="100%" />
                <mx:Button label="next" click="nextChild();" />
            </mx:ControlBar>
        </mx:VBox>
        <mx:VBox id="v2" label="Two" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="Two" />
            </mx:VBox>
            <mx:ControlBar width="100%">
                <mx:Button label="prev" click="prevChild();" />
                <mx:Spacer width="100%" />
                <mx:Button label="next" click="nextChild();" />
            </mx:ControlBar>
        </mx:VBox>
        <mx:VBox id="v3" label="Three" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="Three" />
            </mx:VBox>
            <mx:ControlBar width="100%">
                <mx:Button label="prev" click="prevChild();" />
                <mx:Spacer width="100%" />
                <mx:Button label="next" click="nextChild();" />
            </mx:ControlBar>
        </mx:VBox>
        <mx:VBox id="v4" label="Four" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="Four" />
            </mx:VBox>
            <mx:ControlBar width="100%">
                <mx:Button label="prev" click="prevChild();" />
                <mx:Spacer width="100%" />
                <mx:Button label="next" click="nextChild();" />
            </mx:ControlBar>
        </mx:VBox>
        <mx:VBox id="v5" label="Five" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="Five" />
            </mx:VBox>
            <mx:ControlBar width="100%">
                <mx:Button label="prev" click="prevChild();" />
                <mx:Spacer width="100%" />
            </mx:ControlBar>
        </mx:VBox>
    </mx:Accordion>

</mx:Application>

comps/MyAccHeader.as

/**
 * http://blog.flexexamples.com/2008/05/30/preventing-users-from-clicking-on-an-accordion-containers-header-in-flex/
 */
package comps {
    import mx.containers.accordionClasses.AccordionHeader;

    public class MyAccHeader extends AccordionHeader {
        public function MyAccHeader() {
            super();
            mouseEnabled = false;
        }
    }
}

View source is enabled in the following example.

The following example uses a custom header renderer (MyAccHeader) which sets the header’s enabled property to the value of the container’s enabled property, allowing you to selectively disable accordion headers.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/30/preventing-users-from-clicking-on-an-accordion-containers-header-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function prevChild():void {
                accordion.selectedIndex--;
            }

            private function nextChild():void {
                accordion.selectedIndex++;
            }
        ]]>
    </mx:Script>

    <mx:Accordion id="accordion"
            headerRenderer="comps.MyAccHeader"
            width="100%"
            height="100%">
        <mx:VBox id="v1"
                label="One"
                width="100%"
                height="100%">
            <mx:Label text="One" />
        </mx:VBox>
        <mx:VBox id="v2"
                label="Two"
                width="100%"
                height="100%">
            <mx:Label text="Two" />
        </mx:VBox>
        <mx:VBox id="v3"
                label="Three"
                enabled="false"
                width="100%"
                height="100%">
            <mx:Label text="Three" />
        </mx:VBox>
        <mx:VBox id="v4"
                label="Four"
                enabled="false"
                width="100%"
                height="100%">
            <mx:Label text="Four" />
        </mx:VBox>
        <mx:VBox id="v5"
                label="Five"
                width="100%"
                height="100%">
               <mx:Label text="Five" />
        </mx:VBox>
    </mx:Accordion>

</mx:Application>

comps/MyAccHeader.as

/**
 * http://blog.flexexamples.com/2008/05/30/preventing-users-from-clicking-on-an-accordion-containers-header-in-flex/
 */
package comps {
    import mx.containers.accordionClasses.AccordionHeader;
    import mx.events.FlexEvent;

    public class MyAccHeader extends AccordionHeader {
        public function MyAccHeader() {
            super();
            addEventListener(FlexEvent.INITIALIZE, accordionHeader_initialize);
        }

        private function accordionHeader_initialize(evt:FlexEvent):void {
            enabled = data.enabled;
        }
    }
}

View source is enabled in the following example.

You can also use ActionScript to toggle an accordion header’s enabled property using the following snippet:

accordion.getHeaderAt(0).enabled = false;
 
]]> http://blog.flexexamples.com/2008/05/30/preventing-users-from-clicking-on-an-accordion-containers-header-in-flex/feed/ 5