5

EDIT (last ! :-) :これを回避するには、UI 全体を absolutePanel に配置します (thx megabyte1024)。表示領域全体に背景色を設定できないため、完璧ではありませんが、少なくともはるかに快適です。(オンライン テスト アプリへのリンクはこの新しいバージョンで更新されます) および最終バージョンのスクリーン キャプチャ... はるかに優れています :-)

ここに画像の説明を入力

scrollPanel を持つ GAS で記述されたスタンドアロンの webapp があります。UI 全体はかなり小さく、ブラウザー ウィンドウの (小さい) 表示領域の一部しか占めていません。

気になるのは、ブラウザウィンドウに常に水平スクロールバーと垂直スクロールバーの両方があり、マウスまたはトラックパッドを使用してUIウィンドウでスクロールパネルをスクロールするとUIコンテンツに干渉することです...だから、私の質問は: これを回避する方法、スクロールバーを追加する必要がないこと、またはより小さな「webapp 領域」を定義する必要がないことをブラウザーに伝える方法はありますか?

これらのスクロール バーのサイズは、最後の 1 つがブラウザー ウィンドウより小さい限り、UI パネルのサイズから完全に独立していることに注意してください。

これは、私が言っていることを説明するためのスクリーン キャプチャです (詳細であることは理解していますが、このアプリの使用が不快になる場合があります ;-) アプリの公開バージョンへのリンクもあります。 ここに画像の説明を入力

私が解決したいもう 1 つの詳細は、この UI の上部のフォントの色です。これらは、編集可能にしたくないため、「読み取り専用」に設定した textBoxes です (ユーザーがこの読み取り専用ステータスの副作用は、フォントが「灰色」になることです...この「偽のテーブル」で同じ側面（色を除く）を維持しながら、それを回避する方法はありますか?

編集：テキストの色に関する2番目の質問を見つけました：.setStyleAttribute('color','#000000')それと同じくらい簡単です...以前に見つけられなかったのはあまりにも愚かです;-)

注 2 : 興味深いことに、GUI ビルダーで設計された UI には同じ問題はありません ...

EDIT2：doGet部分のコードは次のとおりです（機能なしで実行するように変更されていますが、表示されるように変更されています）：

var key='0AnqSFd3iikE3dFV3ZlF5enZIV0JQQ0c1a3dWX1dQbGc'
var ss = SpreadsheetApp.openById(key)
var sh = ss.getSheetByName('Sheet1')
var idx = 0
var data = ss.getDataRange().getValues();
var len = data.length;
var scrit = ['All fields','Name','Lastname','Postal Adress','ZIP code','City','Country','email','phone#']
 //public version


function doGet() {
   var app = UiApp.createApplication().setTitle("BrowseList Test")
       .setHeight(420).setWidth(800).setStyleAttribute("background-color","beige").setStyleAttribute('padding','20');
    var title = app.createHTML('<B>DATABASE User Interface</B>').setStyleAttribute('color','#888888');
    app.add(title);
    var scroll = app.createScrollPanel().setPixelSize(750,150)
    var vpanel = app.createVerticalPanel();
    var cell = new Array();
    var cellWidth = [45,135,150,250,50,100]
    var row = new Array();
    var cHandler = app.createServerHandler('showpicked').addCallbackElement(scroll);
    for(vv=0;vv<15;++vv){
      row[vv]=app.createHorizontalPanel();
      vpanel.add(row[vv]);
       for(hh=0;hh<cellWidth.length;++hh){
        cell[hh+(vv)*cellWidth.length]=app.createTextBox().setWidth(cellWidth[hh]+"").setTitle('Click to show below')
        .setReadOnly(true).setId((hh+vv*cellWidth.length)+'').addClickHandler(cHandler).setStyleAttribute('background','#eeeeff').setStyleAttribute('color','#000000');
        row[vv].add(cell[hh+(vv)*cellWidth.length])
        }
      }
app.add(scroll.add(vpanel))
// Initial populate
      var resindex = new Array()     
    for(vv=0;vv<15;++vv){
        resindex.push(vv+1)
       for(hh=0;hh<cellWidth.length;++hh){
         var rowpos=vv+1+idx
         var cellpos = hh+vv*cellWidth.length
        cell[cellpos].setValue(data[rowpos][hh]);
        }
      }
  var rHandler = app.createServerHandler('refresh');
//
  var slist = app.createListBox().setName('critere').setId('slist').addClickHandler(rHandler);
    for(nn=0;nn<scrit.length;++nn){
      slist.addItem(scrit[nn]);
      }
  var search = app.createTextBox().setName('search').setId('search').setTitle('becomes yellow if no match is found');
  var modeS = app.createRadioButton('chkmode','strict').setId('chkmodes').addClickHandler(rHandler);
  var modeG = app.createRadioButton('chkmode','global').setValue(true).setId('chkmodeg').addClickHandler(rHandler);
  var letter = app.createRadioButton('show','letter').setValue(true).setId('letter').addClickHandler(rHandler);
  var raw = app.createRadioButton('show','raw data').setId('raw').addClickHandler(rHandler);
  var index = app.createHTML('found/'+len).setId('index').setStyleAttribute('color','#aaaaaa');
  var grid = app.createGrid(2,10).setWidth('750');
  grid.setWidget(1, 0, app.createLabel('search'));
  grid.setWidget(1, 1, search);
  grid.setWidget(1, 2, modeS);
  grid.setWidget(1, 3, modeG);
  grid.setWidget(1, 5, slist);
  grid.setWidget(1, 6, app.createLabel('show mode'));
  grid.setWidget(1, 7, letter);
  grid.setWidget(1, 8, raw);
  grid.setWidget(1, 9, index);
  app.add(grid);

  var hidden = app.createHidden('hidden').setId('hidden').setValue(resindex.toString());
  cHandler.addCallbackElement(grid).addCallbackElement(scroll).addCallbackElement(hidden);
  var result = app.createRichTextArea().setPixelSize(745,160).setId('result')
  .setStyleAttribute('background','white').setStyleAttribute('font-family',"Arial, sans-serif")
  .setStyleAttribute('font-size','small');
  result.setHTML('test ui');
  app.add(result).add(hidden);
  var sHandler = app.createServerHandler('searchH').addCallbackElement(grid).addCallbackElement(scroll);
  search.addKeyUpHandler(sHandler);
  rHandler.addCallbackElement(grid).addCallbackElement(scroll);
  slist.addChangeHandler(rHandler);

return app
 }
4

2 に答える 2

2

スクロール バーを取り除くために考えられる解決策は、中間Absoluteパネルを使用することです。次のコードにはスクロール バーがあります。

function doGet() {
  var app = UiApp.createApplication();
  var panel = app.createScrollPanel().setSize('100%', '100%');
  var content = app.createButton('Scroll Bars').setSize('100%', '100%');
  panel.setWidget(content);
  app.add(panel);
  return app;
}

そして、以下のコードにはスクロールバーがありません

function doGet() {
  var app = UiApp.createApplication();
  var panel = app.createScrollPanel().setSize('100%', '100%');
  var subPanel = app.createAbsolutePanel().setSize('100%', '100%');
  var content = app.createButton('No Scroll Bars').setSize('100%', '100%');
  subPanel.add(content);
  panel.setWidget(subPanel);
  app.add(panel);
  return app;
}
于 2012-07-26T07:56:52.263 に答える
0

Google サイト内に HTMLService Web アプリを埋め込む場合、垂直スクロール バーが非表示になるには、iFrame ガジェットがアプリの高さよりも約 50 ピクセル大きくなければならないようです。同じことがUiAppにも当てはまると仮定します。

于 2014-04-04T05:43:47.077 に答える