Каков наилучший способ управления двумя пользовательскими интерфейсами?

Question

Я создал два пользовательских интерфейса. Как я могу закрыть первый и активировать следующий? Возможно ли иметь два пользовательских интерфейса под сценарий приложений Google?

меня попробовать что-то вроде:

var app = UiApp.getActiveApplication(); 
app.add(app.loadComponent("APPGui")); 
var panel1 = app.getElementById("LoginPanel1"); 
panel1.setVisible(false); 
return app; 

Answer 1

Самый простой способ, вероятно, разрабатывать обе панели в том же GUI Builder, один друг на друга в 2-х отдельных панелей, «Регистрационная панели» будучи выше другого он будет маскировать другой, когда он активен. Когда вы установите его «невидимым», вы увидите его внизу. В зависимости от вашего варианта использования панель входа может скрыть все или только часть вашей основной панели. У GUI-строителя есть все необходимые инструменты, чтобы решить, что находится впереди или назад.

Answer 2

Ниже приведены примеры трех диалоговых окон, отображаемых один за другим, поддерживающие состояние/данные между ними через объект CacheService.

(Вы можете использовать UserProperties, ScriptProperties или даже скрытое поле в качестве альтернативы, каждый из них имеет свою собственную сферу, хотя ...)

Надеется, что это имеет смысл, не объясняя, что содержит каждый диалог в UI Builder.

function showDialog1(){ 
    var app = UiApp.createApplication(); 
    app.add(app.loadComponent("Dialog1")); 
    SpreadsheetApp.getActiveSpreadsheet().show(app); 
} 

function onDialog1OKButton(e){ 
    CacheService.getPrivateCache().put("n1", e.parameter.n1); 

    var app = UiApp.getActiveApplication(); 
    var d2 = app.loadComponent("Dialog2"); 
    app.add(d2); 

    SpreadsheetApp.getActiveSpreadsheet().show(app); 
} 

function onDialog2OKButton(e){ 
    var c = CacheService.getPrivateCache(); 
    c.put("n2", e.parameter.n2); 

    var app = UiApp.getActiveApplication(); 
    app.add(app.loadComponent("DialogResult")); 

    var n1 = c.get("n1"); 
    var n2 = c.get("n2"); 
    var l = app.getElementById("Label2"); 
    l.setText("" + n1 + " + " + n2 + " = " + (parseInt(n1) + parseInt(n2))); 

    SpreadsheetApp.getActiveSpreadsheet().show(app); 
} 

Answer 3

Я предпочитаю создавать несколько графических интерфейсов. С помощью этого кода вы можете прыгать между ними.

function doGet() { 

    var app = UiApp.createApplication(); 
    var base0 =app.createAbsolutePanel().setId('GUI_base0').setHeight('630px').setWidth('1125px'); 
    app.createAbsolutePanel().setId('GUI_base1'); // create all abs_panells but not use 
    // you need to create all abspanels if you want to jump between them 
    app.createAbsolutePanel().setId('GUI_base2'); // create here all the absolute panels (1 for every GUI) 
    // app.createAbsolutePanel() ... GUI3, GUI4 ... 

    var component0 = app.loadComponent("GUI_password"); // load first GUI (his name is "password" 

     /// this is an example of code for the 1st GUI //////////////////// 
     /// I can check if the user can see the second GUI 
     var label_ID = app.getElementById('LB_ID'); 
     var user = Session.getActiveUser().getEmail(); 
     if (user == 'XXX@yyyy.com') { 
      label_ID.setText(user).setTag(user); // only show if .... 
     } 
     //////////////////////////////////////////////////////////////////// 

    base0.add(component0); // GUI_password over absolute panel 
    app.add(base0); 

    // handler Button1 // we can show a button only if the password is correct or is a valid user or ... 
    app.getElementById('BT_jump').addClickHandler(app.createServerHandler('NOW_gui1')); 

    return app; 

}; 


function NOW_gui1(e) { 

    var app = UiApp.getActiveApplication(); 

    var base0 = app.getElementById("GUI_base0").setVisible(false); // hide 1st abs_panel created with code 
    var base2 = app.getElementById("GUI_base2").setVisible(false); // hide 3rd abs_panel created with code 
    /// hide all others abs_panel 

    var base1 = app.createAbsolutePanel().setId('GUI_base1').setHeight('630px').setWidth('1125px'); // maybe get by ID ??, but this work 
    var component1 = app.loadComponent("GUI_1"); // load the second GUI 

    base1.add(component1); // load GUI_1 over 2n absolute panel 
    app.add(base1); 

    // HERE THE CODE OF THE GUI_1 


    // handler Button2 
    app.getElementById('BT_jump_1_to_2').addClickHandler(app.createServerHandler('NOW_gui2')); 


    return app; 
};