Monthly Archives: March 2008

XIML sites – skins for flickr, youtube, wordpress

We are continuing our skin creating initiative.

At the moment you can see skins for

flickr photoset:
http://www.ximl.com/site/flickr_api_demo

youtube feed:
http://www.ximl.com/site/youtube_api_demo

Word Press skins:
http://www.ximl.com/site/wp,
http://www.ximl.com/site/wp_skin3

If you would like to see how (very easy) it is to create such skins, have a look at the source code for all this sites:

flickr photoset:
configuration XIML -
http://www.ximl.com/sites/flickr_api_demo/conf.xml

youtube feed:
configuration XIML -
http://www.ximl.com/sites/youtube_api_demo/conf.xml

Word Press skins:
configuration XIML -
http://www.ximl.com/sites/wp/conf.xml,
configuration XIML -
http://www.ximl.com/sites/wp_skin3/conf.xml

XIML – functionality – gradient color

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

XIML – functionality – page closing time

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
configurationhttp://ximl.com/sites/exanim/conf.xml

XIML – functionality – advanced opening and closing animation

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>

XIML – functionality – more elements display attributes

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 – functionality – conditional elements display

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>