Tutorials

Feeling the Beat with REST

Written by Sarina D on . Posted in CLOUD

Being a big music fan, I was really excited to try out the Beats Music API. Not too long ago, Beats introduced a music subscription service and opened up their API to developers. I decided to create a fun sample that allows you to search for an artist by name and then return the list of available audio tracks for that particular artist.

This example requires an SSL encrypted connection to access the API. For Windows and iOS, this means you will need to install/include the SSL libraries. For Android, that is not necessary. More info on that topic can be found here.

This application consists of a tab control that is aligned to the client, containing two tab items and a toolbar with the title of the application parented to each of the 2 tab items. Tab1 contains several graphics for the design of the application and a top aligned toolbar with the name of the application.

Tab2 includes a client aligned ListView that displays all the audio tracks that are returned based on the query.

The search bar is just a bitmap (since I was going for a specific look) with a parented TEdit. The Search button is part of the bitmap, so I just used a TRectangle with no fill or stroke color to create a clickable masked area over the Search button part of the graphic. For TEdit, I right-clicked on the component at design time and selected ‘Add Item -> TClearEditButton’. This added the ‘x’ for clearing the input field. Alternately, you could have also used the TClearingEdit component instead of the TEdit component.

You will need the following Appmethod components to access the Beats Audio REST API and use it in your application:

  • RestClient
  • RestResponse
  • RestResponseAdapter
  • RestRequest
  • FDMemTable

You will also need to sign up for a developer account to get the required developer key (https://developer.beatsmusic.com/member/register).

I defined the following parameters:

For the display of the list on the second tab, I selected the ListItemRightDetail option. This provides me with 2 bindable members (Item.Text and Item.Detail) in the LiveBindings Designer.

I created the following bindings via the LiveBindings Designer (View->LiveBindings Designer).

This app only required a couple lines of code. When we first create the form, we want to execute the REST request:

procedure TForm1.FormCreate(Sender: TObject);

begin

RestRequest1.Execute;

end;

When the user clicks the Rectangle (the mask over the ‘Search’ bitmap), we need to change the tab (navigate to the second tab), and then also execute the REST request:

procedure TForm1.Rectangle1Click(Sender: TObject);

begin

TabControl1.ActiveTab := TabItem2;

RestRequest1.Execute;

end;

We also want the user to be able to leverage the back button on Android to navigate from the second tab back to the first tab which includes our search bar:

procedure TForm1.FormKeyUp(Sender: TObject; var Key: Word;

var KeyChar: Char; Shift: TShiftState);

begin

if Key = vkHardwareBack then

begin

if TabControl1.ActiveTab = TabItem2 then

begin

TabControl1.ActiveTab := TabItem1;

Key := 0;

end;

end;

end;

 

Here are some screenshots of the running app:

 


AndDevCon Preview: Appmethod Android apps using C++11

Written by J T403 on . Posted in PROGRAMMING

Appmethod is at AnDevCon in Boston this week. For those of you unable to make it in person, I wanted to share some screenshots of using C++ in Appmethod to target Android. In this preview, I will create a new C++ project with Appmethod, write some C++11 code, target Android to build and deploy my natively compiled APK, and run the app. If you are currently subscribing to Appmethod and want to give it a go, contact your local sales representative.

 

Starting a new C++ project:

 

Some C++11 source code to populate a std::string and display on the button::on_click event.

 

APK (Project1) is installed for me by the IDE, just by connecting my Android device and selecting it as the target.

And here is the output from the C++ string concatenation and message box. 

 


Adding alphabetical sorting with A-Z headers to your lists

Written by Sarina D on . Posted in DATA

Using Visual LiveBindings, custom LiveBindings expressions and TListView, it it easy to add ListView headers to your mobile application that support alphabetical ordering and various other customizations. It will only take a couple of steps to enable it for data that is already alphabetically sorted, and an additional step for unsorted data.

Adding A-Z grouping to your ListView headers for alphabetically sorted data

The first example uses a TListView that is aligned to the client and bound into sample data. I created a new mobile application, added TListView, set alignment to alClient and added a PrototypeBindSource component to it. I then right-clicked on my PrototypeBindSource component and added ColorsName1.

In the LiveBindings Designer (View->LiveBindings Designer), I bound ColorsName into ItemHeader.Text and also into Item.Text. With the ItemHeader.Text binding selected, I added the following custom expression to the FillHeaderCustomFormat field:   SubString(%s, 0, 1) .

While the ColorsName sample data is sorted by default, ‘repeat’ and ’shuffle’ are enabled by default which you will have to disable for sorting.  You can disable it by selecting PrototypeBindSource1 in the Structure view, clicking on the FieldDefs node, and then on the 0 - ColorsName1 subnode. Then expand the Options dialog and uncheck ‘optShuffle’ and ‘optRepeat’.

 

 

Adding A-Z grouping to your ListView headers for data that is not already sorted

I recently wrote an article on how to build a Surf Spot Finder app using REST services.

I wanted to sort the surf spots in alphabetical order, but in this case, the data I am getting via REST is not already ordered. Below are the 3 steps I had to follow:

First, select the FDMemTable component in The Object Inspector. Click on the … for the IndexFieldNames property in the Object Inspector. Under Source Fields, I selected ’spot_name’, clicked the > button to add it as my ‘Included Field’ and then clicked on OK.

Next, in the LiveBindings Designer, I selected the ItemHeader.Text -> FDMemTable1 binding.

Then, in the Object Inspector, I set FieldName to ’spot_name’ and FillHeaderFieldName to ’spot_name’.

I also entered the following expression in the FillHeaderCustomFormat field: SubString(%s, 0, 1).

http://blogs.embarcadero.com/files/2014/01/order1_10447.PNG

http://blogs.embarcadero.com/files/2014/01/customexpression1_10450.png

Voila. I now have my surf spots displayed in alphabetical order.

http://blogs.embarcadero.com/files/2014/01/spotfinder2_10459.png

In closing, I thought I would show one more example. In this case, I just have a list of names (using sample data from the PrototypeBindSource component) that I want to annotate with a prefix. In my case, I wanted to add the word ‘Employee’ before the name that I am getting from my datasource.

To do so, select the Item.Text -> ContactName1 binding and enter   "Employee " + UpperCase(%s) in the FillDisplayCustomFormat field.

http://blogs.embarcadero.com/files/2014/01/employee_10453.PNG

 


Creating a Navigation Drawer for your Mobile Application

Written by Sarina D on . Posted in UI

 

Recently, I covered key menu styles that are used in mobile applications today. Drawer menus are very popular, as they allow you to take advantage of more screen real estate when building your app. The main application menu is hidden by default, and invoked by tapping on a menu item or swiping left/right. This type of UI can be seen in many popular mobile applications, including Facebook, Youtube and Gmail.

In this tutorial, I will cover the steps needed to create a navigation drawer for your Appmethod mobile apps.

Many thanks to Malcolm Groves who created the drawer sample that I am using and expanding for this blog post. You can download the project source from his Github repository.

This application consists of 2 layouts. One layout containing the drawer content, and one containing the main application content. 

In this case, my left menu, the drawer menu, includes a top aligned toolbar with a parented label, and a client aligned Listbox with several menu items in it. The idea here is that the drawer menu contains all the main application navigation, including quick links to my account profile, app settings etc. 

 

For demo purposes, I dropped a TListView component onto my form, parented it to lytMain and set its alignment property to alClient. I also placed a TPrototypeBindsource component onto my form to fill my TListview with some sample data. Right-clicking on the PrototypeBindSource component provides you with sample data that you can then easily bind into your Listview using the LiveBindings Designer. I also parented a TLine to lytMain to make the division between the main layout and navigation drawer more visible. You could also apply a style or use a separate background color.

 

 

If you double click on the Actionlist component on the form, you can see that we setup a custom action. We are leveraging that action for opening/closing the drawer when the user clicks on the drawer menu (three line) button or when they swipe across the main menu layout.

 

procedure TfrmMain.actOpenDrawerExecute(Sender: TObject);
begin
  DrawerVisible := not DrawerVisible;
end;

procedure TfrmMain.actOpenDrawerUpdate(Sender: TObject);
begin
  actOpenDrawer.Visible := not (IsPad and IsLandscape);
end;

On the form, we also placed the Gesture Manager component since we want the user to be able to swipe across the screen to show/hide the navigation drawer. In the project source, you will see that the touch gestures are setup for the toolbar parented to lytMain. In my demo, I removed the gesture that was setup on the toolbar and instead assigned the touch gesture to lytMain. 

 

You can find the source code for this project in Malcolm Groves' Github repository. Below is a quick video that shows my running application.

 

 


Pull to Refresh on iOS

Written by Sarina D on . Posted in UI

Today, I thought I would show you a simple example of how to implement pull to refresh for TListView. This example doesn’t use a data source, but instead just adds 20 items to my list every time I try to refresh it. I am currently using one timer with this sample, but you could add another one for when the data is done loading to hide the animation at that time.



This sample uses the following 3 components:

    TListView
    TAniIndicator
    TTimer

For Timer1, I set the Interval design time property to 30. ListView1 is aligned to the client. AniIndicator1 is positioned at the top and centered on my form.

refresh

 

Below is the entire code of my application:

 

    unit PullToRefresh;

    interface

    uses
    System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
    FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
    FMX.ListView.Types, Data.Bind.GenData, Fmx.Bind.GenData, System.Rtti,
    System.Bindings.Outputs, Fmx.Bind.Editors, Data.Bind.EngExt,
    Fmx.Bind.DBEngExt, FMX.StdCtrls, Data.Bind.Components, Data.Bind.ObjectScope,
    FMX.ListView;

    type
    TForm36 = class(TForm)
    ListView1: TListView;
    Timer1: TTimer;
    AniIndicator1: TAniIndicator;
    procedure ListView1MouseMove(Sender: TObject; Shift: TShiftState; X,
    Y: Single);
    procedure Timer1Timer(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    private
    { Private declarations }
    Myposition : Integer;
    Updating : Boolean;
    public
    { Public declarations }
    end;

    var
    Form36: TForm36;

    implementation

    {$R *.fmx}
    var
    LItem: TListViewItem;
    LList : TListView;
    I: Integer;

    procedure TForm36.FormCreate(Sender: TObject);
    begin
    Timer1.Enabled := true;
    begin
    LItem := ListView1.Items.Add;
    LItem.Text := ‘Pull to refresh list & add 20 items’;
    end;
    end;

    procedure TForm36.ListView1MouseMove(Sender: TObject; Shift: TShiftState; X,
    Y: Single);
    begin
    if not Updating and (ListView1.ScrollViewPos < -40) then
    begin
    Updating := true;
    AniIndicator1.Visible := True;
    AniIndicator1.Enabled := true;
    for
    I := Myposition + 1 to Myposition +20 do
    begin
    LItem := ListView1.Items.Add;
    LItem.Text := Format(’Text %d’, [I]);
    end;
    inc(myposition, 20);
    end;
    end;

    procedure TForm36.Timer1Timer(Sender: TObject);
    begin
    if ListView1.ScrollViewPos >-40 then
    begin
    AniIndicator1.Visible := false;
    Updating := false;
    end;
    end;
    end.

 


Accessing data on Parse.com using the REST framework in Appmethod

Written by Sarina D on . Posted in CLOUD

The Appmethod REST Library is a framework for accessing REST-based web services (REST stands for Representational State Transfer). The library is available for all platforms that are supported by Object Pascal.

The framework focuses on JSON as the representation format.

I thought I would create a tutorial that shows you how to access and retrieve data you have stored in a data collection on Parse.com. For Parse.com's REST API documentation, click here.

 

On Parse.com, I signed up for a new account and selected a name for my application. I then created a class called 'GameScore'. By default, Parse creates several fields for you, including createdAt, updatedAt and objectId. For my games sample application, I decided to add 2 more columns for my GameScore collection inside my Parse.com account. The first column was named 'PlayerName' with a String type and the second column was named 'Score' with a Number type. After creating the column, I added some sample data, i.e. PlayerName = Scott Mitchell and Score = 100; 

Here is what I saw inside my Parse.com account:

 

 

Inside Appmethod, I went to File->New Mobile Application->Blank Application. 

For the UI portion of my application, I dropped a TListView onto my form and set the alignment to alClient (you can access the ListView via the tool palette). I also placed a TToolbar onto my form with a parented TLabel (which displays the application title). TToolbar was aligned to the top, and the TLabel was aligned to alContents with the TextAlign property set to alCenter.

For TListView, I set the ItemAppearance to ListItemRightDetail. This exposes 2 bindable members (Text item and detail item) for me in the LiveBindings Designer. The LiveBindings Designer can be accessed via the View menu.

 

Next, we need to drop the REST components onto our form. For that, we need the following components:

  • TRestRequest
  • TRestResponse
  • TRestResponseAdapter
  • TRestClient
  • TFDMemTable

For TRestClient, I set the Base URL to:

https://api.parse.com/1/classes/GameScore/YourObjectIDgoeshere

 Next, we need to define our parameters:

Next, define your parameters as shown in the screenshot below. To add a new parameter, click on the yellow document icon. The IDs are found inside your Parse.com account under the 'App keys' tab:

You can leave the value for Score and PlayerName blank since we will retrieve that data from the server. 

Now, let's right-click onto the FDMemTable component, select Fields Editor and then right-click inside the Fields Editor to add the data fields. On RESTResponseDataSetAdapter1, set the Dataset property to FDMemTable1. 

 

Now, let's bind our Item.Text property to PlayerName and Item.Detail to Score:

 

You will also need to execute the Rest request at runtime:

procedure TForm2.FormCreate(Sender: TObject);
begin
  RestRequest1.Execute;
end;

This example requires an SSL encrypted connection to access the api. For Windows and iOS, this means you will need to install/include the SSL libraries. For Android, that is not necessary. More info on that topic can be found here. 


Find the best surf spots using REST

Written by Sarina D on . Posted in CLOUD

Appmethod includes a range of code snippets and sample applications that are designed to help you get started building applications quickly.

SurfSpot Finder is a master/detail sample application that is included with Appmethod and shows you how to integrate REST services in your application by using the Spitcast API.

Surfspot Finder


The application consists of a TTabcontrol with three invisible tabs (Tabcontrol tpPosition = tpNone).
Each tab item has a toolbar with a TLabel parented to it to display the title of each tab.
Tab1 includes a TListView that is aligned to the client. For TListview, SearchVisible and
SearchAlwaysOnTop are set to True in the Object Inspector to allow for list filtering. Tab1 also has a TSpeedButton parented to it for accessing the Favorites list.
Tab2 includes a TListBox with 3 listbox items, displaying the longitude, latitude and county name of the selected surf spot. It also includes a bottom aligned TWebBrowser component for displaying the location on a map.
To use the built-in slide transition action for transitioning between tabs, a TActionList component has been added
to the form and the ChangeTabAction has been assigned to the back button.
When clicking the plus icon, the current surf spot gets saved to a text file and added to the ListBox on the Favorites tab (Tab3).

RESTRequest1’s Response property has been set to api/spot/all and RESTClient1’s BaseURL to http://api.spitcast.com
A TRestReponse component has been added to the form.
RESTRequest1’s Response property has been set to RESTResponse1. A TRestReponseDataSetAdapter was also placed onto the form and the Response field was set to RESTResponse1. Next, a TFDMemTable component was placed onto the form.
To execute the request, right-click on RESTRequest1 and select ‘Execute’.  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), bind spot_name to Item.Text and Sync to * by dragging a line between the two components.


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.

To show data at Design Time, right-click on RestRequest1 and select 'Execute'.

For additional information on how to use the REST components, please visit:

http://docwiki.appmethod.com/appmethod/1.13/topics/en/REST_Client_Library


Third Party Notice:
Public distribution of Spitcast API content must acknowledge Spitcast as the content source, and provide a link to Spitcast.com.
The Spitcast API is available for non-commercial use. Commercial use is possible by prior arrangement.
 


Uses Permissions on Android

Written by Sarina D on . Posted in DATA

Use the Uses Permissions dialog box to specify the permissions that your Android application requires to work. Appmethod adds the permissions you specify in the AndroidManifest.xml file.

New Android mobile applications have the following required permissions set by default:

To add/remove uses permissions for your Android application based on your application's functionality, go to:
Project > Options > Uses Permissions
For more information, visit our Online Documentation


Defining your supported Device Orientations

Written by Sarina D on . Posted in UI

In Appmethod, it is very easy to set the supported device orientations for the application you are building. Some applications are designed to support all 4 orientations (landscape, portrait, upside down landscape, upside down portrait), while others are designed for only a single orientation, i.e. portrait.


To define and lock your supported orientations, do the following:

1) With your mobile project open, go to Project->Options

2) Select Application

3) Select the Orientation tab

4) Check 'Custom Orientation' and then check the orientations you want to support

5) Click OK and save your project

 


Mobile Tutorials available in our Online Documentation

Written by Sarina D on . Posted in UI

Appmethod's Online Documentation covers a wide variety of application development topics and also includes many step-by-step tutorials.

Appmethod includes a style engine that allows you to quickly change the look of your user interface elements.


For a detailed step-by-step walkthrough on how to change button styles or to build you first database connected application, visit our docwiki.

 


Check out more tips and tricks in this development video: