Cover Image

HCL Z and I Emulator for Transformation (ZIETrans) のリサイズ可能なデフォルトのトランスフォーム

2022/7/25 - 読み終える時間: 3 分

Resizable Default Transformation in ZIETrans の翻訳版です。


HCL ZIETrans のリサイズ可能なデフォルトのトランスフォーム

2022年7月22日

著者: Shobith R / Software Engineer Lab Services, HCL ZIE

ZIETrans を使用すると、IBMR System zR プラットフォーム上で動作する 3270 アプリケーションと IBM I オペレーティングシステムプラットフォーム上で動作する 5250 アプリケーションに使いやすいグラフィカルユーザーインターフェイス (GUI) を提供する Web アプリケーションを作成することができます。ZIETransは、オンライン・トランザクション処理(OLTP)容量を必要とせずに、5250アプリケーションにアクセスすることができます。

ホストアプリケーションを変更することなく、またカスタマイズすることなく、ZIETransのデフォルト変換機能を使って、ホストアプリケーションを迅速にWebアプリケーションに変換することができます。

典型的なZIETransのWebベースアプリケーションでは、ホスト画面のコンテンツは、ZIETransが提供するデフォルトのレンダリングルールによって、Webブラウザ上でHTMLページに変換されます。

ホスト画面のデータは、行と列の長さが固定され、データはそれに合わせて整列されたレイアウトになっています。ZIETransのデフォルト変換では、ホストデータはホスト画面と同じようなレイアウトでWebブラウザ上に描画されます。Web上の変換されたホスト画面は、フォントサイズ、幅、高さが固定されています。

変換後のホスト画面データをWeb上で表示するためには、ホスト画面データを持つHTML要素のフォントサイズ、幅、高さを、データの整列を崩さずに利用可能なブラウザのウィンドウに合うように調整する必要があります。このように、デフォルトの変換では、アラインメントや可読性を失うことなく、利用可能なウィンドウサイズに合わせることができます。

画像の説明

図1:アライメントに問題があるウィンドウにフィットするデフォルトの変換


ウィンドウサイズ変更時にデフォルトの変換をサイズ変更可能

ブラウザのウィンドウサイズが変更されたときに、新しいフォントサイズ、幅、および高さをHTML要素に適用します。ブラウザウィンドウのサイズを変更した後、新しいフォントサイズ、幅、高さを導出する必要があります。

以下のパラメータにより、新しいフォントサイズを導出します。

  • ブラウザウィンドウの高さ
  • ブラウザウィンドウの幅
  • ズームレベル

カスタム式を使用すると、ウィンドウの高さ、ズームレベル、およびフォントの拡大率を使用してフォントサイズを計算し、ブラウザウィンドウの高さを変更するとそれに応じてフォントを拡大縮小することができます。

ユーザーは、ブラウザがページを読み込んだ後、ウェブ変換されたホストコンテンツをより大きなモニターに適合させるために、同じアプローチを使用することができます。

最大化されたウィンドウのデフォルトの変換

画像の説明

図2:最大化されたウィンドウのデフォルトの変換

最小化されたウィンドウのデフォルトの変換

画像の説明

図3:最小化されたウィンドウのデフォルトの変換


デフォルトの変換を使用したモーダル上のドラッグ可能なハンドル

前のセクションで見たのは、ブラウザのリサイズに関するものです。このセクションでは、カスタマイズされたモダナイズされた画面に、デフォルトの変換コンテンツをポップアップ ウィンドウとして表示する方法について説明します。

Bootstrapなどのライブラリの助けを借りて、デフォルトのトランスフォームをモーダルと呼ばれるポップアップで表示されるコンテンツにすることができます。

さらに、ユーザーがポップアップを自分の好きなサイズで表示したいと希望したとします。その場合、以下の図4に示すように、jQuery UIなどのライブラリの助けを借りて、端や角にドラッグ可能なハンドル( )を提供することで、ユーザーがモーダルのサイズを変更できるようにすることができます。

画像の説明

図4: ドラッグ可能なハンドルを持つデフォルトの変形モーダル

これらのハンドルを使って、エンドユーザーは、図5と図6に示すように、ハンドルをドラッグすることによって、モーダルのサイズを簡単に変更することができます。

画像の説明

図5:サイズ変更前のデフォルトの変形モーダル

画像の説明

図6: サイズ変更後のデフォルトの変形モーダル

図5では、デフォルトの変形モーダルが小さくなっており、モーダルの左端または右端にハンドルが浮かんでいるのが見えます。ハンドル(画像に表示)をドラッグすると、モーダルは縦横比を維持したまま拡大し、フォントサイズはブラウザの高さに依存します。

モーダルの高さを変更すると、デフォルトの変換コンテンツは、新しいモーダルのスペースに適合する必要があります。これは、モーダル空間に適合するように、デフォルトの変換のフォントサイズとスケーリング係数を変更することによって達成することができます。ウィンドウの高さとズームレベルに基づいてカスタム式を使用してフォントサイズを計算し、フォントのスケーリング比を導出し、それに応じてフォントをスケーリングすることができます。

以下のパラメータにより、新しいフォントサイズを導出します。

  • Modal height
  • Modal width
  • Zoom level

その結果、Figure 6 に示すように、モーダルは拡大されます。

HCL ZIEにおける自動化、サービス提供、または技術的な詳細については、HCL Mainframe Lab Services(zio@hcl.com)までお問い合わせください。

このブログについて

HCL Japan の Software 部門の複数担当者で HCL Software 全般について記しています。

Tags

Academy Accelerate Accelerator Ambassador AoC AppDev Pack AppScan ASoC beta BigFix BigFix 9.5 BigFix_Wiki BigFix Workspace branding CAA Client Applicatin Access cloud Cloud Apps Cloud Native Commerce Common Local License Server community companion Compass compliance Connections Connections 6.5 ConnectionsDocs Connnections CVE-2021-44228 developerWorks DevOpes Velocity DevOps DevOps Code ClearCase DevOps Code RealTime DevOps Deploy DevOps.Launch.AppScan DevOps Model RealTim DevOps Plan DevOps Test DevOps Velocity Digital Experience Discover document Doino Volt Domino Domino AppDev Pacl Domino Leap Domino Volt Domino管理者アップデート認定試験対策 DQL DRYiCE dW dx Enterprise Integrator event fix fix_list fixlist forum General guide HCAA HCL Ambassador HCL Ambassadors HCL Domino REST API HCL OneTest Embedded HCL Z and I Emulator HCL Z and I Emulator for Transformation HCLSoftware U hints_and_tips history HTMO IBM_i iControl ID_Vault iNotes ios ios13 ipad iPhone IZSAM KEEP Launch Launch.DevOps Leap Link logo MarvelClient mobile mui nds2019 ndv12beta News Noets/Domino Nomad Nomad Mobile Nomad Web Notes Notes/Domino Notes/Domino 10 Notes/Domino 11 notes-domino-9-10-limited-supportability-as-of-202204 Notes/Domino V12 Notes/Domion Notes/Domno notescons Now on_premises OneDB OneTest OnTime osaka press_release relay REST RTist SafeLinx Sametime Sametime 11 SoFy support survey system_requirement techtek Traveler Traveler 10 Traveler for Microsoft Outlook traveler.zip Unica Unica Discover Unica Interact UrbanCode Deploy UrbanCode Velocity v11 V12 Verse Verse Mobile Verse On-Premises VersionVault Volt Volt MX Volt MX Go Volt MX サンプルアプリ Webinar win7 Wordload Automation Workload Automation youtube Z Z Abend Investigator Z and I Emulator Z and I Emulator for Transformation Z and I Emulator for Web Z and I Emulator for Web Client Z Asset Optimizer Z Data Tools Z Software Asset Manager ZAI ZAO ZIE ZIE for Transformation ZIE for Web ZIE for Windows ZIET ZIETrans ZIEWeb うるう年 イベント ウェビナー ガイド クラウド クラウド終了 サイジング サポート サポート技術情報 サポート期間 サポート終了 セキュリティ セキュリティー セキュリティー脆弱性 セミナー ダイバーシティー ダウンロード テクてく テクてく Lotus 技術者夜会 ニュース ノーツコンソーシアム バージョンアップ パフォーマンス パートナー ベータ ポートフォリオ ライセンス 九州地区 Notes パートナー会 互換性 出荷日 各種ご案内資料 研修