RAD Studio XE2 Deep Dive - Mobile Application Development and DataSnap Mobile Connectors

sixmileugliestInternet and Web Development

Jun 24, 2012 (4 years and 9 months ago)

1,060 views

RAD  Studio  XE2  
Deep  Dive  -­‐  Mobile  Applica7on  
Development  and  
DataSnap
 Mobile  
Connectors  
Mobile  


RadPHP
 XE2  


JQuery
 Mobile  


PhoneGap
 


Demo  


DataSnap
 Mobile  Connectors  


iOS
 –  Objec7ve  C  


Android  –  Java  


BlackBerry  –  Java  


Windows  Phone  7  –  C#,  Delphi  Prism  


Demo  


FireMonkey
 
iOS
 


FireMonkey
 Project  


XCode
 +  FPC  


Demo  
Deep  Dive  –  
RadPHP
 XE2  for  
Mobile  Applica7ons  
Mobile  –  
RadPHP
 XE2  Deep  Dive  
New  Items  |  Mobile  Applica7on  
What  is  
jQuery
 Mobile?  
 


jQuery
 
has  long  been  a  popular  JavaScript  library  
for  crea7ng  rich  interac7ve  websites  and  web  
apps.  However,  since  it  was  designed  primarily  
for  desktop  browsers,  it  doesn't  have  many  
features  specifically  designed  for  
building  
mobile
 web  apps.  
 
 
 


jQuery
 Mobile
 is  a  new  project  that  addresses  
this  
JQuery
 shorYall.  It's  a  framework  built  on  top  
of  
jQuery
 that  provides  a  range  of  user  interface  
elements  and  features  for  you  to  use  in  your  
mobile  apps.  
 
 
Mobile  –  
RadPHP
 XE2  Deep  Dive  
Mobile  –  
RadPHP
 XE2  Deep  Dive  
Mobile  –  
RadPHP
 XE2  Deep  Dive  
Tools  |  Wizard  for  
PhoneGap
 
Mobile  –  
RadPHP
 XE2  Deep  Dive  
Android  
iOS
 
-­‐  Enter  Apple  Developer  ID  
-­‐  Sign  your  app  and  prepare  it  for  
submission  to  the  App  Store  
Mobile  –  
RadPHP
 XE2  Deep  Dive  
What  is  
PhoneGap
?  
 


PhoneGap
 is  an  HTML5  app  plaYorm  that  
allows  you  to  author  na7ve  applica7ons  with  
web  technologies  and  get  access  to  APIs  and  
app  stores.    


PhoneGap
 leverages  web  technologies  
developers  already  know  best...  HTML  and  
JavaScript  
 
 
Mobile  –  
RadPHP
 XE2  Deep  Dive  


jQuery
 Mobile:    


Touch-­‐Op7mized  Web  Framework  for  
Smartphones
 &  Tablets  


A  unified  user  interface  system  across  all  popular  mobile  device  plaYorms,  built  
on  the  rock-­‐solid  
jQuery
 and  
jQuery
 UI  founda7on.  Its  
lighteight
 code  is  built  with  
progressive  enhancement,  and  has  a  flexible,  easily  
themeable
 design.  
 


Seriously  cross-­‐plaYorm  &  cross-­‐device  


jQuery
 mobile  framework  takes  the  "write  less,  do  more"  mantra  to  the  next  
level:  Instead  of  wri7ng  unique  apps  for  each  mobile  device  or  OS,  the  
jQuery
 
mobile  framework  will  allow  you  to  design  a  single  highly  branded  and  
customized  web  applica7on  that  will  work  on  all  popular  
smartphone
 and  tablet  
plaYorms.  
 


Touch-­‐op7mized  layouts  &  UI  widgets  


Our  aim  is  to  provide  tools  to  build  dynamic  touch  interfaces  that  will  adapt  
gracefully  to  a  range  of  device  form  factors.  The  system  will  include  both  layouts  
(lists,  detail  panes,  overlays)  and  a  rich  set  of  form  controls  and  UI  widgets  
(toggles,  sliders,  tabs).  
Mobile  –  
Rad
 PHP  XE2  Deep  Dive  


jQuery
 Mobile  Key  Features:  


Built  on  
jQuery
 core  


Compa7ble  with  all  major  mobile  plaYorms  


Lightweight  size  


HTML5  Markup-­‐driven  configura7on  


Progressive  enhancement  


Automa7c  ini7aliza7on  


Accessibility  


New  events    


New  plug-­‐ins  


Powerful  theme-­‐
ing
 framework  
Mobile  –  
Rad
 PHP  XE2  Deep  Dive  


PhoneGap
 Key  Features:
 


Take  advantage  of  HTML5  and  CSS3  


Use  JavaScript  to  write  your  code  


Access  Na7ve  Features  


Deploy  your  app  to  Mul7ple  PlaYorms  


Take  advantage  of  
PhoneGap
 Build  service  


Use  Tools  from  the  community  


Add  
PhoneGap
 
Plugins
 to  your  project  


Get  help  from  the  growing  community
 
Mobile  –  
Rad
 PHP  XE2  Deep  Dive  
                                                                   
Rad
 PHP  XE2  
JQueryMoble
 demo  
 
   
 
Deep  Dive  –  
DataSnap
 Mobile  
Connectors  
Mobile  Connectors  for  DataSnap  


DataSnap
 Mobile  Connectors  


iOS
 –  Objec7ve  C  


Android  –  Java  


BlackBerry  –  Java  


Windows  Phone  7  –  C#,  Prism  


Demos  


Hello  World,  
EchoString
,  
ReverseString
 app  


Company  Tweet  
DataSnap
 Mobile  Connectors  


How  it  works  


DataSnap
 Connectors  provide  a  new  
Proxy  Dispatcher.  


Proxy  Dispatcher  
works  together  with  the  pre-­‐exis7ng  proxy  generator,  metadata  
provider  and  server  class  components.  


Proxy  Dispatcher  
provides  func7onality  which  allows  for  developers  on  remote  
machines  to  generate  a  proxy  on  the  server  and  download  it  onto  the  developer's  
machine.    
 
Proxy  Dispatcher  
handles  the  hhp  requests  
that  requires  a  specific  proxy.
 
 
DataSnap
 Mobile  Connectors  


To  begin  mobile  development  with  
DataSnap
:
 
1.

Properly  setup  your  
DataSnap
 Server  for  proxy  dispatching,  so  
you  can  generate  the  mobile  plaYorm's  proxy.  


Once  your  
DataSnap
 server  is  running,  anyone  can  manually  
request  the  proxy  by  opening  a  browser  and  going  to:  
hhp://host:port/proxy/[DEVICE].zip
 


Alterna7vely,  you  can  use  the  "
Win32ProxyDownloader.exe
"  
to  
create  the
 
proxy  source  code.  
2.

For  example,  an  Android  (Java)  applica7on  needs  the  
DSProxy.java
 file  which  contains  the  code  generated  by  the  
server.    
DataSnap
 Mobile  Connectors  
Step-­‐By-­‐Step  Details  
Create  a  
DataSnap
 REST  Server  using  wizard.  
DataSnap
 Mobile  Connectors  
Step-­‐By-­‐Step  Details  
1.  Create  a  Stand-­‐alone  VCL  Applica7on.    
DataSnap
 Mobile  Connectors  
Step-­‐By-­‐Step  Details  
2.  Specify  the  port  that  will  be  used  by  the  web  
applica7on  to  listen  for  client  requests.    
DataSnap
 Mobile  Connectors  
Step-­‐By-­‐Step  Details  
3.  Add  Mobile  Connectors.    
“Mobile  Connectors"  
adds  support  for  
proxy  dispatching  for  
mobile  connector  
development.  
DataSnap
 Mobile  Connectors  
Step-­‐By-­‐Step  Details  
4.  Select  
ancestor  type  of  the  server  methods  class.
   
TDSServerModule
 to  
expose  datasets  
from  the  server  to  
client  applica7ons.    
DataSnap
 Mobile  Connectors  
Step-­‐By-­‐Step  Details  
5.  
Enter  the  root  directory  of  the  web  applica7on
.    
This  is  the  output  
directory  of  the  
project  executable  
and  the  loca7on  of  
web  applica7on  files  
such  as  .
js
,  .html,  
and  .
css
 files,  and  
other  sta7c  files  
DataSnap
 Mobile  Connectors  
Step-­‐By-­‐Step  Details  
DataSnap
 REST  Applica7on  with  Mobile  Connectors
.    
Your  
DataSnap
 server  is  now  
configured  for  both  proxy  
genera7on  and  proxy  dispatching!  
Components  needed  to  enable  a  
DataSnap
 REST  server  to  generate  
the  proxies:  
TDSProxyGenerator  
TDSServerMetaDataProvider
 
TDSProxyDispatcher
 
DataSnap
 Mobile  Connectors  
Step-­‐By-­‐Step  Details
 
Gerng  the  Generated  Proxy  from  the  Wizard.
   
Two  ways  to  request  the  proxy:  
1.

hhp://host:port/proxy/[DEVICE].zip
 
2.

Win32ProxyDownloader.exe  
This  creates  the
 
proxy  source  code  for  the  
specified  
[DEVICE]  
mobile  device    
DataSnap
 Mobile  Connectors  
Step-­‐By-­‐Step  Details
 
Generated  Proxy  Source  Code
 
The
 
proxy  source  
code    created  
includes:  


 Sta7c  Java  source  
files  required  by  the  
proxy  


 DSProxy.java
,  the  
generated  proxy
 
//  Created  by  the  
DataSnap
 proxy  generator.  
   
package  
com.embarcadero.javaandroid
;  
       /**  
         *  @
param
 Value  [in]  -­‐  Type  on  server:  string  
         *  @return  result  -­‐  Type  on  server:  string  
         */  
       public  String  
EchoString
(String  Value)  throws  
DBXExcep7on
 {  
           
DSRESTCommand
 
cmd
 =  
getConnec7on
().
CreateCommand
();  
           
cmd.setRequestType
(
DSHTTPRequestType.GET
);  
           
cmd.setText
("TServerMethods1.EchoString");  
           
cmd.prepare
(get_TServerMethods1_EchoString_Metadata());  
           
cmd.getParameter
(0).
getValue
().
SetAsString
(Value);  
           
getConnec7on
().execute(
cmd
);  
           return    
cmd.getParameter
(1).
getValue
().
GetAsString
();  
       }  
   
 
DataSnap
 Mobile  Connectors  
Step-­‐By-­‐Step  Details
 
Import  Proxy  Source  Code  into  your  Mobile  client.
 
DataSnap
 Mobile  Connectors  -­‐  
Step-­‐By-­‐Step  Details
 
How  to  use  
DSProxy
 class
 
public  class  
DSProxy
 {  
   public  sta7c  class  
TServerMethods1
 extends  
DSAdmin
 {  
       public  
TServerMethods1(
DSRESTConnecUon
 ConnecUon)  
{  
           super
(ConnecUon);  
       }  
         
       private  
DSRESTParameterMetaData
[]  TServerMethods1_EchoString_Metadata;  
       private  
DSRESTParameterMetaData
[]  get_TServerMethods1_EchoString_Metadata()  {  
           if  (TServerMethods1_EchoString_Metadata  ==  null)  {  
               TServerMethods1_EchoString_Metadata  =  new  
DSRESTParameterMetaData
[]{  
                   new  
DSRESTParameterMetaData
("Value",  
DSRESTParamDirec7on.Input
,    
                                                                                             
DBXDataTypes.WideStringType
,  "string"),  
                   new  
DSRESTParameterMetaData
("",  
DSRESTParamDirec7on.ReturnValue
,    
                                                                                   
DBXDataTypes.WideStringType
,  "string"),  
               };  
           }  
           return  
TServerMethods1_EchoString_Metadata
;  
       }  
 
DataSnap
 Mobile  Connectors  -­‐  
Step-­‐By-­‐Step  Details
 
How  to  use  
DSProxy
 class  (con7nued)
 
 /**  
         
*  @
param
 Value  [in]  -­‐  Type  on  server:  string  
         *  @return  result  -­‐  Type  on  server:  string  
         */  
       public
 String  
EchoString
(String  Value)  throws  
DBXExcepUon
 {  
           
DSRESTCommand
 
cmd
 =  
getConnecUon
().
CreateCommand
();  
           
cmd.setRequestType
(
DSHTTPRequestType.GET
);  
           
cmd.setText
("
TServerMethods1.EchoString
");  
           
cmd.prepare
(get_TServerMethods1_EchoString_Metadata());  
           
cmd.getParameter
(0).
getValue
().
SetAsString
(Value);  
           
getConnecUon
().execute(
cmd
);  
           
return
 
cmd.getParameter
(1).
getValue
().
GetAsString
();  
       }  
DataSnap
 Mobile  Connectors  -­‐  
Step-­‐By-­‐Step  Details
 
Create  and  setup  a  connec7on  to  the  server  using  the  proxy  
class.
 
import  
com.embarcadero.javaandroid.DSRESTConnecUon
;  
...  
//The  
host
 property  specifies  the  host  name  or    IP  address.  
//The  p
ort
 property  specifies  the  port    which  the  servers  is  listening  on.  
//The  
protocol
 property    specifies  the  protocol  to  use  for  the  connec7on.  Specifically;  hhp  or  
hhps.  
DSRESTConnecUon
 
conn
 
=  
new
 
DSRESTConnecUon
();  
conn.setHost
("host"
);  
conn.setPort
(
port
);  
conn.setProtocol
(  
"hhp“  
);  
Class
 
DSRESTConnecUon
 encapsulates  all  the  proper7es  and  methods  needed  for  
connec7ng  to  the  server.  
DataSnap
 Mobile  Connectors  -­‐  
Step-­‐By-­‐Step  Details
 
To  remotely  invoke  the  server  methods,  just  create  
the  proxy  class,  passing  connec7on,  and  then  call  
the  method:  
DSRESTConnecUon
 
conn
 
=  
new
 
DSRESTConnecUon
();  
conn.setHost
 
(  
"10.40.30.24“
);  
conn.setPort
(
8080
);  
conn.setProtocol
(  
"hhp“  
);  
 
TServerMethods1  proxy  
=  new  
TServerMethods1(
conn
)
;  
String  Result  =  
proxy.EchoString
(  
"Hello,  World!“  
);  
DataSnap
 Mobile  Connectors  -­‐  
Step-­‐By-­‐Step  Details
 
Example  of  a  server  method  with  a  
var
 parameter  
func7on
 
TServerMethods1.VarParamTest
(
var
 Value:  
string
):  
string
;  
begin  
   
Value  :=  
StrUUls.ReverseString
(Value);  
   Result  :=  Value;  
end;  
DataSnap
 Mobile  Connectors  -­‐  
Step-­‐By-­‐Step  Details
 
Generated  proxy  code  to  invoke  a  server  method  
with  a  
var
 parameter  
private  
DSRESTParameterMetaData
[]  TServerMethods1_VarParamTest_Metadata;  
private  
DSRESTParameterMetaData
[]  get_TServerMethods1_VarParamTest_Metadata()  {  
   if  (TServerMethods1_VarParamTest_Metadata  ==  null)  {  
       TServerMethods1_VarParamTest_Metadata  =  new  
DSRESTParameterMetaData
[]{  
           new  
DSRESTParameterMetaData
("Value",  
DSRESTParamDirec7on.InputOutput
,    
                                                                                     
DBXDataTypes.WideStringType
,  "string"),  
           new  
DSRESTParameterMetaData
("",  
DSRESTParamDirec7on.ReturnValue
,    
                                                                           
DBXDataTypes.WideStringType
,  "string"),  
       };  
   }  
   return  TServerMethods1_VarParamTest_Metadata;  
}  
 
DataSnap
 Mobile  Connectors  -­‐  
Step-­‐By-­‐Step  Details
 
Generated  proxy  code  to  invoke  a  server  method  
with  a  
var
 parameter  (conUnued)  
/**  
 *  @
param
 Value  [in/out]  -­‐  Type  on  server:  string  
 *  @return  result  -­‐  Type  on  server:  string  
 */  
public  sta7c  class  
VarParamTestReturns
 {  
   public  String  Value;  
   public  String  
returnValue
;  
}  
   
public  
VarParamTestReturns
 
VarParamTest
(String  Value)  throws  
DBXExcep7on
 {  
   
DSRESTCommand
 
cmd
 =  
getConnec7on
().
CreateCommand
();  
   
cmd.setRequestType
(
DSHTTPRequestType.GET
);  
   
cmd.setText
("TServerMethods1.VarParamTest");  
   
cmd.prepare
(get_TServerMethods1_VarParamTest_Metadata());  
   
cmd.getParameter
(0).
getValue
().
SetAsString
(Value);  
   
getConnec7on
().execute(
cmd
);  
   
VarParamTestReturns
 ret  =  new  
VarParamTestReturns
();  
   
ret.Value
 =  
cmd.getParameter
(0).
getValue
().
GetAsString
();  
   
ret.returnValue
 =  
cmd.getParameter
(1).
getValue
().
GetAsString
();  
   return  ret;  
}
 
DataSnap
 Mobile  Connectors  -­‐  
Step-­‐By-­‐Step  Details
 
The  example  shows  how  to  invoke  the  method  and  
read  the  resul7ng  values.  
TServerMethods1  proxy  
=  
new  
TServerMethods1(
conn
);  
 
VarParamTestReturns
 Result  =  
proxy.VarParamTest
(    
“Hello,  World!“    
);  
 
System.
out
.
println
(
Result.Value
);  
 
System.
out
.
println
(
Result.returnValue
);
 
Both  the  new  value  of  the  parameter  passed  in  
and  the  result  value  will  be  held  by  the  
Result
 
instance.  
DataSnap
 Mobile  Connectors  -­‐  
Step-­‐By-­‐Step  Details
 
How  to  use  heavyweight  callbacks  
public  class  
MyCallback
 
extends
 
DBXCallback
 {    
       
public
 
TJSONValue
 execute(
TJSONArray
 
params
)  {    
               
System.
out
.
println
(
params.toString
());  
               
return  new  
TJSONTrue
();  
   }  
}
 
DSCallbackChannelManager
 manager    
=    
 
new  
DSCallbackChannelManager
(
conn,"
chname
",DSCallbackChannelManager.
getNewManagerID
());
 
DataSnap
 Mobile  Connectors  -­‐  
Step-­‐By-­‐Step  Details
 
How  to  use  heavyweight  callbacks  (conUnued)  
 
Example  of  registering  a  callback  and  then  broadcas7ng  to  
the  same  channel  it  is  registered  on:  
 
manager.registerCallbac
k
("
mycb01
",  
new
 
MyCallback
());
 
manager.unregisterCallback
(
“mycb01“
);  
manager.closeClientChannel
();
 
To  stop  the  connec7on  we  can  unregister  the  callback  and  close  the  channel:  
DataSnap
 Mobile  Connectors  Demonstra7on  
DataSnap
 Mobile  Connectors  -­‐  
Demo
 
Windows  Phone  7  
hhp://www.microso{.com/windowsphone//s?appid=687673b4-­‐ac6c-­‐4303-­‐8cff-­‐9af6db6e1b03
 
 
Deep  Dive  –  
FireMonkey
 
iOS
 
Mobile  –  
FireMonkey
 
iOS
 Deep  Dive  


Create  a  
FireMonkey
 3D  or  HD  
iOS
 applica7on  


Export  project  to  
Xcode
 
to  build  with  
FreePascal
 


Run  project  on  an  emulator  or  
iOS
 device  


Minimum  Prerequisites  


Intel  Apple  Mac  with  Snow  Leopard  or  Lion  


iOS
 SDK  requires  subscrip7on  to  Apple  Developer  Program    (4.2,  4.3  
verified  working)    


Xcode
 -­‐  download  from  App  Store  (or  
iOS
 Developer  Pages)    (3.2.5,  
3.2.6,  and  4.1.1  verified  working)    


Installed  official  
FreePascal
 2.4.4  binary  -­‐  hhp://www.freepascal.org/
download.var  -­‐  Required  to  build  FPC  2.5.1    
Mobile  –  
FireMonkey
 
iOS
 Deep  Dive  
FireMonkey
 for  
iOS
 Install  


FireMonkey-­‐iOS.dmg:  Used  for  
FireMonkey
 
iOS
 
development  on  the  Mac.      


Install  the  fpc-­‐2.4.4.intel-­‐macosx.pkg  first,  followed  by  
FireMonkey-­‐iOS-­‐XE2.pkg.      


This  installs  the  FMI  sources  under  /Developer/
Embarcadero/
fmi
 


When  configuring  the  Export  to  
Xcode
 tool,  you  will  
want  to  set  the  “Parameters”  field  to:  
-­‐
fmi
=/Developer/Embarcadero/
fmi
 $PROJECT  
 
Mobile  –  
FireMonkey
 
iOS
 Deep  Dive  
1.  
Preparing  your  Mac  


Installa7on  script  will  try  to  pull  a  known  good  version  of  
the  FPC  trunk  to  "/Developer/
fpc
 
 
2.  Installing  FMI  Sources  on  Your  Mac  


Download  the  latest  FMI  sources  and  save  to  your  home  
directory  "/Users/<username>".  


Double  click  "FmiForFpc.zip"  in  the  Finder  to  install  the  
FMI  sources  at  "/Users/<username>/
fmi
".    
3.  
Build  and  Installing  FPC  for  FMI/
iOS
 Development  


The  "FmiForFpc.zip"  contains  an  install  script  for  all  the  
work  of  building  and  installing  FPC  
 
Mobile  –  
FireMonkey
 
iOS
 Deep  Dive  
4.  
Preparing  RAD  Studio  for  
iOS
 Development  


There  are  two  configura7on  steps  that  will  make  
iOS
 
development  with  RAD  Studio  easier:  
a.

FireMonkey
 
iOS
 projects  share  project  files  with  
XCode
 through  
the  
filesystem
.    
 
-­‐  
Autosaving
 
can  avoid  unnecessary  round  trips.    
 
b
.  It  is  necessary  to  export  an  
XCode
 project  for  your  RAD  Studio  
iOS
 
project  before  it  can  be  run  on  the  
iOS
 simulator  or  device.    
 
-­‐  Add  a  Tools  menu  item  to  run  
dpr2xcode.exe  
within  RAD  Studio.  
»

Title:  Export  to  
Xcode
 
»

Program:  dpr2xcode.exe  
»

Parameters:  $PROJECT  
Mobile  –  
FireMonkey
 
iOS
 Deep  Dive  
5.  Sharing  Files  


Your  project  files  must  be  shared  between  RAD  Studio  and  
XCode
.    


To  facilitate  this  sharing,  you  must  store  your  files  in  a  
loca7on  that  is  accessible  to  both  programs  at  the  same  
7me.    


You  can  do  this  on  a  network  file  server,  a  local  folder  shared  
from  one  machine  to  the  other,  or  through  the  setup  of  your  
VM  environment.  
Mobile  –  
FireMonkey
 
iOS
 Deep  Dive  
6.  Typical  Project  Workflow  


Start  RAD  Studio.  File  |  New  to  go  to  the  Object  Gallery  and  create  a  
"
FireMonkey
 HD  or  3D  
iOS
 ApplicaUon
"    


Save  project  files  on  a  shared  directory    


Work  in  the  form  designer  and  editor  to  build  your  app    


Run  and  debug  it  from  RAD  Studio  (running  as  a  Win32  applica7on)    


Export  project  to  
XCode
 (see  above)    


Switch  to  Mac,  run  
XCode
 and  open  generated  project  (within  the  
generated  "
xcode
"  folder  next  to  your  project  ar7facts)    


Run  and  debug  your  applica7on  using  
XCode
 on  the  simulator  and  
device    


Modify  your  program  in  RAD  Studio  -­‐  Save  all  file    


Run  and  debug  your  applica7on  using  
XCode
 on  the  simulator  and  
device    


Repeat...    
FireMonkey  
iOS
 -­‐  Demo  
Q&A