Book Image

HTML5 Web Application Development By Example : Beginner's guide

By : Jody Gustafson
Book Image

HTML5 Web Application Development By Example : Beginner's guide

By: Jody Gustafson

Overview of this book

HTML5's new features have made it a real application development platform with widespread adoption throughout the industry for this purpose. Being able to create one application that can run on virtually any device from phone to desktop has made it the first choice among developers. Although JavaScript has been around for a while now, it wasn't until the introduction of HTML5 that we have been able to create dynamic, feature-rich applications rivaling those written for the desktop. HTML5 Web Application Development By Example will give you the knowledge you need to build rich, interactive web applications from the ground up, incorporating the most popular HTML5 and CSS3 features available right now. This book is full of tips, tools, and example applications that will get you started writing your own applications today. HTML5 Web Application Development By Example shows you how to write web applications using the most popular HTML5 and CSS3 features. This book is a practical, hands-on guide with numerous real-world and relevant examples. You will learn how to use local storage to save an application's state and incorporate CSS3 to make it look great. You will also learn how to use custom data attributes to implement data binding. We'll use the new Canvas API to create a drawing application, then use the Audio API to create a virtual piano, before turning it all into a game. The time to start using HTML5 is now. And HTML5 Web Application Development by Example will give you the tips and know-how to get started.
Table of Contents (18 chapters)
HTML5 Web Application Development By Example Beginner's guide
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Time for action – editing a task in the list


So far we have a tasklist that we can add tasks to, remove tasks from, and change the order of the tasks. Let's add some functionality to allow the user to change the name of a task. When the user clicks on a task name we will change it to a text input field. To do that we need to add a text input field to our task element template right after the task name:

<li class="task">
    <div class="tools">
        <button class="delete" title="Delete">X</button>
        <button class="move-up" title="Up">^</button>
        <button class="move-down" title="Down">v</button>
    </div>
    <span class="task-name"></span>
    <input type="text" class="task-name hidden"/>
</li>

We give it a class of task-name to identify it, and also add the hidden class so it's not visible by default. We only want to show it when the user clicks on the task name. So let's go into the JavaScript file and add an event handler on the <span> element to the end of our addTaskElement() method:

$("span.task-name", $task).click(function() {
    onEditTaskName($(this));
});

Let's break this down. First we get the span with the class of task-name that is a child of the task element. Then we add a click event handler that calls the onEditTaskName() method. The onEditTaskName() method takes a reference to the <span> element as a parameter. When you are in a jQuery event handler function, this refers to the element that was the source of the event. So $(this) creates a jQuery object that wraps the <span> element so we can call jQuery methods on it:

function onEditTaskName($span)
{
    $span.hide()
        .siblings("input.task-name")
        .val($span.text())
        .show()
        .focus();
}

Even though the onEditTaskName() method technically contains one line of code, there is a lot going on. It uses function chaining to do a lot of work in a compact statement. First it hides the <span> element. Then it gets the text input field by looking for a sibling of the <span> element, that is, an <input> element with a class of task-name. Then it sets the value of the text field with the task name which it gets from the <span> element using jQuery's text() method. Finally, it makes the text field visible and sets the focus on it.

When the user clicks on the task name, it appears to change into an editable text field right before their eyes. Now all we need is a way to change it back when the user is done editing the name. To do that we'll add a change event handler to the text field, which gets fired when the user changes the text field and hits Enter or leaves it. Add this to the end of the addTaskElement() method:

$("input.task-name", $task).change(function() {
    onChangeTaskName($(this));
});

This works the same way as the task name click event handler. We are going to call a method named onChangeTaskName() and pass it a jQuery object that wraps the text field's input element:

function onChangeTaskName($input)
{
    $input.hide();
    var $span = $input.siblings("span.task-name");
    if ($input.val())
    {
        $span.text($input.val());
    }
    $span.show();
}

First we hide the text input field, and then get the task name <span> element and store it in a variable. Before updating the name we check to make sure that the user actually typed something in. If so, we update the task name. Finally, we call show() to make the task name visible again. The user sees the text field turn back into static text.

There is one last thing left to do. If the user clicks off the field without changing anything, we will not get a change event and the text field will not get hidden. We can get a blur event when this happens though. So let's add a blur event handler to the text field that hides it and shows the static task name <span> element:

$("input.task-name", $task).change(function() {
    onChangeTaskName($(this));
})
.blur(function() {
    $(this).hide().siblings("span.task-name").show();
});

What just happened?

We added a text field to our task template that gets shown when the user clicks on the task name, so they can edit the task name. When the task name text field changes, it updates the task name label.