Codename One: 2d Drawing app - codenameone

Question

I would like to know, where do I initialise my DrawingCanvas class (referred in 2d drawing app) using the GUI Builder (old one).
Also, how would I change the stroke color for each button that refers to the GUI Builder?
package userclasses;
import com.codename1.ui.Component;
import com.codename1.ui.Form;
import com.codename1.ui.events.ActionEvent;
import generated.StateMachineBase;
import com.codename1.ui.util.Resources;
/**
*
* #author Your name here
*/
public class StateMachine extends StateMachineBase{
public StateMachine(String resFile) {
super(resFile);
// do not modify, write code in initVars and initialize class members there,
// the constructor might be invoked too late due to race conditions that might occur
}
/**
* this method should be used to initialize variables instead of
* the constructor/class scope to avoid race conditions
*/
#Override
protected void initVars(Resources res) {
}
}

Answer 1

The source for that class is in the graphics section of the Codename One developer guide, pasted below:
The center of the app is the DrawingCanvas class, which extends Component.
public class DrawingCanvas extends Component {
GeneralPath p = new GeneralPath();
int strokeColor = 0x0000ff;
int strokeWidth = 10;
public void addPoint(float x, float y){
// To be written
}
#Override
protected void paintBackground(Graphics g) {
super.paintBackground(g);
Stroke stroke = new Stroke(
strokeWidth,
Stroke.CAP_BUTT,
Stroke.JOIN_ROUND, 1f
);
g.setColor(strokeColor);
// Draw the shape
g.drawShape(p, stroke);
}
#Override
public void pointerPressed(int x, int y) {
addPoint(x-getParent().getAbsoluteX(), y-getParent().getAbsoluteY());
}
}
Notice that this is the base skeleton and more code is added later in that chapter...