Getting Started Building Mobile Applications for iOS and Android

Embarcadero Technologies Copyright 2016
GETTING STARTED
BUILDING MOBILE APPLICATIONS
FOR IOS AND ANDROID

© 2016 Embarcadero Technologies, Inc. All rights reserved.
David Intersimone
Chief Evangelist
davidi@embarcadero.com
Jim McKeeth
Global Developer Evangelist
jim.mckeeth@embarcadero.com
Sarina DuPont
Product Management
sarina.dupont@embarcadero.com
Marco Cantu
Product Management
marco.cantu@embarcadero.com

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

Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 4
GETTING STARTED BUILDING MOBILE APPS
 David I – Chief Evangelist

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

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

USING THE TARGET PLATFORM CONFIGURATIONS

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
 Ad hoc. For private in-house distribution;
see https://developer.apple.com/programs/ios/enterprise/ for more
information.
 iOS Device - 64 bit
 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

BEST PRACTICES FOR BUILDING MOBILE APPS
 Sarina Dupont, Senior Product Manager

• Key App Design Patterns
• Application Menu Options
• UI Styling
• Key Component Differences (Desktop/Mobile)
• Dos and Don’ts
• Custom Styling
Agenda:

• 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

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:

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:

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:

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:

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:

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

 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

FireUI App Preview (on device)

Desktop Mobile
TTreeview
TGrid
TListView
TListBox
TRadioGroup
TRadioButton
Segmented Control
(using TSpeedButtons)
ListBox
TRadioButton (Android only)
TCheckbox TSwitch (iOS and Android)
TCheckBox (Android only)
TMenuBar
TMainMenu
TToolbar with TSpeedButtons
TTabControl
TMultiView
Key Component Differences

TButton TSpeedButton TLabel
TEdit TMemo TNumberBox
TDateEdit TSwitch TListBox
TListView TComboBox
TProgressBar TMultiView
TTrackBar TToolBar TPanel
TTimeEdit TTabControl TScrollBox
Android:
iOS & Android:
TCheckBox
TRadioButton
Preferred Mobile UI Components

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

• Do not align application titles to the left
• Use StyleLookup = toollabel
Application Title

• Always center the main application title on the toolbar
Component: TLabel
StyleLookup: toollabel
Align: Contents
TextSettings->HorzAlign: Center
TextSettings->VertAlign: Center
Application Title

• 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

• 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

• No icons selected for tabs on iOS
• Tabs aligned to bottom on Android
• More than 5 tabs on phone form factor
Tab Control

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

• 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

• 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

• 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

iOS & Android
• Don’t parent TSwitch to a toolbar
• Don’t place TSwitch onto a form without using a list control
Switch Control

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

iOS:
Do not use TRadioButtons
‘Radio Group’

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’

All buttons should be the same height
Use even spacing and anchors
General Button Use

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

• Designed for long, databound, scrollable lists
• ItemAppearance provides built-in appearance mode
TListView

• Built-in appearance modes
• Custom layouts via the ListView Item Designer
Customizing ListView Appearances

Custom UI Styling

ACCESSING LOCAL AND REMOTE DATABASES
 Jim McKeeth – Global Lead Evangelist and Engineer

FIREDAC ARCHITECTURE

FIREDAC RESOURCES
 FireDAC Docwiki - http://docwiki.embarcadero.com/RADStudio/Berlin/en/FireDAC
 InterBase
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Connect_to_InterBase_(FireDAC)
 SQLite
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Connect_to_SQLite_database_(FireDAC)
 Connecting from Mobile to Remote Databases
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Enterprise_Mobility_Services_(EMS)
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Developing_DataSnap_Applications
 Tutorials:
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Mobile_Tutorial:_Using_FireDAC_in_Mobil
e_Applications_(iOS_and_Android)
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Tutorial:_Using_FireDAC_f
rom_a_Multi-Device_Application_on_Desktop_Platforms

FIREUI LIVE PREVIEW
 Jim McKeeth – Global Lead Evangelist and Engineer

FIREUI LIVE PREVIEW
 Docwiki:
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/FireUI_Live_Preview
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/FireUI_App_Preview
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/FireUI_Live_Preview_
(IDE_Options)

MOBILE DEVICES, SENSORS AND IOT

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

INTERNET OF THINGS (IOT)
 TBluetooth, TBluetoothLE
 TBeacon, TBeaconDevice
 IoT components in GetIt Package Manager
 BluetoothLE
 Z-Wave

SUBMITTING APPS TO THE APP STORES
 Marco Cantu, RAD Studio PM

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

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

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

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

GET STARTED RESOURCES
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Developing_Multi-Device_Applications
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/FireMonkey_Applications_Guide
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Migrating_VCL_Applications_to_FireMonkey
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Commonly_Encountered_Differences_Between_the
_VCL_and_FireMonkey
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/IOS_Mobile_Application_Development
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Android_Mobile_Application_Development
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/FireMonkey_Quick_Start_Guide_-_Introduction
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Mobile_Tutorials:_Mobile_Application_Developmen
t_(iOS_and_Android)
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Using_App_Tethering
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Target_Platforms_Overview
25

IOT, SENSORS AND DEVICES RESOURCES
 IoT
 http://docwiki.embarcadero.com/IoT/en/ThingConnect
 http://docwiki.embarcadero.com/IoT/en/ThingConnect_Devices
 http://docwiki.embarcadero.com/IoT/en/Working_with_ThingConnect_Devices
 http://docwiki.embarcadero.com/IoT/en/Tutorial:_Building_a_ThingConnect_IoT_Application
 Sensors
 http://docwiki.embarcadero.com/Libraries/Berlin/en/System.Sensors.Components
 http://docwiki.embarcadero.com/CodeExamples/Berlin/en/FMX.SensorInfo_Sample
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Mobile_Tutorial:_Using_Location_Sensors_(iOS
_and_Android)
 Devices
 http://docwiki.embarcadero.com/RADStudio/Berlin/en/Mobile_Tutorials:_Mobile_Application_Develop
ment_(iOS_and_Android)
25

Embarcadero Technologies Copyright 2016 56
THANKS!
Any questions?
sarina.dupont@embarcadero.com
marco.cantu@embarcadero.com
jim.mckeeth@embarcadero.com
davidi@embarcadero.com

Getting Started Building Mobile Applications for iOS and Android

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Getting Started Building Mobile Applications for iOS and Android

Similaire à Getting Started Building Mobile Applications for iOS and Android (20)

Plus de Embarcadero Technologies

Plus de Embarcadero Technologies (20)

Dernier

Dernier (20)

Getting Started Building Mobile Applications for iOS and Android