UI Prototyping and Development Across Multiple Devices with C++

(1)

Meeting C++ 2013

UI Prototyping and

Development Across Multiple

Devices with C++

(2)

(3)

Meeting C++ 2013

First off, what is a device?

Anything with a CPU, memory, and RTOS (embedded device)

AND with display, and input (mobile devices)

AND An app ready operating system (iOS/Android/Windows/etc.)

(4)

Meeting C++ 2013

It’s all about the Client

(5)

Meeting C++ 2013

(6)

(7)

(8)

(9)

(10)

Meeting C++ 2013

When will Tablets surpass Notebooks?

10

(11)

Meeting C++ 2013

Apps for every device

http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

(12)

Meeting C++ 2013

2013+

(13)

Meeting C++ 2013

So is C++

(14)

Meeting C++ 2013

C++ is perfect for these apps…

C++ is a cross-platform language

There are C++ compilers for every single (relevant) device out there

C++ is particularly well suited for embedded devices

(15)

Meeting C++ 2013

Native is Key for Client Device UX

15

Servers Client Devices

Code Safety & Protection is Paramount Ability to Scale Performance via HW Web UX typically network bound

UX Performance is Paramount Fixed/Deployed HW Profiles UX typically HW bound

(16)

Meeting C++ 2013

Why isn’t C++ used on all devices then?

Some developers view it as too complicated

Although there is a language and library standard there are a lot of differences in that level of

support across platforms

There is no standard User Interface controls specification

(17)

Meeting C++ 2013

C++ is being used in a hybrid way

Developers with a C++ source code base keep app logic in C++

For presentation layer, use provided APIs in provided language

Objective-C / Cocoa Java / Dalvik

(18)

Meeting C++ 2013

Presentation Layer

Typical Application Architecture

Business Layer

Data Access Layer

(19)

Meeting C++ 2013

Current multi-device C++ strategy

C++ Source Code

iOS

iOS AndroidAndroid BlackBerry

10

BlackBerry

(20)

Meeting C++ 2013

Current multi-device C++ strategy

C++ Source Code

iOS

10

BlackBerry

10 WinRTWinRT

Presentation Layer

(21)

Meeting C++ 2013

Current multi-device C++ strategy

C++ Source Code

iOS

iOS _AndroidAndroid BlackBerry

10

BlackBerry

10 WinRTWinRT

(22)

Meeting C++ 2013

The Traditional Approach for Targeting Multiple Devices

(23)

Meeting C++ 2013

Current multi-device C++ strategy

C++ Source Code

iOS

10

BlackBerry

10 WinRTWinRT

(24)

Meeting C++ 2013

Current multi-device C++ strategy

C++ Source Code

iOS

iOS _AndroidAndroid BlackBerry

10

BlackBerry

10 WinRTWinRT

(25)

Meeting C++ 2013

25

The C++Builder Native Multi-Device Approach

(26)

Meeting C++ 2013

UI Design and Visual

Prototyping

(27)

Meeting C++ 2013

(28)

Meeting C++ 2013

Visual Designer

Provides a design surface for the layout of UI controls

Allows modification of design time properties Creates event handlers for common events Displays live or prototype data in designer

(29)

Meeting C++ 2013

(30)

Meeting C++ 2013

Application Frameworks

C + + ( O W L ) Windows Encapsulation Inheritance Multiple-Inheritance v-tables Fields Pure-code generation Delphi/C++ (FM) Windows Encapsulation Delegation Method Pointers (closures) Properties Text file form

Streaming-system RTTI

(31)

Meeting C++ 2013

Modern Language Features

Property-Method-Event

Automatic Reference Counting Interfaces

Attributes

Generics/Collections

Anonymous Methods (Lambda functions/closures) Rich RTTI (introspection/reflection)

(32)

Meeting C++ 2013

RTTI and PME extensions

__classid

__delphirtti __closure __property __published

(33)

(34)

Meeting C++ 2013

(35)

Meeting C++ 2013

Native CPU/GPU Application Platform

Compile C++ natively to Windows, Mac, and iOS *

Application, database, and animation are CPU powered All UI, graphics, and effects are GPU powered

(36)

Meeting C++ 2013

HD Forms

High performance GPU powered scalable vector UIs, Bitmapped Controls, and Native Conrols Mutliple resolutions on any device

Hundreds of visual UI components GPU based style engine to control UI look and feel HUDs with transparencies and transition effects

(37)

Meeting C++ 2013

3D Forms

GPU powered 3D forms

Hardware based lighting, textures, and animation 3D Forms can contain HD UI elements and effects

(38)

Meeting C++ 2013

Effects and Animation

50+ Photoshop-like GPU effects

Simultaneous multiple effects without performance hit Path based animation for all HD and 3D UI and graphics

(39)

Meeting C++ 2013

Applications that Connect Everywhere

High-speed connectivity to popular databases

Multi-tier applications Clients on multiple computers and devices

Connect to the world of data, services,

(40)

Meeting C++ 2013

Application Prototyping

• _{Design and prototype your application using sample data from the TPrototypeBindSource}

component

• _{Add a ClientDataSet component to your form and load your actual data}

• _{Simply select all of your bindings and change the data source to use your real data in your}

(41)

Meeting C++ 2013

FireMonkey on Android and iOS

“Native” and Custom Styles True Native Apps

(42)

Meeting C++ 2013

Cross compilation and Packaging

App Sources

FM Framework

Cocoa SDK

Cocoa SDK _{Native Developer Kit}_{Native Developer Kit}

.app in IPA

(43)

Meeting C++ 2013

(44)

Meeting C++ 2013

Native controls

Message alerts Custom Picker Date Picker Phone Dialer iOS Keyboards

Text Editing for TMemo and TEdit

(45)

Meeting C++ 2013

Layout Management

Alignment Anchors

Form Family for loading the

correct form depending on the target device when developing different forms for phones vs

(46)

Meeting C++ 2013

TImage has been updated with MultiResBitmap property 1x and 2x options are shown by default

Easily add your own resolutions, i.e. 1.5x, 3x etc.

46

(47)

Meeting C++ 2013

Gestures

S w i p e T a p P i n c h & Z o o m T a p & H o l d D o u b l e -T a p

(48)

Meeting C++ 2013

Media Library Actions

•Accessing the Camera App

•Accessing the Camera Roll

•Sharing content i.e. photos via Message

(SMS), Mail, Facebook, Twitter etc.

•Slide Transitions for Tabs

(49)

Meeting C++ 2013

Sensor Components

Location Sensor (GPS)

Motion Sensort (Accelerometer)

Orientation Sensor (Gyroscope)

(50)

Meeting C++ 2013

Camera

Provides access to camera sensors: activate flash

get sensor position etc. access front/back camera take pictures/video

(51)

Meeting C++ 2013

Location Service / GPS Sensor

•_{Get location of your iOS device using latitude and longitude}

•_{Use Reverse Geocoding to convert location data to a readable address}

•_{Works across Win/Mac/iOS}

•_{Can be used with the WebBrowser component to display a location on the map}

(52)

Meeting C++ 2013

Mobile Services

Notification Center ... and more

(53)

Meeting C++ 2013

Client Devices _MBaaS

Enterprise Backend DataSnap MEAP N-tier

(54)

Meeting C++ 2013

Review of objections

C++ is too complicated

Too many differences between platforms for C++ support

(55)

Meeting C++ 2013

Embarcadero’s Approach

C++ is too complicated C++11

Visual Design/Prototyping

Automatic Reference Counting Common User Interface

(56)

Meeting C++ 2013

Embarcadero’s Approach

Common toolchain (CLANG/LLVM)

Common STL (Dinkumware) across platforms Same development environment and process for targeting all platforms

(57)

Meeting C++ 2013

Embarcadero’s Approach

Common toolchain (CLANG/LLVM)

Common STL (Dinkumware) across platforms Same development environment and process for targeting all platforms

(58)

Meeting C++ 2013

Embarcadero’s Approach

No common User Interfaces FM

Styled and Native Controls

Common layout management OS specific look and feel

(59)

Meeting C++ 2013

Questions?

Thank You and we are looking for C++ beta testers – [email protected]