GAS-PanelExample1.gs

function doGet() {
  var app = UiApp.createApplication();
  
  var vpanel1 = app.createVerticalPanel().setBorderWidth(1);
  var vpanel2 = app.createVerticalPanel().setBorderWidth(2);

  var vpanel1Label = app.createLabel("Unformatted Vertical Panel 1");
  var vpanel2Label = app.createLabel("Formatted Vertical Panel 2");
  var label1 = app.createLabel("Label 1");
  var label2 = app.createLabel("Label 2");
  var label3 = app.createLabel("Label 3");
  var label4 = app.createLabel("Label 4");  

  /* formatting for vertical panel 2
  * This block of code formats vertical panel 2. Although formatting is not required for a panel,
  * it can make them look nicer and give you better control over the appearance of your app.
  */
  vpanel2.setSize("25%", "150px"); // sets the width of the vertical panel to "25% of the apps container" and it's height to "150 pixels".
  vpanel2.setBorderWidth(3); // makes the border around of the vertical panel thicker!
  vpanel2.setStyleAttribute("background", "lightGrey");
  vpanel2.setStyleAttribute("fontWeight", "bold");
  vpanel2.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER); // horizontal aligns-center all elements of the panel
  vpanel2.setVerticalAlignment(UiApp.VerticalAlignment.MIDDLE); // vertical aligns-middle all elements of the panel
  
  vpanel1.add(label1).add(label2);
  vpanel2.add(label3).add(label4);
  
  app.add(vpanel1Label).add(vpanel1);
  app.add(vpanel2Label).add(vpanel2);
  
  
  return app;
}

GAS-PanelExample2.gs

function doGet() {
  var app = UiApp.createApplication();
  var hp = app.createHorizontalPanel().setBorderWidth(1); // borders are only shown for effect, they are not necessary
  var lab1 = app.createLabel("Label 1");
  var lab2 = app.createLabel("Label 2");
  var lab3 = app.createLabel("Label 3");
  hp.add(lab1).add(lab2).add(lab3)
  app.add(hp);
  return app;
}

GAS-PanelExample3.gs

function doGet() {
  var app = UiApp.createApplication();
  var vp = app.createVerticalPanel().setBorderWidth(1); // borders are only shown for effect, they are not necessary
  var lab1 = app.createLabel("Label 1");
  var lab2 = app.createLabel("Label 2");
  var lab3 = app.createLabel("Label 3");
  vp.add(lab1).add(lab2).add(lab3)
  app.add(vp);
  return app;
}

GAS-PanelExample4.gs

function doGet() {
  var app = UiApp.createApplication(); // borders are only shown for effect
  var vp = app.createVerticalPanel().setBorderWidth(1); // borders are only shown for effect
  var hp = app.createHorizontalPanel().setBorderWidth(1);

  var lab1 = app.createLabel("Label 1");
  var lab2 = app.createLabel("Label 2");
  var lab3 = app.createLabel("Label 3");
  var lab4 = app.createLabel("Label 4");
  
  var grid = app.createGrid(2,2).setBorderWidth(1); // borders are only shown for effect
  grid.setWidget(0,0,lab1);
  grid.setWidget(0,1,lab2);
  grid.setWidget(1,0,lab3);
  grid.setWidget(1,1,lab4);
  
  // hp.add(lab1).add(lab2).add(lab3).add(lab4);
  vp.add(hp);
  vp.add(grid)
  app.add(vp);
  return app;
}

GAS-PanelExample5.gs

function doGet() {
  var app = UiApp.createApplication();
  //app.createDialogBox(); 
  var grid = app.createGrid(15, 15).setBorderWidth(1);
   for(var row=0;row<15;row++) {
     for(var col=0;col<15;col++) {
       grid.setText(row, col, "Random Data");
     }
   }
   app.add(grid);
   app.add(app.createButton("Click Me").addClickHandler(app.createServerHandler('clickFunction')));
   return app;
 }

function clickFunction() {
  var app = UiApp.getActiveApplication();
  var vp = app.createVerticalPanel().add(app.createLabel("LABEL")).add(app.createButton("HI"))
  var pPanel = app.createPopupPanel().add(vp).setAnimationEnabled(true).setGlassEnabled(true).setPopupPosition(200,200);
  pPanel.show();
  return app;
}