ナビゲーション・マップなど、Webサイトから知られるウィジェットでユーザー・インターフェースを豊かにしたいと思ったことはありませんか?JavaScriptを学んだり、CSSやHTMLを扱ったり、この2つの世界の間でデータの受け渡しをしたりする必要はありません。
Web エリアと4D Qodly Proの新しい統合により、すべてのビジネスロジックを4D Server内に保持したまま、豊かでダイナミックなインターフェイスを4Dフォーム内に提供することができます。
実際の例:統合されたインターフェイスで倉庫の詳細を表示
ユーザーは、ネイティブ感がありながら、Webのように素早く進化するデスクトップアプリを求めています。4D 21 では、これはもはやトレードオフではありません。Web エリアと4D Qodly Proの新しい統合により、全てのビジネスロジックを4D Server内に保持したまま、リッチでダイナミックなインターフェイスを4Dフォーム内に提供することができます。
その結果、データが即座に渡され、UIの更新が自然に感じられ、開発ワークフローがシンプルに保たれる、統一されたハイブリッドエクスペリエンスが実現します。これこそ、正しいハイブリッドです。
接続されたエクスペリエンスのためのWebエリアセットアップ
画面の左側に4Dのリストボックスがあり、右側には選択された項目の詳細(マップの位置やレーティングコントロールを含む)がWeb エリアに表示されていると想像してください。
別の倉庫を選択すると、ページの再読み込みなしで瞬時に詳細が更新されます。ユーザーは、Web ビューではなく、ネイティブパネルをナビゲートしているように感じます。これが4D Qodly Proの柔軟性と4Dの信頼性の組み合わせです。

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

そこから、Web エリアの “On Load”イベントがページを初期化し、正しいセッションをアタッチし、データクラスのメソッドを公開するコンテキストを渡します。
セッション?コンテキスト?なぜそれらが必要なのか?
この場合、4D Qodly ページは4DアプリケーションのWeb エリア内でロードされますが、ブラウザから直接実行することもできます。そのため、セキュリティを優先する必要があります。また、4D Serverと直接会話するため、サーバーはどのクライアントセッションに属するかを知る必要があります。最後に、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 はプロジェクトメソッドで、セッションオブジェクトにアクセスするために “サーバー上で実行”プロパティをチェックする必要があります。

#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 エリアを現在の 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ページは即座に更新されます。
ユーザーはWeb のリロードをする必要はありません。ユーザーが見るのは、詳細パネルに表示される新しいデータだけです。
データに命を吹き込むモダンなQodlyページ
Qodly Studioでは、詳細ページに2つのカスタムコンポーネントを使用しています。倉庫の正確な位置を表示するMap コンポーネントと、ユーザーが評価を更新できるRating コンポーネントです。どちらのコンポーネントも倉庫のエンティティソースにバインドされています。
ページはwarehouseId ソースの変更をリッスンします。そのソースが変更されると、getWarehouseById を呼び出して正しいエンティティをロードし、すぐに表示します。

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

これは、ユーザーが最新のツールに期待する応答性です。
チームがこのハイブリッドアプローチを好む理由
バックエンドで4D のパワー、セキュリティ、構造を維持できます。フロントエンドでは、4D Qodly Proのデザインの柔軟性と豊富なコンポーネントを利用できます。そして、ユーザーのアクションに即座に反応する、流動的でモダンなアプリケーションを手に入れることができます。
現在、この投稿へのコメント機能は利用できません。