kait onAfterRendering untuk smartform di UI5

Di aplikasi saya, saya memiliki tampilan XML yang terdiri dari smartform. Saya memiliki kebutuhan untuk mengakses elemen input (melalui sap.ui.getCore().byId()) yang tersedia setelah smartform diurai dan dirender.

onAfterRendering di pengontrol untuk tampilan saya terpicu segera setelah tampilan dirender (saya mendapatkan semua elemen non-smartform seperti judul, dll.), tetapi sebelum smartform diurai dan dirender. Tes dasar melalui alert juga membuktikan hal ini secara visual.

Apakah ada peristiwa yang dipicu setelah smartform dirender yang dapat saya sambungkan untuk mengakses elemen input saya?

Panduan pengembang panduan memperluas smartform dan dengan demikian memiliki init metode, tetapi dalam kasus saya, saya memperluas basecontroller dan init saya untuk tampilan halaman.

Terima kasih atas petunjuknya.

Pandangan ku:

<mvc:View
controllerName="myns.controller.Add"
xmlns:mvc="sap.ui.core.mvc"
xmlns:semantic="sap.m.semantic"
xmlns:smartfield="sap.ui.comp.smartfield"
xmlns:smartform="sap.ui.comp.smartform"
xmlns="sap.m">
<semantic:FullscreenPage
    id="page"
    title="{i18n>addPageTitle}"
    showNavButton="true"
    navButtonPress="onNavBack">
    <semantic:content>
        <smartform:SmartForm
            id="form"
            editable="true"
            title="{i18n>formTitle}"
            class="sapUiResponsiveMargin" >
            <smartform:Group
                id="formGroup"
                label="{i18n>formGroupLabel}">
                <smartform:GroupElement>
                    <smartfield:SmartField
                        id="nameField"
                        value="{Name}"   />
                </smartform:GroupElement>
            </smartform:Group>
        </smartform:SmartForm>
    </semantic:content>
    <semantic:saveAction>
        <semantic:SaveAction id="save" press="onSave"/>
    </semantic:saveAction>
    <semantic:cancelAction>
        <semantic:CancelAction id="cancel" press="onCancel"/>
    </semantic:cancelAction>
</semantic:FullscreenPage>

My Controller:

sap.ui.define([
"myns/controller/BaseController",
"sap/ui/core/routing/History",
"sap/m/MessageToast"
],function(BaseController, History, MessageToast){
"use strict";
return BaseController.extend("myns.controller.Add",{
     onInit: function(){
         this.getRouter().getRoute("add").attachPatternMatched(this._onRouteMatched, this);
     },
     onAfterRendering: function(){
        //I tried my sap.ui.getCore().byId() here but does not work
        //An alert shows me this triggers before the smartform is rendered but 
        //after all the other non-smartform elements have rendered
     },
    _onRouteMatched: function(){
        // register for metadata loaded events
        var oModel = this.getModel();
        oModel.metadataLoaded().then(this._onMetadataLoaded.bind(this));
    },
    _onMetadataLoaded:function(){
        //code here....
    },
     onNavBack: function(){
        //code here....
     }
});

});


sapui5
person arunmenon    schedule 20.06.2016    source sumber

Jawaban (2)


arrow_upward
1
arrow_downward

Anda dapat mencari kapan SmartForm ditambahkan ke DOM dengan DOMNodeInserted acara jQuery. Untuk ini, Anda dapat menggunakan id untuk mengidentifikasi SmartForm yang telah ditambahkan ke DOM.

Setiap elemen UI5 mendapat awalan setelah ditambahkan ke DOM.

misalnya __xmlview0--formulir.

Jadi untuk memastikan formulir yang diperlukan sudah ditambahkan, Anda dapat split id elemen yang ditambahkan, lalu membandingkannya dengan id yang telah Anda berikan.

Meski bukan solusi optimal, namun Anda bisa mencobanya.

onAfterRendering: function() {
    $(document).bind('DOMNodeInserted', function(event) {
        var aId = $(event.target).attr("id").split("--");
        var id = aId[aId.length - 1];
        if (id) {
            if (id == "form") {
                // smart form fields are accessible here
                $(document).unbind("DOMNodeInserted");
            }
        }
    })
}
person Ashish Patil    schedule 20.06.2016
comment
Terima kasih atas jawabannya. Ini adalah solusi yang menarik, dan 'hampir' merupakan jawaban atas pertanyaan utama. Saya kira itu akan menjadi jawaban yang tepat jika tidak ada acara bawaan yang dikeluarkan oleh UI5. Karena ada hubungan erat dengan jQuery, ini pasti akan berhasil. Membaca DOM selalu menjadi pilihan, tetapi saya tidak yakin apakah ada kaitan yang mungkin saya lewatkan. - person arunmenon; 20.06.2016
comment
Opsi lain yang saya pertimbangkan adalah memiliki tampilan bertingkat dengan smartform saya yang memiliki tampilan dan pengontrolnya sendiri (dan dengan demikian merupakan init dan onAfterRendering). Saya belum mencobanya, tetapi secara teori ini sepertinya pilihan yang tepat. - person arunmenon; 20.06.2016
comment
Saya sudah mencoba rute bersarang, dan mengalami masalah yang sama di onAfterRendering dalam tampilan bersarang juga. Saya juga harus melampirkan acara (fokus/buram dll) ke beberapa bidang jadi saya menggunakan rute bersarang dan menambahkan acara DOMNodeInserted dari solusi Anda. Untuk beberapa alasan attachBrowserEvent tidak berfungsi, jadi saya menggunakan jQuery untuk melampirkan acara. Saya menandai solusi Anda sebagai terjawab karena saya cukup yakin sekarang bahwa tidak ada kaitan langsung. - person arunmenon; 20.06.2016
comment
Terima kasih Arun, senang itu membantu! :) - person Ashish Patil; 20.06.2016

arrow_upward
0
arrow_downward

Solusi terakhir saya (untuk saat ini dan menggunakan jawaban yang diterima yang disediakan oleh @Dopedev):

(di pengontrol untuk tampilan bersarang yang berisi smartform)

onAfterRendering: function() {
    $(document).bind('DOMNodeInserted', function(event) {
        var elem = $(event.target);
        var aId = elem.attr("id").split("--");
        var id = aId[aId.length - 1];
        if (id) {
            if (id == "nameField") {
                elem.find("input").on({
                    focus: function(oEvent) {
                        //code here;
                    },
                    blur: function(oEvent) {
                        //code here;
                    }
                });
                /*
               elem.find("input").get(0).attachBrowserEvent("focus", function(evt) {
                    //code here
                }).attachBrowserEvent("blur", function(ev) {
                    //code here
                });
                */
                $(document).unbind("DOMNodeInserted");
            }
        }
    });
}
person arunmenon    schedule 20.06.2016