Slide deck for the June 2, 2016 Embarcadero Webinar
This webinar will show you how to build mobile applications for iOS and Android using Delphi and C++Builder 10.1 Berlin. We will cover getting started, best practices for mobile UI/UX, building your first app, using FireUI Live Preview, creating custom design views and Live Previews, a real world example of creating, submitting and getting store acceptance for an iOS and Android app, working with databases, what’s new for mobile development and more.
This webinar will also give advice to Windows VCL desktop application developers who want to migrate their as much of their existing code to the iOS and Android mobile platforms
In this webinar we take a deeper dive into:
• How to get started building Mobile Apps if you are a Windows VCL desktop developer
• Building Mobile Apps using the different target platforms configurations
• Best practices and Apple/Google UI/UX guidelines for mobile applications – you’ll need to follow these to get your apps accepted.
• Creating FireUI Designer Custom IDE Views for other Mobile Devices
• FireUI Live Preview – extending the App to support custom component viewing
• Accessing Local and Remote Databases from your mobile apps
• Submitting apps to the Apple App Store, Google Play
Technical demonstrations will be presented by the team. Live Q&A will be done during and at the end of the webinar.
3. Embarcadero Technologies Copyright 2016
AGENDA
VCL desktop developers – get started building mobile apps
Using the target platforms configuration(s)
Best practices, Apple/Google UI/UX guidelines for mobile apps
Accessing Local and Remote Databases from your mobile apps
FireUI Live Preview: extending to support custom components
Mobile devices and sensors, Internet of Things
Submitting apps to the Apple App Store, Google Play
3
4. Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 4
GETTING STARTED BUILDING MOBILE APPS
David I – Chief Evangelist
5. Embarcadero Technologies Copyright 2016
GET STARTED BUILDING MOBILE APPS – NEW PROJECT
Quick Start Guide
http://docwiki.embarcadero.com/RADStudio/Berlin/en/FireMonkey_Quick_Start_Guide_-_Introduction
FireMonkey applications guide
http://docwiki.embarcadero.com/RADStudio/Berlin/en/FireMonkey_Applications_Guide
Lots of Tutorials and Samples
http://docwiki.embarcadero.com/RADStudio/Berlin/en/Mobile_Tutorials:_Mobile_Application_Development_(
iOS_and_Android)
http://docs.embarcadero.com/products/rad_studio/radstudioBerlin/Mobile_Tutorials_en.pdf
Setup and configuration videos are available on YouTube
https://www.youtube.com/user/EmbarcaderoTechNet/playlists
6. Embarcadero Technologies Copyright 2016
GET STARTED BUILDING MOBILE APPS – MIGRATING VCL APP
Manually
Create FMX project
Copy/Paste existing components/code
Differences between VCL and FMX - http://embt.co/VCLFMXDiff
AppTethering – extend your VCL apps to mobile
Data and Actions
Network and Bluetooth
TTetheringManager, TTetheringAppProfile
MidaConverter (www.midaconverter.com)
Converts VCL form to FMX form
Creates LiveBindings for database access components
Supports standard VCL components
Supports some 3rd party components
http://www.midaconverter.com/faq.html
7. Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 7
USING THE TARGET PLATFORM CONFIGURATIONS
David I – Chief Evangelist
8. Embarcadero Technologies Copyright 2016
USING THE TARGET PLATFORMS CONFIGURATION(S)
Android
Development. For development cycles.
Application Store. For the final build before submitting your app to an
application store.
iOS Device - 32 bit
Development. For development cycles.
Ad hoc. For private in-house distribution;
see https://developer.apple.com/programs/ios/enterprise/ for more
information.
iOS Device - 64 bit
Development. For development cycles.
Ad hoc. For private in-house distribution;
see https://developer.apple.com/programs/ios/enterprise/ for more
information.
Application Store. For the final build before submitting your app to the App
Store.
iOS Simulator (Delphi only)
OS X
Normal. For development cycles.
Application Store. For the final build before submitting your app to the Mac App
Store.
25
9. Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 9
BEST PRACTICES FOR BUILDING MOBILE APPS
Sarina Dupont, Senior Product Manager
10. Embarcadero Technologies Copyright 2016
• Key App Design Patterns
• Application Menu Options
• UI Styling
• Key Component Differences (Desktop/Mobile)
• Dos and Don’ts
• Custom Styling
Agenda:
11. Embarcadero Technologies Copyright 2016
• Swipe gestures
• Pinch and zoom
• Standard User Input Patterns
• Shift form on keyboard focus
• Standard Application Navigation
• Swipe between forms or navigate via buttons
• Animated transitions as the user navigates between
screens
• Don’t put too many user input controls onto one screen
• Retina optimized graphics
Build apps with design patterns users expect
12. Embarcadero Technologies Copyright 2016
Build apps with design patterns users expect
• Don’t plan to create a replica of your Desktop
app for mobile
• Build functionality based on the form factor
• Apps should be easy to use and not require
long tutorials
• Require no or simple sign-up forms
• Longer forms should be spaced across
multiple pages
• Make app registration optional
• If required prior to use, ensure users
understand what your app does at launch
Example:
13. Embarcadero Technologies Copyright 2016
Building Your App Menus
Toolbar Only Navigation
• Commonly used for single screen apps
• On Android, overflow-style popup
menus are quite common
• Can be used with tab control for
multi-screen navigation
• Consists of text or glyph buttons
Example:
14. Embarcadero Technologies Copyright 2016
Tab Bar Navigation
• Used to divide app into key focus areas
• Provides intuitive user experience
• Often used in conjunction with header or
footer toolbar
• Displayed with annotated glyphs on iOS
• Displayed with text on Android
Examples:
Building Your App Menus
15. Embarcadero Technologies Copyright 2016
App Home Screen Navigation
• Glyph Buttons arranged in a grid like layout
• Glyph Buttons can be annotated with text
• May span over multiple screens
Examples:
Building Your App Menus
16. Embarcadero Technologies Copyright 2016
Drawer Menu
• Main app menu is hidden by default
• Invoked by tapping on a menu button
or swiping left/right
• Allows you to take advantage of more screen
real estate when building your application
• Slide in drawer in portrait mode; split menu in
landscape mode
Example:
Building Your App Menus
17. Embarcadero Technologies Copyright 2016 17
• Support for 1x, 2x and 3x
images and custom icons
• StyleLookup property for
customizing each control
Native and Custom Styling
18. Embarcadero Technologies Copyright 2016
FireUI: Shared master and specific views
Visually customize forms for different platforms and form factors
FireUI multi device preview and FireUI App preview on device
FireUI Multi-Device Designer
22. Embarcadero Technologies Copyright 2016
Use TSpeedButton for Toolbar Buttons
Button Alignment
Align: Right
Margin Right: 5
Title Alignment
Align: Contents
TextSettings->HorzAlign: Center
TextSettings->VertAlign: Center
All controls parented to TToolbar must
have an alignment value set
Toolbar Buttons
24. Embarcadero Technologies Copyright 2016
• Always center the main application title on the toolbar
Component: TLabel
StyleLookup: toollabel
Align: Contents
TextSettings->HorzAlign: Center
TextSettings->VertAlign: Center
Application Title
25. Embarcadero Technologies Copyright 2016
• Don’t use it for canceling an action
• Don’t place it on the bottom toolbar
• Don’t choose an alignment other than Left
iOS & Android:
Navigational Back Button
26. Embarcadero Technologies Copyright 2016
• Only to be used for navigating to prior screen – always shown on top left corner
• Use a TSpeedButton with the ‘backtoolbutton’ StyleLookUp property
iOS Android
Navigational Back Button
27. Embarcadero Technologies Copyright 2016
• No icons selected for tabs on iOS
• Tabs aligned to bottom on Android
• More than 5 tabs on phone form factor
Tab Control
28. Embarcadero Technologies Copyright 2016
Android
• Tabs are commonly displayed at
the top of the screen
• Tabs traditionally display only text
iOS:
• Tabs are typically shown at the
bottom of the screen
• Tab items always display both text
and icons, which can be set via the
StyleLookup property
• Custom icons can also be selected
Tabs on iOS and Android
29. Embarcadero Technologies Copyright 2016
• Use 5 or less tabs for the
Phone form factor
• On Android, instead of a
‘More’ tab, the ‘Overflow’
popup/drop-down menu is
commonly used
• Alternatively, use TMultiView
for your app navigation
iOS & Android
Tab Control: Additional Navigation
30. Embarcadero Technologies Copyright 2016
• Automatically adjusts itself depending on
form factor, orientation and target platform
using behavior services
• TMultiView is a container component
which means that you can parent many
different controls to it
MultiView Smart Menu Component
31. Embarcadero Technologies Copyright 2016
• Parent TLayout control to
TToolbar
• Set TLayout.Align to
Center and parent the
buttons to the layout
• Set alignment properties
and margins for each
button
• Select all SpeedButtons
and enter a groupname
• Choose
‘segmentedbutton’ styling
Segmented Control on Toolbar
32. Embarcadero Technologies Copyright 2016
iOS & Android
• Don’t parent TSwitch to a toolbar
• Don’t place TSwitch onto a form without using a list control
Switch Control
33. Embarcadero Technologies Copyright 2016
iOS & Android
Always use a TSwitch in a list item, anchored to the top right
Use Margin Right (i.e. 5)
Android
While a checkbox can be used to turn a single option on/off on Android, a TSwitch is recommended
Switch Control
35. Embarcadero Technologies Copyright 2016
Use TListBox with the checkmark accessory
Create a segmented control via a SpeedButton group and styling
iOS & Android:
Use TListBox
Use TSpeedButton with group name Android only:
Use TRadioButton(s)
‘Radio Group’
37. Embarcadero Technologies Copyright 2016
Designed for short lists with no to minimal scrolling:
• Settings List
• Input Forms
Tips:
• Use the ‘GroupHeader’ item for
listbox headers
• Choose TListBox GroupingKind
‘gsGrouped’
• Set StyleLookUp to
‘transparentlistboxstyle’
• For additional descriptive text above
or below a settings list, use a TLabel
with the ‘listboxitemlabel’ style
property
• For Input Forms, use a TEdit with or
without the ‘transparentedit’ style
property
TListBox
38. Embarcadero Technologies Copyright 2016
• Designed for long, databound, scrollable lists
• ItemAppearance provides built-in appearance mode
TListView
39. Embarcadero Technologies Copyright 2016
• Built-in appearance modes
• Custom layouts via the ListView Item Designer
Customizing ListView Appearances
41. Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 41
ACCESSING LOCAL AND REMOTE DATABASES
Jim McKeeth – Global Lead Evangelist and Engineer
44. Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 44
FIREUI LIVE PREVIEW
Jim McKeeth – Global Lead Evangelist and Engineer
46. Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 46
MOBILE DEVICES, SENSORS AND IOT
David I – Chief Evangelist
47. Embarcadero Technologies Copyright 2016
MOBILE DEVICES AND SENSORS
Devices
TCameraComponent
TMediaPlayer, TMediaPlayerControl
Standard Actions for Camera, Media, Phone Call
Sensors - Unit/Components
Location, Light, Motion, Orientation, etc.
http://docwiki.embarcadero.com/Libraries/Berlin/en/System.Sensors
48. Embarcadero Technologies Copyright 2016
INTERNET OF THINGS (IOT)
TBluetooth, TBluetoothLE
TBeacon, TBeaconDevice
IoT components in GetIt Package Manager
BluetoothLE
Z-Wave
49. Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 49
SUBMITTING APPS TO THE APP STORES
Marco Cantu, RAD Studio PM
50. Embarcadero Technologies Copyright 2016
SUBMITTING APPS TO THE APP STORES
App Stores Considered
Google Play Store
Apple App Store
Why App Stores?
Unprecedented distribution opportunity for applications
Offer monetization options along side (payment, ads)
The RAD Studio IDE can build store-ready apps
Some steps in the IDE
Others in the store configuration (via browser)
Other with specific platform tools
51. Embarcadero Technologies Copyright 2016
STEPS IN SUBMITTING APPS TO THE APP STORES (I)
1. Build a release version – IDE
2. Create Graphics – IDE + Tools
Provide icons and splash screens of proper sizes
External tools can help
3. Provide App Information – IDE + Config
Version number: Android = release #, iOS = major.minor
Matching app name (don’t keep embarcadero.com!)
4. For Android, define permissions – IDE
With long terms plans
52. Embarcadero Technologies Copyright 2016
STEPS IN SUBMITTING APPS TO THE APP STORES (II)
5. For iOS, Build Universal Binary
64bit app including the 32bit one
4. Upload the application binary – Config + Tools
App Store: IPA file, upload via Apple Application Loader
Play Store: APK file, upload via web browser
6. Upload images
You must provide images for many different form factors
Grab from devices, emulators, or “make up”
6. Wait for approval – Config
Particularly for iOS
53. Embarcadero Technologies Copyright 2016
RAD STUDIO SPECIAL OFFER
Registered users of any earlier version qualify for the
upgrade price!
Update Subscription is now included with all licenses, so
you’ll never miss an update again
Plus, you get access to the free bonus pack ebook and
software downloads
How to qualify for the upgrade price of 10.1 Berlin and save
up to 45%
Purchase 10.1 Berlin at the Upgrade price through
June 20, 2016.
All earlier version users can upgrade during this
special offer period.
https://www.embarcadero.com/radoffer