Apache Royale Get Started || Flash Back!

Royale CLI

https://apache.github.io/royale-docs/get-started/royale-cli

The NPM command-line interface tool

Royale CLI is a command-line tool that makes creating and compiling applications easier for users of NPM, the JavaScript package manager.

Installing Royale CLI

If you have not installed Royale already, use this command in the command window:

npm install @apache-royale/royale-js -g

Then run:

npm install @apache-royale/cli -g

Working with Royale CLI

For information at any time about available commands and options, run:

royale help

Creating a new application

Navigate in the command window to the directory where you want to create the new application, called here my-royale-app, then run:

royale new my-royale-app

This creates a new directory structure using the name of the application, and creates a basic app with one main file: my-royale-app/src/Main.mxml.

To review the app structure so far, navigate into the new direcctory:

cd my-royale-app

Running your application

Navigate in the command window into your application’s directory.

To compile and run in debug mode, run:

royale serve:debug

Royale:

• Compiles the project in debug mode, with a source map option.
• Starts a http server and serves the files from the bin/js-debug directory.
• Opens the default browser and navigates to http://localhost:3000.
• Listens to the src folder. When any file changes, Royale will recompile the app and reload the browser to show the updated application.

To compile and run in release mode, run:

royale serve:release

Royale:

• Compiles the project in release mode.
• Starts a http server and serves the files from the bin/js-release directory.
• Opens the default browser and navigates to http://localhost:3001.

Tutorials

https://apache.github.io/royale-docs/tutorials

Presentations, examples and how-to guides

Here you can find links to tutorials and how-to blog articles that will help you get going in Royale and learn how its features can make what you want to do easy and reliable.

• Presentation slide decks and videos
• Hello World
• Build your first application
• Royale in a Week not available yet

Blog articles

• Dividing an Apache Royale application with modules
• Using external JavaScript libraries in Apache Royale
• How to create a desktop application with Royale and Electron
• Loading external data through HTTPService
• Using View States to show or hide content
• Using an item renderer with a list
• Customization through the Royale API
• Data binding

Tour de Jewel is an ever-expanding set of examples of how to use the Jewel component set to build a user interface that will deliver what you want and provide a great user experience.

案例集

https://royale.apache.org/tourdejewel/

Hello World

https://apache.github.io/royale-docs/get-started/hello-world

Try the simplest piece of code possible

To verify that the Royale SDK is set up correctly, we recommend you create and build a “Hello World” example. If that works, you can move on to Create an Application and work through the tutorial on building a more substantial application.

These instructions presume you are not using an IDE, but are creating files in a text editor and compiling using command-line scripts or similar controls. Development tools that fully support Royale provide their own instructions for building your first Royale applications.

In our Apache Royale Blog Examples, you can read about the ‘Hello World’ example to complement the information exposed here. Notice that the main difference is that while in this Hello World we use the Express library, in the blog example we use the Basic version that requires a few more lines of code.

Create the project folders

Create or select a folder to hold this application’s source and output.

In that top-level folder, create a folder called HelloWorld (it can be named something else if you want, and the name can contain spaces). This folder will be referred to as the project folder throughout the documentation.

In the project folder, create a folder called src. You can use other names, but the compiler will manage your output folders for you if you use src or src/main/royale (src\main\royale on Windows).

So, if you used a folder called Projects for all of your project folders, then you would have the following folders:

Projects
Projects/HelloWorld
Projects/HelloWorld/src

Create the source file

In the src folder, create a file called HelloWorld.mxml and use your favorite text editor to give that file the following contents:

<?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" />
        </js:View>
    </js:initialView>
</js:Application>

Compile the source file

If you used NPM to install Royale, run from your project folder:

mxmlcnpm src/HelloWorld.mxml

If you didn’t use npm, run:

<path to SDK folder>/js/bin/mxmlc src/HelloWorld.mxml

Run the output

If the compiler reported success, there should now be a bin/js-release output folder in your project folder, such as

Projects/HelloWorld/bin/js-release

In that folder should be an index.html file you can open in your browser to see your “Hello World” application. If you see that, congratulations! You have installed Royale successfully and are ready to build Royale applications.

Create an Application contains a tutorial for building a more substantial application. The Royale SDK includes an Examples directory that provides practical demonstrations of how to achieve many features and effects using Royale.

Install Apache Royale via npm

npm install @apache-royale/royale-js -g

After global installation, the following compiler tools will be available for you to use: mxmlc, compc, asjsc, asjscompc, asnodec, and externc.

Usage:

mxmlc <path to main.mxml file>
asjsc <path to main.as file>