Custom component

Define a button

It is possible to define your own component in a separate file. For this use the keyword _define_, choose a name for your component and specify the parameters that are required. Then, describe the tree corresponding to your component.


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

_define_
Button (Process f, string label double x_, double y_) {
  Spike click
  Translation t (x_, y_)

  x aka t.tx  // this line exports the name x that stands for t.tx
  y aka t.ty  // this line exports the name y that stands for t.ty

  FSM fsm {
    State idle {
      FillColor fc (50, 50, 50)
      Rectangle r (0, 0, 100, 70, 10, 10)
    }
    State pressed {
      FillColor fc (150, 50, 50)
      Rectangle r (0, 0, 100, 70, 10, 10)
    }
    idle->pressed (idle.r.press)
    pressed->idle (pressed.r.release, click)
    pressed->idle (frame.release)
  }
  FillColor w (255, 255, 255)
  Text thisLabel (10, 10, label)
  fsm.idle.r.height / 2 =: thisLabel.y
  thisLabel.width + 20 =:> fsm.idle.r.width
  thisLabel.width + 20 =:> fsm.pressed.r.width
}
          

Use the button

Your component can then be used in another file provided that you import it with the keyword import.


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

import Button

_main_
Component root {
  Frame f ("my frame", 0, 0, 400, 600)
  Exit ex (0, 1)
  f.close -> ex
  Button b (f, "myButton", 10, 100)
  b.click -> ex
}