Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

YUI: An Input Field Calendar Widget

Thursday, June 18th, 2009

I am working again on a project that uses the Yahoo User Interface Library (YUI). One of the requirements for the project is an input calendar field. When I first began the project, I created an event listener (Event.Listener) as discussed in a previous post. But, because a date field is fairly common in web applications, I wanted to create a widget so that I would not have to duplicate the process in future projects. To my surprise, YUI does not already have a widget with this functionality, so I decided to create one. This widget can be used with a one or multiple input fields. When a user clicks on the input field, the calendar appears. Select a date and the date is automatically inserted into the input field.

To use the widget, first load all of the required YUI files:

^?View Code HTML

&lt; link rel="stylesheet" type="text/css" href="lib/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="lib/intrig/imInputCal/imInputCal.js"></script>

The last file loaded is the widget itself (imInputCal). Setting up the HTML markupis quite simple:

^?View Code HTML

<body class=" yui-skin-sam">
<div id="box" class="box">
   <div class="datefield">
      <label for="date" >Date: < /label>< input type="text" id="tAppDate" name="tAppDate" value="" />
   </div>
</div>
<div id="cntnerCal">
<div class="hd">Calendar</div>
    <div class="bd">
       <div id="appointCal"></div>
    </div>
</div>
</body>

The “tAppDate” is the input field used in the widget. The calendar is set up just as any YUI Calendar. The “cntnerCal” is the dialog container for the calendar and the “appointCal” is the container for the YUI Calendar widget.

Now we add some CSS styling:

^?View Code CSS

.box {
     position:relative;
     height:200px;
     width:400px;
     background-color:#ff3300;
}
 
/* Datefield look/feel */
.datefield {
     position:relative;
     top:10px;
     left:10px;
     white-space:nowrap;
     border:1px solid black;
     background-color:#eee;
     width:25em;
     padding:5px;
}
 
.datefield input,
.datefield button,
.datefield label  {vertical-align:middle}
.datefield label  {font-weight:bold}
.datefield input  {width:15em}
.datefield button  {padding:0 5px 0 5px; margin-left:2px;}
.datefield button img {padding:0;margin:0;vertical-align:middle}
 
/* Clear calendar's float */
#cntnerCal .bd:after {content:".";display:block;clear:left;height:0;visibility:hidden;}
/* Have calendar squeeze upto bd bounding box */
#cntnerCal .bd {padding:0;}
 
/* Remove calendar's border and set padding in ems instead of px, so we can specify 
an width in ems for the container */
#appointCal {border:none;padding:1em}

To instantiate the imInputCal widget, we create an anonymous function. This function is added in the section of the web page:

^?View Code JAVASCRIPT

(function(){		
     var Event = YAHOO.util.Event;
     Event.onDOMReady(function(){
          var imInputCal = new YAHOO.INTRIG.imInputCal({
               fields: 'tAppDate',
               container: 'cntnerCal',
               ctnrPosition: 'fixed',
               cal: 'appointCal', 
               calOptions: {selected: "04/07/2009", iframe: false},
               dateFormat: {order: "ymd", month: "numeric", year:"long", delimiter: "-"},
               buttons: true
          }); 	
     });
})();

imInputCal Widget Options

fields: The input fields Id (The date fields). When the user clicks on the field, the calendar will appear. For multiple fields, use the format:

^?View Code JAVASCRIPT

["field1", "field2", "field3", etc]

container: The dialog box container.

ctnrPosition: The position of the dialog container (fixed or element). ‘element’ is the default.

cal: The container for the calendar.

calOptions: The calendar options (see the YUI Calendar configuration options). In the example above, the calendar’s selected date is ’04/07/2009′).

dateFormat: The date format that is displayed in the input field.

     order: The order of the month, year, and day. (mdy or ymd)
     month: The month format. short: Jan, Feb, Mar, etc. Numberic: "01", "02", "03", etc.
                                               long: "January", "February", March", etc.
     year: The year format. long - 4 digit. short - 2 digit.
     delimiter: The date delimeter ('/',  '-', etc).

The default dateFormat is:

^?View Code JAVASCRIPT

{order: "mdy", month: "numeric", year:"long", delimiter: "/"}

Also, if the dateFormat.order is ‘mdy’ and the dateFormat.month is ‘long’, then the imInputCal widget will add a comma after the day value (November 13, 2009).

buttons:. If the ‘buttons’ option is set to true, then OK and Cancel buttons will appear on the dialog. The default is false.

I think that you will find that this widget is easy to use. Click to view a demo of the imInputCal widget. The widget can be downloaded from Google Code.

Categories: Ajax, YUI, yui-widgets
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

One Response to “YUI: An Input Field Calendar Widget”

Eric Miraglia Says:
June 19th, 2009 at 12:23 pm

Note that you can bake all the YUI content down into two include files using this configuration:

http://developer.yahoo.com/yui/articles/hosting/?button&calendar&container&dragdrop&fonts&MIN&norollup

You should need only one include for YUI scripts and one more for CSS.

-Eric

YUI: An Input Field Calendar Widget

imInputCal Widget Options

One Response to “YUI: An Input Field Calendar Widget”

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll