0

外側にスクロールバーがなく、さまざまなサイズ/アスペクト比のディスプレイに調整することなく、物理ディスプレイを埋めるUIが必要です。基本空間は縦に2枚のパネルに分かれています。これらのパネルの 1 つは、固定部分とスクロール可能な領域を持つことを目的としています。

    function doGet() {
  var app = UiApp.createApplication();
  // overall panel to fill available display
//  var container = app.createSimplePanel().setSize("100%","100%");
  // Contains a panel to be divided in two  
  var outer = app.createHorizontalPanel().setSize("100%","100%");
  // Two vertical panels (equal size) filling available space within outer   
  var p1 = app.createVerticalPanel().setSize("100%","100%");
  var p2 = app.createVerticalPanel().setSize("100%","100%");
  // Left hand panel p2 holds two  panels. One fixed height
  var p4 = app.createVerticalPanel().setSize("100%","20PX"); 
  var scrollPanel = app.createScrollPanel().setId('sp').setTag('Empty').setSize("100%","100%");
  // The scroll panel is to hold a variable number of elements and use the space available to display the maximum
  // demonstrated by a vertical panel with label widgets
  var p3 = app.createVerticalPanel().setSize("100%","100%");
  for (i=0;i<100;i++){
    var lab4 = app.createLabel("Te"+(i+4)).setSize("100%","100%");
    p3.add(lab4);
  }
   scrollPanel.add(p3);
  // label to occupy fixed space above scrolled  list
  var lab1 = app.createLabel    ("Testing********************************************************************************************************************************************************************1");

  // label at top of right hand panel
  var lab2 = app.createLabel("Testing********************************************************************************************************************************************************************2");



  p2.add(lab2);
  p4.add(lab1);
  // scroll panel below label panel
 p1.add(p4)
  p1.add(scrollPanel);
  // add some formatting to make panels show up
  applyCSS(outer,_outerContainer)
  applyCSS(p1,_innerContainer)
  applyCSS(p4,_outerContainer)
  applyCSS(p2,_innerContainer)
  applyCSS(p3,_innerContainer)
  outer.add(p1).add(p2);
 // container.add(outer);
  //app.add(container);
  app.add(outer);
  return app;
}

(1) ディスプレイを 2 つの等しいサイズのパネルに分割するにはどうすればよいですか? サイズは、コンテンツの相対的なサイズに応じて表示されます。(2)垂直パネル P1 を取得して、利用可能な物理スペース内でスクロールパネルのサイズを最大化するにはどうすればよいですか? コーディングされているように、固定ブロックは正しく配置され、スクロール パネルはそれを含む垂直パネルの途中から始まります。

4

1 に答える 1

0

少し試行錯誤した後...答えは

(1.1) 垂直パネルではなく絶対パネルを使用します。

(1.2) 幅と高さの仕様はコンテンツに関するものであるため、パディングとマージンを考慮する必要があることを学びます。それらがなければ、2 つの等しい列への分割は、幅 50% の AbsolutePanel によって達成されました。

(2) 高さ 30PX の AbsolutePanel と高さ 100% の垂直パネル (scrollPanel を含めるため) を使用して、最初の列を 2 つに分割します。PC ディスプレイのスクロール パネルのスクロール バー。外側にスクロールバーのない全幅と高さの表示。いずれかの方向の i-pad ディスプレイのスクロール パネル (スクロール バーなし) でのスクロール可能な表示。

于 2013-02-07T20:16:17.573 に答える