时间戳

首页 > 解决方案 > 在 Visual Studio Code 中配置 Royale

visual-studio-code - 在 Visual Studio Code 中配置 Royale

问题描述

在 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 也可以显示空白屏幕。

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

标签： visual-studio-codeactionscriptapache-royale

解决方案

我在代码中直接看到的一些内容，您使用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 项目源代码与您的源代码进行比较，看看您还没有以正确的方式设置哪些内容。

推荐阅读