Friday, March 7, 2014

Eon again

So after a hard time developing Egueb and mainly the SVG library. I wanted to try again Eon for changing some perspective and see if Enesim's API was still enough for such library.

After taking a look on the old code and see how hard it depended on Ender (the old object description library) I decided to make it use Egueb itself as it's core object system. It was natural given that Egueb's Dom implementation has improved so much that at the end it fits perfect on what Ender was trying to do.

So first I took Ender's dependency, coded some initial widgets using DOM's way of doing it, ported Escen to use SMIL elements (The 'set' and 'animate' elements) and put all the pieces  together to be as close as what it was before but using another libraries behind.

The result is that I can declare the application's widget using XML (that means that I can also do CSS on the widgets for fine tuning some specific attributes) load it and interact with it.

This is the file contents I used for the following video

<eon>
  <stack orientation="vertical">
    <button id="button01">
      <label>My very own label</label>
    </button>
    <button id="button02">
      <label>My second button</label>
    </button>
    <button id="button03">
      <label>My third button</label>
    </button>
    <button id="button04">
      <label>Button 4th</label>
    </button>
  </stack>
</eon>

And this the theme used for drawing the whole application:
<ender>
  <scene>
    <object ns="eon_drawer_basic" name="button" id="button">
      <states>
        <state name="default">
          <set attributeName="border-color" to="#555555"/>
          <animate attributeName="fill-color" from="#555555" to="#cccccc" dur="0.8s" repeatCount="indefinite" />
        </state>
        <state name="mouseover">
          <animate attributeName="fill-color" from="#555555" to="red" dur="0.8s" repeatCount="indefinite" />
        </state>
        <state name="mouseout">
          <animate attributeName="fill-color" from="#555555" to="#cccccc" dur="0.8s" repeatCount="indefinite" />
        </state>
      </states>
    </object>
    <object ns="eon_drawer_basic" name="label" id="label">
      <states>
        <state name="default">
          <set attributeName="color" to="gray"/>
          <set attributeName="font" to="Verdana"/>
        </state>
      </states>
    </object>
    <object ns="eon_drawer_basic" name="eon" id="eon">
      <states>
        <state name="default">
          <animate attributeName="color" from="#ffffff" to="#cccccc" dur="0.8s" repeatCount="1" />
        </state>
      </states>
    </object>
</ender>

And this is the result:
video

The window has been created using the new efl-egueb bridge I've created. Basically the above is an Ecore_Egueb_Window in a way is similar to an Ecore_Evas, but instead of using an Evas for drawing it is using the renderer interface of Egueb's Dom, which basically has an Enesim renderer. I'll explain later how Egueb's approach can be used with EFL's core libraries.

No comments: