4D Qodly Proを使って、Webウィジェットでデスクトップインターフェースを強化しよう

ナビゲーション・マップなど、ウェブサイトから知られるウィジェットでユーザー・インターフェースを豊かにしたいと思ったことはありませんか？JavaScriptを学んだり、CSSやHTMLを扱ったり、この2つの世界の間でデータの受け渡しをしたりする必要はありません。

Web Areasと4D Qodly Proの新しい統合により、すべてのビジネスロジックを4D Server内に保持したまま、リッチでダイナミックなインターフェイスを4Dフォーム内に提供することができます。

セッション共有

実際の例流れるようなインターフェイスで倉庫の詳細を表示

ユーザーは、ネイティブ感がありながら、Webのように素早く進化するデスクトップアプリを求めています。4D 21では、これはもはやトレードオフではありません。Web Areasと4D Qodly Proの新しい統合により、全てのビジネスロジックを4Dサーバー内に保持したまま、リッチでダイナミックなインターフェイスを4Dフォーム内に提供することができます。

その結果、データが瞬時に流れ、UIの更新が自然に感じられ、開発ワークフローがシンプルに保たれる、統一されたハイブリッドエクスペリエンスが実現します。これこそ、正しいハイブリッドです。

コネクテッドエクスペリエンスのためのウェブエリアセットアップ

画面の左側に4Dのリストボックスがあり、右側には選択されたアイテムの詳細（マップの位置やレーティングコントロールを含む）がWebエリアに表示されていると想像してください。

別の倉庫を選択すると、ページの再読み込みなしで瞬時に詳細が更新されます。ユーザーは、ウェブビューではなく、ネイティブパネルをナビゲートしているように感じます。これが4D Qodly Proの柔軟性と4Dの信頼性の組み合わせです。

簡単な設定

このシームレスなインタラクションを可能にするために、ウェブエリアは2つのシンプルなプロパティで設定されます：埋め込みウェブレンダリングエンジンを使用する “と “4Dメソッドにアクセスする “です。これらの設定により、埋め込みQodlyページはあなたのデータとサーバーロジックにフルアクセスできるようになります。

そこから、ウェブエリアの “On Load “イベントがページを初期化し、正しいセッションをアタッチし、データクラスのメソッドを公開するコンテキストを渡します。

待って、何のセッションで、なぜコンテキストが必要なの？

この場合、4D Qodlyページは4Dアプリケーションのウェブエリア内でロードされますが、ブラウザから直接実行することもできます。そのため、セキュリティを優先する必要があります。また、4Dサーバーと直接会話するため、サーバーはどのクライアントセッションに属するかを知る必要があります。最後に、4DデスクトップとQodlyページの間でコンテキストを共有し、データを共有することができます。4Dと4D Write Proの間でコンテキストを使ってデータを共有する方法と似ています。

アプリがローカルで実行されようが、クライアントサーバーモードで実行されようが、Qodlyページは正しい4Dセッション内で動作しなければなりません。これにより、安全なメソッド呼び出しが可能になり、データの一貫性が保たれます。

以下はデモで使用したセットアップです：

var $otp : Text
var $url : Text
var $context : Variant

Case of 
	: (Form event code=On Load)	
                authentify("viewDetails")
		$otp := getOtp
		$url := "http://localhost/$lib/renderer/?w=warehouses&$4DSID="+ $otp
		WA OPEN URL(warehouseDetails; $url)
		$context:=ds.WareHouse
		WA SET CONTEXT(warehouseDetails; $context)
End case

authentifyはプロジェクトメソッドで、セッションオブジェクトにアクセスするために “execute on server “プロパティをチェックする必要があります。

#DECLARE($privilege : Text)
Session.clearPrivileges()
Session.setPrivileges($privilege)

getOTP も同様です。

#DECLARE() : Text
return Session.createOTP(60)

viewDetails は Qodly Studio で設定されたパーミッションです：

ここで、Warehouse エンティティを読み込んで、Warehouse.getWarehouseById を実行し、ID が変更されたときに対応するエンティティを取得します。Session.setPrivilegesは、ユーザが必要な権限を持っていることを確認します。
getOTP()は、Web Area を現在の 4D セッションにバインドする 1 回限りのトークンを発行します。
URLは4DSIDトークンを含むので、Qodlyページはそのセッション内で実行されます。
最後に、WA SET CONTEXTは、ページにGetWarehouseByIdやRateなどのメソッドを含むWarehouseデータクラスへのアクセスを与えます。

これにより、Qodlyとデータレイヤー間のクリーンでセキュアな接続が作成されます。

4DリストボックスからのインスタントUIアップデート

リストボックスのオブジェクトメソッドで、UIを瞬時に更新します：

var $result : Variant
Case of 
	: (Form event code=On Load)
		LISTBOX SELECT ROW(*; "warehouseList"; 1)	
	: (Form event code=On Clicked)
	: (Form event code=On Selection Change)
		WA EXECUTE JAVASCRIPT FUNCTION(*; "warehouseDetails"; "Qodly.setSource"; $result; "warehouseId"; Form.WareHouse.ID)	
End case

リストボックスはワークフローを完成させます。ユーザーが倉庫を選択すると、4DはWA EXECUTE JAVASCRIPT FUNCTIONを呼び出し、Webエリア内のQodly.setSourceをトリガーします。新しい倉庫IDが渡され、Qodlyページは即座に更新されます。

ユーザーはウェブのリロードを見ることはありません。ユーザーが見るのは、詳細パネルに表示される新しいデータだけです。

データに命を吹き込むモダンなQodlyページ

Qodly Studioでは、詳細ページに2つのカスタムコンポーネントを使用しています。倉庫の正確な位置を表示するMapコンポーネントと、ユーザーが評価を更新できるRatingコンポーネントです。どちらのコンポーネントも倉庫のエンティティソースにバインドされています。

ページはwarehouseIdソースの変更をリッスンします。そのソースが変更されると、getWarehouseByIdを呼び出して正しいエンティティをロードし、すぐに表示します。

ユーザーがレーティングを変更すると、Ratingコンポーネントが4DコンテキストのRateメソッドをトリガーします。更新は即座に保存されます。

これは、ユーザーが最新のツールに期待する応答性です。

チームがこのハイブリッドアプローチを好む理由

バックエンドで4Dのパワー、セキュリティ、構造を維持できます。フロントエンドでは、4D Qodly Proのデザインの柔軟性と豊富なコンポーネントを利用できます。そして、ユーザーのアクションに即座に反応する、流動的でモダンなアプリケーションを手に入れることができます。

Discuss

Tags 21, 4D Qodly Pro, Listbox, Qodly Studio, UI