[lively-kernel] Lively Kernel Questions - Morphs and RenderContexts

[Jens Lincke]

Hi, Benjamin -

did you already skype with Robert about this? I put the mailing list on CC, maybe it is also of interest to others....

Am 23.01.2012 um 13:02 schrieb Benjamin Gnauk:

> 
> First about the editing of objects:
> I figure that a morph is created from a class in which its basic behavior is defined.
> So, if the addScripts of a morph are edited and saved with the editor, is the original morph removed and a fresh instance with the new attributes is created, or are just the scripts of the object removed and readded?

In lively our scripts are properties of objects, so editing a script means putting a function into a slot of an object. 


> And is there a possibility in the script editor or object inspector to view all the methods implemented by a morph's class (f.e. the adjustSliderParts method in a slider morph)?
> 

There is a keyboard shortcut for it: CMD + SHIFT + P (windows: CTRL+SHIFT +P). select a expression, for example "this" and go for it. You have to scroll since, we not yet put this into a nicer organization...

> What's also very interesting for me is Lively's concept of RenderContexts, especially the HTML rendering, so I have several questions related to this.
> 
> In which way are events (f.e. mouse events) handed down from the rendering engine to a morph's event handler? 
> Is there some chaining mechanism that passes through an event from a morph to its owner when a morph does not handle this event under certain circumstances (f.e. consider a scrolllist including a list of buttons as it would appear on the iPad. There a move event is passed through to the surrounding scroller widget, instead of activating or moving the button itself)?
> 

In Lively2 the events are handles by the browser, we do not do the dispatching ourselves any more. 

Here are some Code snippets, that can be found with the code search (CMD+SHIFT+F):

lively.morphic.Morph.addMethods({
    registerForEvents: function (handleOnCapture) {
        this.registerForMouseEvents(handleOnCapture);
        this.registerForKeyboardEvents(handleOnCapture);
        this.registerForOtherEvents(handleOnCapture);
        this.registerForTouchEvents(handleOnCapture);
        this.registerForFocusAndBlurEvents();
    }
});


lively.morphic.Morph.addMethods({
    registerForMouseEvents: function (handleOnCapture) {
        if (this.onMouseUpEntry) this.registerForEvent('mouseup', this, 'onMouseUpEntry', handleOnCapture);
        if (this.onMouseDownEntry) this.registerForEvent('mousedown', this, 'onMouseDownEntry', handleOnCapture);
        if (this.onClick) this.registerForEvent('click', this, 'onClick', handleOnCapture);
        if (this.onMouseMoveEntry) this.registerForEvent('mousemove', this, 'onMouseMoveEntry', handleOnCapture);
        if (this.onDoubleClick) this.registerForEvent('dblclick', this, 'onDoubleClick', handleOnCapture);

The "onSomething" are then methods on each morph that do the work....


> How are submorphs embedded in the render context of a morph?

As childNodes of the parents div element.

> Considering an HTML representation of a morph consisting of multiple tags, is there a possibility to define a render context so that submorphs can be rendered inside individually specified tags (f.e. a morph using the ul-tag with multiple submorphs as list items)?

Have a look at the morphNode of our list morph:

<?xml version="1.0"?>
<div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" style="-webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px; position: absolute; left: 871px; top: 265px; -webkit-transform: rotate(0deg) scale(1, 1); ">
	<div style="position: absolute; left: 0px; top: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); opacity: 1; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); width: 100px; height: 100px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; overflow-x: visible; overflow-y: visible; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-left-radius: 0px 0px; border-top-right-radius: 0px 0px; border-bottom-right-radius: 0px 0px; border-bottom-left-radius: 0px 0px; background-position: initial initial; background-repeat: initial initial; ">
		<select size="2" style="white-space: pre; overflow-x: auto; overflow-y: auto; font-size: 10pt; font-family: Helvetica; left: 0px; top: 0px; width: 100px; height: 100px; " class="visibleSelection">
			<option>1</option>
			<option>2</option>
			<option>3</option>
		</select>
	</div>
</div>



> And speaking of tags, each html representation of a morph seems to be contained in an additional 0 x 0 px div. I assume this encodes the position of the morph, but why isn't this done in the actual div of the morph?

We distinguish between the shape of the morph and the morph and all its submorphs. A morph does not need a shape.... 

> 
> Regarding theming: Is this done by assigning a basic style to the world which then passes down the styling to its submorphs?
> If so, does this apply to all morphs, so any morph can override the world styling to employ a different style to all of its own submorphs?
> 

We do not have different themes in Lively2 yet. But ask Lauritz and Fabian, they are working on one right now.

> I know these are quite a few questions for the start, but I hope you can give me some insights on some of them.
> 

I hope I could answer some of them. 

Best,
Jens


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.hpi.uni-potsdam.de/archive/lively-kernel/attachments/20120126/86a30c52/attachment-0001.html>