Dan Pickett briefly introduces the BostonRB crowd to JQuery Mobile

1. JQuery Mobile

2. Hi!
www.enlightsolutions.com
on the InterWeb
dpickett
on the
Twitterz

4. OMG, That’s a lot of devices!

5. • Blackberry == Horrible Java
• Android == Tolerable Java
• IPhone == Foreign Obj-C
• Windows Mobile == Sepaku!!!

6. • Blackberry == Horrible Java
• Android == Tolerable Java
• IPhone == Foreign Obj-C
• Windows Mobile == Sepaku!!!

7. How’s about some Semantic
• Blackberry == Horrible Java
Web?
• Android == Tolerable Java
• IPhone == Completely foreign Obj-C
• Windows Mobile == Sepaku!!!

8. HTML5 Is Awesome

9. JQuery is Awesome
I
Happy Valentine’s Day

10. JQuery Mobile
Awesome^2

11. mobile-fu
app/controllers/application_controller.rb
def set_mobile
if request.format && request.format.html?
session[:mobile_view] = true
end
if session[:mobile_view] == true
request.format = :mobile
end
end

12. mobile-fu
app/controllers/application_controller.rb
def set_mobile
if request.format && request.format.html?
session[:mobile_view] = true
end
if session[:mobile_view] == true
request.format = :mobile
endhttps://github.com/brendanlim/mobile-fu
end

13. mobile-fu
config/initializers/mime_types.rb
Mime::Type.register_alias "text/html", :mobile

14. app/views/layouts/application.mobile.erb
<%= stylesheet_link_tag("jquery.mobile.min.css", "mobile_frontend")
%>
<%= csrf_meta_tag %>
<%= javascript_include_tag "jquery-1.4.4.min.js" %>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
ajaxLinksEnabled: false,
ajaxFormsEnabled: false
});
});
</script>
<%= javascript_include_tag "jquery.mobile.min.js" %>

15. app/views/layouts/application.mobile.erb
<%= stylesheet_link_tag("jquery.mobile.min.css", "mobile_frontend")
%>
<%= csrf_meta_tag %>
<%= javascript_include_tag "jquery-1.4.4.min.js" %>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
ajaxLinksEnabled: false,
ajaxFormsEnabled: false
});
});
</script>
<%= javascript_include_tag "jquery.mobile.min.js" %>
https://github.com/jquery/jquery-mobile

16. app/views/layouts/application.mobile.erb
<div data-role="page" id="page">
<div data-role="header" data-backbtn="true" id="header">
<h1>
<%= image_tag "/images/css/textaurant-logo-small.png", :alt =>
"Textaurant" %>
<%- if yield(:title).present? -%>
<%= yield(:title) %>
<%- end -%>
</h1>
<%= yield(:title_button) %>
</div>
<%= render :partial => "shared/flashes" %>
<div data-role="content">
<%= yield %>
</div>
</div>

17. app/views/restaurants/index.mobile.erb
<%= content_for :title do -%>
<h1>Restaurants</h1>
<%- end -%>
<ul data-role="listview">
<li data-role="list-divider">
Please select a restaurant
</li>
<%- @locations.each do |i| -%>
<li class="arrow">
<%= link_to i.name, new_restaurant_visit_path(i) %>
</li>
<%- end -%>
</ul>

20. JQueryMobile Is
Awesome
• Built on web standards
• Built by a talented and capable team
• It’s JQuery-based
• It’s not having to learn 5 different
frameworks and languages

21. Currently In Alpha

23. JQuery Mobile is Young
• Heavy footprint
• No final API for customization
• Limited theme extensibility

24. For App Store Love

25. For App Store Love
https://github.com/phonegap/phonegap

26. Thanks!