Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app
•
0 gefällt mir•610 views
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (8)
Ähnlich wie Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app
Ähnlich wie Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app (20)
Mehr von Codecamp Romania
Mehr von Codecamp Romania (20)
Georges Chitiga - Introduction to Phonegap - HTML5 & JS to native mobile app
- 1. { Native mobile apps with HTML, CSS & JavaScript Georges Chitiga – CEO, CTO at VoDoo Solutions http://vodoosolutions.com
- 2. Build your app with: Actually, almost everything that works with:
- 3. What is PhoneGAP ?
- 4. One code, deploy to all JavaScript is cooler everyday - iPhone 3GS+ - Android Better then web apps - Blackberry 5+ - WebOS - Windows Phone 7 - W8 Coming Soon - Symbian - Bada What is PhoneGAP ?
- 5. One code, deploy to all JavaScript is cooler everyday - iPhone 3GS+ - Android Better then web apps Every day new - Blackberry 5+ frameworks, new - WebOS - Windows Phone 7 cool techniques and - W8 Coming Soon new technologies - Symbian rise. - Bada What is PhoneGAP ?
- 6. One code, deploy to all JavaScript is cooler everyday - iPhone 3GS+ - Android Better then web apps Every day new - Blackberry 5+ frameworks, new - WebOS - Windows Phone 7 cool techniques and PhoneGAP allows you to access the device - W8 Coming Soon new technologies SDK API - Symbian rise. - Bada What is PhoneGAP ?
- 7. Code Upload Build Run Did you understand ?
- 8. PhoneGAP API
- 9. <!DOCTYPE html> <html> <head> <title>Application Title</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> PhoneGAP API
- 10. <script type="text/javascript" charset="utf-8"> var pictureSource; // picture source var destinationType; // sets the format of returned value // Wait for PhoneGap to connect with the device document.addEventListener(“deviceReady",onDeviceReady,false); // PhoneGap is ready to be used function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } PhoneGAP API
- 11. function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); } //HTML <button onclick="capturePhoto();">Capture Photo</button> PhoneGAP API
- 12. function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); } PhoneGAP API
- 13. function onPhotoDataSuccess(imageData) { var smallImage = document.getElementById('smallImage'); smallImage.style.display = 'block'; smallImage.src = "data:image/jpeg;base64," + imageData; } //HTML <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> PhoneGAP API
- 14. Navigator.camera.getPicture Camera Options quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100 PhoneGAP API
- 16. DEMO TIME
- 17. QA
- 18. Diamond Sponsors Platinum Sponsors Gold Sponsors Training Partners Media Partners Other Partners