Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 193dd2a320
Fetching contributors…

Cannot retrieve contributors at this time

303 lines (246 sloc) 8.939 kb
<html>
<head>
<title>StackMob - Adding a Backend to your JS App</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/json2-min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/underscore-1.3.3-min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/backbone-0.9.2-min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.2.1-min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/resources/js/jsonFormatter-0.1.0-min.js"></script>
<script type="text/javascript" src="js/stackmob-debug.js"></script>
<!-- Include required JS files -->
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<!--
At least one brush, here we choose JS. You need to include a brush for every
language you want to highlight
-->
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
<!-- Include *at least* the core style and default theme -->
<link href="syntaxhighlighter/styles/shCoreMidnight.css" rel="stylesheet" type="text/css" />
<link href="syntaxhighlighter/styles/shThemeMidnight.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.syntaxhighlighter {
margin: 0px !important; padding-top: 15px; padding-bottom: 15px;
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}
</style>
<script type="text/javascript">
StackMob.init({
appName: "fluent2012",
clientSubdomain: "stackmob339",
apiVersion: 0
});
var Todo = StackMob.Model.extend({
schemaName: 'todo'
});
var Todos = StackMob.Collection.extend({
model: Todo
});
$(document).ready(function() {
SyntaxHighlighter.config.tagName = 'code';
SyntaxHighlighter.config.toolbar = false;
SyntaxHighlighter.all();
Reveal.addEventListener('stampede', function() {
$('#stampede').attr('src', 'http://dl.dropbox.com/u/77348001/stampede.gif');
});
});
</script>
<link rel="stylesheet" href="reveal.js/css/reset.css">
<link rel="stylesheet" href="reveal.js/css/main.css">
<style type="text/css" media="screen">
.button, .button a
{
background: #98be47;
background: linear-gradient(top, #a8cf43, #98be47);
background: -moz-linear-gradient(top, #a8cf43, #98be47);
background: -ms-linear-gradient(top, #a8cf43, #98be47);
background: -o-linear-gradient(top, #a8cf43, #98be47);
background: -webkit-linear-gradient(top, #a8cf43, #98be47);
border: 1px solid #8cac42;
border-bottom-color: #7b9b36;
border-radius: 4px;
border-top-color: #94b146;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .5);
color: #fff !important;
cursor: pointer;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 20px;
font-weight: bold;
moz-border-radius: 4px;
moz-box-shadow: 0 2px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .5);
ms-border-radius: 4px;
ms-box-shadow: 0 2px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .5);
o-border-radius: 4px;
o-box-shadow: 0 2px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .5);
padding: 6px 14px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
webkit-border-radius: 4px;
webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.button:hover, .button a:hover
{
background: #67a215;
background: linear-gradient(top, #9dbf46, #67a215);
background: -moz-linear-gradient(top, #9dbf46, #67a215);
background: -ms-linear-gradient(top, #9dbf46, #67a215);
background: -o-linear-gradient(top, #9dbf46, #67a215);
background: -webkit-linear-gradient(top, #9dbf46, #67a215);
border: 1px solid #699631;
border-bottom-color: #457119;
border-top-color: #6d9e34;
color: rgba(250, 250, 250, .96);
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
}
.button:active, .button a:active
{
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
padding: 4px 14px 7px;
webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.button.blue, .button.blue a
{
background: #6bbad7;
background: linear-gradient(top, #76cced, #6bbad7);
background: -moz-linear-gradient(top, #76cced, #6bbad7);
background: -ms-linear-gradient(top, #76cced, #6bbad7);
background: -o-linear-gradient(top, #76cced, #6bbad7);
background: -webkit-linear-gradient(top, #76cced, #6bbad7);
border: 1px solid #4ca8ca;
border-bottom-color: #4c9bb9;
border-top-color: #4cb2da;
}
.button.blue:hover, .button.blue a:hover
{
background: #2c9cc6;
background: linear-gradient(top, #3cb7e5, #2c9cc6);
background: -moz-linear-gradient(top, #3cb7e5, #2c9cc6);
background: -ms-linear-gradient(top, #3cb7e5, #2c9cc6);
background: -o-linear-gradient(top, #3cb7e5, #2c9cc6);
background: -webkit-linear-gradient(top, #3cb7e5, #2c9cc6);
border: 1px solid #0083b4;
border-bottom-color: #00709b;
border-top-color: #0092ca;
}
#stackmoblogo {
position: fixed;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="stackmoblogo"><img src="../images/stackmob_logo.png"/></div>
<div id="reveal">
<div class="state-background"></div>
<div class="slides">
<section>
<h2>StackMob: Our Platform</h2>
<img src ="../images/3rdGen.png" alt="StackMob Diagram"/>
</section>
<section>
<h2>Create your "todo" table</h2>
Syntax:
<pre><code class="brush: javascript; highlight: [3,13]">
//Declare once per page
var Todo = StackMob.Model.extend({
schemaName: 'todo'
});
...
var todo = new Todo({
action: 'Find clean underwear',
priority: 'low'
});
todo.create();
</code></pre>
</section>
<section>
<h2>Try Creating</h2>
<p>var todo = new Todo(</p>
<textarea id="createtodo" >
{
"action": "",
"priority": "high",
"done": false,
"reminders":
["monday","tuesday", "wednesday"]
}
</textarea>
<p>);</p>
<p>todo.create();</p>
<p><input id="create" type="button" class="button" value="Create"/></p>
<p><a href="https://www.stackmob.com/platform/api/schemas/" target="_blank">
<p><input id="gotostackmob" type="button" class="button" value="Go to StackMob"/></p>
</a></p>
<script type="text/javascript">
$(document).ready(function() {
$('#create').click(function() {
var json = $('#createtodo').val().trim();
var todo = new Todo(JSON.parse(json));
todo.create(SMDebug.callbacks('Creating TODO', {
target: 'createtodo',
success: function(model) {
$('#readitem').val(model.get('todo_id'));
$('#updateitem').val(model.get('todo_id'));
$('#deleteitem').val(model.get('todo_id'));
}
}));
});
});
</script>
</section>
<section>
<h2>Your Datastore And ...</h2>
<ul>
<li>User Authentication</li>
<li>Geo Location</li>
<li>File Storage</li>
<li>Social Integration</li>
<li>Push</li>
<li>GitHub Integration</li>
<li>Hosted HTML5</li>
<li>Custom Domain Name</li>
<li>Custom Server Side Code</li>
<li>Analytics</li>
</ul>
<h3>Signup at Stackmob.com</h3>
</section>
</div>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">&#x25C4;</a>
<a class="right" href="#">&#x25BA;</a>
<a class="up" href="#">&#x25B2;</a>
<a class="down" href="#">&#x25BC;</a>
</aside>
<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div>
</div>
<script type="text/javascript" src="../reveal.js/js/reveal.js"></script>
<script type="text/javascript">
Reveal.initialize({
// Display controls in the bottom right corner
controls: true,
// Display a presentation progress bar
progress: true,
// If true; each slide will be pushed to the browser history
history: true,
// Loops the presentation, defaults to false
loop: false,
// Flags if mouse wheel navigation should be enabled
mouseWheel: false,
// UI style
theme: 'default', // default/neon
rollingLinks: false,
// Transition style
transition: 'default' // default/cube/page/concave/linear(2d)
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.