SVG

One of the main feature of Smala is its ability to work directly with SVG files for the drawing. That is, you can build the graphics of your application with your preferred tool (let's say Inkscape or Illustrator™) then import it and handle it as a tree of components. The SVG file can be loaded with the special instruction loadFromXML that takes as unique argument a complete URI. By doing this, Smala translates your file in a tree of components, however it is not yet attached to your current tree. You have to do this in an explicit way with the symbol <<. Note, however, that you can attach only a sub-part of your SVG file. If your file contains, for example, the graphics for two states of your button, then you can attach them in different locations of your current tree, like in the folowing example:


/* main.sma */
use core
use base
use display
use gui

_main_
Component root {
  Frame f ("Hello World!", 0, 0, 500, 400)
  Exit quit (0, 1)
  f.close->quit

  Spike click
  svg = loadFromXML ("http://smala.io/button.svg")
  FSM fsm {
    State idle {
      g << svg.idle  // add the "idle" node of the svg and named it g
    }
    State pressed {
      g << svg.pressed  // add the "press" node of the svg and named it g
    }
    idle->pressed (idle.g.press)
    pressed->idle (pressed.g.release, click)
    pressed->idle (f.release)
  }
  label << svg.label // add the "label" node of the svg and named it label
}