I have tried to add new zebra.ui.designer.ShaperPan to an existing zCanvas, and have been able to get it added but the drag functionality starts to play up.  This is my test page.
Hopefully it just me doing something daft :-)

<!DOCTYPE html>
        <script src='zebra.min.js' type='text/javascript'></script>
        <script type='text/javascript'>
            var root;
            zebra.ready(function() {
                eval(zebra.Import("ui", "layout"));
                root = (new zCanvas("designer", 500, 500)).root;
                    layout : new BorderLayout(2, 2),
                    border : new Border(),
                    padding: 8,
                    kids: {
                        CENTER: new BorderPan("Designer panel", new Panel({
                            padding: 6,
                            kids: [
                                new zebra.ui.designer.ShaperPan(new Checkbox("Check-box").properties({
                                    value:true, location: [10, 10]
                                new zebra.ui.designer.ShaperPan(new Button("Button").properties({
                                    value:true, location: [90, 50]
            function add(){
                var but = new zebra.ui.Button("Button123");    
                root.kids[0].add(new zebra.ui.designer.ShaperPan(but).properties({
                    value:true, location: [10, 10]
    <body align="center" style="padding:15px;">
        <h1>UI designer components</h1>
        <canvas id="designer"></canvas>
        <input type="button" onClick="add()" value="Add Button"/>

1 answer

Staff January 4, 2016

“BorderPan” consists (includes) from two other panels: label and content. You should add everything to content panel. So add a button to “root.kids[0].content”.    


Please login or Register to Submit Answer