Thursday, July 31st, 2008
JavaFX was announced at JavaOne.... in 2007, and we are now seeing a preview release.
Josh Marinacci of the JavaFX team put together a post with an example that builds the following:
The code for this is simply:
JAVA:
-
-
package blogdemo;
-
-
import javafx.scene.*;
-
import javafx.scene.paint.*;
-
import javafx.scene.geometry.*;
-
import javafx.application.*;
-
import javafx.scene.transform.*;
-
import javafx.input.*;
-
import javafx.animation.*;
-
import java.lang.System;
-
-
var angle = 0.0;
-
-
-
windowStyle: WindowStyle.TRANSPARENT visible: true
-
width: 400 height: 400
-
stage: Stage {
-
fill: null
-
-
translateX: 100 translateY: 100
-
content: for(i in [0..10]) {
-
// here is the magic with binding
-
-
fill:
Color.
rgb(25*i,
0,
0, i/
10.
0)
-
width: 100 height: 100 arcHeight: 10 arcWidth: 10
-
stroke:
Color.
BLACK strokeWidth:
5
-
transform: bind [
-
Transform.rotate(-i*36+angle/2,50,50),
-
Transform.translate(angle/4,0),
-
]
-
}
-
}
-
-
}
-
}
-
}
-
-
var anim = Timeline { keyFrames: [
-
KeyFrame { time: 0s values: angle => -360 tween Interpolator.EASEBOTH },
-
KeyFrame { time: 2s values: angle => 360 tween Interpolator.EASEBOTH },
-
]
-
autoReverse: true
-
repeatCount: Timeline.INDEFINITE
-
};
-
anim.start();
-
And you can check out the application if you have Java 1.6 installed.
Michael Coté got together with the Sun folks and recorded a demo and interview:
I am interested to see what Sun does with JavaFX, but I have to admit to being underwhelmed and more excited about what Sun could do with the Java plugin and have that as a way to interact with Ajax applications.
Category: Browsers
, IE
The first main play for IE 8 was to get developers on board, and start a conversation with us on what they are fixing, and where they are going.
There were a couple of user features such as Activities and Web Slices, but you could tell they hadn't finished there.
In their latest blog post they talk about reliability and the fact that they now have isolation between web pages and the chrome itself via processes. This means that a page could die, but the browser is fine:
One of our most significant investments is in a feature called Loosely-Coupled IE (“LCIE”), which is an architectural attribute that helps isolate different parts of the browser from each other, most notably, the frames from the tabs. LCIE is the foundation that we have built a few of our features on including Automatic Crash Recovery of which I expand on below.
For Beta 2, we added the following changes:
Frame Process Merging
To help improve startup performance, we have reduced the number of processes that we start. Instead of firing up two processes every time you launch the browser (one for the frame and one for your tabs), we now only fire up one frame process the first time you launch IE. Subsequent launches will only start a new tab process or make a new tab in an existing tab process.
For users that are accustomed to browsing websites in multiple “sessions”, for example if you want to log in to multiple email sites simultaneously, you can specify the “-nomerge” command line option to disable this feature.
More tab processes
It turns out that the vast majority of all IE sessions contain three or fewer tabs. Accordingly, in Beta 2 we try to give users three efficient tab processes. This is contingent on the user’s computer capabilities, but the more capable a computer is, the more processes we will use, up to a point. Adding more processes gives users much better isolation in the event of a failure. If each tab is in its own process, websites are completely isolated from each other.
Virtual tabs
We have also added the internal capability to “hot swap” the process from underneath a tab. Previously, Protected Mode worked on a per-process basis. For example, say you add a website to your trusted sites in IE7. If that site links to another site that is not in your trusted sites, it will cause you to switch browser windows when you click the link.
We improved this in IE8 Beta 1 with LCIE when we split the frame from the tabs. With the split we can create a new tab in the same window and switch you to that tab as opposed to being “punted” to a new window.
Virtual tabs lets you navigate across Protected Mode in the same tab since we just switch the process under the tab to the correct integrity level. This is really just “UI-sugar” – virtual tabs do not impact security or protected mode in any way, other than to make it more convenient to transition between protected mode on/off.
LCIE's capability of isolating different parts of the browser coupled with more tab processes and virtual tabs will improve the performance and overall reliability of Internet Explorer.
I saw an early IE 8 beta 2, and there are other very interesting features in there too. Some were subtle but interesting. We should get our hands on it soon!
Category: JSON, Python
John Paulett wanted to be able to define complex Python model objects, then seamlessly pass them into CouchDB and to client-side Javascript.
To make this happen for objects that are beyond primitive sets he created JSON Pickle which has been used on the Universal Feed Parser, and lets you do the following:
PYTHON:
-
-
>>> import jsonpickle
-
>>> from jsonpickle.tests.classes import Thing
-
-
# Create an object.
-
>>> obj = Thing('A String')
-
>>> print obj.name
-
A String
-
-
# Use jsonpickle to transform the object into a JSON string.
-
>>> pickled = jsonpickle.dumps(obj)
-
>>> print pickled
-
{"child": null, "classname__": "Thing", "name": "A String", "classmodule__": "jsonpickle.tests.classes"}
-
-
# Use jsonpickle to recreate a Python object from a JSON string
-
>>> unpickled = jsonpickle.loads(pickled)
-
>>> print unpickled.name
-
A String
-
Category: Adobe, Framework
Andi Gutmans of Zend has posted on a proposal for AMF support in the Zend Framework, which is being lead by the AMFPHP project leader, Wade Arnold.
This ZF component will allow for client-side applications built with Flex and Adobe AIR to communicate easily and efficiently with PHP on the server-side.
We are excited about this proposal as it is consistent with our emphasis to be a heterogeneous “use-at-will” framework and as it substantially strengthens Zend Framework’s RIA story. It is also another industry heavyweight joining as an official ZF contributor and joining the likes of IBM, Google and Microsoft in doing so.
Now that we have the Dojo integration ready for ZF 1.6 as a great Ajax story, AMF will complement that with more of an Enterprise oriented solution. We are currently planning to have AMF support aligned with the ZF 1.7 release but we will know better once the proposal has made it through the proposal process.
The proposal itself is here and its overview is:
Zend_Amf_Server provides Action Message Format (AMF3) support for the Zend Framework that is compatible with the Flash Player 9 and above. The Adobe Integrated Runtime (AIR) and Flash Player uses AMF to communicate between an application and a remote server. AMF encodes remote procedure calls (RPC) into a compact binary representation that can be transferred over HTTP/HTTPS protocol. Objects and data values are serialized into this binary format, which increases performance as the AMF serialization is a highly optimized procedure in the Flash Player. Zend_Amf_Server will act as an AMF gateway to the Zend Framework by exposing through introspection custom class objects and functions that will respond as callbacks through the Zend_Amf_Server gateway.
Category: Browsers, Canvas
Vladimir Vuki?evi? normally hacks on Mozilla products, but spent a little time on an experiment with IE. An experiment that looks very exciting indeed.
I love canvas, and wish that it was ubiquitous. We have great wrappers out there such as dojo.gfx, but wouldn't it be nice if canvas worked everywhere? (and the full API to boot).
Well, Vladimir has an experiment to get it to IE. The approach is very interesting indeed. It isn't like excanvas which uses VML... and there is a Silverlight bridge being worked on that looks promising. Instead, we have this:
I've been working on a native Canvas implementation for IE based on the same rendering core that's in Firefox.
The same implementation, shoe horned into IE:
With an object tag, a bit of CSS, and (to work around another IE bug) a single line of script, <canvas> elements in HTML just work. I'm excited that this experiment is working out, because lack of Canvas support in IE is one of the reasons people skip Canvas and instead turn to Flash and other plugin technologies.
</canvas>
Congrats on a great hack, and here's to you making it much much more.
Wednesday, July 30th, 2008
Category: JavaScript
In my other life as a desktop application developer (which due to a mix of Fluid, AIR, Prism, canvas, SVG, and Flash is threatening to converge on my Ajax life) I've long been a fan of data-binding frameworks that make it easy to have a form automatically synchronize with backing data structures, saving you from the tedium of a dozen little "widget.getValue() - dataModel.setValue()" calls (or in the case of grids, etc. much more verbose and tedious plumbing).
Dojo and others frameworks have some interesting binding features, but if your favorite JavaScript framework lacks form data binding, check out Steven Bazyl's small stand-alone JSON binding project: js-binding.
The project is just getting started, but it already has a few basic features that make it useful. For example, to convert this form:
HTML:
-
-
-
<input type="text" name="username"/>
-
<input type="text" name="email"/>
-
<input type="text" name="address.street"/>
-
<input type="text" name="address.city"/>
-
<input type="text" name="address.state"/>
-
...
-
</form>
-
into this object:
JAVASCRIPT:
-
-
{
-
username: "...",
-
email: "...",
-
address: {
-
street: "...",
-
city: "...",
-
state: "..."
-
}
-
}
-
You just need to write this code:
JAVASCRIPT:
-
-
var myObject = ...;
-
var myForm = ...;
-
var binder = Binder.FormBinder.bind( myForm );
-
binder.deserialize( myObject );
-
js-binder also has a built-in type conversion mechanism that, for example, allows you to easily integrate with a JavaScript date parsing library:
JAVASCRIPT:
-
-
var binder = Binder.FormBinder.bind( myForm, {
-
date: {
-
// Date handler using datejs much improved parsing...
-
parse: function( value ) { return Date.parse( value ); },
-
format: function( value ) { return Date.toString( 'M/d/yyyy' ); }
-
}
-
} );
-
binder.deserialize( myObject );
-
The docs are concise but useful.
Category: JavaScript, Prototype
In a follow-up to our post a few days ago on parallelizing JavaScript loading and firing an event when loading is done, Stefan Hayden wrote a Prototype extension (based on onDOMReady) that makes it easy for you to execute your code when all JavaScript is loaded:
JAVASCRIPT:
-
-
Event.onJSReady(function () { dependent_on_external_js(); });
-
Category: Performance, jQuery
Stuart Colville has found an issue where he needed to output some JavaScript in the middle of a page, before a library that depended on it was available:
The 6th Rule in Yahoo’s Performance Rules recommends placing script before the closing body tag to prevent blocking holding up the rendering of the page’s content. This works well but there are times where script needs to be output higher up in the page than it’s dependencies.
In this example I’m using jQuery but feel free to substitute jQuery for the your favorite framework.
The requirement is that there’s a need to run some code that would ideally use jQuery somewhere in the middle of the page. I could avoid the dependency and re-write everything without jQuery and for simple scripts this can be a good way to go. But, if I want to use some of the more complex jQuery features, then I really don’t want to have to re-invent the wheel or resort to including jQuery in the head of the document.
This lead him to the following example
HTML:
-
-
-
var muffin = muffin || {};
-
muffin.inline = muffin.inline || [];
-
muffin.inline.add = function(f){
-
muffin.inline[muffin.inline.length] = f;
-
};
-
</script>
-
-
-
muffin.inline.add(function(){
-
$('#green')[0].style.backgroundColor = 'green';
-
});
-
muffin.inline.add(function(){
-
$('#red')[0].style.backgroundColor = 'red';
-
});
-
</script>
-
-
<div id="red"><p>This should be Red
</p></div>
-
<div id="green"><p>This should be Green
</p></div>
-
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
-
-
$(function(){
-
if (muffin && muffin.inline){
-
for (var i=0, j=muffin.inline.length; i<j ; i++){
-
muffin.inline[i]();
-
}
-
}
-
});
-
</script>
-
This seems a little niche. You my run into this as you have server side components outputting things, but ideally you can fix that in your architecture and ship the JavaScript in the correct location.
4D is a commercial company that has a high level framework that sits on top of their RDBMS technology. They have a new version that allows you to access data in many new places: iPhone, Gears, HTML 5 APIs, AIR and Flex.
Check out the online demos such as a drag and drop shopping cart, or the Gears enabled personal tracker.
Tuesday, July 29th, 2008
Category: Book Reviews, Books, JavaScript
I heart David Flanagan. I'm making my way through "The Ruby Programming Language" this summer. Its exhaustiveness really satisfies. But a decade ago, my programming Bible was Flanagan's "JavaScript: The Definitive Guide". As I transitioned from a career in content to a career in code, "the Rhino book" taught me everything I needed to know about object-oriented JavaScript, DOM scripting and the other building blocks of today's Ajax landscape. I've bought a hard copy of each of the book's five editions. It remained, until recently, the only JavaScript book I'd recommend.
That all changed with the recent publication of JavaScript: The Good Parts by Yahoo's Douglas Crockford. Crockford probably needs no introduction. His incisive website and frequent blog posts have championed JavaScript's power and potential while calling out its drawbacks and frequent misuse. Now, with "JavaScript: The Good Parts," he has managed to provide a reference as useful for JavaScript pros as it is for novices. Part language primer, part apologia and part critique, Crockford's book draws from and extends many of his long-gestating themes about how to use JavaScript - and how not to use it.
The author's premise is so simple and intuitive that it sounds like rubbish until you suddenly realize that this is how all programming languages should be taught:
When I was a young journeyman programmer, I would learn about every feature of the languages I was using, and I would attempt to use all of those features when I wrote. ...
Eventually I figured out that some of those features were more trouble than they were worth. Some of them were poorly specified, and so were more likely to cause portability problems. Some resulted in code that was difficult to read or modify. Some induced me to write in a manner that was too tricky and error-prone. And some of those features were design errors. Sometimes language designers make mistakes.
Most programming languages contain good parts and bad parts. I discovered that I could be a better programmer by using only the good parts and avoiding the bad parts. After all, how can you build something good out of bad parts?
More...
Simon Willison is lately having a lot of fun with App Engine and developing small RESTful helper apps for the masses out there. Following JSON Time, a small timezone lookup API over HTTP (showcased at BBC's Mashed earlier this year) he now released JSON head which is what it says on the tin: a HTTP HEAD lookup app that returns a JSON object.
If you for example use the APP with a url parameter like this:
http://json-head.appspot.com/?url=http://www.yahoo.com/&callback=foo
You are going to get a JSON response with a wrapper function called foo:
JAVASCRIPT:
-
-
foo({
-
"status_code": 200,
-
&n
