Comment centrer les éléments google apps script UiApp

Question

Je crée une application simple avec une image. Je crée l'application comme suit:

function createApplication(){ 
    var app = UiApp.createApplication().setTitle("My Simple App"); 
    mainImage = app.createImage("URL TO IMAGE"); 
    app.add(mainImage); 
    return(app); 
} 

Ceci place l'image en haut à gauche de l'écran. Quelqu'un peut-il me montrer comment centrer l'image?

Un grand merci

Answer 1

Vous pouvez utiliser setStyleAttribute() et se référer à certains CSS documentation

essayer comme ça par exemple (je ne suis vraiment pas un expert en CSS, alors ne me blâmez pas si elle est inélégante; -)

function testImage(){ 
    var app = UiApp.createApplication().setTitle("My Simple App").setHeight('700').setWidth('900'); 
    mainImage = app.createImage("https://dl.dropbox.com/u/211279/Time-change-clock_animated_TR80.gif") 
    .setStyleAttribute('position','relative').setStyleAttribute('left','50%').setStyleAttribute('top','50%') 
    app.add(mainImage); 
    ss=SpreadsheetApp.getActive() 
    ss.show(app) 
} 

note: vous pouvez également placer votre image en utilisant PX (pixels) au lieu de% et, comme vous avez remarqué, j'ai testé cela dans une interface de tableur.

---

EDIT: et voici une version en utilisant des pixels et la suggestion de Bryan pour le style CSS, plus compact et avec une syntaxe qui se rapproche de la méthode CSS d'origine (thx nouveau):

var _imgCSS = {'position':'relative', 'left':'200PX', 'top':'200PX'} 

function testImage(){ 
     var app = UiApp.createApplication().setTitle("My Simple App").setHeight('500').setWidth('500'); 
     var mainImage = app.createImage("https://dl.dropbox.com/u/211279/Time-change-clock_animated_TR80.gif") 
     .setStyleAttributes(_imgCSS) 
     app.add(mainImage); 
     ss=SpreadsheetApp.getActive() 
     ss.show(app) 
    } 

Answer 2

Vous pouvez utiliser un lien Google Drive vers une image. Assurez-vous que l'image est publique sur le Web et obtenez l'identifiant du document. Si le lien à partager est comme: https://docs.google.com/file/d/[docID]/edit?usp=sharing

Le lien direct vers l'image est https: // Google Drive. com/host/[docID]/

par ailleurs, si le dossier est public, avec l'ID folderID, vous pouvez utiliser https://googledrive.com/host/[folderID]/myimage.gif

Answer 3

I Je viens de trouver une autre bonne façon de le faire.

Les panneaux par défaut se rétrécissent pour s'adapter parfaitement à leur contenu. C'est bien, car tous les widgets sont très proches les uns des autres. Donc, ce que nous faisons ici, nous ajoutons un fullPanel - qui remplit toute la zone du navigateur. Ensuite, ajoutez le mainPanel de notre application, et à l'intérieur nous plaçons tous les widgets dont nous avons besoin.

+--fullPanel-----------------+ 
|       | 
|       | 
|  +-mainPanel--+  | 
|  |   |  | 
|  |   |  | 
|  +------------+  | 
|       | 
|       | 
+----------------------------+ 

Résultat?

• tous les widgets à l'intérieur mainPanel sont parfaitement alignés les uns aux autres
• mainPanel est toujours au centre

Il y a le code:

function createApplication(){ 
    var app = UiApp.createApplication().setTitle("My Simple App"); 

    /* Main application Panel */ 
    var mainPanel = myApp.createVerticalPanel(); 

    /* Add any widgets to this Panel */ 
    mainImage = app.createImage("URL TO IMAGE"); 
    mainPanel.add(mainImage); 

    /* Create a panel that will fill all area of browser */ 
    var fullPanel = myApp.createVerticalPanel(); 
    fullPanel.setHeight('100%'); 
    fullPanel.setWidth('100%'); 
    fullPanel.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER); 
    fullPanel.setVerticalAlignment(UiApp.VerticalAlignment.MIDDLE); 
    fullPanel.add(mainPanel); 

    app.add(fullPanel); 
    return(app); 
}