You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2019/08/31 06:54:14 UTC
[royale-docs] branch master updated: fix some broken links and
update formatting in some pages (first pass)
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git
The following commit(s) were added to refs/heads/master by this push:
new ed6011f fix some broken links and update formatting in some pages (first pass)
ed6011f is described below
commit ed6011fd320d4bd7334c3ce32bb7a787f9a209d7
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Aug 31 08:54:07 2019 +0200
fix some broken links and update formatting in some pages (first pass)
---
create-an-application/application-structure.md | 2 +-
create-an-application/application-tutorial/build.md | 17 ++++++++---------
create-an-application/application-tutorial/data.md | 17 +++++++++--------
create-an-application/application-tutorial/main.md | 5 ++---
.../application-tutorial/production.md | 4 ++--
create-an-application/application-tutorial/view.md | 16 +++++++++-------
.../migrate-an-existing-app/migrate-from-flex.md | 16 +++++-----------
get-started.md | 8 ++++----
get-started/development-tools.md | 4 ++--
9 files changed, 42 insertions(+), 47 deletions(-)
diff --git a/create-an-application/application-structure.md b/create-an-application/application-structure.md
index 379b151..144b46b 100644
--- a/create-an-application/application-structure.md
+++ b/create-an-application/application-structure.md
@@ -26,7 +26,7 @@ There are multiple popular ways of dividing an Application into coherent and reu
Whatever you decide for how many files you will have, another thing to keep in mind is that Royale can produce different kinds of output, like SWFs for Adobe FlashPlayer or Adobe AIR as well as HTML/JS/CSS for browsers and Apache Cordova applications. So, the recommended practice is to create a folder for your project files and a set of subfolders within it. The Royale compiler detects certain common folder patterns and automatically chooses where to put output folders, although you can [...]
-If you are using an [IDE]get-started/development-tools.html) that supports Royale, it will create the standard folder structure for you when you create a Royale project. If you are working outside of an IDE, and perhaps using command-line instructions to compile your code, here is how to structure your project.
+If you are using an [IDE](get-started/development-tools.html) that supports Royale, it will create the standard folder structure for you when you create a Royale project. If you are working outside of an IDE, and perhaps using command-line instructions to compile your code, here is how to structure your project.
Let's say you are creating a project called MyFirstRoyaleApp. Create a MyFirstRoyaleApp folder and in it create a folder named "src". Put your source code in there. If you do that, the compiler will put the output in a "bin" folder that it creates.
diff --git a/create-an-application/application-tutorial/build.md b/create-an-application/application-tutorial/build.md
index d9f7f6c..38e897b 100644
--- a/create-an-application/application-tutorial/build.md
+++ b/create-an-application/application-tutorial/build.md
@@ -16,15 +16,18 @@
layout: docpage
title: Build the application
+description: building the application
---
# Build the application
+building the application
+
In many other HTML/JS/CSS development models, you write the JS and then just view it in the browser. Royale uses a compiler to convert your MXML and ActionScript code into HTML/JS/CSS. Why? Because there is a philosophy that the sooner you catch a bug, the less expensive it is to fix it. The compiler scans your source code to make sure that it makes sense. The compiler checks that there aren't typos in property names, that if you are expecting a String you'll probably get one, and more.
The main MXML file should now look like this:
-```XML
+```mxml
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:local="*"
xmlns:js="library://ns.apache.org/royale/express"
@@ -112,7 +115,7 @@ This simple example will look fine if we just set the width and height of the Da
The final code should look like this: (you can download it from [here](https://github.com/apache/royale-asjs/blob/develop/examples/express/GitHubCommitLogViewer/src/main/royale/GitHubCommitLogViewer.mxml).)
-```XML
+```mxml
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:local="*"
xmlns:js="library://ns.apache.org/royale/express"
@@ -191,17 +194,13 @@ initialize="addEventListener('dataReady', dataReadyHandler);configurator.send()"
</js:Application>
```
-Since we are interested in JS output, if you're using an [IDE]get-started/development-tools.html), set that output target in the project before compiling. If you're using command-line scripts, run:
+Since we are interested in JS output, if you're using an [IDE](get-started/development-tools.html), set that output target in the project before compiling. If you're using command-line scripts, run:
-```
- <path to Royale SDK>/royale-asjs/js/bin/mxmlc -debug=true GitHubCommitLogViewer.mxml
-```
+`<path to Royale SDK>/royale-asjs/js/bin/mxmlc -debug=true GitHubCommitLogViewer.mxml`
If you've used NPM to install Royale, you can just run:
-```
- mxmlc -debug=true GitHubCommitLogViewer.mxml
-```
+`mxmlc -debug=true GitHubCommitLogViewer.mxml`
This should compile with one warning. We will ignore that for now and fix it later. Next, let's see the results.
diff --git a/create-an-application/application-tutorial/data.md b/create-an-application/application-tutorial/data.md
index ee97cc0..ffcf1dc 100644
--- a/create-an-application/application-tutorial/data.md
+++ b/create-an-application/application-tutorial/data.md
@@ -26,7 +26,7 @@ For large projects, the model is often built in a separate class and source file
First we create the data structure, in this case an array, to hold the information we get from GitHub:
-```
+```mxml
<fx:Script>
<![CDATA[
public var commits:Array = [];
@@ -36,14 +36,14 @@ First we create the data structure, in this case an array, to hold the informati
It might be nice to not hard-code which repos we use to get the commits so that other projects can use this app. So let's add variables to hold information about the project and repositories we are using:
-```ActionScript
+```as3
public var repos:Array;
public var projectName:String;
```
Next, we need to get the values for these arrays. Let's use a <a href="https://www.json.org/" target="_blank">.json</a> file, called "project.json", to configure which repos to use and the project name. The file contents look like:
-```JSON
+```json
{ "projectName": "Apache Royale",
"repos": [ "apache/royale-asjs", "apache/royale-typedefs", "apache/royale-compiler" ]
}
@@ -52,12 +52,12 @@ You can download this file from [here.](https://github.com/apache/royale-asjs/bl
Now we need to add calls that fetch the .json file and then the information about the commits. We can use HTTPService to get the JSON file:
-```XML
+```mxml
<js:HTTPService id="configurator" url="project.json" complete="setConfig();fetchCommits()" />
```
The method setConfig() sets the data model variables:
-```ActionScript
+```as3
private function setConfig():void
{
repos = configurator.json.repos;
@@ -67,10 +67,11 @@ private function setConfig():void
The method fetchCommits() takes the list of repos and calls a separate instance of HTTPService to get information about the commits:
-```XML
+```mxml
<js:HTTPService id="commitsService" />
```
-```ActionScript
+
+```as3
import org.apache.royale.events.Event;
private var currentIndex:int = 0;
@@ -106,7 +107,7 @@ private function gotCommits(event:Event):void
And, of course, we have to tell the service to go fetch the configuration file, so we add an "initialize" event handler to the Application tag to have the HTTPService send the request for the JSON file once the application is ready to receive the response.
-```
+```mxml
initialize="configurator.send()"
```
diff --git a/create-an-application/application-tutorial/main.md b/create-an-application/application-tutorial/main.md
index b259415..435adb5 100644
--- a/create-an-application/application-tutorial/main.md
+++ b/create-an-application/application-tutorial/main.md
@@ -24,7 +24,7 @@ This application uses an MXML file as its main file.
The file starts with:
-```XML
+```mxml
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:local="*"
xmlns:js="library://ns.apache.org/royale/express"
@@ -32,8 +32,7 @@ The file starts with:
```
The line:
-
-```
+mxml
xmlns:js="library://ns.apache.org/royale/express"
```
diff --git a/create-an-application/application-tutorial/production.md b/create-an-application/application-tutorial/production.md
index 86d547e..d38b232 100644
--- a/create-an-application/application-tutorial/production.md
+++ b/create-an-application/application-tutorial/production.md
@@ -16,12 +16,12 @@
layout: docpage
title: Making a production version
-description:
+description: Releasing an application for consumers
---
# Making a production version
-releasing an application for consumers
+Releasing an application for consumers
The version in the "js-debug" folder is considered a "debug version" or "development version". If you looked at all of the files in the folder or copied them to a web server, you probably noticed there are quite a few, and that each takes time to load.
diff --git a/create-an-application/application-tutorial/view.md b/create-an-application/application-tutorial/view.md
index ca468c7..e43f2cd 100644
--- a/create-an-application/application-tutorial/view.md
+++ b/create-an-application/application-tutorial/view.md
@@ -24,7 +24,7 @@ In an MVC application the View contains the user interface elements that display
The main or initial view of an application is identified as its "initialView" property. We want our user interface elements to appear vertically so we use VView as the view:
-```XML
+```mxml
<js:initialView>
<js:VView>
</js:VView>
@@ -32,14 +32,14 @@ The main or initial view of an application is identified as its "initialView" pr
```
Inside the VView tag we add the DataGrid
-```XML
+```mxml
<js:DataGrid id="dg">
</js:DataGrid>
```
We want to display the date of the commit, who made the commit, and the commit message, each in their own column on each row of the DataGrid. So inside the DataGrid, we add:
-```XML
+```mxml
<js:columns>
<js:DataGridColumn label="Date" dataField="date"/>
<js:DataGridColumn label="Author" dataField="author"/>
@@ -49,13 +49,13 @@ We want to display the date of the commit, who made the commit, and the commit m
Oh wait, we should have a label that displays the project name above the DataGrid, so before DataGrid add:
-```XML
+```mxml
<js:Label text="{projectName} Commits Log"/>
```
Notice how the text of the label uses the projectName variable in the Model by wrapping the variable name in curly braces "{}". In Royale, this is known as Data Binding. When the compiler sees curly braces in MXML attribute values, it generates code that sets the destination property (in this case, the Label's "text" property) to the value of the expression in the curly braces and also adds code that detects changes to that property and updates the destination property if the source val [...]
-```ActionScript
+```as3
myLabel.text = projectName;
```
@@ -65,7 +65,9 @@ See more about what this powerful feature can do for you on this page: [Data bin
Also, a commit message might be too long to read in a row of a DataGrid so we will add a place to display the longer message of a selected commit.
+```mxml
<js:MultilineLabel text="{commits[dg.selectedIndex].message}" />
+```
Notice how with data binding, we've written very little "code" to connect the DataGrid to the MultilineLabel.
@@ -75,7 +77,7 @@ It is possible to create something other than an Array that will dispatch change
In the script block we add a handler for the dataReady event.
-```ActionScript
+```as3
import org.apache.royale.collections.ArrayList;
private function dataReadyHandler(event:Event):void
@@ -86,7 +88,7 @@ private function dataReadyHandler(event:Event):void
```
In the initialize handler, we add a listener for the dataReady event:
-```ActionScript
+```as3
addEventListener('dataReady', dataReadyHandler);
```
diff --git a/create-an-application/migrate-an-existing-app/migrate-from-flex.md b/create-an-application/migrate-an-existing-app/migrate-from-flex.md
index 820088c..7c04fe1 100644
--- a/create-an-application/migrate-an-existing-app/migrate-from-flex.md
+++ b/create-an-application/migrate-an-existing-app/migrate-from-flex.md
@@ -39,7 +39,7 @@ Some popular Flash APIs have been added to the Royale emulation of UIComponent,
Another category of changes is **namespaces**. In every MXML file you probably have one or both of:
-```
+```mxml
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
@@ -47,7 +47,7 @@ xmlns:mx="library://ns.adobe.com/flex/mx"
These need to change to:
-```
+```mxml
xmlns:s="library://ns.apache.org/royale/spark"
xmlns:mx="library://ns.apache.org/royale/mx"
@@ -63,9 +63,7 @@ Yet another category of changes is for **non-Flex SWCs**. If you used third-part
The Royale compiler supports every options the Flex compiler supports. There are also some new options for controlling JavaScript output. Royale has an Ant task just as Flex does. It supports all the options that the Flex Ant task supports, plus some new options for controlling JavaScript output. You should be able to use the same options on the Royale compiler that you used when compiling your Flex app. The only thing you must add is the compiler option
-```
-+configname=flex
-```
+`+configname=flex`
Then, assuming you aren't using any third-party libraries, your application should compile.
@@ -86,15 +84,11 @@ If you get a compile that has no errors, you can try running it. As mentioned in
If you use XML or Proxy in your application you will get lots of errors if you are not careful about strong typing. In your compiled Flex application, Flash knows the type of the instance and thus knows how to fetch a property for it. The Royale JavaScript runtimes don't know instance types, so as soon as your XML or Proxy instance is seen as a regular Object, things can go wrong. One place this is likely to happen is in ItemRenderers. They have a data property of type Object, so any cod [...]
-```
-data.property
-```
+`data.property`
will not work if the data is XML or Proxy. Change this code so it is strongly-typed as, in the case of XML,
-```
-(data as XML).property
-```
+`(data as XML).property`
Once the debuggable version works, it is time to try the production version. If it doesn't work, check the JavaScript console for exceptions and errors and try to resolve them. Most errors, or just not getting the right results, will be due to variable renaming as described in the tutorial. Make sure you have resolved any public var warnings correctly. If you suppressed the warning but shouldn't have, that could cause a problem.
diff --git a/get-started.md b/get-started.md
index 869154d..a16fc48 100644
--- a/get-started.md
+++ b/get-started.md
@@ -18,7 +18,7 @@ layout: docpage
title: Get Started
---
-# Getting Started
+# Get Started
All you need to know to start developing with Apache Royale
@@ -31,11 +31,11 @@ In Apache Royale you develop your applications using ActionScript 3 (AS3) and MX
## Getting Royale
-[System Requirements]get-started/system-requirements.html) - What kinds of computers and operating systems you can use to develop Royale applications. You can run Royale applications on many more computers, operating systems and even devices such as smartphones and tablets.
+[System Requirements](get-started/system-requirements.html) - What kinds of computers and operating systems you can use to develop Royale applications. You can run Royale applications on many more computers, operating systems and even devices such as smartphones and tablets.
-[Development Tools]get-started/development-tools.html) - You can develop Royale with just the command-line, or you can use scripting/build tools like Apache Ant and Apache Maven, or even use IDEs.
+[Development Tools](get-started/development-tools.html) - You can develop Royale with just the command-line, or you can use scripting/build tools like Apache Ant and Apache Maven, or even use IDEs.
-[Download Royale]get-started/download-royale.html) - How to download and set up Royale.
+[Download Royale](get-started/download-royale.html) - How to download and set up Royale.
## Configuring Royale
diff --git a/get-started/development-tools.md b/get-started/development-tools.md
index 1b14092..73782cb 100644
--- a/get-started/development-tools.md
+++ b/get-started/development-tools.md
@@ -43,9 +43,9 @@ IDEs that support Apache Royale provide getting-started instructions to help you
## Command-line scripts
-To run the compiler, run the js/bin/mxmlc tool in the Royale SDK. The [Download Royale]get-started/download-royale.html) and [Hello World](get-started/hello-world.html) sections provide guidance about how to use the compiler.
+To run the compiler, run the js/bin/mxmlc tool in the Royale SDK. The [Download Royale](get-started/download-royale.html) and [Hello World](get-started/hello-world.html) sections provide guidance about how to use the compiler.
-Royale provides [Royale CLI]get-started/royale-cli.html), a tool to simplify creating and compiling applications for those using <a href="https://www.npmjs.com/" target="_blank">npm</a>.
+Royale provides [Royale CLI](get-started/royale-cli.html), a tool to simplify creating and compiling applications for those using <a href="https://www.npmjs.com/" target="_blank">npm</a>.
## Apache Maven