Script Bank

How to convert unitx timestamp to date using MYSQL

2011-12-01T02:33:00.000-08:00

You can convert the timestamp to date in mysql by using DATE and FROM_UNIXTIME function. The command given bellow,

> SELECT DATE( FROM_UNIXTIME( `created` ) ) AS pDate FROM phpkit

OUTPUT as follows,
------------------------------
2008-07-14
------------------------------

Inline and block elements

2010-12-14T00:08:00.000-08:00

While creating an HTML page, it is important to understand the difference between the 2 elements categories inline and block to avoid coding errors and impost the CSS for the best.

Those 2 words, ‘block’ and ‘inline’ are explicit enough by themselves..

block: an element which forms a separate block
inline: an element which stays inline with the rest of the content

Block element

A block element has the following characteristics:

Forms a block and positions itself vertically underneath with a new empty line above and under
Takes all the available width based on the measure of its parent element (container)
Its height changes in rapport to its content
Can contains other inline and/or block elements (es: a <p> inside a <div>)
Via css, we can impost a fixed width and/or height
Example of natural html block element: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>

Inline elements

An inline element has the following characteristics:

Positions itself horizontally inline with the rest of the content of its parent element (container)
Takes the minimum width and height in rapport to its content
Can contains ONLY other inline elements (es: an <img/> inside a <a>)
Via css, we can NOT impost fixed measure
Example of natural html inline elements: <span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>

Using the css display:block; and display:inline;, we can change the property of the element from block to inline or from inline to block.

Concrete examples of block and inline elements

1. A paragraph (html block element <p>) at its natural state:

The width equals the one of the container
The height equals the one of its content.

2. A paragraph with fixed measure:

The width equals 300px (width:300px;), the height equals 100px (height:100px;).

3. A paragraph converted into an inline element using display:inline;

This paragraph is now an inline element. The width and height are at their minimum in rapport to its content.

4. A link (html inline element <a>) at its natural state

The width and height are at their minimum in rapport to its content

5. A link with fixed measure (to demonstrate that it does NOT work)

We can NOT impost a fixed width and/or height to an inline element.
NB: Internet Explorer applies the fixed measure by error of interpretation of the css specifics. It should not be so!

If you need, to give fixed measure to an inline element, you should add the display:block;

6. A link converted into a block element using display:block;

This link is now a block element.

The width equals the one of its container.

The height equals the one of its content.

CSS Block & CSS Inline Elements

2010-12-13T22:42:00.000-08:00

The 3 ways that HTML elements can be displayed

All HTML elements are naturally displayed in one of the following ways:

Block
       Takes up the full width available, with a new line before and after
       (display:block;)

Inline
       Takes up only as much width as it needs, and does not force new lines
       (display:inline;)

Not displayed
       Some tags, like <meta /> and <style> are not visible
       (display:none;)

Block example

<p> tags and <div> tags are naturally displayed block-style.

(I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.)

A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

Here I’ve started a paragraph and now I’m going to insert a <div>

new div inside my paragraph

and then continue the text here…

See how the <div> jumped in and took over the full width of the space?

Common HTML elements that are naturally block-display include:

<div>
Your general-purpose box

<h1> … <h6>
All headings

<p>
Paragraph

<ul>, <ol>, <dl>
Lists (unordered, ordered and definition)

<li>, <dt>, <dd>
List items, definition list terms, and definition list definitions

<table>
Tables

<blockquote>
Like an indented paragraph, meant for quoting passages of text

<pre>
Indicates a block of preformatted code

<form>
An input form

Inline example

Inline-display elements don’t break the flow. They just fit in with the flow of the document.

So here I’ve got a paragraph going on, and I’m going to add a <span> tag that has a yellow background and italic text. See how it just fits right in with the flow of the text?

More elements are naturally inline-style, including:

<span>
Your all-purpose inline element

<a>
Anchor, used for links (and also to mark specific targets on a page for direct linking)

<strong>
Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag

<em>
Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag

<img />
Image

<br>
The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level element.

<input>
Form input fields like and

<abbr>
Indicates an abbr. (hover to see how it works)

<acronym>
Working much like the abbreviation, but used for things like this TLA.

You change the display property of any elements

Although each HTML element has its natural display style, you can over-ride these in CSS.

This can be very useful when you want your page to look a particular way while using semantically-correct HTML.

Examples

Say you want to provide a list of items, but you don’t want a big bulleted list. You just want to say that you’re going to the store to buy:

some fizzy drinks,
a chainsaw,
and some nylon stockings.

Or maybe you want a nice toolbar, which is stricly a list (of links) and so should be marked up as a

Here’s the code

<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>FAQs</a></li>
<li><a href=”#”>Contact us</a></li> 
</ul>

Here’s how it looks as a normal list

Just adding the class “toolbar”…

<style type=”text/css”>

.toolbar li {

display:inline;
background-color:#eee;
border:1px solid;
border-color:#f3f3f3 #bbb #bbb #f3f3f3;
margin:0;
padding:.5em;
zoom: 1;
} 
</style> <ul class=”toolbar”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>FAQs</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>

Here’s how it looks with the CSS styles applied

Validating HTML5 in the browser

2010-10-06T06:54:00.001-07:00

I like to be alerted of any validation errors that sneak into my markup as soon as possible. That’s why I find the HTML Validator Extension for Firefox very hard to live (well, work) without.

Unfortunately, it does not support HTML5. I’ve been looking hard for an alternative that does and has the same features as the HTML Validator Extension, i.e. runs locally in the browser without sending anything to a remote server and validates every page you load automatically.

No luck.

There are tools that validate markup by sending it to a remote server, either automatically or manually, but I don’t want that. I want to be able to check my work even though it’s behind a login or if I’m not connected to the Internet.

If you happen to know of a browser extension that solves this problem, please let me know. It doesn’t have to be for Firefox – Opera, Chrome or Safari would be fine too as long as it runs on my Mac.

Be careful with non-ascii characters in URLs

2010-10-06T06:52:00.000-07:00

One thing that is rather common, especially on websites whose content is not in English, is URLs that contain unencoded characters such as space, å, ä, or ö. While this works most of the time it can cause problems.

Looking at RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax, characters that are allowed to be used unencoded in URLs are either reserved or unreserved. The unreserved characters are a-z, A-Z, 0-9, -, ., _, and ~. The reserved characters are used as delimiters and are :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, and =.

In essence this means that the only characters you can reliably use for the actual name parts of a URL are a-z, A-Z, 0-9, -, ., _, and ~. Any other characters need to be Percent encoded.

So what does using an unencoded character like space or å in a URL mean in practice?

It doesn’t work in all user agents. Recent browsers seem to handle it pretty well, but older browsers may not be able to follow links or load images. It also causes problems for some other software that expects URIs to be valid (Ruby’s URI.parse is one).
It may make URLs ugly and hard to read since browsers may percent encode some of these characters before displaying them in the location bar. This varies from browser to browser. A URL like http://example.com/å ä ö/ may be displayed as http://example.com/å ä ö/, http://example.com/å%20ä%20ö/, http://example.com/%C3%A5%20%C3%A4%20%C3%B6/, or even http://example.com/√•%20√§%20√∂/.

To keep things simple and predictable, consider sticking to the unreserved characters in URLs unless you have a really strong internationalisation requirement for using other characters.

Remember non-vendor-prefixed CSS 3 properties (and put them last)

2010-10-06T06:49:00.000-07:00

Everybody wants to use CSS 3 now that even Internet Explorer will support parts of it once IE 9 is out. But since parts of CSS 3 are still subject to change, most browsers use a vendor prefix for many CSS 3 properties to signal that their implemenation is “experimental” and may change in a later version of the browser.

This means that for a property like border-radius to work cross-browser you need to specify it several times with different vendor prefixes, like this:

.box {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}

The -moz- prefix targets Firefox and other Gecko-based browsers, -webkit- is for older versions of Safari and other WebKit-based browsers, and the non-prefixed border-radius property is currently used by Safari 5, Chrome, Opera 10.5, and IE 9.

“Inspect element” is not the same as “View source”

2010-10-06T06:43:00.000-07:00

Tools like Firebug for Firefox, WebKit’s Web Inspector and Opera’s Dragonfly are indispensible tools for front-end Web developers, letting you view the DOM as the browser sees it.

And that’s where these tools can actually cause some problems, or at least a bit of confusion. When you choose “Inspect element” or otherwise bring up one your browser’s DOM inspector, what you’re looking at is the document tree after the browser has applied its error correction and after any JavaScripts have manipulated the DOM. It is not necessarily the same as what you see when you choose “View source”.

Take this invalid HTML snippet created by a hypothetical web developer, for example:

<h1>The title</h2>
<p>The first sentence.<strong>The second sentence.</p></strong>

The h1 is closed by an </h2> tag, and the closing strong tag is on the wrong side of the closing p tag. Two mistakes that can happen when you’re typing HTML by hand. This is what you will see when you view source in your browser. But what if you bring up a developer tool?

Firebug/Firefox

Firebug tells you that the DOM looks like this in Firefox:

<h1>The title</h1>
<p>The first sentence.<strong>The second sentence.</strong></p>
<strong></strong>

Hmm. Where did the </h2> tag go? And how did the </strong> tag end up in the right place? Error correction.

Web Inspector/Safari

What about the Web Inspector in Safari then? It shows this:

<h1>The title
<p>The first sentence.<strong>The second sentence.</strong></p>
<strong></strong>
</h1>

Whoa! Everything is in the h1? Not what the source HTML says, and not the same as Firefox either. Again, error correction.

Dragonfly/Opera

Ok, let’s take a look in one more tool, Opera Dragonfly:

<h1>The title</h1>
<p>
The first sentence.
<strong>The second sentence.</strong>
</p>

Hey, that looks just like what the hypothetical developer probably intended to write. Yet another example of error correction.

Different browsers have different DOMs

Note that the DOM is different in all three browsers.

There are two lessons to be learned from this:

1. DOM inspectors are not “View source”
2. Browsers use different error correction (at least until they all fully support HTML5), which is one of the reasons

CSS Colors: Take Control Using PHP

2010-10-05T06:22:00.000-07:00

While many web sites use powerful programming environments to create HTML, these same tools are usually ignored when it comes to creating Cascading Style Sheets (CSS). This article describes how to take control of your colors in CSS using PHP. You will learn how to:

Centralize your color definitions using variables.
Separate presentation and content by referring to colors using abstract names such as base and highlight.
Automatically generate a color gradient from a single base color:

-5
-4
-3
-2
-1
0
+1
+2
+3
+4
+5
Automatically adjust the contrast of foreground colors so they can viewed on top of your background colors:

-5
-4
-3
-2
-1
0
+1
+2
+3
+4
+5

Using PHP to Generate CSS

To use PHP in your CSS file:

Rename your style.css
file to style.php, then add the following to the top of
the file:
```
<?php header("Content-type: text/css"); ?>
```
This line tells the browser that the file is CSS instead of HTML.
In your HTML files, change the stylesheet references from style.css to style.php. For example:
```
<link rel="stylesheet" type="text/css"
 media="screen" href="style.php">
```

Centralizing Your Color Definitions

In a typical CSS file, color codes are scattered throughout the
page, and the same colors are used in multiple places. Unless you have
a talent for visualizing hex color codes, it can be hard to determine
which colors belong to which codes.

Our first goal is to name the color codes and define them in a
central location. Then if we want to change a color, we can change it
once and the change will be propagated throughout the stylesheet.

Let's start with the following sample stylesheet:

body {
 background:#fff;
 color:#333;
}
h1, h2, h3, h4 {
 color:#00840;
}
blockquote {
 color:#008400;
}

And transform it into this:

<?php
header("Content-type: text/css");
$white = '#fff';
$dkgray = '#333';
$dkgreen = '#008400';
?>
body {
 background:<?=$white?>;
 color:<?=$dkgray?>;
}
h1, h2, h3, h4 {
 color:<?=$dkgreen?>;
}
blockquote {
 color:<?=$dkgreen?>;
}

Abstracting Your Colors
What if we wanted to make our headings red? If we changed the value
of $dkgreen, then the variable name would not reflect the
actual color. Furthermore, if we change $dkgreen, both
the heading elements and the blockquote element would change color.

We need to change the way we name our colors, and create variables
according to the function of the color instead of the

value of the color:

<?php
header("Content-type: text/css");
$pageBG = '#fff';
$pageFG = '#333';
$heading = '#a00000'
$quote = '#008400';
?>
body {
 background:<?=$pageBG?>;
 color:<?=$pageFG?>;
}
h1, h2, h3, h4 {
 color:<?=$heading?>;
}
blockquote {
 color:<?=$quote?>;
}

Generating Palettes With PHP
Now let's take this a step further, and use PHP to generate new colors. We'll start with a base color and a highlight color, then generate a palette of lighter and darker shades:

-5

-4

-3

-2

-1

-5

-4

-3

-2

-1

Notice that the text is not readable on some of the swatches. Let's use PHP to adjust the foreground color, using color visibility guidelines recommended by the W3C:

-5

-4

-3

-2

-1

-5

-4

-3

-2

-1

To define these colors in our CSS file, simply add the following lines:

<?php
include_once("csscolor.php");
$base = new CSS_Color('C9E3A6');
$highlight = new CSS_Color('746B8E');
?>

Then to use the colors, do something like this:

/* Use the base color, two shades darker */
background:#<?= $base->bg['-2'] ?>;
/* Use the corresponding foreground color */
color:#<?= $base->fg['-2'] ?>;
/* Use the highlight color as a border */
border:5px solid #<?= $highlight->bg['0'] ?>

Here is an example of the style in action.

Learn CSS Positioning in Ten Steps

2010-10-05T05:50:00.000-07:00

his tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float

1. position:static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.

#div-1 {
 position:static;
}

2. position:relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Let's move div-1 down 20 pixels, and to the left 40 pixels:

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That's because div-1 still occupies that original space in the document, even though we have moved it.

It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.

3. position:absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let's move div-1a to the top right of the page:

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.

Also notice that div-1a was positioned in the top right corner of the page. It's nice to be able to position things directly the page, but it's of limited value.

What I really want is to position div-1a relative to div-1. And that's where relative position comes back into play.
Footnotes

Note: There is a bug in the Windows IE browser: if you specify a relative width (like "width:50%") then the width will be based on the parent element instead of on the positioning element.

4. position:relative + position:absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. two column absolute

Now we can make a two-column layout using relative and absolute positioning!

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a.

But wait - what happened to the other elements? They are being obscured by the absolutely positioned elements. What can we do about that?

6. two column absolute height

One solution is to set a fixed height on the elements.

But that is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. float

For variable height columns, absolute positioning does not work, so let's come up with another solution.

We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it's the only tool we have).

#div-1a {
 float:left;
 width:200px;
}

8. float columns

If we float one column to the left, then also float the second column to the left, they will push up against each other.

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

9. float columns with clear

Then after the floating elements we can "clear" the floats to push down the rest of the content.

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

10. Disclaimer & Resources

These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are many).

Simple 2 column CSS layout

2010-10-05T05:23:00.000-07:00

This is a tutorial on how to use CSS to create a simple two column layout.

The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.

To see the full CSS used for each step, view source on the example documents.

1. Basic structure

First of all, we create the basic HTML structure:

<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>

After that, we put some content in the different sections:

<div id="wrap">
<div id="header">
<h1>Document Heading</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
<div id="main">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>

Now we have a completely unstyled HTML document which is structured in a way that lets us use CSS to control its layout.

2. Adjust the body and html elements
To make the content reach the edges of the browser window, we set the margin and padding of the body and html elements to zero. We also specify colours for text and background.

body,
    html {
    margin:0;
    padding:0;
    color:#000;
 background:#a7a09a;
 }

3. On to the main containers
After that it’s time to give the content area a width and center it horizontally. We do that by specifying the width and margins of the main container, #wrap. We also give it a background colour to make it show up on the page.

The method we use to center the content is based on the fact that when an element’s left and right margins are set to auto, they will share whatever is left when the element’s width has been subtracted from that of its container. In this case the width of #wrap will be subtracted from the width of the browser window.

#wrap {
  width:750px;
  margin:0 auto;
  background:#99c;
}

In case you’re wondering why we’re not using the body element to control the width and centering of the layout, it is because doing so can cause unwanted side-effects in some versions of Internet Explorer.

After that, we give the different sections of the document different background colours to make them show up.

#header {
   background:#ddd;
   }
#nav {
   background:#c99;
}
#main {
   background:#9c9;
}
#sidebar {
  background:#c9c;
}
#footer {
  background:#cc9;
}

4. Place the columns side by side

To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.

#main {
   float:left;
   width:500px;
   background:#9c9;
}
#sidebar {
   float:right;
   width:250px;
   background:#c9c;
}

Note that the sum of the widths should be equal to the width given to #wrap in Step 3.

This will make #sidebar appear to the right of #main, but the footer is not where it should be.

5. Push the footer down

The footer doesn’t get pushed down to the bottom of the content because of the way float works. When you float an element, it is removed from the document flow and doesn’t push elements that follow it down. In this case #footer will start right below #sidebar.

To avoid this we use the clear property to tell the footer that it can’t have any elements next to it.

#footer {
   clear:both;
   background:#cc9;
}

6. Fix the background colour

Now we can see that the shorter column doesn’t continue all the way down to the footer. To make it look like it does, we use the same background colour for #sidebar and #wrap.

#sidebar {
   float:right;
   width:250px;
   background:#99c;
}

Also, if you take a look at this step in Internet Explorer 6 you may notice that the background colour of the footer is pushing up beside the main content. That will be taken care of later.

If you don't know which column is going to be the tallest, and you want both columns to have different backgrounds and look like they are going all the way to the bottom, you need to use a workaround. There are several ways to achieve that effect:
Faux Columns
Creating Liquid Layouts with Negative Margins
In search of the One True Layout

7. Make the navigation bar horizontal

#nav contains a regular unordered list of links. Since we don’t want it to look like an unordered list we restyle it.

#nav ul {
   margin:0;
   padding:0;
   list-style:none;
}
#nav li {
   display:inline;
   margin:0;
   padding:0;
}

8. Adjust margins and paddings, and make IE 6 cooperate

Almost done. Time to adjust the margin and padding of some elements to make the layout a little less cramped.

#header {
   padding:5px 10px;
   background:#ddd;
}
h1 {
   margin:0;
}
#nav {
   padding:5px 10px;
   background:#c99;
}
#main {
   float:left;
   width:480px;
   padding:10px;
   background:#9c9;
}
h2 {
   margin:0 0 1em;
}
#sidebar {
   float:right;
   width:230px;
   padding:10px;
   background:#99c;
}
#footer {
   clear:both;
   padding:5px 10px;
   background:#cc9;
}
#footer p {
   margin:0;
}

One thing to take note of here is that when we added padding to #main and #sidebar, we subtracted the width of the left and right paddings from each element’s width. This is how the CSS box model works

And the final thing is to compensate for a float bug in Internet Explorer 6. If you look at step 6 in IE 6, you’ll notice that the footer is not always being pushed completely below #main. Scroll up and down a couple of times if you can’t see it immediately.

It is very noticeable in this demo because every major element has a different background colour and everything is really tight. One way of fixing this problem is making sure the footer has an Internet Explorer concept called Layout. There are several ways of achieving this, but we’ll do it by using the Star HTML CSS hack to give the footer a height only in IE 6:

* html #footer {
  height:1px;
}

As strange as it may look, this does the job. Thanks to another bug in IE, the footer will not be just one pixel tall, but as tall as its content dictates.

Please don’t hesitate to contact me if you can suggest improvements to this method.

Installing Windows 2000 Professional

2010-09-28T23:21:00.000-07:00

To install Windows 2000 Professional, follow these steps:

Start the installation by using one of the following methods:
- Start from the Windows 2000 Professional installation CD-ROM. Make sure that the CD-ROM is set to start before the hard disk starts. Insert the CD-ROM, and then when you are prompted, press any key to start the Windows 2000 Professional Setup program.
- Start from boot disks. Insert Disk 1, and then insert each of the remaining three floppy disks when you are prompted to do so. For additional information about creating boot disks for Windows 2000
- Start from within a current operating system. Insert the CD-ROM, and then, at a command prompt, type drive:\i386\winnt32.exe and then press ENTER, or if this is an installation on a computer that has no previous installation of Windows, type drive:\i386\winnt.exe and then press ENTER, where drive is the letter of the CD-ROM drive.
Setup inspects your computer's hardware configuration and then begins to install the Setup and driver files. When the Microsoft Windows 2000 Professional screen appears, press ENTER to set up Windows 2000 Professional.
Read the license agreement, and then press the F8 key to accept the terms of the license agreement and continue the installation.
When the Windows 2000 Professional Setup screen appears, either press ENTER to set up Windows 2000 Professional on the selected partition, or press C to create a partition in the unpartitioned space.
If you choose to install Windows 2000 Professional on a file allocation table (FAT) partition, specify whether you want to:
- Leave the current file system intact.
- Format the partition as FAT16.
- Convert the existing file system to the NTFS file system.
- Format the partition by using the NTFS file system.
Press ENTER after you make your selection. Setup examines the existing hard disks and then copies the files that are needed to complete the installation of Windows 2000 Professional. After the files are copied, the computer restarts.

Important Do not press a key to boot from your CD-ROM drive when your computer restarts.
When the Windows 2000 GUI Mode Setup Wizard appears, click Next to start the wizard. Setup detects and installs such devices as a specialized mouse or keyboard.
When the Regional Options dialog box appears, customize your installation of Windows 2000 Professional for locale, number format, currency, time, date, and language, if necessary. Click Next.
In the Personalize Your Software dialog box, type your name and the name of your organization, and then click Next.
In the Product ID dialog box, type the 25-character product key, and then click Next.
In the Computer Name and Password dialog box, either accept the default name that Setup generates or assign a different name for the computer. When you are prompted for an administrative password, type a password for the Administrator account. (You can leave the box blank; however, this is not recommended.) Click Next.
In the Date and Time Settings dialog box, set the correct date and time for your computer. You can also specify which time zone you are in and set the computer to automatically adjust the clock for daylight saving time. Click Next.
Setup installs the networking software and detects your network settings. When the Network Settings dialog box appears, click either
- Typical to set default network settings such as File and Print Sharing for Microsoft Networks, Client for Microsoft Networks, and TCP/IP protocol that uses Dynamic Host Configuration Protocol (DHCP), or
- Custom to specify the network components that you require for your network environment,
and then click Next.
In the Workgroup or Computer Domain dialog box, specify the workgroup or the domain to join. If you indicate that you are part of a domain, specify your domain user name and password. Click Next.

Setup installs the networking components.
During the final stage of installation, Setup installs Start menu items, registers components, saves settings, and removes temporary files. When the Completing the Windows 2000 Setup Wizard dialog box prompts you to do so, remove the Windows 2000 CD-ROM, and then click Finish to restart the computer.
After the computer restarts, click Next in the Welcome to the Network Identification Wizard dialog box.
In the Users of This Computer dialog box, specify either that users must enter a user name and password or that you want Windows 2000 to automatically log on a specific user when the computer starts. Click Finish.

When the Windows 2000 Professional desktop appears, the installation is complete.

Shop more at Bizrate

Bizrate

Using Associative Arrays for Client-side Caching using AJAX & Javascript

2010-09-27T04:30:00.000-07:00

Introduction

This article shows you a useful technique to cache some of that page data on the browser in-memory. Since we use Ajax, the page is not reloaded each time. This prevents the cache from being invalidated on each round-trip. Client-side caching is sometimes required for performance reasons and also to take the load off of the DBMS. Since most modern PCs have plenty of RAM to spare, client-side caching becomes an important weapon in the modern programmer's arsenal of tricks.

With the advent of Ajax, application data can be maintained on the client without the use of ViewStates (aka hidden fields) or to a lesser degree, cookies. As any experienced developer will tell you, ViewState is a double-edged sword. Indiscriminate use of ViewStates can really have a detrimental effect on performance - what with the Viewstate payload ferried to and from the server with every postback.

The accompanying code can be extended to use record data too, via Javascript and the presentation logic can also be hived off to a Javascript routine on the client. We could even pipe XML down to the client and it could be parsed and presented through client-side script.

To keep this sample code easy to comprehend, I have rendered the tabular data from within the Web Service itself - which may not be architecturally optimal. Since this is not a treatise on design best-practices, I have taken the liberty of cutting corners here and there for the sake of brevity.

img width="36" height="42" style="float: left;" alt="Screenshot - article1.gif" src="Client-sideCaching/article1.gif" />We use JavaScript associative arrays to maintain our client-side cache. One thing to be noted about JS associative arrays is that once you associate a string key with an array, there is no way to iterate through the array using indexes. Supposing you are using it like this:asarray["akey"] = <value> there is no way you can revert to accessing the elements by their ordinal position like this: var anyvar = asarray[0].

Using the code

Let us examine the critical sections of the code that are absolutely necessary for client-side caching to work. The rest of the code deals with presentation and layout and a discussion on these aspects will be skipped.
For those who subscribe to the view that source-code is the ultimate documentation, you may skip this section. For the others, we'll try to separate the wheat from the chaff. Let us look at the most important pieces of code that makes client-side caching with Ajax and Javascript possible. I am using XML data for demonstration purposes and this makes the project run without having to change connection strings or even having SQL Server installed on your computer.

Step 1

Create a New Website and choose "ASP.NET AJAX-Enabled Website". If you do not have .NET 2.0 Ajax Toolkit installed, go here and download them. You cannot begin this exercise without it.

Step 2

Select "Add New Item" by right-clicking on the project in Solution Explorer and choose "Web Service". Add the highlighted code to your web service class. The [ScriptService] attribute decoration makes the web service class callable by the Ajax framework. You have to include using System.Web.Script.Services to be able to do that.

using System.Web.Script.Services;
...
[ScriptService] 
    public class DataAccess : System.Web.Services.WebService 
    { ...

Step 3

Flesh out your web method to do something useful. Our example does this:

[WebMethod]
public string FetchOrders(string key)
{           
    return LoadData(key);;
}

private string LoadData(string key)
{        
    DataSet ds = new DataSet();
    ds.ReadXml(this.Context.Server.MapPath("App_Data\\northwind.xml"));
    ds.Tables["Orders"].DefaultView.RowFilter = "customerid = '" + key + "'";        
    return RenderResultTable((ds.Tables["Orders"].DefaultView));
}

private string RenderResultTable(DataView rdr)
{
    StringBuilder str = new StringBuilder();
    str.AppendLine("

");     str.AppendLine("");     foreach(DataRowView drv in rdr)     {         str.AppendLine(" ");         str.AppendFormat("", drv["OrderDate"],              drv["OrderID"]);         str.AppendLine("");     }     str.AppendLine("
Order Date Order ID         

{0}  {1}
");
    return str.ToString();
}

Step 4

Now, we go to the client script that does the actual caching and retrieves data by making a call to the web service. This employs rudimentary JavaScript - no surprises here.

var cacheData = new Array(); // This is our cache

var currSel = null;
var seedData = "0BFA4D6B-DD18-48aa-A926-B9FD80BFA5B7";   
// Prime a cache item with a unique initial value

Step 5

Add the needed JavaScript code now. We have a HTML button with the ID btnFetch. In the OnClick event, we trigger either an Ajax asynchronous call to the server or render from the cache.

function btnFetch_onclick() 
{    
    currSel = document.getElementById("dlCustomers").value;    
    var status = document.getElementById("divStatus");
    //var svc = new DataAccess();


    if(cacheData[currSel]==null)
    {
        DataAccess.FetchOrders(currSel,OnCompleteCallback,OnErrorCallback, 
            OnTimeOutCallback);   
        cacheData[currSel] = seedData;         
        status.innerHTML = "[Live Result]";
    }
    else
    {                
        status.innerHTML = "[Cached Result]";        
        var cacheobject = FetchDataFromCache(currSel);
        RenderData(cacheobject);
    }
    document.getElementById("dlCustomers").focus();    
}

Calling Server Side Code from Client Side using Ajax

2010-09-27T04:22:00.000-07:00

Introduction

Using Microsoft ASP.NET AJAX is to call ASP.NET Web services (*.asmx files) from the browser by using client script. The script can call a webservice containing server-based methods (Web methods) and invoke these methods without a postback and without refreshing the whole page. The option we are going to use in this article involves PageMethods. A PageMethod is basically a public static method that is exposed in the code-behind of an aspx page and is callable from the client script. PageMethods are annotated with the [WebMethod] attribute. The page methods are rendered as inline JavaScript

Step 1

Create an ASP.NET AJAX enabled website. Go to File > New > Website > ASP.NET AJAX-Enabled Web Site. Give the solution a name and location and click Ok.

Step 2

Drag and drop label and textbox controls. We will be accepting the CustomerID from the user in the textbox and displaying the ‘ContactName’ in the label Add the connection string in Config section tag in web.config file.

Step 3

Currently we will add a method, ‘GetContactName()’ which will accept a CustomerID and return the Contact Name information from the Northwind database, Customer table. We will then transform this method as a PageMethod.

public static string GetContactName(string custid) 
{ 
if (custid == null || custid.Length == 0) 
return String.Empty; 
SqlConnection conn = null; 
try 
{ 
string connection = ConfigurationManager.ConnectionStrings
   ["NorthwindConnectionString"].ConnectionString; 
conn = new SqlConnection(connection); 
string sql = "Select ContactName from Customers where CustomerId = @CustID"; 
SqlCommand cmd = new SqlCommand(sql, conn); 
cmd.Parameters.AddWithValue("CustID", custid); 
conn.Open(); 
string contNm = Convert.ToString(cmd.ExecuteScalar()); 
return contNm; 
} 
catch (SqlException ex) 
{ 
return "error"; 
} 
finally 
{ 
conn.Close(); 
} 
}

Step 4

We will now transform this method as a PageMethod and then call this method GetContactName() from the client side code; i.e. using JavaScript. To enable the method as a PageMethod, add the attribute [WebMethod] on top of the method:

[System.Web.Services.WebMethod] 
public static string GetContactName(string custid) 
{ 
}

At the same time, add the attribute EnablePageMethods="true" to the ScriptManager.

Step 5

Let us now create the JavaScript that will call this server side code. Add a JavaScript file called script.js.

function CallMe(src,dest) 
{ 
var ctrl = document.getElementById(src); 
// call server side method 
PageMethods.GetContactName(ctrl.value, CallSuccess, CallFailed, dest); 
} 
// set the destination textbox value with the ContactName 
function CallSuccess(res, destCtrl) 
{ 
var dest = document.getElementById(destCtrl); 
dest.value = res; 
} 
// alert message on some failure 
function CallFailed(res, destCtrl) 
{ 
alert(res.get_message()); 
}

Step 6

We now need to reference this JavaScript file from our aspx page and invoke the ‘CallMe()’ method whenever the textbox looses focus. To do so: Add a reference to the JavaScript file in the body tag as shown below:

<body> <script type="text/javascript" language="javascript" src="script.js"> 
</script> <form id="form1" runat="server">

Step 7

To invoke the methods whenever the textbox looses focus, add these lines of code in the Page_Load() event:

if (!Page.IsPostBack) 
{ 
txtId1.Attributes.Add("onblur", 
    "javascript:CallMe('" + txtId1.ClientID + "', '" + txtContact1.ClientID + "')"); 
txtId2.Attributes.Add("onblur", 
    "javascript:CallMe('" + txtId2.ClientID + "', '" + txtContact2.ClientID + "')"); 
}

As shown above, we are using the Attributes.Add that lets us add an attribute to the server control’s System.Web.UI.AttributeCollection object. The function ‘CallMe’ kept in the ‘script.js’ file will be invoked. We are passing the source and destination textboxes as parameters. The source textbox will contain the CustomerID. The CustomerID will be looked up in the Customers table and the corresponding ‘ContactName’ will be retrieved in the destination textbox.

A cool'n'simple search page using Google AJAX Search API, and some DHTML

2010-09-27T04:08:00.000-07:00

Introduction

In this article I'll demonstrate how easy it is, to create a usable webpage with some advanced technologies (such as fast asynchronous web search) in a very simple way, using a public API.

Background

I've created this page since I wanted:

1. A search oriented homepage that uses google as it's engine
2. To be able to search and re-search without needing to point the cursor to the search field, nor use a lot of tab keystrokes
3. A simple way to search my blog
4. A cool root for my personal website

Using the code
Step 1: Initialization

The first thing we are going to do, is to create a minimal webpage markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>My Cool'n'Simple Search Page</title>
</head>
<body>
    <h1>My Cool'n'Simple Search Page</h1>
</body>
</html>

Step 2: Make room

Now we will add a search field, and make room for the search results:

<div id="queryContainer">
    <input type="text" name="query" id="query" />
</div>
<div id="searchcontrol"></div><br />
<div id="branding">Powered by Google</div>

The query input field is wrapped in a div for styling purposes

Step 3: Style it up a little

We will add some css rules in order to make our page look a little bit nicer. We'd want a readable font, some space between the input query and the results, a clean look for the input, and make it all at the centered in the page

<style type="text/css">
body
{
    font-family: verdana;
    text-align: center;
}
#queryContainer
{
    margin-bottom:2em;
    width: 80%;
    margin-left:auto;
    margin-right:auto;
}
#query
{
    border:1px solid silver;
    width: 100%;
}
#searchcontrol
{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}
.gsc-control 
{ 
    width: 100%; 
}
</style>

We have also set the gsc-control class to maximum width. The current version of Google AJAX Search creates the results in a html element with width=300px. We want it to occupy the whole width of its container so we override Google's default setting

Step 4: Applying Google's Magic

This step was assembled with the help of the Google AJAX Search API documentation, at http://code.google.com/apis/ajaxsearch/documentation/
So we will add the next declaration to our page's section:

<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" 
      rel="stylesheet" />
<script type="text/javascript" 
   src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR_KEY">
script>

Please note that "YOUR_KEY" should be replaced by a key that you can get at http://code.google.com/apis/ajaxsearch/signup.html
Now we'd add the next javascript code to the section:

var searchControl window.onload = function() {
    onLoad();
}
function onLoad() {
    // Create a search control

    searchControl = new GSearchControl();

    // add a regular web search, with a custom label 'web'

    var webSrearch = new GwebSearch();
    webSrearch.setUserDefinedLabel("web");
    searchControl.addSearcher(webSrearch);

    // add a site-limited web search, with a custom label

    var siteSearch = new GwebSearch();
    siteSearch.setUserDefinedLabel("KenEgozi.com");
    siteSearch.setSiteRestriction("kenegozi.com");
    searchControl.addSearcher(siteSearch);
                
    // add a blog search, with a custom label

    var blogsSrearch = new GblogSearch();
    blogsSrearch.setUserDefinedLabel("weblogs");
    searchControl.addSearcher(blogsSrearch);

    // setting the draw mode for the Google search

    var drawOptions = new GdrawOptions();
    // use tabbed view

    drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
    // set the input field (instead of the default one)

    drawOptions.setInput(document.getElementById('query'));
    // actually write the needed markup to the page

    searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
    // set the google logo container

    GSearch.getBranding(document.getElementById("branding"));
}

And we're almost done

Step 5: Adding a little DHTML Mojo

Now we'll add the ability to type anywhere on the page and get the search field updated. We'll achieve that by adding this simple javascript to the previous block:

var query = null;
document.onkeydown = function(event) { kd(event); };
function kd(e) {
    // make it work on FF and IE

    if (!e) e = event;
    // use ESC to clear the search results

    if (e.keyCode == 27)
        searchControl.clearAllResults();
    // get the input field

    if (query == null)
        query = document.getElementById('query');
    // and move the focus in there

    query.focus();
}

Salajax: simple Ajax library solving back button and bookmarks for Ajax web applications

2010-09-27T03:45:00.000-07:00

Salajax is a simplified Ajax library that handles back buttons, bookmarks and is extremely simple to use. Yes, Ajax is great. It does have some minor issues though, like the back button not working and the inability to use bookmarks. This library provides a simple class that will handle all these issues and more, without you having to think about it too much.
The Simple Ajax Library Ajax class (Salajax) tries to:

Make the back button work with Ajax
Make bookmarks work with Ajax
Run JavaScript contained in the Ajax response
Keep the .NET Viewstate
Submit forms as an Ajax request
Specify OnStart and OnEnd JavaScript functions to call
Specify an OnError JavaScript function to call when the Ajax response is an error
Set the HTML to display when updating a div with an Ajax request
Set the HTML to display when there is an error making the Ajax request
Be extremely simple to use

Basically, I'm hoping that the Salajax class will make it very easy to do everything and anything you could possibly want to do using Ajax.

Background

This article presents a simplified Ajax library written in JavaScript. Hopefully many developers will find it useful. Ajax is an exciting new technology that will change the way we develop our web applications. That was the introduction to the fist article I wrote on Ajax, presenting a simplified Ajax library with only two methods. I called it SAL, for Simplified Ajax Library.

Yes, Ajax was the big buzzword. It was going to revolutionise the web and the way we developed applications. Then somebody noticed a few minor problems, i.e. the back button did not work properly; users would most likely end up at the previous site they were visiting or become confused. Also, developers found that they couldn't run the JavaScript that was returned in the Ajax responses, plus more problems.

That's why I decided to build the next simplified Ajax library or SAL version 2. Things I wanted to add at the beginning were: making it a self-contained class, making the back button work, accounting for Viewstate, and giving backwards compatibility with SAL v1. Things I added on the way were: OnEvents, having customisable HTML when updating or at an error, and getting bookmarks to work. Also, updating multiple sections seems to be run on different threads now.

Not all the code is mine. I found some code on the internet that fits well and have maybe edited it. One example of this is the hash listener class, for which I have left the original comments of the author. However, a lot of the code is written by me. I can't guarantee that this will work on all browsers, however. It really does use a lot of complex JavaScript to make the back buttons work, etc. I have tested it in FireFox 2.0.0.3 and IE 6.0.2900.2180; it works well with those.

Using the code

Well, initially you will have to include the JS file in the head of your page like this:

<script language="JavaScript" src="Salajax.js">script>

Here is the comment contained at the top of the Salajax.js class:

/*
The Salajax Class.
Ajax class that allows use of the back button and bookmarks.
Written by Nigel Liefrink.

Usage:
    //set up the Salajax settings. Do this in the  of the page
    var SAL = new Salajax();
    sal.Debug = 0;
    sal.EnableBackButton(true); //turns on the back buttons.
    sal.EnableBookmarks(true); 
        //saves state in the clients cookies so bookmarks will work
        //provided they havn't deleted their cookies.
    sal.OnStart = 'TestOnStart()'; //enables a script to run before 
        //the request is made. e.g. change pointer/icon/loading section of 
        //page.
    sal.OnEnd = 'TestOnEnd()'; 
        //enables a script to run after the request is returned. 
        //e.g. change pointer/icon/loading section of page.
    sal.PresendHtml = '';
        //When calling  setInnerHTMLFromAjaxResponse the div will 
        //be updated with this html, set to null to turn off this feature.
    sal.OnError = 'DefaultOnError()';
        //set a function to pass to if there is an error.
    sal.OnErrorHtml = 
        'Error!'; 
        //When calling  setInnerHTMLFromAjaxResponse and there is 
        //an error, this will be displayed. set to null to turn off 
        //this feature.
    sal.EvalScripts = true;  
        //if set to true, will evaluate any JavaScript in the responseText. 
        //NOTE: to use/override functions returned in your responseText you 
        //must declare the functions in your Ajax response like this:
        //         var FunctionToChange = function(var1,var2) 
        //not like this : function FunctionToChange(var1,var2)
        //         { 
        //             //do stuff
        //         }
        //            
    this.KeepDotNetViewState = true; 
    //if set to true will post the current viewstate when using .NET 
    //not recommended when using bookmarks as viewstate can be huge.
    //end setting the Salajax settings.
    
    
    Some examples of main usage in a web page: (onclick events etc...)
    
    sal.PassAjaxResponseToFunction('/myscript.*?getsomehtml=1', 
        'FunctionToHandleTheResponse');
    sal.PassAjaxResponseToFunction(document.forms[0], 
        'FunctionToHandleTheResponse');

    sal.SetInnerHTMLFromAjaxResponse('/myscript.*?getsomehtml=1', 
        'id_of_div'); //using get and string of id div.
    sal.SetInnerHTMLFromAjaxResponse(document.forms[0], 
        object);//using post and object to change the innerhtml of.
    sal.SetInnerHTMLFromAjaxResponse('form', 
        'id_of_div');//using post ('form' will submit forms[0]'), 
                     //object to change the innerhtml of.

    Read function definitions for more detail.
    Note that initial values are all false for backward compatability.
*/

If you want back buttons to work for some calls but not others, simply create another instance of the class.

var SAL = new Salajax();
sal.EnableBackButtons(true)
//in the web page

<input class="code-string" type="<span" "submit" value="OK" 
    onclick="sal.SetInnerHtmlFromAjaxResponse('form','div_1');" />

var sal2 = new Salajax();
//in the web page

<input class="code-string" type="<span" "submit" value="OK" 
    onclick="sal2.SetInnerHtmlFromAjaxResponse('?gethtml=1','div_2');" />

For backwards compatibility with SAL version 1, I have included these two functions at the top of the script. THey demonstrate how you can use many instances to handle Ajax requests differently.

/* Backward compatability. */
function PassAjaxResponseToFunction(urlOrForm, callbackFunction)
{
    var SAL = new Salajax();
    sal.PresendHtml = null;
    sal.OnError = '';
    sal.ErrorHtml == null;
    sal.PassAjaxResponseToFunction(urlOrForm, callbackFunction);
}

/* Backward compatability. */
function SetInnerHTMLFromAjaxResponse(urlOrForm, obj_id)
{
    var SAL = new Salajax();
    sal.PresendHtml = null;
    sal.OnError = '';
    sal.ErrorHtml == null;
    sal.SetInnerHTMLFromAjaxResponse(urlOrForm, obj_id);
}

There's not much more to it than that. Just create the instance, set the properties and then start using the 2 main functions of the Salajax class in JavaScript events. To get the demo project working, unzip the Salajax_demo.zip file to an appropriate location like wwwroot, but anywhere will do. Create a virtual directory in Information Services Manager/IIS under the "Default Web Site" with an alias of "sal_demo" and the directory path referencing the sal_demo folder you unzipped. Opening the project in Visual Studio, you should now be able to compile, debug and run the demo project.

Points of interest

Cookies can only hold 4 Kb of data. So if you are keeping a lot of data in your forms, such as the .NET Viewstate, keeping bookmarks and the back button working with Ajax may not be the ideal solution for you.
Threading for each of the JavaScript calls now seems to work differently -- multiple threads -- now that the calls are wrapped up in an instance class.
The complexity of the JavaScript used to make the back button work makes me think that this code will most likely not be compatible with some browsers. It would be good to get feedback on compatibility from people.

Dragging and dropping with ASP.NET 2.0 and Atlas

2010-09-27T03:15:00.000-07:00

Introduction

This tutorial is intended to help readers understand how certain aspects of Microsoft's new AJAX Extensions technology works. AJAX Extensions is intended to simplify the development of AJAX-style functionality. As with all technologies, however, to use a tool well, it is important to understand the underlying technology that Atlas abstracts. One of the key ASP.NET AJAX abstractions is the new XML markup syntax developed to make coding with AJAX easier (originally included with the core Atlas files, XML markup is now a part of the CTP called AJAX Futures). With XML markup, developers can modify their code declaratively. However, there are times when a developer may want to be able to change her code programmatically, and in order to accomplish this, she will need to understand that underneath the markup abstraction, she is actually dealing with good 'ol JavaScript and some custom JavaScript libraries developed by Microsoft. In order to demonstrate the relationship between the Atlas declarative model and the programmatic model, I will go through a series of examples in which the same task will be accomplished both declaratively and programmatically. I will be demonstrating how to use the PreviewDragDrop library file to perform basic drag-drop operations as well as setting up drop zones.

Background

As I write this, Microsoft has made some important changes to ASP.NET AJAX for the Beta 2 that have the unfortunate side-effect of breaking most of the original Atlas implementation, and has required a bit of rework of the original samples. These revised examples apply to the Beta 2 of ASP.NET AJAX. Future releases of AJAX Extensions may affect the accuracy of this tutorial. I will attempt to update the code as new versions of AJAX Extensions become available. AJAX Extensions works with .NET 2.0, and will work with Orcas when it is released.

I. Declarative Drag Drop

The first task is to use XML markup to add drag-drop behavior to a div tag. By drag and drop, I just mean the ability to drag an object and then have it stay wherever you place it. The more complicated behavior of making an object actually do something when it is dropped on a specified drop target will be addressed later in this tutorial. To configure your webpage to use ASP.NET AJAX, you will need to install the Microsoft.Web.Extensions.dll into your Global Assembly Cache. You will also need a reference to the library Microsoft.Web.Preview.dll. Finally, you will need to configure your web.config file with the following entry:

<system.web>
    <pages>
        <controls>
            <add tagPrefix="asp" namespace="Microsoft.Web.UI" 
                 assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, 
                 Culture=neutral,  PublicKeyToken=31bf3856ad364e35" />
            <add tagPrefix="asp" namespace="Microsoft.Web.UI.Controls" 
                 assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, 
                 Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add tagPrefix="asp" namespace="Microsoft.Web.Preview.UI" 
                 assembly="Microsoft.Web.Preview" />
        </controls>
    </pages>
</system.web>

You will need to add an Atlas Script Manager control to your .aspx page and configure it to use the PreviewDragDrop library file:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference 
             Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" />
 <asp:ScriptReference 
      Name="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js" />
    </Scripts>
</asp:ScriptManager>

Add the div object you want to make draggable, and make sure it has a drag handle:

<div style="background-color:Red;height:800px;width:600px;">
    <div id="draggableDiv" 
         style="height:100px;width:100px;background-color:Blue;">
        <div id="handleBar" 
             style="height:20px;width:auto;background-color:Green;">
        </div>
    </div>
</div>

Finally, add the markup script that will make your div draggable:

<script type="text/xml-script">
    "http://schemas.microsoft.com/xml-script/2005">
        
            "draggableDiv">
                
                    "handleBar"/>
                behaviors>
            </control>
        </components>
    </page>
</script>

And with that, you should have a draggable div
tag. The example demonstrates the simplicity and ease of using the
declarative model with AJAX Extensions. In the terminology being
introduced with AJAX Futures, you have just used declarative markup to
add floating behavior to an HTML element.

II. Imperative Drag Drop

To accomplish the same thing using a programmatic model requires a bit more code, but not much more. It is important to understand that when you add an AJAX Extensions Script Manager component to your page, you are actually giving instructions to have the AJAX Extensions JavaScript library loaded into your page. The AJAX Extensions library, among other things, provides client-side classes that extend the DOM and provide you with tools that allow you to code in a browser agnostic manner (though there currently are still issues with Safari compatibility). These client-side classes also allow you to add behaviors to your HTML elements.
To switch to an imperative model, you will need to replace the XML markup with two JavaScript functions. The first one is a generic script to add floating behavior to an HTML element. It leverages the AJAX Extensions client-side classes to accomplish this:

function createDraggableDiv() {
    var panel= document.createElement("div");
    panel.style.height="100px";
    panel.style.width="100px";
    panel.style.backgroundColor="Blue";
    var panelHandle = document.createElement("div");
    panelHandle.style.height="20px";
    panelHandle.style.width="auto";
    panelHandle.style.backgroundColor="Green";
    panel.appendChild(panelHandle);
    var target = $get('containerDiv').appendChild(panel);
    addFloatingBehavior(panel, panelHandle);
}

You will then just need to add a button to the page that calls the "createDraggableDiv()" function. The new HTML body should look something like this:

<input type="button" value="Add Floating Div" onclick="createDraggableDiv();" />
<div id="containerDiv" style="background-color:Purple;height:800px;width:600px;"/>

This will allow you to add as many draggable elements to your page as
you like, thus demonstrating the power and flexibility available to you
once you understand the relationship between using AJAX Extensions
declaratively and using it programmatically. As a point of reference,
here is the complete code for the dynamic drag and drop example:

<%@ Page Language="C#"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Imperative Drag and Drop II</title>
<script type="text/javascript">
        
        function createDraggableDiv() {
             var panel = document.createElement("div");
             panel.style.height="100px";
             panel.style.width="100px";
             panel.style.backgroundColor="Blue";
             var panelHandle = document.createElement("div");
             panelHandle.style.height="20px";
             panelHandle.style.width="auto";
             panelHandle.style.backgroundColor="Green";
             panel.appendChild(panelHandle);
             var target = $get('containerDiv').appendChild(panel);
             addFloatingBehavior(panel, panelHandle);
             }
            
            function addFloatingBehavior(ctrl, ctrlHandle){
                 $create(Sys.Preview.UI.FloatingBehavior,
                {'handle':
                    ctrlHandle}, null, 
                        null, ctrl);
                     }

script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
        <asp:ScriptReference 
           Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js"
/>
 <asp:ScriptReference 
   Name="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js"
/>
</Scripts>
</asp:ScriptManager>
<h2>Imperative Drag and Drop Code with javascript: 
         demonstrate dynamic loading of behaviors</h2>
<input type="button" value="Add Floating Div" 
          onclick="createDraggableDiv();"
/>
<div id="containerDiv" 
   style="background-color:Purple;height:800px;width:600px;"/>
</form>
</body>
</html>

Ajax AutoComplete in ASP.NET

2010-09-27T02:55:00.000-07:00

Without using AjaxControlToolKit, we can implement AutoComplete Extender using pure Ajax Call. This article explains how to do make AutoComplete Extender.

OnKeyUp event helps you to fetch data from database with Ajax call. Here one Handler.ashx handles the AJAX request form Client. I add a Class file to handle database operations to better coding practice. Below I explain the database helper Class. Class has one method:

GetTable(string sqlQuery)

This returns DataTable after fetching data from database. And also includes Provide Class, this Class helps to get SqlConnection string.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
/// 
/// Summary description for DBHelper
/// 
public class DBHelper
{
    SqlConnection connection;
    SqlDataAdapter adapter;
    SqlCommand command;
    DataTable dataTable;
    public DBHelper()
    {
    }
    /// 
    /// 
    /// 
    /// 



passing SQL Query here
    /// DataTable object is returned
    public DataTable GetTable(string sqlQuery)
    {
        //creating new instance of Datatable
        dataTable = new DataTable();
        connection = Provider.GetConnection();
        command = new SqlCommand(sqlQuery, connection);
        //Open SQL Connection
        connection.Open();
            try
            {
                adapter = new SqlDataAdapter(command);
                adapter.Fill(dataTable);
            }
            catch
            { }
            finally
            {
                //Closing Sql Connection 
                connection.Close();
            }
        return dataTable;
    }
}
public class Provider
{
    public static SqlConnection GetConnection()
    {
        //creating SqlConnection
        return new SqlConnection(ConfigurationManager.AppSettings["sqlConn"]);
    }
}

Now we can look into Handler file. When request comes from Ajax Call from Client, it passes the data into our Database helper Class, handler file holds the data in DataTable. Result data are formatted in a table and written in the context. We can add JavaScript function for selecting the data, here api_helper.AddtoTaxtBox(selectedItem) manages client section of data.

Check Handler File

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data;
public class Handler : IHttpHandler {
    public void ProcessRequest (HttpContext context) {

        HttpRequest request = HttpContext.Current.Request;
        //checking string null or empty
        if (!string.IsNullOrEmpty(request.QueryString["name"]))
        {
            string name=request.QueryString["name"];
            //creating instance of new database helper
            DBHelper objDBHelper = new DBHelper();
            //creating Sql Query
            string sqlQuery = string.Format
        ("SELECT Name FROM User WHERE Name LIKE '{0}%'", name);
            //filling data from database
            DataTable dataTable = objDBHelper.GetTable(sqlQuery);

             string table = string.Empty;
            //table for hold data
            table = "

";             string td = string.Empty;             //checking datatable                 if (dataTable.Rows.Count > 0)                 {                     for (int i = 0; i < dataTable.Rows.Count; i++)                     {                         //adding table rows                         td += string.Format("
", dataTable.Rows[i][0].ToString());                     }                 }                 table += td + "


{0}";
                context.Response.Write(table);
        }
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
}

Now we can check how Ajax works. On Textbox onKeyUp event, call the Ajax code. It sends the entered value into server using Ajax and the result is displayed in div control under the search textbox.

<%@ Page Language="C#" AutoEventWireup="true" 

  CodeFile="Default.aspx.cs" Inherits="_Default" %>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">

  <title></title>

  </head>

  <body>

  <form id="form1" runat="server">

  <div>
<asp:TextBox ID="txtName" runat="server" 

  onkeyup="api_helper.callAjax();"></asp:TextBox>

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

  

  </div>

  <script language="javascript" type="text/javascript">
if (typeof (api_helper) == 'undefined') { api_helper = {} }
api_helper.doAjax = function(HandlerUrl, displayDiv) {

  var Req; try { Req = new XMLHttpRequest(); } 

  catch (e) { try { Req = new ActiveXObject("Msxml2.XMLHTTP"); }

  catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } 

  catch (e) { return false; } } } Req.onreadystatechange = function() {

  if (Req.readyState == 4) { var d = document.getElementById(displayDiv); 

  d.innerHTML = Req.responseText; } }

  Req.open("GET", HandlerUrl, true); Req.send(null);

  }
api_helper.callAjax = function() {

  var text = document.getElementById("txtName").value;

  if (text != "") {

  var requestUrl = "Handler.ashx?name=" + text;

  var displayDiv="myDiv";

  api_helper.doAjax(requestUrl, displayDiv);

  }

  }
api_helper.AddtoTaxtBox = function(txt) {

  document.getElementById("txtName").value = txt;

  document.getElementById("myDiv").innerHTML = "";

  }

  </script> 

  </form>

  </body>

  </html>

Thanks for reading this article. Please feel free to comment.

Making Cross Domain jQuery AJAX Calls

2010-09-27T02:48:00.000-07:00

Today's web browsers do not allow web pages to make cross-domain Ajax calls. By this, I mean that if you are at www.ajax.com and try to make an Ajax call (a call using the XmlHttpRequest object), the browser would not allow this to happen. Why? For security purposes that I cannot currently name.

However, at some point you get to a project where you're interfacing this third-party site that needs to talk to your main site, or some other similar situation where the only way you're going to get the data you need from point a to point b is with some JavaScript magic. Here is how to accomplish it.

How to get/post data using jQuery/JavaScript (JSONP)

The short answer: its not Ajax at all, its JSONP. Yes, JSONP is not Ajax. I just learned this today. Like I said earlier, browsers do not allow XHR/Ajax cross-browser requests. JSONP avoids this by making a request for a script file-- no Ajax at all. Let me explain:

Instead of accessing the XHR object, the browser first creates a new script tag to inject into the HTML DOM
The script tag's URL is set to the URL you're looking to get/post(using HTTP GET) data to
The script tag is injected into the page, causing...
The request is sent to the server, even if it's cross-domain
The server returns the data in the form of a JavaScript function call
The browser receives the data and executes the function call

jQuery Code

//use a get to post a querystring value via HTTP GET to an asp.net webhandler
$.getJSON("http://www.example.com/get-post.ashx?
    var1=var1value&callback=?",function(data){
     //really no need to do anything here, we're just posting data
     //but this will output success
     alert(data.return);
});

ASP.NET Generic Handler/webhandler Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace jsonp_test
{
    /// 
    /// Summary description for $codebehindclassname$
    /// 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class get_post : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string callback = "";
            try
            {
                if (!string.IsNullOrEmpty(context.Request["callback"]))
                {
                    if (!string.IsNullOrEmpty(context.Request["var1"]))
                        SaveData(context.Request["var1"]);
                    callback = context.Request["callback"];

                    context.Response.Write(callback + "({ \"return\": \"Success\" })");
                }
            }
            catch (Exception exc)
            {
                //hopefully this error doesn't contain any quotes... you know?
                context.Response.Write(callback + 
            "({ \"return\": \"" + exc.Message + "\" })");
            }
        }

        private void SaveData(string value)
        {
            //do something with the var1 posted to us
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

So what we effectively have here is the setup for ASP.NET cross domain Ajax calls using jQuery.

How to do Cross-domain Calls to Others' Servers: YQL

What if you need to do a get, but don't have the ability to make the page it's posting to return a JSONP response? Using YQL is a great way to achieve this.

YQL is a way to query the internet like it is a database. For example, one could easily run:

select * from html where url="http://www.microsoft.com"

and receive a JSONP return containing all of the site's HTML. You could also do the following:

select * from html where url="http://www.mircorosft.com?var1=var1value"

and HTTP GET values to the server. YQL does not allow this to happen on any area of any site that is blocked by the robots.txt file. Here's the full example code:

//feel free to add querystring vars to this
var myurl="http://www.example.com/get-post.ashx?var1=var1value&callback=?";
//make the call to YQL 
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                "q=select%20*%20from%20html%20where%20url%3D%22"+
                encodeURIComponent(myurl)+
                "%22&format=xml'&callback=?",
        function(data){
          if(data.results[0]){
            //this data.results[0] is the return object you work with, 
            //if you actually want to do something with the returned json
            alert(data.results[0]);
          } else {
            var errormsg = '
Error: could not load the page.
';
            //output to firebug's console
            //use alert() for other browsers/setups
            conole.log(errormsg);
          }
        }
      );

Getting Started with iPhone and iOS Development

2010-09-27T02:02:00.000-07:00

Introduction
This is a first in a series of articles to get some one up and running with iOS development. iOS is the operating system that runs on the iPhone, iPad, and iPod Touch. While I will use an iPhone for my example code you could apply the code to all three devices.

Pre-requisites
To take advantage of this article you’ll need to already have an understanding of object oriented concepts and you’ll need to know a C-language (C, C++, C#) and know what is meant when I use terms such as object, class, function, method, variable, and so on. I’m making the assumption that you have never looked at Objective-C. I’ll introduce you to the Objective-C language and then will walk you through some programming scenarios that I think will best get you started. As things are in any programming environment there will be more than one way to get a task accomplished or more than one syntax to express something. Exhaustively presenting all the possible ways that something can be expressed is not reasonably possible. So keep in mind that there are other ways of accomplishing what I explain here.

Selecting Hardware
A minimally sufficient development environment for iOS applications is composed of just an Intel based Mac. Owning an iPhone, iPod, or iPad is optional but extremely helpful.

If you are looking for the absolute best hardware to use for developing for iOS it’s easy to say “get the top of the line Power Mac with all the options you can.” But for most of us (myself included) there’s going to be a cost constraint when selecting the development hardware that you use. The absolute minimum hardware configuration that you need will be an Intel based Mac running Snow Leopard. The least expensive Mac that you can purchase new is the Mac Mini. Compared to the price of the lowest cost PC that you can purchase the Mac Mini will look quite pricy. But I’d suggest shelling out a little more money to get a portable computer. With the Mac Mini you’ll be confined to developing when you are in the room in which it is setup. With one of the Mac Books you might also find yourself developing when you are relaxing in front of the TV or in some other comfortable spot.

Depending on your needs if you find that you don't need the latest version of the iPhone for your intended applications it's a good idea to shop around for bargins when Apple is releasing either a new iPhone or new Macs. I was able to acquire an inexpensive iPhone from some one else that was upgrading and found a Mac Mini on sale from a store that was clearing their shelves for newer units. (I've since then moved onto a Mac Book Pro after wanting to be able to develop from othe rooms in the house)

My initial setup was made of an intel Mac Mini I found on sale and a contract free iPhone I purchased from some one upgrading to the next generation phone

You don’t need to have an iPhone, iPod, or iPad to get started (hereon I will collectivly refer to these devices as iOS devices). The SDK comes with simulators (or emulators if that’s the terminology that you are accustomed to). But the simulators have limitations; you’ll find that you’ll want to have real hardware when you are developing anything that uses an accelerometer.

If you plan to use real hardware for your testing it’s not sufficient to have just the needed hardware and software. You will also need to have a subscription to Apple’s iPhone Development Program (cost about 99 USD per year).

Do I need to have a Macintosh?
I get a lot of traffic to my personal web site because of a service I reviewed that was designed to allow those without a Mac to do iPhone development. I don’t want to go into a discussion of the service here so I’ll just tell you yes, it is mandatory that you have a Macintosh. The only sanctioned hardware for iPhone development is an Intel based Macintosh. Don’t waste your time trying to circumvent this.

Installing the SDK
The iPhone SDK is already present on the installation disk for OS X Snow Leopard. Don’t use that one. There will always be a more up to date version available for download. Weighing in at about 3 gigs the SDK could take some time to download depending on the speed of your connection. To get the installation go to http://developer.apple.com. You’ll see a link to the iPhone Dev center. Clicking on it will take you to the page for the SDK download. Apple sometimes has beta versions of the SDK available for download available. But unlike the current version of the SDK the beta versions are not available for all to download. You must be a registered developer with a subscription to have access to them.

The DMG for the SDK will download and automatically mount. Run the installation and after it finishes you’ll be ready to get stated with development.

Getting Started with Objective-C
Programs created for the iPhone are written in Objective-C. Objective-C is often described as a strict superset of the C language. Others call it C with object oriented concepts applied. The first time I saw it I have to say I felt like I had no idea what I was looking at. It doesn’t look like any other programming language that I know. But after you get through your first few programs you’ll find it to be much easier to follow. Being a strict superset of C if you already have algorithms that are written in C you should be able to port them over to the iPhone. The following chart shows some expressions that mean close to the same thing in C and Objective-C.

C/C++	Objective-C
`#include "library.h"`	`#import “library.h"`”
`this`	`self`
`private:`	`@private`
`protected:`	`@protected`
`public:`	`@public`
`Y = new MyClass();`	`Y = [[MyClass alloc] init];`
`try, throw, catch, finally`	`@try, @throw, @catch, @finally`

Some expressions that mean the same (or almost the same) in C/C++ and Objective-C.
Within Objective-C both your class definitions and objects instantiated from those classes are instances of a struct called ‘id.’ The definition of id is as follows:

typedef struct  objc_object {
     Class* isa;
} *id;

Since this is the foundation of all objects within Objective-C you will find an “isa” member on every Objective-C object that refers to its type data. Instances of “id” are all pointers so you can distinguish one from another by comparing their addresses. There is a special id value named nil whose pointer value is set to zero.

Classes
In Objective-C you declare a class’s interface separate from its implementation. You have probably seen a similar separation of interface and implementation in C++ programs where a classes interface is defined in a *. h file which the implementation is in a *.cpp file. Likewise in Objective-C the interface is defined in a *.h file and its implementation in a *.m file.

Every class you create in Objective-C should either directly or indirectly derives from the NSObject base class. The base class doesn’t look to do much at first glance but it contains functionality that the runtime need for interacting with the object. You don’t want to have to implement this functionality yourself.

Class Interface Declaration
To declare a new class you start off by declaring the classes interface. The class interface declaration starts with the @interface compiler directive and ends with the @end directive. You’ll see a set of open and close curly-brackets within a class interface declaration. Just remember that the closing bracket is not the end of the class interface definition! Here is a generic class definition

@interface YourClassName: TheSuperClass
{
     instance members
}
Message Declarations
 
@end

The declaration for the instance members doesn’t differ from one you might expect from one of the other C languages.

BOOL  isValid;
float width;
NSString* name;

A class automatically has access to all the classes in its inheritance ancestry. So you can refer to classes of any of its base types without doing anything special. If you are referring to a class that is not in its inheritance chain then you will need to make a forward declaration for that class. The following makes a forward reference to two classes, Employee and Accountant.

@class Employee, Accountant;

The declaration of messages is different. A message can either be associated with the class or associated with an instance of that class. Class methods are preceeded with a plus (+) while instance methods are preceded with a minus (-). The default return type of class messages are id instances. To change the return type to something else you’ll need to put a return type in parens just before the class name. Note that this is the same syntax that you would use to cast a variable from one type to another. Here’s an example of a simple message declaration

- (int)GetSize;

Message parameters immediately follow a message name. They are colon delimited and their types are indicated with the same syntax that one would use to cast to a different type.

-(float) Power:(float)width:(float)height;

Class Implementation
The class implementation is in a *.m file. Just as you would in C++ you will need to include the classes header file when you are writing the implementation. Instead of using an #include directive to do this you will use an #import directive. The syntax for declaring the implementation is similar to the syntax for declaring the interface, only you replace the @interface directive with an @implementation directive. One possible syntax for starting off the implementation follows.

#import “YourClass.h”
@implementation YourClass
   your message implementations go here
@end

Optionally you could re-declare the instance variables and super class here, but it’s not necessary. The message implementations start off the same way as a message. But instead of terminating the declaration with a semicolon(;) you append a curly bracket pair enveloping your implementation.

- (float)square:(float)x
 
{
     return x*x;
}

Methods, Messages, and Object Communication
Most object oriented material you come across will refer to messages being sent among objects. Most of the time you’ll see this implemented through methods. In most cases the words method and message can be used interchangeably. Objective-C sticks with using the terminology “message.” So I’ll adhere to that standard within this document.

The syntax for sending a message (which means the same thing as “calling a method”) is to enclose the name of the target object and the message to be passed within square brackets. So in C++/C# you may have send a message using the following syntax

myObject.SomeMethod();

Within Objective-C you would accomplish the same thing with the following:

[myObject SomeMethod];

Passing parameters to messages is a little different than what you are used to. For one parameter things make perfect sense and don’t need much of an explanation. Just place a colon after the name of the message followed by the parameter value.

[myObject SomeMethod:20];

When you want to pass more than one argument things could potentially look messy.

[myObject SomeMethod:20:40];

As you more arguments are added to a message the code could potentially become less readable; I wouldn’t expect a developer to memorize the parameters that a method takes. Even if he or she did then there’s still mental effort involved in identifying what parameter is associated with which value. For clarity you could do something like this:

[myObject SomeMethodA:20 B:40];

In the above it appears that I’ve named the parameters ‘A’ and ‘B’ and that parameter ‘A’ is oddly concatenated to the message name. What you may not have realized is that the parameter names and colons are all parts of the message name. So the full name of the message is SomeMethodA:B:.

If a message returns an object a message you can pass a message to the returned message through a nested call. In C/C# you would have code that looks like this:

myObject.SomeMessage().SomeOtherMessage();

Whereas in Objective-C the same thing would be accomplished with this

[[myObject SomeMessage] SomeOtherMessage];

Prototypes
Prototypes are much like weakly implemented interfaces. In other programming languages if a class implements an interface then within the classes declaration there is a statement that shows that it is implementing a certain interface. With prototype the class only needs to implement certain methods to conform to a prototype. There doesn't need to be any mention to the prototype definition that it is conforming to.

Class Instantiation and Initialization
An instance of a class is instantiated using the alloc method of the class. alloc will reserve the memory needed for the class. After the memory is allocated you’ll want to initialize it. Every class that has instance members will need to have an init method defined.

myObject = [[MyClass alloc] init];

The first time I saw the above pattern I made the mistake of thinking that it was equivalent to the following:

myObject = [MyClass alloc];
[myObject init];

They are not equivalent. The value returned by init may not be the same as the value returned by alloc. So you should always combine the alloc and init messages when doing the assignment.

When you implement your own initializer for a class the initializer should either return self to signal that it was successful or nil to signal that it was unsuccessful. The return type for an initializer should always be id. This is to explicitly show that the type returned by the initializer may be of another type.

If you need to pass a parameter to your initializer then it will generally have init as the prefix for the initializer name. For example if I had an initializer that required a date I may call it initWithNSSDate.

Memory Management
Objective-C classes keep track of a reference count. The count can be read through -(NSUInteger)retainCount; at any time (though other than satisfying cutiousity there aren't many scenarios that call for needing to do this). When the reference count of an object reaches zero then it is released. For the most part the details of this reference counting are abstracted away and the methods related to reference counting are presented as methods for taking ownership of an object (which increments the reference count) or relinquishing ownership of the object (decrementing the reference count).

The general rule is that if you've created an object with any method prefixed with alloc or new or had copied the object from an existing object then you are responsible for releasing the object. If you've taken ownership of an object (with retain) then you must also release it. Note: If you don't own it then don't release it. Calling autorelease on an object will add it to a pool of objects to be released and deallocated at some point in the future.

Copying an Object
When copying an object if that object's member variables contain pointers to other objects there are two ways to go about copying it. On way is to copy the pointers from the original object to the object being created. This method of copying (also called a shallow copy) will result in both the new object and the original object to share the same instances of objects that make up their members. So if a change occurs within a member object of one class it will also afect the member within the other since they are really the same instance. The other method of copying is to create new isntances of the member objects when the new object is created. The end result of this is that changes to an instance object on one instance of the object will have no impact on the other. The original and copied object are completly independent in this case. Both approaches have their advantages and disadvantages when one looks at the result that the two copy methods in terms of memory consumption and potential side affects. There can exist scenarios that have a mixture of shallow and deep copy techniques. If you created a class and implemented a deep copy but one of the instance members implements a shallow copy then you could end up with an instance member of an instance member refering to the same object as an instance member of an instance member in the object you just copied. (that's potentially confusing, but I can think of no clearer way to say it)

There should be consistency between how a class's copy method works and how the classes set methods work. If the set method on the class creates new new instances when performing assignment the the copy method should be a deep copy. If the set method saves the instance that is passed to it then the copy method should be a shallow copy.

-(void)SetMyMemberVariable:(id)newValue
{
    [myMmeberVariable autorelease];
    myMemberVariable = [newValue copy];
}

Implementation of a set method that creates a new isntance of an object.

-(void)SetMyMemberVariable:(id)newValue
{
    [myMemberVariable autorelease];
    myMemberVariable = [newValue retain];
}

Implementation of a set method that copies a reference to existing instance of object.

Low Memory Conditions
The user interface for your iOS programs will be controlled through a class derived from UIViewController. There are two methods on the class that are involved in low memory handling. One is didReceiveMemoryWarning which was in existence before iOS 3. As of iOS version 3 and later there is a method named viewDidUnload. When the device is low on memory the OS will destroy the views if it knows that the views can be reloaded and recreated again. When this method is called your class should respond by releasing its references to view objects.

Constructing Hello World
If you’ve skipped the Objective-C introduction and tried to jump straight into creating a program you are about to be lost in a sea of cryptic notation and nonsensical glyphs. I’ve you’ve read though the primer then you’ll have no problem understanding what follows. We are going to build a “Hello World” program. The program will have one button and a text field. When someone clicks on the button the text field will display the words “Hello World.” I’ll also be taking this as an opportunity to cover some concepts that would otherwise not make sense in the absence of this exercise.

Using either the Finder or Spotlight startup Xcode. When the Xcode welcoming screen appears select the option to “Create a new Xcode project”.

Ensure that “Application” is selected under iPhone OS to see a list of the type of iOS projects that you can create. Select “View-based Application” and make sure that the “Product” dropdown has iPhone selected. Once you’ve done this click on the “Choose” button end type “MyHelloWorld” when prompted for the name of the project.

A new project is generated and at this time is in a state such that it can be run. Make sure your iOS device is not connected to the computer (if you try to deploy to your own personal device right now it will fail) and select “Build and Run.” Your project will be compiled and copied to the emulator and run. The result is pretty boring looking; it is just a blank screen since we haven’t added anything to the user interface yet. You can click on the red button in Xcode to stop the program When the program terminates you’ll see it’s icon in the iPhone simulator. It’s just a plain white rounded square. Let’s change that.

If you want to change the program’s icon make a new 57x57 pixel PNG image. Don’t worry about rounding the corners or doing the other things that make it look iPhone styled; that will happen automatically for you. Once you’ve made your image in your editor of choice navigate to it in the Finder. Click-and-drag the icon to the Resources folder in Xcode. You’ll be asked whether you want to copy the file into the project’s folder or if you want to only copy a reference. It is usually a good idea to copy the file.

In the Resources folder find the file HelloWorld-Info.plist and click on it. A *.plist file is a property list that contains some general information about the application. Clicking on the plist file will cause the property editor to open. One of the available properties is named “Icon.” Double-click on the property sto begin editing it and type the name of your icon file. The next time you build and run your application after you close it you’ll see your icon.

The Xcode window is divided into three panes. The horizontal pane on the top has a list of files in it. Look for the file named MyHelloWorldViewController.XIB and double-click on it. This will open up the interface builder.

The Interface Builder windows.

Among other windows you should see a blank iPhone surface ready for you to layout controls on it. If you don’t see this then double click on the “View” icon in one of the windows that appears to display the layout surface. Scroll down in the “Library” window until you see the Text-Field control. Drag an instance of this control onto the design surface somewhere on the upper half of the screen. Also drag a “Round Rect Button” to the design surface somewhere close to the text field.

Select the button and then go to the Identity tab in the properties window. Set the Name for the button to “MyButton”. Select the text field and set its name to “MyText”. Save your changes and then go back to Xcode and run your project again. This time you’ll see the text field and the button on the screen.

The tabs from left to right are Identity, Connections, Size, and Identity.

We want to change the program so that when the user clicks on the button the text “Hello World” displays in the text field. But if you look through our source code it will become apparent that neither the button nor the text field are immediately available for us to manipulate in the code.

IBAction and IBOutlet – Responding to Actions and Providing Feedback
We can have the button send a message to our code when it is clicked. We need to declare an IBMethod in our code so that the button has something to which it can send its message. Open “HelloWorldViewController.h” and in the line after the closing bracket for the interface definition add the following.

- (IBAction) myButtonWasClicked:(id)sender;

As you may have gathered from reading the Objective-C primer you’ll also need to add an implementation for this method to the HelloWorldViewController.m file. In the line after the @implementation directive type the following:

- (IBAction) myButtonWasClicked:(id)sender
 
{
     NSLog(@”The button was clicked”);
}

Open the HelloWorldViewController.xib in the interface builder. Holding down the control key click-and-drag from your button to the “File’s Owner” icon. A sub-menu appears allowing you to select a method. Select the myButtonWasClicked method.

Run the project and then type Shift-Command-R in Xcode to open the console. Whenever you click on the button you will see the text “The button was clicked” appear.

Our final goal was to display a message on the screen to the user; there’s more work to be done. While the IBAction methods allowed us to receive notification of something happening they don’t help much in actively changing the contents of the text field. We need to first get or hands on an instance of that text field. But the text field isn’t declared within our code. It is declared inside of the XIB file. To get a reference to the text field we must declare an outlet. An outlet is a variable that is automatically assigned a value by Cocoa at runtime.

Within the header file for the view type the following under the method that you created.

@property (retain) IBOutlet UITextField *myTextBox;

Copy the same thing into the area for the instance variables and remove the @property (retain) part from it.

In the implementation add the following

@synthasize myTextBox;

The code in the myButtonWasClicked method also needs to be changed. Within this method set the text on the myTextBox instance to “Hello World”.

myTextButton.text=@”Hello World”

The next step is to associate the text field with this property from the interface builder. From within the interface builder right-click on the “File’s owner” module and find the myTextBox outlet. While holding down the control key click-and-drag from the outlet to the text field. If you run the program now when the button is clicked “Hello World” will appear in the text box. We've only looked at the textbox. But the interactions with many other visual controls is the same. If you add a slider to the interface, an IBAction method to my class, and then associate the method with the slider I can receive notifications when the slider value is changed.

The last step is a cleanup task. As described in the low memory section if the iPhone becomes low on memory it will begin to destroy views to clear up memory. Well need to clear our references to the view objects when this happens. Also when the view is being deallocated we need to release ownership of the view objects we reference in our code. You can see how bow both of these were implemented in the -(void)viewDidUnload and -(void)dealloc methods in the full code below.

The source code below contains both our the helloWorld functionality along with displaying the value of a slider.

#import 
@class NSTextField;
 
@interface HelloWorldViewController : UIViewController {
    IBOutlet UITextField * myTextBox; 
    IBOutlet UISlider    * mySlider;
    IBOutlet UITextField * mySliderText;
}
@property (retain) IBOutlet UITextField * myTextBox;
@property (retain) IBOutlet UISlider    * mySlider;
@property (retain) IBOutlet UITextField *mySliderText;
 
- (IBAction) myButtonWasClicked:(id)sender;
- (IBAction) mySliderWasMoved:(id)sender;
 
@end

The class interface declaration from HelloWorldViewController.h

#import "HelloWorldFinalViewController.h"
 
@implementation HelloWorldFinalViewController
@synthesize myTextBox;
@synthesize mySliderText;
@synthesize mySlider;
 
- (IBAction) myButtonWasClicked:(id)sender
{
    NSLog(@"The button was clicked");
    myTextBox.text=@"Hello World";
}
- (IBAction) mySliderWasMoved:(id)sender
{
    NSLog(@"The Slider was moved");
    UISlider *slider = (UISlider*)sender;
    float sliderValue = [slider value];
    NSString* sliderValueText = [NSString stringWithFormat:@"The slider's current value is %f", sliderValue];
    mySliderText.text=sliderValueText;    
}
 
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return YES;
}
 
 //View is being destroyed to free memory. Clear
 //out our references to view obejcts. 
- (void)viewDidUnload {
    self.textBox=nil;
    self.mySliderText=nil;
    self.mySlider=nil;
}

// during a dealloc release our hold on the view objects
-(void)dealloc{
    [myTextBox release];
    [mySliderText release];
    [mySlider release];
    [super dealloc];
}
 
@end

The class implementation from HelloWorld.m

The two things to take from this example program are how to get a reference to a UI object created in the interface builder, and how to receive messages from UI objects.

Deploying to a Real Device
Now that you’ve written your first program those of you with a real device probably want to deploy it to that device. Before you can copy your program to a real device you *must* complete the App store registration with Apple. Until you do this you will not be able to complete the provisioning process.

Connect your iOS device to your computer. In Xcode change the dropdown so that instead of attempting to run the program in the simulator Xcode will run the program on an actual device. When you attempt to run the program you’ll get a failure notice stating that the device doesn’t have a provisioning profile. If you select “Install and Run” from the error dialog you’ll encounter another failure about the provisioning profile not being found.

To provision your device you’ll need to have your developer certificate. Go to the iPhone Developer Portal (http://developer.apple.com/iPhone) and log in with your apple ID. On the left hand side there is a link that will take you to the provisioning page. Click on the link and select “Launch Assistant” from the bottom of the page. Click on “Continue” when the Development Provisioning Assistant welcome window opens. On the next screen you’ll have toidentify the application you are developing. Click on “Create a new App ID” and select “Continue.” On the next string you enter a description or name for the application (be creative!). Following that you have to identify the Apple device that you are using for development. Select “Assign a new Apple device.” You’ll be asked for the device’s description and Device ID.

The Description can be almost any name. If you only have one iOS device then you really won’t care what you put in there. If you have more than one then you’ll want to put something here that will allow you to easily identify which device you were using at the time. The Device ID can be found in the Xcode Organizer. Switch back to Xcode and select the Window menu and then select “Organizer.” When the organizer opens you will see your iOS device listed on the left. Select it. You may see a button labeled “Use this device for development.” If you do then click on it. When your device information is displayed at the top of the screen look for the value labeled “Identifier” and copy it to your clipboard. Go back to the Development Provisioning Assistant and past it in Device ID and click on Continue. You’ll see a confirmation that your certificate was created. When you go to the next screen you need to assign a name to the profile you just created. After clicking on Continue two more times you will be able to download your provisioning certificate. After downloading your certificate go back to the Xcode Organizer and click on the “+” button in the provisioning area. In the window that opens navigate to your provisioning file and select it. Once you do this your device will be provisioned. You should be able to run the project on your device now. Every now and then when I go through the process of deploying the provisionin certificate to the device it doesn’t work. When this happens I have to disconnect and then reconnect my iDevice one or two times before it will work.

Watch Out, Provisioning Profiles Do Expire!
The provisioning profile copied to your device is only good for about three months. After it expires any executables on your device associated with the profile will cease to function. If you want to see when a device's provisioning profile expires you can view it in the Settings menu. Navigate to Settings->General->Profile to view your current provisions.

String Parsing, Formatting, and other Text Manipulation
The base class for strings is the NSString class. The NSString class is immutable, so the string it contains doesn’t change. There is also a subclass named NSMutableString whose contents can be changed. The NSString class stores Unicode characters. The length of a string can be probed through its length method and the character at a specific location in the string can be probed with the characterAtIndex method.

There are several ways that a string can be initialized. One way (that you’ve already seen by now) is to envelope literal text within a quotation marks and prefix it with the at-sign (such as @”Hello World!”). If you need to create a string from other data (such as an integer value) you can use the class method stringWithForm. The method takes a formatting string that is similar to the formatting strings that you may have used in C/C++. The following code results in the string “There are 12 items in a dozen.”

NSString* myString = [NSString withStringFormat:@”There are %d items in a dozen.”, 12];

If you have a numeric value represented as a string you can easily convert it back to a numeric value with one of the xxxValue methods (where xxx can be int, integer, double, bool, float, or long).

There are a lot of other string manipulation methods available and I can’t cover them all here. But I encourage you to glance through the NSString documentation to learn more about the string manipulation methods available. I well use a few more of the available methods as relevant within this document.

Data Persistence
There are multiple ways of persisting data on an iOS device. If you wanted to use traditional C-language IO you could use fopen and its related functions to manipulate files. I won’t cover that here. Instead I’ll cover a few of the solutions specific to iOS.

Getting your Application’s Storage Path
On iOS devices your application is sandboxed. There are only a few folders that your application can write to. There is a /Documents folder for information that you need to persist and be backed up regularly. There’s a /Cache folder where you can place information that should be available between launches but not backed up by iTunes. And there is a /tmp folder for information you only need while the application is running. It cannot read or write to any other location on the device. You can get the path to your application’s /Documents folder using the function NSSearchPathForDirectoriesInDomain(). This function exists for both iOS and Mac OS X. You’ll find that it won’t work with all of the options available; either because the option isn’t supported on iOS or because your application doesn’t have permission to use certain options.

This function returns an array of directories that meet a given criteria. Our initial use of it here is to retrieve a single directory so when we retrieve the path to our Documents folder we will get an array of one item. The first argument that we must pass to the function is the constant NSDocumentDirectory. As the name implies this tells the function that we want the Documents folder. The second parameter is the constant NSUserDomainMask. This specifies that we want to restrict our search to our applications folder.

NSArray *myPathList =
NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES);
NSString *myPath = [myPathList  objectAtIndex:0];

To construct a file name for our reading or writing purposes we only need to concatenate a file name to our path. NSString has a method just for that purpose.

NSString *myFilename = [myPath stringByAppendingPathComponent:@”fileName.txt”];

For temporary files there is a function that takes no parameters and returns a path that can be used for temporary files. Its name is NSTemporaryDirectory();

Having constructed your file name you can use it for one of the data persistence APIs.

PList
PList (or properly list) are easy to use. If you make an in-memory hierarchy of data using only a certain set of objects then that hierarchy can be written to a file or loaded foam a file all at once. As the developer you don’t have to worry about serializing your data. This is done for you. A disadvantage that come from using this solution is that even if you make a small change to your data you must rewrite the entire file; you can’t make incremental changes. The following are the classes that you can use when making an object hierarchy for a PList:

NSArray
NSData
NSDate
NSDictionary
MutableArray
NSString
NSMutableString
NSNumber

After you’ve built your object hierarchy you can save the structure and its data to a file using the writeToFile method. It needs a file name and a value for the atomically parameter. If Atomically is set to yes then instead of saving directly to the target file the data will be stored to a temporary file and then moved to the destination file name. It takes longer, but is much safer. If the device crashes you are less likely to end up with a file in a corrupted state. To load the contents of the file we can just instantiate the root element and use the initialization method initWithContentsOfFile. This method takes the file path as it’s only argument and will take care of building the entire hierarchy as it populates the data.
In the following code example I made use of a PList to save data to a file. I made a simple interface with three textboxes (for data) and two buttons to invoke the save and load functionality.
While not visisble very where there is also a label control below the buttons. When the data is loaded or saved the path to the file is displayed there. When the save button is clicked the contents of the text boxes are copied to an NSArray and saved to a files with the writeToFile method. When the load button is clicked a new NSArray is created and initialized with the initWithContentsOfFile method.

This is a screenshot of the data persistence example being built.
If you want to see whether or not the file is really saving run the program, save some text, and then close the program. If you run it again it will be able to reload the data.

#import 
 
@interface DataPersistenceExampleViewController : UIViewController {
    IBOutlet UITextField* textBox00;
    IBOutlet UITextField* textBox01;
    IBOutlet UITextField* textBox02;
    IBOutlet UILabel* storageLocationLabel;
    
    NSString* storagePath;
}
 
@property (retain) IBOutlet UITextField *textBox00;
@property (retain) IBOutlet UITextField *textBox01;
@property (retain) IBOutlet UITextField *textBox02;
@property (retain) IBOutlet UILabel *storageLocationLabel;
@property (retain) NSString *storagePath;
 
- (IBAction)saveButtonClicked:(id)sender;
- (IBAction)loadButtonClicked:(id)sender;
 
@end

Class interface declaration for data persistence example.

#import "DataPersistenceExampleViewController.h"
 
@implementation DataPersistenceExampleViewController
@synthesize textBox00;
@synthesize textBox01;
@synthesize textBox02;
@synthesize storageLocationLabel;
//@synthesize storagePath;
 
- (IBAction)saveButtonClicked:(id)sender
{
    NSArray*    valueList = [NSArray arrayWithObjects: textBox00.text,textBox01.text, textBox02.text,  nil];
    
    NSArray *myPathList = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *myPath = [myPathList objectAtIndex:0];
    storagePath = [myPath stringByAppendingPathComponent:@"myData.txt"];
    
    storageLocationLabel.text = storagePath;
    
    [valueList writeToFile:storagePath atomically:true];
 
}
 
- (IBAction)loadButtonClicked:(id)sender
{
    
    NSArray *myPathList = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *myPath = [myPathList objectAtIndex:0];
    storagePath = [myPath stringByAppendingPathComponent:@"myData.txt"];
    NSArray* valueList = [[NSArray alloc] initWithContentsOfFile:storagePath];
    
    textBox00.text = [valueList objectAtIndex:0];
    textBox01.text = [valueList objectAtIndex:1];
    textBox02.text = [valueList objectAtIndex:2];    
}
 
- (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}
 
- (void)viewDidUnload {
    self.textBox00=nil;
    self.textBox01=nil;
    self.textBox02=nil;
    self.storageLocationLabel=nil;
}
 
 
- (void)dealloc {
    [textBox00 release];
    [textBox01 release];
    [textBox02 release];
    [storageLocationLabel release]
    [super dealloc];
}
@end

Implementation for the Data Persistence example.

Writing Files with Archivers

While PList are easy to manipulate they data types that you can store in them are rather basic. Archivers can write objects of any type to a file as long as that object conforms to the NSCoding protocol. The NSCoding defines messages for reading and writing an objects state. When an object is being saved to a file its encodeWithCoder: method is called so that it can express its state information. During unarchiving (When the object is being read back from the file) the initWithCoder: method is called and the information that had previously been saved by the archiver is provided so that the object can reinitialize itself.
Both messages receive on parameter of type NSCoder. The NSCoder object has various methods for encoding different data types such as Booleans, bytes, strings, and other types of objects. For each encoding method there is also a decoding method.

Encoding Method	Decoding Method
encodeBool:forKey	decodeBoolForKey
encodeInt32:forKey	decodeInt32ForKey
encodeArrayOfObjCType:count:at	decodeArrayOfObjCType:count:at

Working with the Accelerometer
The accelerometer within the device detects forces of acceleration. The force of gravity on Earth is equal to the force that an object would experience if it were accelerating at 9.81 meters/second^2. So a device that isn’t being moved will detect a force in the direction that gravity is pulling it. If the device were in a free-fall it’s accelerometer would have a reading that is close to zero (take my word for this and please don’t test it by dropping your device). The accelerometer’s reading are composed of measurements along the X, Y, and Z axis, so the accelerometer in the iPhone can detect movement in any direction.
Every application has access to a single UIAccelerometer instance to read the accelerometer data. You don’t instantiate this instance directly. Instead you retrieve it through the class method sharedAccelerometer on the UIAccelerometer class. Once you have an instance of this class you provide a delegate that will receive the data and an update interval. The smallest update interval is 10 milliseconds which will cause 100 updates per second. Most applications won’t need updates this often. When you no longer need accelerometer data you can set the delegate to nil to stop receiving updates. You shouldn’t leave the update mechanism active when you don’t actually need accelerometer data. Doing so can contribute to a faster draining battery.
The delegate method that you implement is named accelerometer:didAccelerate:. When this method is called it will receive both a reference to the accelerometer and the acceleration readings.
According to Apple documentation the following are recommended update frequency bands:

Frequency (Hz)	Usage
10-20	Getting current orientation of device
30-60	Games and other real-time input applications
70-100	For detecting high frequency motion such as the user hitting the device or shaking it quickly.

If you only need to know the general orientation of the device and don’t need the accelerometer data then you should retrieve the orientation of the device from the UIDevice class. To retrieve the device’s orientation you must first call the UIDevice’s beginGeneratingDeviceOrientationNotifications. Once this is called you can either read the current orientation from the orientation property. You can also subscribe to UIDeviceOrientationDidChangeNotification. In either case if your application nolonger needs orientation events it should call endGeneratingDeviceOrientationNotifications to turn off the accelerometer and conserve power.
For a demonstration I'm building a program that will read the values from the accelerometer and display them on the screen

#import 
 
@interface AccelerometerDemonstrationViewController : UIViewController {
    IBOutlet    UITextField*    AccelX;
    IBOutlet    UITextField* AccelY;
    IBOutlet    UITextField* AccelZ;
    UIAccelerometer *myAccelerometer;
}
 
@property    (retain)    IBOutlet    UITextField    *AccelX;
@property    (retain)    IBOutlet    UITextField    *AccelY;
@property    (retain)    IBOutlet    UITextField    *AccelZ;
 
-(IBAction)startAccelerometerClicked:(id)sender;
-(IBAction)stopAccelerometerClicked:(id)sender;
 
-(void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration;
 
@end

The class interface declaration for the accelerometer example

#import "AccelerometerDemonstrationViewController.h"
 
 
@implementation AccelerometerDemonstrationViewController
@synthesize AccelX;
@synthesize AccelY;
@synthesize AccelZ;
 
 
-(IBAction)startAccelerometerClicked:(id)sender {
    [[UIAccelerometer sharedAccelerometer] setUpdateInterval:0.20] ;
    [[UIAccelerometer sharedAccelerometer] setDelegate:self];
    
}
 
-(IBAction)stopAccelerometerClicked:(id)sender {
    [[UIAccelerometer sharedAccelerometer] setDelegate:nil];
}
 
-(void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {
    [AccelX.text release];
    [AccelY.text release];
    [AccelZ.text release];

    AccelX.text = [NSString stringWithFormat:@"%f", acceleration.x];
    AccelY.text = [NSString stringWithFormat:@"%f", acceleration.y];
    AccelZ.text = [NSString stringWithFormat:@"%f", acceleration.z];
}    
 
- (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}
 
- (void)viewDidUnload {
    self.AccelX = nul;
    self.AccelY = nul;
    self.AccelZ = nul;
}
 
 
- (void)dealloc {
    [AccelX dealloc];
    [AccelY dealloc];
    [AllocZ dealloc]
    [super dealloc];
}
 
@end

The implementation for the Accelerometer example.

I could have a complete discussion alone covering math equations and algorithms that are helpful when dealing with the accelerometer. For now I'll just mention two that I've found helpful when working with an accelerometer in previous programs. The first equation is to get the magnitude of the accelerometer value. For a device that's not moving this number should be close to one (though the number may float around to be slightly greater than one of slightly less than one depending one because of the accelerometer not being 100% precise). For a number accelerating quickly it will be greater than one. For a device in free fall it will be close to zero. You can get the magnitude of the accelerometer reading by getting the square root of (x*x+y*y+z*z). The other equation worth knowing is getting the direction (in radians) in which the device is tilting along some plane. For example, if I had a device laying flat on a table and then decided to tilt it the direction in which the device is tilted can be calculated with atan2(y,x).

Web App Common Tasks by jQuery

2010-09-27T01:19:00.000-07:00

Introduction
One of my experience of using jQuery is that I often need to search around for solutions to some particular tasks, although there are good chances that the problems you try to tackle have already been solved by someone else via a plug-in, you still need to digest, evaluate, test and sometimes modify it to fit your project needs. That's perfectly fine for most rapid web development efforts. However, for some browser based, low-level tasks that are common for almost all web applications, searching for multiple plug-ins then put them together and test them out would cost unnecessary time. This article provides a jQuery plug-in (CBEXP) that encapsulates the most common tasks together and is reusable for different web applications.

For example, if your web application needs to conditionally (say, one Ajax call hasn't returned yet) warn user when navigating away or closing the browser window, or your client/service interaction relies on cookies and you want to make sure browser cookie is not turned off, or you need to parse query string and retrieve a particular parameter value in the client, or need to load different stylesheet dynamically without a post back to server, etc., it would be nice to have one jQuery plug in to handle all these low level browser based tasks, then we can focus more on application specific features.

As a matter of fact, CBEXP plug-in was initially put together for a real world consumer facing web application, it has been tested and working, wish it would be useful for your web application too.

Dependencies
This plug in depends on jQuery 1.4.2, Cookie Plug-in and jQuery-JSON plug in, it's designed to be used without a server page (ASP, JSP, PHP, Ruby on Rails, etc.). It certainly can be used with a server page, I just want to point out it works fine with a static HTML file. I usually put it into a public facing landing page, if any browser setting goes unexpectedly, we can tell the user when page loads.

The companion source code has a cbexp_demo.html page is a static HTML page, it shows examples on how the common tasks are performed.

Since all the common tasks will be performed by JavaScript code, the first thing to check would be to make sure browser's JavaScript is enabled, if not, we're going to tell the user it's required and show steps to enable it.

With the cbexp_demo.html page, HTML <noscript> tag is used to show alternative content when end user's browser has JavaScript disabled. The demo page has all the page content wrapped by a "pageContainer" (id) DIV, initially, the page CSS (stylesheets/cbexp.demo.css) hide the pageContainer DIV. If JavaScript is not enabled, all user sees are the content within &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;noscript&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; tag; If the JavaScript is already enabled, the documentReady event handler in cbexp.demo.js will show the pageContainer, see Fig.1 for details.</noscript>

// Fig.1. document ready event handler will not executived if JavaScript is disabled, otherwise it would fade in the page content 

$(function () { $('#pageContainer').fadeIn(); });

Now that we resolved dependencies, let's move onto our first common task by jQuery cbexp plugin.

Check Cookie is enabled
Similarly, we would tell user Cookie needs to be enabled when it's turned off. All these HTML content for no-cookie case is wrapped within a DIV with ID of "noCookieContainer", just like pageContainer, it's initially is set hidden by stylesheets/cbexp.demo.css:

// Fig. 2. Page CSS sets both pageContainer and noCookieContainer hidden  #pageContainer, #noCookieContainer {   display:none;  }

Within the documentReady event handler, it invokes the client side cookie detection method, when it's not enabled, it would show noCookie content. When your web application requires both JavaScript and Cookie, the document ready event handler would become:

//Fig.3 When both JavaScript and Cookie are required, document ready handles the detection and show/hide appropriate content  $(function ()  {   if ($.cbexp.isCookieEnabled())    $('#pageContainer').fadeIn();   else    $('#noCookieContainer').fadeIn();  });

Notice the call to $.cbexp.isCookieEnabled(), it's implemented in CBEXP plug in as a client side cookie detection, it simply tries to write a cookie, if it can read it back, then browser cookie settings is good to go. With the help from jQuery Cookie Plug-in, here is the code for isCookieEnabled:

//Fig.4 Client side cookie detector, writes/reads then remove the detector cookie  isCookieEnabled: function ()  {      $.cookie('cbexp_cookie_detector', 'cbexp_test');      var retVal = ('cbexp_test' == $.cookie('cbexp_cookie_detector'));        $.cookie('cbexp_cookie_detector', null);        return retVal;  }

Certainly, there are many other ways to detect cookie setting, like a round trip to server, but I found this client side approach is easy and quick. If your web application doesn't require cookie, you can then use the CBEXP plugin without the dependency on the jQuery Cookie Plug in.

Beside cookie setting detection, query string parsing is another common task.

Parse Query Strings
CBEXP Plug in has a simple and efficient method to parse out all query string based on current page's URL, in the case of no query string is defined, it returns empty array object. Here is the code:

//Fig. 5 Basic query string pasrsing method with in cbexp plugin
getQueryString: function ()
{
    var qs = window.location.search;
    if (qs.length <= 1)
        return new Array();
    qs = qs.substring(1, qs.length);
    var a = qs.split("&");
    var b = new Array();
    for (var i = 0; i < a.length; ++i)
    {
        var p = a[i].split('=');
        b[p[0]] = decodeURIComponent(p[1]);
    }
    return b;
}

A specific query string parameter value can be retrieved by querying the return value of getQueryString, like: $.cbexp.getQueryString()[QueryStringParamName], if the value is defined, it would return a string decoded from URI-encoded string, if not defined, it would null.

Later in this article, I'll show an example to dynamically load CSS and HTML base on different query string parameter values.

What above is about browser information detectyion and information retrieval tasks, let's turn our attention to client-service interactions.

Extend Ajax call with X-HTTP-Method-Override
In our web application, we deliberately desinged our secure RESTful-like web services API to be POST-only or overloaded POST style, when client initiates a service call, it only uses one HTTP verb ---- POST. The main reason is that our web application is targetting regular consumer, each end user may have different firewall settings, some firewalls do not allow PUT or DELETE at all, only GET and POST are OK to go through port 80. Since we still to protect GET requests in our secure web service, so all requests essetially become a POST request.

We gain some consistency in service request side in terms of request body for authentication and authorization information, but we sort of lost some standard operation meanings for HTTP verbs, like the regaulr meaning for GET (read), PUT (create) and DELETE. To solve this service request verb-meaningless-issue and also try to leverage some server side framework's support for HTTP verb (to map certain HTTP verb to corresponding CRUD method in service layer), we extend jQuery ajax API to optionally set X-HTTP-Method-Override HTTP header, similar to what Google Data Protocal does.

The idea is: all service requests will go through a common Ajax wrapper method in CBEXP plugin, by optionally passing in the GET, PUT and DELETE verbs, the method will package the correct headers and settings for the Ajax call, here are the details:

Fig. 6. Ajax call wraper for overloaded POST method with X-HTTP-Method-Override support    
postJson: function (postURL, jsDataObj, onSuccess, onError, httpMethodOverride)
{
    var beforeSendCallback = null;

    try
    {
        if (httpMethodOverride != undefined)
        {
            httpMethodOverride = httpMethodOverride.toUpperCase();
            if (httpMethodOverride == "GET" || httpMethodOverride == "PUT" || httpMethodOverride == "DELETE")
            {
                beforeSendCallback = function (xhr)
                {
                    xhr.setRequestHeader("X-HTTP-Method-Override", httpMethodOverride);
                    xhr.withCredentials = true;
                };
            }
        }
        else
        {
            beforeSendCallback = function (xhr)
            {
                xhr.withCredentials = true
            };
        }

        $.ajax({
            type: "POST",
            beforeSend: beforeSendCallback,
            contentType: "application/json",
            dataType: "json",
            url: postURL,
            data: $.toJSON(jsDataObj),
            async: true,
            success: onSuccess,
            error: onError
        });
    }
    catch (err)
    {
        alert("Ajax call error : " + err.description);
    }
}

Notice it utilizes $.toJSON(jsDataObj) from jQuery JSON plugin to serialize a JavaScript object to JSON string as the POST body.

What above is our extension to Ajax call. In a broader meaning of "Ajax", it not only means interacting with services via XMLHTTPRequest, but also includes dynamically and conditionally loading HTML , Javascript and CSS files to the DOM solely based on client side logic, let's how EBEXP plugin support this as a common task.

Dynamically loading HTML, JavaScript and CSS from client
jQuery is a lightweight while powerful JavaScript library, I was amazed to find out it already had built-in support for dynamically loading HTML by jQuery .load API, and also has a .getScript API for dynamically loading JavaScript file, it definitely enables varies techniques and treatments in terms of building a dynamic web page from client. In the case the client needs to load CSS file at runtime, CBEXP plugin provides a simple easy to use method:

Fig. 7 Support for programmatically loading CSS
loadPageCSS: function (cssUrl)
{
    $('<link></link>').appendTo('head').attr({
        rel: "stylesheet",
        type: "text/css",
        href: cssUrl
    });
}

The method simply creates a new <link></link> tag with proper attributes and append it to page's header. According to the general cascading rules of CSS, the lately loaded CSS will win over previously loaded external CS rules if they have any conflicts.

Although the code looks short and simple, when putting all the pieces together, it really enables some powerful features, like to let client make sure browser has the right settings, to dynamically change page's layout and look and feel (by programmatically loading CSS) based on parameters (by parsing query strings).

Warn the user before they leave
In some use cases, when user tries to leave, either by clicking a link, typing a new URL in browser's address bar, clicking on browser windows's close button, we want to warn the user if they leave some data will be lost. CBEXP plugin supports a programmatic way to enable or disable the warning message. From application perspective, when set the dirty flag, it's anbled, otherwise it would disable. Here below are the code in CBEXP:

setDirtyFlag: function (docDirty)
{
    $.cbexp.isDirty = docDirty;
    if (docDirty)
        $(window).bind('beforeunload', $.cbexp.confirmExit);
    else
        $(window).unbind('beforeunload', $.cbexp.confirmExit);
},

getDirtyFlag: function ()
{
    return $.cbexp.isDirty;
},

confirmExit: function ()
{
    if ($.cbexp.isDirty)
        return "Exiting this page will end your session. If you haven't saved your info, it could be lost.";
},

Scroll Bar for Blog Post Body

2010-09-27T01:00:00.000-07:00

Adding Scrollbar to Blog Post body
once you are logged into Blogger account, go to Template -> Edit HTML and scroll to this code. Add the portion shown in red:-

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;
Set 2 : Search for .post ( by browser Search) and Put the Red Portion in Curly Bracket. { }

.post {
height:200px;
overflow:auto;

}

This will give you scrollbars to every post:-

Scrollbars within Blog Post
Sometimes, you may not want to have the scrollbars to all the [...]

This will give you scrollbars to every post:-

Scrollbars within Blog Post

This setting, scrollbars will automatically appear according to your need:-
Sometimes, you may not want to have the scrollbars to all the blog posts, but only for several paragraphs within a post. Assuming you are writing an article and you wish to enclose some long text within a scrollbox, you have to first define a class within the stylesheet.

For example, we can insert in the stylesheet this code to specify the maximum height and width of the scrollbox. Once the text overflows

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;
Set 2 : Search for by Browser search place the below code before it.

.scrollbox {

height:100px;

width:400px;

overflow:auto;

}

Step 3: Save the template.

Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode and put the below code where your want to appear scrolling bar.

<div class=”scrollbox”>TEXT TO BE INCLUDED IN THE SCROLLBOX.</div>

You can continue typing the post by switching back to the “Compose” mode.

After you are done, when you publish your post, you will see that only the part of the text comprised with the tags will be in a scrollbox, like this:-

Show Limited Number of Labels in Widget.

2010-09-23T04:46:00.000-07:00

As you write more and more posts you will keep adding labels to them to categorize your posts. You can add more than one label to any single post. Labels are useful as they serve as keywords channelling traffic to your posts through search engines like Technorati.

However the list of labels in your blog can get to be very long stretching your sidebar until y

our blog post looks like a flag on top of a long sidebar. To prevent this you can modify the code of your Labels widget to show only the topmost labels in your blog..............

LIMIT LABEL NUMBER
To limit the number of labels shown in your Labels sidebar widget login at Blogger.com and click 'Layout' link on Dashboard. The Page Elements subtab of Template tab will open. If you do not have a Labels widget in the sidebar Add a Labels Page Element to it.

After the Labels widget is added click on Edit Html subtab of Template tab. This will open the Template code box on the Edit Html subtab. Click the Expand Widgets Template checkbox on top of the Template code box to put a check mark in it. The Template code box will show the expanded widgets templates.

Scroll down in the Template code box to locate the code for the Labels widget. This will look like this :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

  <b:includable id='main'>
<b:if cond='data:title'>

  <h2><data:title/></h2>

  </b:if>

  <div class='widget-content'>

  <ul>

  <b:loop values='data:labels' var='label'>

  <li>

  <b:if cond='data:blog.url == data:label.url'>

  <span expr:dir='data:blog.languageDirection'>

  <data:label.name/>

  </span>

  <b:else/>

  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>

  <data:label.name/>

  </a>

  </b:if>

  <span dir='ltr'>(<data:label.count/>)</span>

  </li>

  </b:loop>

  </ul>
<b:include name='quickedit'/>

  </div>

  </b:includable>

  </b:widget>

REPLACE THE WHOLE ABOVE CODE WITH THE CODE BELOW :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'> 

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<ul>

<script type='text/javascript'>

var labelnum = 0;

<b:loop values='data:labels' var='label'>

if (<data:label.count/> &gt; 2) {

document.write(&quot;<li><a expr:href='data:label.url +  "?max-results=100"' 

rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);

}

</b:loop>

</script>

</ul>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

The code above will only show labels with more than two posts. To increase number of labels increase the number two in this code :

if (<data:label.count/> &gt; 2) {

Javascript Redirect Traffic from Blogspot to WordPress Site

2010-09-23T04:35:00.000-07:00

Ok. So you’ve had a blogspot blog for a little while and you’ve decided you want a WordPress site. How do you redirect traffic from the old site to the new site and lose as little traffic as possible in the process.

First. Use the import feature available in WordPress. From your Daskboard, look for Tools > Import

Second. Add some javascript code to your blogger template. Update the vars blogTitle and wordPressUrl to match your blogspot blog.

<script>

  var blogTitle = 'Flexing My Kerkness';

  var wordPressUrl = 'http://kerkness.ca';
if( document.title == blogTitle ){

  window.location = wordPressUrl;

  } else {

  var newUrl = str_replace( document.title, blogTitle+’: ‘, ” );

  window.location = wordPressUrl + ‘/?s=’ + newUrl;

  }

  function str_replace(haystack, needle, replacement) {

  var temp = haystack.split(needle);

  return temp.join(replacement);

  }

  </script>

Basically what this script does is redirects from your blogger site to your new domain while conducting a search based on the title of page being requested.

For example. If you had a post called “How to change outboard motor oil” on blogger. When you try and access the blogspot url for that post you will be directed to the new wordpress domain and you will search for posts matching “How to change outboard motor oil”. If that post was imported into word press and you haven’t changed the title. Users will be shown a link to the post on your new site. Also they may find any new or relevant content you’ve posted since making the change to WordPress.

JAX Labels Reloaded

2010-09-23T04:33:00.000-07:00

The AJAX Labels is back with more features! I was planning to release this with my new template, but the template design is slipping beyond schedule.
Note: If you want to integrate AJAX Labels with Phydeaux3's Label Clouds, read this post and come back here.
Some of the new features are:

Built-in navigation system.
More user customizability. (You don't even need to know coding for that!)
Support for Unicode Categories in IE.
More user-friendly installation. (Code to be copied/modified in template is reduced)

The installation of this hack afresh would be easy. But upgrading from my previous version is a bit knotty. Anyway, I will explain both. If you get stuck, feel free to comment and I'll be there to help. FRESH INSTALLATION Click here for Up gradation instructions. If you already have AJAX Labels installed, you can directly jump to up gradation instructions. Like the first version, this one too needs the Prototype JS framework. You can either store it in a location of your preference, or use the location that I've given below. First of all, back up your template. It is always a good idea to back up your template, so that you can revert if you mess things up. 1. Click Page Layout->Edit HTML. Check the box saying "Expand Widget Templates" Look for the </head> tag in your template. Insert the following code just above that.

<style type='text/css'> 

#indicator {position:fixed;z-index:1000;padding:15px   0;top:40%;background-color:#FFFFFF;border:1px solid   #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;} 

#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;} 

.search-result-meta {background:#EFEFEF;padding:2px;} 

.search-result-meta img {border-width:0;vertical-align:text-bottom;} 

.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;} 

.search-cat   {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px   solid #C0C0C0;font-weight:bold;} 

.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;} 

.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;} 

</style> 

<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' /> 

<script type='text/javascript'> 

//<![CDATA[ 

// User customisable parameters 

// ---------------------------- 

// maxresults - Number of results to show per page 

// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF. 

// feedLabel - Text to show for the label feed link. 

// catLabel - Label for categories. 

// closeLabel - Label for Close button. You can use hypertext also. 

var maxresults = 5; 

var navFlag = 1; //ON by default 

var feedLabel = "Subscribe to"; 

var catLabel = "Sorted into:"; 

var closeLabel = "Click to close"; 

//]]> 

</script> 

<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

Note: You can avoid the prototype script addition line if you already have added the prototype.js script to your template (It is quite likely, if you have added some hack to your blog). If you don't understand what I'm saying, never mind. Now the customization part. See the snippets in red above. Those are the stuff which you can customise. Just above that I have written comments on what each represent. To customize them, you just need to modify them to the appropriate value. For example, if you want to change the close button text from "Click to close" to, say, "[X]", then simply change "Click to close" in the red area to "[X]". Navigation Feature: The navigation feature allows pagination of the results. So you can view all the results in several pages. maxresults and navFlag together determine how it is shown. navFlag is the parameter saying whether you want this feature or not. The number of results shown per page will be decided by maxresults. The number of pages will be calculated automatically. Eg: Lets say, you have 13 posts with a particular label in your blog. Case 1: maxresults=5 and navFlag=1 You will have 3 pages (peekaboo blocks) with 5 results each. There will be a navbar which will let you go to any of those 3 pages. Case 2: maxresults=5 and navFlag=0 You will have a single page with 5 recently updated posts with the particular label. You won't be able to view other results Case 3: maxresults=20 and navFlag=1 You will have a single page with 13 results (Because 13 is less than 20). If you know CSS, you can modify the look of your result block as well. 2. Locate the following code in your template:

<b:loop values='data:post.labels' var='label'> 

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Replace it with this:

<b:loop values='data:post.labels' var='label'> 



<a href='#sres' expr:onclick='"javascript:getCat(\"" +   data:label.name + "\",null)"'   rel='tag'><data:label.name/></a>

3. Optional:If you have the labels widget in your template.

Locate the following code in your template:

<b:if cond='data:blog.url == data:label.url'>

  <data:label.name/>

  <b:else/>

  <a href='data:label.url'><data:label.name/></a>

  </b:if>



Replace it with this:
<b:if cond='data:blog.url == data:label.url'>

  <data:label.name/>

  <b:else/>

  <a href='#sres' expr:onclick='"javascript:getCat

(\"" + data:label.name + "\",null)"' ><data:label.name/></a>

  </b:if>

4. Click on the button below.

<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><span id="preserve28e29bc50e8543bdbc285c3b47ad246c" class="wlWriterPreserve"><script type="text/javascript">document.write(closeLabel);</script></span></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><span id="preservee463285a218e49dfabc9efcfc5e8ae87" class="wlWriterPreserve"><script type="text/javascript">document.write(closeLabel);</script></span></div></div>This will take you to an Add Widget Screen. Select your blog and click on Add widget. 5. Save your template. That was a breeze, wasn't it? UPGRADATION Caution! If you are installing AJAX Labels for the first time, don't proceed any further. You are already finished with your installation. This section is only for upgrading from the previous version. 1. Back up your template first. (Be pessimistic in these matters ;) ) 2. Go to Edit HTML. Look for my previous installation of Javascript. It is very easy to find. It is enclosed within  and  Delete that entire portion. 3. Now check Step 1 of the FRESH INSTALLATION section. Follow that step and come back here. 4. Search for the following snippet in your template. '"javascript:getCat(\"" + data:label.name + "\")"' There will be two places where this occurs. Replace both places with this '"javascript:getCat(\"" + data:label.name + "\",null)"' 5. Save your template and go to page layout screen and delete the HTML/Javascript widget you had created when you installed the previous version. 6. Go to step 4 of FRESH INSTALLATION section. Follow that step and come back here. 7. Save your template and you are done. There! That was not very difficult. ACKNOWLEDGEMENTS Tsung-Kai Chen - For his several comments and the bugs he found in the previous version. Bahram - For the heads up on the Unicode Category issue in IE. Update 1: The code had minor syntax errors (due to wrong copy paste)because of which the hack was not working. Problem is fixed now. Reinstalling the hack will make it work. Update 2: Drat! Another silly mistake. The Close button was not working. I've fixed this. Just delete the widget and add it again (Step 4) . You don't have to redo any other steps. Update 3: Arrgh!! Another bug. I have made the corrections. You will have to redo Steps 2, 3 and 4. This will remove support for the rel-tag microformat. I will release an update if I find a way to work around that.

Adding Background Image to Post Titles

2010-09-23T04:24:00.000-07:00

Dcloud Of Dcblog brought this fantastic thing to us.By this we can put a Image Just behing the Post Title like on his blog.It’s Very Simple,the only thing is that you need to have a superb image to put on their.

You will have to just check hard for the codes to implement as different blogger have different type of coding.

To locate the code which controls the post titles go to your Layout Tab (located in your Customize window) and click the Edit HTML sub tab. The code you are searching for is “.post h6″ (it can be something else also,So try searching) which looks like this

Now to get the background image in there you have to add the code “background: url()” like this:

.post h6
{
font-size:22px;
color:#000000;
font-weight:normal;
border-top:1px dotted #000000;
padding:4px 0 0 0;
width:599px;
no-repeat;
background: url(http://www.yourserver.com/yourimage.gif) no-repeat;
}

Now Check your blog the image might be partially visible only so add the height attribute(equivalent to the height of the image).

.post h6
{
font-size:22px;
color:#000000;
font-weight:normal;
border-top:1px dotted #000000;
padding:4px 0 0 0;
width:599px;
no-repeat;
background: url(http://www.yourserver.com/yourimage.gif) no-repeat;
}
height: 80px;

Now Checkout your blog,now you have to add/change the padding codes as you thinkl according to your blog to properly align the title within the image.

Order Date	Order ID
{0}	{1}