Permalink
Browse files

add basic samples for angular, backbone and react

  • Loading branch information...
Ian Maffett
Ian Maffett committed Sep 30, 2014
1 parent 68b8593 commit f32bdbd96824bdd675a1b7e126d09526cab060e1
View
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>AF/Angular</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="../../build/af.ui.css" />
<link rel="stylesheet" type="text/css" href="../../build/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script>
<script src="../../build/appframework.ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>
<body id="todoaf">
<div id="splashscreen" class='ui-loader heavy'>
App Framework
<br>
<br>
<span class='ui-icon ui-icon-loading spin'></span>
<h1>Starting app</h1>
</div>
<div class="view" id="mainview">
<header>
<h1>Welcome</h1>
</header>
<div class="pages">
<div class="panel active" id="main" data-title="Welcome" data-selected="true" ng-controller="TodoCtrl" data-include="partials/todo.html">
</div>
<div class="panel" id="about" data-title="About">
This basic demo shows how to use Angular and App Framework UI together.
</div>
</div>
<footer>
<a href="#main" class="icon home" data-transition="slide">todo</a>
<a href="#about" class="icon settings" data-transition="slide">about</a>
</footer>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
<script type="text/javascript" charset="utf-8" src="js/controllers.js"></script>
<script type="text/javascript" charset="utf-8" src="js/directives.js"></script>
</html>
View
@@ -0,0 +1,10 @@
angular.module('todoaf',[])
.config(function () {
});
$.afui.ready(function(){
angular.bootstrap(document, ['todoaf']);
});
@@ -0,0 +1,23 @@
angular.module('todoaf')
.controller('TodoCtrl',function TodoCtrl($scope) {
'use strict';
var todos=$scope.todos=[];
$scope.addTodo=function(){
if(!$scope.todoVal) return;
todos.push({
title:$scope.todoVal,
completed:false
});
$scope.todoVal="";
};
$scope.removeTodo=function(item){
todos.splice(todos.indexOf(item),1);
$scope.$apply();
};
});
@@ -0,0 +1,13 @@
angular.module('todoaf')
.directive("li",function(){
return {
restrict:"E",
link:function($scope,$element,attrs){
$element.on("longTap",function(event){
if(!confirm("Are you sure you want to delete this todo")) return;
$(event.target).off("longTap");
$scope.$eval(attrs.longPress);
});
}
};
});
@@ -0,0 +1,10 @@
<h1>Todo</h1>
<input type="text" placeholder="Enter Todo" id="todoVal" ng-model="todoVal"> <a class="button addBtn" ng-href='#' ng-click='addTodo()'>Add</a>
<hr>
<ul class="list inset">
<li ng-repeat="todo in todos" long-press="removeTodo(todo)">
{{todo.title}}
</li>
</ul>
@@ -0,0 +1,3 @@
#sample
This sample is to show basic usage of Angular and App Framework UI. This does not go into more advanced features, such as page routing/navigation. The key takeway is delaying the loading of Angular until App Framework UI has been dispatched for loading the "partials" in App Framework UI. This also shows using a directive for the "longTap" event App Framework UI dispatches.
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>AF/Angular</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="../../build/af.ui.css" />
<link rel="stylesheet" type="text/css" href="../../build/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script>
<script src="../../build/appframework.ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
</head>
<body id="todoaf">
<div id="splashscreen" class='ui-loader heavy'>
App Framework
<br>
<br>
<span class='ui-icon ui-icon-loading spin'></span>
<h1>Starting app</h1>
</div>
<div class="view" id="mainview">
<header>
<h1>Welcome</h1>
</header>
<div class="pages">
<div class="panel active" id="main" data-title="Welcome" data-selected="true" >
<h1>Todo</h1>
<input type="text" placeholder="Enter Todo" id="todoVal" > <a class="button addBtn" id="addTodo">Add</a>
<hr>
<ul class="list inset" id="todoList">
</ul>
</div>
<div class="panel" id="about" data-title="About">
This basic demo shows how to use Backbone and App Framework UI together.
</div>
</div>
<footer>
<a href="#main" class="icon home" data-transition="slide">todo</a>
<a href="#about" class="icon settings" data-transition="slide">about</a>
</footer>
</div>
</body>
<script type="text/html" id="todoTemplate">
<li><%=title%></li>
</script>
<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
</html>
View
@@ -0,0 +1,35 @@
(function(){
"use strict";
var todos=[];
var app=Backbone.View.extend({
el: '#main',
events: {
'click #addTodo': 'addTodo',
'longTap li': 'removeTodo'
},
template:_.template($('#todoTemplate').html()),
addTodo:function(){
var item=$("#todoVal");
var val=item.val();
if(val.length<2) return;
todos.push(val);
item.val('');
$("#todoList").append(this.template({title:val}));
},
removeTodo:function(e){
var item=$(e.target);
todos.splice(todos.indexOf(item.html()),1);
$(item).remove();
},
initialize:function(){
}
});
$.afui.ready(function(){
new app();
});
})(jQuery);
@@ -0,0 +1,3 @@
#sample
This sample is to show basic usage of Backbone and App Framework UI. This does not go into more advanced features, such as page routing/navigation. This shows initiating the view when App Framework UI is ready, and responding to a custom "longTap" event.
View
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>AF/React</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="../../build/af.ui.css" />
<link rel="stylesheet" type="text/css" href="../../build/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script>
<script src="../../build/appframework.ui.min.js"></script>
<script src="http://fb.me/react-0.11.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.2.js"></script>
</head>
<body id="todoaf">
<div id="splashscreen" class='ui-loader heavy'>
App Framework
<br>
<br>
<span class='ui-icon ui-icon-loading spin'></span>
<h1>Starting app</h1>
</div>
<div class="view" id="mainview">
<header>
<h1>Welcome</h1>
</header>
<div class="pages">
<div class="panel active" id="main" data-title="Welcome" data-selected="true">
<h1>Todo</h1>
<div id="todoform"></div>
<hr>
<h3 style="font-size:10px">Long press to delete</h3>
<div id="todolist"></div>
</div>
<div class="panel" id="about" data-title="About">
This basic demo shows how to use React and App Framework UI together.
</div>
</div>
<footer>
<a href="#main" class="icon home" data-transition="slide">todo</a>
<a href="#about" class="icon settings" data-transition="slide">about</a>
</footer>
</div>
</body>
<script type="text/jsx" charset="utf-8" src="js/app.jsx"></script>
</html>
View
@@ -0,0 +1,74 @@
/** @jsx React.DOM */
$.afui.ready(function(){
var _todoList=[];
var todo = React.createClass({
render: function() {
return (
<li>{this.props.name}</li>
);
},
componentDidMount:function(){
$(this.getDOMNode()).on("longTap",function(e){
var cf=confirm("Are you sure you want to delete this item?")
if(!cf) return;
var item=e.target;
React.unmountComponentAtNode(item);
$(item).remove();
_todoList.splice(_todoList.indexOf(item.innerHTML));
});
},
componentWillUnmount:function(){
console.log("remove test");
}
});
var todolist = React.createClass({
render: function() {
var items=_todoList.map(function(item){
return (
<todo name={item}/>
);
});
return (
<ul className="list inset">{items}</ul>
);
}
});
/** @jsx React.DOM */
var todoform = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var val=this.refs.todoVal.getDOMNode().value.trim();
if(val.length<2)
return;
_todoList.push(val);
this.refs.todoVal.getDOMNode().value=null;
renderTodos();
return;
},
render: function() {
return (
<div><input ref="todoVal" type='text' placeholder='Enter Todo' />
<a className='button addBtn' onClick={this.handleSubmit}>Add</a></div>
);
}
});
React.renderComponent(
<todoform />,
document.getElementById('todoform')
);
function renderTodos(){
React.renderComponent(
<todolist />,
document.getElementById('todolist')
);
}
renderTodos();
});
No changes.
View
@@ -0,0 +1,3 @@
#sample
This sample is to show basic usage of React and App Framework UI. This does not go into more advanced features, such as page routing/navigation. This shows how to create custom React components and load them in an App Framework UI app, along with responding to custom "longTap" events.

0 comments on commit f32bdbd

Please sign in to comment.