<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Dear list --<div><br></div><div>One very important topic that currently is not specified anywhere is how you can contribute source code to the project. In this post I will explain the system support for modularization and describe how contributions could be created and organized using Lively Wiki. Improvement suggestions are very welcome -- and of course you might want to <a href="http://www.lively-kernel.org/repository/lively-wiki/CreateUserDirectory.xhtml">try it out</a> ;-)</div><div><br></div><div><b>Important:</b> Source code contributions should be <a href="http://www.lively-kernel.org/license/index.html">MIT licensed</a>. Please only upload your code if you are willing to accept this license.</div><div><br></div><div><b><br></b></div><div><span class="Apple-style-span" style="font-weight: bold; ">Part 1: Modules</span></div><div><br></div><div>In Lively Kernel we use so called 'modules' to identify JavaScript and other source code files. On top of most files you will see something like this:</div><div><br></div><div><font class="Apple-style-span" face="Courier"><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 12px;">module('lively.ide').requires('lively.Tools', 'lively.Ometa').toRun(function() {</span></font></font></div><div><span class="Apple-style-span" style="font-family: Courier; "><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 12px;">// Code depending on lively.Tools and lively.Ometa</span></font></span></div><div><span class="Apple-style-span" style="font-family: Courier; "><font class="Apple-style-span" size="3"><span class="Apple-style-span" style="font-size: 12px;">}) // end of module</span></font></span></div><div><br></div><div>This definition does two things:</div><div><br></div><div>a) Define the module lively.ide. The module can then be required from somewhere else:</div><div><font class="Apple-style-span" face="Courier" size="3"><span class="Apple-style-span" style="font-size: 12px;">require('lively.ide').toRun(function() { new lively.ide.SystemBrowser().open() })</span></font></div><div>Evaluating this will let the system:</div><div>1. Check if lively.ide is loaded. If not then the module name is translated to an URL: {Config.codeBase}/lively/ide.js. That URL will be used to load the file ide.js asynchronously. <b>*</b></div><div>2. When the file is loaded run the code of toRun()</div><div><br></div><div>b) Define the namespace lively.ide.</div><div>That means that if the module is there you can access it's members in JavaScript. For example the class lively.ide.SystemBrowser is such a member. <b>**</b></div><div><br></div><div><b><br></b></div><div><span class="Apple-style-span" style="font-weight: bold; ">Part 2: Using modules to add your extensions</span></div><div><br></div><div>The first thing you need is some place to store your source code and your data. You can create your own subdirectory in the wiki here: <a href="http://www.lively-kernel.org/repository/lively-wiki/CreateUserDirectory.xhtml">http://www.lively-kernel.org/repository/lively-wiki/CreateUserDirectory.xhtml</a></div><div><br></div><div>Your directory includes a WorldTemplate.xhtml that you can clone to create new pages. You can then add new Worlds and add source code in them using the local changes (and the Local code Browser, you find it in the Tools menu). Or you can create your own JavaScript files using the System browser or manually by checking out your directory using SVN and adding/editing files with a TextEditor. The JavaScript files should include a module definition.</div><div><br></div><div>Example: My users directory in the wiki is /users/robertkrahn/. I can then add a <a href="http://www.lively-kernel.org/repository/lively-wiki/users/robertkrahn/test.js">test.js</a> that can be loaded with</div><div><font class="Apple-style-span" face="Courier" size="3"><span class="Apple-style-span" style="font-size: 12px; ">require('users.robertkrahn.test').toRun(function() { /* code */ })</span></font></div><div>from anywhere in the wiki.</div><div><br></div><div>Of course you can also add source code and subdirectories elsewhere. Assuming you want to add audio support you might want add a subdirectory audio to <a href="http://www.lively-kernel.org/repository/lively-wiki/">http://www.lively-kernel.org/repository/lively-wiki/</a>.</div><div><br></div><div>When your extension is stable enough it can be added to the <a href="http://www.lively-kernel.org/repository/lively-kernel/trunk/source/kernel/">Lively Kernel repository</a>.</div><div><br></div><div>Bugfixes to existing sources can of course go directly to the kernel repository.</div><div><b><br></b></div><div><br></div><div>Best,</div><div>Robert</div><div><br></div><div><br></div><div><b>*</b> Config.codeBase is a config option and contains the URL to the root directory. It is defined in defaultconfig.js. There it is set to the containing directory of the current document. It can be redefined later if necessary.</div><div><b><br></b></div><div><b>**</b><i> </i>Using the namespace inside a module is NOT enforced. This means if you define a class<font class="Apple-style-span" face="Courier" size="3"><span class="Apple-style-span" style="font-size: 12px; "> Object.subclass('SystemBrowser', {...})</span></font> it will "extend" the Global namespace. This means that you can access the class via Global.SystemBrowser (or simply with SystemBrowser). Only if you use the namespace explicitly <span class="Apple-style-span" style="font-family: Courier; font-size: 12px; ">Object.subclass('lively.ide.SystemBrowser', {...}) </span><font class="Apple-style-span" color="#000000" size="3"><span class="Apple-style-span" style="background-color: transparent; font-size: 12px;">the namespace will be used and you can access the class via Global.lively.ide.SystemBrowser (or simply lively.ide.SystemBrowser). We might change that in the future to enforce namespace usage.</span></font></div></body></html>