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

    Creating custom scrollbar for TextArea/RichText


      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



          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



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

            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"?>
             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:State name="normal"/>
            <s:State name="disabled"/>
            <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: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

              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: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:VScrollBar viewport="{text}" x="400" y="1" height="200"/>


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