Code Example‎ > ‎TextBox‎ > ‎

More

Droidget widget sample with text box

Create new project

Create new project using Droidget wizards.choose, File --> new project --> project

From wizards ,  choose Droidget wizards --> project

and Fill the name field , ex: ‘DroidgetTextBoxExample’ for the project and click finish.

Droidget project with the given name will be created and displayed in the project explorer.


Edit index.html

add following javascript to the head section of the index.html

<script language="javascript">
       var gbstringVal= "Have a nice day!";
       
       function readText (form) {
           TestVar =form.inputbox.value;
           alert ("You typed: " + TestVar);        
       }

       function popWriteBack(form)
       {
        var stringVal= form.inputbox.value;;
        stringVal = prompt("what is your name?",stringVal);
        document.getElementById("answer").innerHTML = stringVal;
        document.getElementById("inputbox").value = stringVal;
       }
  </script>

modify the body seciton of  index.html file as follows

<body style="border:2px; border-style: solid;">
   <div align="center">
       <br>
       <form name="myform" action="" method="get">
       
       Enter your text: <br>
       
       <input id="inputbox" type="text" name="inputbox" value=""><P>
       
       <input type="button" name="btnRead" value="Read" onClick="readText(this.form)">
       
       <input type="button" name="btnWrite" value="Write" onClick="popWriteBack(this.form)">
       <p>you have entered:&nbsp <span id="answer" style="color: yellow;" ></span>
       <div id="answers" ></div>    
       </form>
   </div>
</body>


Edit config.xml

change the width="300" and height="200" properties of the widget to appropriate sizes and change other properties such as name , etc,,, as required.
save config.xml file. final code is similler to:

<widget id="DroidgetTextBoxExample_1278996018234" version="1.0" width="300" height="200">    
   <content src="index.html" type="text/html"/>
   <name>DroidgetTextBoxExample</name>
   <description></description>
   <author url="http://exsample.com">Default value</author>
   <icon src="icon.png"/>
   <license>Copyright</license>
</widget>    

Deploy the project

now save and deploy the project.
1. from the eclipse meny select Droidget --> packaging
2. then Droidget-->install packaging

Out put

finally , component will appear in the Droidget screen as follows.


Enter some text in text box and click on Read button


Then click on write button and insert some text in the popup dialog and click ok


Inserted text will be appeared in the lower

Comments