Brak opisu

Herbert Vojčík 2f52637df8 README: smalltalk syntax highlighting 9 lat temu
src bb0c758959 bump dependencies 9 lat temu
.gitignore 7d97f574b8 Initial commit. 9 lat temu
Gruntfile.js 7d97f574b8 Initial commit. 9 lat temu
LICENSE-MIT 7d97f574b8 Initial commit. 9 lat temu
README.md 2f52637df8 README: smalltalk syntax highlighting 9 lat temu
bower.json 6d1b292ed9 bower id instead of gir url, remove "Seaside-inspired" 9 lat temu
deploy.js 7d97f574b8 Initial commit. 9 lat temu
devel.js 7d97f574b8 Initial commit. 9 lat temu
index.html 7d97f574b8 Initial commit. 9 lat temu
local.amd.json 7d97f574b8 Initial commit. 9 lat temu
package.json bac69f7d18 Release version 0.1.3. 9 lat temu

README.md

Stream-based in-page Web framework for Amber

Stream-based framework for creating and manipulating contents of a page. For Amber Smalltalk.

Based on https://github.com/amber-smalltalk/domite, created as an alternative to existing Web package present in Amber.

Getting Started

If not already present, create a project in an empty directory with amber init.

In a project, bower install silk --save and grunt devel.

Start development server with amber serve and go to http://localhost:4000/ in your browser.

In all packages that uses Silk, add 'silk/Silk' to the package imports, save the change and commit the package. Reload.

Introduction

Silk does not have any dependency except the amber library domite that it builds upon.

The metaphor it heavily builds upon is:

 Each element is a Stream of its children. You can write to that stream, copy that stream to get the copy of the "cursor" etc. 

The package silk contains only one class Silk, which represents a DOM node both as an element (that can be inserted) and as a stream (which can insert things into itself).

The main message there is <<, the high-level message to put an object on a stream. Silk new conveniently wraps the HTML body and puts the cursor at the end of it.

With

Silk new << 'Hello, world!'

you append a text node to the body.

Silk uses the browser support for querySelector to get to the elements - that is, you can do all the basic things, but not all the fancy stuff (:visible) that only jQuery has.

For example with

'#log' asSilk << 'another item'

you append the text another item to the element with id #log.

Silk uses DNU (Smalltalk does not understand) to help you to create HTML elements, and uses associations as a way to set attributes. So you do:

Silk new
   H1: {'id'->'header'. 'Welcome'};
   P: {'id'->'welcome'. 'This is an acme page.'. 'It was created by Silk'};
   HR;
   SMALL: {'id'->'footer'. 'We do not guarantee anything.'}

BTW, foo H1: bar is just a convenience for foo H1 << bar; yourself.

You can use blocks, if you << them (or include them in TAGNAME:), they are called and passed the wrapped element stream in the first parameter.

As for widgets, any object will work, it only needs renderOnSilk: aSilk method present. If you aSilk << suchObject, its renderOnSilk: will be called (that's how association and block magic is done).

Contributing

To bring project alive (for example after git clone):

npm install
bower install
grunt devel

Developing the project (after brought alive):

Start server with amber serve and go to http://localhost:4000/ in your browser and follow the instructions