Embarcadero Technologies Copyright 2016

GETTING STARTEDBUILDING MOBILE APPLICATIONS

FOR IOS AND ANDROID

© 2016 Embarcadero Technologies, Inc. All rights reserved.

David IntersimoneChief Evangelistdavidi@embarcadero.com

Jim McKeethGlobal Developer Evangelistjim.mckeeth@embarcadero.com

Sarina DuPontProduct Managementsarina.dupont@embarcadero.com

Marco CantuProduct Managementmarco.cantu@embarcadero.com

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

Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 4

GETTING STARTED BUILDING MOBILE APPS David I – Chief Evangelist

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

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

Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 7

USING THE TARGET PLATFORM CONFIGURATIONS David I – Chief Evangelist

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

Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 9

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

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:

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

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:

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:

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

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

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

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

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

Embarcadero Technologies Copyright 2016

FireUI App Preview (on device)

Embarcadero Technologies Copyright 2016

Desktop Mobile

TTreeviewTGrid

TListViewTListBox

TRadioGroupTRadioButton

Segmented Control(using TSpeedButtons)

ListBoxTRadioButton (Android only)

TCheckbox TSwitch (iOS and Android)TCheckBox (Android only)

TMenuBarTMainMenu

TToolbar with TSpeedButtonsTTabControl

TMultiView

Key Component Differences

Embarcadero Technologies Copyright 2016

TButton TSpeedButton TLabelTEdit TMemo TNumberBoxTDateEdit TSwitch TListBoxTListView TComboBox TProgressBar TMultiViewTTrackBar TToolBar TPanelTTimeEdit TTabControl TScrollBox

Android:

iOS & Android:

TCheckBox TRadioButton

Preferred Mobile UI Components

Embarcadero Technologies Copyright 2016

Use TSpeedButton for Toolbar Buttons

Button AlignmentAlign: RightMargin Right: 5

Title AlignmentAlign: ContentsTextSettings->HorzAlign: CenterTextSettings->VertAlign: Center

All controls parented to TToolbar must have an alignment value set

Toolbar Buttons

Embarcadero Technologies Copyright 2016

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

Application Title

Embarcadero Technologies Copyright 2016

• Always center the main application title on the toolbar

Component: TLabelStyleLookup: toollabelAlign: ContentsTextSettings->HorzAlign: CenterTextSettings->VertAlign: Center

Application Title

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

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

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

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

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

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

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

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

Embarcadero Technologies Copyright 2016

iOS & Android Always use a TSwitch in a list item, anchored to the top rightUse 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

Embarcadero Technologies Copyright 2016

iOS: Do not use TRadioButtons

‘Radio Group’

Embarcadero Technologies Copyright 2016

Use TListBox with the checkmark accessory Create a segmented control via a SpeedButton group and styling

iOS & Android:Use TListBoxUse TSpeedButton with group name Android only:

Use TRadioButton(s)

‘Radio Group’

Embarcadero Technologies Copyright 2016

All buttons should be the same heightUse even spacing and anchors

General Button Use

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

Embarcadero Technologies Copyright 2016

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

TListView

Embarcadero Technologies Copyright 2016

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

Customizing ListView Appearances

Embarcadero Technologies Copyright 2016

Custom UI Styling

Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 41

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

Embarcadero Technologies Copyright 2016

FIREDAC ARCHITECTURE

Embarcadero Technologies Copyright 2016

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_Mobile_Applications_(iOS_and_Android) http://docwiki.embarcadero.com/RADStudio/Berlin/en/Tutorial:_

Using_FireDAC_from_a_Multi-Device_Application_on_Desktop_Platforms

Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 44

FIREUI LIVE PREVIEW Jim McKeeth – Global Lead Evangelist and Engineer

Embarcadero Technologies Copyright 2016

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)

Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 46

MOBILE DEVICES, SENSORS AND IOT David I – Chief Evangelist

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

Embarcadero Technologies Copyright 2016

INTERNET OF THINGS (IOT)

TBluetooth, TBluetoothLE TBeacon, TBeaconDevice IoT components in GetIt Package Manager

BluetoothLE Z-Wave

Embarcadero Technologies Copyright 2016Copyright 2016 Embarcadero Technologies 49

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

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

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

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

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

Embarcadero Technologies Copyright 2016

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_an

d_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_Development_(iOS_and_Android)

http://docs.embarcadero.com/products/rad_studio/radstudioBerlin/Mobile_Tutorials_en.pdf

http://docwiki.embarcadero.com/RADStudio/Berlin/en/Using_App_Tethering http://docwiki.embarcadero.com/RADStudio/Berlin/en/Target_Platforms_Overview

25

Embarcadero Technologies Copyright 2016

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_Development_(

iOS_and_Android) http://docs.embarcadero.com/products/rad_studio/radstudioBerlin/Mobile_Tutorials_en.pdf

25

Embarcadero Technologies Copyright 2016 56

THANKS!Any questions?sarina.dupont@embarcadero.commarco.cantu@embarcadero.comjim.mckeeth@embarcadero.comdavidi@embarcadero.com