A "different" Checkbox Template

It's size and fuctionality could be usefull, (I hope so)


// ****************************************************************
// BigCheckbox Template.
// ****************************************************************
My.Templates.BigCheckbox = Active.Templates.Text.subclass();

My.Templates.BigCheckbox.create = function()
{
var obj = this.prototype;

// editor is not part of the template,
// there is only one single instance of editor object.

var Acheckbox = new Active.HTML.INPUT;
Acheckbox.setClass("templates", "bigcheckbox");
Acheckbox.setStyle("width", "27");
Acheckbox.setStyle("height", "20");
Acheckbox.setAttribute("hidden", "true");
Acheckbox.setAttribute("readonly", "true");
Acheckbox.setAttribute("value", "Yes");

var Bcheckbox = new Active.HTML.INPUT;
Bcheckbox.setClass("templates", "bigcheckbox");
Bcheckbox.setAttribute("type", "text");
Bcheckbox.setStyle("width", "27");
Bcheckbox.setStyle("height", "20");
Bcheckbox.setAttribute("readonly", "true");
Bcheckbox.setAttribute("value", "No");

// EVENTS

Acheckbox.setEvent("onblur", switchToTextMode);

Acheckbox.setEvent("onclick", function(){
template.element().innerHTML = Bcheckbox;
template.setItemProperty("text", "No")
switchToTextMode(); } );

Bcheckbox.setEvent("onblur", switchToTextMode);

Bcheckbox.setEvent("onclick", function(){
template.element().innerHTML = Acheckbox;
template.setItemProperty("text", "Yes");
switchToTextMode(); } );

obj.setEvent("ondblclick", switchToEditMode);

// FUNCTIONS
// template variable provides temporary reference
// to the parent template during edit mode.
var template;

function switchToEditMode(){
if (template) {
switchToTextMode()
}
template = this;
template.element().style.padding = 0;

if(template.getItemProperty("text")=="Yes"){
template.element().innerHTML = Acheckbox;
Acheckbox.element().focus(); }

else{ template.element().innerHTML = Bcheckbox;
Bcheckbox.element().focus(); }
}


function switchToTextMode(){
template.element().innerHTML = "";
template.refresh();
template = null;
}

};

My.Templates.BigCheckbox.create();

//**********************************
And it's CSS .......

.active-templates-bigcheckbox {
width: 100%;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #666;
vertical-align: top;
font: menu;
line-height: 1.4em;
}

.active-templates-bigcheckbox.gecko {
display: block;
margin: 0px;
}

Soooory , Please replace the line:
Acheckbox.setAttribute("hidden", "true");
with
Acheckbox.setAttribute("type", "text");
Thanks

Carlos, Do you have a working example online?

Sorry, not yet, but trying do it soon.
Any bug found??

Hi Carlos,

Just wondering do you have a Template for radio buttons ?

Sorry, I don't have an urgent need of doing it ( for now I use a select Template into a "short heigth list"), but if need to return a numeric value from a normal radio-b you can try Austin's drop down grid (It is similar ). Maybe I'll try to do it later , Actualy bussy creating a data-environment module for a new Editable drop-down Form Template.

how is a template used. i cant figure out how to implement a template. can someone send a sample.

thanks

i figured out how to use templates.