Web Info & Tutorials

October 12th, 2006

MOOTOOLS ACCORDIAN TUTORIAL

Isn't it fun to see students doing projects with Ajax?

Jonathan Molina just finished his final project which was to:

use a framework and show it being used as well as giving an example of how it can be used in a real life scenario.

I used Mootools for the frameworks just because it looks to me like an easier to understand framework and the functions that are built in are just perfect. The size and feature are just right.

I created a Video Tutorial of how to apply an Accordion effect to div blocks in a page and create a hands on feel to the site. I did do my best on exampling how to do it as easily as possible in the video … It took me many tries to get the video just as close to perfect as I could.

You can watch the making of this page in video form but it requires something that groks the 7z format. Not quite as usable as displaying it inline. Maybe someone should put it on GoogTube?

JAVASCRIPT:
  1.  
  2. window.onload = function() {
  3.         // Pick your classes
  4.         var myBox = document.getElementsByClassName('box_title');
  5.         var myBoxOpen = document.getElementsByClassName('expand');
  6.  
  7.         // Create the accordian
  8.         var myEffect = new fx.Accordion(myBox, myBoxOpen, {});
  9.  
  10.         // Tool Tips for extra information
  11.         var as = [];
  12.  
  13.         $S('a').each(function(a){
  14.                 if (a.getAttribute('title')) as.push(a);
  15.         });
  16.  
  17.         new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25});          
  18. }
  19.  

Mootools Accordian

October 12th, 2006

ONFORCE AJAX SERVER MONITOR

OnForce has released an initial release of an Ajax Server Monitor.

There are two components, the Ajax Server Monitor, which displays real-time CPU, memory, and MySQL server data, and the COMET System Command Streamer, which pulls output directly from normal system commands to the browser.

The software is currently working in PHP 5, with the PHP-JSON extension, and you can download it here.

Ajax Server Monitor

COMET System Command Streamer

October 12th, 2006

INSTANTIATIONS GWT DESIGNER

Googles GWT toolkit came air discover of the gates. We direct saw interest, and some components were effort created. It sound the requirement of the “I am a Java developer but I don’t poverty to wager JavaScript” profile.

Vendors are effort behindhand GWT too. One warning is the newborn GWT Designer from Instantations:

GWT Designer™ is a interface creator that supports GWT. Use GWT Designer’s seeable tools and wizards, and Java cipher power be generated for you. You don’t requirement to indite some lines of Java code, but you crapper full modify the resulting Java if you wish.
GWT Designer is derivative from the award-winning WindowBuilder Pro™ and leverages its worldly utilization facilities — including drag-and-drop, bi-directional cipher generation, internationalization, and a assemblage of layout managers.

Features

  • True bi-directional cipher generation­All changes prefabricated direct to the Java maker cipher are echolike directly in the illustration designer. And changes in the illustration specializer are echolike directly in the Java code.
  • Real WYSIWYG design­The organisation analyse shows actual GWT/HTML controls so every properties are echolike graphically.
  • Cascading Style Sheet (CSS) support­GWT Designer crapper administer CSS to Design View, so you crapper wager just how screens power countenance in the browser.
  • Speeds up organisation processes­ Using speed profession for alacritous bytecode modification, GWT Designer opens a organisation in a pair seconds­ such faster than actuation the covering in the GWT Hosted Web Browser.
  • Rich redaction experience­GWT Designer supports every commission types with favourable and pertinent layout modify policies. AbsolutePanels wage “Matisse-like” widget snapping and alignment. Graphically layout grids, flextables and tabpanels.
  • Wizards and builders­GWT Designer provides wizards for creating newborn PopupPanels, DialogBoxes and Composites. Wizards for creating newborn GWT projects and RemoteServices.
  • GWT covering launching­GWT Application start plan includes a start road for alacritous actuation using popup schedule or application blistering key.
  • Intelligent refactoring­Renaming or agitated a power collection or far assist updates the power XML enter and renames some related Async and Impl classes.
  • Internationalization­Extract hornlike coded section to inventiveness bundles and automatically control binary locales.
  • Easy physique and deployment - One-click deployment agency automatically creates a send WAR enter and uploads it to your server. An ANT playscript is generated for an easy, repeatable physique process.

October 12th, 2006

ACCESSIBLE AJAX BEST PRACTICES

Access Matters has wrapped up an article on Today’s AJAX and DHTML Best Practices:

This article builds a sturdy three legged stool which we can stand upon to see farther. Before getting started, I want to set the stage by defining a benchmark. Accessibility’s worst case scenarios are for blind people. The blind are the hardest to accommodate. Some might think that too much attention is paid the blind when there are so many other disabilities, let alone so many more people when the wide range is counted, but the facts are that the others are easier to accommodate. Ensuring good access for the blind is the hardest challenge and therefore the benchmark.

NOTE: Becky Gibson wrote the last article, and will be presenting on these ideas at The Ajax Experience!