在 Visual Studio Code 中配置 Royale

Question

在 VSCode 中成功编译 Royale 项目，但 index.html 在 Chrome 中显示空白屏幕。

遵循来自 https://github.com/BowlerHatLLC/vscode-as3mxml/wiki/Install-the-ActionScript-and-MXML-extension-for-Visual-Studio-Code 并成功设置 VSCode。在没有 Jewel 的情况下运行良好，但如果代码包含 Jewel，即使编译成功，在 Chrome 中构建的 index.html diaply 空白屏幕。

以下适用于浏览器 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>

以下内容不适用于只有空白屏幕的 Chrome。

<?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>

没有错误信息。期望在浏览器中看到复选框，代码是从 Tour de Jour 复制的，它可以在 Moonshine IDE 中运行。

Answer 1

我在代码中直接看到的一些内容，您使用的是js:Application 而不是j:Application。第一个是Basic的主应用程序，第二个是Jewel。

接下来我错过了以下代码：

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

并将您的 j:Card 放在 initialView 中

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

</j:initialView>

不要忘记添加一个 Jewel 主题，通常是一个 html 模板。您可以使用Tour de Jewel project source code 与您的进行比较，看看您还没有以正确的方式设置哪些内容。