QuickHelp

Quick Help for using the Lively-Web

What is Lively Web?  The best way is to see one.  Jump to this rich Lively world:
	http://lively-web.org/the-lively-universe.html  

How to get the World Menu.
	Right-click in the gray area that has no objects 
	or Command-click on a place that has no objects, and click the (M) handle in the 
	extreme upper left of the screen.  (The World's menu from its halo is also the 
	World Menu.)

How to open a Parts Bin and get pre-made Lively objects.
        Get the World Menu.  Choose PartsBin (the first item).
	The Parts Bin has both simple and complex objects.  Try dragging things out 
	   from the Parts Bin below.  (Experiment on this page, but don't Save it.) 
	Click on a category.  Drag out a new object.
	Or, use the search box to search for a Part by name.

 	Drag the object (D) to move it within its container.
 	Grab the object (G) to remove it from its container and drop it into another.
 	Get the object's Menu (M)
 	Copy the object (C)
 	Get a Style editor for the object (S)
 		Color, Fill, Border width, Border color.
  	Rotate the object (T) (T for turn)
 	Resize the object (R)
 	Inspect the object (I)
 	Add a script to the object (E) and also Edit existing scripts.
 	Get a URL for the image in the object (U).  Only for complex objects.
 	Delete the object (X)
 	To rename the object, click on the name (i.e. Ellipse).
 	The red dot is the center of rotation.  It can be moved.

How to get the Menu of an Object.
	Get the Halo (Command-click) and then click the (M) handle.	

How to Connect a Button to an Action.

How to see the Javascript code.  You can get several tools for Javascript code from the World Menu.  
Right-Click in the gray area, and move down to Tools.  The most important tool is the System Code Browser.
        Workspace is a text window that is meant for code.  All code panes have syntax highlighting.  Variables 
you define (i.e.  a = 47.2;) are global.  Select text and Cmd-d to execute an expression.  Select and Cmd-p to execute and see the answer.
        System Code Browser is a file editor that knows about classes and methods.  Click on "lively/" to enter the lively/ directory.  The new directory replaces the contents of the left pane.  Click "morphic/".  Click in the file "Core.js".  When you finally click on a file name, a list of classes in the file appears to the right.  You can edit the entire file in the bottom pane and save (Cmd-s).  Or, click on a class, a category, and a method.  Edit the method and save (Cmd-s).  The browser finds the method in the file and replaces it in place. 
        Browse Implementors asks for the name of a function and shows its definitions.
        Browse Senders asks for the name of a function and shows all the places it is used.
        Object Editor or Script Editor allows you to define a script for an individual object.  Click the button 'empty' to chose from a tree of all objects in the world.  Use the (E) handle in the halo to get an Object Editor.  The Object Editor can also add scripts to objects that are not Morphs.
        BuildSpec Editor lets you specify the proportions of panes in a complex window.
        Test Runner is a control panel for running the test methods in Lively.
        Method Finder lets you search the system for functions (methods), both for implementers and senders.
        Text Editor a code editor on the HTML of this world's web page. 
        System Console a duplicate of the Javascript console, but in Lively.  
        OMeta Workspace lets you make a parser and write rules for it.
        Subserver Viewer.  Make your own web server!  Add methods that respond to Get and Post.  Click on the blue link to open the page you serving.
        Server Workspace 
        Terminal a terminal on your machine's OS in Lively.
        Git Control offers ways to update a localHost version of Lively from a GIT repository.  Experts can store changes to the master server-based Lively javascript files.

How to find a function from its name.  Type the name of a function or fragment, select it, and Cmd-shift-f.  A ToolTabPane will appear.  It lists both the definitions of the function, and all places it is called (the implementers and senders of that method).  Lively is written in Javascript, and this is the way to see it.  (This tool is also called the Method Finder.)

A list of papers and publications about Lively Web.
	http://lively-kernel.org/publications/index.html

A list of videos presentations about Lively Web
	http://lively-kernel.org/presentations/index.html

This page is http://lively-web.org/users/TedKaehler/QuickHelp.html

How to get a Halo on an Object (Command-click on the object)  (Try it on the aqua ellipse.  -->)

How to run Lively Web locally on your machine.  There is a way to work completely on your own machine, without the internet, but it is complicated to set up.  See http://lively-web.org/users/TedKaehler/RunLocally.html for how to install Lively on your machine. 

...

Many useful things can be invoked with command keys.  To see a list of the commands, get the World Menu.  Toward the bottom of the menu is "Documentation".
Choose "On short cuts".
  
 A useful command:
CMD + SHIFT + U	= un-emphasize (removes all style from selected text).

<

start

>

clear

save as:

0

Morphic: Connections

One way for Morphs to interact with each other are AttributeConnections. You can tell a Morph to execute a function once an attribute of another morph has changed.

In this part of the tutorial you will learn

- how to graphically connect Morphs
- how to programmatically connect Morphs
- how to use converter functions in AttributeConnections.

Let's go. (Use the '<' and '>' buttons below to navigate back and forth in this tutorial.)

<

start

>

clear

save as:

0

Morphs: Direct Composition and Manipulation

Lively interfaces are build out of morphs. You can see some basic morphs below. They react on clicks. To grab these morphs click on them, hold this click and move the cursor. 

These morphs are primitive. That is, they are not composed out of other morphs. 

Use the '<' and '>' buttons below to navigate between pages in this tutorial.

Lively Web is written in Javascript.  You can execute snippets of Javascript.  You can also add new code to the system.  Here is a tutorial with Javascript for you to execute.

<

start

>

clear

0

save as:

Welcome to the Lively Kernel!

The Lively Kernel is an environment for active content in Web browsers. Objects are live and give immediate feedback to users. You are just about to find out what that means.

To start the interactive tutorial, use your mouse to highlight the following line:

                            this.nextPage()

Once you did, press Ctrl-D (PC) or Cmd-D (Mac). You can also navigate back and forth using the '<' and '>' buttons below.

After you have built something, you will want to save it.  A Lively World is a web page.  The words "the world" and "this web page" mean the same thing.   A page and its Javascript files can be loaded from the Lively-Web server, or from your own machine.  Save World saves it back to the server it came from.  It asks you what file name to use.

How to get a directory at Lively-web.org so that you can save a world.  It is important that you be able to save your work, so you can feel a sense of progress. 
Replace YourName with your name (no spaces).  It is traditional to use your first and last names.
Select the code below and Cmd-d to execute it.

$world.setCurrentUser("YourName");
this.world().saveWorldAs(
    URL.create("http://lively-web.org/users/"+ ($world.getUserName(true)) + "/myWorld.html"),
    false,
    URL.create("http://lively-web.org/core/lively/bootstrap.js"));

A copy of this QuickHelp world is now at http://lively-web.org/users/YourName/myWorld.html
You can see your directory with all of your worlds at http://lively-web.org/users/YourName/

How to save your world.  Right-Click in the gray area, and the bottom item is Save World. 

How to get a blank world to work in.  Go to http://lively-web.org/blank.html .  Then open a workspace, paste in the code above, and execute.   You now have a new blank world in your own directory.  Make something there and Save World.

Reporting Bugs:    When you find something that does not work, please open a new issue.
Our own Lively Bug tracker:  http://lively-web.org/issues/IssueTemplate.html  There is a button there to automatically copy the ug report to GIT.
The GIT bug tracker:   https://github.com/organizations/LivelyKernel/dashboard/issues.  It is easy to sign up and get an account for LivelyKernel on GitHub.  

...

...

How to debug in Lively  
    To debug in Chrome:   http://lively-web.org/users/TedKaehler/QuickHelp-Chrome-debug.html   

SystemBrowser

X

–

Menu

N

...

../

cop/

lib/

lively/

media/

ometa/

servers/

styles/

-----

-----

-----

1
-----
X

>

<

move

remove

load

nothing selected

copy

Share Link

modules

2013-08-09 13:37 TedKaehler: 
    Added a page that says The End.

2012-02-15 17:02 fbo: 
    no comment

*all*

*latest*

*search*

Babelsberg

Backgrounds

Basic

Bert

BYOIE

Changesets

Charting

ChartingDemo

CodeSnippets

Collaboration

Controls

Dan

Database

DatabaseDemo

Debugging

Demos

Dialogs

Documentation

DroppableBehaviors

ElectricalComponents

ElProfesor

⟳

Cloud

1
3 + 4
X

Editor

Ellipse

help

HelpButton

Image

Line

LineWithArrow

LineWithArrowOr...

LineWithArrows

Marker

Notebook

Notebook

Pen

text

PrimitiveShapes

Rectangle

Star

Some Text

Text

Triangle

search

PartsBinBrowser

–

All the shortcuts listed here that include CMD for MacOS can be done using CTRL on Windows.

General:
    CMD + R					= browser reload!!! Be careful, you will lose your work if is not saved!
    CMD + W					= close window!!! Be careful, you will lose your work if is not saved!
    CMD + S					= save, either the world (if selected) or the code (when editing)
    CMD + A					= select all (text only)
    CMD + C					= copy (text only)
    CMD + V					= paste (text only)
    CMD + X					= cut (text only)

    CMD + K					= open workspace (empty editor window)
    CMD + O					= open ObjectEditor
    CMD + P					= open PartsBin
    CMD + B					= open system browser (internal system editor for modules, classes, etc.)

Code execution: (most of them work with the current line or the code that is selected)
    CMD + D					= do it (executes the statement)
    CMD + E					= exchange (exchange the last two selections)
    CMD + SHIFT + I			= inspect (inspects the statement, therefore opens a window with attributes)
    CMD + P					= print it (prints the result of the statement)
    CMD + SHIFT + P			= protocol (opens a menu with all the methods that the statement/object has)
    CMD + F					= find (finds the selected text in the text and asks for a search string)
    CMD + G					= find again/next
    CMD + M					= do more (do the last replacement again for the next occurrence)
    CMD + SHIFT + M			= do much more (do the last replacement again until the end of the text)
    CMD + SHIFT + F			= find source/browse implementors (finds the statement in the source code)
    CMD + SHIFT + B			= browse class (finds the statement in the source code)
    CMD + ]					= indent selection
    CMD + [					= outdent selection
    CMD + /					= comment/uncomment selection

Morph manipulation:
    CMD + click / right-click only	= get halo
    CMD + SHIFT + click / left-click only	= add object to group selection
    SHIFT + drag				= copy morph
                                                        = (in the world) select several objects at once
    right-click					= world menu (when clicked on background or context menu for e.g. button)
    ALT (when dragging/resizing) = gridding (default: every 10 pixel)
    SHIFT (when resizing)		= keep aspect ratio
    SHIFT (when transforming)	= scaling

Text manipulation:
    CMD + B					= bold (works on selected text)
    CMD + I					= italic (works on selected text)
    CMD + U					= underline (works on selected text)
    CMD + L					= open font editor (works on selected text or text morph)
    CMD + K					= add link (works on selected text)
    CMD + O					= add do it/JavaScript code (works on selected text)
    CMD + SHIFT + U			= un-emphasize (removes all style from selected text)
    CMD + SHIFT + S			= convert tabs to spaces
    CMD + 1					= align left (works on text morph)
    CMD + 2					= align right (works on text morph)
    CMD + 3					= align center (works on text morph)
    CMD + 5					= set font size to 8 (works on text morph)
    CMD + 6					= set font size to 12 (works on text morph)
    CMD + 7					= set font size to 18 (works on text morph)
    CMD + 8					= set font size to 30 (works on text morph)
    CMD + +					= increase font size (works on selected text or text morph)
    CMD + -					= decrease font size (works on selected text or text morph)

About More and Exchange
These are two operations not seen in most other environments (other than Squeak ;-), but you'll like them if you try them.  More is like search-and-replace except that you don't have to plan ahead.  Overtype a variable name and then, when you remember it is used elsewhere, just type cmd-M -- it will find the next occurrence and make the same replacement.  You can also use cmd-SHIFT-M to make the same substitution throughout the remaining text.

Exchange is also unusual in that it depends not only on the current selection, but also the previous selection.  This is a minor no-no in UI design, but you will find it to be entirely natural.  For instance, select one line of text (twice-click at left margin) and then select another line, after which cmd-E will exchange those two lines.  Similarly the then and else clauses of an if statement can be exchanged with this one command.

Helpful Shortcuts

X

M

–