2016-04-02 4 views
2

"bestellmenge_tu" kimliğine sahip tek bir giriş alanı içeren bir SAPUI5 uygulamasında Ayrıntılı görünümüm var. Bu görünüm her çağrıldığında, odak bu giriş alanında olmalıdır. Ne yazık ki, denetleyicinin onInit yöntemindeki alana odaklanıldığında, odak ayarlanacaktır, ancak milisaniye sonra UI5 bunu alır ve ayrıntı görünümünün "geri gitme" düğmesine aktarır. giriş alanının blur olay bir log.trace() koyarakBir Görünümde İlk Odaklama Nasıl Belirlenir?

, bir odak uzak bir yöntem ile alınan zaman uyumsuz olarak adlandırılır sap.ui.define.NavContainer._afterTransitionCallback (tetikleyici ve yürütme arasında bir window.setTimeout ler) olarak adlandırılır öğrendik. Bu işlev, sadece görünümdeki ilk odaklanabilir öğeyi arar ve odağı acımasızca değiştirir.

Benim geçici çözüm bu "ilk odaklanabilir eleman" bulmak için kullanılan yöntem jQuery.fn.firstFocusableDomRef yeniden tanımlamak oldu:

// DIESE KANONE FUNKTIONIERT 
jQuery.fn.firstFocusableDomRef = (function() { 
    var _default = jQuery.fn.firstFocusableDomRef; 
    return function() { 
    var bestellmenge_tu = document.querySelector("input[id$='bestellmenge_tu-inner']"); 
    if (bestellmenge_tu && 
     bestellmenge_tu.style.display !="none" && 
     bestellmenge_tu.style.visibility != "hidden") return bestellmenge_tu; 
    else return _default.apply(this); 
    } 
})(); 

Ama bu herhangi sayfa yükleme DOM enine sırasında denilen bir performans sorunu (querySelector olabilir oradan) ve istenen etki için çok fazla kodlama var.

Bunu başarmak için daha kolay bir yöntem var mı?

Ben

<mvc:View controllerName="zrt_dispo.view.Detail"...> 
    <Page id="detailPage" initialFocus="bestellmenge_tu"> <!-- ID of the element to carry the focus --> 
    </Page> 
</mvc:view> 
+1

Ne onAfterRendering' 'hakkında: Burada

bir demo? Bu, 'init' çağrısından sonra çağrılmalı ve navBack düğmesinin odağı aldıktan sonra da umarız. – Marc

+0

Sanırım bunu denedim, ancak gecikmiş NavContainer işleminin ne zaman yapıldığına bağlı olarak sadece rastgele çalıştı. – rplantiko

+0

@Marc @rplantiko, "onAfterRendering" öğesinde odağı ayarlamak yalnızca bir kez çalışır. Kullanıcı görünüme geri döndüğünde, görünüm kendisini yeniden oluşturmaz (açıkça yapılmadıkça). 'AfterShow' gibi navigasyonla ilgili etkinlikleri kullanmamız gerekiyor. Benim [aşağıda yanıtı gör] (https://stackoverflow.com/a/48559689/5846045) – boghyon

cevap

1

NavContainer bir özelliğe autoFocus varmış gibi bir şey geldi. App, NavContainer'un bir soyundan gelir ve bu nedenle de bu özelliği vardır. yardımı (yukarıda bağlantılı olarak) aşağıda belirtilmiştir:

ilk odak ilk render üzerinde ve yeni sayfanıza gittikten sonra otomatik olarak ayarlanmış olup olmadığını belirler. Bu, dokunma cihazlarında klavyenin, bir giriş alanına otomatik olarak odaklanmaktan ötürü dışarı çıkması durumunda kullanışlıdır. Gerekirse "afterShow" olayı başka bir öğeye odaklanmak için kullanılabilir.

Varsayılan değer true.

+0

İyi fikir, ancak Öğemdeki autoFocus = "false" özniteliğini ayarlamak maalesef sistem davranışını değiştirmedi. Yine de, bulanıklık NavContainer._afterTransitionCallback @ \t navContainer-dbg.js: 479 – rplantiko

+0

tarafından tetiklenir ve "App" inizin AfterShow olayını, odağı gerektiği gibi ayarlamak için kullanmaya çalıştınız mı? Etkinliğe onInit() 'inizden abone olabilir ve onExit()' de abonelikten çıkabilirsiniz. – schnoedel

1

Bir NavContainer (sap.m.App veya sap.m.SplitApp olarak) varsa, doğrudan alt (Görünüm) navigasyon ile ilgili olaylara tepki verebilir. Bizim durumumuzda, afterShow etkinliğine bir işleyici ekleyebiliriz. Örnek: Animasyon tamamlandıktan sonra olay işleyicisi çalıştırılır. Ve en önemlisi:

Bu olay NavContainer bu çocuk kontrolü görünür kıldığı zaman (onAfterRendering aksine) her seferinde ateşlenir. sap.ui.core.Control sap.ui.core.Element uzanan yana

, her kontrol focus() aracılığıyla odağı alabilir. Ancak, afterShow işleyicisindeki focus() numaralı telefonu çağırmak, kullanıcı geriye doğru giderken (autoFocus="false" ile bile) UI5'i odağı ilk odaklanabilir öğeye ayarlar.Bu nedenle, tarayıcının, elemanın call stack'un sonunda odaklanması gerektiğini bilmesi için setTimeout numaralı bir setTimeout numaralı bilgisayara ihtiyaç vardır. Bu, UI5'in her şeyin orijinal olarak tasarlandığını düşündüğü andan sonra odaklanması anlamına gelir. https://embed.plnkr.co/wp6yes/