No Description

Herbert Vojčík cd6805c161 0.3.1 1 week ago
src 99e4a9bc91 js files: .packages => .packageDescriptors 1 week ago
.gitignore 7d97f574b8 Initial commit. 2 years ago
Gruntfile.js 7a0e99957f Gruntfile: update to fix amber/compatibility mapping. 10 months ago
LICENSE-MIT 852965c91b Update copyright clause. 10 months ago
README.md a94f6e0999 Remove some github urls. 1 year ago
bower.json f68baa67f0 Bump inter-library dependencies. 7 months ago
config-browser.js 7a0e99957f Gruntfile: update to fix amber/compatibility mapping. 10 months ago
config-node.js b9bb9a361d config-node: map amber/c11y to amber/node-c11y 1 year ago
deploy.js 7d97f574b8 Initial commit. 2 years ago
devel.js 233bbcd531 migration to amber 0.14.17 2 years ago
index.html 7d97f574b8 Initial commit. 2 years ago
local.amd.json 7d97f574b8 Initial commit. 2 years ago
package.json cd6805c161 0.3.1 1 week ago
testing.js 233bbcd531 migration to amber 0.14.17 2 years ago

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://lolg.it/herby/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