Open kristianmandrup opened 8 years ago
Looking into the zebra/samples I find the ui.demo.designer.js
sample:
var pp = new Panel(new RasterLayout()), lab = new Label("Label");
lab.setSize(100, 20);
lab.setLocation(50, 50);
lab.setBorder(ui.borders.etched);
pp.add(new ShaperPan(lab));
and
var root = (new zCanvas("designer", 300, 300)).root;
root.properties({
layout : new BorderLayout(4, 4),
border : new Border(),
padding: 8,
kids: {
center: new BorderPan("Designer panel", new Panel({
padding: 6,
kids: [
new zebkit.ui.designer.ShaperPan(new Checkbox("Check-box").properties({
value:true,
location: [10, 10]
})),
So I guess the key to this is the pp.add(new ShaperPan(lab));
statement and
new zebkit.ui.designer.ShaperPan(new Checkbox("Check-box").properties({
value:true,
location: [10, 10]
})
Which there were more examples/docs on how to fully us and fine control this behaviour? Thanks :)
Trying to understand how to use the Zebra UI kit to build a Visual Layout Designer. Browsing through the docs and API, so far all I have found is this:
"This is UI component class that implements possibility to embeds another UI components to control the component size and location visually."
http://repo.zebkit.org/latest/api/classes/zebra.ui.designer.ShaperPan.html
I see various other xyzPan classes as well, however no examples on how to use the re-shaper API/functionality in an app.