1 Reply Latest reply on Mar 4, 2010 5:53 AM by Darshan Bhat

    Label.htmlText - <img>

    Darshan Bhat

      Hi

      I am looking to make a News Ticker application with the following code.

       

      But using the htmlText attribute of mx:Label I am not able to insert two continuous images using <img> tag. Only one image is displayed and that too not in the place where it is meant to be.

       

      Any suggestions?

       

      Thanks

       

      <?xml version="1.0"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#ffffff" initialize="resetText();">

      <mx:Script>

         <![CDATA[

       

              [Embed(source="assets/Up.GIF")]

      [Bindable]

              public var upImage:Class;

          

              [Embed(source="assets/Down.GIF")]

      [Bindable]

              public var downImage:Class;

       

      // Event handler for the effectEnd event.

      private function endEffectHandler():void {

      moveText();

      }

       

      private function moveText():void {

      myMove.end();

      myMove.duration=8000;

      myMove.xTo=-600;

      myMove.play();

      }

       

      private function resetText():void {

      myMove.end();

      text.x=500;

      text.htmlText = "<B>qwertry</B> 11.11 <img width='16' height='14' src='StockTicker_upImage'/> 0.02 <B>asdfgh</B> 14.11 <img width='16' height='14' src='StockTicker_downImage'/> 0.02"

      moveText();

      }

       

           ]]>

      </mx:Script>

       

       

      <mx:Move id="myMove" target="{text}" effectEnd="resetText();" />

       

      <mx:Panel title="Information" height="125" width="500"

      paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" backgroundColor="#ffffff">

       

      <mx:HBox  id="tickerWindow" height="65" width="450"  borderStyle="solid" paddingTop="10" paddingBottom="10" backgroundColor="#ff0000"

      paddingLeft="10" paddingRight="10" horizontalScrollPolicy="off">

       

      <mx:Label y="15" id="text" />

       

      </mx:HBox>

       

      </mx:Panel>

      </mx:Application>

        • 1. Re: htmlText - <img>
          Matt Le Fevre Level 4

          afaik, standard flex sdk doesn't currently support inline images with text/ image positioning in text components

           

          there is more info & running examples of how it will work in flex 4

           

          http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WSda78ed3a750d6b8f6591af8e12478c16301-7ffc.h tml

           

           

           

          i experimented with this a while back, can't remember the websites i trudged through to get something working but i know that if you want it to be possible in flex 3 you'll need the TextLayout libs;

           

          textLayout_edit.swc

          textLayout_core.swc

          textLayout_conversion.swc

           

          and then have to use a textLayout component, which is imported through the flashx library.

           

           

           

          Overall, it was a massive Ballache trying to get it to work, and i'd suggest waiting for Flash builder 4 before you try to progress in this area. However, someone might have more insight than me and be able to offer a better solution, which i'd also be very interested in.

           

           

          Regardless, here's all the code i pieced together whilst playing around trying to get this functionality, it does work, but you'll have to get those libraries i mentioned:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
          
              <mx:Script>
              <![CDATA[
                  import flash.text.engine.FontWeight;
                  import flashx.textLayout.events.ScrollEvent;
                  import mx.events.ScrollEvent;
                  import mx.events.MoveEvent;
                  import flashx.textLayout.container.IContainerController;
                  import flashx.textLayout.events.CompositionCompletionEvent;
                  import flashx.textLayout.events.StatusChangeEvent;
                  import flashx.textLayout.elements.InlineGraphicElement;
                  import flashx.textLayout.container.DisplayObjectContainerController;
                  import flashx.textLayout.conversion.TextFilter;
                  import flashx.textLayout.elements.TextFlow;
                  import flashx.textLayout.elements.SpanElement;
                  import flashx.textLayout.elements.ParagraphElement;
                  import flashx.textLayout.elements.TextFlow;
                  import flashx.textLayout.edit.UndoManager;
                  import flashx.textLayout.edit.EditManager;
                  import flashx.textLayout.edit.IEditManager;
                  import flashx.textLayout.edit.ISelectionManager;
                  import flashx.textLayout.edit.SelectionState;
                  import flashx.textLayout.edit.IUndoManager;
                  import flashx.textLayout.container.DisplayObjectContainerController;
                  import flashx.textLayout.formats.ICharacterFormat;
                  import flashx.textLayout.formats.IContainerFormat;
                  import flashx.textLayout.formats.IParagraphFormat;
                  import flashx.textLayout.formats.ITabStopFormat;
                  import flashx.textLayout.formats.TabStopFormat;
                  import flashx.textLayout.formats.FormatValue;
                  import flashx.textLayout.compose.IFlowComposer;
                  import flashx.textLayout.utils.CharacterUtil;
                  import flashx.textLayout.conversion.ITextExporter;
                  import flashx.textLayout.events.SelectionEvent;
                  import flashx.textLayout.formats.CharacterFormat;
                  import flashx.textLayout.conversion.ConversionType;
                  
                  
                  import flashx.textLayout.conversion.ConversionType;
              
                  import flash.text.engine.FontPosture;
                  import flash.text.engine.FontWeight;
                  import flashx.textLayout.formats.TextAlign;
                  import flashx.textLayout.formats.TextDecoration;
            
                  import mx.events.ColorPickerEvent;
                  import mx.events.FlexEvent;
          
                      
                  [Embed(source="test1.png")]
                  [Bindable]
                  static public var _imgClass:Class;
                  
                  private var _textContainer:Sprite = null;
                  
                  
                  public static const BULLET_POINT:String = "\u0085\u0085\u2003\u2003\u2022";
                  public static const SQUARE_BULLET:String = "\u25A0";
                  public static const DIAMOND_BULLET:String = "\u25C6";
              
              
                  [Bindable]
                  public var _textFlow:TextFlow;
                  [Bindable]
                  private var _controller:IContainerController;
          
              
                  private static const _textInput:XML = 
                  <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
                  <div>
                      <p>
                          <img source="test1.png"/>
                          <span>Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applications can be built using only the free Flex SDK, developers can use Adobe® Flex® Builder™ 3 software to dramatically accelerate development. Try Flex Builder 3 free for 60 days. Try ILOG Elixir to enhance data display in your Flex applications.</span>
                          <br/>
                          {BULLET_POINT} Flex is a highly productive, free open source framework for building and maintaining expressive web
                          {BULLET_POINT} Flex is a highly productive, free open source framework for building and maintaining expressive web
                          {BULLET_POINT} Flex is a highly productive, free open source framework for building and maintaining expressive web
                          
                      </p>
                  </div>
                  </TextFlow>;
                  
                  private function init():void 
                  {
                      _textContainer = new Sprite();
                      canvas.rawChildren.addChild(_textContainer);
                      _controller = new DisplayObjectContainerController(_textContainer, canvas.width, canvas.height);
                      _textFlow = TextFilter.importToFlow(_textInput, TextFilter.TEXT_LAYOUT_FORMAT);
                      _textFlow.flowComposer.addController(_controller);
                      _textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED, picLoaded);
                      _textFlow.addEventListener(CompositionCompletionEvent.COMPOSITION_COMPLETE, composeListener);
                      _textFlow.addEventListener(flashx.textLayout.events.ScrollEvent.SCROLL, scrollTextFlow);
                      
                       _textFlow.interactionManager = new EditManager(new UndoManager());
                      //_textFlow.edit
                       _textFlow.interactionManager.setSelection(0,0);
                      _textFlow.flowComposer.updateAllContainers();
                      
                  }
                  
                  private function composeListener(event:CompositionCompletionEvent):void 
                  {
                      var textHeight:int = Math.ceil(_controller.calculateHeight());
                      
                      if (textHeight < _controller.compositionHeight) 
                      {
                          scroll.enabled = false;
                      } 
                      else 
                      {
                          scroll.enabled = true;
                          scroll.minScrollPosition = 0;
                          scroll.maxScrollPosition = textHeight - _controller.compositionHeight;
                      }
                          _controller.verticalScrollPosition = 0;
                  }
                  
                  private function picLoaded(event:StatusChangeEvent):void 
                  {
                      var image:InlineGraphicElement = event.element as InlineGraphicElement;
                      _textFlow.flowComposer.updateAllContainers();
                      //_textFlow.flowComposer.update()
                  
                  }
                  
                  private function scrollListener(event:mx.events.ScrollEvent):void 
                  {
                      _textFlow.removeEventListener(flashx.textLayout.events.ScrollEvent.SCROLL, scrollTextFlow);
                       _controller.verticalScrollPosition = event.position;
                      _textFlow.addEventListener(flashx.textLayout.events.ScrollEvent.SCROLL, scrollTextFlow);
                      //_textFlow.flowComposer.update()
                  }
          
                    private function scrollTextFlow(event:flashx.textLayout.events.ScrollEvent):void 
                    {
                      scroll.removeEventListener(mx.events.ScrollEvent.SCROLL, scrollListener);
                      scroll.scrollPosition = Math.ceil(_controller.verticalScrollPosition);
                      //_textFlow.flowComposer.update()
                      scroll.addEventListener(mx.events.ScrollEvent.SCROLL, scrollListener);
                  }
          
                  protected var _file_ref:FileReference;
                  protected var _img_loader:Loader;
                  
                  public function addImage(e:MouseEvent):void 
                  {
                      //_textFlow.flowComposer.update()
                        _file_ref = new FileReference();
                        _file_ref.addEventListener( Event.SELECT, handleFileSelect,false,0,true );
                         var filter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png;*.jpeg");
                        _file_ref.browse([filter]);            
                        //_textFlow.flowComposer.update()
                         _textFlow.flowComposer.updateAllContainers();
                  }
                      
                  private function handleFileSelect(e:Event):void 
                  {
                        _file_ref.removeEventListener( Event.SELECT, handleFileSelect );
                        _file_ref.addEventListener(Event.COMPLETE, handleFileOpen,false,0,true );
                        _file_ref.load();
                       
                  }
          
                  private function handleFileOpen(e:Event):void 
                  {
                       _file_ref.removeEventListener(Event.COMPLETE, handleFileOpen );
                       var data:ByteArray = _file_ref.data as ByteArray;
                       _img_loader=new Loader();
                       //_textFlow.flowComposer.update()
                       _img_loader.loadBytes(data);
                       //trace(data);
                       trace(data);
                        _img_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoadComplete,false,0,true);
                      
                  }
                      
                  protected function imageLoadComplete(e:Event):void
                  {
                        _img_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,imageLoadComplete);
                        var bmd:BitmapData=Bitmap(_img_loader.content).bitmapData;
                        var bm:Bitmap=new Bitmap(bmd);
                        EditManager(_textFlow.interactionManager).insertInlineGraphic(bm,bm.width,bm.height);
                        
                       _textFlow.flowComposer.updateAllContainers();
                      
                  }    
                  
                  protected function addBullet():void
                  {
                        EditManager(_textFlow.interactionManager).insertText(BULLET_POINT);
                       _textFlow.flowComposer.updateAllContainers();
                  }    
                  
              
                  public function selectionToColor():void
                  {
                      //var textFlow:TextFlow = selection._textFlow;
                       var editManager:IEditManager = _textFlow.interactionManager as IEditManager;
                      
                       var characterFormat:CharacterFormat = new CharacterFormat();
                       trace(characterFormat.color);
                       characterFormat.color = "#FF0000";
                       trace(characterFormat.color);
                       editManager.applyFormat(characterFormat);   
                  }
                  
                  
                  
                  public function applySizeChange():void
                  {
                       //var textFlow:TextFlow = selection._textFlow;
                       var editManager:IEditManager = _textFlow.interactionManager as IEditManager;
              
                       var characterFormat:CharacterFormat = new CharacterFormat();
                       trace(characterFormat.fontSize);
                       characterFormat.fontSize = fontSize.value;
                       trace(characterFormat.fontSize);
                       editManager.applyFormat(characterFormat);
                      
                  }
                  
                  public static const BOLD:String = "bold"
                  public static const BOLD_ITALIC:String = "boldItalic"
                  public static const REGULAR:String = "regular"
                  public static const ITALIC:String = "italic"
                  
                  public function applyWeightChange():void
                  {
                       var editManager:IEditManager = _textFlow.interactionManager as IEditManager;
              
                       var weightChange:CharacterFormat = new CharacterFormat();
                       trace(weightChange.fontWeight);
                       weightChange.fontWeight = ITALIC;
                       trace(weightChange.fontWeight);
                       editManager.applyFormat(weightChange);     
                       
                  }
                  
                  //public var selections:SelectionState;
                  
                  public function exportToXML():void
                  {
                      var debug:String;
                      debug = TextFilter.export(_textFlow, TextFilter.TEXT_LAYOUT_FORMAT, ConversionType.STRING_TYPE).toString();
                      
                      trace(debug);
                  }
          
                  import mx.managers.PopUpManager;
                  
                   import mx.controls.Label;
                      import mx.events.CloseEvent;
                      import mx.containers.TitleWindow;
                      import mx.managers.PopUpManager;
          
                      private var titleWindow:TitleWindow;
          
                  
                  
              
                  
              ]]>
              </mx:Script>
              
              <mx:VBox width="100%" x="50" y="50">
                  <mx:HBox x="20" y="20">
                      <mx:Canvas id="canvas" width="500" height="600"  backgroundColor="#ffffff"/>
                      <mx:VScrollBar id="scroll" height="{canvas.height}" scroll="scrollListener(event)"/>
                  </mx:HBox>
                  <mx:HBox width="{canvas.width}">
                      <mx:Button label="Bold" click="applyWeightChange()"/>
                      <mx:Button label="Dynamic Color" click="selectionToColor()"/>
                      <mx:NumericStepper id="fontSize" minimum="12" maximum="40" click="applySizeChange()"/>
                      <mx:Button label="Export" click="exportToXML()"/>
                      <mx:Button label="{BULLET_POINT}" click="addBullet()"/>        
                      <mx:Spacer width="100%"/>
                      <mx:Button label="Add Image" click="addImage(event);"/>
                  </mx:HBox>    
              </mx:VBox>
          
          
          </mx:Application>