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 62f6edb components page update
62f6edb is described below
commit 62f6edbae6d3b94c170af20e3e1c40df47e52d34
Author: Carlos Rovira <[email protected]>
AuthorDate: Sat Aug 24 10:06:21 2019 +0200
components page update
---
user-interface/components.md | 41 ++++++++++++++++++-----------------------
1 file changed, 18 insertions(+), 23 deletions(-)
diff --git a/user-interface/components.md b/user-interface/components.md
index 9677b39..78f0599 100644
--- a/user-interface/components.md
+++ b/user-interface/components.md
@@ -32,34 +32,34 @@ Royale provides a wide range of components to help you
design a user interface t
Developers who have worked in Flex will quickly feel at home with Royale
components, although they will need to pay attention to the ["Pay as you
go"](welcome/features/payg.html) concept that is a Royale hallmark. Components
do well the basic functions associated with their names, but to add features
(for instance, you want to force the text the user enters to lower case), you
need to add the appropriate bead to the strand of the component:
-```
+```as3
<j:TextInput text="Your entry will appear in LOWER case">
- <js:beads>
- <j:LowerCase/>
- </js:beads>
+ <j:beads>
+ <j:LowerCase/>
+ </j:beads>
</j:TextInput>
```
You can [read more about Strands and Beads
here](welcome/features/strands-and-beads.html).
## Component sets
-Royale has a series of component sets, groups of ready-to-use components which
are designed for different purposes.
+Royale has a series of [component sets](component-sets.html), groups of
ready-to-use components which are designed for different purposes.
### Basic component set
-The Basic set complies strictly with the PAYG guidelines and generates the
smallest amount of code so it compiles quickly.
+The [Basic](component-sets/basic.html) set complies strictly with the PAYG
guidelines and generates the smallest amount of code so it compiles quickly.
### Express component set
The Express set is Basic components with lots of Beads packed into them by
default. It is designed for rapid prototyping and proofs-of-concepts and is not
optimized for size and performance. Applications built with the Express
components can still be deployed in production environments if the size and
performance are acceptable, which is often the case.
### Jewel component set
-Jewel is a little less compliant with PAYG so it can provide a great
off-the-shelf look and feel.
+[Jewel](component-sets/jewel.html) is a little less compliant with PAYG so it
can provide a great off-the-shelf look and feel.
-<a href="https://royale.apache.org/tourdejewel/"; target="_blank">Tour de
Jewel</a> provides working examples of Royale components styled in Jewel, with
source code you can copy and paste into your own project.
+[Tour de Jewel](https://royale.apache.org/tourdejewel/){:target='_blank'}
provides working examples of Royale components styled in Jewel, with source
code you can copy and paste into your own project.
### MDL component set
-The MateriaDesignLite set wraps the display concepts related to <a
href="https://en.wikipedia.org/wiki/Material_Design"; target="_blank">Google's
Material Design</a> language.
+The MateriaDesignLite set wraps the display concepts related to [Google's
Material
Design](https://en.wikipedia.org/wiki/Material_Design){:target='_blank'}
language. This library wraps the components of [Material Design
Lite](https://getmdl.io/components/index.html){:target='_blank'} library.
-### MXRoyale/MXSpark component set
+### MXRoyale/MXSpark component sets
This component set seeks to emulate the functions and experience Flex
developers are familiar with.
### Other component sets
@@ -72,26 +72,21 @@ There are several other component sets that are
proofs-of-concept that wrap exis
## Component sets for your application
When you download the Royale SDK to your local computer, you can browse the
component sets in this location:
- royale-asjsframeworks/projects
+ `royale-asjsframeworks/projects`
- For sets that do not have an extensive demonstration suite like Tour de Jewel
for the Jewel set, you can see quickly what components seem to be available.
+ For sets that do not have an extensive demonstration suite like __Tour de
Jewel__ for the __Jewel__ set, you can see quickly what components seem to be
available.
Let's say I then decide I want to use the Jewel component set in my
application. I need to call it (and the Basic component set, as Jewel builds on
some of its elements) in the opening lines of the main file in my project:
- ```
+ ```mxml
<?xml version="1.0" encoding="utf-8"?>
-<!--
<c:MyProjectUsingJewel 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/basic"
- xmlns:c="components.*" sourceCodeUrl="MyProjectUsingJewel.mxml">
- ````
-
-(Note the code example omits the copyright information that normally appears
in a file after the "<?xml..." line.)
+ xmlns:j="library://ns.apache.org/royale/jewel">
+ ```
Let's say I want to insert a multi-line label in my app's UI. I use the Label
component in the "j" namespace I established for Jewel:
- `
+```mxml
<j:Label text="This is a multiline label with more text that wraps if
container has set a width" multiline="true"/>
- `
+```
+
