Watch, Follow, &
Connect with Us

JT @ Embarcadero

Mobile User Interface Design: Home Screen Navigation

Written by Sarina D.

When it comes to mobile UI design, there are several key design paradigms. I covered the different mobile UI design patterns in my recent C++ Mobile Day session.

App Home Screen Navigation Key Features
• Images arranged in a grid like layout
• Images can be annotated with text
• May span over multiple screens (you can use a TTabControl for that)
To create the user interface shown in the screenshot above, you will first need to create a new mobile application. Add a TToolbar, align it to the Top, and parent a TLabel to it. Next, drop a TGridPanelLayout component onto your form and align it to the client. By default, two columns (0,1) and two rows (0,1) are set up.
Note: Since you are going to set up event handlers for each graphic on the home screen, I would recommend adding a TTabControl (aligned to Client) with 11 invisible tabs (TabPosition = tpNone). Then add the Toolbar and GridPanelLayout components to Tab1, and link to each of the tabs when the user taps on one of the 10 home screen graphics by setting up on-click events for each graphic.

Define the width of each column, i.e. 50% to have even spacing across both columns.
For this sample application, we want to have a total of two columns with five rows. To add a row, right click on ‘RowCollection’ and add an item.
Each of the five rows should have a value of 20% to ensure even spacing across our grid.
Next, drop a total of 10 TImageControls onto your form. You could also use TImage if you want to load different images for different device resolutions (i.e. 1x resolution image, 2x resolution image etc.).Multi-select (shift select) all TImageControls in the Structure pane and change the width and height to 75 px. This ensures spacing between each of the graphics.
Select each TImageControl and select the row and column you want it to be displayed.

Last step is to add the images you want to display and setup on-click events for each graphic to navigate the user to the related content.

Posted by J T on October 13th, 2014 under Uncategorized | Comment now »


Creating a Navigation Drawer for your Mobile Application

Written by Sarina D.

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.

Posted by J T on October 13th, 2014 under Uncategorized | Comment now »


Pull to Refresh on iOS

Written by Sarina D.

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.
Posted by J T on October 13th, 2014 under Uncategorized | Comment now »


Deploying and accessing local files on iOS and Android

Written by David I.

This tutorial shows you how to deploy and access files and/or folders containing files in your iOS and Android apps. To accomplish this, you create a new mobile app, a few lines of Object Pascal code, use the Project | Deployment menu item and use the System.IOUtils unit’s TPath.GetDocumentsPath method and PathDelim in your code.

The steps to create the mobile app

1) use the File->New ->Mobile Application main menu item and select the "Blank Application" project template.

2) On the form, add 1 TButton, 2 TLabel and 1 TImage components.

3) Double click on the TButton component to create the Button’s OnClick event handler.

4) Add a "uses System.IOUtils;" just below the {$R *.fmx} in the implementation section.

5) Add the following Object Pascal code in the event handler to display the documents path and to load the bitmap from the documents folder:

procedure TForm1.Button1Click(Sender: TObject);
begin
  DocPathLabel.Text := TPath.GetDocumentsPath;
  Image1.Bitmap.LoadFromFile(TPath.GetDocumentsPath + PathDelim + 'davidi_tiedye.jpg');
end;

6) In the Project Manager, select each of the Android and iOS Target Platforms to active each one to build an application for each one.

7) Use the Project | Deployment menu item and select the Android and the iOS Device platforms and for each one click the "Add Files" button in the local toolbar to select the bitmap file to deploy with the app and set the Remote Path column value for each platform.

  • For Android, set the Remote Path to .\assets\internal
  • For iOS, set the Remote Path to StartUp\Documents

Here are screen shots of each of the resulting Deployment settings:

8) Compile, Deploy and Run the app for Android (I used my Samsung Galaxy S4) and iOS (I used my iPhone 4s)

You can read additional information about mobile application development and deployment on the Appmethod DocWiki using the following URLs:

Posted by J T on October 13th, 2014 under Uncategorized | Comment now »


Create an Action Bar with Overflow Menu on Android

Written by David I.

On Android, an Action Bar is a top (or top and bottom aligned) toolbar that is segmented into 4 key functional areas. One of those functional areas is an Overflow menu. The ‘Overflow’ popup menu is commonly used for additional menu items on Android and accessed via the Action Bar. An Overflow menu is designed to give the application user quick access to additional/less often used features that are otherwise not accessible via more prominent menu items. Using Appmethod, you can easily implement an Overflow menu through the use of TListBox.

Here are the step-by-step instructions.

In this example we using the following 4 components:

  • TToolbar
    • Alignment: alTop
  • TSpeedButton
    • Alignment: alRight
    • StyleLookUp: detailstoolbutton
    • Margin, Right: 5 (this is set in case you want to carry this UI over to iOS as well, to account for both bordered (iOS6) and non-bordered (iOS7) button sizes
  • TListBox with several items
    • Each of the four listboxitems has a bitmap and text defined via the ItemData property
    • Visibility has been set to False
    • Height has been set to 176px (to show the listbox border right below the last listbox item)
    • Anchors: akTop, akRight
  • TShadowEffect
    • Parented to TListBox

ListBox Item Properties:

Note: For the Overflow menu (TListBox), set alignment to alNone. Since you are setting anchors, you don’t want to set any alignment. Position the listbox where you want it to appear on the form (make sure it is not parented to another component), and then set the following Anchors: akTop, akRight. If you rotate the devices, you will see that that the listbox will remain where you had positioned it.

TSpeedButton properties:

I used a larger (80×80px) icon for each listbox item bitmap so that the icons look nice on both lower resolution and high resolution displays. I also created the following on-click Event for my OverflowButton:

procedure TForm10.OverflowButtonClick(Sender: TObject);
begin
  OverflowMenu.Visible := not OverflowMenu.Visible;
  if OverflowMenu.Visible then
  begin
    OverflowMenu.ApplyStyleLookup;
    OverflowMenu.RealignContent;
  end;
end;

Below is a quick GIF recording of the Overflow menu in action.

Posted by J T on October 13th, 2014 under Uncategorized | Comment now »


Adding alphabetical sorting with A-Z headers to your lists

Written by Sarina D.

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.

Posted by J T on October 13th, 2014 under Uncategorized | Comment now »


Uses Permissions on Android

Written by Sarina D.

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

Posted by J T on October 13th, 2014 under Uncategorized | Comment now »


Developer Skill Sprints - Aspect Oriented Programming using DSharp with Nick Hodges

Written by David I.

Nick Hodges, Embarcadero MVP and "Coding in Delphi" book author, recently presented his "Aspect Oriented Programming using DSharp". It was a great session with Nick and the community. You can watch the replay on the Embarcadero YouTube channel at https://www.youtube.com/watch?v=8iqcMHvG6Jw. Wikipedia an Aspect Oriented Programming (AOP) page that describes AOP in general for all programming languages. AOP is a way of injecting functionality into existing Delphi objects. In traditional object-oriented programming you would insert functionality somewhere in the object hierarchy so that objects down the tree have access to that functionality - for example adding logging methods to your objects. AOP allows you to "inject" methods into objects where you need the functionality.

In the developer skill sprint, Nick uses Stefan Glienke’s DSharp implementation - the source code is available at https://bitbucket.org/sglienke/dsharp/src. The sample code used in Nick’s skill sprint can be found at https://bit.ly/NickAOP. DSharp uses Object Pascal interfaces and attributes, so you’ll need at least Delphi 2010 to use DSharp in your applications.

September 23 - Aspect-oriented Programming using DSharp

Nick Hodges - nick (at) nickhodges.com, @nickhodges
Coding in Delphi - https://leanpub.com/codingindelphi
Duration: 29 minutes and 40 seconds

https://www.youtube.com/watch?v=8iqcMHvG6Jw

Developer Skill Sprints are fast programming tips, tricks and techniques that you can use right now. Replays of previous Developer Skill Sprints are available on Embarcadero YouTube channel using the Developer Skill Sprints Playlist - https://www.youtube.com/playlist?list=PLwUPJvR9mZHhZTajVWsgaFPLtDA-t1Xwc

Get more Developer Skill Sprints videos, source code and resources at http://embt.co/SkillSprints. Get a free RAD Studio 30 day license at http://embt.co/RADDownload to try it yourself.

Take part in the conversation and ask questions using the comments section for this article.

Posted by J T on October 13th, 2014 under Uncategorized | Comment now »


Visualizing JSON Data with LiveBindings

Written by Sarina D.

LiveBindings provide a way to connect user interface controls and datasets. Visual LiveBindings in Appmethod provides a visual design surface that makes connecting data and UI elements as simple as drawing a line between component properties. No need to write expressions or do all your work in code. You’ll find that Visual LiveBindings make developing database connected, UI rich applications easier, more intuitive and more enjoyable than ever before.

You can even visualize JSON data by connecting one of the BaaS (Backend-as-a-Service) components to an input control, such as a Memo.

If you want to see the raw JSON data that you are querying and displaying via the BackendQuery component (connected to a data collection on Kinvey.com in this case), you can connect any input control, such as a TMemo, to the BackendQuery1.JSONResult property using the LiveBindings designer. Then, if you right-click on the BackendQuery component at design time and execute the request, you will see the raw JSON data displayed in the memo. If you run your application, you will also see the same data at runtime.

Posted by J T on October 13th, 2014 under Uncategorized | Comment now »


How can I change name of FireMonkey Mobile application to contain spaces?

Written by John F.

How can I change my FireMonkey Mobile application name to contain spaces?

By default, the FireMonkey Mobile application name is set to be the same as your project name. So if you have a project name of HelloWorld.dproj, the deployed name of your app will be "HelloWorld".

That works fine for most apps but what if you want to have your app called "Hello World"? Since spaces are invalid characters in project names, you have to look elsewhere. If you wish to make a custom displayed name for your application, or one that contains spaces, you can modify the following values depending upon target and platform:

TIP: Project options can be set at different platform and target levels using the "Target" ComboBox shown below. If you do not see your changes take effect, make certain that you have changed the correct target configuration.

iOS
Project | Options | Version Info | CFBundleDisplayName

Android
Project | Options | Version Info | label

Posted by J T on October 13th, 2014 under Uncategorized | Comment now »




Server Response from: BLOGS1