WDJ開発の基本:基本的なUIエレメント
0 98

このトピックでは、WDJ開発における各基本UIエレメントを取り上げて説明します。(このトピックは編集中です。)

用途 
他のUIエレメントのラベルとして表示される。
関連付けのUIエレメントのプロパティ「state」が「required」になっている場合、必須マークが表示される。
主要プロパティ

プロパティ設定可能値説明
labelForUIエレメントID関連付けUIエレメントのIDを設定
designemphasized light standard強調表示に設定 「:」なしに設定 基本表示
textテキスト関連付けUIエレメントのIDを設定

Web DynproのValue Help
① Simple Value Selector(SVS)
② Extended Value Selector(EVS)
③ Object Value Selector(OVS)
help.sap.com - Value Help Tutorials

0 98
みんなのツイート (0)

関連サマリー


  • WDJ 0 Votes 96 閲覧数


    このトピックでは、WebdynproでのRFCモデル作成方法及び手順を取り上げて説明します。

    Model作成

    Webdynproでは、RFCの呼出にはaRFC用のModelを作成する必要がある。またModel作成の際に、
    モデルデータとメタデータオブジェクトをセットで定義する必要がある。
    aRFC呼出Modelの作成イメージを下図に示す。

    データバインド

    概要イメージ
    Webdynproでは、RFCのモデルデータをWebdynpro内で利用するには、Webdynpro のCustom Controllerへバインドする必要があります
    また、モデルデータをUIに表示するには、さらにView Controllerへバインドする必要があります
    RFCモデルデータのバインドイメージを下図に示す。

    RFC I/F呼出

    // 通貨単位取得 String waers = wdThis.getWaers(); // ex: USD // 通貨単位の小数桁数を取得 BAPI_CURRENCY_GETDECIMALSModel model = new BAPI_CURRENCY_GETDECIMALSModel(); Bapi_Currency_Getdecimals_Input input = new Bapi_Currency_Getdecimals_Input(model); input.setCurrency(waers); wdContext.nodeBapi_Currency_Getdecimals_Input().bind(input); input.execute();

    String type = wdContext.currentReturnElement().getType();
    if (type.equals(MSGTYP_ERROR)) {
    IWDMessageManager msgMgr = wdComponentAPI.getMessageManager();
    sgMgr.reportException(wdContext.currentReturnElement().getMessage());
    }
    int curdecimals = wdContext.currentCurrency_DecimalsElement().getCurdecimals();

    ※wdContext.nodeOutput().invalidate()の呼出により、RFCの処理結果はWebdynproで取得可能になる

     


  • WDJ 0 Votes 137 閲覧数


    このトピックでは、エラーハンドリング処理のプログラミング方法を取り上げて説明します。

    概述

    エラーハンドリング (英:error handling)とは、、プログラムの処理中に処理が妨げられる事象が発生した際、その処理をエラーとして対処する処理のことです、例外処理とも呼ばれます。

    エラーハンドリングの処理内容は、プログラム内にあらかじめ用意しておく必要がありますので、このトピックでは、WDJ開発におけるエラーハンドリング処理の方法や手順を取り上げて説明します。
    エラーハンドリング処理を行う必要がある。
    Webdynproでは、エラーハンドリング処理は以下の手順で行う。
    エラーハンドリング処理の概要手順
    ① Message Poolの定義追加
    ② Message Poolへのアクセス
    ③ UIへの出力領域の定義
    ④ エラーハンドリング処理

    メッセージの定義

    メッセージはメッセージプールに定義されます。メッセージプールはWebdynproコンポーネント毎に一つのみが存在します。

    メッセージはプログラムが格納されたDCのメッセージプールに定義すること以外、共通的なDCを一つ用意して、そのなかのメッセージプールでメッセージを纏めて定義することによりメッセージの共通化を図ることができます。

    メッセージ文言はパラメータをつけることができます。

    メッセージの取得

    Webdynproでは、Message PoolへのアクセスやMessage Poolからメッセージの取得に、以下の手順で行う。
    IWDTextAccessor APIを利用し、Message Poolへの接続を作成する。
    Message Poolへの接続を用い、MessageKeyをもとに、メッセージを取得する。

    Object[] parameters = new Object[1]; parameters[0] = parameter;

    IWDTextAccessor textAccessor = wdComponentAPI.getTextAccessor();
    String msg = textAccessor.getText('dbupderror'), parameters); メッセージ領域の定義

    Webdynproでは、画面上にメッセージを表示するには、MessageAreaというUIエレメントを配置する必要があります、
    配置イメージを下図に示します。

    エラーハンドリング処理

       
    Webdynproでは、エラーハンドリング処理により、アプリケーション例外を発生させ、予め定義されるエラーメッセージ内容をします。
    具体的な手順やコード例は以下のように示します。


    if (!wdThis.check()){
    //MessageManagerを取得
    IWDMessageManager msgmgr = wdThis.wdGetAPI().getComponent().getMessageManager();
    //メッセージを出力
     msgmgr.reportContextAttributeMessage(
    wdThis.wdContext.currentMyDataElement(), // エラーメッセージにリンクしているUIエレメント
    wdThis.wdContext.nodeMyData().getNodeInfo().getAttribute("Name"), // チェック項目
    IMessageUIComp.DBUPDERROR, // MessagePoolに登録されるメッセージキー
    null,
    true);
    }

     


  • WDJ 0 Votes 97 閲覧数


    コンセプト

    WebdynproはSAPにおいて、ユーザインタフェースを作成するためのプログラミングモデルのこと。
    Webdynproの具体的なコンセプトは以下のとおり

    コーディングの最小化デザインの最大化コンポーネントの再利用のサポートWebサービスとデータバインドのサポート画面レイアウトとプログラムロジックの分離プラットフォーム非依存WebDynproアプリケーション

    WebdynproアプリケーションはWebdynproコンポーネントへのエントリポイントであり、URLを介して呼び出せる唯一のWebdynproエンティティです 。以下はそのイメージ図です。

    アプリケーションはインタフェースビューを持っているWDコンポーネントのアクセスポイントとして提供される。
    各アプリケーションにはWDコンポーネント、インタフェースビュー及びStartupプラグを定義する。

    WebDynproコンポーネントインタフェースビュー

    ・インタフェースビューとして公開されたWDコンポーネントのウィンドウをWDアプリケーションまたは別のWDコンポーネントから呼び出すことができる。
    ・複数のインタフェースビューを一つのウィンドウに割り当てることができる。
    ・インタフェースビューに定義するプラグは該当インタフェースビューを参照するウィンドウに定義されている必要がある。

    インタフェースコントローラー

    ・各WDコンポーネント毎に一つのインタフェースコントローラーが自動定義されて、コンポーネントコントローラーとマッピングされる。
    ・インタフェースコントローラーに定義するコンテキスト、メソッド、イベントはコンポーネントコントローラーに定義されている必要がある。
    ・インタフェースコントローラーに定義したコンテキスト、メソッド、イベントのみが別のWDコンポーネントから利用できる。

    コンポーネントコントローラー

    ・WDコンポーネント毎に一つのコンポーネントコントローラーが自動定義されて、WDコンポーネント全体の制御ロジックを実装する。
    ・UIエレメントのイベントとは違う独自のイベント処理が必要な場合、イベントを定義することができる。

    カスタムコントローラー

    ・コンポーネントコントローラの付属コントローラーとして定義可能なコントローラーでコンポーネントコントローラーが大きくなる場合、
    処理を分けることができる。

    ウィンドウコントローラー

    ・主にインバウンドプラグの遷移に関するロジックを実装する。MVCモデル概念に基づき、詳細のロジックはできる限り、コンポーネントコントローラーまたは
    カスタムコントローラーで実装する。

    ウィンドウ

    ・ビューの配置とプラグによる画面遷移のモデリングを行う。

    ビューコントローラー

    ・UIエレメントから発生するイベントのハンドリング、動的レイアウト変更、画面遷移等のロジックを実装する。MVCモデル概念に基づき、
    詳細のロジックはできる限り、コンポーネントコントローラーまたはカスタムコントローラーで実装する。

    ビュー

    ・画面のレイアウトをモデリングする。各UIエレメントに関する詳細は「X.X UIエレメント」を参照する。

    プラグ

    ・主に、インバウンドプラグとアウトバウンドプラグが存在する。ウィンドウでアウトバウンドプラグをインバウンドにリンクさせることにより
    画面遷移を定義し、ウィンドウコントローラーまたはビューコントローラーからアウトバウンドプラグのイベントを発生して実際の画面遷移を行う。
    ・インバウンドプラグは遷移先の画面で処理ロジックを追加することができる。
    ・プラグの種類としては下記の通り存在する。
    Startupプラグ WDアプリケーションから呼び出す開始用のプラグ
    Exitプラグ WDアプリケーションの処理を終了してログオフ等を行うプラグ
    Inboundプラグ 通常の画面遷移で遷移先用プラグ
    Outboundプラグ 通常の画面遷移で遷移元用プラグ

    コンテキスト

    ・ノードとアトリビュートで構成されるWDJ特殊のデータ構造。

    イベントとイベントハンドーラー

    ・イベントとしてはUIエレメントイベント、プラグイベント、そしてユーザ定義イベントが存在する。
    ・UIエレメントから発生するイベントは通常アクションという。

    シンプルタイプとストラクチャー

    ・WDで使用されるデータの種類、桁数制限等をシンプルタイプとして定義し、複数の場所から再利用することができる。
    ・関連する複数のデータをストラクチャーとして定義してコンテキストで使用することができる。

    モデル

    WDJでは、一般的によく利用されるモデルの種類として、 EJB、WebService、RFCの三種類があります。

    WDのモデルインポート機能によってES/CAF/BAPIを呼び出すモデルが自動生成され、WD上利用される。

    RFCモデル

    Webdynproでは、RFCの呼出はSAP Java Connector(JCo)通信レイヤ経由で行われます。
    SapECCシステムから貰ったRFC I/F情報をもとに、Webdynpro FrameworkがRFCの呼出用メタデータクラスをJava ディクショナリに自動的に作成します。
    RFC I/Fレイヤアーキテクチャのイメージを下図に示します。


  • WDJ 0 Votes 124 閲覧数


    入力補助機能として検索ヘルプまたは入力値提案を実装することができます。

    単純型検索ヘルプ

    UIエレメント「DropDownByKey」を利用して実装する。標準設定によって項目数が50を超える場合、ポップアップ検索ヘルプとして表示されます。
    該当設定方法は「RadioButtonGroupByKey」も同一です。

    静的設定

    固定値で項目一覧を設定する場合のみ使用します。
    UIエレメント「DropDownByKey」のプロパティ「selectedKey」にマッピングされているコンテキストアトリビュートのタイプにシンプルタイプを設定して、「Enumeration」項目に項目一覧を追加する。

    動的設定

    値を動的に設定する場合、使用する。
    UIエレメント「DropDownByKey」のプロパティ「selectedKey」にマッピングされているコンテキストアトリビュートに対してコーディング処理を行う。
    該当ロジックはコンテキストを定義したコントローラーに実装する。
    ※コンテキストを参照しているコントローラーに実装した場合、「must not modify the datatype of a mapped attribute」エラーが発生する。

    // コンテキストからModifiableSimpleValueSet オブジェクトを取得 com.sap.typeservices.IModifiableSimpleValueSet<String> valueSet = wdContext.currentHeader01Element().getAttributePointer(IPublicContract006Comp.IHeaderElement.CATEGORY). getAttributeInfo().getModifiableSimpleType().getSVServices().getModifiableSimpleValueSet();

    // ESまたはBAPIのドロップダウンを設定
    List<Category> list = zprocessInit.getT_Category();
    for(Category category : list ) {
    valueSet.put(category.getKey(), category.getText());
    }
    // ドロップダウンの初期値を設定する場合
    wdContext.currentHeaderElement().setCATEGORY(list.get(0)); 複合機能型検索ヘルプ

    検索条件付きの検索機能を表す。複合機能型検索ヘルプはWDJのObject Value Selector(OVS)機能を利用した共通部品として実装され、
    各業務画面から利用します。
    検索用のヘルプ標準部品を利用
    OVSは検索で使用するノードと処理ロジックだけ追加することで簡単に検索ヘルプを追加することができます。
    自動生成されるOVSで使用する検索条件用ノードと検索結果用ノードは用意する必要があります。
    ・OVS設定処理ロジック
    OVS用のノードとOVSリスナーを利用してOVSを設定します。


    // 検索ヘルプを設定するコンテキスト
    com.sap.tc.webdynpro.progmodel.api.IWDAttributeInfo[] ovsStartUpAttributes
    = {wdContext.nodeHead().getNodeInfo().getAttribute(IPrivateOVSView.IHeadElement.PROCESS_TYPE)};
    // OVSの処理リスナー (クラス定義必要)
    com.sap.tc.webdynpro.progmodel.api.IWDOVSContextNotificationListener listener
    = new TestOVSContextNotificationListener ();
    // OVSの設定処理
    com.sap.tc.webdynpro.progmodel.api.WDValueServices.addOVSExtension(
    "TestOVS",       // OVS名称ー任意
    ovsStartUpAttributes,   // 検索ヘルプ設定対象
    wdContext.nodeInput(),  // 検索条件ノード
    wdContext.nodeOutput(), // 検索結果ノード
    listener        // リスナーオブジェクト
    );

    ・OVSリスナークラス定義
    インタフェースIWDOVSContextNotificationListenerを実装してOVSの実行時呼び出されるクラスを定義し、OVSの設定で利用される。


    private class TestOVSContextNotificationListener implements
    com.sap.tc.webdynpro.progmodel.api.IWDOVSContextNotificationListener{
    // OVSの初期検索条件の値設定ロジック
    public void applyInputValues(com.sap.tc.webdynpro.progmodel.api.IWDNodeElement applicationNodeElement,
    com.sap.tc.webdynpro.progmodel.api.IWDNodeElement queryInputNodeElement) {
    queryInputNodeElement.setAttributeValue(
    IPublicTest04Comp.IInputElement.PROCESS_TYPE,
    applicationNodeElement.getAttributeValue(IPrivateOVSView.IHeadElement.PROCESS_TYPE));
    }
    // 検索処理の実装
    public void onQuery(com.sap.tc.webdynpro.progmodel.api.IWDNodeElement queryInputNodeElement,
    com.sap.tc.webdynpro.progmodel.api.IWDNode queryOutputNode) {
    // 検索ロジック
    for(int i = 10; i < 20; i++) {
    IWDNodeElement element = queryOutputNode.createAndAddElement();
    element.setAttributeValue(
    IPublicTest04Comp.IOutputElement.PROCESS_TYPE, "11" + i);
    element.setAttributeValue(
    IPublicTest04Comp.IOutputElement.PROCESS_TYPE_NAME, "テストタイプ1111" + i);
    }
    }
    // 検索結果の行を選択した後の処理
    public void applyResult(com.sap.tc.webdynpro.progmodel.api.IWDNodeElement applicationNodeElement,
    com.sap.tc.webdynpro.progmodel.api.IWDNodeElement queryOutputNodeElement) {
    // start copying the attributes
    applicationNodeElement.setAttributeValue(
    IPrivateOVSView.IHeadElement.PROCESS_TYPE,
    queryOutputNodeElement.getAttributeValue(IPublicTest04Comp.IInputElement.PROCESS_TYPE));
    }

    検索用のヘルプカスタム部品を作成
    IWDOVSProviderとIWDOVSDialogを実装したクラスを利用して別ウィンドウとビューを持つOVS画面を作成できます。
    ・OVS設定処理ロジック
    カスタム部品は別のウィンドウとビューを保持するので、OVS用のノードとOVSリスナーの代わりにOVSプロバイダ及びOVSダイアログを利用する。
    設定ロジックは一般的にコンポーネントコントローラーまたはカスタムコントローラーのwdDoInitに実装します。


    // 検索ヘルプを設定するコンテキスト
    com.sap.tc.webdynpro.progmodel.api.IWDAttributeInfo[] ovsStartUpAttributes
    = {wdContext.nodeHead().getNodeInfo().getAttribute(IPrivateOVSView.IHeadElement.PROCESS_TYPE)};
    // OVSプロバイダ (クラス定義必要)
    com.sap.tc.webdynpro.progmodel.api.IWDOVSProvider provider = new TestOVSProvider();
    // OVSの設定処理
    com.sap.tc.webdynpro.progmodel.api.WDValueServices.addOVSExtension(
    "TestOVS",       // OVS名称ー任意
    ovsStartUpAttributes,   // 検索ヘルプ設定対象
    provider,   // OVSプロバイダ
    null       
    );

    ・OVSプロバイダ及びOVSダイアログクラス定義
    インタフェースIWDOVSProviderを実装したOVSプロバイダはOVSダイアログ情報を保持しています。


    private class TestOVSProvider implements IWDOVSProvider {

    OVSDialg dialog;
    IWDOVSControl ovsControl;

    // OVSウィンドウを生成して返す
     @Override
     public IWDOVSDialog createOVSDialog(IWDOVSControl ovsControl) {
      dialog = new OVSDialg();
      this.ovsControl = ovsControl;
      return dialog;
     }
    // 明示的にウィンドウを閉じる場合、使用
     public void closeWindow() {
      dialog.closeWindow();
     }
    // OVSコントロール情報が必要な場合、使用
    // OVSを呼び出したアトリビュート情報等
     public IWDOVSControl getControl() {
      return this.ovsControl;
     }

    }

    インタフェースIWDOVSDialogを実装したOVSダイアログはOVSウィンドウのオブジェクトを持っている。


    private class OVSDialg implements IWDOVSDialog {
    IWDWindow window;
     
    // ウィンドウを「閉じる」ボタンを押すタイミングで呼び出される
      @Override
      public void exit() {
      // TODO Auto-generated method stub
      }
       // OVSヘルプとして使用するウィンドウを返す
      @Override
      public IWDWindow getWindow() {
       IWDWindowInfo windowInfo =
          (IWDWindowInfo)wdComponentAPI.getComponentInfo().findInWindows("TestCompWindow");
       window = wdComponentAPI.getWindowManager().createModalWindow(windowInfo);
       return window;
      }
    // ウィンドウを閉じる処理として明示的にウィンドウを閉じる場合、使用
      public void closeWindow() {
       window.destroyInstance();
      }
    } 入力値提案

    データの一部を入力すると入力値にヒットするデータが一覧として表示されます。

    UIエレメント「InputField」の「suggestValues」を「true」に設定してマッピングしたコンテキストアトリビュートには「単純型検索ヘルプ」と同一のコディングまたはシンプルタイプマッピングを行います。


  • WDJ 0 Votes 207 閲覧数


    このトピックでは、ポップアップ処理を取り上げて、そのプログラミング方法を説明します。

    Confirmation Dialog

    Confirmation DialogはWDJ標準ライブラリに組み込まれていますので、そのまま利用可能です。

    プログラムの構造は主にいかのようになります。

    Yes, Noに該当するevent handler処理を記述しておくConfirmation Dialogを作成Yes, Noに該当するevent handlerを定義すConfirmation Dialogを表示

    サンプルソースは以下です。

    // 追加されたイベント(Yesボタンがクリックされたときの動き) public void Yes(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) { //@@begin Yes(ServerEvent) logger.infoT("Yes button is clicked."); //@@end } //@@begin createConfDialogWindow() IWDWindowManager winMan = wdComponentAPI.getWindowManager(); IWDControllerInfo viewCtrlInfo = wdComponentAPI.getComponentInfo(). findInViews("WelcomeView").getViewController(); IWDEventHandlerInfo evtHndlr = viewCtrlInfo.findInEventHandlers("Yes"); IWDConfirmationDialog confDialog = winMan.createConfirmationWindow( "本当にいいですか?", evtHndlr, "はい"); evtHndlr = viewCtrlInfo.findInEventHandlers("No"); confDialog.addChoice(evtHndlr, "いいえ"); confDialog.show(); //@@end 画面付きモーダルダイアログ

    画面付きポップアップウィンドウとはWDJ部品の中でウィンドウをポップアップとして表示することを指します。
    ポップアップウィンドウの制御はコンポーネントコントローラーまたはカスタムコントローラーのに定義すします。

    サンプルソースは以下です。

    public void openPopup( ) { //@@begin openPopup() if (popup == null) { // ウィンドウ取得 IWDWindowInfo windowInfo = wdComponentAPI.getComponentInfo().findInWindows("PopupWin"); // モダルウィンドウ生成 popup = wdComponentAPI.getWindowManager().createModalWindow(windowInfo); } // ポップアップウィンドウを開く popup.show(); //@@end } ... public void closePopup( ) { //@@begin closePopup() // ポップアップウィンドウを閉じる popup.hide(); //@@end } ... //@@begin others // ローカルウィンドウオブジェクト private IWDWindow popup; //@@end 別画面表示

    別画面表示はURLを元に別ブラウザーを開くことを指します。
    他のWDJアプリケーションを起動する「IWDDeployableObject」と「WDURLGenerator」を利用して実装します。

    サンプルソースは以下です。

    // アプリケーションからIWDDeployableObjectを取得 IWDDeployableObject dObject = wdComponentAPI.getApplication().getDeployableObjectPart().getDeployableObject(); // 実行するWDJアプリケーション名を指定  String url = WDURLGenerator.getApplicationURL(dObject.getApplication("Contract00601App"));      // 外部ブラウザーで開く IWDWindow window = wdComponentAPI.getWindowManager().createNonModalExternalWindow(url); window.show(); 他のWEBアプリケーション起動

    同一サーバで存在するServlet等の場合、相対パースでURLを指定し、対象URLにPOST/GETでパラメータを渡す必要がある場合は「WDURLGenerator」を利用してパラメータを渡します。

    サンプルソースは以下です。

    // Mapでパラメータ値設定 Map<String, Object> urlParameters = new HashMap<String, Object>(); urlParamaters.put("id","1234"); // パラメータ生成、文字コードがnullの場合、UTF-8変換

    String query = WDURLGenerator.getQueryString(urlParamaters, "Shift-JIS");
      
      // 外部ブラウザーで開く, URL, パラメータ, POST(true)/GET(false)をパラメータ設定
      // 想定パースは「/【DCのVendor名】~【DC名】/実行対象」で構成され、DC名に「/」が存在する場合、「~」に変換する。
    IWDWindow window = wdComponentAPI.getWindowManager().createNonModalExternalWindow(
    "/jp.co.asahikasei~yvw~jee~wm_excel_0001/download", query, true);
    window.show();
    // 別ウィンドウで開く
    IWDWindow window = wdComponentAPI.getWindowManager()
    .createNonModalExternalWindow(urlToTargetApp);
    // ウィンドウプロパティの設定
    window.setWindowSize(800, 480);
    window.setWindowPosition(100, 50);
    // アドレスバーの削除
    window.removeWindowFeature(WDWindowFeature.ADDRESS_BAR);  

    window.show();


  • WDJ 0 Votes 105 閲覧数


    (このトピックは編集中です)

    ファイルアップロード

    Resource attributeを定義
    Contextにタイプcom.sap.ide.webdynpro.uielementdefinitions.ResourceのValue Attributeを追加します。
    FileUpload UIを追加する
    アップロード後の情報を取得

    IWDResource iwdr = (IWDResource)wdContext.getCurrentElement().getAttributeValue("Resource"); logger.infoT(iwdr.getResourceName()); logger.infoT(iwdr.getResourceType().getFileExtension()); logger.infoT(iwdr.getResourceType().getHtmlMime()); ファイルダウンロード

    Resource attributeを定義
    Contextにタイプcom.sap.ide.webdynpro.uielementdefinitions.ResourceのValue Attributeを追加します。
    FileDownload UIを追加
    FileDownload UIを追加し、resourceプロパティにResource attribute valueを指定すす