This is an automated email from the ASF dual-hosted git repository.
andreww 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 cbabb4e Update mxml.md
cbabb4e is described below
commit cbabb4ed260232bf6b58faab94f960d34428c7c3
Author: Andrew Wetmore <and...@cottage14.com>
AuthorDate: Sat Apr 25 14:38:58 2020 -0300
Update mxml.md
Not done yet
---
features/mxml.md | 34 ++++++++++++++++++++++++++++------
1 file changed, 28 insertions(+), 6 deletions(-)
diff --git a/features/mxml.md b/features/mxml.md
index 0cf0f02..1d7f0e7 100644
--- a/features/mxml.md
+++ b/features/mxml.md
@@ -26,7 +26,29 @@ The declarative XML-based user interface markup language
MXML is an XML-based language introduced in 2004 by Macromedia. In Royale you
use it to lay out user-interface components. You can create an application in
Royale using only [ActionScript](features/as3), but it takes a lot more work.
-Most Royale applications have an MXML file as the main file in the app. It
provides the structure of the application. A simple main MXML file might look
like this:
+Most Royale applications have an MXML file as the main file. It provides the
structure of the application. The main MXML file from our very simple <a
href="https://apache.github.io/royale-docs/get-started/hello-world";
target="_blank">hello world example</a> looks a bit like this:
+
+```
+<?xml version="1.0" encoding="utf-8"?>
+
+</--
+ A comments field that could include a copyright statement, license notice,
author notice,
+ a statement of the purpose of the file, and
+ other information useful for future file maintenance.
+-->
+
+<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>
+```
+
+You also build components that you might incorporate into an application using
an MXML file. A component with a card layout to display a set of clickable
buttons might look like this:
```
<?xml version="1.0" encoding="utf-8"?>
@@ -63,7 +85,7 @@ Most Royale applications have an MXML file as the main file
in the app. It provi
## What goes where ##
-The more complex the application is, the more things the main MXML file needs
to be able to support and do. Typically, a developer organizes the file so it
is easy to locate things in it. Some elements must be inside certain tags, and
for others you have a lot of flexibility. However, if you are working in a
team, it is good to have an agreement about what goes where so nobody wastes
time or adds in code that already exists somewhere else in the file.
+The more complex the application is, the more things the main MXML file needs
to be able to support and do. Typically, a developer organizes the file so it
is easy to locate things in it. Some elements must be inside certain tags, and
for others you have a lot of flexibility. However, if you are working in a
team, it is good to have an agreement about what goes where so nobody wastes
time or tries to add code that already exists somewhere else in the file.
### What your file _must_ have ###
@@ -75,17 +97,17 @@ Your main MXML file has two essential elements:
- **The encoding**: this tells the compiler what text encoding to use to
translate the bits of code into letters and numbers to display in the UI. The
default is `utf-8`, but some applications use different encodings that suit
their specific needs.
-**The main tag**: This tag includes everything else on the page. For a full
application, it usually starts `<js:Application...` and ends as the last line
of the file: `</js:Application>`. In the example above, which is for a module
that could be included in a larger application, the main tag defines a group:
`<j:Group...` and closes at the end of the file: `</J:Group>`.
+**The main tag**: This tag includes everything else on the page. For a full
application, it usually starts `<js:Application...` and ends as the last line
of the file: `</js:Application>`. In the component example above for a module
that could be included in a larger application, the main tag defines a group:
`<j:Group...` and closes at the end of the file: `</:Group>`.
The main tag's **attributes** are very important for configuring and launching
the application. The attributes can include:
- - the page's name, which may appear in a header bar or in metadata the
browser displays.
- - a declaration of **namespaces**. These are the location of resources you
may want to use in the app. Declaring their namespaces means you can deploy a
control, container, or some other neat thing from that namespace without much
struggle. In the example above, because we declare the
`xmlns:j="library://ns.apache.org/royale/jewel` in the main tag, we can later
deploy buttons from that namespace (like `<j:Button text="Apache"/>`) very
simply.
+ - the app or component's name, which may appear in a header bar or in
metadata the browser displays.
+ - a declaration of **namespaces**. These are the location of resources you
may want to use in the app. Declaring namespaces means you can deploy a
control, container, or some other neat thing from that namespace without much
struggle. In the component example above, because we declare the
`xmlns:j="library://ns.apache.org/royale/jewel` in the main tag, we can later
deploy buttons from that namespace (like `<j:Button text="Apache"/>`) very
simply, using just "j" instead of the full URL [...]
- simple property values like the width and height of the app or module.
- if the app or module implements or inherits from some other app or module.
- what should happen as soon as the app is ready (something like
`initialize="addEventListener('dataReady',
dataReadyHandler);configurator.send()"`)
-You write what this file does, how it does it, and what the user sees as a
result, after this main tag and before its closing tag at the end of the file.
See the "What your file _may_ have" section, below.
+You write what this file does, how it does it, and what the user sees as a
result, inside this main tag, after it opens and before its closing tag at the
end of the file. See the "What your file _may_ have" section, below.
### What your file _should_ have ###
