+ + +

+ © Jupiter IT - JavaScriptMVC Training and Support +

+ + +

+© Jupiter IT - JavaScriptMVC Training and Support +

+ */ \ No newline at end of file diff --git a/jmvc/pages/compressing.js b/jmvc/pages/compressing.js new file mode 100644 index 00000000..227f1a77 --- /dev/null +++ b/jmvc/pages/compressing.js @@ -0,0 +1,37 @@ +/* +@page compressing 2.4. Compressing Cookbook +@parent getstarted +

Compressing Cookbook

+ +

There is a large overhead associated with downloading many JavaScript files. +Server side compression makes it simple to concatenate and compress your code into one file.

+

Compress Script +

+

To compress your application, run the following command from a console: +

+@codestart +C:\workspace\Cookbook>js cookbook\scripts\build.js + steal/steal.js + ... + ignore ../steal/dev/dev.js + ... +Package #0: 'cookbook/production.js'. +@codeend +

Verify that production.js was created by checking your 'cookbook' folder.

+

Switch to Production Mode

+

Switch to production mode by changing the part of the +src tag in cookbook.html that reads "test" to "production" like this: +

+@codestart html +<script type='text/javascript' + src='../steal/steal.js?cookbook,production'> +</script> +@codeend +

Reload and verify

+ +

Reload your page. Only two JavaScript files will load: steal.js and production.js. +Not bad considering 28 files are loaded in development mode.

+ +When you're ready, learn how to [documenting Document Cookbook] +*/ +//break ---------------------------------------------------------------------- \ No newline at end of file diff --git a/jmvc/pages/contribute.js b/jmvc/pages/contribute.js new file mode 100644 index 00000000..5dd3c7f3 --- /dev/null +++ b/jmvc/pages/contribute.js @@ -0,0 +1,27 @@ +/** + * @page contribute How to Contribute to JavaScriptMVC + * + * ## Contributing Code + * + * The best way to contribute code is to [developwithgit develop with git] and make a pull requests + * from your fork. + * + * If you want to make contributions to the framework as a whole, read [developingjmvc Developing JavaScriptMVC]. + * + * ##Ideas, Feedback, Problems + * + * Know how to make JavaScriptMVC better or you don't like something? + * Let us know in one of [JavascriptMVC's Forums](http://forum.javascriptmvc.com/allforums). + * + * ##Submitting Bugs + * + * Bugs can be submitted to: + * + * * [Steal bugs](http://github.com/jupiterjs/steal/issues) + * * [jQueryMX bugs](http://github.com/jupiterjs/jquerymx/issues) + * * [DocumentJS bugs](http://github.com/jupiterjs/documentjs/issues) + * * [Funcunit bugs](http://github.com/jupiterjs/funcunit/issues) + * + * + * + */ diff --git a/jmvc/pages/creating.js b/jmvc/pages/creating.js new file mode 100644 index 00000000..381e4331 --- /dev/null +++ b/jmvc/pages/creating.js @@ -0,0 +1,477 @@ +/* +@page creating 2.2. Creating Cookbook +@parent getstarted + +We're going to create a basic cookbook application that +lets us create, read, update, and delete (CRUD) +recipes. It will look like: + + + +JavaScriptMVC uses +[steal.generate generator scripts] to +assist you +in setting up your application's +files and folders. They make everything you need to fall +into the pit of success! + +## Generating an Application + +To create your application, open a console window and +navigate to your public directory. Run: + +@codestart text +> js jquery\generate\app cookbook +@codeend + +This script creates an application folder and +files. Here's what each file does: + +@codestart +cookbook/ // app for your folder + cookbook.css // css for your app + cookbook.html // a page for your app + cookbook.js // app file, loads other files + controllers/ // plugins & widgets + docs/ // documentation + fixtures/ // simulated ajax responses + funcunit.html // functional test page + models/ // model & data layers + qunit.html // unit test page + resources/ // 3rd party scripts + scripts/ // command line scripts + build.html // html for build script + build.js // build script + clean.js // code cleaning / linting + docs.js // create documentation + test/ + funcunit // functional tests + cookbook_test.js // functional test + funcunit.js // loads functional tests + qunit/ // unit tests + cookbook_test.js // unit test + qunit.js // loads unit tests + views/ // client side templates +@codeend + +Read [folders Folder and File Organization] +for more information. + +We'll use cookbook.html for our application. If +you need to make another page for your app you +can generate it: + +@codestart text +> js jquery\generate\page cookbook index.html +Generating ... index.html +@codeend + +Or you add the steal script to an existing page +page followed by ?cookbook like: + +@codestart html +<script type='text/javascript' + src='../path/to/steal/steal.js?cookbook'> +</script> +@codeend + +If you open cookbook/cookbook.html, you'll see a +JavaScriptMVC welcome screen. + + + +## Scaffolding Recipes + +The scaffold generator creates all the code you need for simple +Create-Read-Update-Delete (CRUD) functionality. +For our cookbook app, we want to make recipes. +To scaffold recipes run the following in a console: + +@codestart text +> js jquery\generate\scaffold Cookbook.Models.Recipe +@codeend + +Here's what each part does: + +

+

recipe\_controller.js

+

Cookbook.Controllers.Recipe, like all [jQuery.Controller Controllers], + respond to events such as click and manipulate the DOM.

+

edit.ejs,init.ejs,list.ejs,show.ejs

+

[jQuery.View Views] are JavaScript templates for easily creating HTML.

+

recipe\_controller\_test.js

+

[FuncUnit Tests] the CRUD functionality of the user interface.

+

recipe.js

+

Cookbook.Models.Recipe [jQuery.Model model] performs AJAX requests by manipulating services.

+

recipes.get

+

[jQuery.fixture Fixtures] simulate AJAX responses. This fixture responds to GET '/recipes'.

+

recipe_test.js

+

A [FuncUnit unit test] that tests Recipe model.

+

+ + +## Including Scripts + + +After generating the scaffolding files, you +must steal them in your application file. Open cookbook/cookbook.js and modify the code to steal +your recipe controller +and model as follows: + +@codestart +steal.plugins( + 'jquery/controller', + 'jquery/controller/subscribe', + 'jquery/view/ejs', + 'jquery/model', + 'jquery/dom/fixture', + 'jquery/dom/form_params') + .css('cookbook') + + .resources() + .models('recipe') + .controllers('recipe') + .views(); +@codeend + + + +To add your unit and functional tests, +include them in your qunit.js +and funcunit.js files. + + +cookbook/test/qunit/qunit.js + + +@codestart +steal + .plugins("funcunit/qunit", "cookbook") + .then("cookbook_test","recipe_test") +@codeend + + + + +cookbook/test/funcunit/funcunit.js + + +@codestart +steal + .plugins("funcunit") + .then("cookbook_test","recipe_controller_test") +@codeend + + + +## Run Cookbook + + +That's it. You've created a simple Cookbook +application. Open cookbook/cookbook.html in a browser. + + + + + + +Continue to [testing Testing Cookbook] or continue to read how +this code works. + + + + +## How it Works + + +The Cookbook application's functionality can be broken into 4 parts: + + - Loading scripts. + - Get and show recipes and recipe form. + - Create a recipe. + - Delete a recipe. + - Edit a recipe. + + +Lets see how this gets mapped to files in our Cookbook app. + +### Loading Scripts + +In cookbook.html, you'll find a script tag like: + +@codestart +<script type='text/javascript' + src='../steal/steal.js?cookbook,development'> +</script> +@codeend + +This does 2 things: + + - Loads the steal script. + - Tells steal to load the cookbook app (at cookbook/cookbook.js) in development mode. + +When cookbook/cookbook.js runs, it loads a bunch of +plugins, then loads the generated +controller and model. + +### Get and Show Recipes and Recipe Form. + +When recipe_controller.js is loaded, it +creates Cookbook.Controllers.RecipeController. + +RecipeController extends [jQuery.Controller controller] +and describes what events control recipe functionality. + +Because RecipeController is a "document" controller +(onDocument: true), +it automatically listens on the document +element for events described by it's prototype methods. The +load method listens for the window onload event +and calls RecipeController's load function. + + + +The load function looks for a '#recipe' element in the page +and creates one if not present. Then uses +the Recipe model to retrieve a list of +recipes and callback the list function. + +In Recipe.findAll .... + + +An Ajax request is made to /recipe, +but because the [jQuery.fixture fixtures] plugin +is included, the ajax request is +directed to //cookbook/fixtures/recipes.json.get. After +the content is retrived from the fixture, +new instances of Recipe are created with the +[jQuery.Model.static.wrapMany wrapMany] function + and passed to the success callback. + + + + +The success function is RecipeController's list method. +List replaces +the "#recipe" element's +html with the content rendered +by the template in +cookbook/views/recipe/init.ejs with the +recipe's data. + +cookbook/views/recipe/init.ejs draws out the outline of the +recipe table and the recipe form. It uses the partial template +'views/recipe/list' to draw out the individual recipes. + + + + + +### Create a Recipe. + + +RecipeController listens for "form submit". It's +important to note that +document controllers only respond to events in an +element that has an id that matches +the name of the controller. In this case, RecipeController + only responds to "form submit" +events in "#recipe" element. + + +When the event happens, the formParams plugin is used to turn the name +and description fields into an object like: + +@codestart +{ + name: "The entered name", + description : "The entered description" +} +@codeend + +These attributes are passed to create a new recipe. When +[jQuery.Model.prototype.save save] is called, Recipe model's +create function is called with the recipe's attributes. +In Recipe.create a post request is sent to +"/recipes", but intercepted by the fixtures plugin. Instead, fixtures call +back success with a JSON object that looks like: + + +@codestart +{ + "id": 100, + "name": "The entered name", + "description" : "The entered description" +} +@codeend + + +Success is the new recipe instance's +[jQuery.Model.prototype.created created] function +which updates the attributes of the recipe and +publishes an OpenAjax "recipe.created" message. + +"recipe.created subscribe" messages are listened +for in RecipeController. Here, RecipeController uses the +list template to insert the new +recipe's html into the page. + + +### Destroy a Recipe. + +When a recipe's html "tr" element created, it is +labeled with the recipe instance like this: + +@codestart html +<tr <%= recipes[i]%> > +@codeend + +This code adds the following to the recipe element: + + - the "recipe" class name + - a unique identifier to the class name: cookbook_models_recipe_5 + - the recipe instance to jQuery.data + +Inside the tr, the destroy link look like this: + +@codestart html +<a class="destroy">destroy</a> +@codeend + +Recipe controller listens for clicks on destroy in the +'.destroy click' action. if the person wants to destroy that +recipe, it uses closest to find the first parent with className= +'recipe' and then gets back the model instance. With that instance, it calls destroy. + + +[jQuery.Model.prototype.destroy] calls Recipe.destroy with the id of the object to be +destroyed. If successful, [jQuery.Model.prototype.destroyed] publishes a +"recipe.destroyed" OpenAjax event. RecipeController +listens for this event, then removes the element from the page. + + + +### Edit Recipe + + +Edit starts out similar to destroy - RecipeController listens for ".edit click" and gets +the recipe instance from model(). Then RecipeController replaces the +tr's html with the rendered content of the edit template. + + +The edit template adds an Update and cancel. RecipeController +listens for ".update click" and ".cancel click". + + +When ".update click" happens, the model instance is updated +with the values in the input elements. This results in a call to +Recipe.update which tries to send a put request to 'recipe/:id', but instead +uses fixtures. + +When the request complates, a "recipe.updated" message is published. +RecipeController listens for these events, and uses the show template to +render the updated content. + + +When ".cancel click" occurs, the tr's content is replaced using the +show template. + +## Adding isTasty + +I hate mushrooms. I'd like to know if a recipe is +tasty (it doesn't have mushrooms) and list it in the +Recipe's table. Here's how to do that: + + +### Add isTasty to Cookbook.Models.Recipe + +Add an isTasty method to the prototype +object of Recipe model (at the end of recipe.js): + +@codestart +/* @Prototype *| +{ + isTasty : function(){ + return !/mushroom/.test(this.name+" "+this.description) + } +}) +@codeend + +### Adding an "is tasty" column + +In cookbook/views/recipe/init.ejs +add a th like this: + +@codestart html +<% for(var attr in Cookbook.Models.Recipe.attributes){%> + <% if(attr == 'id') continue;%> + <th><%= attr%> </th> +<%}%> +<th>Tasty?</th> +<th>Options</th> +@codeend + +In cookbook/views/recipe/show.ejs add a td like this: + +@codestart html +<%for(var attribute in this.Class.attributes){%> + <%if(attribute == 'id') continue;%> + <td class='<%= attribute%>'> + <%=this[attribute]%> + </td> +<%}%> +<td><%= this.isTasty() %></td> +<td> + <a href='javascript: void(0)' class='edit'>edit</a> + <a href='javascript: void(0)' class='destroy'>destroy</a> +</td> +@codeend + +Reload your page. You should see the +Tasty column. Add a recipe with mushrooms +and Tasty? should be false. + +Continue to [testing Testing Cookbook]. +*/ +//break ---------------------------------------------------------------------- diff --git a/jmvc/pages/developingjmvc.js b/jmvc/pages/developingjmvc.js new file mode 100644 index 00000000..9ff0f934 --- /dev/null +++ b/jmvc/pages/developingjmvc.js @@ -0,0 +1,128 @@ +/** +@page developingjmvc Developing JavaScriptMVC + +Awesome, you want to contribute back some code to JavaScriptMVC, or build your own +download. This article +explains how. + +JavaScriptMVC is comprised of several projects, each with +it's own repository: + + - [http://github.com/jupiterjs/steal] + - [http://github.com/jupiterjs/jquerymx] + - [http://github.com/jupiterjs/documentjs] + - [http://github.com/jupiterjs/funcunit] + +These are collected in the javascriptmvc repository: + + - [http://github.com/jupiterjs/javascriptmvc] + +Read how to get, test, and build each project in JavaScriptMVC: + +## 1. Get + +In Github, fork the repo you want to make changes to. Then clone +the javascriptmvc repo and install the submodules like: + +@codestart +git clone git@github.com:jupiterjs/javascriptmvc +@codeend + +Now, open the javascriptmvc folder's .gitmodule file and change the url of the submodule(s) +you have forked. For example, you might change: + +@codestart + url = git://github.com/jupiterjs/jquerymx.git +@codeend +to +@codestart + url = git://github.com/justinbmeyer/jquerymx.git +@codeend + +Now run: + + +@codestart +cd javascriptmvc +git submodule init +git submodule update +@codeend +Finally, you might need cd into each submodule and +run +@codestart +git checkout +@codeend + +Now make your changes! + +## 2. Test + +To test FuncUnit, Steal, and jQueryMX combined open +javascriptmvc/test.html in +every supported browser and run: + +@codestart +./js test/run.js +@codeend + +To test just the invidual projects, do the following: + +#### StealJS + +Open /steal/test/qunit.html +in a browser. + +Run: + +@codestart +./js steal/test/run.js +@codeend + +#### FuncUnit + +Open /funcunit/funcunit.html +and /funcunit/qunit.html in every browser. + +Run: + +@codestart +funcunit/envjs funcunit/funcunit.html +@codeend + +#### jQueryMX + +Open /jquery/qunit.html +in every browser. + +Run: + +@codestart +./js jquery/test/run.js +@codeend + + +## 3. Build + +Coming soon, but most projects have a build.js and so does framework. + +## 4. Building the Docs + +Run: +@codestart +js jmvc\scripts\doc.js +@codeend + +If you have problems, you might need to create a jmvc/docs folder. +Pages like this one are found in jmvc/pages/. + +## 4. Deploying the Docs + +Run: +@codestart +ruby scripts\deploy.rb +@codeend + +First you need to add our EC2 private key in the scripts folder, named key. If you want to +deploy, talk to Brian to get access to this key. + */ +//break \ No newline at end of file diff --git a/jmvc/pages/developingwithgit.js b/jmvc/pages/developingwithgit.js new file mode 100644 index 00000000..95cbcdaf --- /dev/null +++ b/jmvc/pages/developingwithgit.js @@ -0,0 +1,87 @@ +/* +@page developwithgit Developing With Git + +Thank you so much for developing with git. You're making +the world better for yourself and others. With GIT we can see any change +you make to JavaScriptMVC and share them with other people. + +Before we get started, we're assuming you: + + - know git + - have a github account setup + - have a project that is already using git + +If you don't, you might find the following resources helpful: + + - [http://git.or.cz/course/svn.html Git - SVN Crash Course] + - [http://github.com/ Github] - creat an account here + - [http://help.github.com/msysgit-key-setup/ SSH Key Setup] + +## Git -ing JavaScriptMVC + +JavaScriptMVC is comprised of four sub projects: + + - [http://github.com/jupiterjs/steal] + - [http://github.com/jupiterjs/jquerymx] + - [http://github.com/jupiterjs/documentjs] + - [http://github.com/jupiterjs/funcunit] + +We're going to fork each of these projects and add them as submodules to your +master git project. + +#### Forking + +Assuming you have a github account set up, and are signed in, +click each of the github links and click +the button (in the upper right of the page). + + + +#### Adding a submodule + +Now add your forked repositories as submodules +to your project like: + +@codestart text +git submodule add git@github.com:_YOU_/steal.git public/steal +git submodule add git@github.com:_YOU_/javascriptmvc.git public/jquery +git submodule add git@github.com:_YOU_/documentjs.git public/documentjs +git submodule add git@github.com:_YOU_/funcunit.git public/funcunit +@codeend + +_Note_: Learn a little more about submodules [here](http://johnleach.co.uk/words/archives/2008/10/12/323/git-submodules-in-n-easy-steps Submodules). + +There are 3 important things to notice: + + 1. Change _YOU_ with your github username. + + 2. Add the submodules in a public folder, where the server hosts static content. + + 3. Copy the javascriptmvc repository into a jquery folder. + +Next, you have to install and update the submodules. Run: + +@codestart +git submodule init +git submodule update +@codeend + +Finally, you just have to move the 'js' commands out of steal for convienence: + +@codestart text +[WINDOWS] > steal\js steal\make.js + +[Lin/Mac] > ./steal/js steal/make.js +@codeend + +Yes, that was more annoying then just downloading it, but you're making the +world a better place for yourself and for others. + + + + */ +//break \ No newline at end of file diff --git a/jmvc/pages/documenting.js b/jmvc/pages/documenting.js new file mode 100644 index 00000000..5d2cecef --- /dev/null +++ b/jmvc/pages/documenting.js @@ -0,0 +1,67 @@ +/* +@page documenting 2.5. Documenting Cookbook +@parent getstarted +

Documenting Cookbook

+ +

Documentation is a critical step in creating maintainable code. +It's often burdensome on developers and becomes a neglected. +JavaScriptMVC's integrated documentation makes it easy to document JavaScript. +

+

Generating Documentation

+

Before creating the docs, put your app back in development mode:

+@codestart html +<script type='text/javascript' + src='../steal/steal.js?cookbook,development'> +</script> +@codeend +

Create the docs by running:

+@codestart +> documentjs/doc cookbook/cookbook.html +@codeend +

In fact, you've already created documentation!

+

Viewing Documentation +

+

Open cookbook_doc.html (in your root directory) and click RecipeController and then Recipe: +

+ + + +

Writing Documentaion

+

Open recipe_controller.js: +

+@codestart +* /** +* * @tag controllers, home +* * Displays a table of recipes. Lets the user +* * ["RecipeController.prototype.form submit" create], +* * ["RecipeController.prototype.&#46;edit click" edit], +* * or ["RecipeController.prototype.&#46;destroy click" destroy] recipes. +* *| +* jQuery.Controller.extend('RecipeController', +* /* @Static *| +* { +* onDocument: true +* }, +* /* @Prototype *| +* { +* /** +* * When the page loads, gets all recipes to be displayed. +* *| +* load: function(){ +* if(!$("#recipe").length) +* $(document.body).append($(document.createElement('div')).attr('id','recipe')) +* Recipe.findAll({}, this.callback('list')); +* }, +@codeend +

You'll notice that the syntax for documentation is very similar to JavaDoc. +However, there are some important differences. Consult the [include.Doc Documentation documentation] +for more information. +

+

Next steps +

+ +

In the context of this trivial application, you've been exposed to major tenets of JavaScriptMVC: +code separation, testing, compression, and documentation. This is pretty cool! Look at how simply you went from nothing to a compressed, tested, and documented application. +

+*/ +//break ---------------------------------------------------------------------- \ No newline at end of file diff --git a/jmvc/pages/dom.js b/jmvc/pages/dom.js new file mode 100644 index 00000000..d7e6e7be --- /dev/null +++ b/jmvc/pages/dom.js @@ -0,0 +1,7 @@ +/* +@page dom DOM Helpers +@tag core +JavaScriptMVC adds a bunch of useful jQuery extensions for the dom. Check them out on the left. + + */ +//blah \ No newline at end of file diff --git a/jmvc/pages/download.js b/jmvc/pages/download.js new file mode 100644 index 00000000..684cf655 --- /dev/null +++ b/jmvc/pages/download.js @@ -0,0 +1,84 @@ +/* + * @page download 1. Download + * @tag home, contributors + *

You're on your way! How does it feel to be traveling on the path to happiness? + * Click the following button to begin your journey. + *

+ * Download JavaScriptMVC3.0.1 Production + *

Once your download is complete, meet us at the [getstarted Getting Started Guide].

+ * + * ## Other Downloads + * + * Soon we will put all the stand alone downloads here. + * + * + *

Who's us?

+ *

We're glad you asked. Grab a beer with the JavaScriptMVC team:

+ *

Jedi

+ * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *

	Justin Meyer + * Justin is a founder, and lead developer of JavaScriptMVC. + * During the day, he is the CEO of [http://jupiterit.com Jupiter IT], a JavaScript consulting company. + * When not working on JavaScriptMVC, he's cheating with his other favorite framework - Ruby on Rails. + *
	Brian Moschel + * Brian is a founder of JavaScriptMVC and [http://jupiterit.com Jupiter IT] in Chicago. + * He wrote the original version of JavaScriptMVC and does writing for the site. He also has a dog named Ajax. + * Attempts to teach him programming have been fruitless thus far. + *
	Trey Kennedy + * Trey Kennedy has been an embedded C/C++ software engineer for over 10 years and a part-time web applications developer for the last 3 years. + * He is sick and tired of generating HTML and JavaScript using other languages and is ready to evangelize the world in the way of native JavaScript development - or maybe just his company. + *
	Lee Henson + * Located at the secret Music Glue skunk works in London Town, + * plotting the downfall of the music industry fat cats (and sharpening his ice pick). + *
	Michael Mayer + * Michael loves to bring order to the chaos of Web development. He is specialized + * in keeping deadlines and puts his life at risk to successfully complete projects. His + * home base is in Berlin, Germany. + *

+ *

Padawan

+ * + * + * + * + * + * + * + * + * + * + * + * + * + *

	M@ McCray + * A sith apprentice who corrected [jQuery.Model.prototype.save] and used the dark side to fix Controller::form_params. + * + *
	Joe Tortuga + * Fixed problems with nested views. + *
	Max C.H. Hwang + * Helped views correctly evaluate Ajax responses. + * + *

+ */ + +//break diff --git a/jmvc/pages/event.js b/jmvc/pages/event.js new file mode 100644 index 00000000..edaeaddd --- /dev/null +++ b/jmvc/pages/event.js @@ -0,0 +1,7 @@ +/* +@page specialevents Special Events +@tag core +JavaScriptMVC adds a bunch of useful jQuery extensions for the dom. Check them out on the left. + + */ +//blah \ No newline at end of file diff --git a/jmvc/pages/folders.js b/jmvc/pages/folders.js new file mode 100644 index 00000000..4deb7292 --- /dev/null +++ b/jmvc/pages/folders.js @@ -0,0 +1,53 @@ +/** +@page folders Folder and File Organization + +This hasn't been filled out yet. Ping us and we +will. For now, this is a place holder. + +Here's what it should dicuss: + + - The app folder and file structure + - The plugin file structure + - a plugins folder + - How apps and plugins should work together + - Maybe sharing your plugins folder + +Here's some text from the old docs that +might be useful. + +

+

cookbook.js +

The application file, + load plugins and other JavaScript files. +

cookbook.html +

A page that loads your application. + +

funcunit.html +

A page that runs your functional tests. + +

qunit.html +

A page that runs your qunit tests. + +

test/ +

A folder for your qunit and funcunit tests. + +

docs/ +

A folder for your documentation files. + +

scripts/ +

Scripts to document and compress your application. + + +

controllers/ +

A folder for code that manages events. +

models/ +

A folder code that manages Ajax requests. +

view/ +

A folder for client side templates +

resources/ +

A folder for 3rd party plugins and scripts. +

fixtures/ +

A folder for simulated ajax responses (So you don't have to wait on the slow poke backenders). + +

+ */ \ No newline at end of file diff --git a/jmvc/pages/follow.js b/jmvc/pages/follow.js new file mode 100644 index 00000000..7899f933 --- /dev/null +++ b/jmvc/pages/follow.js @@ -0,0 +1,27 @@ +/** + * @page follow Follow JavaScriptMVC + *

Twitter

+ + + + + * Follow [http://twitter.com/javascriptmvc @javascriptmvc] on twitter for daily useful tips. + *

Blog

+ + + + +Read [http://jupiterjs.com/pages/javascriptmvc JavaScriptMVC's Blog] for +articles, techniques and ideas +on maintainable JavaScript. + +

Forum

+ + + + +Discuss ideas to make the framework better or +problems you are having +on [http://forum.javascriptmvc.com/ JavaScriptMVC's Forum]. + */ +// \ No newline at end of file diff --git a/jmvc/pages/generators.js b/jmvc/pages/generators.js new file mode 100644 index 00000000..5204be6e --- /dev/null +++ b/jmvc/pages/generators.js @@ -0,0 +1,62 @@ +/* + * @page generators Generators API + * @tag app, controller, engine, fixture, functional_test, model, page, scaffold, unit_test + *

Generators API

+ * Use generators to easily create files and functionality. All generators are in the + * jmvc\generate folder. + *

app

+ * Creates a new application, complete with the files you need to test, compress, and document + * your application. +@codestart text +./js jmvc/generate/app APPNAME +Generating... + + apps/APPNAME + apps/APPNAME/init.js loads app's files + apps/APPNAME/compress.js compresses your app + apps/APPNAME/index.html page used for compression + apps/APPNAME/test + apps/APPNAME/test/unit.js loads unit tests + apps/APPNAME/test/run_unit.js runs unit tests + apps/APPNAME/test/functional.js loads functional tests + apps/APPNAME/test/run_functional.js runs functional tests + apps/APPNAME/test/selenium_config.js config for selenium + apps/APPNAME/docs folder for docs + test/unit/truth_test.js basic test + test/functional/truth_functional_test.js basic test + APPNAME.html + + Make sure to add new files to your application and test file! +@codeend +

controller

+Creates a controller, with a basic test file. +@codestart text +js jmvc/generate/controller YourController +Generating... + + controllers + controllers/your_controller.js + test/functional/your_test.js + views/your +@codeend +

engine

+Creates an engine directory and files. +

fixture

+Creates a simulated fixture response. +@codestart text +js jmvc/generate/fixture get /tasks/5.xml +@codeend +

functional_test

+Creates a functional tests +

model

+Creates a basic model, with scaffolding, and a function. +

page

+Creates a page that loads your application. +

scaffold

+Creates Create/Read/Update/Delete (CRUD) functionality for a type of data. It also creates tests. +@codestart text +js jmvc/generate/scaffold ClassName +@codeend +

unit_test

+Creates a unit test + */ \ No newline at end of file diff --git a/jmvc/pages/getcode.js b/jmvc/pages/getcode.js new file mode 100644 index 00000000..46782a50 --- /dev/null +++ b/jmvc/pages/getcode.js @@ -0,0 +1,38 @@ +/** + * @page getcode Get JavascriptMVC + * + * There are 2 ways to get JavaScriptMVC: + * + * - [download Download] it + * - Git it from github. + * + * We prefer you use Git. It's a great way to share changes with us and the community. + * + * + * ## Github Repositories + * + * * [JavaScriptMVC](http://github.com/jupiterjs/javascriptmvc) + * + * * _git clone http://github.com/jupiterjs/javascriptmvc_ + * * _git submodule init_ + * * _git submodule update_ + * * _cd_ into each submodule and do _git checkout_ + * + * * [Steal](http://github.com/jupiterjs/steal) + * + * * _git clone http://github.com/jupiterjs/steal_ + * + * * [jQueryMX](http://github.com/jupiterjs/jquerymx) + * + * * _git clone http://github.com/jupiterjs/jquerymx_ + * + * * [Funcunit](http://github.com/jupiterjs/funcunit) + * + * * _git clone http://github.com/jupiterjs/funcunit_ + * + * * [DocumentJS](http://github.com/jupiterjs/documentjs) + * + * * _git clone http://github.com/jupiterjs/documentjs_ + * + * For more information on how to develop with Git check out [developwithgit Developing with Git]. + */ diff --git a/jmvc/pages/getstarted.js b/jmvc/pages/getstarted.js new file mode 100644 index 00000000..72c79e82 --- /dev/null +++ b/jmvc/pages/getstarted.js @@ -0,0 +1,76 @@ +/* +@page getstarted 2. Get Started +@tag home, get started + +This guide introduces the most important aspects of JavaScriptMVC (JMVC) by +creating a simple cookbook application.] + +## The Video + + + Watch + 2.0 Video + Check out the + JavaScriptMVC 2.0 video that walks you through much of the getting started guide. + It's an older treatment, but still touches on JMVC's strong points. + +

Basics

+ +Before jumping in, there are some things you should know: + +### Folder Structure + +JMVC logically separates a basic app into following folder structure: + +@codestart +appname - your app files + \controllers - organized event handlers + \models - manage data + \resources - helper scripts + \test - test files + \funcunit - funcunit tests + \qunit - qunit tests + \views - html templates +documentjs - documentation engine +funcunit - testing tool +jquery - jquery and jQuery plugins (like $.Controller) +steal - compression and build +@codeend + + + +

Plugins

+ +Everything is a plugin. Just [steal.static.plugins steal] the ones you need. +Plugins load their own dependencies and won't load duplicate files. It looks like: + +@codestart +steal.plugins('jquery/model', + 'jquery/view', + 'jquery/controller'); +@codeend + + + +

Environments

+ +There are different environments for each phase of development: + +

+
• Development - optimized for debugging and rapid development
+
• Production - loads compressed application file
+

+ + + +## Making a Cookbook + +Lets get started by [install installing JavaScriptMVC]. + + */ +//break \ No newline at end of file diff --git a/jmvc/pages/help.js b/jmvc/pages/help.js new file mode 100644 index 00000000..57ab4ee8 --- /dev/null +++ b/jmvc/pages/help.js @@ -0,0 +1,30 @@ +/** + * @page help Get Help + *

Getting Help

+ There are a number of ways to get help: +

Premium Support and Training

+ + + +

+ +[http://jupiterit.com Jupiter], the company that maintains JavaScriptMVC, +provides premium [http://jupiterit.com/support.html support] and +[http://jupiterit.com/training.html training] +for JavaScriptMVC at affordable prices. This is the best way to rapidly progress on +your project. + +

+

Google Group

+ + + + +Ask questions on [http://groups.google.com/group/javascriptmvc JavaScriptMVC's Google Group]. + + +

Search the Documentation

+ +JMVC's documentation is searchable. Type in the input on the top right. + */ +//asdfs \ No newline at end of file diff --git a/jmvc/pages/init.js b/jmvc/pages/init.js new file mode 100644 index 00000000..8c0d1387 --- /dev/null +++ b/jmvc/pages/init.js @@ -0,0 +1,103 @@ +/* + * @page index home + *

JavaScriptMVC - develop with direction!

+ * + * JavaScriptMVC is an open-source framework + * containing the best ideas in jQuery development. + * It guides you + * to successfully completed projects by promoting best practices, + * maintainability, and convention over configuration. + * + * Download JavaScriptMVC3.0.1 Production + * + * Watch + * 2.0 Video + * + * + *

What's Inside?

+ * + * Everything you should be doing, as + * easy as possible: + * + * - [steal Dependency Management] + * - [steal.build Production Builds] + * - [FuncUnit Testing] + * - [DocumentJS Documentation] + * - [steal.clean Code Cleaning and Linting] + * - [jQuery.View Client Side Templates] + * - [jQuery.Model Service/Data Modeling] + * - [jQuery.Controller jQuery Widget Factory] + * - [http://damnit.jupiterit.com Error Reporting] + * - [specialevents jQuery Special Events] like drag drop. + * - [dom jQuery Extensions] like fixtures. + * + * You can use JavaScriptMVC as a complete framework, or download only the parts you need. + * Read [http://jupiterjs.com/news/javascriptmvc-features JavaScriptMVC's features] for + * more info. + * + * ## The Plan. + * + * - [download |Download] JavaScriptMVC + * - [getstarted |Read] the Getting Started Guide + * - [learn Learn] the technology + * - [api Explore] the api + * + * ## What People Are Saying. + * + * > "JavaScriptMVC is the single most important reason why I don't hate + * > client side development anymore." + * + * Mihael Konjevic, HibreedCMS + * + * > "JavaScriptMVC strike the + * > perfect balance between structure, speed + * > and featureset to enable web developers to build large, scalable apps + * > in a modular fashion." + * + * Rob Loh, Lyris, Inc. + * + * > "JavaScriptMVC is an + * > elegant solution that has proven indispensable in building + * > our most sophisticated applications." + * + * Chris Osborn, Sitelier Inc. + * + * > "Since standardizing on JavaScriptMVC, we've been able to start sharing + * > well-tested code between projects, + * > quickly bring new developers up to speed + * > and take the complexity out of the packaging, minification, and deployment + * > process." + * + * Thomas Reynolds, Second Story + * + * > "Structured Event Delegation? Development, Test, and Production + * > environments? It even has a build step in its deployment process? + * > Are you sure this is a JavaScript application?" + * + * Donnie Hall, eNova Financial + * + */ +steal( +'getstarted', +'install', +'creating', +'documenting', +'testing', +'compressing', +'api', +'download', +'learn', +'why', +'selenium', +'follow', +'contribute', +'getcode', +'help', +'generators', +'developingwithgit', +'folders', +'developingjmvc', +'//steal/rhino/docs') + + + diff --git a/jmvc/pages/install.js b/jmvc/pages/install.js new file mode 100644 index 00000000..c92a562f --- /dev/null +++ b/jmvc/pages/install.js @@ -0,0 +1,110 @@ +/* +@page install 2.1. Installing JavaScriptMVC +@parent getstarted + +## Requirements + +JavaScriptMVC requires Java JRE 1.6 or greater for: + + - Compression (Google Closure) + - Selenium run FuncUnit tests + - Easy updating + - Code Generators + +But your backend server can be written in any language. +Download [http://www.java.com/en/download/index.jsp Java here]. + +## Getting JavaScriptMVC + +There are 2 ways to get JavaScriptMVC: + + - Forking it with git + - [download downloading] it + +We (and the community) would much prefer you to develop with git. JavaScriptMVC is built +around modular development so it fits in perfectly +with git development. Plus we can trade improvements really easy. + + +## Downloading + +[download Download] the latest JavaScriptMVC. +Unzip the folder on your file system or web server. +If you are using this on a webserver, +unzip in a public folder where the server hosts static content. + + + +## Installing JavaScriptMVC with GIT. + +JavaScriptMVC is comprised of four sub projects: + + - [http://github.com/jupiterjs/steal] + - [http://github.com/jupiterjs/jquerymx] + - [http://github.com/jupiterjs/documentjs] + - [http://github.com/jupiterjs/funcunit] + +You want to fork each project and add it as a submodule to your project +in a public folder (where your server keeps static content). +If these words mean nothing to you, or you'd like more +explanation, you might want to read +[developwithgit Developing With Git]. + +Forking the repos looks like: + +@codestart text +git submodule add git@github.com:_YOU_/steal.git public/steal +git submodule add git@github.com:_YOU_/jquerymx.git public/jquery +git submodule add git@github.com:_YOU_/documentjs.git public/documentjs +git submodule add git@github.com:_YOU_/funcunit.git public/funcunit +@codeend + +Notice that the javascriptmvc repository is put in a jquery folder. + +After installing the repository, run: + +@codestart +[WINDOWS] > steal\js steal\make.js + +[Lin/Mac] > ./steal/js steal/make.js +@codeend + +## Verifing the install + +In your public (or static) folder, you should have something that looks like: + +@codestart +static + \documentjs - DocumentJS library + \funcunit - FuncUnit testing library + \jquery - jQuery and MVC plugins + \steal - compression and build system + \js.bat - Windows Rhino shortcut + \js - Mac/Linux Rhino shortcut +@codeend + + +

Updating JavaScriptMVC

+We are constantly improving JMVC. If you're using git, you can +just pull changes. Otherwise, to get the latest, most +error free code, in a console, type: +@codestart text +C:\workspace\Cookbook>js documentjs\update +C:\workspace\Cookbook>js funcunit\update +C:\workspace\Cookbook>js jquery\update +C:\workspace\Cookbook>js steal\update +@codeend + + + +Continue to [creating Creating Cookbook]. + */ +//break --------------------------------------------------------------------- diff --git a/jmvc/pages/learn.js b/jmvc/pages/learn.js new file mode 100644 index 00000000..fceb8e62 --- /dev/null +++ b/jmvc/pages/learn.js @@ -0,0 +1,123 @@ +/* +@page learn 3. Learn +@tag home, learn + +JavaScriptMVC contains pretty much everything +you need to develop, test, and maintain a +JavaScript application. Instead of learning +an API, learning JavaScriptMVC is more +about learning HOW to build an application. + +## The Basics + + + Watch + 2.0 Video + Before you do anything, watch +the 2.0 Video. +It's a 12 min brain dump that will highlight most of JMVC's features. + + + + +You might be asking yourself a frequently asked question: + + +#### Who should use JMVC? + +JMVC is designed for large, single-page JavaScript applications +that require lots of custom code (something like [http://gmail.com GMail]). +It fits between low-level libraries like jQuery and widget libraries like +jQueryUI. + +If you need to organize, test, maintain, or compress a JavaScript +application, JavaScriptMVC will help. + +#### How does JMVC fit into my project? + +JMVC is based around the principles of Service Oriented Architecture (SOA) and +Thin Servier Architecture (TSA). This means your server +produces raw (preferably REST) services and never sends data in HTML. + +Read a [http://blog.javascriptmvc.com/?p=68 1.5 article] how it looks + from within a rails application: + + + +For information on the benefits of TSA, watch [http://www.youtube.com/watch?v=XMkIZZ7dBng Practical Thin Server Architecture]. + +#### Does JMVC work with a Java/PHP/Rails/etc backend? + +Yes, JMVC will will work with any backend service. It +prefers to consume JSON Rest services, but it's flexible +enough to work from +anything. + +#### Do you have any example code? + +We are trying to get move public source available, but for now check out: + + - Srchr - demo app + - MXUI - jQueryMX UI widgets. + + +#### How does JMVC compare to other JS Frameworks? + +JavaScriptMVC focuses on building your applications the right way. It's almost +exclusively about software engineering. This is in contrast to other frameworks +that + +JMVC has the gamut of features to support the most complex JS applications. +But it's most important feature, and its most unique, +is its event delegation support organized +via [jQuery.Controller controllers]. If you haven't used controllers to organize event handling in +JavaScript, you haven't really programmed JavaScript. + + +## Model View Controller + +There are only 4 things you will ever do with JavaScript! JMVC breaks these down into the +Model-View-Controller architecture. + + + - Respond to events -> [jQuery.Controller Controller] + - Get data and manipulate services (Ajax) -> [jQuery.Model Model] Static functions + - Wrap service data with domain specific information -> [jQuery.Model Model] Prototype functions + - Update the page -> [jQuery.Controller Controller] and [jQuery.View View] + + +Here's how that flow looks: + + + +Think how this would work with the google auto-suggest. + + + + - Respond to typing "JavaScriptMVC" -> [jQuery.Controller Controller]. + - Get search suggestions -> [jQuery.Model Model] Static functions. + - Wrap search data -> [jQuery.Model Model] Prototype functions. Not really important here! + - Draw suggestions -> [jQuery.Controller Controller] and [jQuery.Controller View]. + + +## Development Tools? + +JavaScriptMVC supplies a host of JS tools including: + + - [generators Code generators] + - [steal Dependancy management] + - [FuncUnit Testing] + - [steal.build Compression] + - [DocumentJS Documentation] + +## How do I get help? + +Write on our [http://forum.javascriptmvc.com/ forum]. + +## How do I report errors, or contribute code? + +Submit patches or errors in [https://github.com/jupiterjs github]. + + */ + +//break \ No newline at end of file diff --git a/jmvc/pages/selenium.js b/jmvc/pages/selenium.js new file mode 100644 index 00000000..b196ccf7 --- /dev/null +++ b/jmvc/pages/selenium.js @@ -0,0 +1,20 @@ +/* + * @page selenium Selenium Config + * @tag test + *

Selenium Config

+ *

The generator creates a selenium_config.js file in the application's test folder. Here are what the + * options do:

+@codestart +SeleniumDefaults = { + serverHost: "localhost", //selenium server location + serverPort : 4444, //selenium server port + browserURL : "http://localhost#jmvc[selenium]=true&jmvc[env]=test" + //where your app runs from +} + +SeleniumBrowsers = [ //list of browsers + "*iexplore", + "*firefox" +] +@codeend + */ \ No newline at end of file diff --git a/jmvc/pages/testing.js b/jmvc/pages/testing.js new file mode 100644 index 00000000..c067e9b7 --- /dev/null +++ b/jmvc/pages/testing.js @@ -0,0 +1,195 @@ +/* +@page testing 2.3. Testing Cookbook +@parent getstarted +

Testing Cookbook +

+

[FuncUnit] tiered approach allows unit and functional testing in the browser, +[http://www.mozilla.org/rhino/ Rhino], and +[http://seleniumhq.org/ Selenium]. +When you scaffolded recipe, it created tests for you. This guide will show you how to: +

+

+
• Run unit tests.
+
• Run functional tests.
+
• Understand the qUnit unit tests.
+
• Understand the FuncUnit functional tests.
+
• Test isTasty functionality.
+

+ +

Run Unit Tests

+

JavaScriptMVC uses qUnit to test unit functionality (like models and basic plugins). You can run these +tests in the browser or Envjs.

+

cookbook/test/qunit/qunit.js loads qunit and your unit tests. Make sure +you have added recipe_test.js like:

+@codestart +steal + .plugins("funcunit/qunit", "cookbook") + .then("cookbook_test",'recipe_test') +@codeend +

Run Unit Tests in the Browser

+

Open cookbook/qunit.html. You should see something like:

+ +

Run Unit Tests in Envjs

+

In a command window type:

+@codestart +> funcunit\envjs cookbook/qunit.html +@codeend +This runs qunit.html in a simulated browser environment. The output should look like:
+ + +

Run Functional Tests

+

JavaScriptMVC uses FuncUnit to add browser and selenium-based functional +testing to qUnit. You can run tests in the browser or using selenium.

+

cookbook/test/funcunit/funcunit.js loads funcunit and your functional tests. +Make sure you have added recipe_controller_test.js like:

+@codestart +steal + .plugins("funcunit") + .then("cookbook_test",'recipe_controller_test') +@codeend + +

Run Functional Tests in the Browser

+

Open cookbook/funcunit.html. You should see something like:

+ +

Run Functional Tests in Selenium

+

In a command window type:

+@codestart +> funcunit\envjs cookbook\funcunit.html +@codeend +This should open Firefox and IE if you are using Windows. The results of the +test should look like:
+ + + +

+If you are having trouble running the tests in Internet Explorer, you need to change a few settings in the browser. Please see the [FuncUnit FuncUnit documentation] for troubleshooting help. +

+ + + + +

Understanding qUnit Tests

+FuncUnit adds very little to qUnit, so the best place to start understanding qUnit is its own +[http://docs.jquery.com/QUnit documentation]. FuncUnit / JavaScriptMVC just adds a way to: +

+
• Organize tests
+
• Load tests
+
• Run and report results in Envjs
+

+

Here's how it works ...

+

+
1. cookbook/qunit.html loads steal.js and tells it to load: + cookbook/test/qunit/qunit.js with the following script tag: +@codestart +<script type='text/javascript' + src='../steal/steal.js?steal[app]=cookbook/test/qunit'> +</script> +@codeend +
+
2. In qUnit.js, the qUnit plugin and tests are loaded.
+
3. In cookbook/test/qunit/cookbook_test.js + tests are added to be run by qunit. +
+
4. When the page loads, the tests are run.
+

+

When the page is run in Envjs, qUnit does the same 4 steps, but reports +the messages on the command line.

+ +

As an example of a test, let look at how the findAll test works:

+@codestart +//creates a test +test("findAll", function(){ + //prevents the next test from running + stop(2000); + + //requests recipes + Cookbook.Models.Recipe.findAll({}, function(recipes){ + + //makes sure we have something + ok(recipes) + + //makes sure we have at least 1 recipe + ok(recipes.length) + + //makes sure a recipe looks right + ok(recipes[0].name) + ok(recipes[0].description) + + //allows the next test to start + start() + }); +}) +@codeend + + +

Understanding FuncUnit Tests

+

FuncUnit adds to qUnit the ability to open another page, in this case +cookbook/cookbook.html, perform actions on it, and +get information from it.

+

+ The cookbook/funcunit.html page + works just like the qunit.html page except the 'funcunit' plugin is loaded which + provides [FuncUnit]. FuncUnit is aliased to "S" to highlight the similarity between its API + and jQuery's API. +

+

Let take a quick look at a FuncUnit test:

+@codestart +test("create recipes", function(){ + + //type Ice in the name field + S("[name=name]").type("Ice") + + //type Cold Water in the description field + S("[name=description]").type("Cold Water") + + //click the submit button + S("[type=submit]").click() + + //wait until the 2nd recipe exists + S('.recipe:nth-child(2)').exists() + + //Gets the text of the first td + S('.recipe:nth-child(2) td:first').text(function(text){ + + //checks taht it has ice + ok(text.match(/Ice/), "Typed Ice"); + }); + +}) +@codeend +

Wait ... why is getting the text passed a function?

+

+ Functional tests are largely many asynchronous actions + (clicks and keypresses) + with relatively few checks/assertions. + FuncUnit's goal is to provide as readable and linear syntax as possible. + FuncUnit statements are actually stored and then run asynchronously. This requires that + getting a value from the page happens in a callback function. +

+

For more information on FuncUnit, read its [FuncUnit documentation]

+

Testing isTasty

+

In the [creating Creating Cookbook] section of the Getting Started guide, +we added an isTasty function to be shown. Lets see how we could unit test +that functionality.

+

At the end of recipe_test.js we'll add code that +creates two recipe instances and checks if they are tasty. +

+@codestart +test("isTasty", function(){ + var Recipe = Cookbook.Models.Recipe, + r1 = new Recipe({name: "tea", + description: "leaves and water"}), + r2 = new Recipe({name: "mushroom soup", + description: "mushrooms and water"}); + ok(r1.isTasty(), "tea is tasty") + ok(!r2.isTasty(), "mushroom soup is not tasty") +}) +@codeend +

Next, learn how to [compressing Compress Cookbook].

+ +*/ +//break ---------------------------------------------------------------------- \ No newline at end of file diff --git a/jmvc/pages/whatsnew.js b/jmvc/pages/whatsnew.js new file mode 100644 index 00000000..f66739bc --- /dev/null +++ b/jmvc/pages/whatsnew.js @@ -0,0 +1,19 @@ +/* +@page whatsnew New in 2.0 +@tag new +

New in 2.0

+In order of significance: +

jQuery

+

A far cry from the "library interdependance" of 1.5, 2.0 has sold is soul to jQuery. + It's been great for the project, allowing us to focus on what makes JavaScriptMVC + different - development tools and architecture. + +

+

Testing

+Likely the most effort has gone into JavaScriptMVC's testing. You can now write your tests and +expect them to run in all browsers, Rhino, and Selenium automatically. + + +

Documentation

+The most obvious change has been to the new Documentation engine. +*/ \ No newline at end of file diff --git a/jmvc/pages/why.js b/jmvc/pages/why.js new file mode 100644 index 00000000..45a9f2a6 --- /dev/null +++ b/jmvc/pages/why.js @@ -0,0 +1,91 @@ +/* +@page why 0. Why JavaScriptMVC +@tag home + +So you've read through the list of features and you're still not +convinced JavaScriptMVC is right for you. If you're looking for +a little (extremely biased) advice, you've come to the +right place. + +## Who Should Use JavaScriptMVC? + +JavaScriptMVC is designed to enhance jQuery development +for medium to large projects. You should care about +code quality, performance, and maintainability. + +If you don't care about these things, or think jQuery is enough +for any project, +you don't know what you're doing, and you will +embarrass the project by using it. Leave now. + +If you do care, here's how JavaScriptMVC helps you: + +

+ JavaScriptMVC makes everything you should be doing, as easy as possible! +

+ +Here's a few things you should be doing: + + - Testing (especially automatic and functional testing) + - Documenting + - Breaking up code into logically organized files + - Compressing and concatenating your JavaScript files + - Using and organizing client side templates + - Making plugins that clean themselves up, are internally organized, and extendable. + - Error reporting + +All of these things are hard or impossible to do right with jQuery alone. + +You can add your own automated testing library - +QUnit isn't automated, it's difficult to write Selenium tests. + +You can add your own documentation engine - JSDoc, make sure you keep track of every file! + +You can add your own way of loading and compressing scripts - RequireJS. + +You can use other client side template libraries - jquery-tmpl, but you won't be able to compress them into your build or put them in external files as easily. + +You can be careful to structure your jQuery plugins so they can be easily removed from an element, remove all event handlers, and provide some mechanism for extending or overwriting your plugin. + +You can devise your own way of doing error reporting. + +### OR ... + +You can download JavaScriptMVC and run: + +@codestart text +js steal/generate/app APPNAME +@codeend + +and get all of these things for free. + +JavaScriptMVC's greatest strength is it's integration. +Everything you should be doing is available immediately. + +## Ease of Adoption + +Despite the huge amount of features, JavaScriptMVC is +easy to learn. + +Every component includes: + + - thorough documentation + - demo examples + - test pages + - a write-up on JavaScriptMVC's blog. + +We are extremely active on the forums, with essentially +zero unanswered questions. + +We've released a number of mini apps that are built the +JavaScriptMVC way. + +Jupiter Consulting provides JavaScriptMVC training, support, +and consulting services. + + + + */ + + +//break \ No newline at end of file diff --git a/jmvc/scripts/compress.js b/jmvc/scripts/compress.js new file mode 100644 index 00000000..6ebebbd1 --- /dev/null +++ b/jmvc/scripts/compress.js @@ -0,0 +1,4 @@ +//js jmvc/compress.js + +load("steal/compress/compress.js") +var compress = new steal.Compress(['jmvc/jmvc.html','jmvc']); \ No newline at end of file diff --git a/jmvc/scripts/doc.js b/jmvc/scripts/doc.js new file mode 100644 index 00000000..e30505d4 --- /dev/null +++ b/jmvc/scripts/doc.js @@ -0,0 +1,14 @@ +//steal/js jmvc/scripts/doc.js +//load("jmvc/scripts/doc.js") + +_args = ['jmvc/jmvc.html'] + +load('steal/rhino/steal.js'); +steal.overwrite = true; +load('documentjs/documentjs.js'); + +var file = _args.shift(), + options = steal.opts(_args || {}, {out: 1}); + + +DocumentJS(file,options); \ No newline at end of file diff --git a/jmvc/summary.ejs b/jmvc/summary.ejs new file mode 100644 index 00000000..25f9b2be --- /dev/null +++ b/jmvc/summary.ejs @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/jmvcdoc b/jmvcdoc new file mode 160000 index 00000000..8e86c846 --- /dev/null +++ b/jmvcdoc @@ -0,0 +1 @@ +Subproject commit 8e86c846872530a204b14649e5440a6ced118c48 diff --git a/jquery b/jquery new file mode 160000 index 00000000..e1b77bfa --- /dev/null +++ b/jquery @@ -0,0 +1 @@ +Subproject commit e1b77bfa0dce4eb91fd681d964c7d948552eb424 diff --git a/js b/js new file mode 100755 index 00000000..01c86b67 --- /dev/null +++ b/js @@ -0,0 +1,56 @@ +#!/bin/sh +# This script checks for arguments, if they don't exist it opens the Rhino dialog +# if arguments do exist, it loads the script in the first argument and passes the other arguments to the script +# ie: ./js steal/script/controller Todo + +if [ $# -eq 0 ] +then + java -cp steal/rhino/js.jar:funcunit/java/selenium-java-client-driver.jar org.mozilla.javascript.tools.shell.Main + exit 127 +fi +if [ $1 = "-selenium" ] +then + java -jar funcunit/java/selenium-server.jar + exit 127 +fi +CP=funcunit/java/selenium-java-client-driver.jar:steal/rhino/js.jar +if [ $1 = "-mail" ] +then + CP=steal/rhino/mail.jar:funcunit/java/selenium-java-client-driver.jar:steal/rhino/js.jar + shift +fi + +if [ $1 = "-h" -o $1 = "-?" -o $1 = "--help" ] +then +echo Load a command line Rhino JavaScript environment or run JavaScript script files in Rhino. +echo Available commands: +echo -e "./js\t\t\t\tOpens a command line JavaScript environment" +echo -e "./js -d\t\t\t\tOpens the Rhino debugger" +echo -e "./js [FILE]\t\t\tRuns FILE in the Rhino environment" +echo -e "" +echo -e "JavaScriptMVC script usage:" +echo -e "./js steal/generate/app [NAME]\t\tCreates a new JavaScriptMVC application" +echo -e "./js steal/generate/page [APP] [PAGE]\tGenerates a page for the application" +echo -e "./js steal/generate/controller [NAME]\tGenerates a Controller file" +echo -e "./js steal/generate/model [TYPE] [NAME]\tGenerates a Model file" +echo -e "./js apps/[NAME]/compress.js\t\tCompress your application and generate documentation" + exit 127 +fi + + +if [ $1 = "-d" ] +then + java -classpath steal/rhino/js.jar:steal/rhino/selenium-java-client-driver.jar org.mozilla.javascript.tools.debugger.Main + exit 127 +fi + +ARGS=[ +for arg +do + if [ $arg != $1 ] + then + ARGS=$ARGS"'$arg'", + fi +done +ARGS=$ARGS] +java -Xss1024k -cp $CP org.mozilla.javascript.tools.shell.Main -e _args=$ARGS -opt -1 -e 'load('"'"$1"'"')' diff --git a/js.bat b/js.bat new file mode 100755 index 00000000..8ff1f2b5 --- /dev/null +++ b/js.bat @@ -0,0 +1,59 @@ +:: This script checks for arguments, if they don't exist it opens the Rhino dialog +:: if arguments do exist, it loads the script in the first argument and passes the other arguments to the script +:: ie: js jmvc\script\controller Todo +@echo off +SETLOCAL ENABLEDELAYEDEXPANSION +if "%1"=="" ( + java -cp steal\rhino\js.jar org.mozilla.javascript.tools.shell.Main + GOTO END +) +if "%1"=="-h" GOTO PRINT_HELP +if "%1"=="-?" GOTO PRINT_HELP +if "%1"=="--help" GOTO PRINT_HELP + +if "%1"=="-d" ( + java -classpath funcunit/java/selenium-java-client-driver.jar;steal/rhino/js.jar org.mozilla.javascript.tools.debugger.Main + GOTO END +) +if "%1"=="-selenium" ( + java -jar funcunit\java\selenium-server.jar + GOTO END +) +SET CP=funcunit/java/selenium-java-client-driver.jar;steal\rhino\js.jar +if "%1"=="-mail" ( + SET CP=steal/rhino/mail.jar;funcunit/java/selenium-java-client-driver.jar;steal\rhino\js.jar + SHIFT /0 +) +SET ARGS=[ +SET FILENAME=%1 +SET FILENAME=%FILENAME:\=/% +::haven't seen any way to loop through all args yet, so for now this goes through arg 2-7 +for /f "tokens=2,3,4,5,6,7 delims= " %%a in ("%*") do SET ARGS=!ARGS!'%%a','%%b','%%c','%%d','%%e','%%f' +::remove the empty args +:: for %%a in (",''=") do ( call set ARGS=%%ARGS:%%~a%% ) +SET ARGS=%ARGS:,''=% +::remove the spaces +:: for /f "tokens=1*" %%A in ("%ARGS%") do SET ARGS=%%A +SET ARGS=%ARGS: =% +SET ARGS=%ARGS%] +set ARGS=%ARGS:\=/% +java -Xmx228m -Xss1024k -cp %CP% org.mozilla.javascript.tools.shell.Main -opt -1 -e _args=%ARGS% -e load('%FILENAME%') + +GOTO END + +:PRINT_HELP +echo Load a command line Rhino JavaScript environment or run JavaScript script files in Rhino. +echo Available commands: +echo js Opens a command line JavaScript environment +echo js -d Opens the Rhino debugger +echo js -selenium Starts selenium server +echo js [FILE] Runs FILE in the Rhino environment + +echo JavaScriptMVC script usage: +echo js steal/generate/app [NAME] Creates a new JavaScriptMVC application +echo js steal/generate/page [APP] [PAGE] Generates a page for the application +echo js steal/generate/controller [NAME] Generates a Controller file +echo js steal/generate/model [TYPE] [NAME] Generates a Model file +echo js apps/[NAME]/compress.js Compress your application and generate documentation + +:END diff --git a/mxui b/mxui new file mode 160000 index 00000000..5754cc6b --- /dev/null +++ b/mxui @@ -0,0 +1 @@ +Subproject commit 5754cc6b082ea4abec40927fa0e3f3ce6e194287 diff --git a/scripts/build.js b/scripts/build.js new file mode 100644 index 00000000..23afb0d0 --- /dev/null +++ b/scripts/build.js @@ -0,0 +1,25 @@ +load('steal/rhino/steal.js') + +steal.File("../jmvcdownload").removeDir() +steal.File("jmvcdownload.zip").remove() +steal.File("../jmvcdownload").mkdir() + +var ignore = [".git", ".gitignore", "dist"] + +steal.File("../jmvcdownload/documentjs").mkdir() +steal.File("documentjs").copyTo("../jmvcdownload/documentjs/", ignore) + +steal.File("../jmvcdownload/funcunit").mkdir() +steal.File("funcunit").copyTo("../jmvcdownload/funcunit/", ignore) + +steal.File("../jmvcdownload/jquery").mkdir() +steal.File("jquery").copyTo("../jmvcdownload/jquery/", ignore) + +steal.File("../jmvcdownload/steal").mkdir() +steal.File("steal").copyTo("../jmvcdownload/steal/", ignore) + +steal.File("js").copyTo("../jmvcdownload/js", []) +steal.File("js.bat").copyTo("../jmvcdownload/js.bat", []) + +//steal.File("../jmvcdownload").zipDir("javascriptmvc-3.0.0.zip", "../jmvcdownload/") +runCommand("sh", "-c", 'zip -r javascriptmvc-3.0.0.zip documentjs jquery funcunit steal js js.bat -x "*/.git/*" -x "*/dist/*"'); diff --git a/scripts/deploy.js b/scripts/deploy.js new file mode 100644 index 00000000..1f6dd4df --- /dev/null +++ b/scripts/deploy.js @@ -0,0 +1,9 @@ +load('steal/rhino/steal.js') + +runCommand("cmd", "/C", "js scripts/pull_all.js") + +runCommand("cmd", "/C", "js scripts/docs.js") + +steal.File(".").zipDir("javascriptmvc.zip", ".\\") + +//runCommand("sh", "-c", 'zip -r javascriptmvc.zip * -x "*/.git/*"'); diff --git a/scripts/deploy.rb b/scripts/deploy.rb new file mode 100644 index 00000000..47608b0b --- /dev/null +++ b/scripts/deploy.rb @@ -0,0 +1,18 @@ +require 'fileutils' +require 'rubygems' +require 'net/scp' + +# create the zip of everything +system("js.bat scripts/deploy.js") + +# ssh connect +Net::SCP.start("javascriptmvc.com", "root", :keys => File.join("scripts", "key")) do |scp| + puts "uploading..." + puts scp.upload! "javascriptmvc.zip", "/opt" + puts "uploaded" +end + +Net::SSH.start("javascriptmvc.com", "root", :keys => File.join("scripts", "key")) do |ssh| + puts ssh.exec!("cp /opt/javascriptmvc.zip /u/apps/javascriptmvc/public/") + puts ssh.exec!("cd /u/apps/javascriptmvc/public/ && unzip -o javascriptmvc.zip") +end \ No newline at end of file diff --git a/scripts/docs.js b/scripts/docs.js new file mode 100644 index 00000000..c045302b --- /dev/null +++ b/scripts/docs.js @@ -0,0 +1,15 @@ +_args = ['jmvc/jmvc.html'] + +load('steal/rhino/steal.js'); +steal.overwrite = true; +load('documentjs/documentjs.js'); + +var file = _args.shift(), + options = steal.opts(_args || {}, {out: 1}); + + +DocumentJS(file,options); + +runCommand("cmd", "/C", "js jmvcdoc/toHTML/convert.js path=jmvc\\docs "+ + "docsLoc=docs commentsLoc=http://jmvcs3.disqus.com/embed.js "+ + "analyticsAct=UA-2302003-4 analyticsDomain=javascriptmvc.com") diff --git a/scripts/pull_all.js b/scripts/pull_all.js new file mode 100644 index 00000000..d5f2fd0e --- /dev/null +++ b/scripts/pull_all.js @@ -0,0 +1,9 @@ +load('steal/rhino/utils.js') + +runCommand("git pull origin master") +runCommand("cd documentjs && git pull origin master") +runCommand("cd funcunit && git pull origin master") +runCommand("cd jmvcdoc && git pull origin master") +runCommand("cd jquery && git pull origin master") +runCommand("cd mxui && git pull origin master") +runCommand("cd steal && git pull origin master") \ No newline at end of file diff --git a/steal b/steal new file mode 160000 index 00000000..e0148c61 --- /dev/null +++ b/steal @@ -0,0 +1 @@ +Subproject commit e0148c6158c3136d8e9c5caa519526f88ab641ea diff --git a/test.html b/test.html new file mode 100644 index 00000000..debac395 --- /dev/null +++ b/test.html @@ -0,0 +1,15 @@ + + + + + + +

JavaScriptMVC Framework Test Suite

+

+ +

+

+ + + + \ No newline at end of file diff --git a/test/funcunit/funcunit.js b/test/funcunit/funcunit.js new file mode 100644 index 00000000..ab2adcbc --- /dev/null +++ b/test/funcunit/funcunit.js @@ -0,0 +1,5 @@ +steal + .plugins("funcunit", + "funcunit/test/funcunit" + //,"mxui/test/funcunit" + ) \ No newline at end of file diff --git a/test/qunit/qunit.js b/test/qunit/qunit.js index 57c41cd7..6badd1f4 100644 --- a/test/qunit/qunit.js +++ b/test/qunit/qunit.js @@ -1,21 +1,6 @@ //we probably have to have this only describing where the tests are -steal.plugins( -'jquery/class/test/qunit', -'jquery/controller/test/qunit', -'jquery/controller/view/test/qunit', - -'jquery/dom/compare/test/qunit', -'jquery/dom/cur_styles/test/qunit', -'jquery/dom/dimensions/test/qunit', -'jquery/dom/fixture/test/qunit', -'jquery/dom/form_params/test/qunit', -'jquery/event/default/test/qunit', -'jquery/event/destroyed/test/qunit', -'jquery/event/hover/test/qunit', -'jquery/event/drag/test/qunit', - -'jquery/model/test/qunit', - -'jquery/view/test/qunit', - 'jquery/view/ejs/test/qunit' -) +steal.plugins( 'funcunit/qunit', // load qunit + 'steal/test/qunit', + 'jquery/test/qunit', + 'funcunit/test/qunit', + 'steal/test/qunit') \ No newline at end of file diff --git a/test/run.js b/test/run.js index 1dae7a66..cbf56520 100644 --- a/test/run.js +++ b/test/run.js @@ -1,6 +1,13 @@ -// loads all of jquerymx's command line tests +// loads each project's command line tests -load('jquery/view/test/compression/run.js'); +STEALPRINT = false; + +load("steal/test/run.js"); + +// funcunit here ... + +load("funcunit/test/run.js"); + +load("jquery/test/run.js"); -load("jquery/generate/test/run.js"); diff --git a/test/scripts/big_test.js b/test/scripts/big_test.js new file mode 100644 index 00000000..75c3f093 --- /dev/null +++ b/test/scripts/big_test.js @@ -0,0 +1,24 @@ +/** + * This test loads every test in JavaScriptMVC + */ +load('test/getting_started_test.js') + +print("========================== generators =============================") +load('steal/generate/test/run.js'); + + +print("========================== compression ============================") +load('steal/build/test/run.js'); +load('jquery/view/test/compression/run.js'); + + +print("========================== unit ============================") +load('steal/rhino/steal.js'); +load('funcunit/loader.js'); +FuncUnit.load('qunit.html'); + +print("========================== functional ============================") +load('steal/rhino/steal.js'); +load('funcunit/loader.js'); +FuncUnit.load('funcunit.html'); + diff --git a/test/scripts/getting_started_test.js b/test/scripts/getting_started_test.js new file mode 100644 index 00000000..ea140ad5 --- /dev/null +++ b/test/scripts/getting_started_test.js @@ -0,0 +1,56 @@ +print("========================== jquery/generate/scaffold ============================") + +load('steal/rhino/steal.js'); +load('steal/test/test.js'); + +(function(rhinoSteal){ + +_args = ['cookbook']; +load('jquery/generate/app'); +_args = ['Cookbook.Models.Recipe']; +load('jquery/generate/scaffold'); + +load('steal/rhino/steal.js'); +cookbookContent = readFile('cookbook/cookbook.js'). + replace(".models()", ".models('recipe')"). + replace(".controllers()", ".controllers('recipe')"); +new steal.File('cookbook/cookbook.js').save( cookbookContent ); + +qunitContent = readFile('cookbook/test/qunit/qunit.js'). + replace(".then(\"cookbook_test\")", ".then(\"recipe_test\")"); +new steal.File('cookbook/test/qunit/qunit.js').save( qunitContent ); + +funcunitContent = readFile('cookbook/test/funcunit/funcunit.js'). + replace(".then(\"cookbook_test\")", ".then(\"recipe_controller_test\")"); +new steal.File('cookbook/test/funcunit/funcunit.js').save( funcunitContent ); + +//now see if unit and functional run +print("-- Run unit tests for cookbook --"); +load('funcunit/loader.js'); +FuncUnit.load('cookbook/qunit.html'); + +print("-- Run functional tests for cookbook --"); +load('steal/rhino/steal.js'); +load('funcunit/loader.js'); +FuncUnit.load('cookbook/funcunit.html'); + +print("-- Compress cookbook --"); +load("cookbook/scripts/build.js") + +print("-- Generate docs --"); +_args = ['cookbook/cookbook.html'] +load("documentjs/documentjs.js"); +DocumentJS('cookbook/cookbook.html'); + +load('steal/rhino/steal.js'); +cookbookPage = readFile('cookbook/cookbook.html'). + replace("steal[env]=development", "steal[env]=production"); +new steal.File('cookbook/cookbook.html').save( cookbookPage ); + +print("== complete !!!!!!!!!!!!!!!!!!!!!!!!!!!!\n"); + +//print("-- cleanup --"); +steal.File("cookbook").removeDir(); + +})(steal); + diff --git a/test/test.js b/test/test.js new file mode 100644 index 00000000..5d2cc4dd --- /dev/null +++ b/test/test.js @@ -0,0 +1,2 @@ +steal.plugins( 'test/qunit','test/funcunit' + ) \ No newline at end of file