How to center elements google apps script UiApp

问题:

I am creating a simple app with an image. I create the app like so:

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

This puts the image to the top left of the screen. Can someone show me how to center the image ?

Many thanks

回答1:

You can use setStyleAttribute() and refer to some CSS documentation

try it like this for example (I'm really not an expert in CSS so don't blame me if it is inelegant ;-)

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 : You can also position your image using PX(pixels) instead of % and, as you noticed, I tested this in a spreadsheet UI.

---

EDIT : and here is a version using pixels and Bryan's suggestion for CSS styling, more compact and with a syntax that approaches the original CSS method (thx again) :

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

回答2:

I've just found another nice way to do it.

Panels by default shrink to perfectly fit its content. It's good, because all widgets are very close to each other. So what we do here, we add a fullPanel - that fills whole browser area. Then add the mainPanel of our application, and inside we place any widgets we need.

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

Result?

• all widgets inside mainPanel are perfectly aligned to each other
• mainPanel is always in the center

There's the 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);
}

回答3:

You can use a Google Drive link to an image. Make sure the image is public on the web, and get the document ID. If the link to share is like: https://docs.google.com/file/d/[docID]/edit?usp=sharing

The direct link to the image is https://googledrive.com/host/[docID]/

Alternatively, if the folder is public, with ID folderID, you can use https://googledrive.com/host/[folderID]/myimage.gif