Showing posts with label simple. Show all posts
Showing posts with label simple. Show all posts

Sunday, December 12, 2010

HTML 5 Sample page with sample code for newly introduced INPUT elements

Here is a sample code for an HTML 5 page with the new input elements, which has the minimum set of properties defined so as to get a feel of how the new HTML standards are coming up. This will also give us an idea on how these changes are going to affect the user experience once they gets implemented in web pages.

Let us start by specifying the HTML 5 doc-type as shown below.
<!DOCTYPE html>
At the time of this writing, below are the type of input elements that are available. Most of these new element types are being supported in Google Chrome.

Keyword State Usage
search Search <input type="search">
number Number <input type="number">
range Range <input type="range">
color Color <input type="color">
tel Telephone <input type="tel">
url URL <input type="url">
email E-mail <input type="email">
date Date <input type="date">
month Month <input type="month">
week Week <input type="week">
time Time <input type="time">
datetime Date and Time <input type="datetime">
datetime-local Local Date and Time <input type="datetime-local">

Here is the sample HTML code showing the basic features of the newly introduced input controls. For sake of simplicity, the properties are kept to a minimum. Even the layout beautification is ignored.

 Simple Sample Code:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>HTML5 Sample Page</title>
<style type="text/css">
body
{
    font-family:Arial;
    font-size:12px;
}
</style>
</head>
<body>
<form id="form1" method="post">
Search:
<input type="search" placeholder="Search text here"><br />
Number:
<input type="number" value="50" min="40" max="60" step="5" autofocus="true"><br />
Range:
<input type="range" value="50" min="40" max="60" step="5"><br />
Color:
<input type="color" value="#000000"><br />
Telephone:
<input type="tel" placeholder="999" pattern="[0-9][A-Z]{3}" title="A part number is a digit followed by three uppercase letters."><br />
URL:
<input type="url" value="http://www.google.com"><br />
Email:
<input type="email" multiple value="me@somewhere.com"><br />
Date:
<input type="date" max="2050-12-31" min="2000-01-01" value="2010-01-01"><br />
Date Time (Time zone information included):
<input type="datetime" value="2000-12-31T00:00+05:30"><br />
Local Date Time (No Time Zone information):
<input type="datetime-local" value="2000-12-1T00:00"><br />
Month:
<input type="month" max="2000-10" min="2000-02" value="2000-04" step="2"><br />
Week:
<input type="week" max="2000-W50" min="2000-W05" value="2000-W06" step="2"><br />
Time:
<input type="time" max="23:00:00" min="01:00:00" value="04:30:00" step="5"><br />
File Upload:
<input type="file" accept="image/*" name="image" multiple onchange="updateFilename(this.value)"><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>

The above sample code also includes the usage of new properties like multiple, pattern, placeholder, autofocus, min, max, step etc.

Here is how it looks in Google Chrome.

Yes, it looks ugly (though it serves the purpose)! Feel free to copy the code and beautify/change it as needed. Let me know whether there is any changes, since the specification is fairly new.

References:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-multiple-attribute

Posted by Sanal K. Sankar at 10:32 PM 0 comments

Labels: , , , , , ,

Wednesday, October 21, 2009

Threading in .net - for Beginners


Method 1: Using ThreadPool.QueueUserWorkItem

There may be scenarios, in which you want to have an asynchronous operation to be performed without the need of a handle on the function being called. For example, this can be an audit log or a process log operation which can be a background process while your main application performs the important operations. There is a simple single line code to achieve this using ThreadPool.QueueUserWorkItem call. Typical usage is as follows.


private void button1_Click(object sender, EventArgs e)
{
    string argument = "Process started";
    ThreadPool.QueueUserWorkItem(new WaitCallback(WriteLog), input);
}

private void WriteLog(object o)
{
     string argument = o as string;
     // Your code to log the argument
}

In this method:
1. With a single line code, you are getting the basic benefits of threading without having to worry about creating, managing and terminating a threaded operation.
2. QueueUserWorkItem call is in control of .net runtime. You will not be able to control the time at which it gets executed.
3. You cannot control the state and priority of the function being executed.

Method 2. Using ThreadStart, ParameterizedThreadStart and Thread

Below is another method that will give more control on your asynchronous operation.

a) Without having a Parameter

Class level decleration

private Thread t = null;


This can be used for later tracking of the thread being executed.

private void button2_Click(object sender, EventArgs e)
{
 ThreadStart ts = new ThreadStart(WriteStartLog);
 t = new Thread(ts);
 t.IsBackground = true;
 t.Priority = ThreadPriority.Normal;
 t.Start();
}

private void WriteStartLog()
{
 // Your code to log the process start
}


To track the thread, the thread object can be used. A sample usage is provided below:

private void button3_Click(object sender, EventArgs e)
{
if (t != null)
{
     if (t.IsAlive)
          t.Abort();
}
}


b) Passing parameters using ParameterizedThreadStart

When parameters are to be passed to the invoked method, this can be done using ParameterizedThreadStart using the medium as objects.


private void button2_Click(object sender, EventArgs e)
{
 ParameterizedThreadStart pts = new ParameterizedThreadStart(WriteLog);
 t = new Thread(pts);
 t.IsBackground = true;
 t.Priority = ThreadPriority.Normal;
 t.Start("Process started");
}


private void WriteLog(object o)
{
 string argument = o as string;
 // Your code to log the argument
}

Now that we have covered the basic skeleton of our article, let’s see the other important aspects of threading.

Handling ThreadAbortException

There might be a need to abort the thread being executed at any instant of time. This can happen due to the user cancellation of the process or any other action like the primary thread being closed due to a various reason. At these scenarios (even when there is no need), it is mandatory to have a ThreadAbortException to be handled in the method which is being called. This can be as follows:


private void WriteLog()
{
 try
 {
  // Your code to log the argument
 }
 catch (ThreadAbortException tae)
 {
  //handles the thread abort exception
  //code to cleanup - let know the user that thread got cancelled, if necessary.
 }
 catch (Exception e)
 {
  //handle other exceptions
 }
}


Communicating between main and background thread.

Consider, this scenario:
You are having a background thread to create thumbnails for pictures in a folder. For each thumbnail being created, you have to draw it on the form. That is, to communicate from the background thread to the parent thread with the output from the background thread. This is pretty simple using delegates. Here it is how it’s done.

Class level declarations:

private delegate void addPictureBox2Main_Delegate(PictureBox pbb);
private Thread t = null;



private void button2_Click(object sender, EventArgs e)
{
 ThreadStart ts = new ThreadStart(LoadImageThumbNails);
 t = new Thread(ts);
 t.IsBackground = true;
 t.Priority = ThreadPriority.Normal;
 t.Start();
}

private void LoadImageThumbNails()
{
 try
 {
   //for each of the thumbnails being created
   //generate picturebox with thumbnail here
   PictureBox pb = //function to load thumbnail
   this.Invoke(new addPictureBox2Main_Delegate(addPictureBox2Main), new Object[] { pb });
 }
 catch (ThreadAbortException tae)
 {
   //handles the thread abort exception
   //code to cleanup - let know the user that thread got cancelled, if necessary.
 }
 catch (Exception e)
 {
   //hanlde other exceptions
 }
}


private void addPictureBox2Main(PictureBox pb)
{
 //add the picture box pb to the parent control as needed
}


** Code samples are in C#**

Note: This article only covers the basic aspect of threading and it aims to help beginners understand the threading concepts. There is more to it. So, keep learning.
Posted by Sanal K. Sankar at 12:02 PM 2 comments

Labels: , , , , , , , , , , , , ,
Subscribe to: Posts (Atom)