14 Replies Latest reply on Apr 12, 2010 7:13 AM by nfedyk

    FB4: embedded Font for Texts added at runtime

    vivoices

      I am using the following StyleSheet in a Group Component:

      <fx:Style source="../../Styles/TextStyles.css" />

      A Label uses the embedded font successfully, but TextAreas added at runtime fail to use the embeded fonts even though they use the same styleName.
      Any idea how to use embedded font for TextAreas added at runtime?
      Thanks,
      David

        • 1. Re: FB4: embedded Font for Texts added at runtime
          Flex harUI Adobe Employee

          What do the selectors look like?

          • 2. Re: FB4: embedded Font for Texts added at runtime
            vivoices Level 1

             

            .pageTexts {
            
            
            fontLookup: embeddedCFF;
            }
            

            A text added when editing code shows the embedded fonts correctly, a text added at runtime doesn't.

            • 3. Re: FB4: embedded Font for Texts added at runtime
              bandsitebuilder

              are you using the spark components? or the mx?

               

              if mx.. you'll need to use embedAsCFF : false in your css.

              • 4. Re: FB4: embedded Font for Texts added at runtime
                vivoices Level 1

                I am using  spark.components.TextArea for both the text added at runntime and while editing.

                • 5. Re: FB4: embedded Font for Texts added at runtime
                  bandsitebuilder Level 1

                  This is an example I found and modified...

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application name="Spark_TextArea_setFormatOfRange_test"
                                    xmlns:fx="http://ns.adobe.com/mxml/2009"
                                    xmlns:s="library://ns.adobe.com/flex/spark"
                                    xmlns:mx="library://ns.adobe.com/flex/halo"
                                    creationComplete="onComplete()" 
                                    >
                       <fx:Script>
                            <![CDATA[
                                 import flashx.textLayout.conversion.TextConverter;
                                 
                                 
                                 private function onComplete() : void
                                 {
                                      myTextArea.setStyle("fontFamily", "Flood");
                                      var tf : String = '<P><FONT FACE="Flood" SIZE="26" COLOR="#000000">This is a nice piece of text in Flood</FONT></P>' +
                                           '<P><FONT FACE="Daisy" SIZE="23" COLOR="#FF0000">This is a nice piece of text in Daisy</FONT></P>';
                                      myTextArea.textFlow = TextConverter.importToFlow(tf, TextConverter.TEXT_FIELD_HTML_FORMAT);     
                                 }
                  
                  
                                 
                            ]]>
                       </fx:Script>
                       <fx:Style>
                            @namespace s "library://ns.adobe.com/flex/spark";
                            @namespace view "com.smartersign.player.view.*";
                            @namespace component "com.smartersign.cms.component.*";
                            @namespace mx "library://ns.adobe.com/flex/halo";
                            
                            @font-face {
                                 src: url("FloodStd.otf");
                                 fontFamily: "Flood";
                                 embedAsCFF: true;
                            }
                            
                            @font-face {
                                 src: url("daisy.ttf");
                                 fontFamily: Daisy;
                            }
                  
                       </fx:Style>
                       <s:TextArea id="myTextArea"  x="14" y="10" width="484" height="285"/>     
                  </s:Application>
                  
                  • 6. Re: FB4: embedded Font for Texts added at runtime
                    PDSB_Greg

                    I can't get the TextConverter.importToFlow to use embeded fonts either.  It worked fine in Beta2 SDK, but not with the final release of the Flex 4 SDK.

                     

                    Here's a source example...

                     

                    CSS

                    @font-face{
                         src: url('fonts/MyriadPro-Regular.otf');
                         fontFamily: MyriadProSpark;
                         advancedAntiAliasing: true;
                         embedAsCFF: true;
                    }
                    @font-face{
                         src: url('fonts/MyriadPro-Bold.otf');
                         fontFamily: MyriadProSpark;
                         fontWeight: bold;
                         advancedAntiAliasing: true;
                         embedAsCFF: true;
                    }
                    @font-face{
                         src: url('fonts/MyriadPro-It.otf');
                         fontFamily: MyriadProSpark;
                         fontStyle: italic;
                         advancedAntiAliasing: true;
                         embedAsCFF: true;
                    }
                    

                     

                    Some code

                    var s1:Sprite = new Sprite();
                    canvas1.rawChildren.addChildAt(s1, 0);
                    if(canvas1.rawChildren.numChildren > 1){ canvas1.rawChildren.removeChildAt(1); }
                    var s2:Sprite = new Sprite();
                    canvas2.rawChildren.addChildAt(s2, 0);
                    if(canvas2.rawChildren.numChildren > 1){ canvas2.rawChildren.removeChildAt(1); }
                                        
                    var textFlow:TextFlow     = TextConverter.importToFlow(messages.join(''), TextConverter.TEXT_LAYOUT_FORMAT);
                    textFlow.format          = _parentApp.getTextLayoutFormat();
                    textFlow.flowComposer.addController(new ContainerController(s1, canvas1.width, canvas1.height));
                    textFlow.flowComposer.addController(new ContainerController(s2, canvas2.width, 1000));
                    textFlow.flowComposer.updateAllControllers();
                    

                     

                    And what _parentApp.getTextLayourFormat() does

                    public function getTextLayoutFormat(fontSize:int=12, lineHeight:int=14, fontWeight:String=FontWeight.NORMAL):TextLayoutFormat
                    {
                         var format:TextLayoutFormat     = new TextLayoutFormat();
                         format.textAlign          = TextAlign.LEFT;
                         format.verticalAlign          = VerticalAlign.TOP;
                         format.color               = 0x3E3E3E;
                         format.fontLookup          = flash.text.engine.FontLookup.EMBEDDED_CFF;
                         format.fontFamily          = 'MyriadProSpark';
                         format.fontSize               = fontSize;
                         format.fontWeight          = fontWeight
                         format.lineHeight          = lineHeight;
                         format.renderingMode          = RenderingMode.CFF;
                         format.whiteSpaceCollapse     = WhiteSpaceCollapse.PRESERVE;
                         return(format);
                    }
                    

                     

                    Again, everything worked great with the Beta2 SDK.

                    • 7. Re: FB4: embedded Font for Texts added at runtime
                      bandsitebuilder Level 1

                      This is my attempt at using StyleManager to load them in.. it only will render the font specified by the fontFamily attribute.

                       

                      the above code i posted will properly render both fonts... but doesn't work at runtime..

                       

                       

                      <?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"
                                        creationComplete="onComplete()" 
                                       >
                           <fx:Script>
                                <![CDATA[
                                     import flashx.textLayout.conversion.TextConverter;
                                     
                                     import mx.events.StyleEvent;
                                     import mx.managers.SystemManagerGlobals;
                                     import mx.styles.IStyleManager2;
                      
                                     private var _request:IEventDispatcher;
                                     private var _request2:IEventDispatcher;
                                     
                                     private function onComplete() : void
                                     {
                                          _request = getStyleManager().loadStyleDeclarations2('Flood.swf',false);
                                          _request.addEventListener(StyleEvent.COMPLETE, onFont1Load, false, 0, true);
                                     }
                                     
                                     
                                     private function onFont1Load(event:StyleEvent) : void
                                     {
                                           trace( 'Flood is loaded');
                                          _request2 = getStyleManager().loadStyleDeclarations2('Daisy.swf',false);
                                          _request2.addEventListener(StyleEvent.COMPLETE, onFont2Load, false, 0, true);
                                     }
                                     
                                     private function onFont2Load(event:StyleEvent) : void
                                     {
                                          trace( 'Daisy is loaded');
                                          onFontLoad()
                                     }
                                     
                                     private function onFontLoad():void
                                     {
                                          
                                          
                                          myTextArea.setStyle("fontFamily", "Flood");
                                     
                                          var tf : String = '<P><FONT FACE="Flood" SIZE="26" COLOR="#000000">This is a nice piece of text in Flood</FONT></P>' +
                                               '<P><FONT FACE="Daisy" SIZE="23" COLOR="#FF0000">This is a nice piece of text in Daisy</FONT></P>';
                                          myTextArea.textFlow = TextConverter.importToFlow(tf, TextConverter.TEXT_FIELD_HTML_FORMAT);               
                                          
                                     }
                                     
                                     
                                     public static function getStyleManager():IStyleManager2
                                     {
                                          return mx.styles.StyleManager.getStyleManager(SystemManagerGlobals.topLevelSystemManagers[0]);
                                     }
                                ]]>
                           </fx:Script>
                           <s:TextArea id="myTextArea"  x="14" y="10" width="484" height="285"/>     
                      </s:Application>
                      

                       

                      Message was edited by: bandsitebuilder fixed event listener to call right method

                      • 8. Re: FB4: embedded Font for Texts added at runtime
                        bandsitebuilder Level 1

                        Greg... what version of the beta SDK were you using?


                        • 9. Re: FB4: embedded Font for Texts added at runtime
                          PDSB_Greg Level 1

                          When it worked I was using the SDK that was released with Beta 2 (4.0.0.10485).  Now that I've switched to the final version 4 SDK (4.0.0.14159), it doesn't work.

                          • 10. Re: FB4: embedded Font for Texts added at runtime
                            bandsitebuilder Level 1

                            Confirmed.. the following code behaves as expected with the Beta SDK.  Release build (and nightly build as well) does not work..

                             

                            I'm going to file a bug report in jira

                             

                            <?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"
                                              creationComplete="onComplete()" 
                                             >
                                 <fx:Script>
                                      <![CDATA[
                                           import flashx.textLayout.conversion.TextConverter;
                                           
                                           import mx.events.StyleEvent;
                                           import mx.managers.SystemManagerGlobals;
                                           import mx.styles.IStyleManager2;
                            
                                           private var _request:IEventDispatcher;
                                           private var _request2:IEventDispatcher;
                                           
                                           private function onComplete() : void
                                           {
                                                _request = StyleManager.loadStyleDeclarations('Flood.swf',false);
                                                _request.addEventListener(StyleEvent.COMPLETE, onFont1Load, false, 0, true);
                                           }
                                           
                                           
                                           private function onFont1Load(event:StyleEvent) : void
                                           {
                                                 trace( 'Flood is loaded');
                                                _request2 = StyleManager.loadStyleDeclarations('Daisy.swf',false);
                                                _request2.addEventListener(StyleEvent.COMPLETE, onFont2Load, false, 0, true);
                                           }
                                           
                                           private function onFont2Load(event:StyleEvent) : void
                                           {
                                                trace( 'Daisy is loaded');
                                                onFontLoad()
                                           }
                                           
                                           private function onFontLoad():void
                                           {
                                                
                                                
                                                myTextArea.setStyle("fontFamily", "Flood");
                                           
                                                var tf : String = '<P><FONT FACE="Flood" SIZE="26" COLOR="#000000">This is a nice piece of text in Flood</FONT></P>' +
                                                     '<P><FONT FACE="Daisy" SIZE="23" COLOR="#FF0000">This is a nice piece of text in Daisy</FONT></P>';
                                                myTextArea.textFlow = TextConverter.importToFlow(tf, TextConverter.HTML_FORMAT);               
                                                
                                           }
                                           
                            
                                      ]]>
                                 </fx:Script>
                                 <s:TextArea id="myTextArea"  x="14" y="10" width="484" height="285"/>     
                            </s:Application>
                            
                            • 11. Re: FB4: embedded Font for Texts added at runtime
                              bandsitebuilder Level 1

                              I created a bug report...  please go vote on this so we can get this resolved!

                               

                              https://bugs.adobe.com/jira/browse/SDK-26187

                               

                               

                              Thanks,

                              Peter

                              • 12. Re: FB4: embedded Font for Texts added at runtime
                                Flex harUI Adobe Employee

                                Try using "styleManager" and not "StyleManager" or try using

                                merged-into-code instead of RSLs.

                                • 13. Re: FB4: embedded Font for Texts added at runtime
                                  bandsitebuilder Level 1

                                  thanks for your reply Alex..

                                   

                                  I have tried all permutations of merged into code as well as different ways of calling StyleManager.  I know that StyleManager is not a singleton anymore so I tried:

                                   

                                  _styleManager = StyleManager.getStyleManager(this.moduleFactory);
                                  

                                   

                                  as well as

                                   

                                  public static function getStyleManager():IStyleManager2
                                  {
                                       return mx.styles.StyleManager.getStyleManager(SystemManagerGlobals.topLevelSystemManagers[0]);
                                  }
                                  

                                   

                                   

                                   

                                  Would you be able to take a look at the bug report I filed?  As we mentioned earlier, it works with the beta SDK but not in the release version.  I think it has less to do with the StyleManager and more to do with the TextConverter as was stated earlier by Greg.

                                   

                                  Thanks for looking into this..

                                   

                                  Peter

                                  • 14. Re: FB4: embedded Font for Texts added at runtime
                                    nfedyk

                                    i was running into this problem too