案例26.使用grid layout將ui element放置在不同的位置左右縮進(jìn)等

1、26.Grid layout 將 UI element 放置在不同的位置(左右縮進(jìn)等)基本信息：修改： 模板說明 1.盡量全部使用中文，特殊的專業(yè)術(shù)語表明英文原版內(nèi)容，方便公司交流。2.認(rèn)真填寫文檔和關(guān)鍵字，使得文檔內(nèi)容一目了然。根據(jù)各個案例的不同內(nèi)容替換掉括號里面的內(nèi)容。文檔的每一部分盡量填寫完整，原則是初學(xué)者能夠看的懂，方便公司用此文檔培訓(xùn)。圖文并茂，講解清楚明白。版本版本作者創(chuàng)建日期備注1.0版本（1.0）創(chuàng)建時間（2011 年 6 月 8 日）作者（呂輕輕）SAP 版本（SCC 6.0）文檔狀態(tài)（草稿）最后修改者（某某）最后修改時間（x 年 xx 月 xx 日）關(guān)鍵字（Table Ta

2、bleSummaryCell subtotal）目錄基本信息：1修改一、二、三、四、五、六、七、：.1場景描述3應(yīng)用范圍3關(guān)鍵知識3開發(fā)步驟補(bǔ)充4要點說明14深入學(xué)習(xí)資料.14相似實例補(bǔ)充14一、 場景描述GridLayout 是網(wǎng)格式布局，它把父組件分成一個表格，默認(rèn)情況下每個子組件占據(jù)一個單元格的空間， 每個子組件按添加到父組件的順序排列在表格中， colCount 屬性表示該表格有幾列，同時每個子組件還可以設(shè)置 paddingLeft/paddingRight 屬性來調(diào)整子組件的左/右內(nèi)邊距。使用 GridLayout 布局來實現(xiàn)如下效果：圖 1二、應(yīng)用范圍使用 GridLayout將

3、UI Element 放在容器的不同位置。三、關(guān)鍵知識1.在該案例中主要用到了 group 和 button 兩種 UI Element,三個 button Element 放在Group 中。Group 中主要有如下主要屬性 Layout（布局類型）、height（高度）、width（寬度）、colCount（容器的列數(shù)），下面是 colCount 為 1 和 2 時的效果對比圖，圖 22. 對于放在group 里面的UI Element 可以通過設(shè)置paddingLeft/paddingRight 屬性來實現(xiàn)左右縮進(jìn)。下面是 button1、button2、button3 的 paddin

4、gLeft 分別為 10px、20px、30px時的效果圖，圖 3四、 開發(fā)步驟補(bǔ)充1. se80打開 Object ZWDA_GRIDLAYOUT26 .Navigator ,選擇 Web Dynpro Comp./f. 類型 ，創(chuàng)建圖 4ZWDA_GRIDLAYOUT26 創(chuàng)建view，命名為 MAIN.2.圖 53.打開 MAIN，并切換到 Layout 頁簽，并添加 1 個 Group UI Element 和 3 個 button（GroupLayout 設(shè)置為 GridLayout,三個 button 的 paddingLeft 依次設(shè)置為 10px,20px,30px），以下是屬性設(shè)置圖和效果圖：圖 6圖 7圖 8圖 9圖 10五、要點說明原案例顯示的是一些 view，讓學(xué)習(xí)者第一眼看不出該文檔想說明的是什么問題，以為重點是 rowRepeator,本文檔突出了 GridLayout 這一知識點，同時擴(kuò)展了設(shè)計的幾個重要屬性的例子說明。六、深入學(xué)習(xí)資料（此案例涉及內(nèi)容的深入學(xué)習(xí)資料的說明，就像 SAP 標(biāo)準(zhǔn)文檔里面的“RelatedContent”。等的內(nèi)容。）的地址可以是 SAP Help Portal、SDN、Notes、SAP、標(biāo)準(zhǔn)、Hand KMNET312_UI_Development_with_Web_Dynpro_for_ABAP 1