tcf{tc}

Today, most web applications have the ability for the user to share various types of information. Blogs allow readers to post comments, email clients are fully web-based, social wiki sites let people submit revisions, and so forth. All of this is possible because of the oldest HTML element-the <form>.The form is submitted via the HTTP protocol to the server, and its individual elements, such as text fields and text areas are processed on the server-for example, stored in the relational database-emailed, or put into a flat file. By default, the form is submitted as plain text, which is not a good way to express any formatting or styles of the contents. For example, if you want to emphasize some words, and type your text in a standard text area, you have no way to make some words stand out or even use a different font.

The general solution is to use HTML markup with the text, to indicate the formatting and styles. In this article, I will look at several implementations of Rich Text Editors (RTE) that dynamically apply HTML markup to plain text before it is submitted to the server. I will show how to install several versions of the editor widgets, and then compare them.

Read the rest of this entry »

In this article, I will look at the Yahoo User Interface (YUI) library in more detail. The YUI is an AJAX framework, but it is also a generic JavaScript library that provides a lot of Web 2.0 widgets or UI elements, effects, and tools for web developers.

Read the rest of this entry »

Web 2.0 can be thought of as two concurrent and unrelated things: advances in technology and a new business model for web companies.

This article will examine the Web 2.0 movement and what it means for the end clients, what Web 2.0 means for the web UI, and which technologies enable the new features. In particular, it will talk about the new companies that joined the movement, and look at some of the technology that powers Web 2.0.

It will also discuss what it means to code in "web2.0 style" with some more advanced features of the Script.aculo.us framework and explore the Dojo toolkit.

Read the rest of this entry »

In this article, I will discuss implementing an Ajax-enabled scrollable table, in which rows are dynamically fetched from the server, as the user scrolls, without the whole page refreshing. This technique is unique and very convenient for implementing pages with a lot of dynamic content in a readable form; for instance, a live news feed. As new items are added to the table, the vertical scroll bar will resize and the never-ending scroll will continue. The asynchronous fetching of the data is done with AJAX (Asynchronous JavaScript and XML). The parsing and dynamic row insertions are done in JavaScript, the requests are done with the XMLHttpRequest object, and the table appearance is controlled by the CSS.

Read the rest of this entry »

In one of my previous articles, I introduced a lot of different AJAX frameworks. In this article, I will look in more detail at the Script.aculo.us framework and discuss why you may want to use it in your web applications. Script.aculo.us is purely a client-side framework that gives developers a new way to code in JavaScript by providing new shortcut functions, new powerful objects including Form, Effect, Control and Ajax, and some custom widgets. Script.aculo.us is really not an independent product, but an add-on to the Prototype.js JavaScript library developed and maintained by Sam Stephenson. Prototype by itself is a very well thought out and implemented library of JavaScript methods that helps a great deal with creating rich, highly interactive, and dynamic web pages. Script.aculo.us builds on the existing Prototype implementation. It enhances Prototype by adding effects and controls, morphing, and custom UI widgets such as a Slider.

Read the rest of this entry »

I originally published this article on the Developer.com in December of 2006, hence the holiday twist in the name and the content. AJAX is the one of the latest buzz acronyms. It stands for "Asynchronous JavaScript and XML" and actually does not define a single new technology, but a group of mature technologies used in conjunction with one another. In this article, I will look at AJAX and the most popular frameworks for AJAX currently on the market, from the ten-thousand foot view.

Read the rest of this entry »

Have you ever wondered how does Netflix.com, Yahoo Photos or DealOgre.com popup an interactive dialog and make the main window appear dark, transparent and inactive behind it?

In this article I will show how to implement a custom modal dialog in a web browser, also known as a "smoke glass" effect. This effect makes the entire page appear behind a transparent dark shade, except for the custom dialog, simulating a modal behavior in which the user must use the dialog and not the main window. This is a very cool effect which is not using window.showModalDialog but its own solution. The solution is simpler then you think so read on.

Read the rest of this entry »