Tip: Save space with edit box titles

Thursday, January 24, 2008 at 11:21 AM

Posted by Bijoy Thangaraj, Gadget Developer

Desktop gadgets are often small, and it is sometimes a challenge to present all the information you need. If the gadget has a lot of edit boxes, one idea is to set the title (or label) of the edit box inside the edit box itself when it's not active. The Carbon Footprint Calculator gadget uses this technique. You need to handle the onfocusin and onfocusoutevents as shown below.

function OnEditIn(editbox, text) {
  if (editbox.value == text) {
    editbox.value = "";
   
    //Indicate the field is active. Un-italicize and un-gray the text.
    editbox.color = "#000000";
    editbox.italic = false;
  }
}

function OnEditOut(editbox, text) {
  if(editbox.value == "") {
    editbox.value = text;

    //Gray out and italicize the font for the hint.
    editbox.color = "#AAAAAA";
    editbox.italic = true;
  }
}

We pass two arguments to the OnEditIn and OnEditOut functions:

• editbox: The name property of the edit box. In our example, it is e1.
• text: The title of the edit box. In our case, we pass the strings.xml variable elec, which has the value Electricity.

Above, the user has clicked on and is currently editing the Electricity edit box. You can see how the other edit boxes display their titles.

Have a tip you'd like to share? Send it to gd-developer AT google DOT com.