Simple Form Builder, Build form from JSON array

Develop and Deploy Cross-Browser Web Apps .

Simple Form Builder, Build form from JSON array

Postby sedrok » Tue Jul 29, 2014 10:24 am

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();
}
}
});
   
Attachments
56jj334f346uj67.jpg
56jj334f346uj67.jpg (86.07 KiB) Viewed 6142 times
sedrok
 
Posts: 26
Joined: Tue Jun 03, 2014 12:50 pm

Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 2 guests

cron