// Returns the HTML formatted output for a Control, "div contained"
public void HTML_FormControl(UIFS.ControlType type, UIFS.FormControl Control, ref string HTML, ref string Javascript)
{
// Format strings for proper display/output
Control.prompt = HTML_Escape(Control.prompt);
Control.tip = HTML_Escape(Control.tip);
// Control div
HTML = HTML + "<div id='Control_" + Control.id + "_div' class='ControlType_" + type.ToString() + "' >";
switch (type)
{
case UIFS.ControlType.Textbox:
FormControl.Textbox ControlTextbox = (FormControl.Textbox)Control;
HTML = HTML + "<table><tr title='"+ControlTextbox.tip+"' class='Control_tip'>"+
"<td class='Control_prompt'>" + ControlTextbox.prompt + "</td>" +
"<td class='Control_input'>";
if (ControlTextbox.lines == 1)
{
HTML = HTML + "<input type='text' id='Control_" + ControlTextbox.id + "' size='" + ControlTextbox.width + "' /></td>";
}
else {
HTML = HTML + "<textarea id='Control_" + ControlTextbox.id + "' rows='" + ControlTextbox.lines + "' cols='" + ControlTextbox.width + "'></textarea></td>";
}
HTML = HTML + "</tr></table>";
// onblur watching...
Javascript = Javascript + "document.getElementById('Control_" + Control.id + "').onblur = function(){ FormControlsTouched.push('" + Control.id + "'); };";
break;
case UIFS.ControlType.List:
FormControl.List ControlList = (FormControl.List)Control;
HTML = HTML + "<table><tr title='" + ControlList.tip + "' class='Control_tip'>" +
"<td class='Control_prompt'>" + ControlList.prompt + "</td>";
if (ControlList.type == FormControl.List.listtype.slider) { HTML = HTML + "<td class='Control_input slider'>"; }
else { HTML = HTML + "<td class='Control_input'>"; }
switch (ControlList.type)
{
case FormControl.List.listtype.radio:
for (int t = 0; t < ControlList.Items.Length; t++)
{HTML = HTML + "<input type='radio' id='Control_" + ControlList.id + "' name='Control_" + ControlList.id +
"' value='" + ControlList.Items[t].value + "'>" + ControlList.Items[t].name + "<br/>";}
break;
case FormControl.List.listtype.dropdown:
case FormControl.List.listtype.slider:
HTML = HTML + "<select id='Control_" + ControlList.id + "' /><option value=''>-=Choose=-</option>";
for (int t = 0; t < ControlList.Items.Length; t++)
{ HTML = HTML + "<option value='" + ControlList.Items[t].value + "'>" + ControlList.Items[t].name + "</option>"; }
HTML = HTML + "</select>";
break;
}
HTML = HTML + "</td></tr></table>";
// --[ Javascript ]--
// Since the dropdown and the slider use the same html...separated this out
if (ControlList.type == FormControl.List.listtype.slider)
{
Javascript = Javascript + "$('#Control_" + ControlList.id + "').selectToUISlider();";
}
// onblur watching...
Javascript = Javascript + "document.getElementById('Control_" + Control.id + "').onblur = function(){ FormControlsTouched.push('" + Control.id + "'); };";
break;
case UIFS.ControlType.Checkbox:
FormControl.Checkbox ControlCheckbox = (FormControl.Checkbox)Control;
HTML = HTML + "<table><tr title='" + ControlCheckbox.tip + "' class='Control_tip'>" +
"<td class='Control_prompt'>" + ControlCheckbox.prompt + "</td>" +
"<td class='Control_input'>";
string initialState_checkbox="",initialState_select="",initialState_input="";
if (ControlCheckbox.initialstate)
{ // setup initial state if chosen
initialState_checkbox = " checked='1' ";
initialState_select = " selected='1' ";
initialState_input = "display: inline;";
}
else {
initialState_input = "display: none;";
}
switch (ControlCheckbox.type)
{
case FormControl.Checkbox.checkboxtype.standard:
HTML = HTML + "<input type='checkbox' id='Control_" + ControlCheckbox.id + "' "+initialState_checkbox+" onchange=\"Checkbox_Change('"+ControlCheckbox.id+"', 1) \" />";
break;
case FormControl.Checkbox.checkboxtype.YesNo:
HTML = HTML + "<select id='Control_" + ControlCheckbox.id + "' onchange=\"Checkbox_Change('" + ControlCheckbox.id + "', 2)\" /><option value='0'>No</option><option value='1' " + initialState_select + ">Yes</option></select>";
break;
case FormControl.Checkbox.checkboxtype.OnOff:
HTML = HTML + "<select id='Control_" + ControlCheckbox.id + "' onchange=\"Checkbox_Change('" + ControlCheckbox.id + "', 2)\" /><option value='0'>Off</option><option value='1' " + initialState_select + ">On</option></select>";
break;
}
if (ControlCheckbox.hasinput)
{
HTML = HTML + "<input type='text' id='Control_" + ControlCheckbox.id + "_input' size='30' style='" + initialState_input + "' />";
}
HTML = HTML + "</td></tr></table>";
// onblur watching...
Javascript = Javascript + "document.getElementById('Control_" + Control.id + "').onblur = function(){ FormControlsTouched.push('" + Control.id + "'); };";
break;
case UIFS.ControlType.DateTime:
FormControl.DateTime ControlDateTime = (FormControl.DateTime)Control;
string AnyTime_format = "", AnyTime_value="";
switch (ControlDateTime.type)
{
case FormControl.DateTime.datetimetype.datetime: // {format:'%m/%d/%Y %h:%i%p'}
AnyTime_format = "%m/%d/%Y %h:%i%p"; AnyTime_value= "1/1/1900 12:00AM";
break;
case FormControl.DateTime.datetimetype.date: // {format:'%m/%d/%Y'}
AnyTime_format = "%m/%d/%Y";AnyTime_value= "1/1/1900";
break;
case FormControl.DateTime.datetimetype.time: // {format:'%h:%i%p'}
AnyTime_format = "%h:%i%p";AnyTime_value= "12:00AM";
break;
}
HTML = HTML + "<table><tr title='" + ControlDateTime.tip + "' class='Control_tip'>" +
"<td class='Control_prompt'>" + ControlDateTime.prompt + "</td>" +
"<td class='Control_input'><input type='text' id='Control_" + ControlDateTime.id + "' size='23' class='Control_DateTime' value='"+AnyTime_value+"' onfocus=\"AnyTime.noPicker('Control_" + ControlDateTime.id + "'); $('#Control_" + ControlDateTime.id + "').AnyTime_picker({format:'" + AnyTime_format + "'}); this.onfocus=null; \" /></td>" +
"</tr></table>";
//Javascript = Javascript + "AnyTime.noPicker('Control_" + ControlDateTime.id + "');";
// Based on the type:
// Step #1: run the 'noPicker' function to remove any associated controls before creating a new AnyTime control
// Step #2: bind a function to create the picker to the *focus* event of the control (this is b/c of display issues with anytime run on hidden elements)
// onblur watching...
Javascript = Javascript + "document.getElementById('Control_" + Control.id + "').onblur = function(){ FormControlsTouched.push('" + Control.id + "'); };";
break;
case UIFS.ControlType.Number:
FormControl.Number ControlNumber = (FormControl.Number)Control;
// Standard text input field
HTML = HTML + "<table><tr title='" + ControlNumber.tip + "' class='Control_tip'>" +
"<td class='Control_prompt'>" + ControlNumber.prompt + "</td>" +
"<td class='Control_input'><input type='text' id='Control_" + ControlNumber.id + "' size='7' onchange=\"Number_Validate(this, '" + ControlNumber.min + "','" + ControlNumber.max + "','" + ControlNumber.interval + "') \" />";
if (ControlNumber.slider)
{ // Slider type control
HTML = HTML + "<span id='Control_" + ControlNumber.id + "_slider' class='Control_Number_Slider'></span>";
Javascript = Javascript + "$(function(){ $('#Control_" + ControlNumber.id + "_slider').slider({min:" + ControlNumber.min + ", max:" + ControlNumber.max + ", step:" + ControlNumber.interval +
", slide:function(event,ui){$('#Control_" + ControlNumber.id + "').val(ui.value);} }); }); ";
}
HTML = HTML + "</td></tr></table>";
// onblur watching...
Javascript = Javascript + "document.getElementById('Control_" + Control.id + "').onblur = function(){ FormControlsTouched.push('" + Control.id + "'); };";
break;
case ControlType.Percentage:
FormControl.Percentage ControlPercentage = (FormControl.Percentage)Control;
// Dropdown with values per interval
HTML = HTML + "<table><tr title='" + ControlPercentage.tip + "' class='Control_tip'>" +
"<td class='Control_prompt'>" + ControlPercentage.prompt + "</td>" +
"<td class='Control_input'><select id='Control_" + ControlPercentage.id + "'>";
for (int t = 0; t < 100 ; t+=ControlPercentage.interval)
{
HTML = HTML + "<option value='"+t.ToString()+"'>"+t.ToString()+"%</option>";
}
HTML = HTML + "<option value='100'>100%</option></select>";
// Slider control
//HTML = HTML + "<div id='Control_" + ControlPercentage.id + "_slider' class='Control_slider'></div>";
HTML = HTML + "</td></tr></table>";
//Javascript = Javascript + "$(function(){ $('#Control_" + ControlPercentage.id + "_slider').slider({min:0, max:100, step:" + ControlPercentage.interval +
// ", slide:function(event,ui){$('#Control_" + ControlPercentage.id + "').val(ui.value);} }); }); ";
Javascript = Javascript + "$('#Control_" + ControlPercentage.id + "').selectToUISlider();";
// onblur watching... (PARENT YO!)
Javascript = Javascript + "$('#Control_" + ControlPercentage.id + "').parent().find('.ui-slider').slider({ change: function(){FormControlsTouched.push('" + Control.id + "');} });";
break;
case ControlType.Range:
FormControl.Range ControlRange = (FormControl.Range)Control;
string AnyTime_datetimeformat = "", AnyTime_start = "", AnyTime_end = "", AnyTime_size="";
HTML = HTML + "<table><tr title='" + ControlRange.tip + "' class='Control_tip'>" +
"<td class='Control_prompt'>" + ControlRange.prompt + "</td>" +
"<td class='Control_input'><table>";
switch (ControlRange.type)
{
case FormControl.Range.Rangetype.TimeRange:
case FormControl.Range.Rangetype.DateRange:
case FormControl.Range.Rangetype.DateTimeRange:
switch (ControlRange.type)
{
case FormControl.Range.Rangetype.TimeRange:
AnyTime_datetimeformat = "%h:%i%p";AnyTime_start="12:00AM";AnyTime_end="12:00AM";AnyTime_size="10";
break;
case FormControl.Range.Rangetype.DateRange:
AnyTime_datetimeformat = "%m/%d/%Y";AnyTime_start="1/1/1900";AnyTime_end="1/1/1900";AnyTime_size="12";
break;
case FormControl.Range.Rangetype.DateTimeRange:
AnyTime_datetimeformat = "%m/%d/%Y %h:%i%p";AnyTime_start="1/1/1900 12:00AM";AnyTime_end="1/1/1900 12:00AM";AnyTime_size="20";
break;
}
HTML = HTML + "<tr><td class='label'>FROM</td><td class='value'><input type='text' id='Control_" + ControlRange.id + "_Start' size='" + AnyTime_size + "' class='Control_DateTime' value='" + AnyTime_start + "' " +
"onfocus=\"AnyTime.noPicker('Control_" + ControlRange.id + "_Start'); $('#Control_" + ControlRange.id + "_Start').AnyTime_picker({format:'" + AnyTime_datetimeformat + "'}); this.onfocus=null; \" /></td></tr>" +
"<tr><td class='label'>TO</td><td class='value'><input type='text' id='Control_" + ControlRange.id + "_End' size='" + AnyTime_size + "' class='Control_DateTime' value='" + AnyTime_end + "' " +
"onfocus=\"AnyTime.noPicker('Control_" + ControlRange.id + "_End'); $('#Control_" + ControlRange.id + "_End').AnyTime_picker({format:'" + AnyTime_datetimeformat + "'}); this.onfocus=null; \" /></td></tr>";
break;
// -----
// These control range types are combined...
case FormControl.Range.Rangetype.Currency:
case FormControl.Range.Rangetype.MinMax:
string Designator = "";
if (ControlRange.type == FormControl.Range.Rangetype.Currency) { Designator = "'$'+"; }
HTML = HTML + "<tr><td>From</td><td><input type='text' id='Control_" + ControlRange.id + "_Start' size='7' readonly='1' /></td>" +
"<td>To</td><td><input type='text' id='Control_" + ControlRange.id + "_End' size='7' readonly='1' /></td></tr>";
HTML = HTML + "<tr class='slider'><td colspan='4'><div id='Control_" + ControlRange.id + "_slider'></div></td></tr>";
Javascript = Javascript + "$(function(){ $('#Control_" + ControlRange.id + "_slider').slider({range: true, min:" + ControlRange.min + ", max:" + ControlRange.max + ", values: [" + ControlRange.min + "," + ControlRange.max + "]" +
", slide:function(event,ui){$('#Control_" + ControlRange.id + "_Start').val(" + Designator + "ui.values[0]); $('#Control_" + ControlRange.id + "_End').val(" + Designator + "ui.values[1]);} }); " +
"$('#Control_" + ControlRange.id + "_Start').val(" + Designator + ControlRange.min+ "); $('#Control_" + ControlRange.id + "_End').val(" + Designator + ControlRange.max+ "); }); ";
break;
}
HTML = HTML + "</table>"; // end input formatting...
HTML=HTML+"</td></tr></table>";
// onblur watching...
Javascript = Javascript + "document.getElementById('Control_" + Control.id + "_Start').onblur = function(){ FormControlsTouched.push('" + Control.id + "S'); };";
Javascript = Javascript + "document.getElementById('Control_" + Control.id + "_End').onblur = function(){ FormControlsTouched.push('" + Control.id + "E'); };";
break;
default:
break;
}
// End Control div
HTML = HTML + "</div>";
}
