Rails iPhone App
•Descargar como PPT, PDF•
0 recomendaciones•395 vistas
If we change inside and disarm ourselves by dealing constructively with negative thoughts and emotions, we can literally change the world.
Recomendados
Más contenido relacionado
Similar a Rails iPhone App
Rails iPhone App
- 1. Creación de Aplicaciones Móviles con Ruby on Rails Jürgen Feßlmeier @chinshr fesslmeier @codecuisine.de
- 2. Lo que el cliente quería + ? =
- 4. Así empezamos config/initializers/mime_types.rb ... Mime::Type.register_alias "text/html" , :jqtouch ...
- 5. Detectar user agent app/controllers/application_controller.rb class 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
- 6. Layout app/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>
- 7. Pagina principal app/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>
- 8. Controller Simple app/controllers/questions_controller.rb class QuestionsController < ApplicationController def new format.jqtouch {} end def create ... end end
- 9. Formulario simple app/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>
- 10. ¿Como hacer render ? app/controllers/questions_controller.rb class 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
- 11. ¿Como hacer redirect ? app/controllers/questions_controller.rb class QuestionsController < ApplicationController def create ... # redirect_to no funciona...entonces render_json_response :redirect, :to => "/sessions/new" ... end protected def render_json_response(type, options={}) ... end end
- 12. No hay, entonces redirect con JSON app/controllers/questions_controller.rb class 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) end end
- 13. 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">..."}
- 14. El cliente recibe JSON public/jqtouch/mobile.js var 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);
- 16. Xcode IDE
- 17. Demo