Uniface Lectures Webinar - Extending Applications for Mobile
Download as PPTX, PDF0 likes330 views
The document discusses approaches for mobile development using Uniface, focusing on user interface considerations and responsive design for various screen sizes. It highlights the importance of feature detection and maintaining usability across different platforms, while also presenting options for application delivery methods. Additionally, resources for further learning and support are provided, including links to tutorials and demos.
Uniface Lectures Webinar - Extending Applications for Mobile
- 2. Uniface Responsive Development (4) â Mobile Extensions David Akerman â Solution Consultant
- 3. Agenda Development Approaches for Mobile Using Native Mobile Features Demo & Code Walkthrough
- 5. User Interface Considerations Screen Size (Dynamic Layout) ïUse full screen width on small devices ïTable columns - use conditional CSS or libraries to hide columns on smaller devices ïHide some detail on smaller devices or use progressive disclosure ïScrolling (Uniface Mobile Layout â data-uniface-role=âheader|content|footerâ ïFor extreme differences, consider using different user interfaces (but same Uniface code) Platform Differences ïFeature detection âą Hide, disable or replace unavailable functionality ïNative or consistent look & feel? Usability
- 6. Mobile User Interface Common UI across devices or more native look and feel? ïNative UI considerations: âą iOS doesnât have physical back button âą Global Elements (e.g. status bar and header) âą Navigation (Android drawer menu, iOS tab bar) âą Fonts âą Cards âą Buttons (Style, Case) âą Dropdown buttons = Android, not iOS âą Segmented Controls (Tabs) âą Other controls (RadioButton, CheckBox, Edit Box etc.) âą Alerts âą Icons âą Etc.
- 7. Approaches to Web & Mobile Delivery One Application with flexible front-end ïConsistent User Interface (âMobile Firstâ) âą Your choice of responsive frameworks âą Most re-use, lowest development cost ïDifferent user interfaces (e.g. Native look & feel) âą Shared Business Logic & Server-Side User Interface code âą Different Presentation Layers (using web technologies) Separate Application âą Business logic can be re-used âą Bi-directional Javascript API
- 9. Hybrid Approach UI uses standard web technologies âą No requirement to learn many technologies âą Build on one platform Access Native Mobile functionality âą JavaScript access via Cordova Developers: âą Use commonly available skills & resources âą Have access to familiar Uniface APIs âą Can use the build service and previewer apps
- 10. Apache Cordova Plugins Contacts navigator.contacts.pickContact(onSuccess, onError); Geolocation navigator.geolocation.getCurrentPosition(onSuccess, onError); Camera navigator.camera.getPicture(onSuccess, onError); Barcode, Cache, Globalization, Keyboard, Printer, Screen Orientation, SQL Plugin 2, Status Bar, Toast Message, Uniface System Info + Custom Plugins
- 11. Device Detection JavaScript Example Login form alert(app.ui.getPlatform()); //return 'browser', 'Android', etc. ui.js app.ui = { getPlatform: function() { if (typeof device !== 'undefined') { return device.platform; } else { return 'browser'; }, ⊠}
- 14. Resources Uniface Help: Tutorials unifaceinfo.com - Mobile Product Availability Matrix, Samples, forums, blogs & more go.uniface.com/lectures-page - Archive of webinar video recordings youtube.com/unifacesme - Tutorials, demos & webinar recording slideshare.net/Uniface github.com/uniface - Frameworks & tools Uniface Training & Consultancy
- 15. Video recording of this & previous webinars: go.uniface.com/lectures-page