uniface lectures webinar - extending applications for mobile
TRANSCRIPT
![Page 1: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/1.jpg)
![Page 2: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/2.jpg)
Uniface Responsive
Development (4)
– Mobile Extensions
David Akerman – Solution Consultant
![Page 3: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/3.jpg)
Agenda
Development Approaches for Mobile
Using Native Mobile Features
Demo & Code Walkthrough
![Page 4: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/4.jpg)
Development
Approaches
![Page 5: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/5.jpg)
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
![Page 6: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/6.jpg)
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.
![Page 7: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/7.jpg)
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
![Page 8: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/8.jpg)
Using Native
Mobile Features
![Page 9: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/9.jpg)
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
![Page 10: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/10.jpg)
Apache Cordova Plugins
Contactsnavigator.contacts.pickContact(onSuccess, onError);
Geolocationnavigator.geolocation.getCurrentPosition(onSuccess, onError);
Cameranavigator.camera.getPicture(onSuccess, onError);
Barcode, Cache, Globalization, Keyboard, Printer,
Screen Orientation, SQL Plugin 2, Status Bar, Toast
Message, Uniface System Info + Custom Plugins
![Page 11: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/11.jpg)
Device Detection JavaScript Example
Login formalert(app.ui.getPlatform()); //return 'browser', 'Android', etc.
ui.jsapp.ui = {
getPlatform: function() {
if (typeof device !== 'undefined') {
return device.platform;
} else {
return 'browser';
},
…
}
![Page 12: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/12.jpg)
Walkthrough:
WebStart App
Code: github.com/uniface/webstart
![Page 13: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/13.jpg)
Walkthrough:
uclaim demo
Code: github.com/uniface/mobile
![Page 14: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/14.jpg)
ResourcesUniface 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
![Page 15: Uniface Lectures Webinar - Extending Applications for Mobile](https://reader030.vdocument.in/reader030/viewer/2022021500/5a6697c27f8b9ac5128b58bd/html5/thumbnails/15.jpg)
Video recording of this & previous webinars:
go.uniface.com/lectures-page