Permalink
Browse files

Updating references, tutorials and generator

  • Loading branch information...
1 parent c40375f commit 74c744c135a537134d09ec12976bff27c4bcfeb7 @daffl daffl committed Aug 2, 2012
View
1 .gitignore
@@ -8,3 +8,4 @@ html/
.idea
selenium.log
packages/*
+tmp/*
View
4 .gitmodules
@@ -9,10 +9,10 @@
url = git://github.com/jupiterjs/steal.git
[submodule "jquery"]
path = jquery
- url = git@github.com:jupiterjs/jquerypp.git
+ url = git://github.com/jupiterjs/jquerypp.git
[submodule "can"]
path = can
- url = git@github.com:jupiterjs/canjs.git
+ url = git://github.com/jupiterjs/canjs.git
[submodule "canui"]
path = canui
url = git://github.com/jupiterjs/canui.git
2 can
@@ -1 +1 @@
-Subproject commit 78ff9d609bfa4bf0c70c6c27f56a502970a1ee34
+Subproject commit 517acce6696036e830cb1a32f32c39e5aa18264b
2 canui
@@ -1 +1 @@
-Subproject commit 434612c7cd59be71c4c19a874877ac4fc3a2953f
+Subproject commit 55e4a8cd38b7c8473a885b8aad87bd9b9487fbb9
View
2 jmvc/generate/templates/app/test/funcunit/(application_name)_test.js.ejs
@@ -6,6 +6,6 @@ steal("funcunit", function(){
});
test("Copy Test", function(){
- equals(S("h1").text(), "Welcome to DoneJS!","welcome text");
+ equals(S("h1").text(), "Welcome to JavaScriptMVC!","welcome text");
});
})
2 jquery
@@ -1 +1 @@
-Subproject commit fc8f3b3c6ec941e5a50fda4c8c7f6d50d4abea9c
+Subproject commit ba1d72a75195693676289fbb30612255d3f0d6a8
View
2 site/docs.html
@@ -56,7 +56,7 @@
mxui : 'https://github.com/jupiterjs/mxui'
};
DOCS_LOCATION = "docs/" //adds searchData to this
- JMVCDOC_TIMESTAMP = 1343665401852;
+ JMVCDOC_TIMESTAMP = 1343891482154;
COMMENTS_LOCATION = 'http://jmvcs3.disqus.com/embed.js';
steal = {
loaded: ['documentjs/jmvcdoc/production.css']
2 steal
@@ -1 +1 @@
-Subproject commit f72b443b69df3590af38e15099a11dbc9574bca0
+Subproject commit fda08d693597b319267585031c1cda687a6c9525
View
89 tutorials/examples/playermx.md
@@ -4,7 +4,7 @@
This article walks through a simple video player application utilizing Popcorn.js. We'll cover:
- Setting up the application
- - Templated events with [mvc.controller $.Controller]
+ - Templated events with [can.Control]
- How PlayerMX is built
## Setup
@@ -13,11 +13,11 @@ There's two options to install PlayerMX: getjs or using git.
### Download with getjs
-After downloading and [installing installing JMVC], run the following command:
+After downloading and [installing installing JavaScriptMVC], run the following command:
`./js steal/getjs player`
-_Note: When running the getjs command, be sure to navigate to your [rootfolder JMVC root folder]._
+_Note: When running the getjs command, be sure to navigate to your [rootfolder JavaScriptMVC root folder]._
### Github
@@ -36,7 +36,6 @@ Open player/player.html in your browser and see the application run:
@image tutorials/images/playermx.png
-
_Note: Safari and Chrome currently support the mp4 codec, however Firefox requires the h.264 Flash player to process mp4's._
You can see our version running here: [http://javascriptmvc.com/player/player.html](http://javascriptmvc.com/player/player.html)
@@ -47,11 +46,13 @@ Repo: [https://github.com/jupiterjs/playermx](https://github.com/jupiterjs/playe
Repo: [https://github.com/cadecairos/popcorn-js](https://github.com/cadecairos/popcorn-js)
-> _Popcorn.js is an event framework for HTML5 media. Popcorn.js utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API and provides a plugin system for community contributed interactions._
+> _Popcorn.js is an event framework for HTML5 media. Popcorn.js utilizes the native HTMLMediaElement properties,
+methods and events, normalizes them into an easy to learn API and provides a plugin system for community contributed interactions._
> _[Source: http://popcornjs.org/documentation](http://popcornjs.org/documentation)_
-Popcorn.js wraps up our mp4 file into a `video` object which we can pass to our widgets. Our widgets can then play and pause the video based on user interaction. The Popcorn.js API we'll be using is:
+Popcorn.js wraps up our mp4 file into a `video` object which we can pass to our widgets.
+Our widgets can then play and pause the video based on user interaction. The Popcorn.js API we'll be using is:
* Events:
* play - triggered when video plays
@@ -67,55 +68,72 @@ Popcorn.js wraps up our mp4 file into a `video` object which we can pass to our
## Templated Events Overview
-PlayerMX introduces the concept of binding events to JavaScript objects other than DOM elements. This application uses the event syntax: `{myObject} click`, where `myObject` is the object and `click` is the event we're listening to. This is what we call templated events.
+PlayerMX introduces the concept of binding events to JavaScript objects other than DOM elements.
+This application uses the event syntax: `{myObject} click`, where `myObject` is the object and `click` is the event we're listening to.
+This is what we call templated events.
-Templated events create a simple way to bind events without concern for cleanup. For example, binding an event to a DOM element with $.bind(), will be removed when you call $.remove() on that element. However, if you want to listen to events on a model, templated events handle the unbinding for you. In essence, memory concerns are reduced with templated events.
+Templated events create a simple way to bind events without concern for cleanup.
+For example, binding an event to a DOM element with $.bind(), will be removed when you call $.remove() on that element.
+However, if you want to listen to events on a model, templated events handle the unbinding for you.
+In essence, memory concerns are reduced with templated events.
-Specifically with PlayerMX, our widgets listen to events produced by our Popcorn video element. If that element is removed from our page, by using templated events, we don't need to worry about cleaning up bound methods.
+Specifically with PlayerMX, our widgets listen to events produced by our Popcorn video element.
+If that element is removed from our page, by using templated events, we don't need to worry about cleaning up bound methods.
## PlayerMX Architecture
-Once you've downloaded the application, you'll notice 3 folders within your `playermx` directory. A few notes on the directory structure of this application:
+Once you've downloaded the application, you'll notice 3 folders within your `playermx` directory.
+A few notes on the directory structure of this application:
-* The `jquery` folder refers to [jquerymx](https://github.com/jupiterjs/jquerymx). This is the JMVC core and what we'll be building our application on.
-* The [steal](https://github.com/jupiterjs/steal) folder is our dependency management system. This is how we include other resources such as scripts, stylesheets, templates or other JMVC resources and apps altogether.
+* The `can` folder refers to [CanJS](https://github.com/jupiterjs/canjs).
+This is the CanJS core and what we'll be building our application on.
+* The `jquery` folder refers to [jQuery++](https://github.com/jupiterjs/jquerypp).
+This adds useful events like [resize jQuery.event.resize] and [jQuery.event.drag drag] which will be used in the player.
+* The [steal](https://github.com/jupiterjs/steal) folder is our dependency management system.
+This is how we include other resources such as scripts, stylesheets, templates or other JavaScriptMVC resources and apps altogether.
* The `player` folder is where we'll place our focus as this is the main directory for our application.
-The application is broken up into one main application page, `player.html`, with a corresponding script, `player.js` and two corresponding widgets.
+The application is broken up into one main application page, `player.html`, with a corresponding script,
+`player.js` and two corresponding widgets.
@image tutorials/images/playermx_overview.png
### player.js
-`Player.js` is our main application script. `Steal` loads the widgets we want, and then we initialize them. This loosely couples our widgets from our application. The variable `video` is our reference to the Popcorn.js wrapped object. `play` and `player_position` accept this object as a parameter.
+`Player.js` is our main application script. `Steal` loads the widgets we want, and then we initialize them.
+This loosely couples our widgets from our application. The variable `video` is our reference to the Popcorn.js wrapped object.
+`play` and `player_position` accept this object as a parameter.
steal('./play.js',
'./position.js',
function() {
var video = Popcorn("#trailer");
- $('#play').play({ video: video });
- $('#position').player_position({ video: video });
+ new Play('#play', { video: video });
+ new PlayerPosition('#position', { video: video });
});
-The first line of `player.js` is our call to `steal`. This is going to load all our dependencies. In this case, we load `play.js` and `position.js`, then execute a function.
+The first line of `player.js` is our call to `steal`. This is going to load all our dependencies.
+In this case, we load `play.js` and `position.js`, then execute a function.
### play.js
@image tutorials/images/playermx_play.png
steal('player/popcorn',
- 'jquery/controller',
+ 'can/control',
function() {
-The purpose of this widget is to control the video playback. Listening to the `play` and `pause` events on the Popcorn.js object, we'll add a CSS class designating playback state.
+The purpose of this widget is to control the video playback. Listening to the `play` and `pause` events on the Popcorn.js object,
+we'll add a CSS class designating playback state.
-Our widget will be created using `$.Controller`. By naming our controller "play", we have now have a `jQuery.fn.play()` method. `init` is the constructor method for our controller. Any passed parameters are accessible via `options` on the controller.
+Our widget will be created using `$.Controller`. By naming our controller "play", we have now have a `jQuery.fn.play()` method.
+`init` is the constructor method for our controller. Any passed parameters are accessible via `options` on the controller.
- $.Controller('Play', {
+ can.Control('Play', {
init : function(){
if( this.options.video.video.paused ) {
this.element.text("play")
@@ -124,7 +142,10 @@ Our widget will be created using `$.Controller`. By naming our controller "play"
}
},
-Within player.js, we've passed a video object to our controller. Using templated events, we can listen to the events directly on this object. Templated events allow listening to events on any object, not just DOM events. In the code below, "{video}" refers to our object and "play" is the event we'll listen for.
+Within player.js, we've passed a video object to our controller.
+Using templated events, we can listen to the events directly on this object.
+Templated events allow listening to events on any object, not just DOM events.
+In the code below, "{video}" refers to our object and "play" is the event we'll listen for.
"{video} play" : function() {
this.element.text("stop").addClass('stop')
@@ -134,7 +155,9 @@ Within player.js, we've passed a video object to our controller. Using templated
this.element.text("play").removeClass('stop')
},
-We'll listen to clicks within the parent element and call the play/pause methods, depending on current state. The separation of the click handler and the play/pause handlers is for extensibility. We may have multiple widgets that control the playback of our video and each widget should be able to respond accordingly.
+We'll listen to clicks within the parent element and call the play/pause methods, depending on current state.
+The separation of the click handler and the play/pause handlers is for extensibility.
+We may have multiple widgets that control the playback of our video and each widget should be able to respond accordingly.
click : function() {
if( this.options.video.video.paused ) {
@@ -152,15 +175,17 @@ We'll listen to clicks within the parent element and call the play/pause methods
steal('player/popcorn',
- 'jquery/controller',
+ 'can/control',
'jquery/dom/dimensions',
'jquery/event/resize',
'jquery/event/drag/limit',
-The PlayerPosition widget shows a progression bar for our video. This should not only display playback position, but be draggable as well. `this` in the following context refers to our widget instance. Our progress indicator will be accessible via the `moving` property. A simple div will suffice for this example and we'll set some basic css properties such as position and dimensions.
+The PlayerPosition widget shows a progression bar for our video. This should not only display playback position, but be draggable as well
+`this` in the following context refers to our widget instance. Our progress indicator will be accessible via the `moving` property.
+A simple div will suffice for this example and we'll set some basic css properties such as position and dimensions.
function() {
- $.Controller('PlayerPosition', {
+ can.Control('PlayerPosition', {
init : function(){
this.moving = $("<div>").css({
position: 'absolute',
@@ -175,7 +200,8 @@ The PlayerPosition widget shows a progression bar for our video. This should not
},
-The widget listens to the Popcorn.js `timeupdate` event on our video model to recalculate our indicator position. We've separated the event listener from the resize method to allow for any other widgets that may be listening to `timeupdate`.
+The widget listens to the Popcorn.js `timeupdate` event on our video model to recalculate our indicator position.
+We've separated the event listener from the resize method to allow for any other widgets that may be listening to `timeupdate`.
"{video} timeupdate" : function(video){
this.resize()
@@ -188,9 +214,10 @@ The widget listens to the Popcorn.js `timeupdate` event on our video model to re
this.moving.css("left", percent*width+"px")
},
-_Note: `draginit` and `dragend` are a couple of events provided by the JMVC framework. [jQuery.Drag jQuery.Drag]_
+_Note: `draginit` and `dragend` are a couple of events provided by [jQuery++ jquerypp]. [jQuery.Drag jQuery.Drag]_
-The drag events are scoped to the indicator div element. We can now call the Popcorn.js `play` and `pause` methods, trusting other widgets to respond as needed. In this app, these events will get picked up by our 'Play' widget to start/stop the playback.
+The drag events are scoped to the indicator div element.
+We can now call the Popcorn.js `play` and `pause` methods, trusting other widgets to respond as needed. In this app, these events will get picked up by our 'Play' widget to start/stop the playback.
"div draginit" : function(el, ev, drag){
this.options.video.pause()
@@ -211,4 +238,6 @@ The drag events are scoped to the indicator div element. We can now call the Pop
The secret to building large applications is to never build large applications.
-Applications can quickly become overwhelming, complex and difficult to maintain. The takeaway from the PlayerMX architecture is to create isolated, dumb widgets that can be tied together with events. This article is an example of how to loosely couple your widgets, use templated events and integrate with an API (Popcorn.js).
+Applications can quickly become overwhelming, complex and difficult to maintain.
+The takeaway from the PlayerMX architecture is to create isolated, dumb widgets that can be tied together with events.
+This article is an example of how to loosely couple your widgets, use templated events and integrate with an API (Popcorn.js).
View
4 tutorials/getstarted/creating.md
@@ -162,8 +162,8 @@ looks like:
'cookbook/recipe/list',
function(){
// set your application up
- $('#recipes').cookbook_recipe_list();
- $('#create').cookbook_recipe_create();
+ new Cookbook.Recipe.List('#recipes');
+ new Cookbook.Recipe.Create('#create');
})
You'll notice that it now loads `cookbook/create`

0 comments on commit 74c744c

Please sign in to comment.