패널을 보이지 않게 보이게 설정하는 방법?

Question

"blocksPanel"및 "briquettesPanel"을 표시 또는 숨김으로 설정하는 방법에 대해 궁금합니다. 드롭 다운 목록에서 "8 : 1 Compressed Blocks"를 선택하고 드롭 다운 목록에서 "8 : 1 Compressed Briquettes"를 선택하면 "briquettesPanel"이 보이도록 "blocksPanel"을 표시하고 싶습니다.

function doGet(e) { 
    var app = UiApp.createApplication(); 

    //Create horizontal product + other panel 
    var productOtherPanel = app.createHorizontalPanel().setId('productOtherPanel') 
    .setStyleAttribute('position','relative').setStyleAttribute('left','0%'); 

    //Create horizontal Product Panel 
    var productPanel = app.createHorizontalPanel().setId('productPanel').setStyleAttribute('position','relative') 
    .setStyleAttribute('left','0%').setVisible(true); 
    //Create listBox 
    var productList = app.createListBox().setName("productList").setId('productList'); 
    //Add items to listBox 
    productList.addItem("8:1 Compressed Blocks"); 
    productList.addItem("8:1 Compressed Briquettes"); 

    //Create horizontal Compressed Blocks panel 
    var blocksPanel = app.createHorizontalPanel().setId('blocksPanel') 
    .setStyleAttribute('position','relative').setStyleAttribute('left','0%').setVisible(true); 
    //Create Compressed Blocks Size List 
    var blocksSizeList = app.createListBox().setName('blocksSizeList').setId('blocksSizeList'); 
    //addItem fills the Compressed Blocks Size List 
    blocksSizeList.addItem("5kg"); 
    blocksSizeList.addItem("20kg"); 

    //Create horizontal Briquettes panel 
    var briquettesPanel = app.createHorizontalPanel().setId('briquettesPanel') 
    .setStyleAttribute('position','relative').setStyleAttribute('left','0%').setVisible(true); 
    //Create Briquettes Size List 
    var briquettesSizeList = app.createListBox().setName('briquettesSizeList').setId('briquettesSizeList'); 
    //addItem fills the Briquettes Size List 
    briquettesSizeList.addItem("250g"); 
    briquettesSizeList.addItem("650g"); 




    app.add(productOtherPanel); 
    productOtherPanel.add(productPanel); 
    productPanel.add(productList); 

    productOtherPanel.add(blocksPanel); 
    blocksPanel.add(blocksSizeList); 

    productOtherPanel.add(briquettesPanel); 
    briquettesPanel.add(briquettesSizeList); 


    return app; 
} 

Answer 1

먼저 제품 목록에 대한 서버 변경 핸들러를 만듭니다.

var handler = app.createServerHandler("panelHandler"); 
productList.addChangeHandler(handler); 

다음과 같이 패널 처리기 기능을 정의하십시오. productList는 핸들러 함수의 'event'매개 변수로 전달됩니다.

function panelHandler(event) { 
    var app = UiApp.getActiveApplication(); 
    if (event.parameter.productList == "8:1 Compressed Blocks") { 
    app.getElementById('blocksPanel').setVisible(true); 
    app.getElementById('briquettesPanel').setVisible(false); 
    } 
    else if (event.parameter.productList == "8:1 Compressed Briquettes") { 
    app.getElementById('blocksPanel').setVisible(false); 
    app.getElementById('briquettesPanel').setVisible(true); 
    } 
    return app; 
} 

은 처음에는, 당신은 blocksPanel를 볼 수 있고 제품 ​​목록의 초기 상태와 일치하는 briquettesPanel 눈에 보이지 않는 설정해야합니다.

자세한 내용은 Server Handler 문서를 참조하십시오.