mathertel -> AJAXEngine -> Visual Effects
Implementing a web based application by using AJAX techniques is about improving the backside, will elable the right user experience and will make your application work the way it should.
If you want that your application really looks like AJAX you also have to give your application a modern design together with all kinds of visual effects. That will really impress!
Don't you think that this is nonsense ? - I did for some time last year but I had to change my mind - at least a little bit.
Visual effects are definitvely an important aspect for AJAX applications today. Maybe the "market" will learn the technical difference in some near future. Maybe a "get-it-all-together" solution is the right approach for the "market".
So here comes a library of visual effects. From time to time I will add another one and you will find them also on the demo side at http://www.mathertel.de/AJAXEngine/Default.aspx see Examples -> Visual Effects .
The documentation you will find here on my blog and (with a little delay) in the AJAX eBook at AJAXeBook.aspx. You will not find only a working solution but also a brief description on how it works so you can also use it in any of your projects too.
This is a list of patterns of visual effects that can help you to make your AJAX application (or maybe any other web application) more attractive. Open the demo pages and look at the source code of the pages to see how it's implemented.
More detailed information is available in my blog.
With shadows it is possible to give your page a 3D look.
I use a pure html and css trick to get a shadow effect that can be used to overlay any background because you can still see what lies in the shadow.
See a simple demo page at ShadowDemo.aspx.
HTML is so rectangular so every no rectangle effect gets some attaction. See how rounded corners can be created.
See a simple demo page and explanation at RoundedDemo.aspx.
Sliding and zooming effects, especially with pictures.
If you have to move something, move it slow so the user can understand where the information comes from and goes to.
See a simple demo page and explanation at SlidingDemo.aspx.
Drag & Drop
Arranging parts with drag and drop functionality on a portal site.
See a simple demo page and explanation at MoverDemo.aspx.
By reusing the shadow effect and the mover behavior a webpart can be realized.
The web part contains content and so a WebControl (a class derived from Panel) is used here and not a User Control (*.ascx).
See a simple demo page and description at PartDemo.aspx.
When pointing with the mouse at specific objects on the page you can tell the user what objects are acting on clicks and give immediate feedback when they are clicked.
See a simple demo page and description at MouseHoverDemo.aspx.
A popup mechanism can be used for showing more details for a specific topic or item that is not visible by default but can be opened by staying over a keyword or a specific icon.
The popUp is shown on the current web page without navigating away or refreshing the content of the current page.
See a simple demo page and explanation at PopUpDemo.aspx.
The LightBox is another visual effect that can be used to implement a kind of modal user interaction without leaving the current loaded page. Because there is no unloading this feature can easily be used in AJAX applications.
See a simple demo page and explanation at LightBoxDemo.aspx.
The fade effect
The DataFade control can be used to display changing values on a web page and bringing the users attention to the updated value.
See a simple demo page and explanation at FadeDemo.aspx.
The space on a web page is rare. Stacking multiple panels and using tabs to swtch between them is a solution to this problem and the look & feel is very well known to many users. This is often a better solution than scrolling down to the bottom of the page.
inline text editing
If you collect rich formatted text based information you need a inline editor with some formatting capabilities.
This is the key step for building a special wiki or blogging side.
The accordion menu is a collection of multiple, stacked panels. Only one of them is visible and another can be opened by clicking the header of a closed one.
Opening and closing the panels is implemented using smooth size transitions.
See on the demo page including explanation at AccordionDemo.aspx.
tags and tag clouds
If you have too much pages or articles that need some order, tags are a common way of classifying and indexing.
Tag clouds are used to show the used tag names and highlighting the most often used tags.
ViewPage.cs (view source)
/ ViewPage.js (view source)
<ajax:ViewPage ID="Documentation" name="Documentation" runat='server'> </ajax:ViewPage>
When the view property is set to the value of the name of this control or a '*' charachter the inner content of the control is displayed.
ViewSelector.cs (view source)
/ ViewSelector.js (view source)
For every item in the views list a Link-Button is generated.
The ViewSelector Control and multiple ViewPage controls can be seen on the home page of this web.
This page is part of the http://www.mathertel.de/AJAXEngine/ project. For updates and discussions see The AJAX Engine blog.