Tweet
Tweet

Slide 1

Slide 1 text

jQuery Mobile Design “native” mobile apps Sunday, October 9, 2011

Slide 2

Slide 2 text

jQuery Mobile A Mobile UI framework Implements native looking UI components Sunday, October 9, 2011

Slide 3

Slide 3 text

Real World jQM http://c.dric.be/ http://m.anticocasalediscansano.it/en/ Sunday, October 9, 2011

Slide 4

Slide 4 text

Real World jQM http://c.dric.be/ http://m.anticocasalediscansano.it/en/ Gallery: http://www.jqmgallery.com/ Sunday, October 9, 2011

Slide 5

Slide 5 text

jQuery Mobile Dark Side Almost Final Dependent on jQuery Size: ~130k (before jQuery) jQM way or the highway Sunday, October 9, 2011

Slide 6

Slide 6 text

jQuery Mobile Bright Side Page layout UI Controls jQM API Theming Sunday, October 9, 2011

Slide 7

Slide 7 text

Page Layout Sunday, October 9, 2011

Slide 8

Slide 8 text

Page Layout a page is just a div with data-role=”page” a jQM page has: header content footer Sunday, October 9, 2011

Slide 9

Slide 9 text

Page Example
...
!
...
!
...
Sunday, October 9, 2011

Slide 10

Slide 10 text

Hello jQM Demo Sunday, October 9, 2011

Slide 11

Slide 11 text

Multi Page Layout Multiple pages can be specified in the same .html file Each page is identified with an id attribute Navigation is performed using a tags Back button is generated for pages that have data-add-back-btn=”true” Sunday, October 9, 2011

Slide 12

Slide 12 text

Multi Page Demo Sunday, October 9, 2011

Slide 13

Slide 13 text

Using transitions Transitions are determined via the data-transition attribute

About this app

Sunday, October 9, 2011

Slide 14

Slide 14 text

Page Transitions Effect Name Description slide slide right-to-left. This is the default slideup slide from bottom-to-top slidedown slide from top-to-bottom pop expand the new page (dialog pop-up style) fade fade the new page in flip flip pages (like cards). Sunday, October 9, 2011

Slide 15

Slide 15 text

Exercise Write a mobile website with four pages. First page: text and link. Second page: back button and an image. Third and fourth pages: simple texts Create transition effects using: slide, pop, fade, flip Sunday, October 9, 2011

Slide 16

Slide 16 text

jQuery Mobile Page layout UI Controls jQM API Theming Sunday, October 9, 2011

Slide 17

Slide 17 text

jQM UI Controls jQM provides ready-made UI controls for our app that “look” native. This rich library includes: Toolbars Buttons Forms & Lists Sunday, October 9, 2011

Slide 18

Slide 18 text

Toolbars A header with data-position=”fixed” Implements fixed position using JavaScript Sunday, October 9, 2011

Slide 19

Slide 19 text

Toolbars We can add buttons to toolbars simply by writing them in the bar header bar can have 2 buttons Use inside header: Add Sunday, October 9, 2011

Slide 20

Slide 20 text

Toolbars Careful not to put too many buttons - looks bad Sunday, October 9, 2011

Slide 21

Slide 21 text

Toolbars Footer can have as many buttons as you wish Add class=”ui-bar” to get padding Demo Sunday, October 9, 2011

Slide 22

Slide 22 text

Toolbars Again, don’t put too many buttons or it’ll look bad Sunday, October 9, 2011

Slide 23

Slide 23 text

Toolbar Exercise Implement a mockup for a mail reader application Top toolbar button: Logout bottom toolbar buttons: Compose, delete, forward, reply. Sunday, October 9, 2011

Slide 24

Slide 24 text

Buttons An anchor tag with data-role=”button” will look like a button Any normal form button will automatically be converted Sunday, October 9, 2011

Slide 25

Slide 25 text

Button Icons data-icon attribute allows using icons on a button Sunday, October 9, 2011

Slide 26

Slide 26 text

Button Icons arrow-l arrow-r arrow-u arrow-d delete plus minus check gear refresh forward back grid star alert info home search Sunday, October 9, 2011

Slide 27

Slide 27 text

Icon Positions data-iconpos determines the icon position possible values: right, top, bottom, notext Sunday, October 9, 2011

Slide 28

Slide 28 text

Inline Buttons Dialog buttons are usually placed side-by- side This is called inline, and achieved via data-inline=”true” Sunday, October 9, 2011

Slide 29

Slide 29 text

Buttons Demo Sunday, October 9, 2011

Slide 30

Slide 30 text

Button Exercise Implement a jQM app with three buttons titled: red, blue and green App background color should change when a user presses a button Bonus: use gradients as background Sunday, October 9, 2011

Slide 31

Slide 31 text

Basic List
    !
  • Acura
    • !
  • Audi
    • !
  • BMW
Sunday, October 9, 2011

Slide 32

Slide 32 text

Numbered List
    !
  1. Acura
    2. !
  2. Audi
    3. !
  3. BMW
Sunday, October 9, 2011

Slide 33

Slide 33 text

Count Bubble List Wrap the number in an element with ui-li-count to get the “count bubble”
  • Inbox 12
    • Sunday, October 9, 2011

    Slide 34

    Slide 34 text

    Thumbnail Lists Insert an img tag as the first child in the anchor to get a thumbnail Image is automatically scaled by jQM Sunday, October 9, 2011

    Slide 35

    Slide 35 text

    Split List Having two links in the same item creates a split list Sunday, October 9, 2011

    Slide 36

    Slide 36 text

    Inset Lists A list that is embedded in a page is called inset use data-inset=”true” to get the effect Sunday, October 9, 2011

    Slide 37

    Slide 37 text

    Exercise Implement the following home screen Sunday, October 9, 2011

    Slide 38

    Slide 38 text

    Navigation Bars Navigation elements at the top or bottom of the page Sometimes referred as “tab bars”
    !
    ! !
      ! ! !
    • One
      • ! ! !
    • Two
      • ! !
    !
    Sunday, October 9, 2011

    Slide 39

    Slide 39 text

    Top Nav Bar Put the above code in the header to get top nav bars They are recommended for mobile apps running inside the browser Sunday, October 9, 2011

    Slide 40

    Slide 40 text

    Bottom Nav Bar Put the above code in the footer to get bottom nav bar Recommended in standalone apps Sunday, October 9, 2011

    Slide 41

    Slide 41 text

    Tab Bars (ala iPhone) Use data-icon to get icons in the nav bars above the text Custom icons are also allowed Free iOS Style Icons: http://glyphish.com/ Sunday, October 9, 2011

    Slide 42

    Slide 42 text

    Icon Grids divs can be lines up in columns (or grid)
    Sunday, October 9, 2011

    Slide 43

    Slide 43 text

    Exercise Implement the following App is 2 tabs: Home and Image Gallery Home includes text info on eating vegetables Gallery has photos of vegetables (use google images) Solution at: http://apps.ynonperek.com/mobileweb/jqm/vegapp/ Sunday, October 9, 2011

    Slide 44

    Slide 44 text

    Forms Mobile optimized controls Sunday, October 9, 2011

    Slide 45

    Slide 45 text

    Mobile Optimized Forms jQuery mobile provides a complete set of finger friendly form elements Most form elements are automatically initialized by jQM Prevent auto initialization with data-role=”none” Sunday, October 9, 2011

    Slide 46

    Slide 46 text

    jQuery vs. Normal Wrap a labe/input pair in a div with data-role=”fieldcontain” to get the cool thin line Sunday, October 9, 2011

    Slide 47

    Slide 47 text

    Refresh Form controls can be set programmatically Must call “refresh” to refresh the ui Use $(‘#fld-radio’).checkboxradio(“refresh”); Sunday, October 9, 2011

    Slide 48

    Slide 48 text

    Form Elements Text Inputs Sliders Buttons Select Menu Submitting Forms Sunday, October 9, 2011

    Slide 49

    Slide 49 text

    Text Inputs Available input types: text, password, number, email, url, tel, search textarea provides multi-line text triggers ‘create’ event on creation Sunday, October 9, 2011

    Slide 50

    Slide 50 text

    Slider input type=”range” creates a slider attributes: value, min, max refresh with .slider(‘refresh’); Sunday, October 9, 2011

    Slide 51

    Slide 51 text

    Buttons - Flip Switch
    ! Select slider: ! ! ! Off ! ! On !
    Sunday, October 9, 2011

    Slide 52

    Slide 52 text

    Buttons - Radio
    ! Choose a pet: ! ! Cat ! ! Dog ! ! Hamster ! ! Lizard
    Sunday, October 9, 2011

    Slide 53

    Slide 53 text

    Buttons - Radio Add data-type=”horizontal” to fieldset to get the horizontal radio buttons Refresh with .checkboxradio(‘refresh’); Sunday, October 9, 2011

    Slide 54

    Slide 54 text

    CheckBoxes Sunday, October 9, 2011

    Slide 55

    Slide 55 text

    CheckBoxes
    Choose as many snacks as you like Cheetos Doritos Fritos Sun Chips
    Sunday, October 9, 2011

    Slide 56

    Slide 56 text

    CheckBoxes Use data-role=”horizontal” for horizontal checkboxes Remember the outer div with data- role=”fieldcontain” so jQM can outline the field CheckBoxes & Radio Buttons both use a legend for the question text Sunday, October 9, 2011

    Slide 57

    Slide 57 text

    Submitting Forms AJAX is used to submit the forms No Ajax forms are created with data-ajax=false Sunday, October 9, 2011

    Slide 58

    Slide 58 text

    Q & A - Forms Sunday, October 9, 2011

    Slide 59

    Slide 59 text

    Forms Exercise Implement a 2 page registration from using jQM with the following fields: Page 1 Page 2 username (text) gender (m/f) password (pass) favorite colors (red, blue or green) can have more than one phone number comments (text area) email Sunday, October 9, 2011

    Slide 60

    Slide 60 text

    jQuery Mobile Page layout UI Controls jQM API Theming Sunday, October 9, 2011

    Slide 61

    Slide 61 text

    jQM API Default configurations jQM Events Methods & Utilities Sunday, October 9, 2011

    Slide 62

    Slide 62 text

    The mobileinit Event bind to mobileinit event Note: this event triggers immediately upon loading jqm $(document).bind("mobileinit", function(){ //apply overrides here }); Sunday, October 9, 2011

    Slide 63

    Slide 63 text

    The mobileinit Event Overriding defaults is simply changing object attributes Full list of configurable options at: http://jquerymobile.com/demos/1.0b2/docs/api/ globalconfig.htmlglobalconfig.html $(document).bind("mobileinit", function(){ $.mobile.defaultPageTransition = ‘slide’; }); Sunday, October 9, 2011

    Slide 64

    Slide 64 text

    jQM Events tap taphold swipe swipeleft swiperight orientationchange scrollstart scrollstop pageshow pagehide pagecreate pageinit Sunday, October 9, 2011

    Slide 65

    Slide 65 text

    jQM Methods $.mobile.changePage(to, options) $.mobile.silentScroll Full list at: http://jquerymobile.com/demos/1.0b2/docs/api/ globalconfig.html#/demos/1.0b2/docs/api/ methods.html Sunday, October 9, 2011

    Slide 66

    Slide 66 text

    Exercise (1) Implement a jQM app that has two pages First page keeps a combo box with values: slide, flip; and a “go” button When a user clicks “go”, app moves to the second page in the selected transition style Sunday, October 9, 2011

    Slide 67

    Slide 67 text

    Exercise (2) Implement a “switching cards” display - create 3 divs and allow user to switch visible div by sliding left or right - Yahoo Style. Sunday, October 9, 2011

    Slide 68

    Slide 68 text

    jQuery Mobile Page layout UI Controls jQM API Theming Sunday, October 9, 2011

    Slide 69

    Slide 69 text

    jQM Themes The theme controls how elements look on the page Each theme has swatches for color play Default theme has 5 swatches marked a,b,c,d,e Sunday, October 9, 2011

    Slide 70

    Slide 70 text

    Default Theme Sunday, October 9, 2011

    Slide 71

    Slide 71 text

    jQM Customize Theme To customize a theme: Edit jQM css Copy a swatch definitions as a new swatch Change the swatch letter Make your changes Sunday, October 9, 2011

    Slide 72

    Slide 72 text

    Q & A Sunday, October 9, 2011

    Slide 73

    Slide 73 text

    Thank You Ynon Perek [email protected] ynonperek.com Sunday, October 9, 2011