Web Info & Tutorials

April 2008
M	T	W	T	F	S	S
« Mar		May »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

GCHART 2.0: GIVE ME SOME PIE

By admin

Version 2.0 of GChart has been released:

The main idea behind GChart is simple: You can make very nice charts efficiently out of a reasonably small number of 1-cell Grids (for the aligned labels) and (empty) Images (for everything else), styled and positioned appropriately on an AbsolutePanel. Not surprisingly, bar charts don’t suffer at all under the limitations imposed by this strategy–but (as long as you don’t mind using dotted connecting lines or banded-filled pie slices) line and pie charts also do remarkably well.

With version 2.0 the library adds support for pie, line, and area charts, baseline-based bar charts, and more.

John Gunther wrote up some of the technical details:

Squaring the Pie Slice

Some of you may recall the original GChart 1.1 post/discussion:

Reading this, you may wonder how I ended up implementing pie slices
and arbitrary angled connecting lines. Did I use the “transparent
border triangle trick” and/or clever algorithms from walterzorn.com?

Though I tried to use these, I reverted to something a lot simpler:
dotted connecting lines and banded-filled pie slices. Two new Symbol
class properties, fillSpacing and fillThickness, let you control the
spacing of the dots/bands and their size/thickness.

Though this approach means you may sometimes have to choose between
visual chart quality and speed, these new properties make it easy for
you to control this tradeoff. Besides, I like to think that dotted
connecting lines and banded fill pie slices really don’t look all that
much worse than the solid fill variety. But then again, I could never
understand why no one ever used square pie charts…

In any case, the whole point of GChart is to layer the chart on top of
standard GWT Widgets, so, since those Widgets can only really draw
rectangles efficiently, I decided to make a virtue of necessity and
whole-heartedly embrace this dotted/banded look.

CSS Convenience Methods: A cure for “CSS anxiety disorder”?

For many months I suffered from “CSS anxiety disorder”: a condition
arising from one’s desire to use CSS to specify an attribute (and thus
conform to a GWT best practice) while simultaneously wanting the same
property in the Java API (so that it would not be unnaturally
segregated from closely related features).

To address this (possibly imaginary) problem, the GChart 2.0 Java API
includes “CSS convenience methods” that can (optionally) override
traditionally CSS-based attribute specifications for certain selected
CSS attributes.

To some, this may seem like a fine point, since you could easily do
the same thing via a GWT DOM class method call, but to me, once you
invoke a DOM method you are thinking of the GChart as an HTML element,
and for some usage scenarios, that just isn’t logical.

For example, for some applications, the background color of a GChart
is mainly about how the color-scheme of the chart blends in with the
surrounding page, and for these applications a CSS-based specification
makes good sense. Yet, for other applications, it is mainly all about
how well background color matches with, say, with the pie slice
shading pattern. That is, in some cases, background color is better
viewed as a feature of the GChart considered as a Java object
independent of its connection to any web page. So why can’t you just
call GChart.setBackgroundColor in such cases? With GChart, you can.

To assure that the two specification methods can exist harmoniously
together, GChart recognizes a special property value, GChart.USE_CSS,
which instructs GChart to stand aside and allow the traditional CSS
cascade to define the attribute. For all such “dual access” GChart
Java properties (which are simultaneously also CSS attributes),
USE_CSS is the default property value. This assures that you can use
CSS just as you would with a standard GWT Widget whenever it makes
more sense to control that attribute from the “GChart as HTML element”
perspective.

Thanks to these CSS convenience methods, I have attained inner peace
through Java/CSS redundancy. I recommend the same treatment for anyone
else suffering from “CSS anxiety disorder”. See the GChart.USE_CSS
javadoc comment for more information.

I am sure that John will be porting this to the GWT for JavaScript 2 at some point soon!

Posted in Ajax | Comments Off

FUN WITH SVG AND CSS ANIMATIONS

By admin

Torrey Rice took Safari 3.1 and the new CSS Animations feature, and mashed it up with SVG to create a fisheye demo.

All the functionality through CSS:

PLAIN TEXT

CSS:

.dock img {
width:50px;
padding:10px;
float:left;
position:relative;
display:block;
-webkit-transition:width 0.5s ease-out, top 0.2s ease-out;
}
.dock img:hover {
width:100px;
}
.dock img:active {
top:-40px;
}
.dock img:hover + img {
width:70px;
}

Jeff Schiller then asked to see the example using the standard SMIL, which has been turned on (all beit a subset) on WebKit nightly to pass Acid3.

Posted in Ajax | Comments Off

ECMASCRIPT 4 UPDATE: NEW GRAMMAR, AND NO TAIL CALLS

By admin

.... proper tail calls are out of ES4 as of yesterday's Ecma TC39 meeting, by general (regretful, in Mozilla's
case) agreement.

This is Brendan talking about the death of true tail calls in JavaScript 2 as the language gets tightened a la:

ES4 has overspent its complexity budget in order to explore a large design space. It is now shrinking to meet practical budgets involving Ecma member consensus, prime mover commitments, fatigue effects, community expectations, and the like. No one working on ES4 wants it to be like Perl 6. We aim to finish this year.

Chromatic jumped on this one.

Francis Cheng posted about the grammar update for ECMAScript 4 which has the following updates:

Rename ListExpression to CommaExpression;
Make CommaExpression a binary expression in the AST;
Change ParenExpression to ParenListExpression in SuperExpression;
Rename ParenListExpression to ParenExpression;
Remove Path qualified PropertyNames;
Mark reserved/deferred features with ‘x’;
Remove ‘wrap’;
Remove ‘like’ as a type;
Add ‘like’ as a binary type operator;
Remove LetStatement;
Remove UnitDefinition;
Fold NullableTypeExpression into TypeExpression;
Remove OverloadedOperator from QualifiedNameIdentifier;
Add distinguishing syntax for tuples and array types in ArrayType;
Add SplatExpression to arguments and array literals;
Add RestPattern to array patterns;
Add to ReservedIdentifiers ‘type’;
Add to ContextuallyReservedIdentifiers ‘external’;
Removed from ContextuallyReservedIdentifiers ‘decimal’, ‘double’, ‘generic’, ‘int’, ‘Number’, ‘precision’, ‘rounding’, ‘standard’, ‘to’, ‘uint’, ‘unit’;
Add LikedPattern to Parameter;
Add ‘like’ predicate to ResultType;
Remove ParameterKind and use in Parameter

Posted in Ajax | Comments Off

JQUERY GETS CLASSY

By admin

Finally, you crapper intercommunicate absent the apothegmatic jQuery code, and you crapper instead clutch a more wordy edition Classy Query, that Evangelist Resig has provided.

This player style is amend for a programme or a writing parser. The essential people.

You crapper today indite cipher same this:

PLAIN TEXT

HTML:

<script src=“jquery.js”></script>
<script src=“classy.js”></script>
<script>
jQuery.Events.addEventListener(document, "ready", function(){
jQuery.querySelectorAll("div").forEach(function(elem){
jQuery.DOM.append(elem, " <b>More…</b>");
});
jQuery.querySelectorAll("div b").forEach(function(elem){
jQuery.Events.addEventListener("click", function(elem, event){
var incoming = jQuery.Traversal.nextSibling(elem);
var aliveness = jQuery.Effects.buildAnimation( next, {height: "toggle"});
amimation.start();
});
});
});
</script>

Finally. Check discover the source.

Posted in Ajax | Comments Off

GOOGLE RELEASES GWT FOR JAVASCRIPT 2

By admin

The Google Web Toolkit has daylong been a fastness of Java developers who are healthy to cantillate “We don’t poverty your stinking JavaScript!”

GWT is a aggregation more than a computer lateral support that allows you to indite cipher in Java. It is a fecundity agency that lets you developer and effort a resolution that performs substantially and entireness interbreed covering (huge wins). In fact, when I speech to grouping that are using GWT, the most ordinary interpret that I center is how bright they are with:

How the covering meet entireness interbreed browser
How enthusiastic it is to intend a newborn edition of GWT, separate the newborn compiler, and intend essential action improvements

Why should this meet springy in a Java world? Today, it breaks out. Google has free GWT for JavaScript 2.

With the upcoming relationship of JavaScript 2 hopefully touch our browsers, wouldn’t it be pleasant to physique your Ajax applications using JavaScript, but also having the interbreed covering friendliness that GWT gets you.

How does it work?

You indite an covering using JavaScript 2, and you then separate it finished a programme which spits discover the aforementioned optimized JavaScript maker cipher that entireness for the different browsers.

Why indite interbreed covering JavaScript when you crapper meet indite JavaScript?

This fits in dead with Steve Yegge releasing js2-mode, a newborn JavaScript 2 power for Emacs that has a aggregation of enthusiastic features:

Asynchronous highlighting
Code folding
Comment and progress filling
Syntax errors
Strict warnings
jsdoc highlighting

Also, Didier has posted the programme that GWT has been submitted to the JCP as JSR 404.

Posted in Ajax | Comments Off

REGINANS SAY THEY LIKE THEIR BANKERS

AJAXIAN ROUNDUP FOR MARCH, 2008: IE 8, ACID3, AND PERFORMANCE

GCHART 2.0: GIVE ME SOME PIE

FUN WITH SVG AND CSS ANIMATIONS

ECMASCRIPT 4 UPDATE: NEW GRAMMAR, AND NO TAIL CALLS

JQUERY GETS CLASSY

GOOGLE RELEASES GWT FOR JAVASCRIPT 2