SAPUI5アプリケーション開発チュートリアルNo.70-ボタンコントロールを使用してページルーティングジャンプトライアルバージョンをトリガーする方法

SAPUI5初心者向けのステップバイステップの学習チュートリアルのセット

チュートリアルディレクトリ

• SAPUI5ローカル開発環境の確立

• SAP UI5アプリケーション開発チュートリアルの1つ：Hello World

• SAP UI5アプリケーション開発チュートリアル2：SAPUI5のブートストラッププロセスのブートストラップ

• SAP UI5アプリケーション開発チュートリアル3：最初のSAPUI5コントロールの使用を開始する

• SAPUI5アプリケーション開発チュートリアルNo.4：XMLビューの予備調査

• SAPUI5アプリケーション開発チュートリアルNo.5：ViewControllerの予備調査

• SAPUI5アプリケーション開発チュートリアル6-SAPUI5のモジュール（モジュール）の概念を理解する

• SAPUI5アプリケーション開発チュートリアルNo.7-JSONモデルの予備調査

• SAPUI5アプリケーション開発チュートリアルNo.8-多言語サポート

• SAPUI5アプリケーション開発チュートリアルNo.9-最初のコンポーネントを作成する

• SAPUI5アプリケーション開発チュートリアルの10番目-SAPUI5アプリケーションの記述子は何ですか

• SAP UI5アプリケーション開発チュートリアル11：SAPUI5コンテナクラスコントロールページとパネル

• SAPUI5アプリケーション開発チュートリアル12-CSSクラスを使用してUIをさらに美しくする

• SAPUI5アプリケーション開発チュートリアル13-カスタムCSSクラスを追加する方法

• SAPUI5アプリケーション開発チュートリアルNo.14-埋め込みビューの使用方法

• SAPUI5アプリケーション開発チュートリアルNo.15-ダイアログボックスとフラグメントの使用方法

• SAPUI5アプリケーション開発チュートリアル16-アイコンアイコンの使用

• SAPUI5アプリケーション開発チュートリアル17-UI5複合コントロールでの集約バインディングの使用

• SAPUI5アプリケーション開発チュートリアルNo.18-SAPUI5データバインディング構文の特殊記号、および絶対バインディングと相対バインディングの概念の詳細な説明

• SAPUI5アプリケーション開発チュートリアルNo.19-SAPUI5データ型と複雑なデータバインディング

• SAPUI5アプリケーション開発チュートリアル20-SAPUI5の式バインディングの使用法の説明

• SAPUI5アプリケーション開発チュートリアル21-SAPUI5のカスタムフォーマッター

• SAPUI5アプリケーション開発チュートリアルNo.22-フィルターの開発と使用

• SAPUI5アプリケーション開発チュートリアルNo.23-リストコントロールの並べ替えとグループ化

• SAPUI5アプリケーション開発チュートリアルNo.24-ODataデータモデルの使用方法

• SAPUI5アプリケーション開発チュートリアルNo.25-プロキシサーバーを使用して、リモートODataサービスにアクセスするSAPUI5アプリケーションのクロスドメイン問題を解決する

• SAPUI5アプリケーション開発チュートリアルNo.26-MockサーバーでのODataサービスの使用手順の詳細な説明

• SAPUI5アプリケーション開発チュートリアルNo.27-SAPUI5アプリケーションの単体テストツールであるQUnitの概要

• SAPUI5アプリケーション開発チュートリアルNo.28-SAPUI5アプリケーションの統合テストツールであるOPAの概要

• SAPUI5アプリケーション開発チュートリアルNo.29-SAPUI5のルーティングおよびナビゲーション機能の概要

• SAPUI5アプリケーション開発チュートリアルNo.30-SAPUI5のルーティングプロセスでのパラメータの受け渡し

• SAPUI5アプリケーション開発チュートリアルNo.31-ルーティングバックとSAPUI5の履歴

• SAPUI5アプリケーション開発チュートリアルNo.32-カスタムSAPUI5コントロールを作成する方法

• SAPUI5アプリケーション開発チュートリアルNo.33-SAPUI5アプリケーションの応答性

• SAPUI5アプリケーション開発チュートリアルNo.34-デバイスタイプに基づくSAPUI5アプリケーションのデバイス適応

• SAPUI5アプリケーション開発チュートリアルNo.35-ローカルで開発されたSAPUI5アプリケーションをABAPサーバーにデプロイする方法

• SAPUI5アプリケーション開発チュートリアルNo.36-Chromeデベロッパーツールの要素タグを使用してCSSクラスを動的に変更する

• SAPUI5アプリケーション開発チュートリアルNo.37-Chromeデベロッパーツールコンソールパネルを使用した要素のレビュー

• SAPUI5アプリケーション開発チュートリアルNo.38-プログラム実行エラー時にChromeデベロッパーツールを使用してコンテキスト情報を表示する

• SAPUI5アプリケーション開発チュートリアルNo.39-SAPUI5アプリケーションのホワイトスクリーンの一般的なエラーと分析方法

• SAPUI5アプリケーション開発チュートリアルNo.40-component-preload.jsを含むSAPUI5リリースバージョンを作成する方法

• SAPUI5アプリケーション開発チュートリアルNo.41-Chrome拡張機能UI5インスペクターのオフラインインストールと使用

• SAPUI5アプリケーション開発チュートリアルNo.42-SAPUI5に付属の診断ツールの使用方法の概要

• SAPUI5アプリケーション開発チュートリアルNo.43-SAPUI5に付属のサポートアシスタントツールの使用方法の概要

• SAPUI5アプリケーション開発チュートリアルNo.44-ラベルと入力制御テキストが水平方向に配置されていない原因の分析と解決策

• SAPUI5アプリケーション開発チュートリアルNo.45-SAPUI5アプリケーションでjQueryとネイティブDOMAPIを使用する方法

• SAPUI5アプリケーション開発チュートリアルNo.46-メッセージマネージャーを使用して、すぐに使用できる検証情報のスローを実装する

• SAPUI5アプリケーション開発チュートリアルNo.47-SAPUI5文字列型入力フィールドの検証ロジックをカスタマイズする方法

• SAPUI5アプリケーション開発チュートリアルNo.48-SAPUI5アプリケーションでバーコードスキャン機能を開発する方法

• SAPUI5アプリケーション開発チュートリアルNo.49-デスクトップコンピューターの携帯電話で実行されているSAPUI5アプリケーションをデバッグする方法

• SAPUI5アプリケーション開発チュートリアル50-Cordovaを使用してSAPUI5アプリケーションをAndroid携帯にインストールできるハイブリッドアプリケーションに生成する方法

• SAPUI5アプリケーション開発チュートリアルNo.51-Chromeを使用して携帯電話で実行されているSAPUI5Cordovaハイブリッドアプリケーションをデバッグする方法

• SAPUI5アプリケーション開発チュートリアルNo.52-SAPUI5の標準コントロールをCordovaプラグインと組み合わせて使用​​して、バーコードスキャンのために携帯電話のカメラを呼び出す方法

• SAPUI5アプリケーション開発チュートリアルNo.53-SAPUI5データ型をカスタマイズする方法（データ型）

• SAPUI5アプリケーション開発チュートリアルNo.54-ローカルSAPUI5アプリケーションをローカルFioriランチパッドに構成する方法

• SAPUI5アプリケーション開発チュートリアルNo.55-Node.jsExpressを介してローカルSAPUI5アプリケーションをパブリックネットワークにデプロイする方法

• SAPUI5アプリケーション開発チュートリアルNo.56-SAPUI5ツリーコントロール（ツリー）の開発

• SAPUI5アプリケーション開発チュートリアルNo.57-ODataアノテーションに基づいたスマートフィールドの使用方法の学習

• SAPUI5アプリケーション開発チュートリアル58-ファクトリメソッドを使用して、実行時にさまざまなタイプのリストラインアイテムコントロールを動的に作成します

• SAPUI5アプリケーション開発チュートリアルNo.59-SAPUI5アプリケーションで世界地図を表示する方法

• SAPUI5アプリケーション開発チュートリアルSAPUI5マップコントロールの60の高度な使用法

• SAPUI5アプリケーション開発チュートリアルNo.61-SAPUI5アプリケーションでのガントチャートの描画

• SAPUI5アプリケーション開発チュートリアルNo.62-ODataV4に基づくSAPUI5フォームコントロールの使用の概要

• SAPUI5アプリケーション開発チュートリアルNo.63-ODataV4に基づくローカルMockサーバーの実装の詳細な紹介

• SAPUI5アプリケーション開発チュートリアルNo.64-ODataV4に基づくSAPUI5テーブルコントロールにフィルター（フィルタリング）およびソート（ソート）機能を実装する方法

• SAPUI5アプリケーション開発チュートリアルNo.65-ODataV4に基づいてSAPUI5フォームコントロールを作成、編集、および保存する方法

• SAPUI5アプリケーション開発チュートリアルNo.66-ODataV4に基づくSAPUI5フォームコントロールに削除機能を実装する方法

• SAPUI5アプリケーション開発チュートリアルNo.67-ODataV4に基づくSAPUI5リスト詳細（リスト詳細）レイアウトの実装

• SAPUI5アプリケーション開発チュートリアルNo.68-SAPUI5ルーティングが失敗したときにカスタムのNOTFoundページを表示する方法

• SAPUI5アプリケーション開発チュートリアルNo.69-SAPUI5が見つからないページから通常のアプリケーションページに戻る方法

• SAPUI5アプリケーション開発チュートリアルNo.70-ボタンコントロールを使用してページルーティングジャンプをトリガーする方法

説明する

Jerryは、2014年にSAP Chengdu ResearchInstituteのCRMFiori開発チームに参加して以来、SAP UI5と連絡を取り合っています。彼は、SAPコミュニティおよびWeChatパブリックアカウント「Wang」でSAPUI5の動作原理とソースコード分析に関する多くの記事を公開しています。 Zixi」。

Jerryの記事で、SAP UI5について何も知らない初心者は、どの資料から始めるのがよいでしょうか。前述したように、ジェリーはSAP UI5の新人からずっとやって来ました。彼は、ABAP開発のバックグラウンドしかない開発者がSAP UI5開発分野に移行するのは簡単ではないことを知っているので、SAPUI5初心者向けにこの学習チュートリアルを予備で設計しました。時間。、完全なSAP UI5アプリケーションを開発するプロセスをいくつかのステップに分割し、各ステップに含まれるすべての知識ポイントをカバーするように努めます。これらの知識ポイントは、私のUI5ソースコード分析シリーズの記事ほど詳細ではないかもしれませんが、SAP UI5の初心者が理解しやすく、理解しやすいように努めています。

このチュートリアルの各ステップのソースコードはGithubに保存されており、フォルダー01、02、03などで識別されます。たとえば、ステップ1のソースコードはここにあります。

各ステップは、いくつかの新機能が追加された前のステップに基づいています。SAP UI5の基礎がまったくない、またはほとんど知識がない初心者には、最初のステップから順番に段階的に学習し、これらのコードをローカルにダウンロードし、チュートリアルのテキスト説明に協力して、理解を深めることをお勧めします。 。

チュートリアルの各ステップについて質問がある場合は、チュートリアルのステップに対応する記事にコメントしてメッセージを残してください。

このチュートリアルの67番目の記事：SAPUI5アプリケーション開発チュートリアルNo.67-ODataV4に基づくSAPUI5リスト-詳細（リスト-詳細）レイアウトの実装SemanticPageユーザーリストの任意の行をクリックすると、表示できることを紹介しました。ユーザー情報の詳細ページの機能：

また、SAP UI5ルーティング機能ではユーザー詳細ページを開くことができないため、詳細ページを表示した後も、SAPUI5アプリケーション全体のブラウザアドレスバーに対応するURLは変更されないことを強調しました。

SAP UI5工順機能を実際に使用して、一覧ページから詳細ページにジャンプするには、以下のステップを参照してください。

SAPUI5アプリケーション開発チュートリアルNo.29-SAPUI5のルーティングおよびナビゲーション機能の概要

この記事では、ボタンコントロールを介してSAPUI5ページルーティングジャンプをトリガーするための2つの異なる動作を紹介します。

このステップが完了した後に達成される効果を最初に見てください。フォルダ70に移動し、コマンドラインを実行してui5 serve、次のURLにアクセスします。

http：// localhost：8080 / webapp / index.html

左ボタンと右ボタンを参照してください。

クリックして、次のカスタムページ跳转(不修改url)にジャンプします。Not Found

カスタムのNotFoundページの開発手順は、このチュートリアルの以前の記事で説明されていることに注意してください。

SAPUI5アプリケーション開発チュートリアルNo.68-SAPUI5ルーティングが失敗したときにカスタムのNOTFoundページを表示する方法

ただし、ブラウザのアドレスバーにある上記のページのURLに注意してください。アプリケーションの最初のページからこの見つからないページにジャンプする過程で、アドレスバーのURLは変更されていないことがわかりました。まだ：

http：// localhost：8080 / webapp / index.html

右をクリックして、[跳转(要修改url)従業員リスト]ページにジャンプします。

この時点で、URLは次のように変更されます。

http：// localhost：8080 / webapp / index.html＃/ employee

以下は、このステップの詳細な技術的実装の詳細です。