第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定

Learning Qooxdoo - 3

標(biāo)簽:
資訊

The basic steps to create a qooxdoo application is as follows:

  1. Select a layout (VBox, HBox, Grid, Dock….)

  2. Create a container from the layout. (Usually Composite)

  3. Add the container to the application root (Document).

  4. Add as many widgets as you can to container.

Following is an example to create three button to a VBox container.

var layout = new qx.ui.layout.VBox();
var container = new qx.ui.container.Composite(layout);
this.getRoot().add(container);

container.add(new qx.ui.form.Button('This is a button 1'));
container.add(new qx.ui.form.Button('This is a button 2'));
container.add(new qx.ui.form.Button('This is a button 3'));

There is an convenient way to run qooxdoo code is the playground. Just copy the code and paste it into the source code editor, click run button.

Next, we want the button fill all the width of the Viewport

var layout = new qx.ui.layout.VBox();
var container = new qx.ui.container.Composite(layout);
container.setWidth(qx.bom.Viewport.getWidth());
container.setHeight(qx.bom.Viewport.getHeight());
this.getRoot().add(container);

container.add(new qx.ui.form.Button('This is a button 1'));
container.add(new qx.ui.form.Button('This is a button 2')); 

container.add(new qx.ui.form.Button('This is a button 3'));

We have many ways to set width and height of the container:
like this:

container.set({ 
    width: qx.bom.Viewport.getWidth(), 
    height: qx.bom.Viewport.getHeight()
});

and this:

container.set('width', qx.bom.Viewport.getWidth());
container.set('height', qx.bom.Viewport.getHeight());

There is also an easy way to do this, set the edge to 0px:

var layout = new qx.ui.layout.VBox();
var container = new qx.ui.container.Composite(layout);
this.getRoot().add(container, { edge: 0 }); 

container.add(new qx.ui.form.Button('This is a button 1'));
container.add(new qx.ui.form.Button('This is a button 2'));
container.add(new qx.ui.form.Button('This is a button 3'));

You can modify the edge value to see the result in action.

Finally, we want the button to fill the height of the container:

var layout = new qx.ui.layout.VBox();
var container = new qx.ui.container.Composite(layout);
this.getRoot().add(container, { edge: 0 });

container.add(new qx.ui.form.Button('This is a button 1'), { flex: 0 });
container.add(new qx.ui.form.Button('This is a button 2'), { flex: 1 });
container.add(new qx.ui.form.Button('This is a button 3'), { flex: 1 });

The Flex is an importent option to control the vertical behavior, just as this article say:

Flex property determines how the extra space2 is distributed between children. By default it is set to 0, which means that the widget will not grow vertically. Any other (integer) value for flex will cause growing to occupy the extra space. Growing is proportional to flex value.

點擊查看更多內(nèi)容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊有機(jī)會得

100積分直接送

付費專欄免費學(xué)

大額優(yōu)惠券免費領(lǐng)

立即參與 放棄機(jī)會
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消