UI

AppAnalytics でカスタムイベントを使用する

Written by Chikako Yonezawa on . Posted in UI

AppAnalytics は RAD Studio XE8 でサポートされたアプリケーションの使用状況のアナリティクス(分析結果)を手軽に入手する事ができる機能です。
フォーム上に TAppAnalytics コンポーネントを置き、Application ID などの必要な値と、Options プロパティ内で収集したい項目を設定することで、使用状況のデータを入手することができます。
また、カスタムイベントを使用することで、独自の項目データを収集することもできます。
この記事では、カスタムイベントの記述方法について説明します。

AppAnalitics でカスタムイベントを使用する場合は、コードで記述します。その際、VCL と FireMonkey で記述が若干異なります。

    VCL の場合

TAppAnalytics の TrackEvent メソッドを使用します。

  AppAnalytics1.TrackEvent('VCLCategory','VCLAction','VCLData',1);

上記のカスタムイベントは AppAnalytics サイト上で以下のように集計されます。

Hide image
Click to see full-sized image

    FireMonkey の場合

TAppAnalytics コンポーネントの Options プロパティ内の Custom にチェックをつけて Trueにします。

Hide image

登録するカスタムイベントは TCustomEventContext クラスを使って定義します。
定義したカスタムイベントは、RecordActivity メソッドを使用して登録します。

// uses に System.Analytics, System.Analytics.AppAnalytics を追加します
var
  Context: TCustomEventContext; 
begin
  if Application.TrackActivity then begin
    Context := TCustomEventContext.Create('UserTimeZone', 'Recorded', TTimeZone.Local.DisplayName,
      TTimeZone.Local.UtcOffset.Hours);
    Application.AnalyticsManager.RecordActivity(TAppActivity.Custom, customBtn, Context);
  end;
  :
  :
end;

上記のカスタムイベントは、AppAnalytics サイト上で、以下のように集計されます。

Hide image
Click to see full-sized image


Android 5.0 Lollipop Style Pack for Appmethod

Written by Sarina D on . Posted in UI

This style pack includes a dark style, a light style and a dark blue style for Android 5.0. You can access the download here. This requires the Appmethod September Release (Version 1.15).

Here are the steps to add Android L styling support to your Appmethod Android application:

1. Place a TStyleBook onto your Master view
2. Set TStyleBook.Name = "AndroidLStyleBook"
3. Load AndroidLLight.fsf, AndroidLDarkBlue.fsf or AndroidLDark.fsf to
AndroidLStyleBook
4. Use the TForm.OnCreate event and add this code:

Object Pascal:

procedure TForm1.FormCreate(Sender: TObject);
begin
{$IFDEF ANDROID}
if TOSVersion.Major = 5 then
Form1.StyleBook := AndroidLStyleBook;
{$ENDIF}
end;

C++:

#if defined(__ANDROID__)
if (System::Sysutils::TOSVersion::Check(5))
{
Form1->StyleBook = AndroidLStyleBook;
}
#endif

androidlollipopscreenshots 13071


VCL の Taskbar コンポーネントを使って、進行状態�...

Written by Chikako Yonezawa on . Posted in UI

なお、Taskbarコンポーネントを使用するには、

  •   アプリケーションが Windows 7 または Windows 8 で動作していること。
  •   Windows Aero テーマが有効になっていること(ただし、Windows 7 Home Basic エディションまたは Windows 7 Starter エディションには含まれていません)。

の条件を満たす必要があります。

実際に簡単なフォームで動作を確認します。

  1. VCL フォームアプリケーションを作成します
  2. フォーム上に TEdit と TProgressbar と TTaskbar を配置します。
  3. オブジェクトインスペクタで、Edit1(TEdit) と Taskbar1(TTaskbar) コンポーネントのプロパティを次のように設定します。
  4. コンポーネント名 プロパティ名
    Edit1 Text 0
    Edit1 Alignment taRightJustify
    Taskbar1 ProgressMaxValue 100
    Taskbar1 ProgressState Normal
  5. Visual LiveBinding を使って Edit1 の Text プロパティと、Progressbar1(TProgressbar) の Position プロパティをバインドします。
    Hide image

     
  6. Taskbar コンポーネントを LiveBinding デザイナ上に表示するため、オブジェクトインスペクタ上で、Taskbar1 の LiveBinding デザイナ内の表示要素を True に設定します。
    Hide image

     
  7. バインドするためのプロパティを表示します。表示された Taskbar1 コンポーネントの[...]ボタンをクリックし、表示されたプロパティの一覧の ProgressValue にチェックを付け [OK]ボタンを押します。
    Hide image

     
  8. LiveBinding デザイナ上で Taskbar1 コンポーネントの ProgressValue プロパティと Edit1の Text プロパティをバインドします。
    Hide image

     
  9. メニューから [実行|実行]でアプリケーションをビルドし、実行します。
  10. Edit1 に入力したパーセント値が Progressbar とタスクバーボタンに表示されます。
    Hide image
    Hide image
    Hide image


 


FireMonkey フレームを使って ListBox の項目をカスタ...

Written by Chikako Yonezawa on . Posted in UI

Delphi/C++Builderにはフレームという機能があります。
フレームとは、コンポーネントをグループにまとめるコンテナであり、カスタマイズされた複合コンポーネントと考えていただいた方が解りやすいかもしれません。

VCLではフレームを格納できるのは、フォーム(TForm)やパネル(TPanel)などのコンテナのみでしたが、FireMonkeyではコンテナだけではなく、ボタンなどのコンポーネントにも使用することができます。

この記事では、FireMonkeyでのフレームの作り方とその使用方法の一例を紹介します。

    フレームの作成

フレームの作成手順は、アプリケーションのフォームを作成手順とほとんど同じです。ここでは Editと Buttonで構成されているフレームを作成します。また Buttonをクリックした時 Buttonの Tagプロパティに格納されている番号を Edit側に表示する機能も実装します。

  1. IDEのメニューから[ファイル | 新規作成 | その他]を選択します。
  2. Delphiの場合は「Delphiプロジェクト\Delphiファイル」内の「FireMonkey フレーム」を、C++Builderの場合は「C++Builderプロジェクト\C++Builderファイル」内の「FireMonkey フレーム」を選択します。
  3. Hide image

  4. ツールパレットから TEditと TButton を選択しフレーム上に配置します。
  5. オブジェクトインスペクタ上で、各コンポーネントのプロパティを以下のように設定します。特に Nameプロパティはデフォルトの名前(Button1, Edit1など)は使用しないでください。(フレームをアプリケーションで使用する際に混乱を招きやすくなります)
     
  6.  コンポーネント  プロパティ  値
     TFrame  Name  FrameFR
     TEdit  Name  EditFR
     TButton  Name  ButtonFR
     TButton  Text  クリック

  7. ボタンをクリックしたときの処理を実装します。デザイナ上で ButtonFRコンポーネントをダブルクリックして OnClickイベントを生成して、以下のコードを記述します。
  8. Delphi

      EditFR.Text := IntToStr(TButton(Sender).Tag);
    

    C++Builder

      EditFR->Text = (TButton*(Sender))->Tag;
    

    Hide image
    Click to see full-sized image

  9. IDEのメニューから [ファイル | すべて保存]を選択し、作ったフレームを保存します。この時もデフォルトの名前(Unit1.pasなど)は使用しないでください。

    フレームをツールパレットに登録する

作成したフレームは、コンポーネントテンプレートとしてツールパレットに登録し使用することができます。

登録の方法ですが、デザイナのフレーム上でマウスの右ボタンをクリックして「パレットに追加」を選択します。

Hide image
Click to see full-sized image


必要な情報を入力して登録するだけです。登録するとツールパレット上に追加され、他のコンポーネントと同じようにドラッグ&ドロップで使用することができます。

    作成したフレームを ListBoxの項目として使用する

実際にアプリケーションを作成し、作成したフレームを使用します。
作成するアプリケーションは、ボタンを押すと ListBoxの項目が追加され、フレームで作られた各項目のボタンを押すと、そこにセットされている Tagプロパティの番号が表示されるというものです。

ListBoxの項目は、一般的に ListBoxItemで構成されます。作成したフレームは、この ListBoxItemの子として設定します。
親子関係のイメージとしては以下の図のようになります。

 Hide image

  1. [ファイル|新規作成|マルチデバイスアプリケーション - Delphi]または [ファイル|新規作成|マルチデバイスアプリケーション - C++Builder]
  2. 空のアプリケーション を選択します。
  3. フォームデザイナが表示されます。
  4. ツールパレットから ListBoxをフォーム上に配置します。
  5. フォーム上に配置した ListBoxを選択して、マウスの右ボタンを押します。
  6. 表示されたポップアップメニューから「TListBoxItemの追加」を選びます。
  7. ツールパレットから、先程追加したフレームをフォームに配置します。

Hide image
Click to see full-sized image

この時、構造ペイン上の親子関係を確認し、フレームが ListBoxItem1の子になっていなければ、構造ペイン上でドラッグ&ドロップし、親子関係を修正してください。
このように親子関係を設定するとフレームを ListBoxの項目として設定することができます。
また、このまま実行して、ListBox内のボタンをクリックしますと Edit側に 0の値が入り(Tagプロパティはデフォルトが0なのでそのままの値が愛ります)、フレーム側で設定したコードが実行されていることが解ります。

次に、ボタンを押したら ListBoxの項目を1つ追加する機能を追加します。

  1. ツールパレットから Buttonをフォーム上に配置します。
  2. 配置した Buttonをダブルクリックして OnClickのイベントハンドラを作成し、次のコードを記述します。
  3. Delphi

    procedure TForm1.Button1Click(Sender: TObject);
    begin
      LItem := TListBoxItem.Create(ListBox1);  // ListBoxItemを生成
      LItem.Parent := ListBox1;                // ListBoxに追加 
      LItem.Height := 100;                     // 高さを設定
      LFrame := TFrameFR.Create(LItem);        // FrameFRを生成
      LFrame.Parent := LItem;                  // ListBoxItemの子として関連付け
      LFrame.ButtonFR.Tag := LCount;           // フレーム内のButton.Tagプロパティに値を設定
      Inc(LCount);
    end;
    

    C++Builder

    void __fastcall TForm1::Button1Click(TObject *Sender)
    {
      LItem = new TListBoxItem(ListBox1);      // ListBoxItemを生成
      LItem->Parent = ListBox1;                // ListBoxに追加
      LItem->Height = 100;                     // 高さを設定
      LFrame = new TFrameFR(LItem);            // FrameFRを生成
      LFrame->Parent = LItem;                  // ListBoxItemの子として関連付け
      LFrame->ButtonFR->Tag = LCount;          // フレーム内のButton.Tagプロパティに値を設定
      LCount++;
    }
    
  4. また、public宣言部にはそれぞれ以下を宣言します。
  5. Delphi

    public
        { public 宣言 }
        LItem: TListBoxItem;
        LFrame: TFrameFR;
        LCount: Integer;
    

    C++Builder (.h側)

    public:        // ユーザー宣言
        __fastcall TForm1(TComponent* Owner);
        int LCount;
        TListBoxItem *LItem;
        TFrameFR *LFrame;
    
  6. フォームの OnCreateイベントハンドラを作成し、次のコードを追加します。
  7. Delphi

    procedure TForm1.FormCreate(Sender: TObject);
    begin
      LCount := 0;  //初期化
    end;
    

    C++Builder

    void __fastcall TForm1::FormCreate(TObject *Sender)
    {
      LCount = 0;  //初期化
    }
    

このアプリケーションを実行すると、フレーム側で設定したコードが動き Edit側にTagプロパティに設定した番号が表示されます。

Hide image
Click to see full-sized image 


How can I change name of FireMonkey Mobile application to contain...

Written by John F425 on . Posted in UI

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

 

 


Message Alerts on Multiple Devices

Written by Sarina D on . Posted in UI

Easily add various styles of message alerts to your Appmethod apps, both standard one-button information box style, and multiple button input box styles that allow various confirmations. The code is the same across Windows, Mac, iOS and Android.

 

C++:

void __fastcall TForm2::btnMultipleButtonAlertClick(TObject *Sender)
{
	/* Show a multiple-button alert that triggers different code blocks according to
		your input */
	switch (MessageDlg("Choose a button:", TMsgDlgType::mtInformation,
		TMsgDlgButtons() << TMsgDlgBtn::mbYes << TMsgDlgBtn::mbNo << TMsgDlgBtn::mbCancel , 0))
	{
		case mrYes :
			ShowMessage("You choose Yes");
			break;
		case mrNo:
			ShowMessage("You choose No");
			break;
		case mrCancel:
			ShowMessage("You choose Cancel");
			break;
	}
} 

Object Pascal:

procedure TMessageAlertsForm.btnMultiButtonAlertClick(Sender: TObject);
begin
//Show a multiple-button alert that triggers different code blocks according to your input 
  case MessageDlg('Choose a button:', System.UITypes.TMsgDlgType.mtInformation,
    [
      System.UITypes.TMsgDlgBtn.mbYes,
      System.UITypes.TMsgDlgBtn.mbNo,
      System.UITypes.TMsgDlgBtn.mbCancel
    ], 0) of
 // Detect which button was pushed and show a different message 
    mrYES:
      ShowMessage('You chose Yes');
    mrNo:
      ShowMessage('You chose No');
    mrCancel:
      ShowMessage('You chose Cancel');
  end;
end;

 

Demo Projects:

Message Alerts with C++

Message Alerts with Object Pascal

 


Building the Menu of your Mobile Application

Written by Sarina D on . Posted in UI

There are many different approaches you can choose from when building your mobile application menu. Below is a summary of key app menu styles used in applications today. 

Toolbar Only Navigation

  • Commonly used for single screen apps
  • Can be used with tab control for multi-screen navigation
  • Consists of text or glyph buttons
  • Bordered/Non-bordered icons or text buttons 

Tab Bar Navigation

  • Used to divide app into key focus areas
  • Provides intuitive user experience
  • Often used in conjunction with header toolbar 
  • Displayed with annotated glyphs (iOS), no glyphs (Android)

App Home Screen Navigation

  • Glyph Buttons arranged in a grid like layout
  • Glyph Buttons can be annotated with text
  • May span over multiple screens 

Drawer Menu

  • Main app menu is hidden by default
  • Invoked by tapping on a menu button or swiping left/right
  • Allows you to take advantage of more screen real estate when building your application 

In a follow-on tutorial, I will cover how you can create your own Drawer menu using Appmethod.


How to change style settings for your UI controls

Written by Sarina D on . Posted in UI

In FireMonkey applications, we preset certain properties for each component via the style.

If you want to change the font color, font size etc. at design time for a control such as TButton, you need to select StyledSettings in the Object Inspector and uncheck any of the StyledSettings that you want to manually override.
This allows you to go to the Font property in the Object Inspector and change the font style, size etc. without using the presets applied via the style.

 

For more information, please visit the following docwiki article: http://docwiki.appmethod.com/appmethod/1.13/topics/en/Setting_Text_Parameters_in_FireMonkey

 


Audio recording on multiple devices for Windows, OSX, iOS and And...

Written by DavidI on . Posted in UI

This article contains information about you can use Appmethod and Object Pascal for audio recording in a multi-device (Windows, OSX, iOS and Android) project using the Mobile Snippet AudioRecPlay sample (C:\Users\Public\Documents\Appmethod\13.0\Demos\Object Pascal\Mobile Snippets\AudioRecPlay).

You can record to several audio file formats depending on the device you have. AudioRecPlay does work on my Samsung Galaxy S4. I modified the code to set the filename to .mp3 instead of .3gp and it worked. Appmethod supports several video and audio formats on different platforms.

The following audio and video formats are supported using the TMediaCodecManager’s RegisterMediaCodecClass. 

iOS:

  TMediaCodecManager.RegisterMediaCodecClass('.mov', SVMOVFiles, TMediaType.Video, TAVMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.m4v', SVM4VFiles, TMediaType.Video, TAVMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.mp4', SVMP4Files, TMediaType.Video, TAVMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.mp3', SVMP3Files, TMediaType.Audio, TAVMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.caf', SVCAFFiles, TMediaType.Audio, TAVMediaCodec);

Android:

  TMediaCodecManager.RegisterMediaCodecClass('.mov', SVMOVFiles, TMediaType.Video, TAndroidVideoCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.m4v', SVM4VFiles, TMediaType.Video, TAndroidVideoCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.mp4', SVMP4Files, TMediaType.Video, TAndroidVideoCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.mp3', SVMP3Files, TMediaType.Audio, TAndroidMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.caf', SVCAFFiles, TMediaType.Audio, TAndroidMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.3gp', SV3GPFiles, TMediaType.Audio, TAndroidMediaCodec);

Windows:

  TMediaCodecManager.RegisterMediaCodecClass('.avi', SVAviFiles, TMediaType.Video, TWindowsMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.wmv', SVWMVFiles, TMediaType.Video, TWindowsMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.mp4', SVMP4Files, TMediaType.Video, TWindowsMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.m4v', SVMP4Files, TMediaType.Video, TWindowsMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.mov', SVMOVFiles, TMediaType.Video, TWindowsMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.wma', SVWMAFiles, TMediaType.Audio, TWindowsMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.mp3', SVMP3Files, TMediaType.Audio, TWindowsMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.wav', SVWAVFiles, TMediaType.Audio, TWindowsMediaCodec);

Mac OS X:

  TMediaCodecManager.RegisterMediaCodecClass('.mov', SVMOVFiles, TMediaType.Video, TQTMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.m4v', SVMP4Files, TMediaType.Video, TQTMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.mp4', SVMP4Files, TMediaType.Video, TQTMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.avi', SVAviFiles, TMediaType.Video, TQTMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.wav', SVWAVFiles, TMediaType.Audio, TQTMediaCodec);
  TMediaCodecManager.RegisterMediaCodecClass('.mp3', SVMP3Files, TMediaType.Audio, TQTMediaCodec); 

Suggested audio file formats

The documentation(http://docwiki.appmethod.com/appmethod/1.13/topics/en/Audio_Recording) recommends that you save and use audio media files in the following formats:

  • .wav on Windows
  • .caf on iOS and Mac
  • .3GP on Android

You also can play other types of media files, such as MP3 files. AudioRecPlay Mobile Code SnippetHere is the sample code that I modified in the AudioRecPlay mobile code snippet to record to mp3 – a format available on all platforms and as far as I know on all of the most popular Operating Systems. I tested the program on my Samsung Galaxy S4 and it recorded and played back successfully.

procedure TAudioRecPlayForm.btnStartPlayClick(Sender: TObject);
begin
  btnStopRecClick(Self);
  FMediaPlayer := TMediaPlayer.Create(Self);
{$IFDEF ANDROID}
  // FMediaPlayer.FileName := TPath.GetHomePath + '/test.3GP';
  FMediaPlayer.FileName := TPath.GetHomePath + '/test.mp3';
{$endif}
{$IFDEF IOS}
  // FMediaPlayer.FileName := TPath.GetHomePath + '/Documents/test.caf';
  FMediaPlayer.FileName := TPath.GetHomePath + '/Documents/test.mp3';
{$endif}
  if Assigned(FMediaPlayer) then
    if Assigned(FMediaPlayer.Media) then
      FMediaPlayer.Play;
end;

procedure TAudioRecPlayForm.btnStartRecClick(Sender: TObject);
begin
  btnStopPlayClick(Self);
  { get the microphone device }
  FMicrophone := TCaptureDeviceManager.Current.DefaultAudioCaptureDevice;
  if Assigned(FMicrophone) then
  begin
{$IFDEF ANDROID}
    // FMicrophone.FileName := TPath.GetHomePath + '/test.3GP';
    FMicrophone.FileName := TPath.GetHomePath + '/test.mp3';
{$endif}
{$IFDEF IOS}
    // FMicrophone.FileName := TPath.GetHomePath + '/Documents/test.caf';
    FMicrophone.FileName := TPath.GetHomePath + '/Documents/test.mp3';
{$endif}
    try
      FMicrophone.StartCapture;
      imgOn.Visible := True;
    except
      imgOn.Visible := False;
      ShowMessage('StartCapture:Operation not supported by this device');
    end;
  end else
    ShowMessage('No microphone is available.');
end;

You can also add your own formats that you want supported via the manager classes for audio and video, of course for these you will need to make sure that the codecs are available on the platforms.


Anatomy of a Camera App for iOS and Android

Written by DavidI on . Posted in UI

You can use Appmethod to quickly build a Smartphone Camera App (for iOS and Android) that lets you take pictures, preview them, save them to your camera roll and also share the image with other apps.

Start with a blank app template project, add 6 components (TToolBar, TImage, TActionList and 3 TButtons), set a few property values in the Object Inspector, choose 3 predefined actions (TTakePhotoFromLibraryAction, TTakePhotoFromCameraAction and TShowShareSheetAction), associate the 3 actions to each of the three buttons, connect the action execution for each button to create event handlers for each action and finally write 3 lines of code (one per action event).  Select Target Platform for iOS and Android and choose Build and you have finished camera apps for iOS and Android.

The 3 lines of Object Pascal code for the three action event handlers:

procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
  Image1.Bitmap.Assign(Image);
end;

procedure TForm1.TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);
begin
  Image1.Bitmap.Assign(Image);
end;

procedure TForm1.ShowShareSheetAction1BeforeExecute(Sender: TObject);
begin
  ShowShareSheetAction1.Bitmap.Assign(Image1.Bitmap);
end;

The Appmethod mobile tutorial, "Taking and Sharing a Picture (iOS and Android)" can be found at http://docwiki.appmethod.com/appmethod/1.13/topics/en/Mobile_Tutorial:_Taking_and_Sharing_a_Picture_(iOS_and_Android)

A couple of additional notes about Camera apps and sharing images:

  • iOS Share Sheet functionality first appeared in iOS version 5 and was enhanced by Apple in iOS version 6
  • Android's ShareActionProvider is available starting with Android API Level 14 and higher
  • For Android, make sure the Camera setting is set to true in the Project | Options | Uses Permissions (by default we set this True in debug and release configurations, you can change all permission options for the defaults you want for debug and release configurations).

For additional Appmethod information and getting the Appmethod trial at http://www.appmethod.com/

 


Check out more tips and tricks in this development video: