Riding the waves over the holidays with REST

I thought I would follow-up on our series of REST related blog posts with a mobile app that lets you find surf spots and then displays them on a map.

The steps for using the REST components are basically the same for FM and VCL, and JT did a great VCL REST surf app tutorial here.

I built this app from scratch, but you could start out by using the Phone Master Detail template found in File->New->FireMonkey Mobile Application.

This app consists of a TTabcontrol with two invisible tabs (Tabcontrol tpPosition = tpNone). Each tab item has a toolbar with a TLabel parented to it. I also parented a TImage to TToolbar1 on Tab 1 to display my app icon. That is certainly not required but adds interest to my UI.

Tab1 displays a TToolbar aligned to the top (alTop) and a TListView aligned to the client (alClient).

To enable list filtering, I set the following two Listview properties to true:

Tab2 displays a top aligned TToolbar with a TSpeedButton and a TLabel. The SpeedButton is styled as a back button and has the ChangeTabAction hooked up to it (requires that you place a TActionList component onto your form).

In addition, it includes a top aligned TListBox with 3 items (I added each item by right-clicking on TListBox on the form and selecting ‘Add Item ->TListBoxItem’). With TListBox selected, I set the Groupingkind property to gsGrouped and the StyleLookUp property to transparentlistboxstyle.

It also includes the TWebBrowser component which I aligned to the bottom.

For this app, the surf spot data is provided by spitcast.com and they provide the API server api.spitcast.com. JT wrote a detailed tutorial on REST that you can view here. While the steps outlined in this tutorial are for VCL, they are the same for FireMonkey.

Below is a quick summary of the steps:

I set RESTRequest1’s Response property to api/spot/all and RESTClient1’s BaseURL to http://api.spitcast.com

I also placed a TRestReponse component onto the form. Select RESTRequest1’s Response property and set it to RESTResponse1. Then place a TRestReponseDataSetAdapter onto your form and set the Response field to RESTResponse1. Place a TFDMemTable component onto your form. Right-click on RESTRequest1 and select ‘Execute’.  Now set TRESTResponseDataSetAdapter’s Dataset field to FDMemTable1. Then, right-click on FDMemTable, select ‘Fields Editor’, right-click inside the Fields Editor and select ‘Add Fields’. You should now see 5 available fields, including ‘county_name’, ‘latitude’, ‘longitude’, ’spot_id’ and ’spot_name’.

Via the LiveBindings Designer (View->LiveBindings Designer), I bound spot_name to Item.Text and Sync to *.

Next, I renamed each of my 3 TListBox items on Tab2 to better organize my app. I then selected each of the ListBox items and set the StyleLookUp property to ‘listboxitemrightdetail’. I then expanded the ItemData property for each of the ListBox items and typed in a value for the ‘Detail’ property, i.e. County.

In order to be able to data bind to each of the Listbox items, click on the … for each listbox item in the LiveBindings Designer. When the ‘Bindable Members’ dialog appears, select the ItemData.Text checkbox. This now exposes a bindable member. See the screen below to see all 4 bindings.

The last step is to display the location of our surf spot on a map via our TWebBrowser component.

procedure TSurfSpotFinder.ListView1ItemClick(const Sender: TObject;

const AItem: TListViewItem);

const

LGoogleMapsURL: String = ‘https://maps.google.com/maps?q=%s,%s&output=embed’;

begin

// Displays location on the map based on listbox item’s latitude and longitude value from REST service

WebBrowser1.Navigate(Format(LGoogleMapsURL, [LatitudeItem.Text, LongitudeItem.Text]));

end;

Below is the entire code for the application:

procedure TSurfSpotFinder.FormCreate(Sender: TObject);

begin

// load application with tab 1 as the active tab

TabControl1.ActiveTab := TabItem1;

end;

procedure TSurfSpotFinder.FormShow(Sender: TObject);

begin

//Execute REST request at runtime

RESTRequest1.Execute;

end;

procedure TSurfSpotFinder.ListView1ItemClick(const Sender: TObject;

const AItem: TListViewItem);

const

LGoogleMapsURL: String = ‘https://maps.google.com/maps?q=%s,%s&output=embed’;

begin

// Displays location on the map based on listbox item’s latitude and longitude value from REST service

WebBrowser1.Navigate(Format(LGoogleMapsURL, [LatitudeItem.Text, LongitudeItem.Text]));

//Animate from tab 1 to tab 2 and set tab 2 as the active tab

ChangeTabAction1.Tab := TabItem2;

ChangeTabAction1.ExecuteTarget(Self);

end;

Check out all the special end of year offers on XE5 here.

Have a wonderful holiday season and Happy New Year!

- Sarina