Skip to content

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

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.

MainUnit.h:

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;
//---------------------------------------------------------------------------
#endif

MainUnit.cpp:

//---------------------------------------------------------------------------
void __fastcall TForm5::FormCreate(TObject *Sender)
{
	//Execute REST request at startup
	RESTRequest1->Execute;
	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;
	ChangeTabAction1->ExecuteTarget(this);
}
//---------------------------------------------------------------------------

void __fastcall TForm5::FormShow(TObject *Sender)
{
	//Execute REST request at runtime
	RESTRequest1->Execute;
}
//---------------------------------------------------------------------------

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!

{ 1 } Comments

  1. Lena | January 13, 2014 at 10:07 am | Permalink

    Thank you!

Bad Behavior has blocked 4 access attempts in the last 7 days.

Close