[Flex JS] Font support

[Justin Mclean <ju...@classsoftware.com>]

Hi,

Trying to get fonts working in JS. Now I should be able to edit the produced HTML after it been generated to add fonts I need, but is there a way to link or @import fonts by referring to it the MXML?

Just for giggles I tried the following:

    <fx:Style>
        @import url('https://fonts.googleapis.com/css?family= Roboto');
    </fx:Style>

And I get a stack trace error like so  Error: Internal error in ABC generator subsystem, when generating code for: /Users/justinmclean/IdeaProjects/FlexJSTest/src/FontFace.mxml: java.util.EmptyStackException
	at java.util.Stack.peek(Stack.java:102)
…

Not that I expected that to work.

I also tried:

<fx:Style>
    @font-face {
        src: url("https://fonts.googleapis.com/css?family=Roboto");
        fontFamily: Roboto;
    }
</fx:Style>

And got this rather strange error:

WARNING: /Users/justinmclean/IdeaProjects/FlexJSTest/target/javascript/bin/js-debug/FontFace.js:39: WARNING - attempted re-definition of type FontFace
found   : function (new:FontFace): undefined
expected: function (new:FontFace, string, (ArrayBuffer|ArrayBufferView|null|string), FontFaceDescriptors=): ?
FontFace = function() {

It seems you can’t call your main file FontFace.mxml.

Re-nameing it mean it can compile but the font fails to download with the error:
index.html:1 Failed to decode downloaded font: https://fonts.googleapis.com/css?family=Roboto
index.html:1 OTS parsing error: invalid version tag

Anyone got JS font to work in a FlexJS application?

Thanks,
Justin

Re: [Flex JS] Font support

[Alex Harui <ah...@adobe.com>]

On 2/17/17, 5:00 PM, "Justin Mclean" <ju...@classsoftware.com> wrote:

>Hi,
>
>So I’ve come up with a way that works but not sure it it’s ideal or not.
>It's certainly not an obvious way to add font support.
>
>And Pangolin.as used <inject_html> like so:
>
>Is BeadViewBase the correct class to extend?

Sorry, forgot to answer this earlier.  For CSS, if Flex didn't support it,
and none of the examples are using it, it is likely we don't support it
yet.

We do have some support for @font-face.  See Flat.swc and
DataBindingExample_Flat.

IMO, if you don't need it to work on the SWF side you can also use a
custom HTML template.  That's probably better than this workaround, but
cool that you figured something out that worked.

-Alex

Re: [Flex JS] Font support

[Justin Mclean <ju...@classsoftware.com>]

Hi,

So I’ve come up with a way that works but not sure it it’s ideal or not. It's certainly not an obvious way to add font support.

Here’s the main application:
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:js="library://ns.apache.org/flexjs/basic" xmlns:fonts="fonts.*">
   <js:valuesImpl>
       <js:SimpleCSSValuesImpl />
   </js:valuesImpl>

    <js:beads>
        <fonts:Pangolin />
    </js:beads>
    
   <js:initialView>
       <js:View>
           <js:VContainer>
                <js:Container>
                    <js:Label text="The quick brown fox jumped over the lazy dog.">
                        <js:style>
                            <js:SimpleCSSStyles fontFamily="Pangolin" />
                        </js:style>
                    </js:Label>
                </js:Container>
                <js:Container>
                    <js:Label text="The quick brown fox jumped over the lazy dog." />
                </js:Container>
           </js:VContainer>
       </js:View>
   </js:initialView>
</js:Application>

And Pangolin.as used <inject_html> like so:

package fonts {
import org.apache.flex.core.BeadViewBase;

public class Pangolin extends BeadViewBase {
 /**
  *  <inject_html>
  *  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Pangolin">
  *  </inject_html>
  */
 public function Pangolin() {
    super();
    }
 }
 }

Is BeadViewBase the correct class to extend?

Thanks,
Justin

Re: [Flex JS] Font support

[Carlos Rovira <ca...@codeoscopic.com>]

Hi Justin,

that's an important error. With things like that we can't call us 1.0

For include external sheets have you try to use <inject_html> in
Constructor?
Search for an example in Dialog.as MDL class, there are others in other
libraries like CreateJS



2017-02-17 8:10 GMT+01:00 Justin Mclean <ju...@classsoftware.com>:

> Hi,
>
> Also this which I though I'd try also fails to compile (assumes source is
> local):
>
> <fx:Style source="https://fonts.googleapis.com/css?family=Roboto" />
>
> How can you include external styles sheets located on other domains?
>
> Thanks,
> Justin
>
>
>


-- 

Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es

Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.

De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.

Re: [Flex JS] Font support

[Justin Mclean <ju...@classsoftware.com>]

Hi,

Also this which I though I'd try also fails to compile (assumes source is local):

<fx:Style source="https://fonts.googleapis.com/css?family=Roboto" />

How can you include external styles sheets located on other domains?

Thanks,
Justin