Themes and styles
Themes
All html entities with the exception of the HTML5 canvas element, are visually defined by CSS (cascading style sheet) styles. In short a stylesheet is a collection of individual styles (hence the word “sheet” as in a sheet of notes), where each style is a list of pre-defined attributes. All TW3Customcontrol decendants have sub objects which wraps the basic styles:
- Border property (TW3Borders)
- Background property (TW3ControlBackground)
- Font property (TW3ControlFont)
- Color property (TColor type)
- Opacity property (Integer type, alpha blending)
- BorderRadius property (Integer type, round edges)
But if you want a more dedicated look you are best served by writing your own style. As mentioned above a style is, simply put, a way to pre-define visual aspects of a control. A very simple style could be like this:
[sourcecode language=”css”]
.TMyButton {
/* red font color */
color: #FF0000;
/* black background color */
background-color: #000000;
/* Font: the browser will try from left to right in the list */
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
[/sourcecode]
If you look at some of the more advanced CSS examples on the internet, like the stylesheet files that ship with native javascript frameworks like JQTouch – you can easily get the impression that this is really, really complex and hard to understand. But the complexity that haunt packages like JQTouch is largely due to the fact that javascript doesnt support code classes at all. In fact, vanilla javascript support very few of the features you get from smart mobile studio. The reason we can provide advanced things like classes, inheritance, interfaces and closures – is because we have sculpted these features in javascript itself.
Since we take care of behavior through our code and not through complex css condition mapping (also known as CSS selectors), we are left with the bare minimum when it comes to CSS styling. Smart has a clever style system which is extremely simple but effective. Whatever the name of your class is – that is the name of the style it will adopt. So if you create a new visual control and call it TMyButton – when that control is created it will automatically use the style “TMyButton” from the stylesheet (note: it expects this style to be defined in your project’s “app.css” file).
If you want to override this behavior you can achieve this by:
- Alter the styleclass property
- Override the method StyleTagObject() and manually alter the styles
Rolling your own themes
Smart ships with a stylesheet designed to look like iOS. Whenever you create a new project this file is duplicated and inserted into your project as “app.css”. If you have some experience with CSS you can modify the stylesheet to your own preference. When you are done editing it, simply copy the new stylesheet as a new file into the themes folder (stored under “c:/appdata/optimale systemer as/smart mobile studio/rtl/themes”) you can then select this as a project theme for other projects. The theme can either be selected when you create a new project – or altered at any time in the project options dialog.
Project options theme selection