Question

I’m trying to duplicate this example by Serge Insas without the gui.

var vPanel = app.createVerticalPanel();
vPanel.add(createGrid(1,1).setId(grid1);
vPanel.add(createGrid(1,1).setId(grid2);
var handler0 = app.createClientHandler()
   .forTargets(grid1).setVisible(true)
   .forTargets(grid2).setVisible(false);
 var handler1 = app.createClientHandler()
   .forTargets(grid1).setVisible(false)
   .forTargets(grid2).setVisible(true);

The handlers properly set visibility.

Unlike the example, grid2 does not justify to the top, instead it sits below an invisible grid1. How do i justify to the top?

Note: this is only true in chrome, firefox and explorer justify to top.

thanks,

scott

EDIT: complete code added

    function doGet(e) {
//create app
var app = UiApp.createApplication().setTitle('testCrawl');

// create components
var searchPanel = app.createVerticalPanel().setId('searchPanel').setWidth('100%');
var searchMenu = app.createMenuBar().setId('searchMenu').setWidth('100%');
var searchGrid = app.createVerticalPanel().setId('searchGrid').setWidth('100%')
                    .setHeight('100px').setVisible(false)
                    .setStyleAttribute("border","2px solid #C0C0C0")
var basicGrid = app.createGrid(1,1).setId('basicGrid').setWidth('100%').setVisible(false)
                basicGrid.setWidget(0,0, app.createLabel('Basic'));
var advancedGrid = app.createGrid(1,1).setId('advancedGrid').setWidth('100%').setVisible(false);
                advancedGrid.setWidget(0,0, app.createLabel('Advanced'));
var mapGrid = app.createGrid(1,1).setId('mapGrid').setWidth('100%').setVisible(false);
     mapGrid.setWidget(0,0, app.createLabel('Map'));
var archiveGrid = app.createGrid(1,1).setId('archiveGrid').setWidth('100%').setVisible(false);
      archiveGrid.setWidget(0,0, app.createLabel('Archive'));
var emailCartGrid = app.createGrid(1,1).setId('emailCartGrid').setWidth('100%').setVisible(false);
      emailCartGrid.setWidget(0,0, app.createLabel('EmailCart'));
var hideGrid = app.createGrid(1,1).setId('hideGrid').setWidth('100%').setVisible(false);


// add menu and grid
app.add(searchPanel);
searchPanel.add(searchMenu);
searchPanel.add(searchGrid);
searchGrid.add(basicGrid)
          .add(advancedGrid)
          .add(mapGrid)
          .add(archiveGrid)
          .add(emailCartGrid)
          .add(hideGrid);

// client handler
var handler0 = app.createClientHandler()
  .forTargets(searchGrid, basicGrid).setVisible(true)
  .forTargets(advancedGrid, mapGrid, archiveGrid, emailCartGrid,hideGrid).setVisible(false);
var hanlder1 = app.createClientHandler()
  .forTargets(searchGrid, advancedGrid).setVisible(true)
  .forTargets(basicGrid, mapGrid, archiveGrid, emailCartGrid,hideGrid).setVisible(false);
var handler2 = app.createClientHandler()
  .forTargets(searchGrid, mapGrid).setVisible(true)
  .forTargets(basicGrid, advancedGrid, archiveGrid, emailCartGrid,hideGrid).setVisible(false);
var handler3 = app.createClientHandler()
  .forTargets(searchGrid, archiveGrid).setVisible(true)
  .forTargets(basicGrid, advancedGrid, mapGrid, emailCartGrid,hideGrid).setVisible(false);
var handler4 = app.createClientHandler()
  .forTargets(searchGrid, emailCartGrid).setVisible(true)
  .forTargets(basicGrid, advancedGrid, mapGrid, archiveGrid,hideGrid).setVisible(false);
var handler5 = app.createClientHandler()
  .forTargets(searchGrid).setVisible(false);


// Create Menu Items
var menuItem0 = app.createMenuItem('Search', handler0);
var menuItem1 = app.createMenuItem('Advanced', hanlder1);
var menuItem2 = app.createMenuItem('Map', handler2);
var menuItem3 = app.createMenuItem('Archive', handler3);
var menuItem4 = app.createMenuItem('Email Cart', handler4);
var menuItem5 = app.createMenuItem('Hide', handler5).setId('hide');



//create menuItem separators
var separator0 = app.createMenuItemSeparator();
var separator1 = app.createMenuItemSeparator();
var separator2 = app.createMenuItemSeparator();
var separator3 = app.createMenuItemSeparator();
var separator4 = app.createMenuItemSeparator();
var separator5 = app.createMenuItemSeparator();
var separator6 = app.createMenuItemSeparator();

//Add the menu item separators and menuItem to the MenuBar
searchMenu.addSeparator(separator0).addItem(menuItem0).addSeparator(separator1)
  .addItem(menuItem1).addSeparator(separator2)
  .addItem(menuItem2).addSeparator(separator3)
  .addItem(menuItem3).addSeparator(separator4)
  .addItem(menuItem4).addSeparator(separator5)
  .addItem(menuItem5).addSeparator(separator6);

return app;

}

Answer 1

I tried your code – a developpment of it to make it testable – and I don’t see the issue you mention…(tested on Chrome) could you post your entire test code please ?

Meanwhile here is the test code I used (deployed here) with two grids in a vertical panel:

function doGet() {
var app = UiApp.createApplication()
  var vPanel = app.createVerticalPanel().setStyleAttribute('background', 'beige');
  var grid1 = app.createGrid(1,1).setId('grid1');
  var grid2 = app.createGrid(1,1).setId('grid2').setVisible(false);
vPanel.add(grid1.setText(0, 0, 'grid1'));
vPanel.add(grid2.setText(0, 0, 'grid2'));
var handler0 = app.createClientHandler()
   .forTargets(grid1).setVisible(true)
   .forTargets(grid2).setVisible(false);
 var handler1 = app.createClientHandler()
   .forTargets(grid1).setVisible(false)
   .forTargets(grid2).setVisible(true);
   grid2.addClickHandler(handler0)
   grid1.addClickHandler(handler1)
app.add(vPanel)   
return app
}

EDIT : if you set the border and height parameters on the vertical panel instead then you don’t have alignment changes anymore.
But the grid uses by default the whole height so with the value you chooses (1) the label comes in the middle…
I suppose it will be populated with more cells in the grid so the issue will disappear by itself. Here is the part of the script that I changed :

function doGet(e) {
//create app
var app = UiApp.createApplication().setTitle('testCrawl');

// create components
var searchPanel = app.createVerticalPanel().setId('searchPanel').setWidth('100%').setHeight('100px')
                    .setStyleAttribute("border","2px solid #C0C0C0")
var searchMenu = app.createMenuBar().setId('searchMenu').setWidth('100%');
var searchGrid = app.createVerticalPanel().setId('searchGrid').setWidth('100%')
                    .setVisible(false)