Reading the Dojo DateTextBox in your custom format

In Dojo 1.4, you can use the DateTextBox component for showing an input calendar for the user, as follows:

<label for="sampleDate">Select the Date: </label>
<input id="sampleDate" dojoType="dijit.form.DateTextBox"></input>
<button id="sampleButton" class="buttonClass" id="getDateValue" 
dojoType="dijit.form.Button" type="button" 
onclick="getDateValue();">Get Date Value</button>

However, getting the date value using the value property dijit.byId("sampleDate").value will result in a value like this:

Wed Nov 30 2011 00:00:00 GMT+0200

If you want to simply format the date object in the “yyyy-MM-dd” format (for example), you can use the dojo.date.locale.format as follows:

dojo.date.locale.format(dijit.byId("sampleDate").value, {datePattern: "yyyy-MM-dd", selector: "date"})

The complete getDateValue JavaScript function is as follows:

<script type="text/javascript">
function getDateValue() {
    alert("Default Date: " + dijit.byId("sampleDate").value);
    alert("Formatted Date: " + dojo.date.locale.format(dijit.byId("sampleDate").value, 
    {datePattern: "yyyy-MM-dd", selector: "date"}));
}
</script>

I wish that this tip can be useful to you.

Build your own TSS feed reader using Yahoo! pipes in 30 second!!!

In Yahoo! pipes you can build your TSS feed reader with no code, all what you should do is just:
1. Drag and drop the Fetch Site Feed block, and then write “http://www.theserverside.com”.
2. Drag a filter block and define in the rules:
item.title -> contains -> “Java”.
3. Link the blocks together, as described in the screenshot below.

You can see the demo here: http://pipes.yahoo.com/tssfeedreader/tssfeedreader



Build your own TSS feed reader using Google Mashup Editor (GME)

Google Mashup Editor allows you to build Mashup applications easily and quickly.
Using it, I could build a TSS feed reader in 10 minutes.

Before seeing the application code, we should know the ingredients of a GME application.
1. Page:
Every GME page should be enclosed by the <gm:page> tag.
2. Modules:
A set of tags that perform different operations.
Example of modules are <gm:list> (which can read directly an RSS feed),
(which wraps the google map) and <gm:item> (which can represent an RSS feed item).
3. Template:
The <gm:template> tag is responsible for information viewing and formatting. It works as XSLT to XML.
It can view and format the <gm:list> and <gm:item> content.
4. Events:
The <gm:handleEvent> tag allows defining events on the modules.
5. Controls:
A set of tags that define the User Interface (UI). They must be inside the <gm:template> tag.
For example:
<gm:text>, <gm:date>, <gm:select> …etc.

OK after knowing the GME application ingredients, Let's see our application few lines of code.

<gm:page title="TSS Feed Reader" authenticate="false">
<div class="gm-app-header">
	<h1>Welcome to the GME TSS feed Reader</h1>
</div>

<gm:list id="tssList"
	 data="http://www.theserverside.com/rss/theserverside-rss2.xml"
	 pagesize="5">
</gm:list>
<gm:item id="item" template="rssFeedTemplate">
	<gm:handleEvent src="tssList"/>
</gm:item>

<gm:template id="rssFeedTemplate">
	<div>
		<b><gm:text ref="atom:title"/></b><br/>
		<gm:html ref="atom:summary"/><br/>
	</div>
</gm:template>

</gm:page>

It is easy, is not it?
Here is the application url: http://tssfeedreader.googlemashups.com/


DOM setAttribute() is different in M$ IE "the crappy"

Last days, I was working on a pure heavy (JavaScript/Ajax) component.
The component was required to run correctly across different browsers.
I really did the job in few hours but after start testing the component, I found it works fine on both FF and Opera but as usual I found the M$ IE complaining. I really found alot of IE weird things.

For example, if we try the following code in FF or even Opera, it would work fine.

<html>

<div id="myDiv">
</div>

<input value="Add New Element to div" type="button"
onclick="createNewElement();" />

<script>
function createNewElement() {
   var parentDiv = document.getElementById("myDiv");
   var buttonElement = document.createElement("input");

   buttonElement.setAttribute("type", "button");
   buttonElement.setAttribute("id", "myButton");
   buttonElement.setAttribute("value", "New Button");
   buttonElement.setAttribute("onMouseDown", "alert('Hi');");

   parentDiv.appendChild(buttonElement);
}
</script>

</html>

The “New Button” button would be created if we click on the “Add New Element to div” button.
The 'Hi' message would appear also if we click on the “New Button” button. Here is the output :



But if we try to run the previous code on the M$ IE, we will find the code written under the “onMouseDown” doesn't work.
After spending some time in investigation, I found that the M$ crappy browser doesn't support setAttribute onEventXXX.
Here is the IE output (Nothing is done after clicking on the “New Button” button :





Finally after spending some time with the ugly IE, I could fix this problem by doing the following:

// The IE Fix.
buttonElement.onmousedown = function() {
     alert("Hi - Fixed on the crappy IE");
};