Tuesday, December 15, 2009
Friday, December 11, 2009
Thursday, December 10, 2009
Image Editor Jetpack
Image Editor Jetpack
A Firefox extension which allows you to edit any image on the web. After you installed the extension, right click on the image in Firefox and select Edit Image to activate Jetpack Image Editor. The interface and features are very similar to Photoshop. There are: Tool bar, Layers, History, Adjustment, Filter, and more. Technically speaking, it is like a mini version of Photoshop that runs in Firefox.
Adobe® BrowserLab
Adobe® BrowserLab
Adobe BrowserLab is an online tool that allows you to view how different browsers (in different operating systems) renders your web pages. Just enter your web page URL, press Enter, and it will create a screen capture of the web page in the browsers you selected.
Facebook Connect Is Getting Huge
Facebook Connect Is Getting Huge
Facebook Connect announced today it has 60 million users on 80,000 sites.
Wednesday, December 9, 2009
Managing UI Complexity | Brandon Walkin
Managing UI Complexity | Brandon Walkin:
Interface complexity is an issue every designer wrestles with when designing a reasonably sophisticated application. A complex interface can reduce user effectiveness, increase the learning curve of the application, and cause users to feel intimidated and overwhelmed.
4 things you should track on your blog or website
4 things you should track on your blog or website
If you are serious about your website or blog, you should definitly take the analytics part seriously. In this post I explain how to track some events on your pages to help you improve the website. These examples are targetting mostly Wordpress and Google Analytics users, but most analytics tools should be able to perform these actions (if they don’t you should think about changing).
Google Chrome Extensions
Add features to Google Chrome by installing extensions:
Google Chrome Extensions
Google Chrome Extensions
Add features to Google Chrome by installing extensions:
Google Chrome Extensions
Monday, April 13, 2009
Calendar Extender and TextBox set to ReadOnly in C#
If you are using calendar extendar along with a textbox to get the calendar's date then one of the things that you may want to try is to restrict the user from entering into the text box directly. One simple way to do that is to set readonly property to true. However, when you do that, the value does not become available in the code-behind of the page. One of the solutions is given below,
Put onKeyPress = "javascript: return false;" onPaste = "javascript: return false;" in your textbox. That way, even the textbox is enabled, the user will not be able to modify the data.
To find more about other solutions and issues faced by other users, you can read the thread below:
Comparison of Political Debate in America and India
In a few days from now, one of the largest democracies in the world is going to elect its leaders. Sad to say, that despite many political parties in India trying to ape the west by using electronic media, the content of debate and commitment remain far from satisfactory.
While CNN and YouTube came together to provide a great platform to start a question / answer round as well as organize meaningful debates on which party / candidate would do what for the country if elected; our own media continues in sensationalizing trivial matters and is unable to create the right focus despite having such tremendous capability.
Our politicians are no better. They are relying on spreading hatred among the people of India and instead of discussing how they will take India to the next step their focus remains on settling personal scores.
I am afraid, at this rate the verdict will remain as fractured as it was in the last two General Elections.
Thursday, April 2, 2009
How to implement Cascading dropdowns using JQuery, AJAX and ASP.NET
The primary purpose of this article is to showcase how to load dropdowns dynamically from the client side, bring the data from the server using ASP.NET and AJAX. The script will be written using JQUERY.
For those who want a smaller sample application to go through to get a start on JQUERY / AJAX / ASP.NET combination can read it from (http://sites.google.com/site/spyderhoodcommunity/tech-stuff/howtosubmitaformusingjqueryviaajaxtoanaspnetandreceivetheresponse) and if there is a need to post comments or questions you can read it from (http://kartiksehgal.blogspot.com/2009/04/how-to-submit-form-using-jquery-via.html). Sites.google.com does not facilitate commenting by viewers as yet. As with the previous article, this article too does not require the user to set up any database by creating all the sample data within the code itself.
Comments or Questions, both are appreciated.
If there is a need to get into JQuery reference, a good start point will be the site http://jquery.com/.
Source code can be downloaded from contactmanagement_20090402.zip. This source code contains the above mentioned article’s source code also but is no where interconnected.
Solution
Steps
- Download the zip and set up the application under IIS as an ASP.NET 2.0 virtual directory under the default website
- Open the site in visual studio 2005 and check if you can see all the files as depicted in the solution above
- Open the SendEmailToContact.htm in your browser to run and see the form working
Cascading Dropdowns
The two dropdowns are highlighted below. Notice that a default option "Loading contacts..." is added to the contact dropdown.
<tr>
<td><select id="DdlContact" name="DdlContact"><option value="loading">Loading contacts...option>select>td>
<td><select id="DdlEmail" name="DdlEmail"><option value="loading">Loading contact emails...option>select>td>
tr>
Observe the following lines in JQUERY,
$.post("SendEmailToContact.aspx?StrMethodName=GETCONTACTS", {},
function (response)
{
$("#DdlContact").html(response);
$.post("SendEmailToContact.aspx?StrMethodName=GETCONTACTEMAILS", { DdlContact: $("#DdlContact").val()},
function (response) { $("#DdlEmail").html(response);});
}
);
);
$.post expects 3 argumentsa. The name of the page to which the form will be postedb. The arguments which need to be postedc. The function to be called on receiving the response
Here, we have appended a Query String to the SendEmailToContact.aspx which will receive the data requests. StrMethodName is checked at the code behind level and if blank, error code -2 is returned. However, in this sample we are not doing any error handling or validation. That will be handled in a subsequent article.
"GETCONTACTS" is a specific text that is matched in the code behind and if found, then the relevant method is called to get the data.
if (!String.IsNullOrEmpty(Request.QueryString["StrMethodName"]))
To: " + strEmail + " Subject: " + " + strEmailMessage + "{ strMethodName = Convert.ToString(Request.QueryString["StrMethodName"]);}if (strMethodName.Length > 0 && strMethodName.ToUpper().Equals("GETCONTACTS")){ Response.Write(CreateContactDropDownOptions(GetContacts()));}elseif (strMethodName.Length > 0 && strMethodName.ToUpper().Equals("GETCONTACTEMAILS")){ if (i32Contact > Int32.MinValue) { Response.Write(CreateEmailDropDownOptions(GetEmailsOfContact(i32Contact))); } else { Response.Write("-1"); }}elseif (strMethodName.Length > 0 && strMethodName.ToUpper().Equals("SENDEMAIL")){ Response.Write(" strEmailSubject + "");}else{ Response.Write("-2");}
Once the data is received from the call, $("#DdlContact").html(response); ensures that the response sent from the server is set into the HTML of the select option (replacing any existing HTML.
html() is a JQUERY function to get and set the innerHTML of an element. To keep the scripting simple, we just created option tags in the server itself and sent it to the calling function.
private String CreateEmailDropDownOptions(List<ContactEmail> PrmContactEmails)
{
System.Text.StringBuilder strBldOptions = new System.Text.StringBuilder();
foreach (ContactEmail contactEmail in PrmContactEmails)
{
strBldOptions.Append(" + contactEmail.StrEmail + "\">" + contactEmail.StrEmail + "");
}
return strBldOptions.ToString();
}
The next step is to take the selected value of the contacts dropdown, which is the first one by default, and make a similar call for the Emails of the selected contact
$.post("SendEmailToContact.aspx?StrMethodName=GETCONTACTEMAILS", { DdlContact: $("#DdlContact").val()},
function (response) { $("#DdlEmail").html(response);});
Here we had to pass the selected value of DdlContact. The JQUERY function, val() gets the value of selected option.
Note: No matter what way we load the dropdowns, up to about 2000 options it works fine. The moment we start going higher, even though the html is sent within seconds to the client side, the browser becomes sluggish in rendering the drop down. When the options were increased beyond 4000, the browser stopped responding even though response had come back in a few seconds.
Please feel free to post questions / comments for this article at the following link.
Screen shots of the application in action
| Initial screen with contact and their emails waiting to be loaded |
| On the select of a contact, an AJAX call is made to load the corresponding emails |
| Emails are loaded almost instantaneously |
| Creating a sample content |
| Sample content is received from server in formatted manner |
Wednesday, April 1, 2009
How to submit a form using JQuery via AJAX to an ASP.NET and receive the response
The purpose of this article is to showcase how to submit a form to an ASP.NET Page via AJAX using JQuery. Why would we use AJAX to submit a form when developing an ASP.NET application? That is an application design question. However, if it has been decided that AJAX will be used, then JQuery can help you make your codebase smaller and also make the code cross-browser compliant. JQuery does a lot more and for that please feel free to refer to the JQuery site (http://jquery.com/).
The sample application revolves around accepting some contact details, posting them to an ASP.NET form and then displaying the data received by the server. The sample code can be downloaded from the following zip.
Source: contactmanagement.zip
Solution Screenshot
Steps
1. The first step will be to get the uncompressed version of JQuery script file. The file can be downloaded from http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js&downloadBtn=
2. Next, create a default asp.net website and rename default.aspx to “SaveContact.aspx”
3. You may also have to add a web.config file from add new items as in VS 2005, it may not add by default for a website
4. Open “SaveContact.aspx” in the designer and remove all the HTML tags (see screenshot)
5. Add default.htm and include the jquery script file and create the form shown in the code snippet (see screenshot)
6. Now add the jquery function to submit the form and receive the results as shown in the code snippet (see screenshot)
7. $() represents the JQuery object
8. The $(document).ready() ensures that no javascript is executed till the page is ready with all the dom elements loaded
9. $("#submit_btn").click() searches for an element with ID as submit_btn and adds a function to the click event
10. $.post expects 3 arguments
a. The name of the page to which the form will be posted
b. The arguments which need to be posted
c. The function to be called on receiving the response
11. The return false ensure that the there is no page refresh after the call is completed
12. Response contains the entire HTML output of SaveContact.aspx
13. Here we have taken the response set it to the inner HTML of a DIV using $("#DivResult").html(response).show()
14. # is the keyword used to refer to a the ID of an element.
15. .html() is a function in JQuery to update the inner HTML. You can also use the same function to get the inner HTML.
16. Show() causes the div to be displayed immediately, even if it is hidden. This is particularly useful if you keep your div hidden by default.
17. On the code behind of SaveContact.aspx, add the code in the screenshot
18. While it is quite possible to save the received result into a database writing simple ADO.NET code, the purpose of this article was to keep focus on the core aspect, i.e., showcase how we can bring the data and submit a response
19. Given below is the screen shot of a sample input and output generated from the code. Please feel free to try any other data too.
Monday, March 30, 2009
Recommended strategy for handling exceptions in dot net applications
Purpose of this article
- Take advantage of the good exception handling practices
- To provide a structured approach in handling exceptions
There is a significant amount of debate in my workplace about how much of exception handling is enough and what really should be the scope of exception handling. Without getting into the debate myself, I am going to present my views on the scope, benefits, drawbacks and the most appropriate way of handling exceptions in dot net projects.
Scope
Exceptions are not expected to occur but are known to happen when either there is a flaw in the coding or the system has received data it is not equipped to handle. Professed exceptions that are raised within code due to foreseen circumstances such as, duplicate record entry, etc should not stop the program execution. The user should be displayed an appropriate warning message and allowed to take corrective action. The true exceptions should be,
- Logged at the first occurrence location into a log file
- A new custom exception with only those exception details that may be used within the code and the exception class inheriting from ApplicationException should be created and rethrown.
- This custom exception should be caught and rethrown across all levels till we reach an event handling method (e.g.: catch(CustomException) { throw; }.
- The user should be redirected to an error page which displays some summary details of the exception and any standard message to the user that may suit the need of the application.
- The same error page could allow the user to bring this exception to the notice of a designated authority (maybe a web admin) via email created in a rich text environment (also allowing snapshots to be attached). This is important if the exception can keep occurring every time the user revisits the involved activity keep the user from carrying on with his / her tasks. However, this may be more useful in the case of intranet applications. Public portals could cause a deluge!
Details that should go into an Exception and its message
Typically, there are two kinds of exceptions that will occur. The first kind is thrown by the system and the second kind is thrown from the code. In the former case,, post logging, you should replace it with your own exception object (inheriting from ApplicationException class).
In the case of your wanting to throw an exception, the message should contain the following information,
- The method name which first caught / invoked the exception.
- The class name (whether it’s a web page or windows form or a library class) which contains the method mentioned in point 1.
- Some details of the cause of exception / the activity that has been affected by this exception.
Additional information may be provided as per the application requirements.
Proposed Framework for Exception Handling in an Application
- Catch and throw exceptions as proposed in the above sections
- Log the exception to a log file the first time it is caught
- Display a user expectation friendly error page when exceptions occur giving the facilities mentioned above
- Run a background service that periodically clears the log file entries and transfers them to a database for analysis of application state. Alternatively, you can log the exceptions to a database straight away and keep the log file as a backup plan incase the database is unresponsive.
Footnote
The details mentioned so far are more with respect to dot net (c#, vb.net, asp.net) applications and specific applications, especially scientific or time critical applications may require a different approach to exception handling. I am sure that there may be scenarios / options / issues that have not been mentioned explicitly in this article. Anyone contributing to this article would be appreciated. I am also more than willing to provide further information on specific questions.
Subscribe to:
Posts (Atom)
