Archive for the ‘Uncategorized’ Category

Some Style Progress…

Thursday, May 29th, 2008

Old Nifty XML - pretty ugly

<menu id="mainMenu" font="menu.fnt" childlayout="vertical" align="center" valign="center" height="50%">
  <effect>
    <onstartscreen name="hide" length="500" inherit="true" startdelay="1000"/>
    <onstartscreen name="fade" startcolor="#fff0" endcolor="#ffff" length="1000" startdelay="500" inherit="true"/>
    <onendscreen name="fade" startcolor="#ffff" endcolor="#fff0" length="500" inherit="true"/>
  </effect>
  <menuitem id="helloWorld" text="Hello World" align="center">
    <interact onclick="helloWorld()"/>
    <hover width="200%" falloffconstraint="horizontal"/>
    <effect>
      <onhover name="hint" hoverwidth="200%" width="200%" targetelement="hintElement" text="Run the Hello World Example"/>
      <onfocus name="pulsate" hoverwidth="200%" width="200%" period="500" startcolor="#3c000000" endcolor="#ff7c00ff" timetype="infinite" cycle="false"/>
    </effect>
  </menuitem>
  <menuitem id="textfield" text="Textfield Example" align="center">
    <interact onclick="textField()"/>
    <hover width="200%" falloffconstraint="horizontal"/>
    <effect>
      <onhover name="hint" hoverwidth="200%" width="200%" targetelement="hintElement" text="Run the Textfield Example"/>
      <onfocus name="pulsate" hoverwidth="200%" width="200%" period="500" startcolor="#3c000000" endcolor="#ff7c00ff" timetype="infinite" cycle="false"/>
    </effect>
  </menuitem>
  <menuitem id="exit" text="Exit" align="center">
    <interact onclick="exit()"/>
    <hover width="200%" falloffconstraint="horizontal"/>
    <effect>
      <onhover name="hint" hoverwidth="200%" width="200%" targetelement="hintElement" text="Leave the Examples"/>
      <onfocus name="pulsate" hoverwidth="200%" width="200%" period="500" startcolor="#3c000000" endcolor="#ff7c00ff" timetype="infinite" cycle="false"/>
    </effect>
  </menuitem>
</menu>

Nifty XML with Style - a lot better :)

<menu id="mainMenu" font="menu.fnt">
  <menuitem id="helloWorld" text="Hello World">
    <interact onclick="helloWorld()"/>
  </menuitem>
  <menuitem id="textfield" text="Textfield Example">
    <interact onclick="textField()"/>
  </menuitem>
  <menuitem id="exit" text="Exit">
    <interact onclick="exit()"/>
  </menuitem>
</menu>

Nifty XML Style Definition

<!-- main menu style -->
<style id="menu">
  <attributes childLayout="vertical" align="center" valign="center" height="50%"/>
  <effect>
    <onStartScreen name="hide" length="500" inherit="true" startDelay="1000"/>
    <onStartScreen name="fade" startColor="#fff0" endColor="#ffff" length="1000" startDelay="500" inherit="true"/>
    <onEndScreen name="fade" startColor="#ffff" endColor="#fff0" length="500" inherit="true"/>
  </effect>
</style>
 
<!-- menu item style -->
<style id="menu-item">
  <attributes align="center"/>
  <hover width="200%" falloffConstraint="horizontal"/>
  <effect>
    <onFocus name="pulsate" hoverWidth="200%" width="200%" period="500" startColor="#3c000000" endColor="#ff7c00ff" timeType="infinite" cycle="false"/>
  </effect>
</style>

:D

Getting DRY with style - the nifty kinda way :)

Saturday, May 24th, 2008

Well, no, not “dry” … but “DRY - (D)on’t (R)epeat (Y)ourself” =)

Suppose for some reason you need a lot of red colored panels in your nifty screen. At the moment you’ll need to do something like this:

<panel id="first" backgroundcolor="#f00f"> ... </panel>
<panel id="second" backgroundcolor="#f00f"> ... </panel>
<panel id="third" backgroundcolor="#f00f"> ... </panel>
...
<panel id="fortytwo" backgroundcolor="#f00f"> ... </panel>

So far so good, but what if you change your mind and want green panels instead? Ugly - no, not the color ;) - but you’ll now have to change all this backgroundColor definitions. Quite ugly.

Introducing Nifty Styles
So what we really want, is to specify the color of the panels only one time and use it multiple times.
So with Nifty 0.0.3 you’ll be able to use style definitions to get DRY =)

<style id="my-panel-style">
  <attributes backgroundColor="#f00f"></attributes>
</style>
<panel id="first" style="my-panel-style"> ...</panel>

This way you can define common attributes once and use them multiple times! This principle will be extended to attributes, effects, fonts and so on. This is not only nifty but will naturally lead to UI-skins! Imagine you have all your style definitions in one big “style.xml”. So you could define colors, fonts, effects, etc. once in this file. Changing this single file or including another style.xml whould change your whole UI!

Nifty indeed :)

And still work in Progress too =)