Google Apps腳本EventHandlers與用戶數據

Question

我正在使用Google Apps腳本爲Google電子表格製作一些自定義用戶界面。

我試圖做一個抽象的'嚮導'用戶界面，有一個任意麪板的數組，然後在底部的'後'和'下一個'按鈕，根據哪個'頁面'改變面板的可見性，你是在。

我需要某種機制，以便當您從嚮導的一頁移動到下一頁時，我可以調用當前「頁面」上的一個函數來說「現在我正在離開你，請保存你的狀態「，並類似於下一個」頁面「說」設置自己，你即將變得可見「（像onShow（），onHide（））。

但是我努力工作，如何做到這一點從背部和下一個按鈕事件處理程序中。據我所見，訪問UI元素或將字符串（通過「隱藏的」UI元素）傳遞給事件處理程序非常簡單。

這是相關的代碼，我目前所面對的：

/* 
********************************************************************* 
*/ 
function createWizard(pages) { 
    app = UiApp.getActiveApplication(); 

    var currIdx = app.createHidden("currentPanelIndex", 0).setId("CurrentPanelIndex"); 
    var minIdx = app.createHidden("minPanelIndex", 0); 
    var maxIdx = app.createHidden("maxPanelIndex", pages.length); 
    app.add(currIdx); 
    app.add(minIdx); 
    app.add(maxIdx); 

    var buttPanel = app.createHorizontalPanel(); 
    var backButton = app.createButton("Back"); 
    var nextButton = app.createButton("Next"); 
    buttPanel.add(backButton).add(nextButton); 

    var mainPanel = app.createVerticalPanel(); 

    for (var i = 0; i < pages.length; i++) { 
    pages[i].setId("Panel"+i).setVisible(false); 
    mainPanel.add(pages[i]); 
    } 

    mainPanel.add(buttPanel); 
    mainPanel.setCellVerticalAlignment(buttPanel, UiApp.VerticalAlignment.BOTTOM); 
    mainPanel.setCellHorizontalAlignment(buttPanel, UiApp.HorizontalAlignment.RIGHT); 

    app.add(mainPanel); 

    // create handler to respond to events 
    var clickHandler = app.createServerClickHandler("doBack") 
    .addCallbackElement(currIdx) 
    .addCallbackElement(minIdx) 
    .addCallbackElement(maxIdx); 
    backButton.addClickHandler(clickHandler); 
    var clickHandler = app.createServerClickHandler("doNext") 
    .addCallbackElement(currIdx) 
    .addCallbackElement(minIdx) 
    .addCallbackElement(maxIdx); 
    nextButton.addClickHandler(clickHandler); 

    updateVisibility(currIdx, minIdx, maxIdx) 
} 

/* 
********************************************************************* 
*/ 
function doBack(eventInfo) { 
    app = UiApp.getActiveApplication(); 

    var parameter = eventInfo.parameter; 
    var currentPanel = Math.round(Number(parameter.currentPanelIndex)); 
    var minPanel = Math.round(Number(parameter.minPanelIndex)); 
    var maxPanel = Math.round(Number(parameter.maxPanelIndex)); 

    if (currentPanel > minPanel) { 
    currentPanel--; 
    // Store the new value 
    app.getElementById("CurrentPanelIndex").setValue(String(currentPanel)); 

    updateVisibility(currentPanel); 
    } 

    return app; 
} 

/* 
********************************************************************* 
*/ 
function doNext(eventInfo) { 
    app = UiApp.getActiveApplication(); 

    var parameter = eventInfo.parameter; 
    var currentPanel = parseInt(parameter.currentPanelIndex); 
    var minPanel = Math.round(Number(parameter.minPanelIndex)); 
    var maxPanel = Math.round(Number(parameter.maxPanelIndex)); 
    Logger.log(currentPanel); 

    if (currentPanel < maxPanel) { 
    currentPanel++; 
    // Store the new value 
    app.getElementById("CurrentPanelIndex").setValue(String(currentPanel)); 

    updateVisibility(currentPanel, minPanel, maxPanel); 
    } 

    return app; 
} 

/* 
********************************************************************* 
*/ 
function updateVisibility(currentPanel, minPanel, maxPanel) 
{ 
    for (var i = minPanel; i < maxPanel; i++) { 
    if (i == currentPanel) { 
     app.getElementById("Panel"+i).setVisible(true); 
     // I want to do something like panel[i].onShow() 
    } 
    else { 
     app.getElementById("Panel"+i).setVisible(false); 
     // I want to do something like panel[i].onShow() 
    } 
    } 
} 

請注意，我不認爲我可以擴展UI元素能夠有一個「昂秀」或「onHide」回調。我也看不到我是如何將一個回調傳遞給一個字符串的！

如果必要的話，我可以發佈更多的代碼，但我很高興再次從頭開始，如果我處理這個錯誤的方式，所以我目前的實施細則是相對不重要。

聲明，我在C++，C＃，Lua的等還算不錯，但在JavaScript的幾乎是一個新手，所以我可能失去了一些東西完全明顯！

Answer 1

我覺得你的方法也許是太複雜......所有你在用戶界面中創建的小部件可以從不同的面板開始創建，那麼你的處理函數只有「玩」與自己的知名度。從用戶pov它就像UI是完全不同的，但你有一個獨特的callbackElement包含所有的小部件。 這是我很久以前建議的small very basic example，它基於相同的原理模擬了選項卡面板。

4個板是在一個單一的垂直板使得它們中的每採用完全相同的位置，給錯覺，以爲內容正在改變。

我沒有時間提出一個完整的演示代碼，但告訴我，如果這種方法能夠滿足您的需求。

---

編輯您的評論如下：

既然你已經有了處理程序處理上的兩個按鈕是什麼我會做將有每一個「頁」上再現的2個相同的按鍵previous/next，所有他們擁有相同的2個處理程序但ID不同。這樣佈局將保持不變，但你可以知道哪個「頁面」使用e.parameter[source]來觸發處理函數。如果您知道該頁面，並且您的所有小部件都具有連貫的索引，則可以採取什麼具體操作沒有限制。 例如，從頁面3切換到頁面4將被識別，因爲處理函數的源將是button_next_3，並且（總是例如）將數據從此面板寫入到SS上的表3。

希望我很清楚，我沒有看到任何限制在這樣的概念。你做 ？