Add hello world example to writing_addons.md consistently refer to FauxtonAPI in generated files Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/fbca1d9d Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/fbca1d9d Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/fbca1d9d Branch: refs/heads/fauxton Commit: fbca1d9dac80fd452f45e2213806aa9d566d6e25 Parents: 139d4a1 Author: Simon Metson Authored: Sun Jan 27 17:13:39 2013 +0100 Committer: Simon Metson Committed: Sun Jan 27 17:13:39 2013 +0100 ---------------------------------------------------------------------- src/fauxton/tasks/fauxton.js | 2 +- src/fauxton/writing_addons.md | 93 +++++++++++++++++++++++++++++++++++- 2 files changed, 93 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb/blob/fbca1d9d/src/fauxton/tasks/fauxton.js ---------------------------------------------------------------------- diff --git a/src/fauxton/tasks/fauxton.js b/src/fauxton/tasks/fauxton.js index eb464a6..c15c906 100644 --- a/src/fauxton/tasks/fauxton.js +++ b/src/fauxton/tasks/fauxton.js @@ -25,7 +25,7 @@ module.exports = function(grunt) { { name: 'resources', filename: 'resources.js', - template: 'define([\n "app",\n "backbone",\n "modules/fauxton/base"\n],\n\nfunction (app, backbone, Fauxton) {\n\tvar <%= module %> = {};\n\treturn <%= module %>;\n});\n' + template: 'define([\n "app",\n "backbone",\n "modules/fauxton/base"\n],\n\nfunction (app, backbone, FauxtonAPI) {\n\tvar <%= module %> = {};\n\treturn <%= module %>;\n});\n' }, { name: 'routes', http://git-wip-us.apache.org/repos/asf/couchdb/blob/fbca1d9d/src/fauxton/writing_addons.md ---------------------------------------------------------------------- diff --git a/src/fauxton/writing_addons.md b/src/fauxton/writing_addons.md index b435566..6e83966 100644 --- a/src/fauxton/writing_addons.md +++ b/src/fauxton/writing_addons.md @@ -52,4 +52,95 @@ selector for a named set of routes, for example: }; return Search; -adds the `searchSidebar` callback to `#sidebar-content` for three routes. \ No newline at end of file +adds the `searchSidebar` callback to `#sidebar-content` for three routes. + +## Hello world addon +First create the addon skeleton: + + ± bbb addon + path.existsSync is now called `fs.existsSync`. + Running "addon" task + + Please answer the following: + [?] Add on Name (WickedCool) Hello + [?] Location of add ons (app/addons) + [?] Do you need to make any changes to the above before continuing? (y/N) + + Created addon Hello in app/addons + + Done, without errors. + +In `app/addons/hello/templates/hello.html` place: + +

Hello!

+ +Next, we'll defined a simple view in `resources.js` (for more complex addons +you may want to have a views.js) that renders that template: + + define([ + "app", + "api" + ], + + function (app, FauxtonAPI) { + var Resources = {}; + + Resources.Hello = FauxtonAPI.View.extend({ + template: "addons/hello/templates/hello" + }); + + return Resources; + }); + + +Then define a route in `routes.js` that the addon is accessible at: + + define([ + "app", + "api", + "addons/hello/resources" + ], + + function(app, FauxtonAPI, Resources) { + var helloRoute = function () { + console.log('helloRoute callback yo'); + return { + layout: "one_pane", + crumbs: [ + {"name": "Hello","link": "_hello"} + ], + views: { + "#dashboard-content": new Resources.Hello({}) + }, + apiUrl: 'hello' + }; + }; + + Routes = { + "_hello": helloRoute + }; + + return Routes; + }); + + +Then wire it all together in base.js: + + define([ + "app", + "api", + "addons/hello/routes" + ], + + function(app, FauxtonAPI, HelloRoutes) { + var Hello = new FauxtonAPI.addon(); + console.log('hello from hello'); + + Hello.initialize = function() { + FauxtonAPI.addHeaderLink({title: "Hello", href: "#_hello"}); + }; + + Hello.Routes = HelloRoutes; + console.log(Hello); + return Hello; + });