CSS Themes can be defined for styling your application..
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.

Red theme

CSS resources

CSS usage in FilmDI.axml file

Default theme declaration

Default css setting is managed thru org.adichatz.css.theme plugin.

<?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>

By default 3 CSS Stylesheets are defined: blue, dark or red. All default values for css are stored in file described by basestylesheeturi 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.

<?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>

Remarks:
Definitive css styles will be the result of merging of stylesheets defined in org.adichatz.css.theme plugin and the new stylesheets defined above.

Lines 16-18:	For each style, an Id, a URI and a Label must be define. The Label is defined in plugin://org.adichatz.css.theme/plugin.properties file for localization cases (see line 11).

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 here.

/* ##################################### 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;
}

...

Remarks:

Lines 40:	Sets first alternative background color for a row of a table or a grid.
Lines 44:	Sets second alternative background color for a row of a table or a grid.
Lines 49-55:	Defines Background and foreground colors and font for a specific selector which can be used in programs.

CSS usage in axml file

See below an example which uses properties of #adichatz-emphasize selector to change style of a description field.

        <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">

Remarks:

Lines 13:	Background color of field 'description' is the color defined by background-color property of the '#adichatz-emphasize' selector.
Lines 14:	Foreground color of field 'description' is the color defined by color property of the '#adichatz-emphasize' selector.
Lines 15:	Font of field 'description' is the font defined in the '#adichatz-emphasize' selector.

Result

Aspect of description field changed

Background color is dark gray.
Foreground color is light gray.
Font is “Times New Roman”, Times, serif, 12px, Oblique, bold, small-caps.

2020/04/16 10:56

Table of Contents

Default theme declaration

Override Theme declaration in plugin.xml file

CSS File example

CSS usage in axml file

Result