Upload
embarcadero-technologies
View
805
Download
2
Embed Size (px)
Citation preview
Embarcadero Technologies Copyright 2016
GETTING STARTEDBUILDING MOBILE APPLICATIONS
FOR IOS AND ANDROID
© 2016 Embarcadero Technologies, Inc. All rights reserved.
David IntersimoneChief [email protected]
Jim McKeethGlobal Developer [email protected]
Sarina DuPontProduct [email protected]
Marco CantuProduct [email protected]
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 [email protected]@[email protected]@embarcadero.com