Embed Size (px)
DESCRIPTION
If we change inside and disarm ourselves by dealing constructively with negative thoughts and emotions, we can literally change the world.
Citation preview
Creación de Aplicaciones Móvilescon Ruby on Rails
Jürgen Feßlmeier@chinshr
Lo que el cliente quería
+ ? =
¿Lo que acabamos usando?
jqTouch• JavaScript biblioteca
basado en jQuery• HTML5/CSS3• Controls emulados• WebKit Browsers• Mobile Safari, Chrome
Android• Open Source
PhoneGap• Sirve como container de
la aplicación Web• Framework para crear
aplicaciones nativas con tecnologías Web
• iPhone, Android, Palm, Symbian, Blackberry
Así empezamos
config/initializers/mime_types.rb...Mime::Type.register_alias "text/html", :jqtouch...
Detectar user agent
app/controllers/application_controller.rbclass ApplicationController < ActionController::Base before_filter :adjust_request_format_for_mobile_device
layout "application"
def index format.jqtouch {} end protected def adjust_request_format_for_mobile_device request.format = :jqtouch \ if request.user_agent =~ /iphone|ipod|ipad/i end
end
Layoutapp/views/layout/application.jqtouch.erb<!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, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>jQTouch App</title> <script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ icon: 'appicon.png', addGlossToIcon: true, startupScreen: 'appsplash.png', statusBar: 'default', ... }); </script> <style type="text/css" media="screen"> /* Custom Style */ </style> </head> <body> <div id="jqt"> <%= yield %> </div> </body></html>
Pagina principalapp/views/application_controller/index.jqtouch.erb<!-- home --><div id="home" class="current" style="top: 0px; "> <div class="toolbar"><a class="button logout" href="http://127.0.0.1:3000/m/session/destroy">Logout</a> <div class="logo"></div> </div> <div class="vertical-scroll"><div style="-webkit-transform: translate3d(0px, 0px, 0px); -webkit-transition-duration: 0ms; -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1); "> <div class="startscreen"> <div class="image"> <h1>Banking mit Freunden!</h1> <i class="bubble1">„Endlich ehrliche Geldtipps und <br>Ratschläge von anderen Usern“</i> <i class="bubble2">„Die erste Bank die mir für meine<br>online Aktivitäten Geld gibt“</i> </div> </div> <ul class="main"> <li class="quest"> <a href="http://127.0.0.1:3000/m/community" class="required">Community</a> </li> <li class="euro_arrow"> <a href="http://127.0.0.1:3000/m/banking/transactions" class="required">Transaktionen</a> </li> <li class="euro"> <a href="http://127.0.0.1:3000/m/banking/my_money" class="required">Mein Geld</a> </li> </ul> <ul class="reco"> <li><a href="">Information</a></li> </ul> <p class="info"> Gemeinsam mehr Geld. </p> </div></div></div>
<form id=”question” action="/question/create"> <div class="toolbar"> <h1>Geldfrage</h1> <a class="back">Back</a> <a class="button" href="/session/destroy">Logout</a> </div>
<ul class="rounded"> <li><textarea placeholder="Question" name="smart_question[question]"></textarea></li> <li>Anonym<span class="toggle"><input type="checkbox" name="smart_question[anonymous]"/></span></li> </ul> <a class="whiteButton submit">Send</a> </form>
<div id="foo"> ...</div>
Controller Simple
app/controllers/questions_controller.rbclass QuestionsController < ApplicationController def new format.jqtouch {} end
def create ... end
end
Formulario simpleapp/views/questions/new.jqtouch.erb
<form id=”question” action="/question/create"> <div class="toolbar"> <h1>Geldfrage</h1> <a class="back">Back</a> <a class="button" href="/session/destroy">Logout</a> </div>
<ul class="rounded"> <li><textarea placeholder="Question" name="smart_question[question]"></textarea></li> <li>Anonym<span class="toggle"><input type="checkbox" name="smart_question[anonymous]"/></span></li> </ul> <a class="whiteButton submit">Send</a> </form>
¿Como hacer render?
app/controllers/questions_controller.rbclass QuestionsController < ApplicationController def new format.jqtouch {} end
def create @question = Question.new params[:question] if @question.save render :action => "show", :layout => false else render :action => "new", :layout => false end end
end
¿Como hacer redirect?
app/controllers/questions_controller.rbclass QuestionsController < ApplicationController def create ... # redirect_to no funciona...entonces render_json_response :redirect, :to => "/sessions/new" ... end
protected
def render_json_response(type, options={}) ... endend
No hay, entonces redirect con JSON
app/controllers/questions_controller.rbclass QuestionsController < ApplicationController def create ... end
protected
def render_json_response(type, options={}) default_json_structure = {:status => type, :html => nil, :js => nil, :message => nil, :to => nil, :user_id => nil}.merge(options) render_options = {:json => default_json_structure} render_options[:status] = 400 if type == :error render(render_options) endend
El cliente recibe JSON
{status:"redirect",to:"/sessions/new#login"}
{status:"error",message:"Try again!"}
{status:"ok",js:"alert('Success!');"}
{status:"error",html:"<div id="foo">..."}
El cliente recibe JSONpublic/jqtouch/mobile.jsvar app = { json:function($form) { $.ajax({ type:$form.attr("method"), url:$form.attr("action"), dataType:"json", data:$form.serialize(), complete:function (XMLHttpRequest, textStatus) { var jsonResponse = window.eval("(" + XMLHttpRequest.responseText + ")"); if (jsonResponse.status == "error") { alert(jsonResponse.message); } elsif (jsonResponse.status == "redirect") { // insert page } } }); return false; }, ...}
var jsonFn = function(e) { var $form = $(this).closest("form"); return app.json($form);};$("form.json a.send").live("tap", jsonFn);$("form.json").live("submit", jsonFn);
PhoneGap
• Download http://www.phonegap.com/• XCode http://developer.apple.com/• Build PhoneGap plugin y agregar a Xcode• Archivos estaticos van a
Xcode IDE
Demo
