Lively Kernel

Lively
	Lively DemoLively Demo Lively examples running in Safari
Developer(s)	Sun Microsystems Laboratories, Hasso Plattner Institut
Stable release	0.8.5 / April 6, 2009
Operating system	Most current, popular browsers yet best experienced using: Safari 4 (Mac), Google Chrome (PC). Internet Explorer (PC) will require Google Chrome Frame.
Type	Web development
License	MIT
Website	http://lively-kernel.org/

The Lively Kernel is a web programming environment originally developed at Sun Microsystems Laboratories. The Lively Kernel supports desktop-style applications with rich graphics and direct manipulation capabilities, but without the installation or upgrade hassles that conventional desktop applications have.

Overview

The Lively Kernel is a graphical composition and integrated programming environment written entirely in the JavaScript programming language using standard browser graphics (W3C Canvas or SVG). It is thus accessible to any browser as a web page, and it begins to operate as soon as the web page is loaded. It is able to edit its own graphics, edit its own code and, through its built-in WebDAV support, it can save its results or even clone itself onto new web pages. In addition to its application development capabilities, Lively can also function as its own integrated development environment (IDE), making the whole system self-sufficient with no tools other than a browser.

Shapes, Widgets, Windows and an IDE all on a Web Page

The Lively Kernel uses a Morphic graphics model to add behavior to a scene graph built from browser graphics. Simple graphics are thus assembled into such standard widgets as sliders, scroll bars, text views, lists and clipping frames. A simple window system built from these widgets offers object inspectors, file browsers and code browsers. Even the rudimentary demo pages thus have the ability to edit and test new code in a simple code browser while the system is running.

Lively has been used to build simple web sites, including its own tutorial, and also a client-side Wiki system that stores its pages in an SVN repository. Lively content varies from relatively static pages of text to fully dynamic models that look and behave like flash simulations. The Lively Kernel achieves complex dynamic behavior without any specific animation support (it does not use the animation features of SVG), but by simple scheduling of multiple green-thread processes in JavaScript.

Lively Text and Transformations

The Lively Kernel includes its own multifont text editor written in JavaScript. It includes support for centering, justification and similar rudimentary text composition capabilities. Working in Lively thus has much the same feel as working in a web page design program, except that the on-the-fly text layout is not being done in an offline composition program, but it is in fact the built-in dynamic behavior of text in the Lively Kernel.

The liveliness of Lively graphics becomes even more apparent when you manipulate the scale and rotation handles for objects and text. The entire code browser can be used when tilted 20 degrees on its side. Because the text editor is comprised entirely of lively graphics, it works perfectly well when rotated or scaled, just as do the scroll bars, clipping frames, and the rest of the entire lively user interface.

Cross-Browser Compatibility

The Lively Kernel depends on browser support for JavaScript and SVG or Canvas graphics, all now part of the W3C standards. At the time of writing, this means that it runs in Safari, Firefox, Chrome and Opera browsers.

While this requirement might seem less compatible than HTML, Lively is actually more compatible across the browsers on which it runs than is HTML. This is because there is greater uniformity among JavaScript, SVG and Canvas implementations than there is from one HTML implementation to another. Except for one small initial file, the Lively Kernel code base is entirely free of tests for which client browser is being used.

The Lively IDE

Lively includes an integrated development environment of considerable power, designed to work via WebDAV with a local set of a dozen or so source JavaScript files synchronizable with an SVN repository. If the user opens a SystemBrowser, all the JavaScript source files are listed in the file pane of the browser. If the user clicks on one of these files, it will be read, parsed (by an OMeta JavaScript parser) and displayed similar to a Smalltalk browser with functions or class definitions listed and, for each class, all the method names are shown. The user can click on a method name, edit its code in the bottom pane, and then save the new definition. The new definition will be checked for syntax and, if correct, it will be stored back in the .JS file. Moreover, if in "eval mode" (the usual case), the method will be redefined in the system that is running. This allows non-critical changes to be made without any need to restart Lively or any of the applications being developed. When all the source files are loaded, a rapid scan will find every reference to a selected text, and present all the code bodies that match in a separate sub-browser.

The Lively IDE includes object inspectors and morph style panels for controlling fills, borders, and text styles. There are also facilities for debugging at error points and profiling for performance tuning, but these have not been pushed, owing to the improving quality of such run-time support in all the major browsers.

The Lively Wiki

The IDE operates on its source code files in an SVN repository to manage evolution of the Lively code base. The same approach has been used to empower users with control over active web content in the form of a client-side Wiki. Because Lively includes facilities to edit the content in its worlds (scene graphs and other content), and to store that content as web pages, a WebDAV connection to an SVN repository allows Lively to store new versions of its page content while it is being incrementally developed. As each new version is saved, it is viewable from the rest of the Internet and prior versions can be retrieved in cases of error or change of mind. It is notable that this Wiki style of evolving web content extends to all the textual, graphical, and scripting content in Lively, as well as to any new forms that may be defined, yet without any need for a Wiki server of any kind. All that is required is a normal server, and a normal SVN-style repository. Increasing amounts of the Lively Project content is now maintained in this manner.

Lively for Qt

Lively for Qt is a new implementation of the Lively Kernel in which the "kernel" parts of Lively have been replaced by functionality offered by the Qt framework. Lively for Qt inherits most of the basic functionality (such as the implementation of widgets, layout management, core event handling and core JavaScript support) from Qt. Lively for Qt retains the exceptionally interactive nature (the "liveliness") of the Lively Kernel, e.g., by allowing the user interface and application source code to be edited on the fly. However, in Lively for Qt the development work is performed using the familiar, well-documented APIs of the Qt platform.

Example code

// ClockMorph: A simple analog clock

Morph.subclass(“ClockMorph”, { 

    defaultBorderWidth: 2, 
    type: "ClockMorph",

    // Constructor 
    initialize: function($super, position, radius) {

        $super(position.asRectangle().expandBy(radius), "ellipse"); 
        this.openForDragAndDrop = false; // Do not handle drag-and-drop requests 
        this.makeNewFace(); // Construct the clock face 
        return this; 
    },

    // Construct a new clock face 
    makeNewFace: function() { 

        var bnds = this.shape.bounds(); 
        var radius = bnds.width/2; 
        var labels = []; 
        var fontSize = Math.max(Math.floor(0.04 * (bnds.width + bnds.height)),2); 
        var labelSize = fontSize; // room to center with default inset 

        // Add Roman numerals to the clock 
        for (var i = 0; i < 12; i++) { 
            var labelPosition = bnds.center().addPt(Point.polar(radius*0.85, 
                                ((i-3)/12)*Math.PI*2)).addXY(labelSize, 0); 
            var label = new TextMorph(pt(0,0).extent(pt(labelSize*3,labelSize)), 
            ['XII','I','II','III','IV','V','VI','VII','VIII','IX','X','XI'][i]); 
            label.setWrapStyle(WrapStyle.SHRINK); 
            label.setFontSize(fontSize);
            label.setInset(pt(0,0));        
            label.setBorderWidth(0);
            label.setFill(null);
            label.align(label.bounds().center(),labelPosition.addXY(-2,1)); 
            this.addMorph(label); 
        } 
    
        // Add clock hands 
        this.addMorph(this.hourHand = Morph.makeLine([pt(0,0),pt(0,-radius*0.5)],4,Color.blue)); 
        this.addMorph(this.minuteHand = Morph.makeLine([pt(0,0),pt(0,-radius*0.7)],3,Color.blue)); 
        this.addMorph(this.secondHand = Morph.makeLine([pt(0,0),pt(0,-radius*0.75)],2,Color.red)); 
        this.setHands(); 
        this.changed(); 
    }, 
    
    // Set clock hand angles based on current time 
    setHands: function() { 

        var now = new Date(); 
        var second = now.getSeconds(); 
        var minute = now.getMinutes() + second/60; 
        var hour = now.getHours() + minute/60; 
        this.hourHand.setRotation(hour/12*2*Math.PI); 
        this.minuteHand.setRotation(minute/60*2*Math.PI); 
        this.secondHand.setRotation(second/60*2*Math.PI);    
    }, 

    // Will be called when the ClockMorph is placed in a world 
    startSteppingScripts: function() { 
        this.startStepping(1000, "setHands"); // once per second 
    } 
});

References

External links

Multiple popular browsers are targeted for the final release. Lively Kernel is best experienced using: Safari 4 (Mac), Google Chrome (PC). Internet Explorer (PC) will require Google Chrome Frame.

This Web-software-related article is a stub. You can help Wikipedia by expanding it.