FileManagerFullScreen

X

–

Menu

⟳

visit

delete

rename

http://lively-web.org/

home

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 on a place 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. 
        Open a System Code Browser

How to see the calls on a function, and the definitions (senders and implementers).
    Cmd-shift-f.  Type in any method name or fragment of any kind.

How to get a blank page.

How to Save your work.

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.  We will talk about that later.)

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

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

The bug tracker:   http://lively-web.org/org/tracker.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.  -->)

Copy this to add more...

Copy this to add more...

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.  The previous version is overwritten.

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("AlanBorning") ;  
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 on 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/

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

⟳

Cloud

1
3 + 4
X

Editor

Ellipse

Image

Line

LineWithArrow

LineWithArrowOr...

LineWithArrows

Marker

Notebook

Notebook

Pen

text

PrimitiveShapes

Rectangle

Star

Some Text

Text

TransparentRect...

Triangle

search

PartsBinBrowser

–

Copy this to add more...

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

–