| Lively Kernel | |
|---|---|
 Lively Kernel 0.9 example running inChromium 5 | |
| Original author | Dan Ingalls |
| Developers | Sun Microsystems Laboratories,Hasso Plattner Institute |
| Stable release | 2.1.3 / April 7, 2012; 13 years ago (2012-04-07) |
| Repository | |
| Written in | JavaScript, or C++ inQtvariant |
| Operating system | Cross-platform |
| Platform | AppleSafari, MozillaFirefox,Google Chrome,Opera,iPhone–iPad,Microsoft Internet Explorer pre-version 9 only with extensions, but an experimental port, needing an added web browser plug-in, is available |
| Available in | English |
| Type | Web development |
| License | MIT |
| Website | lively-kernel |
TheLively Kernel is anopen-source web programming environment, developed byDan Ingalls when he was atSAP Research. It supports desktop-style applications with rich graphics and direct manipulation abilities, but without the installation or upgrade troubles of conventional desktop applications.[1][2] Development began atSun Microsystems Laboratories inMenlo Park, California, and later moved to theHasso Plattner Institute inPotsdam-Babelsberg near Berlin.
The Lively Kernel is a graphical composition and integrated programming environment written fully in theprogramming languageJavaScript using standard browser graphics (W3C Canvas or SVG). It is thus accessible to any browser as a web page, and it begins operating as soon as the web page is loaded. It is able to edit its own code and graphics, and through its built-in WebDAV support, it can save its results or even clone itself onto new web pages. Along with its application development abilities, it can also function as its own integrated development environment (IDE), making the whole system self-sufficient with no tools except a browser.
The Lively Kernel uses aMorphic graphics model to add behavior to ascene graph built from browser graphics. Simple graphics are thus assembled into such standardgraphical widgets assliders,scrollbars, text views, lists andclipping frames. A simplewindowing system built from these widgets offers object inspectors,file managers (browsers) andcode 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-sideWiki system that stores its pages in a versioned repository. Content can vary from relatively static pages of text to fully dynamic models that look and behave likeAdobe 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 multiplegreen threadprocesses in JavaScript.
The Lively Kernel includes its own multifont text editor written in JavaScript. It includes support for centering, justification and similar rudimentary text composition abilities. 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 the built-in dynamic behavior of text in the Lively Kernel.
The liveliness of Lively graphics becomes even more apparent when manipulating the scale and rotation handles for objects and text. The whole code browser can be used when tilted 20 degrees on its side. Because the text editor is made up entirely of lively graphics, it works correctly even if rotated or scaled, as do the scroll bars, clipping frames, and the rest of the entireuser interface.
The Lively Kernel depends on browser support for JavaScript and SVG or Canvas graphics, all now part of the W3C standards. As of 2009, 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 more 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.
As of 2011, Lively Kernel runs best inWebKit-based browsers such asSafari for Macintosh, orChromium orGoogle Chrome for Windows. Running in Internet Explorer (Windows) requiresGoogle Chrome Frame. Testing in all popular browsers is planned for the next release.
Lively includes an integrated development environment of considerable power, designed to work viaWebDAV with a local set of a dozen or so source JavaScript files synchronizable with a versioned 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 aSmalltalk 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 IDE operates on its source code files in a versioned 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 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.[3] All that is required is a server providing a HTTP WebDAV interface. Increasing amounts of the Lively Project content is now maintained in this manner.
// ClockMorph: A simple analog clockMorph.subclass(“ClockMorph”,{defaultBorderWidth:2,type:"ClockMorph",// Constructorinitialize:function($super,position,radius){$super(position.asRectangle().expandBy(radius),"ellipse");this.openForDragAndDrop=false;// Do not handle drag-and-drop requeststhis.makeNewFace();// Construct the clock facereturnthis;},// Construct a new clock facemakeNewFace:function(){varbnds=this.shape.bounds();varradius=bnds.width/3;varlabels=[];varfontSize=Math.max(Math.floor(0.04*(bnds.width+bnds.height)),4);varlabelSize=fontSize;// room to center with default inset// Add Roman numerals to the clockfor(vari=0;i<12;i++){varlabelPosition=bnds.center().addPt(Point.polar(radius*0.85,((i-3)/12)*Math.PI*2)).addXY(labelSize,0);varlabel=newTextMorph(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 handsthis.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 timesetHands:function(){varnow=newDate();varsecond=now.getSeconds();varminute=now.getMinutes()+second/60;varhour=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 worldstartSteppingScripts:function(){this.startStepping(1000,"setHands");// once per second}});
Lively forQt is another implementation of Lively Kernel in which thekernel parts in JavaScript are replaced by functions from the Qt framework inC++.[4][5] 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-documentedapplication programming interfaces (APIs) of the Qt platform.
| Dialects | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Engines | |||||||||
| Frameworks |
| ||||||||
| People |
| ||||||||
| Other | |||||||||
 Lists:JavaScript libraries •Ajax frameworks •Server-side JavaScriptComparison:JavaScript web frameworks | |||||||||
