Riding the waves with REST and C++Builder for iOS

Posted by on in Blogs
Last month, John Thomas (JT) and Sarina Dupont wrote blog posts showing you how to use the new REST Client Library components in your Delphi XE5 VCL and FM applications. JT and Sarina both built examples that use the SpitCast web site (http://www.spitcast.com/) REST API(s) to query surf spots and locations. In this blog post I will show you how I built a C++Builder for iOS. I won't enumerate all of the steps and property settings as you can see some of the design time work in JT's and Sarina's blog posts. The C++ "Surf Spot Finder" app project source code is available for download on CodeCentral at http://cc.embarcadero.com/item/29687.

In C++Builder XE5 update #2 (or RAD Studio), start your project with File | New | FireMonkey Mobile Application - C++Builder.

I created the UI using a TabControl, 2 TabItems, 2 ToolBars, some labels, a TListView (to hold the surf spot names returned from the Spitcast API. TListView is designed to be used for long, data-bound, scrollable lists, where optimal scrolling performance and responsiveness are required.), a TListBox to hold the Latitude, Longitude and County for the selected surf spot and a TWebBrowser component to display a Google Map of the surf spot.

Here is what my C++Builder XE5 IDE looks like with the completed project, UI design, LiveBindings Designer and other windows. (note: you can click on each of the images to see a larger version of the bitmap)

Here are individual screen grabs of parts of the structure and project windows:

The tabcontrol contains 2 tabitems - one to hold the TListView of surf spots and the other to hold the ListBox of surf spot info and the TWebBrowser component to contain the Google Map for the location.

I used the REST components to get to the surf spot REST API, do a GET request, get the JSON reponse, use a ResponseDataSetAdapter to take the metadata and data from the response and send it to a TClientDataSet. I used the LiveBindings Designer to take the data from the TClientDataSet and bind it to the TListView, TListBox and TLabel components. You can see some of the IDE and REST settings steps required in JT's blog post using VCL and Sarina's blog post using FM and mobile. I will create a video as soon as possible to take you through all of the steps and settings.

I also added a TActionList and two standard TabChangeAction(s) to move between the two tabitems - first when you select a surf spot in the TListView and second when you click the "Back" button.

Finally, I created a little code to execute the RESTRequest, handle the TListView OnItemClick event handler, Form OnCreate event handler and Form OnShow event handler. Here are the main form's header file class declaration and source code listings.

class TForm5 : public TForm
__published: // IDE-managed Components
TTabControl *TabControl1;
TTabItem *TabItem1;
TTabItem *TabItem2;
TToolBar *ToolBar1;
TToolBar *ToolBar2;
TLabel *SurfSpotLabel;
TImage *SurferImage;
TListView *ListView1;
TLabel *SurfSpotNameLabel;
TSpeedButton *MyBackButton;
TListBox *LocationListBox;
TListBoxItem *LatitudeItem;
TListBoxItem *LongitudeItem;
TListBoxItem *CountyItem;
TWebBrowser *WebBrowser1;
TRESTClient *RESTClient1;
TRESTRequest *RESTRequest1;
TRESTResponse *RESTResponse1;
TRESTResponseDataSetAdapter *RESTResponseDataSetAdapter1;
TBindingsList *BindingsList1;
TActionList *ActionList1;
TChangeTabAction *ChangeTabAction1;
TChangeTabAction *ChangeTabAction2;
TClientDataSet *ClientDataSet1;
TBindSourceDB *BindSourceDB2;
TLinkPropertyToField *LinkPropertyToFieldText;
TLinkPropertyToField *LinkPropertyToFieldText2;
TLinkPropertyToField *LinkPropertyToFieldText3;
TLinkListControlToField *LinkListControlToField1;
TLinkPropertyToField *LinkPropertyToFieldText4;
void __fastcall FormCreate(TObject *Sender);
void __fastcall ListView1ItemClick(const TObject *Sender, const TListViewItem *AItem);
void __fastcall FormShow(TObject *Sender);
private: // User declarations
public: // User declarations
__fastcall TForm5(TComponent* Owner);
extern PACKAGE TForm5 *Form5;


void __fastcall TForm5::FormCreate(TObject *Sender)
//Execute REST request at startup
TabControl1->ActiveTab = TabItem1;

void __fastcall TForm5::ListView1ItemClick(const TObject *Sender, const TListViewItem *AItem)
String LGoogleMapsURL = "https://maps.google.com/maps?q=%s,%s&output=embed";
TVarRec vr[] = {LatitudeItem->Text,LongitudeItem->Text};
System::WideChar LDecimalSeparator = FormatSettings.DecimalSeparator;
FormatSettings.DecimalSeparator = '.';
// Displays location on the map based on listbox item’s latitude and longitude value from REST service
WebBrowser1->Navigate(Format(LGoogleMapsURL, vr, 2));
FormatSettings.DecimalSeparator = LDecimalSeparator;
//Animate from tab 1 to tab 2 and set tab 2 as the active tab
ChangeTabAction1->Tab = TabItem2;

void __fastcall TForm5::FormShow(TObject *Sender)
//Execute REST request at runtime

Download the project (from CodeCentral), compile and run the C++Builder app on your iOS Device and you'll see the following output. The displays show the surf spots in the TListView, using the TListView search box to filter the items and then the surf spot information and Google Map of the location.

C++Builder for iOSREST components and Steamer Lane - what a bitchin combination!

Gold User, Rank: 1, Points: 2466
David Intersimone (known to many as David I.) is a passionate and innovative software industry veteran-often referred to as a developer icon-who extols and educates the world on Embarcadero developer tools. He shares his visions as an active member of the industry speaking circuit and is tapped as an expert source by the media. He is a long-standing champion of architects, developers and database professionals and works to ensure that their needs are folded into Embarcadero's strategic product plans. David holds a bachelor's degree in computer science from California Polytechnic State University at San Luis Obispo, California.


  • Guest
    Lena Monday, 13 January 2014

    Thank you!

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: