International Versions

• English

• French

• Spanish

• Portuguese

Featured Demos

• Personal Planner

• Dashboards

4D Ajax Framework v11 デモ
    Release 1, 2 and 5 (11.1/2/5)

 ツールバー

• ツールバーのダイナミックな表示
  この例では、4D Ajax Framework’s JavaScript APIを使用して、追加・削除・検索などのツールバーオブジェクトを動的に表示する方法をお見せします。

 定義済みクエリ

• 定義済みクエリの表示
  4D Ajax Framework v11 Release 1では、定義済みクエリをタブおよびサイドバーで表示させることができます。この例ではデータオブジェクト内でクエリ表示オプションを設定、変更する方法をお見せします。

 ヘッダとフッタ

• ヘッダ行およびフッタ行のコントロール
  この例では4D Ajax Framework v11 Release 1の新しいコマンドをいくつか使用して、グリッドのヘッダやフッタ行をカスタマイズします。主要な変更は、グリッド中すべての行は行送りされたテキストを表示することができることです。

 ドラッグ＆ドロップ

• オブジェクトのドラッグ＆ドロップ
  4D Ajax Framework v11 Release 1のデータグリッドは、組み込みのドラッグ＆ドロップ機能を持ちます。この例では三つの異なる方法で、二つのデータグリッドオブジェクト間のドラッグ＆ドロップを処理します。

 列操作

4D Ajax FrameworkのJavaScript APIを使用して、データグリッド上の列に様々な操作を行わせることができます:

• 列のロック
  この例ではデータグリッド列をロックする方法を示します。この機能を使用すれば、ユーザが横スクロールを行う際にも、ロックされた列を常に表示させることができます。
  
  
• 列表示コントロール
  この例では選択したデータグリッドの列を隠したり表示したりする方法をお見せします。
  
  
• 列のサイズ変更
  この例ではデータグリッド列のサイズを変更する方法をお見せします。
  
  

 セルのCSSスタイリング

• セルごとのスタイル設定
  4D Ajax Framework v11 Release 1のデータグリッドは、セルごとのスタイル設定をサポートします。この機能を使用して、開発者はセル、行、列のスタイルを動的に変更・上書きできます。

 インライン編集

• インライン編集の有効化と無効化
  Data Grid 2.0では、データグリッドエリア上でレコードを更新することができます。この例では新しい三つのインライン編集コマンドをデモします。

 画像のコントロール

• 画像ホバリングプレビュー
  以前のバージョンでは、画像を見る場合まずクリックし、新しいウィンドウを開く必要がありました。 今バージョンでは、マウスポインタをリンクに重ねると、画像のプレビューを表示できます。
  
  
• 画像ホバリングイベント
  この例では上記のホバリングデモを拡張し、画像のハンドリングにイベントを追加します。
  

 イベント

• On Column Click
  onDataColumnClick (11.1) は列ヘッダがクリックされると生成されるイベントです。この例題ではこのイベントでJavaScriptを実行する様子をお見せします。
  
  
• On Row Click
  onDataRowClick (11.1) は行がクリックされると生成されるイベントです。この例題ではこのイベントでJavaScriptを実行する様子をお見せします。
  
  
• On Cell Click
  onDataCellClick (11.1) はデータグリッドセルがクリックされると生成されるイベントです。この例題ではこのイベントでJavaScriptを実行する様子をお見せします。
  
  
• On Row Double Click
  onDataRowDblClick (11.2) はデータグリッド行がダブルクリックされると生成されるイベントです。この例題ではこのイベントでJavaScriptを実行する様子をお見せします。
  
  
• On Cell Double Click
  onDataCellDblClick (11.2) はデータグリッドセルがダブルクリックされると生成されるイベントです。この例題ではこのイベントでJavaScriptを実行する様子をお見せします。
  
  

 チャート

• 拡張タイプサポート
  このリリースではDashboardのチャート機能が拡張され、SVG, PNG そして the Google Chart API3つの新しいチャートタイプがサポートされました。この例題ではこれらのチャートをWebページに埋め込む例をお見せします。


• インタラクティブチャート
  4D Ajax Framework v11 Release 5のチャートは新しいカラー、新しいチャートタイプ、on hoverによるインタラクティブ性、そしてルックアンドフィールをカスタマイズするコマンドにより新しい命を吹き込まれました。

 ドラッグ＆ドロップ

• ショッピングカート
  この例題は4D Ajax Frameworkのオブジェクトを使用してショッピングカートを作成する方法をお見せします。このページでは3つのデータグリッドが使用されています: 一つは製品リストを表示、一つはカートのアイコン、そして実際のショッピングカートの内容リストを表示するものです。オブジェクトは製品リストデータグリッドからドラッグして、カートアイコンにドロップできます。この動作が行われると、ショッピングカートデータグリッドの内容が、定義されたいくつかのルールに基づいて更新されます。

 カスタム変数

• カーディーラー
  この例題では4D Ajax Frameworkでカスタム値を使用する方法をお見せします。カスタム値はフロントエンドのWebページから送信され、バックエンドの4Dデータベースで受信されます。そして4Dデータベースはクエリなどの処理を行い、カスタム値をWebページに送り返します。そしてデータはフォーマットされ、Webページ上に表示されます。

 ブリッジ - レコード操作 (11.2)

• レコード追加
  この例題ではdax_bridge.addRecordコマンドを使用して、カスタムHTMLレイアウトからバックエンドの4Dデータベースにレコードを追加する方法をお見せします。
  
  
• レコード一括追加
  この例題ではdax_bridge.addRecordBatchコマンド (v11.2の新コマンド) を使用して、カスタムHTMLレイアウトからバックエンドの4Dデータベースに複数レコードを追加する方法をお見せします。
  
  
• レコード更新
  この例題ではdax_bridge.modifyRecordコマンドを使用して、カスタムHTMLレイアウトからバックエンドの4Dデータベースのレコードを更新する方法をお見せします。
  
  
• レコード削除
  dax_bridge.deleteRecords コマンドを使用して1つ以上のレコードを削除します。
  
  

 ブリッジ - データアクセス

• Choice List
  dax_bridge.getChoiceList コマンドを使用して選択リストにアクセスします。
  
  
• Get a Record
  この例題ではdax_bridge.getRecord コマンドを使用して、バックエンドの4Dデータベースからレコードを取得します。