Developing with Lively

Morphs

Morphs are the visual elements of lively, such as buttons, text fields etc. Each morph has exactly one parent and can have many children. The first, root morph of a lively page is called a world.

Workspace morph

In order to experiment with lively, code snippets have to be written and evaluated. This is done in a Workspace morph. You can add as many instances of this morph as you want by Ctrl+K. The workspace is intended for prototyping only. Once the wanted functionality is in place, it has to be put into modules.

Getting a reference to the world

Renaming a morph

Right click a morph to show the halos and click on the "N" halo. The name can then be used to find a morph

Finding a morph

$morph("morph_name") gives you a reference to the morph with this name

Modules

Q&A

Please see the  FAQ page in webwerkstatt.

Q: When should I use subclass and when should work on an object ?
A: Working directly on objects allows to directly access the state of an object and experiment with its methods. You are also able to directly modify the UI using morphic controls. This usually allows to develop applications faster than with the more abstract class concept.

On the other hand classes are great for generalizing behavior. For example, imagine you have written a BugTracker? application directly with objects and want to create a Todo application. Possibly both applications/their UI will have shared logic. Using class inheritance will allow to more efficiently share the behavior and changes to a generic base class will affect both applications. For the BugTracker? example this means to move certain methods out of the BugTracker? object into some class.

Side note: We are working on a concept to allow prototypical inheritance, i.e. with that the generalization described above can also be reached using objects only.

Q: How do you create a subclass of a morph in LK with JS?
A:

lively.morphic.Morph.subclass('NewMorphClass',
'method category', {
    newMethod: function() {},
})

Q: How do you visually change a morph (add/remove functionsor add/rmeove/change positions of composition elements) so that the changes become visible to everyone who is using it? How to make UI changes visually (wihtout the SCB) and propagate them to all users of this morph? What are the implicaitons of such a change on the morph users own code (i.e. how we ensure consistency)?
A:

Q: How do you create a new Part Bin item (programatically/visually)? What is the process from scratch to having it available in the Parts Bin?
A:

Q: How do you create a (visual) composition of widgets (programatically/visually) ?
A:

Q: How do you know what is the type of a morph and inspect its code?
A:

Q: How do you delete pieces of code added to a morph (e.g. new functions or properites)? What is the implication of doing so users of this code?
A:

Q: How to rotate an object snaping to a 45 degree angle?
A: Shift + (R)otate : rotates 45 deg

Q: How to resize while keeping the aspect ratio?
A: Shift + (R)esize : keeps the aspect ratio

Q: Where's the code for morhping shapes?
A: Core.js->lively.morphic.Morph.accessing (shapes morphing)

Q: How to set programatically a debug breakpoint?
A: Use 'debugger;' on a line of code where you want the breakpoint and then use a debugger (e.g. chrome: -> go to dev tools > scripts tab)

Q: How to work with protovis morphs
A:

Q: How to embed livley into existing web pages (e.g. we'd like to add a protovis morph to the trac reports page in order to show the distribution of tickets by priority, component, type etc)?
A:

Q: How to do a full text search of functions/classes etc
A:

Q: We need to achieve end-to-end tracibility (e.g. trac milestone -> requirement ticket -> subtask tickets -> svn changelist). How can we associate a lively change (e.g. changing a class) with an svn changelist/ticket?
A:

Q: How to do refactoring? E.g. if we want to rename a function, how to make sure that all usages of the function are updated accoringly?
A:

Q: How to create a module and a class and load both and world startup?
A:  http://www.lively-kernel.org//repository/webwerkstatt/documentation/media/LivelyCreateModuleWithSystemBrowser.mov

Q: How to install a new instance of Lively Wiki?
A:  http://lively-kernel.org/other/livelyInstallMac.mov (example using MacOS but other OS have a similar install procedure)