How to use graphic svg elements with apache royale?

Question

Fan of Flex, I just discover apache Royale. I knew about FalconJS, I thought it was death, but no, after seeing Tour of jewel I'm very exited to use it. Thanks to all contributors. I play a little with exemples, but I don't know how to add svg graphic. I tried something like this in a <j:view>

<svg:Rect height="50" width="50" fill="#ff0000"/>

But got error :

Uncaught TypeError: cls is not a constructor
    at Function.org.apache.royale.utils.MXMLDataInterpreter.generateMXMLObject (MXMLDataInterpreter.js:58)

Could someone give me an exemple of drawing Rectangle ou Circle with border and background color ? Used Royale version is 0.9.4

Here is full code :

<j:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" 
               xmlns:local="*" xmlns:layouts="spark.layouts.*" xmlns:svg="library://ns.apache.org/royale/svg"
               >

    <j:initialView>
        <j:View>
                <svg:Rect height="50" width="50" fill="0xff0000"/>
        </j:View>
    </j:initialView>
</j:Application>

Best Regards

see ASDOC : https://royale.apache.org/asdoc/#!org.apache.royale.svg/Rect I don't know how to use it. I doesn't seem to works — Fred, Sep 23 '19 at 21:07

score 2 · Accepted Answer · edited Sep 24 '19 at 12:08

You can also specify the fill without using binding (which I probably should have answered first):

<js:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:js="library://ns.apache.org/royale/basic" 
    xmlns:svg="library://ns.apache.org/royale/svg">
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    <js:initialView>
        <js:View width="100" height="100">
            <svg:Rect height="50" width="50">
                <svg:fill>
                    <js:SolidColor color="0xff0000"/>
                </svg:fill>
            </svg:Rect>
        </js:View>
    </js:initialView>
</js:Application>

For circle (tested working):

<js:View width="100" height="100" >
        <svg:Ellipse height="10" width="10" x="50" y="50">
            <svg:stroke>
                <js:SolidColorStroke color="0xff0000" weight="1"/>
            </svg:stroke>
        </svg:Ellipse>
</js:View>

But using circle doesn't work (not sure if it's a bug or not) :

<js:View width="100" height="100" >
        <svg:Circle height="10" width="10" x="50" y="50">
            <svg:stroke>
                <js:SolidColorStroke color="0xff0000" weight="1"/>
            </svg:stroke>
        </svg:Circle>
</js:View>

Circles have a radius property. If you use that (i.e radius="5") that'll give the same look as the Ellipse. That said, width and height should work as you'd expect. I'll fix that... — Harbs, Sep 24 '19 at 12:11
Thanks Harbs, I also notice rx and ry attribute seems to have no effect on Rect (I added rectangle with rounded corner) — Fred, Sep 24 '19 at 21:42
Good catch on rx/ry. Fixed https://github.com/apache/royale-asjs/commit/1823985ef7adbdbe2adc1cba48067bfb8fc5a14b — Harbs, Oct 02 '19 at 08:12

Harbs · Answer 2 · 2019-09-24T06:02:28.823

Yes. You should be able to use it in MXML. The namespace should be library://ns.apache.org/royale/svg (like you have). The problem is that you're using an int value for the fill, rather than an IFill reference. Something like this should work, ~~but there appears to be a bug in the GraphicShape implementation~~.

    <js:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:js="library://ns.apache.org/royale/basic" 
               xmlns:svg="library://ns.apache.org/royale/svg"
               >
    <fx:Script>
        <![CDATA[
            import org.apache.royale.graphics.SolidColor;
            import org.apache.royale.graphics.IFill;

        [Bindable]public var fill:IFill = new SolidColor(0xff0000);
    ]]>
</fx:Script>
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    <js:beads>
        <js:ApplicationDataBinding />
    </js:beads>
    <js:initialView>
        <js:View width="100" height="100">
                <svg:Rect height="50" width="50" fill="{fill}"/>
        </js:View>
    </js:initialView>
</js:Application>

~~Please add a Github issue and we'll try to fix the SVG implementation. https://github.com/apache/royale-asjs/issues~~

I just fixed this and the above code should now work in the next build of Royale. https://github.com/apache/royale-asjs/issues/480

thanks Harbs, I have downloaded Construction #3587 (24 sept. 2019 06:41:07) , change notice Fixed #480 (commit: 8cc19cd). Using svg in mxml works fine, but not with binding — Fred, Sep 24 '19 at 08:01
I tested the above MXML locally after I fixed the bug. The nightly build probably did not include the fix. I'm glad the non-binding version worked for you. — Harbs, Sep 24 '19 at 11:54

How to use graphic svg elements with apache royale?

2 Answers2