Onglet Répliquer Panneau dans GUI Builder google apps

Question

Je pense que j'ai vu cette réponse, mais je ne me souviens plus où exactement.

J'essaye de créer une interface à onglets à l'aide du GUI Builder, mais je ne vois pas cette option. La partie que je semble rappeler est quelqu'un qui a une approche pour reproduire cela dans le GUI Builder. Je n'arrive pas à trouver cette information dans mon cerveau, les anciens groupes google ou ici.

Quelqu'un peut-il jogger ma mémoire?

Merci ...

Answer 1

Peut-être le poste que vous faisiez référence était this one ? Quoi qu'il en soit, peu importe la façon dont les panneaux que vous avez, yo pourrait les concevoir dans l'interface graphique, l'un sur l'autre, ou (plus simplement) l'un sous l'autre dans un panneau vertical 'parent' et jouez avec les gestionnaires de client pour montrer/cacher celui dont vous avez besoin. J'ai un exemple here with 2 panels in an UI, l'interface utilisateur est conçu avec un script, mais ce n'est pas important, regardez les gestionnaires de clients pour voir comment cela fonctionne.

Si j'ai du temps libre ce soir, je vais faire un script de démonstration pour 4 panneaux en GUI ;-).

EDIT: voici a test example (autonome) ou embedded in a Google site + link to the script (faire une copie pour modifier) ​​

Notez que dans le GUI builder you'l doivent « jouer » avec la visibilité de chaque panneau pour travailler sur J'ai utilisé un panneau principal assez grand pour contenir 2 panneaux ensemble afin que vous puissiez avoir une meilleure vision de "l'harmonie" entre les panneaux (ce qui n'est pas le cas dans mon test ;-))

et le code (très exemple de base simple 4 panneaux avec chacun d'eux un textBox & un label, juste pour tester les gestionnaires sur les boutons):

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

    var UI=app.loadComponent('multiUi') 

    var panel1 = app.getElementById('panel1') 
    var panel2 = app.getElementById('panel2') 
    var panel3 = app.getElementById('panel3') 
    var panel4 = app.getElementById('panel4') 

    var Button1 = app.getElementById('Button1') 
    var Button2 = app.getElementById('Button2') 
    var Button3 = app.getElementById('Button3') 
    var Button4 = app.getElementById('Button4') 

    var pHandler1 = app.createClientHandler() 
    .forTargets(panel1).setVisible(true).forTargets(panel2,panel3,panel4).setVisible(false) 
    Button1.addClickHandler(pHandler1) 

    var pHandler2 = app.createClientHandler() 
    .forTargets(panel2).setVisible(true).forTargets(panel1,panel3,panel4).setVisible(false) 
    Button2.addClickHandler(pHandler2) 

    var pHandler3 = app.createClientHandler() 
    .forTargets(panel3).setVisible(true).forTargets(panel2,panel1,panel4).setVisible(false) 
    Button3.addClickHandler(pHandler3) 

    var pHandler4 = app.createClientHandler() 
    .forTargets(panel4).setVisible(true).forTargets(panel2,panel3,panel1).setVisible(false) 
    Button4.addClickHandler(pHandler4) 

    app.add(UI) 
    return app; 
} 

Answer 2

Le code suivant rend les onglets, sur la base du tableau que vous mettez dans, dynamique:

function doGet() { 
    // create application 
    var app = UiApp.createApplication(); 

    // set array 
    var aTabs = ['donald','katrijn','dagobert'];               

    // create tab panel 
    var pTab = app.createTabPanel();             

    // add tabs to panel 
    for(var k=0; k<pTabs.length; k++) { 
     pTab.add(app.createLabel("This tab is reserved for " + aTabs[k]), aTabs[k]); 
    } 

    // add panel to application 
    app.add(pTab); 

    // set focus to first tab                      
    pTab.selectTab(0);                     

    // return to application 
    return app; 
} 

Voir link pour référence TabPanel.

Publier votre script en tant qu'application Web, vous permet d'insérer le script sur un site google.