Simple Form Builder, Build form from JSON array

Develop and Deploy Cross-Browser Web Apps .
Post Reply
sedrok
Posts: 26
Joined: Tue Jun 03, 2014 12:50 pm

Simple Form Builder, Build form from JSON array

Post by sedrok »

Press 'готово' button and see console.log
   
// The default code is a com class (inherited from xui.Com)
Class('App', 'xui.Com',{
    // Ensure that all the value of "key/value pair" does not refer to external variables
    Instance:{
        // To initialize instance(e.g. properties)
        initialize : function(){
            // To determine whether or not the com will be destroyed, when the first UI control be destroyed
            this.autoDestroy = true;
            // To initialize properties
            this.properties = {};
        },
        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[Code created by CrossUI RAD Tools
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append((new xui.DataBinder())
            .setHost(host,"frm_databinder")
            .setName("frm_databinder")
            );
            
            append((new xui.UI.SButton())
            .setHost(host,"ctl_sbutton42")
            .setLeft(550)
            .setTop(10)
            .setCaption("render")
            .onClick("_ctl_sbutton42_onclick")
            );
            
            append((new xui.UI.Dialog())
            .setHost(host,"ctl_dialog9")
            .setLeft(10)
            .setTop(10)
            .setWidth(510)
            .setHeight(520)
            .setCaption("Form")
            );
            
            return children;
            // ]]Code created by CrossUI RAD Tools
        },
        // Give a chance to load other com
        iniExComs : function(com, threadid){
        },
        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        // This instance's events
        events : {"onRender":"_com_onrender"},
        _com_onrender:function (com, threadid) {
            window.$main = this;

            window.$l = 10;
            window.$t = 10;
            window.$w = 460;
            window.$h = 44;
            window.$maxt = $t + $h*20;

            $main.$form_items = [{id:'name',t:'input',c:'t1'},
                                 {id:'set' ,t:'combo',c:'t2',l:[{id:1,caption:'test'},2,3,4,5,6]},
                                 {id:'date',t:'date' ,c:'t123'},
                                 {t:'btn'  ,c:'OK', f:function(){
                                     alert('ok');
                                 }},
                                 {id:'check_val',t:'check',c:'t3'},
                                 {t:'btn'  ,c:'Готово', f:function(){
                                     console.log($main.frm_databinder.updateDataFromUI().getData());
                                 }}];



        },
        lpad:function (n, width, z) {
            z = z || '0';
            n = n + '';
            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
        },        
        inc_top:function (ignore_max) {
            $t = $t + $h;

            if($t >= $maxt && (ignore_max === undefined || ignore_max === false)) {
                $t = 10;
                $l = $l + $w + 30;
            }
        },
        plot_btn:function (o,ignore_max) {
            $main.ctl_dialog9.append((new xui.UI.SButton())
                                     .setHost($main,"ctl_sbutton42"+ Math.floor((Math.random() * 1000000) + 1))
                                     .setLeft($l + 10 + $w/2 - $w/6)
                                     .setTop($t)
                                     .setWidth($w/3)
                                     .setCaption(o.c)
                                     .onClick(function() {                                         
                                         if(typeof(o.f()) == 'function') o.f();
                                     })
                                    );

            $main.inc_top(ignore_max);
        },
        plot_input:function (o) {            
            $main.ctl_dialog9.append((new xui.UI.Input())
                                     .setHost($main,"ctl_input_auto" + Math.floor((Math.random() * 1000000) + 1))
                                     .setDataBinder("frm_databinder")
                                     .setDataField(o.id)
                                     .setDirtyMark(false)
                                     .setLeft($l)
                                     .setTop($t)
                                     .setWidth($w)
                                     .setHeight($h)
                                     .setLabelSize(20)
                                     .setLabelPos("top")
                                     .setLabelCaption(o.c)
                                     .setLabelHAlign("left")
                                    );

            $main.inc_top();
        },
        plot_combo:function (o) {
            $main.ctl_dialog9.append((new xui.UI.ComboInput())
                                     .setHost($main,"ctl_comboinput_auto" + Math.floor((Math.random() * 1000000) + 1))
                                     .setDataBinder("frm_databinder")
                                     .setDataField(o.id)
                                     .setDirtyMark(false)
                                     .setLeft($l)
                                     .setTop($t)
                                     .setWidth($w)
                                     .setHeight($h)
                                     .setLabelSize(20)
                                     .setLabelPos("top")
                                     .setLabelCaption(o.c)
                                     .setLabelHAlign("left")
                                     .setCustomStyle({"INPUT":{"background-color":"#FFFFFF"}})
                                     .setType("listbox")
                                     .setItems(o.l)
                                    );

            $main.inc_top();
        },
        plot_check:function (o) {
            $main.ctl_dialog9.append((new xui.UI.SCheckBox())
                                     .setHost($main,"ctl_scheckbox_auto" + Math.floor((Math.random() * 1000000) + 1))
                                     .setDataBinder("frm_databinder")
                                     .setDataField(o.id)

                                     .setDirtyMark(false)
                                     .setLeft($l)
                                     .setTop($t)
                                     .setWidth($w)
                                     .setHeight($h)
                                     .setCaption(o.c)
                                    );            

            $main.inc_top();
        },
        plot_date:function(o) {
            var cur_name = "ctl_input3630"+Math.floor((Math.random() * 1000000) + 1);
            $main.ctl_dialog9.append((new xui.UI.Input())
                                     .setHost($main, cur_name)
                                     .setDataBinder("frm_databinder")
                                     .setDataField(o.id)
                                     .setDirtyMark(false)
                                     .setLeft($l)
                                     .setTop($t)
                                     .setWidth($w - 30)
                                     .setHeight($h)
                                     .setTipsErr("Формат YYYY-MM-DD")
                                     .setLabelSize(20)
                                     .setLabelPos("top")
                                     .setLabelCaption(o.c)
                                     .setLabelHAlign("left")
                                     .setValueFormat("^([0-9]{4})\\-(([0][0-9])|([1][0-2]))\\-([0-3][0-9])$")
                                     .setMaxlength("500")
                                     .setValue("0000-00-00")
                                    );

            var cur_btn_name = "ctl_sbutton1823"+Math.floor((Math.random() * 1000000) + 1);
            $main.ctl_dialog9.append((new xui.UI.SButton())
                                     .setHost($main, cur_btn_name)
                                     .setLeft($l + $w - 30)
                                     .setTop($t + 20)
                                     .setWidth(30)
                                     .setImage("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwEBAQEBBwEBCgkLAQoPDQwMAQ8UFRAWIB0iIiAdEx8kHDQsJCYxJx8fLT0tJTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3NzQ3Kzc0Nzc3Nzc3Nzc3KzcrNys3Nzc3Nzc3Nys3LDc3Nzc3Nzc3Nzc3LC43K//AABEIABAAEAMBEQACEQEDEQH/xAAWAAADAAAAAAAAAAAAAAAAAAACBQb/xAAoEAAABAMGBwEAAAAAAAAAAAABAgYHBBExAAMFCBJBCSEiJCgyYRb/xAAXAQADAQAAAAAAAAAAAAAAAAACBAUB/8QAIxEAAAQFBAMAAAAAAAAAAAAAAAERQQITorHRBFKh0wUVg//aAAwDAQACEQMRAD8AsIVL52lGjmvUw8SJ2+bfQYiAuDiHVuIm7mpqDKXyVlpMe6+RaLyWmIkkFR1s3KgoxLZ1EwiXNVZeJQ7ogDeRYgH7vEA0jUBL3NS0Cc/s7bIj3XyB9npjJJBUN83fhA3gMSWKRapr0neMXmv13bZQhDeO18PMvttZgRwUZiiuUbXuYlCMNms1XjdxRS+Ol9UfXa2kBiJR/9k=")
                                     .setCaption("")
                                     .onClick(function() {
                                         if(!$main[cur_name].$dialog_exist) {
                                             $main.ctl_dialog9.append((new xui.UI.DatePicker())
                                                                      .setHost($main,"ctl_datepicker3"+Math.floor((Math.random() * 1000000) + 1))
                                                                      .setDirtyMark(false)
                                                                      .setLeft($main[cur_name].getLeft())
                                                                      .setTop($main[cur_name].getTop()+ $h)
                                                                      .setZIndex(1000)
                                                                      .afterValueSet(function(profile,oldValue,newValue) {                                                                      
                                                                          $main[cur_name].setValue((newValue.getYear()+1900)+'-'+$main.lpad((newValue.getMonth()+1),2)+'-'+$main.lpad(newValue.getDate(),2));
                                                                      })
                                                                      .beforeClose(function(){
                                                                          $main[cur_name].$dialog_exist = false;
                                                                      })
                                                                     );
                                             $main[cur_name].$dialog_exist = true;
                                         }
                                     })
                                    );

            $main.inc_top();
        },
        render_form:function () {
            _.each($main.$form_items, function(o,i) {
                switch(o.t) {
                    case 'input':
                        $main.plot_input(o);
                        break;
                    case 'combo':
                        $main.plot_combo(o);
                        break;
                    case 'check':
                        $main.plot_check(o);
                        break;
                    case 'date':
                        $main.plot_date(o);
                        break;
                    case 'btn':
                        $main.plot_btn(o);
                        break;                        
                    default:
                        alert('switch err: '+_.unserialize(o));
                        break;
                }
            });
        },
        _ctl_sbutton42_onclick:function (profile, e, src) {
            var winW = 0, winH = 0;
            if (document.body && document.body.offsetWidth) {
                winW = document.body.offsetWidth;
                winH = document.body.offsetHeight;
            }
            if (document.compatMode=='CSS1Compat' &&
                document.documentElement &&
                document.documentElement.offsetWidth ) {
                winW = document.documentElement.offsetWidth;
                winH = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight) {
                winW = window.innerWidth;
                winH = window.innerHeight;
            }            

            var FrmW, FrmH;
            FrmW = $main.ctl_dialog9.getWidth();
            FrmH = $main.ctl_dialog9.getHeight();

            $main.ctl_dialog9.setLeft((winW - FrmW)/2);
            $main.ctl_dialog9.setTop((winH - FrmH)/2);
            $main.render_form();
        }
    }
});
// The default code is a com class (inherited from xui.Com)
Class('App', 'xui.Com',{
    // Ensure that all the value of "key/value pair" does not refer to external variables
    Instance:{
        // To initialize instance(e.g. properties)
        initialize : function(){
            // To determine whether or not the com will be destroyed, when the first UI control be destroyed
            this.autoDestroy = true;
            // To initialize properties
            this.properties = {};
        },
        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[Code created by CrossUI RAD Tools
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append((new xui.DataBinder())
            .setHost(host,"frm_databinder")
            .setName("frm_databinder")
            );
            
            append((new xui.UI.SButton())
            .setHost(host,"ctl_sbutton42")
            .setLeft(550)
            .setTop(10)
            .setCaption("render")
            .onClick("_ctl_sbutton42_onclick")
            );
            
            append((new xui.UI.Dialog())
            .setHost(host,"ctl_dialog9")
            .setLeft(10)
            .setTop(10)
            .setWidth(510)
            .setHeight(520)
            .setCaption("Form")
            );
            
            return children;
            // ]]Code created by CrossUI RAD Tools
        },
        // Give a chance to load other com
        iniExComs : function(com, threadid){
        },
        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        // This instance's events
        events : {"onRender":"_com_onrender"},
        _com_onrender:function (com, threadid) {
            window.$main = this;

            window.$l = 10;
            window.$t = 10;
            window.$w = 460;
            window.$h = 44;
            window.$maxt = $t + $h*20;

            $main.$form_items = [{id:'name',t:'input',c:'t1'},
                                 {id:'set' ,t:'combo',c:'t2',l:[{id:1,caption:'test'},2,3,4,5,6]},
                                 {id:'date',t:'date' ,c:'t123'},
                                 {t:'btn'  ,c:'OK', f:function(){
                                     alert('ok');
                                 }},
                                 {id:'check_val',t:'check',c:'t3'},
                                 {t:'btn'  ,c:'Готово', f:function(){
                                     console.log($main.frm_databinder.updateDataFromUI().getData());
                                 }}];



        },
        lpad:function (n, width, z) {
            z = z || '0';
            n = n + '';
            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
        },        
        inc_top:function (ignore_max) {
            $t = $t + $h;

            if($t >= $maxt && (ignore_max === undefined || ignore_max === false)) {
                $t = 10;
                $l = $l + $w + 30;
            }
        },
        plot_btn:function (o,ignore_max) {
            $main.ctl_dialog9.append((new xui.UI.SButton())
                                     .setHost($main,"ctl_sbutton42"+ Math.floor((Math.random() * 1000000) + 1))
                                     .setLeft($l + 10 + $w/2 - $w/6)
                                     .setTop($t)
                                     .setWidth($w/3)
                                     .setCaption(o.c)
                                     .onClick(function() {                                         
                                         if(typeof(o.f()) == 'function') o.f();
                                     })
                                    );

            $main.inc_top(ignore_max);
        },
        plot_input:function (o) {            
            $main.ctl_dialog9.append((new xui.UI.Input())
                                     .setHost($main,"ctl_input_auto" + Math.floor((Math.random() * 1000000) + 1))
                                     .setDataBinder("frm_databinder")
                                     .setDataField(o.id)
                                     .setDirtyMark(false)
                                     .setLeft($l)
                                     .setTop($t)
                                     .setWidth($w)
                                     .setHeight($h)
                                     .setLabelSize(20)
                                     .setLabelPos("top")
                                     .setLabelCaption(o.c)
                                     .setLabelHAlign("left")
                                    );

            $main.inc_top();
        },
        plot_combo:function (o) {
            $main.ctl_dialog9.append((new xui.UI.ComboInput())
                                     .setHost($main,"ctl_comboinput_auto" + Math.floor((Math.random() * 1000000) + 1))
                                     .setDataBinder("frm_databinder")
                                     .setDataField(o.id)
                                     .setDirtyMark(false)
                                     .setLeft($l)
                                     .setTop($t)
                                     .setWidth($w)
                                     .setHeight($h)
                                     .setLabelSize(20)
                                     .setLabelPos("top")
                                     .setLabelCaption(o.c)
                                     .setLabelHAlign("left")
                                     .setCustomStyle({"INPUT":{"background-color":"#FFFFFF"}})
                                     .setType("listbox")
                                     .setItems(o.l)
                                    );

            $main.inc_top();
        },
        plot_check:function (o) {
            $main.ctl_dialog9.append((new xui.UI.SCheckBox())
                                     .setHost($main,"ctl_scheckbox_auto" + Math.floor((Math.random() * 1000000) + 1))
                                     .setDataBinder("frm_databinder")
                                     .setDataField(o.id)

                                     .setDirtyMark(false)
                                     .setLeft($l)
                                     .setTop($t)
                                     .setWidth($w)
                                     .setHeight($h)
                                     .setCaption(o.c)
                                    );            

            $main.inc_top();
        },
        plot_date:function(o) {
            var cur_name = "ctl_input3630"+Math.floor((Math.random() * 1000000) + 1);
            $main.ctl_dialog9.append((new xui.UI.Input())
                                     .setHost($main, cur_name)
                                     .setDataBinder("frm_databinder")
                                     .setDataField(o.id)
                                     .setDirtyMark(false)
                                     .setLeft($l)
                                     .setTop($t)
                                     .setWidth($w - 30)
                                     .setHeight($h)
                                     .setTipsErr("Формат YYYY-MM-DD")
                                     .setLabelSize(20)
                                     .setLabelPos("top")
                                     .setLabelCaption(o.c)
                                     .setLabelHAlign("left")
                                     .setValueFormat("^([0-9]{4})\\-(([0][0-9])|([1][0-2]))\\-([0-3][0-9])$")
                                     .setMaxlength("500")
                                     .setValue("0000-00-00")
                                    );

            var cur_btn_name = "ctl_sbutton1823"+Math.floor((Math.random() * 1000000) + 1);
            $main.ctl_dialog9.append((new xui.UI.SButton())
                                     .setHost($main, cur_btn_name)
                                     .setLeft($l + $w - 30)
                                     .setTop($t + 20)
                                     .setWidth(30)
                                     .setImage("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwEBAQEBBwEBCgkLAQoPDQwMAQ8UFRAWIB0iIiAdEx8kHDQsJCYxJx8fLT0tJTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3NzQ3Kzc0Nzc3Nzc3Nzc3KzcrNys3Nzc3Nzc3Nys3LDc3Nzc3Nzc3Nzc3LC43K//AABEIABAAEAMBEQACEQEDEQH/xAAWAAADAAAAAAAAAAAAAAAAAAACBQb/xAAoEAAABAMGBwEAAAAAAAAAAAABAgYHBBExAAMFCBJBCSEiJCgyYRb/xAAXAQADAQAAAAAAAAAAAAAAAAACBAUB/8QAIxEAAAQFBAMAAAAAAAAAAAAAAAERQQITorHRBFKh0wUVg//aAAwDAQACEQMRAD8AsIVL52lGjmvUw8SJ2+bfQYiAuDiHVuIm7mpqDKXyVlpMe6+RaLyWmIkkFR1s3KgoxLZ1EwiXNVZeJQ7ogDeRYgH7vEA0jUBL3NS0Cc/s7bIj3XyB9npjJJBUN83fhA3gMSWKRapr0neMXmv13bZQhDeO18PMvttZgRwUZiiuUbXuYlCMNms1XjdxRS+Ol9UfXa2kBiJR/9k=")
                                     .setCaption("")
                                     .onClick(function() {
                                         if(!$main[cur_name].$dialog_exist) {
                                             $main.ctl_dialog9.append((new xui.UI.DatePicker())
                                                                      .setHost($main,"ctl_datepicker3"+Math.floor((Math.random() * 1000000) + 1))
                                                                      .setDirtyMark(false)
                                                                      .setLeft($main[cur_name].getLeft())
                                                                      .setTop($main[cur_name].getTop()+ $h)
                                                                      .setZIndex(1000)
                                                                      .afterValueSet(function(profile,oldValue,newValue) {                                                                      
                                                                          $main[cur_name].setValue((newValue.getYear()+1900)+'-'+$main.lpad((newValue.getMonth()+1),2)+'-'+$main.lpad(newValue.getDate(),2));
                                                                      })
                                                                      .beforeClose(function(){
                                                                          $main[cur_name].$dialog_exist = false;
                                                                      })
                                                                     );
                                             $main[cur_name].$dialog_exist = true;
                                         }
                                     })
                                    );

            $main.inc_top();
        },
        render_form:function () {
            _.each($main.$form_items, function(o,i) {
                switch(o.t) {
                    case 'input':
                        $main.plot_input(o);
                        break;
                    case 'combo':
                        $main.plot_combo(o);
                        break;
                    case 'check':
                        $main.plot_check(o);
                        break;
                    case 'date':
                        $main.plot_date(o);
                        break;
                    case 'btn':
                        $main.plot_btn(o);
                        break;                        
                    default:
                        alert('switch err: '+_.unserialize(o));
                        break;
                }
            });
        },
        _ctl_sbutton42_onclick:function (profile, e, src) {
            var winW = 0, winH = 0;
            if (document.body && document.body.offsetWidth) {
                winW = document.body.offsetWidth;
                winH = document.body.offsetHeight;
            }
            if (document.compatMode=='CSS1Compat' &&
                document.documentElement &&
                document.documentElement.offsetWidth ) {
                winW = document.documentElement.offsetWidth;
                winH = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight) {
                winW = window.innerWidth;
                winH = window.innerHeight;
            }            

            var FrmW, FrmH;
            FrmW = $main.ctl_dialog9.getWidth();
            FrmH = $main.ctl_dialog9.getHeight();

            $main.ctl_dialog9.setLeft((winW - FrmW)/2);
            $main.ctl_dialog9.setTop((winH - FrmH)/2);
            $main.render_form();
        }
    }
});
   
Attachments
56jj334f346uj67.jpg
56jj334f346uj67.jpg (86.07 KiB) Viewed 9648 times

Post Reply