Tag Archive for 'webdesign'

FCKeditor - inline html editor

FCKeditor logo

Should you need provide inline html editor feature in your web application (WYSIWYG editor), have a look at FCKeditor.

FCKeditor is very useful and functional. Let me cite a couple of its features:

  • Integration with ASP, ASP.NET, Java, ColdFusion, Perl, PHP, JavaScript and more
  • Complete toolbar customization
  • Skins support
  • Plugins support
  • Multi-language support with automatic user language detection
  • Lightweight and fast
  • Font formatting: type, size, color, style, bold, italic, etc
  • Text formatting: alignment, indentation, bullets list, etc
  • Link and anchors support
  • Image insertion, with upload and server browsing support
  • Table creation and editing (add, delete rows, etc) - one of the best systems on the market
  • Right click context menus support

I believe it’s worth recommending.

ASP.NET AJAX In Action

If you’re about to start playing with AJAX in ASP.NET it’s a good idea to read this book: ASP.NET AJAX In Action by Alessandro Gallo, David Barkol, Rama Krishna Vavilala (see on amazon).

It very well describes basics of AJAX and shows basic and more advanced techniques of applying it in ASP.NET. There are exaplanations of Microsoft Ajax Library, UpdatePanel, ASP.NET AJAX client components, bulding AJAX-enabled controls, and much, much more. All well written and supported with extensive examples.

High Performance Web Sites

Recently I’ve been reading “High Performance Web Sites” (look at amazon).

I think it’s a good book who can be recommended to all who do even little bit of front end development. The book describes 15 rules (regarding CSS, JavaScript, etc.) that should be followed in order to deliver high performance web sites. It’s rather short (c.a. 150 pages) and easy to read, but the suggestions described by the author can be helpful while you work.

Web 2.0 buttons generator

Web 2.0-styled buttons are quite popular these days. In fact, they look fine. Actually, I love them :)

Today, I learned you don’t have to do it on your own with graphic software. I’ve found www.mycoolbutton.com - Web 2.0 buttons generator. It allows you to create a button in four steps:

  1. define the size
  2. define the color
  3. set up the icon
  4. set up the font

Finally, with a few clicks you create a button and download it as a png file.

AJAX activity indicator

Users are familiar with indications of work performed in background since first versions of MS Windows. Besides being fancy, they are also informative.

AJAX, a Web 2.0 technique, aim at exchanging only small amounts of data with a server; this should be performed behind the scenes. If so, why not expose the moments when user interaction brings about reqest and response from a server? Remeber my previous post about using prototype.js for making AJAX request? I use prototype also for indicating background actions on web pages that support AJAX.

You’d never guess how easy it is to such indicator.

First, you must register an action which accurs in case of an AJAX-related event. The best way to do that is add the following code in the head section of the HTML code (remember to include prototype.js library before it!):

<script type="text/javascript">
<![CDATA[
Ajax.Responders.register({
    onCreate: function(){ Element.show('spinner')},
    onComplete: function(){Element.hide('spinner')}
});
]]>
</script>

Then, further in the code inside body section, add this:

<img alt="spinner" id="spinner" src="gfx/spinner.gif"
      style="display:none;" />

Actually, it’s all. Whenever you click an object which sends an AJAX request to the server, the indicator defined by img appears and is visible until the response is obtained.

Wonder, how to create an indicator animation? Either download one from here or generate one there

Using PUT and DELETE methods in AJAX requests with prototype.js

Whenerver I write JavaScript I use prototype.js. I find it brilliant, especially when you deal with AJAX. With this library it’s easy to create an AJAX request and process its response from the server.

To send an AJAX request you create a following HTML code:

<a href="#" id="ahref">a link</a>
...
$('ahref').onclick = function() {
    new Ajax.Request('/some_url', {
        method:'get',
        parameters:'param1=value',
        onSuccess: function(transport){
            var responseXml = transport.responseXML;
            ...
        },
        onFailure:function(){ alert('Something went wrong...') }
    });
    return false;
}

This way, you create a request with GET and POST method. Recently, while developing a SOA system based on REST (REpresenational State Browser), I faced a problem of creating requests also with other HTTP methods.

In short, REST allows using a few HTTP methods. The most popular are:

  • GET - for obtaining representation of a resource
  • POST - for updating or creating a representation of a resource
  • PUT - for creating a representation of a resource
  • DELETE - for removing a representation of a resource

Again, prototype.js helps a lot. Since version 1.5, it is possible to use all those methods (formerly, it supported only GET and POST). PUT and DELETE methods are realized by tunneling over POST. Also, “_method=METHOD_NAME” is added as a query parameter with the request. The only thing to do is to prepare relevant logic on the server side to manage the request.

Suppose you have a servlet that allows adding a resource to a database and it is invoked with the following URL:
http://example.com/servlet/RESOURCE_URL.

A simplified definition of a Ajax.Request object in prototype would be as follows:

new Ajax.Request('/some_url', {
    method:'put',
    parameters:'url=RESOURCE_URL'
});

In the JavaServlet, you obtain the request and manage it like that:

@Override
protected void doPost(
    HttpServletRequest req,
    HttpServletResponse res)
    throws ServletException, IOException {
    if (req.getParameter("_method") != null
        && "put".equalsIgnoreCase(req.getParameter("_method"))) {
        doPut(req, res);
    }
}