5 Replies Latest reply on Nov 19, 2008 1:27 PM by mpetev

    How to use costum scroll localy

    mpetev Level 1
      Hello to all. I have question that i was trying to solve for an week but still without effect.

      I want to ask how can i import scroll artwork for one flex application but to use it only in one canvas not in the whole application. I want to have the default scrolls in the application.

      Best regards: Petev
        • 1. How to use costum scroll localy
          Gregory Lafrance Level 6
          Create a CSS class selector, and apply it to the one Canvas with styleName="myClassSelectorName"
          • 3. Re: How to use costum scroll localy
            mpetev Level 1
            Well I tried this.

            I have css style like that

            downArrowSkin: Embed(skinClass="VScrollBar_downArrowSkin");
            thumbIcon: Embed(skinClass="VScrollBar_thumbIcon");
            thumbSkin: Embed(skinClass="VScrollBar_thumbSkin");
            trackSkin: Embed(skinClass="VScrollBar_trackSkin");
            upArrowSkin: Embed(skinClass="VScrollBar_upArrowSkin");

            And I`m applying it to canvash with styleName. For now nothing happens.

            But if i use the same syntax in mx:Application it is working. (But without the dot "." in the beginning of the style).
            • 4. Re: How to use costum scroll localy
              Gregory Lafrance Level 6
              Please show simplified yet "complete" example code.
              • 5. Re: How to use costum scroll localy
                mpetev Level 1
                Ok. First i want to thank you for all this help.

                And here is the example.

                The first is WORKING:

                <?xml version="1.0" encoding="utf-8"?>
                xmlns:mx=" http://www.adobe.com/2006/mxml"
                xmlns:allurent=" http://www.allurent.com/2006/urlkit"
                creationComplete="handleCreationComplete()" borderStyle="solid" borderColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">

                <mx:Style source="embedFonts.css"/>
                <mx:Style source="scroll.css"/>

                public function handleCreationComplete() : void
                model.isChromeBrowser = ExternalInterface.call("getIsChromeBrowser");

                <model:BbaModel id="model" />

                <control:BbaController id="controller" view="{view}" model="{model}" />

                <view:BbaView id="view" model="{model}"
                changeSection="controller.handleChangeSection(event)" backgroundColor="#FFFFFF" width="800" height="404" horizontalCenter="0" verticalCenter="0"/>

                <url:UrlManager id="urlManager" bbaModel="{model}" bbaController="{controller}"/>
                <allurent:FlexBrowserManagerAdapter id="browserAdapter" applicationState="{urlManager.applicationRules}"/>


                The second example is NOT working:

                <?xml version="1.0" encoding="utf-8"?>
                xmlns:mx=" http://www.adobe.com/2006/mxml"

                <mx:Style source="scroll.css"/>

                [Event(name="changeSection", type="flash.events.DataEvent")]

                import bbaSite.view.sections.BaseSection;
                import mx.effects.easing.Cubic;
                import mx.effects.easing.Quartic;
                import mx.core.Application;
                import mx.effects.easing.Quadratic;
                import bbaSite.model.BbaModel;
                import bbaSite.view.sections.BaseSection;

                public var model : BbaModel;

                private var currentSection : BaseSection;
                private var pendingSection : BaseSection;

                private function handleMainMenuItemSelected(event : DataEvent) : void
                dispatchEvent(new DataEvent("changeSection", false, false, event.data));

                <mx:Binding source="this[model.pendingSectionID]" destination="pendingSection" />
                <mx:Binding source="BaseSection(sectionsStack.selectedChild)" destination="currentSection" />

                <mx:Canvas horizontalCenter="0" verticalCenter="0" width="800" height="404" >

                <mx:Image styleName="logo" x="724" y="97" source="@Embed('assets/images/logo.swf')" />

                <mainNavigation:MainNavigation id="mainNavigation" styleName="mainMenu"
                itemSelected="handleMainMenuItemSelected(event)" />

                <mx:Canvas id="Elipse" width="589.5" height="398.2" x="134" y="0" backgroundImage="@Embed('assets/images/elipse.swf')" />

                <mx:ViewStack id="sectionsStack"
                width="100%" height="100%" creationPolicy="all" >
                <sections:AboutSection id="aboutSection"/>
                <sections:ServicesSection id="servicesSection" />
                <sections:ExpertiseSection id="expertiseSection" />
                <sections:TeamSection id="teamSection" />
                <sections:ContactsSection id="contactsSection" />

                <mx:Sequence id="changeSectionEffect">
                <effects:WaitForEventAction target="{currentSection}" eventName="closed"
                effectStart="currentSection.close()" duration="500" />
                <mx:SetPropertyAction target="{sectionsStack}" name="selectedChild" value="{pendingSection}" />
                <effects:WaitForEventAction target="{currentSection}" eventName="opened"
                effectStart="currentSection.reset();currentSection.open()" duration="500" />

                For both of them I`m using the upper mentioned css style.

                The point of whole thing is to make the scroll work only for the canvas based mxml. In the application it must be the default scroll