intro to jquery mobile
DESCRIPTION
Introduction to JQuery Mobile. Find source code for demo at https://github.com/jqquick223/Magic-Q-Ball .TRANSCRIPT
INTRODUCTION TO JQUERY MOBILE
JAMES QUICK
@JQUICKWIT
MEETUP: HTTP://BIT.LY/MFLWAD (MIAMI FT LAUDERDALE WINDOWS APP DEVELOPERS)
BLOG: HTTP://WWW.BLOGS.MSDN.COM/QUICK_THOUGHTS
AGENDA
• 12:30-1:00 INTRODUCTION TO MOBILE APPLICATION DEVELOPMENT
• 1:00-1:30 INTRO TO JQUERY MOBILE
• 1:30-2:30 DEMOS AND HANDS ON
• 2:30-3:00 Q AND A
• 3:00-7:00 OFFICE HOURS
EXPECTATIONS
• NEED
• BROWSER AND TEXT EDITOR
• EXPERIENCE
• BASIC HTML/CSS/JAVASCRIPT ENCOURAGED
• NO EXPERIENCE REQUIRED
• BUILD YOUR OWN JQUERY MOBILE WEB APP BY THE END
WHY MOBILE?
MOBILE PLATFORMS
• ANDROID
• IOS
• WINDOWS 8 AND WINDOWS PHONE
• BLACKBERRY
WINDOWS DEVELOPER ACCOUNT
• $20 DOLLARS PER YEAR (WINDOWS 8 AND WINDOWS PHONE)
• HTTPS://DEV.WINDOWS.COM/
• BIZSPARK…GET SIGNED UP TODAY TO PUBLISH!
• FREE DEVELOPER ACCOUNT
• $150 PER/MONTH TO USE IN AZURE
BIZSPARKSOFTWARE • 3 YEARS FREE SOFTWARE/DEVELOPMENT TOOLS
• WINDOWS AZURE CREDITS $200 FIRST MONTH/$150 THEREAFTER
SUPPORT• PROFESSIONAL TECHNICAL AND PRODUCT SUPPORT
• UNIQUE OFFERS FROM NETWORK PARTNERS
VISIBILITY• PROFILE, OFFERS AND EVENTS
• CONNECTION TO THE ECOSYSTEM
• OPPORTUNITIES FOR SHOWCASE, VISIBILITY (EVENTS, SOCIAL MEDIA)
Is your startup:• Developing Software?• Privately held?• Less than 5 years old?• Making less than US $1M in annual revenue?
http://aka.ms/BizSparkNow
HOW TO MARKET?
• BUILD A WEBSITE IN AZURE…FOR FREE!
• BLOGS
• SOCIAL MEDIA
• FACEBOOK, TWITTER, LINKEDIN
• HIGHLIGHTED ARTICLES
• EX. WMPOWERUSER
• COLLECT FEEDBACK
MONETIZATION
• FLAPPY BIRDS
• ADVERTISING
• CANDY CRUSH
• IN APP PURCHASING…PAY MORE MONEY TO KEEP PLAYING, BUY POWERUPS, ETC.
• CUT THE ROPE/ANGRY BIRDS
• SELL YOUR APP ($1,$2, ETC.)
LEAN STARTUP
• LEAN
• GET RID OF THE FAT
• OPTIMIZE YOUR TIME
• EVERYTHING SHOULD BE CUSTOMER CENTRIC
• STARTUP
• NOT NECESSARILY TECH
• UNCERTAINTY…GROWTH…OPPORTUNITY
LEAN STARTUP
• “IDENTIFY THE RISKIEST PARTS OF YOUR BUSINESS PLAN, THEN FIND WAYS TO REDUCE THOSE RISKS IN A
QUICK, ITERATIVE CYCLE OF LEARNING”
“
”
DON’T SELL WHAT YOU CAN MAKE…MAKE WHAT YOU CAN
SELL
JQUERY MOBILE
WHAT IS IT?
• HTML5-BASED USER INTERFACE FRAMEWORK FOR RESPONSIVE WEB SITES AND APPS
• ACCESSIBLE ON ALL DEVICES (PHONES, TABLETS, ETC.)
• BUILT ON JQUERY
• OFFERS AJAX NAVIGATION (TRANSITIONS, TOUCH EVENTS, WIDGETS)
• TOUCH OPTIMIZED
WHY USE IT?
• WRITE LESS/DO MORE
• WRITE ONCE HIT ALL MAJOR PLATFORMS
• THEMES FOR MOBILE FEEL
• RESPONSIVE
• ADAPTS TO DIFFERENT SCREEN SIZES
HOW TO GET STARTED
• LINK TO JQUERY MOBILE LIBRARY
• CONTENT DELIVERY NETWORK (PREFERRED) OR ON LOCAL COMPUTER
• 3 REFERENCES
• JQUERY MOBILE CSS
• JQUERY
• JQUERY MOBILE JAVASCRIPT
FOLLOW ALONGHTTP://WWW.W3SCHOOLS.COM/JQUERYMOBILE
<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script></head>
ADD YOUR REFERENCE
PAGE
• EACH PAGE HAS 3 PARTS
• HEADER, CONTENT, AND FOOTER
• DEFINE THESE WITH DATA-ROLE=“”
• EX. DATA-ROLE=“HEADER”
BASIC SINGLE PAGE TEMPLATE
<DIV DATA-ROLE="PAGE"> <DIV DATA-ROLE="HEADER"> <H1>WELCOME TO MY HOMEPAGE</H1> </DIV>
<DIV DATA-ROLE="MAIN" CLASS="UI-CONTENT"> <P>I AM NOW A MOBILE DEVELOPER!!</P> </DIV>
<DIV DATA-ROLE="FOOTER"> <H1>FOOTER TEXT</H1> </DIV></DIV>
ADDING PAGES
• SIMPLE ADD ANOTHER DATA-ROLE=“PAGE”
• EACH PAGE WILL HAVE ITS HEADER, CONTENT, AND FOOTER
• HAVE MULTIPLE PAGES IN ONE FILE
• FASTER LOADING OF THESE PAGES
• CAN HAVE DIALOG POPUPS AS PAGES
• DATA-DIALOG=“TRUE”
• NAVIGATION HREF=“#PAGENAME”
TRANSITIONS
• TYPES OF TRANSITIONS
• FADE, FLIP, FLOW, POP, SLIDE, SLIDEUP, SLIDEDOWN, TURN, NONE
• ADD DATA-TRANSITION ATTRIBUTE TO LINK
• <A HREF=“#PAGENAME DATA-TRANSITION=“SLIDE”>SLIDE TO PAGE TWO</A>
ADDING A BACK BUTTON
• ADD A LEFT ARROW ICON
• SET THE DATA-REL PROPERTY TO BACK
• DATA-REL=“BACK”
• AUTOMATICALLY TAKES CARE OF THE NAVIGATION FOR YOU
BUTTONS
• 3 DIFFERENT WAYS TO CREATE BUTTONS
• <INPUT TYPE="BUTTON" VALUE="BUTTON">
• <BUTTON CLASS="UI-BTN">BUTTON</BUTTON> (FORM SUBMISSIONS)
• <A HREF="#" CLASS="UI-BTN">BUTTON</A> (PAGE NAVIGATIONS)
NAVBAR
• GROUP OF LINKS ALIGNED HORIZONTALLY
• CREATE A DIV WITH NAVBAR AS DATA ROLE <DIV DATA-ROLE=“NAVBAR”>
• INSIDE OF THAT DIV ADD AN UNORDERED LIST (UL)
• ADD LIST ITEMS TO THE UNORDERED LIST
• ICONS
• EX. DATA-ICON=“SEARCH”
THEMES
• SET THE DATA-THEME ATTRIBUTE
• VALUE A
• BLACK TEXT ON A LIGHT GRAY BACKGROUND FOR PAGE CONTENT
• VALUE B
• WHITE TEXT ON A DARK GREY BACKGROUND FOR PAGE CONTENT
• CREATE CUSTOM THEME USING THEMEROLLER
• THEMEROLLER.JQUERYMOBILE.COM
HANDS ON EXAMPLE
• WHAT ARE WE GOING TO BUILD?
• MAGIC 8 BALL WEB APP
• FEATURES
• 2 PAGES
• HOME- CLICK BUTTON TO GET A RESPONSE FROM THE MAGIC 8 BALL
• ABOUT- LINKS TO SOCIAL MEDIA, BLOG, ETC.
WHAT WILL WE BE USING
• NAVBAR
• BUTTONS
• HEADERS, CONTENT, AND FOOTERS
• THEMES
GETTING STARTED
• USE STANDARD JQUERY MOBILE PAGE FROM JQUERY MOBILE OR W3 SCHOOLS
• COPY AND PASTE INTO A TEXT EDITOR
• I SUGGEST NOTEPAD++, SUBLIME TEXT 2, ETC.
STEP 1- PAGE NAVIGATION
• ADD A SECOND PAGE WITH ID=“ABOUT”
• ADD A BACK BUTTON TO ITS HEADER
• ADD A BUTTON TO HEADER OF HOMEPAGE
• HREF=“#ABOUT”
PAGE NAVIGATION CONT.
STEP 2- ADDING CONTENT
• ADD TITLE TO YOUR HEADER
• ADD A TEXT TO YOUR CONTENT “ASK THE MAGIC 8 BALL”
• ADD ANOTHER <P> TO YOUR CONTENT (YOU CAN LEAVE IT BLANK FOR NOW)
• SET ID TO RESPONSE
• ADD A BUTTON TO YOUR FOOTER
ADDING CONTENT
STEP 3 FUNCTIONALITY WITH JS
• SET THE ONCLICK PROPERTY OF YOUR BUTTON
• <BUTTON ONCLICK=“GETRESPONSE()”>ASK THE MAGIC Q BALL</BUTTON>
• GETRESPONSE() WILL BE THE JS METHOD THAT IS TRIGGERED
• SETS THE TEXT FOR #RESPONSE TO RANDOM EXPRESSION
• ADD A FILE CALLED SCRIPT.JS
• ADD REFERENCE IN HEAD
• <SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="SCRIPTS.JS"></SCRIPT>
FUNCTIONALITY WITH JS
• CREATE ARRAY OF STRING RESPONSES
• ADD YOUR GET RESPONSE METHOD
STEP 4- FINISH ABOUT PAGE
• ADD NAVBAR IN FOOTER
• SOCIAL MEDIA LINKS, BLOG, WEBSITE, ETC.
• ADD ABOUT PAGE TEXT
• EX “THIS IS MY AWESOME FIRST APP”
PHONE GAP
• SET OF ABSTRACTED APIS
• GET ACCESS TO HARDWARE SPECIFIC FEATURES
• CAMERA, ACCELEROMETER, COMPASS, CONTACTS, ETC.
• FREE!
• COMMAND LINE INTERFACE
INTEL XDK
• IDE BUILT ON PHONE GAP
• RUN EMULATORS
• WRITE CODE
• PACKAGE WEB APP FOR DIFFERENT PLATFORMS
• LET’S TAKE A LOOK!
SUBMITTING YOUR APP
• WINDOWS 8 - HTTP://BIT.LY/SUBMITW8
• WINDOWS PHONE- HTTP://BIT.LY/SUBMITWP
RESOURCES
• W3 SCHOOLS JQUERY MOBILE- HTTP://WWW.W3SCHOOLS.COM/JQUERYMOBILE/
• JQUERY MOBILE- HTTP://JQUERYMOBILE.COM/
• PHONE GAP- HTTP://PHONEGAP.COM/
• INTEL XDK- HTTP://XDK-SOFTWARE.INTEL.COM/
• DVLUP (NOKIA REWARDS) - HTTP://WWW.DVLUP.COM/
• WINDOWS DEVELOPER ACCOUNT- HTTPS://DEV.WINDOWS.COM
• SOURCE CODE- HTTPS://GITHUB.COM/JQQUICK223/MAGIC-Q-BALL