Delphi/400で本格Webアプリ開発

Similar documents
Delphi/400活用! スマートデバイスアプリケーション開発

10th Developer Camp - A5

テクニカルセミナーベストセレクション

Delphi/400開発ノウハウお教えします 情報を守ろう!安全性を高めたWebシステムの構築

知って得する!現役ヘルプデスクが答えるDelphiテクニカルエッセンス 8.0

Delphi/400を利用したはじめてのWeb開発

JACi400のご紹介~RPGとHTMLで簡単Web化~

新バージョンDelphi/400 XE7ご紹介 - マルチデバイスデザイナ機能で開発効率アップ! -

ミガロ.製品 最新情報

10th Developer Camp - B5

PowerPoint プレゼンテーション

Webコンポーネントのカスタマイズ入門

知って得する!現役ヘルプデスクが答えるDelphiテクニカルエッセンス 9.0

Delphi/400 XE5 -こんなに簡単!IBM iスマートデバイスネイティブ開発-

ステップアップ! モバイルアプリケーション開発

開発者が知りたい実践プログラミングテクニック! ~ 明日から使えるテクニック集 ~

ご利用のコンピュータを設定する方法 このラボの作業を行うには 事前設定された dcloud ラボを使用するか 自身のコンピュータをセットアップします 詳細については イベントの事前準備 [ 英語 ] とラボの設定 [ 英語 ] の両方のモジュールを参照してください Python を使用した Spar

各種パスワードについて マイナンバー管理票では 3 種のパスワードを使用します (1) 読み取りパスワード Excel 機能の読み取りパスワードです 任意に設定可能です (2) 管理者パスワード マイナンバー管理表 の管理者のパスワードです 管理者パスワード はパスワードの流出を防ぐ目的で この操作

Windowsユーザでも 手軽に作れるiPhoneアプリ

Delphi/400を使用したWebサービスアプリケーション

スライド 1

intra-mart Accel Platform — 招待機能プログラミングガイド   初版  

Notesアプリが iPadで動くDomino Mobile Apps ご紹介

開発者が知りたい実践プログラミングテクニック! ~明日から使えるテクニック集~

WebReportCafe

Delphi/400 テクニック公開 Delphi/400開発 ~ パフォーマンス向上テクニック ~

第 1 章 : はじめに RogueWave Visualization for C++ の Views5.7 に付属している Views Studio を使い 簡単な GUI アプリケーションの開発手順を紹介します この文書では Windows 8 x64 上で Visual Studio2010

PowerPoint プレゼンテーション

Create!Form V11 - Excel 出力設定

AppsWF ワークフロー設定ガイド Ver.1.1 株式会社オプロ

intra-mart Accel Platform — IM-共通マスタ スマートフォン拡張プログラミングガイド   初版  

目 次 1. コインキット複合機を用いたプリント及びコピーについて サービス概要 コインキット複合機とは プリント及びコピーのご利用方法 Web ブラウザを用いた印刷..

SmartBrowser_document_build30_update.pptx

ことばを覚える

FastReportへの効率的な帳票レイアウトコンバート

カルテダウンロード 操作マニュアル

2. 生田仮想デスクトップ PC の接続方法 生田仮想デスクトップ PC に接続する方法は 次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールす る必要が無いので 管理者権限をもってい

2. 生田仮想デスクトップ PC の接続方法 生田仮想デスクトップ PC に接続する方法は 次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールす る必要が無いので 管理者権限をもってい

◎phpapi.indd

知って得する!現役ヘルプデスクが答えるDelphiテクニカルエッセンス

TestDesign for Web

目次 更新履歴... 1 はじめに... 3 レコードセット?... 3 準備... 5 SQL でデータを取得する... 6 データのループ処理... 7 列の値を取得する... 7 対象行を変更する (MoveFirst, MoveNext, MovePrevious, MoveLast)...

印刷アプリケーションマニュアル

Delphi/400開発ノウハウお教えします Googleマップ連携によるリッチなGUIアプリ開発

スライド 1

IBM i のスマート・デバイス活用【HATSのiPhone / iPadサポート編】

スライド 1

JC/400でポップアップウィンドウの制御&活用ノウハウ!

Shareresearchオンラインマニュアル

アプリ版居宅介護支援システム簡単操作マニュアル 2017 年度版 総合案内 サポートデスク Copyright(C) 2010 ITSS All Rights Reserved.

Android Layout SDK プログラミング マニュアル

Indyを利用したメール送信機能開発

Mobile Access簡易設定ガイド

KeyWeb Creator 概要 What s KeyWeb Creator? 動的なホームページを作成するためのツール!! 従来の Web ページ DB を利用した Web ページ <HTML> <HEAD> <TITLE>show_book</TITLE> </HEAD> <BODY> <DI

PowerPoint Presentation

1. 信頼済みサイトの設定 (1/3) この設定をしないとレイアウト ( 公報 ) ダウンロードなどの一部の機能が使えませんので 必ず設定してください 1 Internet Explorer を起動し [ ツール ]-[ インターネットオプション (O)] を選択します 2 [ セキュリティ ] の

( 目次 ) 1. はじめに 開発環境の準備 仮想ディレクトリーの作成 ASP.NET のWeb アプリケーション開発環境準備 データベースの作成 データベースの追加 テーブルの作成

FastReportを活用した電子帳票作成テクニック

Microsoft Word - Mac版 Eclipseの導入と設定.docx

カルテダウンロード 操作マニュアル

SnNCutCnvs ステッカーウィザードを使ってデザインを作成する ここでは スターターキットに付属している A4 サイズ (210 mm 297 mm) のプリントステッカーを使用する場合の例を説明します [ ステップ 1] エリアサイズを変更します パソコンの場合 : 編集画面 >[ プロジェ

JavaScript 演習 2 1

Rmenuフレームワーク

更新履歴 変更履歴 版数 リリース日 更新内容 第 1 版 2017/5/15 第 1 版発行 第 2 版 2017/7/13 更新履歴 変更内容を追加 (2ページ) 編集の前に を追加(8 ページ ) ブロックエディタ スマートモード エディタモード の説明を追加 (10~12 ページ ) ブロッ

報道関係者各位 プレスリリース 2019 年 01 月 15 日 株式会社ネオジャパン グループウェア desknet's NEO バージョン 5.2 を 1 月 15 日に提供開始 ~ 業務アプリ作成ツール AppSuite との連携を強化 他にも AppSuite 連携 API 公開など多数の機

PALNETSC0184_操作編(1-基本)

データアダプタ概要

スライド 1

1. 事前準備 ひかりワンチーム SP は インターネットにアクセスして利用するサービスです ご利用いただくには インターネット接続環境及びインターネットに接続可能な端末 (PC 等 ) WEB ブラウザが必要となります 以下のサービス推奨動作環境に合わせ 事前にご用意ください ひかりワンチーム S

目次 1 はじめに 利用条件 動作環境 アドインのインストール アドインの操作方法 アドインの実行 Excel CSV の出力 テンプレートの作成 編集 テンプレートのレイアウト変更 特記

JC/400でWebAPI活用 Google Chart APIでグラフを作成しよう!

どこでもキャビネットVer1.3 ご紹介資料

intra-mart Accel Platform — IM-Repository拡張プログラミングガイド   初版  

Microsoft Word - XOOPS インストールマニュアルv12.doc

PALRO Gift Package 操作説明書

PowerPoint プレゼンテーション

Delphi/400ユーザーのための『Visual Query・Simple Transfer/400』ご紹介

ASA WEB 1.7 リリースノート

前ページからの続き // テキストボックス02 id 属性で取得 // id 属性で取得する場合は一意に決まるので 何番目かの指定は不要 var textbox02elem = document.getelementbyid("text_box02_id"); if ("001" == statee

Maser - User Operation Manual

変更履歴 版数変更日変更内容 /11/1 初版設定 /9/1 名称変更

Rmenuフレームワーク

Microsoft Word - プリンター登録_Windows XP Professional.doc

スライド 1

Transcription:

セッション No.2 Delphi/400 最新技術情報 Delphi/400 で本格 Web アプリ開発 株式会社ミガロ. RAD 事業部技術支援課吉原泰介

アジェンダ Delphi/400 で開発する Web アプリケーション ここまでやりたい! 本格 Web アプリケーション開発 - 機能にこだわる本格 Web アプリケーション! 動的明細 ポップアップ画面 PDF 出力の実装 - 画面にこだわる本格 Web アプリケーション! html 連携 jquerymobile の実装 まとめ お持ち帰り資料 VCL for the Web 基礎知識 Web アプリケーションでの PDF 出力方法

Delphi/400 で開発する Web アプリケーション Web ブラウザで稼動するアプリケーションの魅力インターネット環境とブラウザがあれば 利用可能 クライアントにアプリケーションの配布が不要 社外や取引先でもインターネットを使って利用できる PC の OS や端末を問わずに利用できる スマートフォンでもタブレットでも利用 Web アプリケーション 社外からインターネットで利用できる 運用管理の手間が少ない 環境ごとにアプリケーションを開発しなくても OK Windows 以外のクライアントでも利用 iphone でも Android でも利用 Delphi/400 では VCL for the Web 機能で Web アプリケーションを開発できる!

Delphi/400 で開発する Web アプリケーション VCL for the Web (IntraWeb) Delphi/400 に用意された C/S アプリと同手法で WEB アプリが開発できる機能 1 プロジェクトの作成 2 コンポーネントの配置 3 プログラムの記述 4 コンパイル & 実行 VCL for the Web 基礎知識はお持ち帰り資料にも詳しく掲載

Delphi/400 で開発する Web アプリケーション Web アプリケーションで実現したい機能 Web サイトで見たことがある便利な画面 機能 Delphi/400 の Web 開発でどうやって実現するのか分からない そんな疑問にお応えする本格 Web 開発テクニックをご紹介! もっとデザインにこだわりたい! 明細データは固定行でしか作れない? PDF を出力したい! サブ検索画面をポップアップで使いたい! スマートフォンの Web 画面ってどうやって作るの?

ここまでやりたい! 本格 Web アプリケーション開発 機能にこだわる本格 Web アプリケーション! 1. 動的な明細画面の実装 2. ポップアップ画面の実装 3. PDF 出力機能の実装お持ち帰り資料 画面にこだわる本格 Web アプリケーション! 4.htmlを連携したWeb 画面実装 5.jQueryMobileを利用したスマートデバイスWeb 画面実装

ここまでやりたい! 本格 Web アプリケーション開発 機能にこだわる本格 Web アプリケーション! 1. 動的な明細画面の実装

ここまでやりたい! 本格 Web アプリケーション開発 1. 動的な明細画面の実装 Web アプリケーションの明細行入力画面ではあらかじめ用意した固定行数の明細入力で実装することが多い あらかじめ用意した固定行数の明細入力や画面遷移を挟んでの明細入力

ここまでやりたい! 本格 Web アプリケーション開発 1. 動的な明細画面の実装 VCL for the Web でフレームを使えば C/S アプリケーション同様画面上での自由な明細制御が実現できる! Web 画面上で明細行を好きなだけ追加!

ここまでやりたい! 本格 Web アプリケーション開発 1. 動的な明細画面の実装 フレームを使った明細の動的制御 フレームとは 画面 ( フォーム ) をコンポーネントのように部品化できる機能 ファイル > 新規作成 > その他 2new Frame を選ぶとフォームと同じ形式で部品が作成できる 1 メニューの [ ファイル 新規作成 その他 ] を実行

ここまでやりたい! 本格 Webアプリケーション開発 1. 動的な明細画面の実装 フレームを使った明細の動的制御 フレームで明細行のテンプレートを開発する フレーム 明細の 1 行分をフレームとして作成する

ここまでやりたい! 本格 Webアプリケーション開発 1. 動的な明細画面の実装 フレームを使った明細の動的制御 明細追加ボタンを押下した際に 動的にフレームを追加する 追加ボタンで動的にフレームをコピー作成 フレームは TIWRegion の上に作成する TIWRegion は Web でのパネルのような部品

ここまでやりたい! 本格 Webアプリケーション開発 1. 動的な明細画面の実装 フレームを使った明細の動的制御明細追加ボタンの処理 ( 画面側ソース ) procedure TEntryfrm.IWButtonAddClick(Sender: TObject); var Frame : TFrame1; // 明細用のフレーム begin Inc(FframeCnt); // 追加するフレームの番号をカウント Frame := TFrame1.Create(reMeisai); // フレームの作成 Frame.Parent := IWRegion1; //IWRegionを親( 土台 ) に設定 // 作成したフレームを制御できるようにカウントした番号で名前を設定 Frame.Name := Frame + FormatFloat( 00,FframeCnt); end;

ここまでやりたい! 本格 Webアプリケーション開発 1. 動的な明細画面の実装 フレームを使った明細の動的制御明細フレームの削除ボタンの処理 ( フレーム側ソース ) procedure TFrame1.IWButtonDeleteClick(Sender: TObject); begin Self.Free; // 明細で削除ボタンを押下したらフレーム自身で解放 end;

ここまでやりたい! 本格 Web アプリケーション開発 1. 動的な明細画面の実装 Web 画面上で明細行を好きなだけ追加! Web 画面上で不要な明細行は削除!

ここまでやりたい! 本格 Web アプリケーション開発 機能にこだわる本格 Web アプリケーション! 2. ポップアップ画面の実装

ここまでやりたい! 本格 Web アプリケーション開発 2. ポップアップ画面の実装 Web アプリケーションでの補助検索等の画面は 画面遷移で実装することが多い 画面遷移

ここまでやりたい! 本格 Web アプリケーション開発 2. ポップアップ画面の実装 ポップアップ画面を別 DLL として作成して JavaScript を組み込むことで 別ブラウザのポップアップ画面連携が実現できる! 検索ボタンからポップアップ画面起動! 別ブラウザと連携

ここまでやりたい! 本格 Web アプリケーション開発 2. ポップアップ画面の実装 2 つの Web 画面を連携してポップアップ画面制御 C/S アプリケーションと違い 別ブラウザでポップアップするサブ画面は別のアプリケーション (DLL) として作成する必要がある ただし 通常ブラウザ間では値の受渡を行うことはできない 親アプリケーション 子アプリケーション

ここまでやりたい! 本格 Web アプリケーション開発 2. ポップアップ画面の実装 2 つの Web 画面を連携してポップアップ画面制御 ポイント JavaScriptでブラウザの親子関係を利用すれば親 / 子のアプリケーション間で値を受け渡すことができる 親アプリケーション 子アプリケーション JavaScript では起動元画面を操作可能

ここまでやりたい! 本格 Webアプリケーション開発 2. ポップアップ画面の実装 2 つの Web 画面を連携してポップアップ画面制御 Delphi/400 で JavaScript を記述するには専用のプロパティが用意されている Web のコンポーネントには ScriptEvents プロパティが用意されている ScriptEvents プロパティには JavaScript が記述できるダイアログが用意されている

ここまでやりたい! 本格 Webアプリケーション開発 2. ポップアップ画面の実装 2つのWeb 画面を連携してポップアップ画面制御子アプリケーション起動時のJavaScript 検索ボタンのJavaScript 処理 ( 親アプリケーション側ソース ) // ScriptEvents の OnClick イベント 子アプリケーションを新しい Window で起動 var w = window w = open( http://web サーバ /subform.dll/", "_blank", "width=300,height=300") 親アプリケーション 子アプリケーション 起動

ここまでやりたい! 本格 Web アプリケーション開発 2. ポップアップ画面の実装 2 つの Web 画面を連携してポップアップ画面制御 親アプリケーションに結果を返す JavaScript 決定ボタンの JavaScript 処理 ( 子アプリケーション側ソース ) // ScriptEvents の OnClick イベント window.opener.document.forms[0].iwedit1.value = document.forms[0].iwedit2.value; window.close(); 子アプリケーションの値を Opener( 親アプリケーション ) の項目にセットする Delphi/400のコンポーネントのhtml 名も利用可能 値をセットしたら子アプリケーション終了 子アプリケーション 親アプリケーション 結果をセット

ここまでやりたい! 本格 Web アプリケーション開発 2. ポップアップ画面の実装 別ブラウザ間の連携が実現! C/S アプリケーションのように値を受け渡せる!

ここまでやりたい! 本格 Web アプリケーション開発 機能にこだわる本格 Web アプリケーション! 3.PDF 出力機能の実装 PDF 実装方法はお持ち帰り資料に詳しく掲載

ここまでやりたい! 本格 Web アプリケーション開発 画面にこだわる本格 Web アプリケーション! 4.html を連携した Web 画面実装

ここまでやりたい! 本格 Web アプリケーション開発 4.html を連携した Web 画面実装 VCL for the Web ではフォームにコンポーネントを配置して C/S アプリと同じように Web 画面を作成できる コンパイル

ここまでやりたい! 本格 Web アプリケーション開発 4.html を連携した Web 画面実装 Web 画面はコンポーネントで簡単に作成できるけど コンポーネントの見た目を変えたい 作りたい画面デザインの html なら見つけたのに IWTemplateProcessorHTML コンポーネントで解決!

ここまでやりたい! 本格 Webアプリケーション開発 4.htmlを連携したWeb 画面実装 htmlを画面に連携できる便利なコンポーネント IWTemplateProcessorHTMLコンポーネントの使い方 1 IWTemplateProcessorHTML プロパティ Tamplates: 画面に使いたい html 名を設定 ブラウザ毎に設定も可能

ここまでやりたい! 本格 Webアプリケーション開発 4.htmlを連携したWeb 画面実装 htmlを画面に連携できる便利なコンポーネント IWTemplateProcessorHTMLコンポーネントの使い方 2 Form( 画面フォーム ) プロパティ LayoutMgr: 1 で設定した IWTemplateProcessorHTML を設定

ここまでやりたい! 本格 Webアプリケーション開発 4.htmlを連携したWeb 画面実装 htmlを画面に連携できる便利なコンポーネント IWTemplateProcessorHTMLコンポーネントの使い方 3 アプリケーションを実行するフォルダ内に templates という名前でフォルダを作成する フォルダ内に 1 で指定した html ファイルを配置する ポイント Delphi/400 V2009 以降では html ファイルは必ず UTF-8 で保存

ここまでやりたい! 本格 Webアプリケーション開発 4.htmlを連携したWeb 画面実装 htmlを画面に連携できる便利なコンポーネント IWTemplateProcessorHTMLコンポーネントの使い方 4 コンパイル & 実行 Delphi/400 で作成していない画面が html から読み込まれた!

ここまでやりたい! 本格 Webアプリケーション開発 4.htmlを連携したWeb 画面実装 htmlを画面に連携できる便利なコンポーネント IWTemplateProcessorHTMLコンポーネントの使い方 5 htmlソースをdelphi/400の開発画面で編集する 1 メニューの [ プロジェクト プロジェクトに追加 ] を実行 3Delphi/400 開発画面上で html が編集できる 2 ダイアログから html を選択

ここまでやりたい! 本格 Web アプリケーション開発 4.html を連携した Web 画面実装 html を画面に連携できる便利なコンポーネント IWTemplateProcessorHTML コンポーネントの使い方 6 html に Delphi/400 のコンポーネントを組み込む html 画面で Delphi/400 のコンポーネントを 組み込むには html にコンポーネント名を {% コンポーネント名 %} と記述しておく 例 )IWButton1 を html に組み込む場合 {%IWButton1%} と記述した部分に コンポーネントを連携して表示 操作できる

ここまでやりたい! 本格 Webアプリケーション開発 4.htmlを連携したWeb 画面実装 htmlを画面に連携できる便利なコンポーネント IWTemplateProcessorHTMLコンポーネントの使い方 7 htmlにdelphi/400のコンポーネントを組み込む 1Delphi/400 のコンポーネント 連携! 3html の画面に組み込まれる html のデザインを適用することも可能 2html にコンポーネント名を記述

ここまでやりたい! 本格 Web アプリケーション開発 画面にこだわる本格 Web アプリケーション! 5.jQueryMobile を利用したスマートデバイス Web 画面実装

ここまでやりたい! 本格 Web アプリケーション開発 5.jQueryMobile を利用したスマートデバイス Web 画面実装 jquerymobile のスマートデバイス Web 画面 スマートフォンやタブレット向けにこだわった Web 画面を作成するには jquerymobile を利用すると便利

ここまでやりたい! 本格 Web アプリケーション開発 5.jQueryMobile を利用したスマートデバイス Web 画面実装 jquerymobile のスマートデバイス Web 画面 jquerymobile とは スマートフォンやタブレットで使用する Web アプリケーション用に画面デザインや部品を提供してくれるオープンソース 公式サイト 日本語リファレンス http://jquerymobile.com/ http://dev.screw-axis.com/doc/jquery_mobile/

ここまでやりたい! 本格 Webアプリケーション開発 5.jQueryMobileを利用したスマートデバイスWeb 画面実装 jquerymobileのスマートデバイスweb 画面 jquerymobileで用意されているテンプレート ( 一例 ) ページデザインダイアログツールバーリストビュー これ以外にも よく見るスマートデバイス風画面 部品が html ソースでたくさん提供されている

ここまでやりたい! 本格 Webアプリケーション開発 5.jQueryMobileを利用したスマートデバイスWeb 画面実装 Delphi/400 と jquerymobile の連携 jquerymobileに用意されている画面テンプレートを IWTemplateProcessorHTMLコンポーネントで利用すれば簡単に本格的なスマートデバイス画面デザインが実現! Dlephi/400 jquerymobile + = 格好が良い見た目だけでなく 画面サイズの自動調整なども実装されているので便利!

ここまでやりたい! 本格 Web アプリケーション開発 5.jQueryMobile を利用したスマートデバイス Web 画面実装 Delphi/400 と jquerymobile の連携 基本は画面を jquerymobile で利用して ボタンや入力などを Delphi/400 のコンポーネントで連携すれば OK! ポイント コンポーネントにない jquerymobile 独自の部品 を連携したい場合はどうすれば良いのだろうか? IWDBGrid ではなくてリストビューで商品一覧を表示したいなあ 例えばスマートデバイス風のリストビュー

ここまでやりたい! 本格 Web アプリケーション開発 5.jQueryMobile を利用したスマートデバイス Web 画面実装 Delphi/400 と jquerymobile の連携 jquerymobile 独自の部品を使う場合には Delphi/400 のプログラムで jquerymobile の html ソースを 編集して出力することができる html のソースの書き方はサイト内で詳しく記載されている

ここまでやりたい! 本格 Webアプリケーション開発 5.jQueryMobileを利用したスマートデバイスWeb 画面実装 Delphi/400とjQueryMobileの連携 htmlソースを出力する処理を作成する htmlソース作成処理 ( ソース ) 例 )ClientDataSetからリスト作成 宣言部 public function RenderListView: String; 実装部 function TIWForm1.RenderListView: String; var ul : TStringList; begin // リストビューの html ソースを動的に作成していく ul := TStringList.Create; ul.add('<ul data-role="listview">'); html ソースを作成する関数 StringList に html ソース文を格納していく

ここまでやりたい! 本格 Web アプリケーション開発 5.jQueryMobile を利用したスマートデバイス Web 画面実装 //ClientDataSet のデータ分 リストビューのレコードを作成する while not(clientdataset1.eof) do begin ul.add('<li>'); ul.add( <a><img src= /images/ + ClientDataSet1.FieldByName( 画像ファイルパス ').AsString + '.png">'); ul.add( <h3> + ClientDataSet1.FieldByName( 商品コード ').AsString ); ul.add(clientdataset1.fieldbyname( 商品名 ').AsString + '</h3>'); ul.add( <p> 価格 : + ClientDataSet1.FieldByName( 価格 ').AsString + '</p>'); ul.add( <p> 在庫 : + ClientDataSet1.FieldByName( 在庫数 ').AsString + '</p>'); ul.add('</a></li>'); ClientDataSet1.Next; end; ul.add('</ul>'); // 作成した html 分を関数から返却する Result := ul.text; FreeAndNil(ul); end; リストビューに表示したい項目 ( データや画像 ) をレコードを読み取りながらループで html ソースを作成していく

ここまでやりたい! 本格 Webアプリケーション開発 5.jQueryMobileを利用したスマートデバイスWeb 画面実装 Delphi/400とjQueryMobileの連携 htmlソースを出力する処理を呼び出すイベント IWTemplateProcessorHTML html ソースを追記する場合は OnUnknownTag イベントを利用

ここまでやりたい! 本格 Webアプリケーション開発 5.jQueryMobileを利用したスマートデバイスWeb 画面実装 Delphi/400とjQueryMobileの連携 htmlソースを出力する処理を作成する htmlソース作成処理を呼び出す ( ソース ) procedure TIWForm1.IWTemplateProcessorHTML1UnknownTag(const AName: string; var VValue: string); begin //html 上で {%ListView%} を描画する際に データがオープンされていれば // リストビューを動的に作成する if ((AName = 'ListView') and (ClientDataSet1.Active)) then begin VValue := RenderListView; end; end; html ソースで ListView という部品を表示するときに作成した html ソースを出力する

ここまでやりたい! 本格 Web アプリケーション開発 5.jQueryMobile を利用したスマートデバイス Web 画面実装 html が編集されて完成! この ListView 項目を作成する際に html が編集される

補足 VCL for the Web を拡張する市販コンポーネント情報 TMS IntaraWeb iphone Controls Pack スマートデバイス向け Web アプリケーション用 http://www.tmssoftware.com/site/tmsiwiphone.asp IWCGjQUery http://www.cgdevtools.com/ デスクトップ向け Web アプリケーション用 http://www.cgdevtools.com/?skill=iwcgjquery-suite スマートデバイス向け Web アプリケーション用 http://www.cgdevtools.com/skill/iwcgjquery-mobile-suite/ ミガロ. がご提供している製品ではありません

まとめ Webアプリケーションは様々な環境に対応できる VCL for the WebはC/Sと同様に開発ができる 明細はフレームで制御すれば動的に追加できる ポップアップ画面は JavaScript で受け渡しができる IWTemplateProcessorHTML で html との連携ができる jquerymobile でスマートデバイス画面も簡単に作れる

ご清聴ありがとうございました

お持ち帰り資料 VCL for the Web 基礎知識

お持ち帰り資料 (VCL for the Web 基礎知識 ) VCL for the Webアプリケーションの開発手順 スタンドアロン / アプリケーションモード手順 1 新規プロジェクトの作成 2 コンポーネントを貼り付けてプロパティの設定 3 必要に応じてイベントハンドラを作成 4 コンパイル 5 実行 ( テスト ) C/S アプリケーションと同じような手順で開発が可能

お持ち帰り資料 (VCL for the Web 基礎知識 ) VCL for the Web プロジェクトの新規作成 VCL for the Web プロジェクトの作成手順 1. ファイル 新規作成 その他を選択 2. Delphi プロジェクト VCL for the Web より [VCL for the Web Application Wizard] を選択 3. ウィザード画面より作成モード 保存先 ファイル名等を指定 スタンドアロンモードの場合 StandAlone Application アプリケーションモードの場合 ISAPI Extension Create User Sesseion にチェック ( ユーザーセッションを使う ) プロジェクトの保存先 プロジェクト名を指定

お持ち帰り資料 (VCL for the Web 基礎知識 ) コンポーネントの配置 コンポーネントの貼り付けおよびプロパティの設定 1. ウィザードにて作成されたプロジェクトより Unit1 を選択し フォームを表示 2. [IWStandard] ページより IWLabel IWEdit IWButton をフォームに貼り付けプロパティをセット IWLabel1 コンポーネント Caption プロパティ = メッセージ IWEdit1 コンポーネント Text プロパティ = ( 空文字 ) IWButton1 コンポーネント Caption プロパティ = 表示

お持ち帰り資料 (VCL for the Web 基礎知識 ) コンポーネントの配置 イベントハンドラの設定とコンパイル / 実行 1. IWButton1 コンポーネントの onclick イベントハンドラを設定し 下記コードを入力 procedure TIWForm1.IWButton1Click(Sender: TObject); begin WebApplication.ShowMessage(IWEdit1.Text); end; 2. コンパイル 実行 ( 起動するフォームからブラウザ起動ボタンを押下し動作確認 ) ボタンクリックにより エディットボックスの入力文字列がメッセージボックスに出力 Execute ボタン押下

お持ち帰り資料 (VCL for the Web 基礎知識 ) データベース接続 DB 連結用コンポーネント データベース接続は DBExpress 等 GUI と同様に使用することができます データベースに連結した画面を作成したい場合 [IW Data] ページにコンポーネントが用意されています ([Data Control] ページのコンポーネントに相当 ) 例えば DataSet -> DataSource -> IWDBGrid によってデータを一覧表示

お持ち帰り資料 (VCL for the Web 基礎知識 ) 画面遷移 画面の遷移方法 Delphi プロジェクト VCL for the Web より [New Form] を選択して追加 次画面呼び出し元の処理 - Create メソッドでオブジェクトを生成 - Show メソッドで遷移 次画面の処理 - 画面終了時に Release メソッド呼び出しにより 元のフォームに戻る procedure TfrmMain.btnGoFrm2Click(Sender: TObject); var frmdetail: TfrmDetail; begin frmdetail := TfrmDetail.Create(WebApplication); frmdetail.show; end; フォーム変数は Global 定義されていないので ローカル変数として定義 procedure TfrmDetail.btnBackClick(Sender: TObject); begin Release; end;

お持ち帰り資料 (VCL for the Web 基礎知識 ) グローバル変数 グローバル変数の扱い WEB アプリケーションの場合 WEB ブラウザ単位に変数を保持しなければならない VCL for the Web の場合 UserSession ユニットの IWUserSession クラスに変数を定義し UserSession オブジェクトとして利用する TIWUserSession = class(tiwusersessionbase) sessession: TSession; dbas: TDatabase; qryselectdata: TQuery; private { Private declarations } public { Public declarations } LogOnUserID: String; LogOnUserName: String; end; // ログオンユーザー ID // ログオンユーザー名 グローバル変数 WEB ブラウザ毎に変数が別々に保持される procedure TfrmMain.IWAppFormRender(Sender: TObject); begin // ログオンユーザー名の表示 lbllogonuser.caption := UserSession.LogOnUserName; end;

お持ち帰り資料 Web アプリケーションでの PDF 出力方法 テクニカルレポート No.3 Delphi/400 WEB からの PDF 出力 にも詳しく掲載しています

お持ち帰り資料 (Web アプリでの PDF 出力方法 ) Web アプリケーションで PDF を出力する仕組み PDF を出力するプログラムは CGI アプリケーションとして別途開発し Web アプリケーション ( VCL for the Web) から呼び出して利用する Web アフ リケーション CGI アフ リケーション

お持ち帰り資料 (Web アプリでの PDF 出力方法 ) CGI アプリケーションの作成方法 1 WebBroker プロジェクト (CGI) の作成手順 1. ファイル 新規作成 その他を選択 2. Delphi プロジェクト WebBroker より [Web サーバアプリケーション ] を選択 3. アプリケーション形式を CGI 実行形式 を指定

お持ち帰り資料 (Web アプリでの PDF 出力方法 ) CGI アプリケーションの作成方法 2 プロジェクトが作成されると TWebModule が用意されているので Actions プロパティを選択して Item を作成し 呼び出される URL 部 (PathInfo) にあわせて OnAction イベントに PDF を出力するプログラムを作成する PathInfo は CGI を呼び出す際の URL のアクセスパスになる Action のリストは右クリックから簡単に追加できるので アクセスパスによって複数の機能を実装することも可能 CGI を呼び出す URL 例

お持ち帰り資料 (Web アプリでの PDF 出力方法 ) CGI アプリケーションの作成方法 3 PDF を作成する OnAction( ソース ) procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); var sfilename :String; sfilestream : TFileStream; // 返却用 begin // テンプレートファイルを生成 frmprintpdf := TfrmPrintPDF.Create(nil); try // リクエスト ( パスの Query 部 ) をパラメータにデータ抽出 SQLQuery1.ParamByName('CODE').AsString := Request.QueryFields.Values['CODE']; SQLQuery1.Open; //PDF の作成 (PowerPDF 等 ) with frmprintpdf do begin // ここで抽出データから PDF 帳票を作成する end; PReport1.FileName := sfilename; 呼び出し時のパラメータ (Query 部 ) を抽出に使うこともできる PDF の作成は PowerPDF などでの開発が便利 詳しくはテクニカルレポート No3 Delphi/400 帳票開発ノウハウ公開 にも掲載

お持ち帰り資料 (Web アプリでの PDF 出力方法 ) CGI アプリケーションの作成方法 4 PDF を作成する OnAction( ソース ) //PDF の保存 PReport1.BeginDoc; try PReport1.Print(PRPage1); finally PReport1.EndDoc; end; // 保存されたPDFの読み込み SFileStream := TFileStream.Create(sFileName, fmopenread); try // 読込んだPDFをWebアプリケーションの返却 Response.ContentType Response.ContentStream := sfilename; Response.SendResponse; finally sfilestream.free; end; finally frmprintpdf.release; end; end; 1 度 Web サーバ上に PDF を保存して 保存した PDF をレスポンスとして返す := 'application/pdf';

お持ち帰り資料 (Web アプリでの PDF 出力方法 ) Web アプリケーションから PDF 出力 CGI の呼び出し Web アプリケーションからの CGI の呼び出し例 ( ソース ) procedure TPDFfrm.IWButton1Click(Sender: TObject); begin WebApplication.NewWindow('http://migaro.co.jp/project1.exe/getpdf?code=1'); end; CGI を呼び出して PDF を新しいブラウザで起動する 抽出条件等のパラメータは? 以降の Query 部を編集