Home Blogs Sarina DRiding the waves over the holidays with REST

Riding the waves over the holidays with REST

Posted by Sarina D on Tuesday, 24 December 2013 in Blogs

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). Later, we are going to leverage the ChangeTabAction animation that we defined here and use it with our ListViewItem1Click event to navigate between the main tab and the details tab.

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. This leverages the ChangeTabAction we defined earlier for the Back button.

ChangeTabAction1.Tab := TabItem2;

ChangeTabAction1.ExecuteTarget(Self);

end;