21 Kasım 2015 Cumartesi

SAPUI5 accordion menu

SAPUI5 ile accordion menu yapmak için sap.ui.commons kütüpanesinden yararlanarak oluşturabilirsiniz.Accordion menu xml kodları:
1-Accordion control oluştur.
  <com:Accordion id="acc1">
2-Accordion control oluşturduktan sonra herbir menu için AccordionSection control oluşturun.
<com:AccordionSection xmlns="sap.ui.commons">
NOT:Birden fazla xmlns namespace'leri kullanırken ön ek ile kullanmak gerekmekte.Ön ek kullanmadan kontrolleri çalıştıramazsınız.
Accordion Menu'lere ekleyeceğiniz kontrollerin press eventlerine vb. gerekli navigation'ları vererek ilgili sayfayalara yönlendirebilirsiniz.

<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" xmlns:com="sap.ui.commons" xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout" controllerName="view.View1"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
        <com:Accordion id="acc1">
            <com:AccordionSection xmlns="sap.ui.commons"
            id="idAcc1"
            maxHeight=""
            enabled="true"
            collapsed="false"
            title="Accordion Menu1"
            scroll="">
            <tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
            <dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
            <content>
               <Button id="btn1" text="Button Menu1"></Button>
            </content><!-- sap.ui.core.Control -->
            </com:AccordionSection>
            <com:AccordionSection xmlns="sap.ui.commons"
            id="idAcc2"
            maxHeight=""
            enabled="true"
            collapsed="false"
            title="Accordion Menu2"
            scroll="">
            <tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
            <dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
            <content>
               <Button id="btn2" text="Button Menu2"></Button>
            </content><!-- sap.ui.core.Control -->
            </com:AccordionSection>
             <com:AccordionSection xmlns="sap.ui.commons"
            id="idAcc3"
            maxHeight=""
            enabled="true"
            collapsed="false"
            title="Accordion Menu3"
            scroll="">
            <tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
            <dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
            <content>
               <Button id="btn3" text="Button Menu3"></Button>
            </content><!-- sap.ui.core.Control -->
            </com:AccordionSection>
        </com:Accordion>                
</content>
</Page>
</core:View>


Hiç yorum yok:

Yorum Gönder