Web Info & Tutorials

December 14th, 2007

GWT CAN DO SPINNERS?

I’m not really accustomed to seeing a lot of UI press about GWT so I was pleasantly surprised when Dietrich Kappe showed me the new spinner control he’s been working on. Most of you have probably seen Flash-based implementations, especially on Amazon, where images spin on a type of carousel. It’s a very cool effect.

The widget uses projection geometry (a view point and calculating image size and position based on where lines pass through the z=0 plane) and a little bit of trigonometry for the circle. Also, zIndex is set based on an object’s z coordinate. At this stage the implementation definitely performs differently based on machine horsepower and browser platform. It performs pretty well on IE7 and Safari 3, less well on Firefox.

This is still a work in progress but Dietrich already has plans for adding DnD and setting up clickable elements. GWT developers should love this control. Check out the demo here.

December 14th, 2007

JSTM: JAVA SHARED TRANSACTED MEMORY FOR GWT

After my Google Gears talk at JavaPolis, I spoke to the nice fellow, Cyprien Noel, behind JSTM, Java Shared Transactional Memory for GWT.

This tool allows you to automatically have state shared among clients. This could be a great solution for certain sync scenarios if we make it work in the Gears world. The same syncing that is done on the server with multiple clients could be used when merging online and offline worlds.

jstm4gwt is specialized for making easier the developpement of distributed gwt-ajax applications ( jstm4gwt is available for GWT/Java heavy clients/.NET clients). This framework let the user being focused on the functional data he wants use into his gwt ajax application and jstm4gwt do the job for all the the distributed part of the application ( sending modified data, broadcasting changes, …).

jstm4gwt is more simple than SOA design since you don’t have to define services but you just have to work on your functional data and implement listeners on client (refreshing UI ) and on the server ( persistency, mailing , …).

jstm4gwt is efficient for gwt multi users games.

jstm4gwt allows you to setup a powerfull distributed gwt application in few minutes.

You can watch a demo of JSTM at work and take an early peak at the beast.

December 14th, 2007

THE PROBLEM WITH INNERHTML

Some like to DOM their way around. Others prefer the simplicity of innerHTML. Julien Lecomte, of Yahoo!, wrote up his thoughts on the problems with innerHTML.

Julien first points out some issues:

  • Improper handling of the innerHTML property can enable script-injection attacks on Internet Explorer when the HTML string contains a script tag marked as defered: <script defer>...<script>
  • Setting innerHTML will destroy existing HTML elements that have event handlers attached to them, potentially creating a memory leak on some browsers.
  • You don’t get back a reference to the element(s) you just created, forcing you to add code to retrieve those references manually (using the DOM APIs…)
  • You can’t set the innerHTML property on all HTML elements on all browsers (for instance, Internet Explorer won’t let you set the innerHTML property of a table row element)

He then puts together Douglas Crockfords purge and some code to clean up script tags, arriving at:

JAVASCRIPT:
  1.  
  2. YAHOO.util.Dom.setInnerHTML = function (el, html) {
  3.     el = YAHOO.util.Dom.get(el);
  4.     if (!el || typeof html !== 'string') {
  5.         return null;
  6.     }
  7.  
  8.     // Break circular references.
  9.     (function (o) {
  10.  
  11.         var a = o.attributes, i, l, n, c;
  12.         if (a) {
  13.             l = a.length;
  14.             for (i = 0; i <l; i += 1) {
  15.                 n = a[i].name;
  16.                 if (typeof o[n] === 'function') {
  17.                     o[n] = null;
  18.                 }
  19.             }
  20.         }
  21.  
  22.         a = o.childNodes;
  23.  
  24.         if (a) {
  25.             l = a.length;
  26.             for (i = 0; i <l; i += 1) {
  27.                 c = o.childNodes[i];
  28.  
  29.                 // Purge child nodes.
  30.                 arguments.callee(c);
  31.  
  32.                 // Removes all listeners attached to the element via YUI's addListener.
  33.                 YAHOO.util.Event.purgeElement(c);
  34.             }
  35.         }
  36.  
  37.     })(el);
  38.  
  39.     // Remove scripts from HTML string, and set innerHTML property
  40.     el.innerHTML = html.replace(/<script[^>]*>((.|[\r\n])*?)<\\?\/script>/ig, "");
  41.  
  42.     // Return a reference to the first child
  43.     return el.firstChild;
  44. };
  45.  
December 14th, 2007

CANVAS BEVEL SCRIPT

The endorse of retiring canvas, faith Effenberger, has become discover with a newborn microformat playscript that enables you to add bevels to your images (and also shading, sunshiny and glowing).

Why would you poverty to do this via canvas?

  • Fast and cushy to implement. Just add class=”bevel” to the ikon and your beatific to go
  • Don’t requirement to pay instance in an ikon application creating images with corners
  • Works rattling substantially with installation avatars. Doesn’t order added computer work
  • It’s departed cushy to modify the attributes of the corners
  • Free of calculate ingest on non-commercial and clannish scheme sites.

The microformat

  • Initialisation collection “bevel
  • vary the length by adding iradius followed by the desirable radius in percent:
    Image length collection “iradius20” - min=20 max=40 default=20
  • vary the scene by adding usemask:
    Image scene collection “usemask
  • vary the scene by adding ibackcol followed by the color:
    Mask colouration collection “ibackcol” - min=000000 max=ffffff default=0080ff
  • vary the scene by adding ifillcol followed by the color:
    Mask colouration collection “ifillcol” - min=000000 max=ffffff default=ibackcol
  • vary the luminous by adding noglow:
    Image luminous collection “noglow
  • vary the luminous by adding iglowopac followed by the desirable opacity in percent:
    Glow incomprehensibility collection “iglowopac” - min=1 max=100 default=33
  • vary the glowcolor by adding iglowcol followed by the color:
    Glow colouration collection “iglowcol” - min=000000 max=ffffff default=000000
  • vary the sunshiny by adding noshine:
    Image sunshiny collection “noshine
  • vary the sunshiny by adding ishineopac followed by the desirable opacity in percent:
    Shine incomprehensibility collection “ishineopac” - min=1 max=100 default=40
  • vary the shinecolor by adding ishinecol followed by the color:
    Shine colouration collection “ishinecol” - min=000000 max=ffffff default=ffffff
  • vary the graduation by adding noshade:
    Image graduation collection “noshade
  • vary the graduation by adding ishadeopac followed by the desirable opacity in percent:
    Shade incomprehensibility collection “ishadeopac” - min=1 max=100 default=50
  • vary the graduation by adding islinear:
    Shade position collection “islinear
  • vary the shadecolor by adding ishadecol followed by the color:
    Shade colouration collection “ishadecol” - min=000000 max=ffffff default=000000

Canvas Bevel

December 14th, 2007

OPERA SUES MICROSOFT OF STANDARDS COMPLIANCE

Ah, the courts. The latest case aimed at Microsoft is from Opera, as they urge Microsoft to give consumers a genuine choice of standards—compliant Web browsers:

The complaint describes how Microsoft is abusing its dominant position by tying its browser, Internet Explorer, to the Windows operating system and by hindering interoperability by not following accepted Web standards. Opera has requested the Commission to take the necessary actions to compel Microsoft to give consumers a real choice and to support open Web standards in Internet Explorer.

"We are filing this complaint on behalf of all consumers who are tired of having a monopolist make choices for them," said Jon von Tetzchner, CEO of Opera. "In addition to promoting the free choice of individual consumers, we are a champion of open Web standards and cross-platform innovation. We cannot rest until we've brought fair and equitable options to consumers worldwide."

Opera requests the Commission to implement two remedies to Microsoft’s abusive actions. First, it requests the Commission to obligate Microsoft to unbundle Internet Explorer from Windows and/or carry alternative browsers pre-installed on the desktop. Second, it asks the European Commission to require Microsoft to follow fundamental and open Web standards accepted by the Web-authoring communities. The complaint calls on Microsoft to adhere to its own public pronouncements to support these standards, instead of stifling them with its notorious "Embrace, Extend and Extinguish" strategy. Microsoft's unilateral control over standards in some markets creates a de facto standard that is more costly to support, harder to maintain, and technologically inferior and that can even expose users to security risks.

Mary Jo Foley quickly chimed in on why it is a bad idea:

  1. Should antitrust courts be the ones in charge of determining which versions of Cascading Style Sheets (CSS), XHTML, Document Object Model (DOM) and other Web standards are the ones to which all browser/Web developers should be writing? Participants in various standards bodies can’t even agree among themselves which version of these standards is the best. How are judges supposed to wade through the browser-standards confusion in a good/fair way?
  2. Would it be positive for customers if Microsoft were suddenly forced to create a version of IE that looked good on paper, in terms of more complete standards compliance, but which broke third-party and custom Web applications? Microsoft has argued that it is trying to avoid this situation with IE and is working on various ways it can make IE more standards-complaint without breaking existing apps, completely upsetting the partner/customer universe.
  3. With Mozilla, Firefox has proved you don’t need government intervention to wrest a substantial percentage of the browser market from Microsoft. You just friends with deep pockets (like Google) and a community of dedicated developers — plus a guaranteed customer base who prefer anything other than Microsoft technologies.

    In the end, Microsoft’s own inertia, browser-security problems and inability to react quickly to market changes (where, oh where, is IE 8?) will continue to help its browser competitors more than a ruling by the EU or other antitrust body would.

    What do you think? Is Opera’s attempt to get the European Commission to force the unbundling of IE from Windows too late? And what’s your take on Opera’s attempt to get the courts involved in enforcing Web-standards compliance?