Widget Style

Style

Most widgets use the Style tag. Not all of the Style attributes are used within all widgets. The Style is responsible for the colour of that widget, its border etc.

The attributes available in the Style tag are the following:

Attribute	Type	Description
Colour	String	This is the colour of the widget. The colour should be the hex value i.e white = "#FFFFFF"
borderW	Integer	This is the border width in pixels. For a border width of 1px this will be equal to 1.
borderColour	String	This is the colour of the border. The could should be the hex value i.e black ="#000000"
rounded	Boolean	This is set to true if the widget has rounded corners. If this is set to false the widget will have square corners.
roundedAngle	Integer	This is only used if "rounded" is set to true. This is the value of corner angle, by default this is set to 5.
transparency	Integer	This is how transparent the widget is. The transparency range is from 0 to 255. The value of -1 means that there is no transparency so the widget is solid. The default value is -1.
gradient	Gradient	This is the gradient colour of the widget. This will override the colour attribute.

An example of a Style within XML is:

<Style>
    <Colour>#99CCFF</Colour>
    <BorderW>1</BorderW>
    <BorderColour>#000000</BorderColour>
    <Rounded>True</Rounded>
    <Transparency>100</Transparency>
</Style>

The same example in JavaScript is:

var style = new mm.WidgetStyle();
style.colour = "#99CCFF";
style.borderW = 1;
style.borderColour = "#000000";
style.rounded = true;
style.transparency = 100;

A Fragment widget using this Style is displayed as:

The Gradient Tag has the following attributes:

Attribute	Type	Description
startX	Integer	This is the x pixel position of the start of the gradient within the widget.
startY	Integer	This is the y pixel position of the start of the gradient within the widget.
endX	Integer	This is the x pixel position of the end of the gradient within the widget.
endY	Integer	This is the y pixel position of the end of the gradient within the widget.
colours	Array of GradientColour	These are the colours used by the gradient.

The GradienColour Tag has the following attributes:

Attribute	Type	Description
pos	Integer	Position of the colour within the array.
colour	String	Colour to be used, this is a hex colour i.e black = "#000000"

An example of a style using gradients in XML is:

<Style>
    <Colour>#000000</Colour>
    <Transparency>100</Transparency>
    <Gradient>
        <Colours>
            <Colour pos="0">#DF01D7</Colour>
            <Colour pos="1">#F7FE2E</Colour>
        </Colours>
        <StartX>2</StartX>
        <StartY>2</StartY>
        <EndX>200</EndX>
        <EndY>200</EndY>
    </Gradient>
</Style>

The same example in JavaScript is:

// INSTANTIATE STYLE
var style = new mm.WidgetStyle();
style.colour = "#000000";
style.transparency = 100;
// INSTANTIATE GRADIENT
style.gradient = new mm.Gradient();
style.gradient.startX = 2;
style.gradient.startY = 2;
style.gradient.endX = 200;
style.gradient.endY = 200;
// BUILD THE COLOURS
style.gradient.colours = new Array();
var colour1 = new mm.GradientColour();
colour1.pos = 0;
colour1.colour = "#DF01D7";
style.gradient.colours.push(colour1);
var colour2 = new mm.GradientColour();
colour2.pos = 1;
colour2.colour = "#F7FE2E";
style.gradient.colours.push(colour2);

This example used on a Fragment is displayed as: