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/12/26 17:24:08 UTC
[royale-docs] branch master updated: adding some on styling
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 b03cf4c adding some on styling
b03cf4c is described below
commit b03cf4c704e81d4d4c36e4d388f171ad3692b656
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Dec 26 18:23:59 2019 +0100
adding some on styling
---
features/styling.md | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 52 insertions(+), 2 deletions(-)
diff --git a/features/styling.md b/features/styling.md
index 960fd30..e845828 100644
--- a/features/styling.md
+++ b/features/styling.md
@@ -16,10 +16,60 @@
layout: docpage
title: Styling
-description: Styling
+description: Customizing the Look and Feel of you application
permalink: /features/styling
---
# Styling
-*information coming soon.*
\ No newline at end of file
+Customizing the Look and Feel of you application
+
+Apache Royale can plug different style classes that can manage diferent levels of styling features. Usually a Royale application will compose a Style class at Application bead level like this:
+
+```mxml
+<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/royale/basic">
+ ...
+ <j:valuesImpl>
+ <js:SimpleCSSValuesImpl />
+ </j:valuesImpl>
+ ...
+```
+
+## Implementations
+
+- **SimpleCSSValuesImpl**: The SimpleCSSValuesImpl class implements a minimal set of CSS lookup rules that is sufficient for most applications and is easily implemented for SWFs. It does not support attribute selectors or descendant selectors or id selectors. It will filter on a custom `-royale-swf` media query but not other media queries. It can be replaced with other implementations that handle more complex selector lookups.
+
+## Usign Styles
+
+- **SimpleCSSStyles**: Brings simple styles to Royale.
+
+```mxml
+<js:VContainer id="vb" width="100%" height="100%">
+ <js:style>
+ <js:SimpleCSSStyles paddingLeft="6" paddingTop="4" paddingRight="8" paddingBottom="4"/>
+ </js:style>
+</js:VContainer>
+```
+
+- **SimpleCSSStylesWithFlex**: Tries to support Flex styling properties.
+
+```mxml
+<js:PanelView>
+ <js:titleBar>
+ <js:TitleBar height="20">
+ <js:style>
+ <js:SimpleCSSStylesWithFlex backgroundColor="0xA65904" />
+ </js:style>
+ </js:TitleBar>
+ </js:titleBar>
+</js:PanelView>
+```
+
+## Themes
+
+In Apache Royale, a theme is a predefined CSS file (and optionally a other assets like images) that holds the definitions of each component, so adding a theme to your application or replace the existing one will make your entire application change all visuals like colors, fonts and drawings that make you components and containers looks in a certain way.
+
+In [Jewel](component-sets/jewel) UI Set styling and themeing is one of the key concepts, you can learn more about it here:
+
+- [Jewel Themes](component-sets/jewel/jewel-themes)
\ No newline at end of file