FireUIの紹介

FireMonkeyでのアプリケーション開発に関する一連の記事を最近公開しました。 次に、データベースの作成、LiveBindingテクノロジを使用したデータの接続、モバイルプラットフォームへのアプリケーションの展開など、アプリケーションの構築の重要なポイントについて説明しました。 ただし、モバイルアプリケーションを作成する際の微妙な違いは考慮していません。 これは主に、Delphiでのモバイル開発のプロセスがバージョンからバージョンへと進化しているためです。 特に、今日のDelphiの最新のXE7バージョンでは、新しいFireUI Multi-Device Designerフォームデザイナーが導入されました。 この記事では、小さな例を使用して、FireUIとは何か、そして開発方法論がどのように変化したかを調べます。







これを行うには、テスト用の最も単純なアプリケーションを作成します。 ユーザーには、質問といくつかの回答オプションを含む画像が表示されます。 サッカーのテーマを選択しました（なぜですか？）。



これは学術的な問題のバリエーションであると言えるので、この記事ではアプリケーションロジックに焦点を当てません。 代わりに、アプリケーション自体を作成する手順を詳細に説明します。



モバイルアプリケーション用のDBMSの最も自然な選択はSQLiteです。 データベースマネージャーとして、SQLite Expertの無料バージョンまたはその他の製品を使用してSQLiteを操作できます。



ベースには、サッカーに関する情報が保存される単一のテーブルが含まれます。 テーブルの作成に使用されるSQLコードは次のようになります。

CREATE TABLE [Player] ( [Id] INTEGER NOT NULL ON CONFLICT ROLLBACK PRIMARY KEY ON CONFLICT ROLLBACK AUTOINCREMENT, [PlayerName] CHAR(100) NOT NULL, [TeamNumber] INTEGER, [Height] INTEGER, [Weight] INTEGER, [Photo] BLOB, [CountryId] INTEGER);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、この記事では、Id、PlayerName、およびPhotoフィールドのみを使用します。 残り-未来に触れた。 SQLite Expertを使用して、テーブルにテストデータを入力することもできます。



ベースの準備が完了すると、プログラムの作成に直接進みます。



XE7では、FireMonkeyアプリケーションを作成する方法が少し変更されました。 現在、「デスクトップ」とモバイルアプリケーションの間に根本的な違いはありません。 その結果、アプリケーションを作成するときに、マルチデバイスアプリケーションテンプレートを選択します。







このようなプロジェクトは、Delphi、Windows、OS X、IOS、Androidでサポートされているプラ​​ットフォームのいずれかの実行可能ファイルを生成できます。 プロジェクトの作成中に特定のプラットフォームを選択したり、特定の種類のデバイス用にユーザーインターフェイスをカスタマイズしたりできます。



以前のバージョンと同様に、[マルチデバイスアプリケーションタイプの選択]ダイアログを使用して、メインプロジェクトフォームのテンプレートを選択できます。







このアプリケーションでは、タブ付きテンプレートが適しています。



まず、 FireDACを使用してデータベースへの接続を構成します。 これを行うには、TFDConnection、TFDPhysSQLiteDriverLink、TFDGUIxWaitCursorの3つのコンポーネントを順番にフォームに配置します。 TFDConnectionコンポーネントをダブルクリックすると、接続エディターが呼び出されます。 ここで、データベースへのパスを指定する必要があります。 LoginPromptをFalseに設定します。







質問と回答のリストを作成するには、2つのSQLクエリを作成する必要があります。 これらのクエリは、TFDQueryコンポーネントを使用して呼び出されます。



最初のクエリは、5人のランダムなプレーヤーをリストします。

 SELECT * FROM Player ORDER BY Random() Limit 5
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、これは質問のリストになります。



2番目のリクエストは最初のリクエストと似ていますが、唯一の違いはプレーヤーの1人がこのリストに入らないことです。

 SELECT * FROM Player WHERE Id<> :Id ORDER BY Random() Limit 4
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、各質問に対して生成される回答のリストです。 手動で挿入される正解はリストから除外されます。



XE7の更新されたワークスペースデザイナーを詳しく見てみましょう。 メインツールバーのすぐ下に独自のツールバーがあります。 このパネルには、2つのボタンと2つのドロップダウンリストが含まれています。







XE5 / XE6で利用可能であったリスト-スタイルのリストに置き換えられ、

提出のリスト。 デバイスの向きを変更したり、デバイスマスクを表示したりするためのボタン。



最初のリストでは、開発プロセス中のインターフェースの外観を選択できます。

少し後で2番目のリストに戻ります。 それまでの間、フォームに必要なコントロールを配置し、目的のコードを作成します。



アプリケーションのTTabControlテンプレートの基本要素には、テスト中に順番に切り替わる3つのタブが含まれます。 ユーザーがランダムな順序でタブを手動で切り替えることができないように、TabPositionプロパティをNoneに設定します。



最初のタブで、2つのボタンを配置します。 およそ図に示すように。







「終了」ボタンは、アプリケーションを閉じます。

 procedure TfMain.btnExitClick(Sender: TObject); begin Close; end;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「New Game」ボタンは、ご想像のとおり、テスト手順を開始します。



ボタンを押すと、次のように処理されます。

 procedure TfMain.btnNewGameClick(Sender: TObject); begin qPlayer.Close; qPlayer.Open; // qPlayer.First; TrueCount := 0; TabControl1.TabIndex := 1; FormAnswers(4); end;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ボタンをクリックすると、2番目のタブがアクティブになります。







プレーヤーの画像が左側に表示され、右側にpAnswersパネルが表示されます-回答オプションのリスト。

 procedure TfMain.FormAnswerArray(Count, qId: integer); var aPos, i: integer; rb: TRadioButton; BlobStream: TStream; begin Randomize; aPos := Random(Count - 1); try BlobStream := qPlayer.CreateBlobStream(qPlayer.FieldByName('Photo'), TBlobStreamMode.bmRead); Image1.Bitmap.LoadFromStream(BlobStream); finally BlobStream.Free; end; qAnswer.Close; qAnswer.ParamByName('Id').AsInteger := qId; qAnswer.Open; i := 0; while not qAnswer.Eof do begin if i > Count then Break; try rb := TRadioButton.Create(pAnswers); rb.Position.X := 0; // Image1.Position.X +10; rb.Position.Y := i * 20; rb.Parent := pAnswers; pAnswers.InsertComponent(rb); rb.Size.Width := 250; finally end; if i = aPos then begin rb.Text := qPlayerPlayerName.AsString; rb.Tag := qPlayerId.AsInteger; end else begin rb.Text := qAnswerPlayerName.AsString; rb.Tag := qAnswerId.AsInteger; qAnswer.Next; end; Inc(i); end; end; procedure TfMain.ClearRadioButtons; var i, j: integer; begin for i := pAnswers.ChildrenCount - 1 downto 0 do begin if pAnswers.Children[i].ClassNameIs('TRadioButton') then begin (pAnswers.Children[i] as TRadioButton).Visible := FAlse; pAnswers.Children[i].Free; end; end; pAnswers.Repaint; end; procedure TfMain.FormAnswers(Count: integer); begin ClearRadioButtons; FormAnswerArray(Count, qPlayerId.AsInteger); end;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

TrueCount変数には、正解の数が含まれます。 FormAnswers手続き-回答のリストを作成します。



コードから推測するのは難しいことではないので、TRadioButtonコンポーネントはpAnswersパネルに追加されます。そのパネルプロパティのTextプロパティにはプレーヤーの姓が値として含まれ、TagプロパティはIdです。 この場合、正しいオプションは最初のクエリ（qPlayer）の結果から取得され、間違ったオプションは2番目のクエリ（qAnswer）の結果から取得されます。 正解の位置はランダムです。



[次へ]をクリックすると、次のコードが呼び出されます。

 procedure TfMain.btnNextClick(Sender: TObject); var answID: integer; begin answID := GetAnswerID; Inc(cnt); if answID = qPlayerId.AsInteger then begin Inc(TrueCount); ShowMessage(''); end else begin ShowMessage(' '); end; if qPlayer.RecNo <> 5 then begin qPlayer.Next; FormAnswers(4); end else begin TabControl1.TabIndex := 2; end; // if qPlayer.Eof then if qPlayer.RecNo = 5 then begin lResult.Text := ' ' + IntToStr(TrueCount) + '  5'; btnNext.Text := ''; end; end;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

GetAnswerID関数は次のように実装されます。

 function TfMain.GetAnswerID: integer; var i, j, k: integer; begin Result := -1; for i := tiQuest.ChildrenCount - 1 downto 0 do begin if tiQuest.Children[i].ClassNameIs('TTabItemContent') then begin for j := tiQuest.Children[i].ChildrenCount - 1 downto 0 do begin if tiQuest.Children[i].Children[j].ClassNameIs('TPanel') then for k := tiQuest.Children[i].Children[j].ChildrenCount - 1 downto 0 do if tiQuest.Children[i].Children[j].Children[k].ClassNameIs ('TRadioButton') then if (tiQuest.Children[i].Children[j].Children[k] as TRadioButton).IsChecked then begin Result := (tiQuest.Children[i].Children[j].Children[k] as TRadioButton).Tag; Break; end; end; end; end; end;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3番目のタブには結果が表示されます。



Delphi XE7でマルチプラットフォームアプリケーションを構築するための新しい方法論は、最初にマスタービューを使用してフォームに必要なすべてのコンポーネントを配置するという事実に要約されます 。 次に、プロジェクトを生成する予定の各プラットフォームとデバイスのタイプごとに特別なビューを作成します。 最後に、各ビューを個別にカスタマイズします。



これまでに行ったすべてのことは、マスターによって行われました。







Windowsで実行するためにアプリケーションを実行すると（以前のように、プロジェクトマネージャーでターゲットプラットフォームを選択した場合）、メインフォームはデザイナーとほぼ同じになります。







ただし、リストから適切なビューを選択して、個別に構成できるようになりました。 実際にどのように見えるか見てみましょう。



リストから選択するだけでWindowsデスクトップのビューを追加し、スタイルをオンにします。 これを行うには、StyleBookコンポーネントを使用します。







Windowsで動作するアプリケーションは次のようになります。







これは、Windowsデスクトップがアクティブなときにdisinerのフォームがどのように見えるかです。







しかし、マスターの導入については、変更は発生しません。







ビューの1つで行った変更が他のビューに影響を与えないことを理解することが重要です。 しかし、マスターのビューを変更すると、そのような変更は「横断的」になります。 当然、このアプローチには特定の制限があります。 簡略化されたフォームでは、フォーム上のすべての表現が同じコンポーネントのセットを持たなければならないという事実に要約されます。 1つのビューからコンポーネントを削除して、他のビューに残すことはできません。 ただし、各ビューでコンポーネントのプロパティを個別に安全に変更できます。



このアプローチは、ある程度の柔軟性をもたらします。 Android用のモバイルアプリケーションを作成するときにFireUIメカニズムがどのように機能するかを見てみましょう。



まず、ベースをモバイルデバイスに転送する必要があります。 これを行うには、以前のバージョンでよく知られているDeployment Managerを使用します。







Delphiの以前のバージョンと同様に、FDConnectionコンポーネントのBeforeConnectionイベントを処理する必要があります。

 procedure TfMain.FDConnection1BeforeConnect(Sender: TObject); begin {$IFDEF ANDROID} FDConnection1.Params.Values['Database'] := IncludeTrailingPathDelimiter (System.IOUtils.TPath.GetDocumentsPath) + 'tests.db'; {$ENDIF} end;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、モバイルデバイスを接続し、対応するビューを作成します。







コントロールのスタイルと場所を設定し、モバイルデバイスでアプリケーションを実行します。 アプリケーションの外観は完全に異なりますが、明らかに、まったく同じアプリケーションです。



さらに、FDConnectionコンポーネントのBeforeConnectionイベントハンドラーを変更する必要があります。

 procedure TfMain.FDConnection1BeforeConnect(Sender: TObject); begin FDConnection1.Params.Values['Database'] := IncludeTrailingPathDelimiter (System.IOUtils.TPath.GetDocumentsPath) + 'tests.db'; end;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、アプリケーションがWindowsで動作し続けるために、Windowsデスクトップビューではこのイベントを処理しません。







そのため、一般的には、FireUIの出現によりFireMonkeyアプリケーションを開発するための方法論にどのような変化が起こったのかを見ました。 今、私たちは「単一コードベース」と異なるプラットフォーム用のいくつかのアプリケーションについてではなく、実際には各プラットフォーム用に構築された単一のアプリケーションについて話しています。



次の記事では、さまざまなプラットフォームをサポートするアプリケーションに見られる「落とし穴」を分析します。 一緒にいてください。



更新1：

2つのデバイスでアプリケーションを起動しました