3 Replies Latest reply on Oct 13, 2009 2:57 PM by EladElrom

    Creating custom scrollbar for TextArea/RichText

    WixardCallMe

      How can i create a custom scrollbar  for a s:TextArea from Catalyst ?

      I already create the scrollbar componet, but i dont have any ideo to relate to a text like a data list ....

       

      Also i can use Flash Builder to complete the Job but how can i do that with the new skin arquitecture of Spark ?

      Imagen 1.png

        • 1. Re: Creating custom scrollbar for TextArea/RichText
          acath Level 4

          Hi,

           

          The current beta of Catalyst has no support for wiring up scrollbars to things (except lists). Look for this in a future beta.

           

          To do this in Flash Builder, you first need a TextArea and a skin. You can copy the default skin from the SDK source code that ships with Flash Builder (something like /plugins/com.adobe.flexide.flex/devsdks/4.0.0/frameworks/projects/flex4/src...I'm not at my computer right now =p), although probably the easiest way to do is it to create a TextInput skin in Flash Catalyst, then convert it to being a TextArea skin by changing the HostComponent metadata. Once you've done that, you'll have a skin that looks something like this:

           

           

           

          To wire the scrollbar up, all you have to do is add viewport="" to the scrollbar. This will make the scrollbar control the scrolling of the textView.

           

          If you get a little further and you want to auto-hide your scrollbars when they are not needed, take a look at Scroller: http://livedocs.adobe.com/flex/gumbo/langref/spark/components/Scroller.html

           

          -Adam

          • 2. Re: Creating custom scrollbar for TextArea/RichText
            Ploufy

            Hi everybody,

             

            I changed the HostComponent MetaData in TextArea. I try to put a VScrollBar using a viewport but I have the following error

            Initializer for 'viewport' : values of type spark.core.IViewPort cannot be represented in text

             

            This is the code of my skin:

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Skin
            
             xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:ai="http://ns.adobe.com/ai/2008" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
            
            <s:states>
            
            <s:State name="normal"/>
            
            <s:State name="disabled"/>
            
            </s:states>
            
            <fx:Metadata>[HostComponent("spark.components.TextArea")]</fx:Metadata>
            
            <s:Group>
            
            <s:RichEditableText textAlign="left" fontFamily="Arial" lineHeight="15" tracking="-4%" color="0xa1a1a1" whiteSpaceCollapse="preserve" kerning="on" ai:knockout="0" d:userLabel="Job title:" width="46" heightInLines="1" id="textView" text="(Texte)" >
            
            </s:RichEditableText>
            
            </s:Group>
            
            <s:VScrollBar includeIn="normal" x="67" y="-7" viewport=""/></s:Skin>
            
            
            
            
            


            I tried to put the id of the RichEditableText in the viewport but I have the same error message.

             

            Thanks in advance!

            • 3. Re: Creating custom scrollbar for TextArea/RichText
              EladElrom Level 1

              You need to attach the viewport to IVisualElement for instance, wrap the TextArea with a group component and it will work, see below:

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
                 
                  <s:Group id="text" height="200" width="400">
                      <s:TextArea width="400" height="400" text="Lorem ipsum dolor sit amet, fusce viverra elementum nulla wisi ligula sollicitudin, " />
                  </s:Group>
                 
                  <s:VScrollBar viewport="{text}" x="400" y="1" height="200"/>
                 
              </s:Application>

               

              Screen shot 2009-09-14 at 5.56.02 PM.png