Differences
This shows you the differences between two versions of the page.
|
tutorial:css [2020/04/16 10:56] |
tutorial:css [2020/04/16 10:56] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | <WRAP adihi><html><center></html>CSS Themes can be defined for styling your application..<html></center></html> | ||
| + | \\ | ||
| + | The visual appearance of your Adichatz application can be style via CSS files as for HTML site. | ||
| + | |||
| + | * Each CSS file corresponds to a theme. | ||
| + | * Theme can be chosen thru preferences menu. | ||
| + | * Mainly colors and fonts are defined. | ||
| + | | ||
| + | </WRAP> | ||
| + | |||
| + | {{gallery>css?160x160&lightbox&showtitle}} | ||
| + | ==== Default theme declaration ==== | ||
| + | Default css setting is managed thru **org.adichatz.css.theme** plugin. | ||
| + | |||
| + | <sxh xml; first-line: 1; highlight: [21-23]; title: excerpt from 'platform:/plugin/org.adichatz.css.theme/plugin.xml'.> | ||
| + | <?xml version="1.0" encoding="UTF-8"?> | ||
| + | <?eclipse version="3.4"?> | ||
| + | <plugin> | ||
| + | <!-- ************************ --> | ||
| + | <!-- * W O R K B E N C H * --> | ||
| + | <!-- ************************ --> | ||
| + | <extension id="org.adichatz.css.theme.model.extension" point="org.eclipse.e4.workbench.model"> | ||
| + | <processor beforefragment="false" class="org.adichatz.css.theme.ThemeProcessor"/> | ||
| + | </extension> | ||
| + | |||
| + | <!-- ************************************************ --> | ||
| + | <!-- * A D I C H A T Z - T H E M E - S C H E M A * --> | ||
| + | <!-- ************************************************ --> | ||
| + | <extension-point id="org.adichatz.css.theme" name="%extension-point.adichatz.themes.name" schema="resources/schema/org.adichatz.css.theme.exsd"/> | ||
| + | |||
| + | |||
| + | <!-- ******************* --> | ||
| + | <!-- * T H E M E S * --> | ||
| + | <!-- ******************* --> | ||
| + | <extension point="org.adichatz.css.theme"> | ||
| + | <theme basestylesheeturi="resources/css/blue-win.css" id="org.adichatz.css.theme.blue.win" os="win32" label="%adichatz.theme.blue.win"/> | ||
| + | <theme basestylesheeturi="resources/css/dark-win.css" id="org.adichatz.css.theme.dark.win" os="win32" label="%adichatz.theme.dark.win"/> | ||
| + | <theme basestylesheeturi="resources/css/red-win.css" id="org.adichatz.css.theme.red.win" os="win32" label="%adichatz.theme.red.win"/> | ||
| + | </extension> | ||
| + | ... | ||
| + | </plugin> | ||
| + | </sxh>\\ | ||
| + | By default 3 CSS Stylesheets are defined: blue, dark or red. | ||
| + | All default values for css are stored in file described by <wrap adicode>basestylesheeturi</wrap> items.\\ \\ | ||
| + | ==== Override Theme declaration in plugin.xml file ==== | ||
| + | Developers can declare new theme by declaring a new css stylesheet for a new **theme id**. \\ | ||
| + | They can also, either override default values or add values by declaring new stylesheet with same **theme id** than those defined in **org.adichatz.css.theme** plugin.\\ | ||
| + | Themes are declared in the **plugin.xml** file as shown below. | ||
| + | |||
| + | <sxh xml; first-line: 1; highlight: [16-18]; title: 'platform:/plugin/myproject/plugin.xml' file.> | ||
| + | <?xml version="1.0" encoding="UTF-8"?> | ||
| + | <?eclipse version="3.4"?> | ||
| + | <plugin> | ||
| + | <extension id="product" point="org.eclipse.core.runtime.products"> | ||
| + | <product application="org.eclipse.e4.ui.workbench.swt.E4Application" name="myproject"> | ||
| + | <property name="appName" value="myproject"/> | ||
| + | <property name="applicationXMI" value="myproject/Application.e4xmi"/> | ||
| + | <property name="startupProgressRect" value="5,275,445,15"/> | ||
| + | </product> | ||
| + | </extension> | ||
| + | |||
| + | <!-- ***************** --> | ||
| + | <!-- * T H E M E * --> | ||
| + | <!-- ***************** --> | ||
| + | <extension point="org.adichatz.css.theme"> | ||
| + | <theme id="org.adichatz.css.theme.blue.win" basestylesheeturi="resources/css/blue-win.css" label="%adichatz.theme.blue.win" os="win32"/> | ||
| + | <theme id="org.adichatz.css.theme.dark.win" basestylesheeturi="resources/css/dark-win.css" label="%adichatz.theme.dark.win" os="win32"/> | ||
| + | <theme id="org.adichatz.css.theme.red.win" basestylesheeturi="resources/css/red-win.css" label="%adichatz.theme.red.win" os="win32"/> | ||
| + | </extension> | ||
| + | </plugin> | ||
| + | </sxh>\\ | ||
| + | <WRAP indic><wrap adititle>Remarks</wrap>:\\ | ||
| + | Definitive css styles will be the result of merging of stylesheets defined in **org.adichatz.css.theme** plugin and the new stylesheets defined above. | ||
| + | |< 100% 10em - >| | ||
| + | ^ <html><small></html>Lines 16-18<html></small></html>:|@#eff5fb:For each style, an **Id**, a **URI** and a **Label** must be define. The **Label** is defined in <html><b>plugin://org.adichatz.css.theme/plugin.properties</b></html> file for localization cases (see line 11).| | ||
| + | </WRAP>\\ | ||
| + | |||
| + | ==== CSS File example ==== | ||
| + | **CSS** (Cascade StyleSheet)is a language that describes styles, originally for HTML document whose usage is extended to other softwares.\\ | ||
| + | Syntax is presented [[https://www.w3schools.com/css/|here]]. | ||
| + | <sxh css; first-line: 1; highlight: [40,44,49,50,51,52,53,54,55]; title: excerpt from 'blue-win.css.xml' file.> | ||
| + | /* ##################################### Adichatz Styles ##################################### */ | ||
| + | |||
| + | #adichatz-table-stripe-even { | ||
| + | background-color: #FAFAFA; | ||
| + | } | ||
| + | |||
| + | #adichatz-table-stripe-odd { | ||
| + | background-color: #C0DEFC; | ||
| + | } | ||
| + | |||
| + | |||
| + | #adichatz-emphasize { | ||
| + | background-color: #A0A0A0; | ||
| + | color: #EEEEEE; | ||
| + | font-family: "Times New Roman", Times, serif; | ||
| + | font-size: 12px; | ||
| + | font-style: oblique; | ||
| + | font-weight: bold; | ||
| + | font-variant: small-caps; | ||
| + | } | ||
| + | |||
| + | ... | ||
| + | |||
| + | </sxh>\\ | ||
| + | <WRAP indic><wrap adititle>Remarks</wrap>:\\ | ||
| + | |< 100% 10em - >| | ||
| + | ^ <html><small></html>Lines 40<html></small></html>:|@#eff5fb:Sets first alternative background color for a row of a table or a grid.| | ||
| + | ^ <html><small></html>Lines 44<html></small></html>:|@#eff5fb:Sets second alternative background color for a row of a table or a grid.| | ||
| + | ^ <html><small></html>Lines 49-55<html></small></html>:|@#eff5fb:Defines Background and foreground colors and font for a specific **selector** which can be used in programs.| | ||
| + | </WRAP>\\ | ||
| + | |||
| + | ==== CSS usage in axml file ==== | ||
| + | |||
| + | See below an example which uses properties of <wrap adicode>#adichatz-emphasize</wrap> selector to change style of a <wrap adicode>description</wrap> field. | ||
| + | <sxh xml; first-line: 10; highlight: [13,14,15]; title: excerpt from 'FilmDI.axml' file.> | ||
| + | <formattedText editPattern="######" format="Short" property="filmId" enabled="false" id="filmId"/> | ||
| + | <text textLimit="255" property="title" mandatory="true" id="title"/> | ||
| + | <text layoutData="span 3" textLimit="255" property="description" id="description" | ||
| + | background="#CSSCOLOR(#adichatz-emphasize)" | ||
| + | foreground="#CSSCOLOR(#adichatz-emphasize)" | ||
| + | font="#CSSFONT(#adichatz-emphasize)"/> | ||
| + | <composite layoutData="newline, grow, push, span 4" id="bottomComposite"> | ||
| + | </sxh>\\ | ||
| + | <WRAP indic><wrap adititle>Remarks</wrap>:\\ | ||
| + | |< 100% 10em - >| | ||
| + | ^ <html><small></html>Lines 13<html></small></html>:|@#eff5fb:Background color of field '<wrap adicode>description</wrap>' is the color defined by <wrap adicode>background-color</wrap> property of the <wrap adicode>'#adichatz-emphasize'</wrap> selector.| | ||
| + | ^ <html><small></html>Lines 14<html></small></html>:|@#eff5fb:Foreground color of field '<wrap adicode>description</wrap>' is the color defined by <wrap adicode>color</wrap> property of the <wrap adicode>'#adichatz-emphasize'</wrap> selector.| | ||
| + | ^ <html><small></html>Lines 15<html></small></html>:|@#eff5fb:Font of field '<wrap adicode>description</wrap>' is the font defined in the <wrap adicode>'#adichatz-emphasize'</wrap> selector.| | ||
| + | </WRAP>\\ | ||
| + | |||
| + | == Result == | ||
| + | <columns 100% l 550px middle> | ||
| + | {{:tutorial:css:filmdi_css.jpg?550 |Visualization of **css** effect on the **description** field.}} | ||
| + | <newcolumn left> | ||
| + | |||
| + | Aspect of **description** field changed | ||
| + | * Background color is <wrap adicode>dark gray</wrap>. | ||
| + | * Foreground color is <wrap adicode>light gray</wrap>. | ||
| + | * Font is <wrap adicode>"Times New Roman", Times, serif, 12px, Oblique, bold, small-caps</wrap>. | ||
| + | </columns> | ||