6 Replies Latest reply on Jul 18, 2011 1:55 PM by s_davies

    Placing graphics within a scroller area

    s_davies

      I have on one of my view a lot of text so I have created it so to scroll see below, (if wrong plese let me know):

       

       

      <s:Scroller left="20" right="20" top="20" bottom="0">

           <s:RichEditableText percentWidth="100" percentHeight="100" editable="false" selectable="false">

                <s:p>My text goes here</s:p>

           </s:RichEditableText>

      </s:Scroller>

       

       

      Now with in this text would live to place some graphics like boxes with text inside as I want to create a diagram etc, but if i place my rectangle code (see below) with in the 'RichEditableText' section all goes well until till I click on a link to goto this view and nothing happens and it freezes up

       

       

      <s:Rect width="135" height="71" radiusX="10">

           <s:fill>

      <s:SolidColor color="#ff990" />

           </s:fill>

      </s:Rect>

       

       

      Does any one know how I can add the graphics etc with in there to work an scroll with the text, or am i using the wrong scroll method etc.


      Many Thanks

      Si

        • 1. Re: Placing graphics within a scroller area
          Rangora Level 3

          Does it work when you have just text in the RichEditableText?

          • 2. Re: Placing graphics within a scroller area
            s_davies Level 1

            Yes, I did it with just text  first to test then it was ok

            • 3. Re: Placing graphics within a scroller area
              Rangora Level 3

              Ok I read the doc and searched the web and I found the problem.

               

              RichEditableText can only accept text or InlineGraphicsElement. If you want to add graphics in the text, you will have to create an InlineGraphicsElement and add it to a paragraph.

               

              My first suggestion would be to change your declaration for this :

               

              <s:Scroller left="20" right="20" top="20" bottom="0">
                 <s:RichEditableText percentWidth="100" percentHeight="100" editable="false" selectable="false">
                      <s:textFlow>
                         <s:TextFlow>

                             <s:p id="firstPar">
                                   My text goes here

                             </s:p>
                         </s:TextFlow>
                     </s:textFlow>
                </s:RichEditableText>

              </s:Scroller>

               

              This will allow you to have more than 1 paragraph. It's how Adobe implement a RichEditableText in the doc.

               

              To add a graphic to this paragraph, you will add this code in the fx:Script tag.

               

              import flashx.textLayout.elements.InlineGraphicElement;

               

              private var rec:InlineGraphicElement;

               

                         
              protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
              {
                   rec = new InlineGraphicElement();
                   rec.source = drawRect();
                   firstPar.addChild(rec);
              }
                         
              private function drawRect():Sprite
              {
                   var spt:Sprite = new Sprite();
                   spt.graphics.beginFill(0xff9900);
                   spt.graphics.drawRect(0,0,135,71);
                   spt.graphics.endFill();
                   return spt;
              }

               

              The InlineGraphicElement can load an external file (an image for example). You can also create a sprite and set it as the source as I do here.

               

              I hope this will help you to understand how you could do what you want to do

               

              EDIT : here are my sources :


              http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/elem ents/InlineGraphicElement.html


              http://docs.huihoo.com/flex/4/spark/components/RichEditableText.html

              • 4. Re: Placing graphics within a scroller area
                Rangora Level 3

                I did a little mistake. Instead of viewActivateHandler, you should use creationComplete. If you add this code in the viewActivate and you deactivate the view and come back, it will add a second graphic.

                 

                Also, I didnt tell you to add the eventHandler in the <s:view> tag. In this case, it would be

                 

                <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark" title="testingview" creationComplete="view1_creationCompleteHandler(event)">

                 

                and the method would be

                 

                protected function view1_creationCompleteHandler(event:FlexEvent):void
                            {
                                rec = new InlineGraphicElement();
                                rec.source = drawRect();
                                firstPar.addChild(rec);
                            }

                • 5. Re: Placing graphics within a scroller area
                  s_davies Level 1

                  Hey!, thanks for the response, I will give this a try and let you know the out come, once again many thanks.

                  Si

                  • 6. Re: Placing graphics within a scroller area
                    s_davies Level 1

                    That seemed to work a treat now to get text on top of those rectangles etc and I'm done, well I said i'm done !! :-)

                     

                    Many Thanks for this.

                    Si