Blend mode can be applied to any element.

Usage example:

<el elem=”examp_el_set” x=”37%” y=”20″ w=”10%” blendMode=”darken” />

Available blend modes and descriptions:
add Commonly used to create an animated lightening dissolve effect between two images.
alpha Commonly used to apply the transparency of the foreground on the background.
darken Commonly used to superimpose type.
difference Commonly used to create more vibrant colors.
erase Commonly used to cut out (erase) part of the background using the foreground alpha.
hardlight Commonly used to create shading effects.
invert Used to invert the background.
layer Used to force the creation of a temporary buffer for precomposition for a particular movie clip.
lighten Commonly used to superimpose type.
multiply Commonly used to create shadows and depth effects.
normal Used to specify that the pixel values of the blend image override those of the base image.
overlay Commonly used to create shading effects.
screen Commonly used to create highlights and lens flares.
subtract Commonly used to create an animated darkening dissolve effect between two images.

Filters can be applied to any element.

Available filters are : BevelFilter , BlurFilter , DropShadowFilter , GlowFilter

Usage:

BevelFilter:

<el elem=”examp_el_set” x=”38.3%” y=”20″ filters=”true” >
 <filters>
  <f filter_type=”BevelFilter”
   distance=”4″
   angleInDegrees=”45″
   highlightColor=”0xFFFFFF”
   highlightAlpha=”1″
   shadowColor=”0×000000″
   shadowAlpha=”1″
   blurX=”4″
   blurY=”4″
   strength=”1″
   quality=”1″
   type=”inner”
   knockout=”" />
 </filters>
</el>

Parameters

distance:Number [optional] – The offset distance of the bevel, in pixels (floating point). The default value is 4.

angle:Number [optional] – The angle of the bevel, from 0 to 360 degrees. The default value is 45.

highlightColor:Number [optional] – The highlight color of the bevel, 0xRRGGBB. The default value is 0xFFFFFF.

highlightAlpha:Number [optional] – The alpha transparency value of the highlight color. Valid values are 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.

shadowColor:Number [optional] – The shadow color of the bevel, 0xRRGGBB. The default value is 0×000000.

shadowAlpha:Number [optional] – The alpha transparency value of the shadow color. Valid values are 0 to 1. For example, 0.25 sets a transparency value of 25%. The default value is 1.

blurX:Number [optional] – The amount of horizontal blur in pixels. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

blurY:Number [optional] – The amount of vertical blur in pixels. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

strength:Number [optional] – The strength of the imprint or spread. The larger the value, the more color is imprinted and the stronger the contrast between the bevel and the background. Valid values are 0 to 255. The default value is 1.

quality:Number [optional] – The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

type:String [optional] – The type of bevel. Valid values are “inner”, “outer”, and “full”. The default value is “inner”.

knockout:Boolean [optional] – Applies a knockout effect (true), which effectively makes the object’s fill transparent and reveals the background color of the document. The default value is false (no knockout).
———————————

BlurFilter:

<el elem=”examp_el_set” x=”71.6%” y=”20″ filters=”true” >
 <filters>
  <f filter_type=”BlurFilter”
   blurX=”4″
   blurY=”4″
   quality=”1″ />
 </filters>
</el>

Initializes the filter with the specified parameters. The default values create a soft, unfocused image.

Parameters
blurX:Number [optional] – The amount to blur horizontally. Valid values are from 0 to 255 (floating-point value). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

blurY:Number [optional] – The amount to blur vertically. Valid values are from 0 to 255 (floating-point value). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

quality:Number [optional] – The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality and approximates a Gaussian blur.

———————————

DropShadowFilter:

<el elem=”examp_el_set” x=”38.3%” y=”C+20″ filters=”true” >
 <filters>
  <f filter_type=”DropShadowFilter”
   distance=”4″
   angleInDegrees=”45″
   color=”0×000000″
   alpha=”1″
   blurX=”4″
   blurY=”4″
   strength=”1″
   quality=”1″
   inner=”"
   knockout=”"
   hideObject=”" />
 </filters>
</el>

Creates a new DropShadowFilter instance with the specified parameters.

Parameters
distance:Number [optional] – The offset distance for the shadow, in pixels. The default value is 4 (floating point).

angle:Number [optional] – The angle of the shadow, 0 to 360˚ (floating point). The default value is 45.

color:Number [optional] – The color of the shadow, in hexadecimal format 0xRRGGBB. The default value is 0×000000.

alpha:Number [optional] – The alpha transparency value for the shadow color. Valid values are 0 to 1. For example, 0.25 sets a transparency value of 25%. The default value is 1.

blurX:Number [optional] – The amount of horizontal blur. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

blurY:Number [optional] – The amount of vertical blur. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

strength:Number [optional] – The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the shadow and the background. Valid values are 0 to 255. The default is 1.

quality:Number [optional] – The number of times to apply the filter. Valid values are 0 to 15. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

inner:Boolean [optional] – Indicates whether or not the shadow is an inner shadow. A value of true specifies an inner shadow. The default is false, an outer shadow (a shadow around the outer edges of the object).

knockout:Boolean [optional] – Applies a knockout effect (true), which effectively makes the object’s fill transparent and reveals the background color of the document. The default is false (no knockout).

hideObject:Boolean [optional] – Indicates whether or not the object is hidden. A value of true indicates that the object itself is not drawn; only the shadow is visible. The default is false (show the object).

———————————

GlowFilter:

<el elem=”examp_el_set” x=”71.6%” y=”C+20″ filters=”true” >
 <filters>
  <f filter_type=”GlowFilter”
   color=”0xFF0000″
   alpha=”1″
   blurX=”6″
   blurY=”6″
   strength=”2″
   quality=”1″
   inner=”"
   knockout=”" />
 </filters>
</el>

Initializes a new GlowFilter instance with the specified parameters.

Parameters
color:Number [optional] – The color of the glow, in the hexadecimal format 0xRRGGBB. The default value is 0xFF0000.

alpha:Number [optional] – The alpha transparency value for the color. Valid values are 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.

blurX:Number [optional] – The amount of horizontal blur. Valid values are 0 to 255 (floating point). The default value is 6. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

blurY:Number [optional] – The amount of vertical blur. Valid values are 0 to 255 (floating point). The default value is 6. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

strength:Number [optional] – The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 2.

quality:Number [optional] – The number of times to apply the filter. Valid values are 0 to 15. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.

inner:Boolean [optional] – Specifies whether the glow is an inner glow. The value true indicates an inner glow. The default is false, an outer glow (a glow around the outer edges of the object).

knockout:Boolean [optional] – Specifies whether the object has a knockout effect. The value true makes the object’s fill transparent and reveals the background color of the document. The default is false (no knockout effect).

Here is the list of all major datatypes to date with usage examples.
Some older examples may have a bit different attribute, please ignore and use as here.

Datatypes example:

example DX:

<homepage ex_attr=”attr val”>
<ex__data__subxml>sub node text</ex__data__subxml>
  <ex__data>
    <somepath>
      <somepath2 someattr="xpath and attribute text">
        xpath and value text
      </somepath2>
    </somepath>
  </ex__data>
<homepage>

usage in CX:

	datatype=”static” dataval=”actual value”

value hardcoded in CX (text – ”actual value”)

	datatype=”attr” dataattr=”ex_attr”

value located at the attribute of the main tag (text – ”attr val”)

	datatype=” subxml” subname=”ex__data__subxml”

sub xml tag with specified name
(xml tag – <ex__data__subxml>sub node text</ex__data__subxml>)

	datatype=” subxmlval” subname=”ex__data__subxml”

value of sub xml tag with specified name (text – ”sub node text”)

	datatype="xpath" dataxpath="/*/ex__data/somepath/somepath2"

sub xml tag with specified Xpath
(xml tag – <somepath2 someattr=”xpath and attribute text”>xpath and value text</somepath2>)

	datatype="xpathNval" dataxpath="/*/ex__data/somepath/somepath2"

value of sub xml tag with specified Xpath (text – ” xpath and value text”)

	datatype="xpathNattr" dataxpath="/*/ex__data/somepath/somepath2" dataattr="someattr"

value of sub xml tag with specified Xpath (text – ” xpath and attribute text”)

<el          …. … …   datatype="concat”          >
  <datavals>
    <d	datatype=” subxmlval”  subname=”ex__data__subxml”	/>
    <d	datatype=”static”		dataval=” --- :: --- ”		/>
    <d	datatype=”attr”			dataattr=”ex_attr”			/>
  </datavals>
</el>

concatenated values (text – ”sub node text — :: — attr val”)

Element eltype="rect" just been upgraded!

The new functionality includes the ability to specify gradient – changing color.

To use single-colored rectangle, keep using the old format:

<el eltype="rect" x="0" y="0" x2="R" y2="B" r="5"
c="0x006699" a="100" />

For gradient, use:

<el eltype="rect" x="0" y="0" x2="R" y2="B" r="5"
	c1="0x006699" c2="0x003366" dir="90" a="100" />

where:

• c1 – starting color
• c2 – ending color
• dir – direction of gradient (in degrees) – 0 is left to right, 90 – top to bottom, etc

When page has defined closing animation (<clanim> tag) it needs some time for it to execute.

To specify a time for page to close before it disappears, use close_time=”1″ in the page definition (the time in seconds).

For example see http://ximl.com/site/exanim
configuration – http://ximl.com/sites/exanim/conf.xml

We had some animation effects that were executed on the element creation or removal but we hugely extended the possibility by allowing you to much more control over what you can achieve.

Now you can specify what parameter you would like to tween, what is the starting value, ending value, when the tween suppose to start and for how long it should work! And you can specify any number of such commands!!!

To do that, add node <opanim> (for opening animation) and <clanim> (for closing) to any element you would like to apply it to.

for example:

<el eltype="rect" x="100" y="100" w="300" h="200" c="0x456789" a="100" >
	<opanim>
		<ae par="_alpha" fr="0" to="100" st="0" ln="1" />
		<ae par="_xscale" fr="10" to="100" st="2" ln="2" />
		<ae par="_xscale" fr="100" to="10" st="1" ln="1" />
	</opanim>
</el>

We added additional general attributes that could be applied to any element.

• _alpha=”80″ : defines transparency on the entire element (in %)
• _rotation=”30″ : rotates the entire element (in degrees)

We looking forward to see some fancy angled design you’ll come up with.

Our examples are coming soon.

XIML has an option to display (or not) some areas based on content in data file.

The element that used for that is eltype=”if_cond” and it is acting as “elem_group” if displayed or completely ignored otherwise.

We added more conditions recently and at the moment the full list is:

• cond_type=”eq_attr” cond_attr=”lazy” cond_val=”fox” : block displayed if attribute”lazy” of the current data node is “fox”
• cond_type=”ne_attr” cond_attr=”lazy” cond_val=”fox” : block displayed if attribute”lazy” of the current data node is NOT “fox”
• cond_type=”eq_nodeName” cond_val=”fox” : block displayed if node name of the current data node is “fox”
• cond_type=”ne_nodeName” cond_val=”fox” : block displayed if node name of the current data node is NOT “fox”

• cond_type=”isval_node” cond_path=”/*/fox” : block displayed if there is a node exist with XPath “/*/fox” relatively to the current data node
• cond_type=”isnotval_node” cond_path=”/*/fox” : block displayed if there is NO node exist with XPath “/*/fox” relatively to the current data node
• cond_type=”isval_attr” cond_attr=”lazy” : block displayed if attribute”lazy” of the current data node is exist and not empty
• cond_type=”isnotval_attr” cond_attr=”lazy” : block displayed if attribute”lazy” of the current data node is NOT exist or empty

usage example:

<el eltype="if_cond" cond_type="isval_node" cond_path="/*/cx" x="0"
yrel="prevrel+10" w="100%" h="100%">
	<el style="txt_pg_hdr_med" txt="Config"/>
	<el style="txt_pg_code" subname="cx"/>
</el>

Deep linking to internal pages within XIML site is easy to use:
ximl.com/site/{site name}/{page name}
For example:
http://ximl.com/site/ximl_tabs1/tc_ft will go directly to the features page (tc_ft) of site ximl_tabs1.

To link to pages of the main site, use
ximl.com/p/{page name}
For example:
http://ximl.com/p/p_tech_features will go directly to the features page of main site.

To set what page should open on site start, use
<start_page v=”p_tech_about”/> located at /website/config/sys/ in the configuration file.
For example see http://ximl.com/conf.xml

Following elements can have scroll: text, sel_4state, elem_group.
To use it, specify attribute scrl=”yes” in the element.
Then you can use default scroll or fully configure it for your needs.
The default scroll is:

<scroll>
  <conf  scroll_step="50" scroll_step_time="0.3"/> 

  <bg eltype="elem_group"  x="R+3" y="12"  w="7" y2="B-12" >
    <el eltype="bord"  x="0" y="0"  x2="R" y2="B"  c="0xcccccc" a="100" r="0"  t="0.5" />
  </bg> 

  <sld  eltype="el__2state"  x="R+3" y="12"  w="7" y2="B-12" >
    <el>
      <el eltype="rect"  x="0" y="0"  x2="R" y2="B"  c="0x999999" a="100" r="0"  />
    </el>
    <elov>
      <el eltype="rect"  x="0" y="0"  x2="R" y2="B"  c="0x333333" a="100" r="0"  />
    </elov>
  </sld> 

  <bar eltype="elem_group"  x="R+3" y="12"  w="7" y2="B-12" >
    <el eltype="rect"  x="0" y="0"  x2="R" y2="B"  c="0x3333cc" a="0" r="0"  />
  </bar> 

  <btn_up eltype="el__2state"  x="R+3" y="0"  w="7" h="10" >
    <el>
      <el eltype="rect"  x="-2" y="-2"  x2="R+2" y2="B+2"  c="0xcccccc" a="0" r="0" />
      <el eltype="triang"  x1="0" y1="B"  x2="R" y2="B"  x3="C" y3="0"    c="0x999999" a="100" />
    </el>
    <elov>
      <el eltype="rect"  x="-2" y="-2"  x2="R+2" y2="B+2"  c="0xcccccc" a="0" r="0" />
      <el eltype="triang"  x1="0" y1="B"  x2="R" y2="B"  x3="C" y3="0"    c="0x333333" a="100" />
    </elov>
  </btn_up> 

  <btn_down eltype="el__2state" x="R+3" y="B-10" w="7" h="10">
    <el>
      <el eltype="rect"  x="-2" y="-2"  x2="R+2" y2="B+2"  c="0xcccccc" a="0" r="0" />
      <el eltype="triang"  x1="0" y1="0"  x2="R" y2="0"  x3="C" y3="B"    c="0x999999" a="100" />
    </el>
    <elov>
      <el eltype="rect"  x="-2" y="-2"  x2="R+2" y2="B+2"  c="0xcccccc" a="0" r="0" />
      <el eltype="triang"  x1="0" y1="0"  x2="R" y2="0"  x3="C" y3="B"    c="0x333333" a="100" />
    </elov>
  </btn_down>
</scroll>

<conf – scroll configuration (optional). By default, scroll_step is 50 (pixels) for sel_4state, elem_group and 3 (lines) for text. scroll_step_time is 0.3 sec by default.

<bg – graphics, background, etc.

<sld – slider. It will be resized to a required height.

<bar – specifies “operational” area for slider movement.

<btn_up – button for scroll up.

<btn_down – button for scroll down.

It is possible to apply a mask to any element.
It can be useful for creating non-rectangular shapes or prevent other elements to run out its borders.

To use:

• in the element definition add an attribute mask=”true”
• add sub xml to the element :

<el eltype="plugin" x="0" y="0" w="100%" h="100%" size="no" datatype="xml" attr="engurl" mask="true" >
  <mask>
    <el eltype="rect" x="0" y="0" w="100%" h="100%" c="0xcccccc" />
  </mask>
</el>

The element formed in the el/mask/ area will define a mask on the rest of the element its applied to.

For example, see source code at
http://ximl.com/sites/ximl_tabs1/conf.xml

It is possible to define custom elements once and use it through the entire site.
It is possible to use custom elements inside another custom element.
It is possible to use styles inside custom elements.

To define: in the configuration file, in /website/config/sys/elems, define custom element called TopNav_el_nrm

<TopNav_el_nrm eltype="elem_group" x="0" y="0" x2="R" y2="B" >
	<el eltype="rect" x="4" y="0" x2="R-4" y2="B" c="0xdddddd" a="100" />
	<el style="TopNav_txt_nrm" x="20" />
</TopNav_el_nrm>

To use:

<el elem="TopNav_el_nrm" />

As with styles, it is possible to overwrite any attribute when using the custom element.

For example, see source code at
http://ximl.com/sites/ximl_tabs1/conf.xml