https://github.com/creationix/topcloud
High level application framework for Javascript (built on top of jquery-haml and modeled somewhat after SproutCore)
https://github.com/creationix/topcloud
Last synced: about 1 year ago
JSON representation
High level application framework for Javascript (built on top of jquery-haml and modeled somewhat after SproutCore)
- Host: GitHub
- URL: https://github.com/creationix/topcloud
- Owner: creationix
- Created: 2009-08-20T17:47:59.000Z (almost 17 years ago)
- Default Branch: master
- Last Pushed: 2009-10-13T22:40:37.000Z (over 16 years ago)
- Last Synced: 2025-03-24T04:14:03.522Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 205 KB
- Stars: 20
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.markdown
Awesome Lists containing this project
README
# Top Cloud
High level application framework for Javascript (built on top of haml-js and modeled somewhat after SproutCore)
I gave a 30 minute presentation to my local Ruby users group about TopCloud and related technologies. You can view it on [vimeo][]
This framework is very much a work in progress. I'm giving a presentation on it at the local Dallas Ruby Group for October's meeting. I'll post a recording of the presentation if possible.
The source code to my example site is at the node-topcloud-chat repo.
Top Cloud is a MVC framework for the browser, much in spirit of SproutCore, but made to be embedded inside existing legacy apps.
Top Cloud uses the haml-js project for the dom-building aspect.
## Model
TopCloud has databinding at the controller level. The bound variables can optionally use proxy objects that can in turn proxy to model classes on the server side if desired.
## View
This is an example View. This is written in the TopCloud interface language. There is a TextMate bundle for adding highlighting support included.
Dialog width: 400, height: 250
minWidth: 300
minHeight: 200
title: "Code Samples"
Panel left: 0, bottom: 0, right: 0, height: 40
borderTop: 1
Button left: 10, top: 10, width: 65, height: 20
value: "Cancel"
icon: "cancel"
click: @cancel
Button right: 10, top: 10, width: 68, height: 20
value: "Submit"
icon: "check"
click: @submit
DropDown left: 10, top: 10, right: 10, height: 20
value: "ruby"
options: {ruby: "Ruby", "javascript": "Javascript", "python": "Python"}
TextEntry left: 10, top: 40, right: 10, bottom: 50
value: @remote_text
multiline: true
## Controller
Controllers are javascript objects that are run in the browser. They provide the code behind the views and hold all interaction logic.
Here is an example controller:
TC.defineController("Dialogs.CodeSamples", function (lang) {
this.bindData("remote_text", {
proxy: new TextSource()
});
this.cancel = function (button) {
button.parent.parent.close();
};
this.submit = function (button) {
alert("TODO: Do some action");
button.parent.parent.close();
};
});
[vimeo]: http://www.vimeo.com/6940290