Permalink
Browse files

add basic samples for angular, backbone and react

  • Loading branch information...
1 parent 68b8593 commit f32bdbd96824bdd675a1b7e126d09526cab060e1 Ian Maffett committed Sep 30, 2014
@@ -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>
@@ -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>
@@ -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.
@@ -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>
@@ -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.
@@ -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.