Configuring Royale in Visual Studio Code

Question

Compiled Royale project in VSCode successfully but index.html display blank screen in Chrome.

Followed instruction from https://github.com/BowlerHatLLC/vscode-as3mxml/wiki/Install-the-ActionScript-and-MXML-extension-for-Visual-Studio-Code and setup VSCode successfuly. Worked well without Jewel but if the code contains Jewel, even compile successuly, the built index.html diaply blank scrren in Chrome.

Below works in browser Chrome.

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:js="library://ns.apache.org/royale/express">
    <js:initialView>
        <js:View>
            <js:Label text="Hello World" x="100" y="100"/>
        </js:View>
    </js:initialView>
</js:Application>

Below DOES NOT work in Chrome with just a blank screen.

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:j="library://ns.apache.org/royale/jewel"
    xmlns:html="library://ns.apache.org/royale/html"
    xmlns:js="library://ns.apache.org/royale/express">
    <j:Card width="350">
         <html:H3 text="Jewel CheckBox"/>
        <j:CheckBox text="Not Checkbox"/>
        <j:CheckBox text="Checked" selected="true"/>
        <j:CheckBox text="Disabled">
            <j:beads>
                <j:Disabled/>
            </j:beads>
        </j:CheckBox>
        <j:CheckBox text="Checked and Disabled" selected="true">
            <j:beads>
                <j:Disabled/>
            </j:beads>
        </j:CheckBox>
    </j:Card>
</js:Application>

No error message. Expect to see check boxes in the browsr, The code is copied from Tour de Jour, It works in Moonshine IDE.

Answer 1

some things I see directly in code, you're using js:Application instead of j:Application. First is the main Application for Basic and second is for Jewel.

Next I miss the following code:

<j:valuesImpl>
    <js:SimpleCSSValuesImpl />
</j:valuesImpl>

and put your j:Card inside initialView

<j:initialView>
    <j:Card...

</j:initialView>

Don't forget to add a Jewel theme and usually an html template. You can use Tour de Jewel project source code to compare agains yours to see what things you still don't have set up in the right way.