cs 696 emerging web and mobile technologies spring semester, 2011
TRANSCRIPT
![Page 1: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/1.jpg)
CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011
Doc 15 Socket.IO & Sencha TouchMar 10, 2011
Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.
Thursday, March 10, 2011
![Page 2: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/2.jpg)
References
2
Sencha Touch API Documentation, http://dev.sencha.com/deploy/touch/docs/, http://www.sencha.com/learn/Sencha_Touch
Socket.IO, http://socket.io/
Various web pages as noted on individual slides.
Thursday, March 10, 2011
![Page 3: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/3.jpg)
3
Socket.IO
Thursday, March 10, 2011
![Page 4: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/4.jpg)
Problems with Ajax
4
Client has to request data
Comet allows directional communication
WebSockets simplifies the bi-directional connections
But not available on all browsers
Thursday, March 10, 2011
![Page 5: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/5.jpg)
Socket.IO
5
JavaScript library for Client server communication
WebSocketAdobe® Flash® SocketAJAX long pollingAJAX multipart streamingForever IframeJSONP Polling
Detects and uses the most capable transport supported by browser
Thursday, March 10, 2011
![Page 6: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/6.jpg)
Supported Browsers
6
Internet Explorer 5.5 - 8Safari 3 - 5Google Chrome 4 - 6Firefox 3-4Opera 10.61
iPhone SafariiPad SafariAndroid WebKitWebOs WebKit
Thursday, March 10, 2011
![Page 7: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/7.jpg)
Client side communication
7
var socket = new io.Socket(node_server_url); socket.connect();
socket.send(message);
// callback when connection is made socket.on('connect', function(){ … })
// callback on receiving messge from server socket.on('message', function(){ … })
// when disconnected socket.on('disconnect', function(){ … })
socket.disconnect();
Thursday, March 10, 2011
![Page 8: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/8.jpg)
Async Communication
8
var socket = new io.Socket(node_server_url); socket.connect();
socket.send("Hi Mom");
socket.on('message', function(messageFromServer){alert(messageFromServer);
})
Response to sendCome in on('message")
Server can send messageanytime
Thursday, March 10, 2011
![Page 9: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/9.jpg)
Server Side
9
Server has to be ready to handle variety of connections
WebSocketAdobe® Flash® SocketAJAX long pollingAJAX multipart streamingForever IframeJSONP Polling
Thursday, March 10, 2011
![Page 10: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/10.jpg)
Servers Support in Socket.IO
10
Node.js
Tornado (Python) https://github.com/MrJoes/tornadio
socketio-javaImplemented in Servletshttp://code.google.com/p/socketio-java/
Gohttps://github.com/madari/go-socket.io
Rack (Ruby Weberver)https://github.com/markjeee/Socket.IO-rack
Thursday, March 10, 2011
![Page 11: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/11.jpg)
Example
11
Client connects to Server
Every second server sends integer - number messages sent
Thursday, March 10, 2011
![Page 12: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/12.jpg)
Client Side
12
<!doctype html><html> <head> <title>Timer client test</title> <script src="http://127.0.0.1:8080/json.js"></script> <script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script> </head> <body> <script> var socket = new io.Socket(null, {port: 8080}); socket.connect(); socket.on('message', function(message){
document.getElementById('text').value = message.announcement; }); </script> <h1>Sample client</h1> <input type="text" id="text"> </body></html>
Thursday, March 10, 2011
![Page 13: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/13.jpg)
Server Side using Node.js
13
var http = require('http') , io = require('../'), url = require('url') , fs = require('fs') , timer = require('timers') , server; server = http.createServer(function(request, response){ var path = url.parse(request.url).pathname; switch (path){ case '/json.js': case '/chat.html': console.log("get file: " + path ); fs.readFile(__dirname + path, function(err, data){ if (err) return send404(res); response.writeHead(200, {'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'}) response.write(data, 'utf8'); response.end(); }); break; }}),
server.listen(8080);
Thursday, March 10, 2011
![Page 14: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/14.jpg)
Server Side using Node.js
14
var io = io.listen(server)var count = 1; io.on('connection', function(client){ client.send({ announcement: count++ }); client.broadcast({ announcement: client.sessionId + ' connected' }); count = 1;});
timer.setInterval(clock, 1000);function clock() { io.broadcast({ announcement: "" + count++ });}
Thursday, March 10, 2011
![Page 15: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/15.jpg)
15
Web verses Application development
Thursday, March 10, 2011
![Page 16: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/16.jpg)
16
Web-based approachesjQuery
Javascript & CSS libraries for Web
jQuery Mobile, JQTouchJust Extend the libraries for Mobile browsersMobile Look and Feel
PhoneGapNative application running Web viewJust web page in native app
Thursday, March 10, 2011
![Page 17: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/17.jpg)
Web-based approaches - Benefits
17
Use Web skills & developers
Cross platform
Web app and native app
Designers & their tools
Thursday, March 10, 2011
![Page 18: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/18.jpg)
Web-based approaches - Cons
18
Performance
Emulate native widgets
HTML & CSS limitations
Access to platform features
Different style of development
Browser Interpreter for applications
Thursday, March 10, 2011
![Page 19: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/19.jpg)
Application-based Approaches
19
Sencha Touch
Webpages and mobile apps
JavaScript development
MVC
JavaScript classes for Widgets
JavaScript create DOM objects
Titanium Appcelerator
Mobile apps only
Javascript development
MVC
JavaScript UI widgetsControl native widgets
Thursday, March 10, 2011
![Page 20: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/20.jpg)
Application-based Approaches
20
More like traditional application development
Construct interface by creating objects
Object interact
Library of UI widgetsPanelsContaintersButtonsLayout managers
Thursday, March 10, 2011
![Page 21: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/21.jpg)
Button - jQuery Mobile
21
HTML button/element
CSS - looks
JavaScript added to elementonclick
Thursday, March 10, 2011
![Page 22: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/22.jpg)
Button - Sencha Touch
22
HTML button/elementCSS - looks
JavaScript Button objectCreates HTML buttonContains JavaScript logicInteracts with other JavaScript objectsCan use some native widgets
Thursday, March 10, 2011
![Page 23: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/23.jpg)
Button - Appcelerator
23
Native Button
JavaScript Button Contains JavaScript logicInteracts with other JavaScript objects
Thursday, March 10, 2011
![Page 24: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/24.jpg)
24
If you only have a hammer everything looks like a nail
Thursday, March 10, 2011
![Page 25: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/25.jpg)
25
Sencha Touch
Thursday, March 10, 2011
![Page 26: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/26.jpg)
Sencha Touch
26
http://www.sencha.com/products/touch/
Supports iOS (iPhone, iPod Touch, iPad)AndroidBlackberry 6 (soon)
Native iOS look
Themes for Android
Documentationhttp://www.sencha.com/learn/Sencha_Touch
Thursday, March 10, 2011
![Page 27: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/27.jpg)
The Sencha Touch Web Page
27
<!DOCTYPE html><html><head> <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;" /> <title>Button</title> <link rel="stylesheet" href="sencha-touch-debug.css" type="text/css"> <script type="text/javascript" src="sencha-touch-debug-w-comments.js"></script> <script type="text/javascript" src="index.js"> </script></head><body></body></html>
Thursday, March 10, 2011
I am using the debug version of the CSS & JavaScript libraries
![Page 28: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/28.jpg)
Hello World Example
28
Ext.setup({ onReady: function(){ new Ext.Panel({ fullscreen: Ext.is.iPhone, items:[ new Ext.Button({ text: 'Hello World' }) ] }); } });
index.js
Thursday, March 10, 2011
![Page 29: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/29.jpg)
Overview
29
Ext.setup({ onReady: function(){ new Ext.Panel({ fullscreen: Ext.is.iPhone, items:[ new Ext.Button({ text: 'Hello World' }) ] }); } });
ExtJavaScript objectNamespace/ModelContains Sencha Touch library
Entire interface & logicJavaScriptUsing Library objects
Thursday, March 10, 2011
![Page 30: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/30.jpg)
Sencha Touch Major parts
30
PanelsLayoutsTemplatesForm ElementsData ElementsListeners
Thursday, March 10, 2011
![Page 31: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/31.jpg)
Panels
31
Thursday, March 10, 2011
source: https://github.com/nelstrom/Sencha-Touch-panels-demo
![Page 32: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/32.jpg)
Useful Panel Properties
32
fullscreenShould panel take up entire available area
layoutHow to layout contentsSpecify which Layout manager to use
itemsItem(s) to add to panelObject or string literal
dockedItemsItems to be added boundry of panelToolbars & tab bars
htmlAdded to panel
Thursday, March 10, 2011
there are a lot more properties
![Page 33: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/33.jpg)
Object Verses String Representation
33
Ext.setup({ onReady: function(){ new Ext.Panel({ fullscreen: Ext.is.iPhone, items:[ new Ext.Button({ text: 'Hello World' }) ] }); } });
Ext.setup({ onReady: function(){ new Ext.Panel({ fullscreen: true, items: [ {text: "Hello World!", xtype: "button" }, {text: "How are You?", xtype: "button" } ] }); } });
Thursday, March 10, 2011
![Page 34: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/34.jpg)
Selecting Platform
34
Ext.setup({ onReady: function(){ new Ext.Panel({ fullscreen: Ext.is.iPhone, items:{text: "Hello World!", xtype: "button" } }); new Ext.Panel({ fullscreen: Ext.is.Android, items:{text: "Android Rocks!", xtype: "button" } }); } });
Thursday, March 10, 2011
can also use Ext.is.iOS, Ext.is.iPad, Ext.is.iPod
![Page 35: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/35.jpg)
Startup images
35
Ext.setup({ tabletStartupScreen: 'resources/img/tablet_startup.png', phoneStartupScreen: 'resources/img/phone_startup.png', icon: 'resources/img/icon.png', glossOnIcon: false,
onReady: function(){ new Ext.Panel({ fullscreen: true, items: {text: "Hello World!", xtype: "button" }, }); } });
Thursday, March 10, 2011
also tabletIcon and phoneIcon
![Page 36: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/36.jpg)
Some Button Options
36
function react(button, event) { alert("you clicked");}
var hello = new Ext.Button({ text: "Hi There!", badgeText: "3", handler: react});
Ext.setup({ onReady: function(){ new Ext.Panel({ fullscreen: Ext.is.iPhone, items:[hello] }); }});
Thursday, March 10, 2011
![Page 37: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/37.jpg)
Configuration verses Methods
37
var hello = new Ext.Button({ text: "Hi There!", badgeText: "3"});
var hello = new Ext.Button(); hello.text = "Hi There!";hello.setBadge("2");
Thursday, March 10, 2011
![Page 38: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/38.jpg)
Layout
38
Ext.setup({ onReady: function() { new Ext.Panel ({ fullscreen: true, layout: { type: 'hbox', pack: 'center', align: 'center' }, defaults: {xtype: 'button'}, items: [ {text: "Apple", flex: "3" }, {text: "BeOS", flex: "2" }, {text: "Css", flex: "2" } ] }) }});
Thursday, March 10, 2011
![Page 39: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/39.jpg)
Vbox & hbox
39
Ext.setup({ onReady: function() { new Ext.Panel ({ fullscreen: true, layout: { type: 'vbox', pack: 'center', align: 'center' }, defaults: {xtype: 'button'}, items: [ {text: "Apple", flex: "3" }, {text: "BeOS", flex: "2" }, {text: "Css", flex: "2" } ] }) }});
Thursday, March 10, 2011
![Page 40: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/40.jpg)
Carousel
40
Ext.setup({ onReady: function() { var carousel1 = new Ext.Carousel({ defaults: {cls: 'card'}, items: [{html: '<h1>Carousel</h1><p>Card 1</p>'}, {title: 'Tab 2', html: 'Card 2'}, {title: 'Tab 3', html: 'Card 3'}] }); new Ext.Panel({ fullscreen: true, layout: { type: 'vbox', align: 'stretch' }, defaults: { flex: 1}, items: [carousel1] }); }});
Thursday, March 10, 2011
Sencha Touch carousel example
![Page 41: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/41.jpg)
Styles used in Carousel
41
<style> body { background-color: #376daa; } .card { text-align: center; color: #204167; text-shadow: #3F80CA 0 1px 0; font-size: 72px; padding: 80px 40px; } .card p { font-size: 24px; line-height: 30px; } .x-phone .card p { font-size: 16px; line-height: 18px; } </style>
Thursday, March 10, 2011
![Page 42: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/42.jpg)
Tabs
42
Ext.setup({ onReady: function() { new Ext.TabPanel({ fullscreen: true, type: 'dark', sortable: true, items: [{ title: 'Tab 1', html: '1', cls: 'card1' }, { title: 'Tab 2', html: '2', cls: 'card2' }, { title: 'Tab 3', html: '3', cls: 'card3' }] }); }});
Thursday, March 10, 2011
Sencha Touch tab example
![Page 43: CS 696 Emerging Web and Mobile Technologies Spring Semester, 2011](https://reader036.vdocuments.net/reader036/viewer/2022071601/613d4449736caf36b75b4c86/html5/thumbnails/43.jpg)
Tab Example CSS
43
.card1, .card2, .card3 { background-color: #376daa; text-align: center; color: #204167; text-shadow: #3F80CA 0 1px 0; font-size: 72px; padding-top: 100px; }
Thursday, March 10, 2011