두 UI를 관리하는 가장 좋은 방법은 무엇입니까?

Question

두 개의 사용자 인터페이스를 만들었습니다. 첫 번째 사진을 닫고 다음 사진을 활성화하려면 어떻게해야합니까? Google 앱 스크립트에서 두 개의 UI를 사용할 수 있습니까?

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

Answer 1

가장 쉬운 방법은 2 개 개의 별도 패널, 다른 이상되는 '로그인 패널'에서 서로에 걸쳐 동일한 GUI 빌더에서 하나를 두 패널을 설계하는 아마 :

내가 좋아하는 뭔가를 시도해야 활성 상태 일 때 다른 마스크를가립니다. '보이지 않음'으로 설정하면 밑에있는 것을 볼 수 있습니다. 유스 케이스에 따라 로그인 패널은 메인 패널의 전체 또는 일부만 숨길 수 있습니다. GUI 빌더에는 앞뒤로 어느 것을 결정하는 데 필요한 모든 도구가 있습니다.

Answer 2

다음은 세 개의 대화 상자가 차례대로 표시되어 있고 CacheService 개체를 통해 상태/데이터를 유지 관리하는 예입니다.

는 희망이이 UI Builder에서 각 대화에 포함 된 내용을 설명하지 않고 의미가 있습니다 (당신은 ... 각 그래도 자신의 범위를 가지고, 대안으로 UserProperties, ScriptProperties 또는 숨겨진 필드를 사용할 수 있습니다).

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

GUI를 여러 개 만드는 것을 선호합니다. 이 코드를 사용하면 두 코드 사이를 이동할 수 있습니다.

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; 
};