Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
dustpg committed Jun 26, 2020
1 parent da4853a commit f1915c4
Show file tree
Hide file tree
Showing 16 changed files with 270 additions and 28 deletions.
33 changes: 33 additions & 0 deletions doc/blog/layout-size.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
以width作为例子

类型 | 下限 | 建议 | 上限
----|--------------|--------------|----------
CSS | min-width | width| max-width
LUI | limited-width| fitting-width| max-width


CSS的属性会覆写LUI属性对应值,并且处于高优先级。即:
- 如果指定了CSS属性,那么写入对应的LUI属性,再标记处于CSS状态
- 如果没有指定CSS属性,那么LUI属性会按照相应的规则处理
- 可以通过`style`或者直接的属性进行CSS属性设置

```cpp
case BKDR_MINWIDTH:
// minwidth
m_oStyle.limited.width = value.ToFloat();
m_oStyle.overflow_sizestyled.min_width = true;
break;
case BKDR_MINHEIGHT:
// minheight
m_oStyle.limited.height = value.ToFloat();
m_oStyle.overflow_sizestyled.min_height = true;
break;
```

一个最简单的例子就是图像`<image>`,建议宽度就是使用图片的宽度,下限宽度可以考虑`0`或者`1`

复杂点的例子就是箱型布局`<box>`。LongUI中,使用对应滚动条(这里就是水平滚动条)的`<box>`下限宽度会调整到`0`,建议宽度依然是有效子控件建议宽度(以及边框什么的)累加。如果没有使用滚动条则两值相同。

而一旦使用CSS值,则以设置值为准。

正常控件大小应该介于建议值与最大值之间,特殊情况会处于最小值与建议值之间。而这种特殊情况`<box>`处理方式有点违背常理——`flex`越大的值反而最小,可以理解为以建议值作为起点,`flex`作为伸缩参数,越大的伸得越大,缩得也越大。
3 changes: 3 additions & 0 deletions doc/longui.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# LongUI Special

## HiDPI Support
4 changes: 2 additions & 2 deletions doc/test-xul/XULRunner-Examples-content/splitter.xul
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>

<window title="XUL Splitters"
<window title="XUL Splitters"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Expand All @@ -13,7 +13,7 @@

<description><html:h1>XUL Splitters</html:h1></description>

<vbox flex="1" style="overflow: auto">
<vbox flex="1" >

<groupbox orient="horizontal" flex="1">
<caption label="collapse before" />
Expand Down
19 changes: 10 additions & 9 deletions doc/test-xul/scroll.xul
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="css/test.css" type="text/css"?>

<window title="XUL Test"

Expand All @@ -17,12 +16,14 @@ function get_text() {
]]>
</script>
<vbox flex="1" style="overflow: scroll">
<vbox style="background-color: blue; overflow: auto">
<hbox style="min-width: 100px; min-height: 500px"/>
</vbox>
<vbox style="background-color: green;">
<hbox style="min-width: 100px; min-height: 500px"/>
</vbox>
</vbox>

<button label="A"/>

<vbox flex="1" >
<hbox flex="1" style="overflow: auto">
<label flex="2" crop="center" value="And this one-line label" />
<label flex="1" crop="center" value="And this one-line label, if there isn't enough room for it, will be cropped in the middle." />
<label flex="1" value="And" />
</hbox>
</vbox>
</window>
18 changes: 10 additions & 8 deletions doc/xul-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,22 @@
# Layout

- [box](./xul/box.md) [vbox](./xul/vbox.md) [hbox](./xul/vbox.md)
- [stack](./xul/stack.md) [deck](./xul/deck.md)
- [grid](./xul/grid.md)

# Controls

## Control List

- [\<button>](#\<button>) [type="menu"](#\<button\ type="menu">)
- [\<checkbox>](#\<checkbox>) [\<groupbox>](#\<groupbox>) [\<radio>](#\<radio>)
- [\<image>](#\<image>) [\<label>](#\<label>)
- [\<listbox>](#\<listbox>) [\<tree>](#\<tree>) \<richlistbox>
- [\<button>](#button) [type="menu"](#button-typemenu)
- [\<checkbox>](#checkbox) [\<groupbox>](#groupbox) [\<radio>](#radio)
- [\<image>](#image) [\<label>](#label)
- [\<listbox>](#listbox) [\<tree>](#tree) \<richlistbox>
- \<menu> \<splitter>
- [\<menulist(combobox)>](#\<menulist>) [editable="true"](#<menulist\ editable="true">)
- [\<progressmeter>](#\<progressmeter>) [\<scale>](#\<scale>)
- [\<textbox>](#\<textbox>) [multiline="true"](#\<textbox\ multiline="true">) [type="number"](#\<textbox\ type="number">) [type="password"](#\<textbox\ type="password">)
- [\<toolbarbutton>](#\<toolbarbutton>) [type="menu"](#\<toolbarbutton\ type="menu">)
- [\<menulist(combobox)>](#menulist) [editable="true"](#menulist-editabletrue)
- [\<progressmeter>](#progressmeter) [\<scale>](#scale)
- [\<textbox>](#textbox) [multiline="true"](#textbox-multilinetrue) [type="number"](#textbox-typenumber>) [type="password"](#textbox-typepassword>)
- [\<toolbarbutton>](#toolbarbutton) [type="menu"](#toolbarbutton-typemenu>)



Expand Down
3 changes: 3 additions & 0 deletions doc/xul/box.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
- 複数の子要素を含むコンテナ要素。 `box`[orient](#orient) 属性が `horizontal` にセットされていると、子要素はbox内で左から右の順に配置される。 [orient](#orient)`vertical` だと、子要素は上から下の順に配置される。 子要素が重なることはない。 デフォルトの配置方向は `horizontal`
- 一个可以包含任何子元素的容器元素。`box`[orient](#orient) 属性设置为`horizontal`的场合,子元素默认就会从左到右排列;同样地,[orient](#orient) 属性设置为`vertical`的场合,子元素默认会从上到下排列。子元素之间不会重叠。默认是`horizontal`

- LongUI::UIBoxLayout


## Related List

Expand Down Expand Up @@ -38,3 +40,4 @@

- [XUL-box](https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/box)
- [XUL-The Box Model](https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/Tutorial/The_Box_Model)
- [LongUI::UIBoxLayout](../../src/control/ui_box.cpp)
2 changes: 2 additions & 0 deletions doc/xul/button.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ A button that can be pressed by the user. Event handlers can be used to trap mou

按钮就是可以点击的东西。事件处理程序可以用来捕获鼠标、键盘和其他事件。它通常呈现为一个灰色开始长方形。您可以指定按钮的 [label](#label) 属性来将按钮的文字设置好,或者直接写在标签中间也行。

- LongUI::UIButton


## Attributes List
[accesskey](#accesskey), autocheck, checkState, [checked](#checked), command, crop, [dir](#dir), [disabled](#disabled), dlgtype, [group](#group), icon, [image](#image), [label](#label), open, [orient](#orient), tabindex, [type](#type)
Expand Down
9 changes: 5 additions & 4 deletions doc/xul/hbox.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# hbox

- in LongUI, This is equivalent to the [box](./box.md) element.
- LongUIにて、この要素は [box](./box.md) 要素と同等です
- LongUI 中, 本元素等价于[box](./box.md)

- This is equivalent to the [box](./box.md) element.
- この要素は [box](./box.md) 要素と同等です
- 本元素等价于[box](./box.md)
- LongUI::UIHBoxLayout

*HOW IMPL*

Expand All @@ -28,3 +28,4 @@

- [XUL-hbox](https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/hbox)
- [box](./box.md)
- [LongUI::UIHBoxLayout](../../src/control/ui_box.cpp)
15 changes: 15 additions & 0 deletions doc/xul/source/ex_stacks_1.xul
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="example-window" title="Example 4.1.1"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<stack>
<label value="Shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15px"/>
<label value="Shadowed" style="color: red; font-size: 15px;"/>
</stack>


</window>

15 changes: 15 additions & 0 deletions doc/xul/source/ex_stacks_2.xul
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="example-window" title="Example 4.1.2"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<stack style="background-color: #C0C0C0">
<label value="Disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/>
<label value="Disabled" style="color: grey;"/>
</stack>


</window>

19 changes: 19 additions & 0 deletions doc/xul/source/ex_stacks_3.xul
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="example-window" title="Example 4.1.3"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<deck selectedIndex="2">
<label value="This is the first page"/>
<button label="This is the second page"/>
<box>
<label value="This is the third page"/>
<button label="This is also the third page"/>
</box>
</deck>


</window>

25 changes: 25 additions & 0 deletions doc/xul/source/ex_tabpanel_1.xul
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="example-window" title="Example 4.3.1"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<tabbox>
<tabs>
<tab label="Mail"/>
<tab label="News"/>
</tabs>
<tabpanels>
<tabpanel id="mailtab">
<checkbox label="Automatically check for mail"/>
</tabpanel>
<tabpanel id="newstab">
<button label="Clear News Buffer"/>
</tabpanel>
</tabpanels>
</tabbox>


</window>

66 changes: 66 additions & 0 deletions doc/xul/source/findfile-tabpanel.xul
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox flex="1">

<tabbox>
<tabs>
<tab label="Search" selected="true"/>
<tab label="Options"/>
</tabs>

<tabpanels>
<tabpanel id="searchpanel" orient="vertical">


<label value="Enter your search criteria below and select the Find button to begin the search."/>

<spacer style="height: 10px"/>

<groupbox orient="horizontal">
<caption label="Search Criteria"/>
<menulist id="searchtype">
<menupopup>
<menuitem label="Name"/>
<menuitem label="Size"/>
<menuitem label="Date Modified"/>
</menupopup>
</menulist>
<spacer style="width: 10px;"/>
<menulist id="searchmode">
<menupopup>
<menuitem label="Is"/>
<menuitem label="Is Not"/>
</menupopup>
</menulist>
<spacer style="width: 10px;"/>
<textbox id="find-text" flex="1" style="min-width: 15em;"/>
</groupbox>
</tabpanel>
<tabpanel id="optionspanel" orient="vertical">
<checkbox id="casecheck" label="Case Sensitive Search"/>
<checkbox id="wordscheck" label="Match Entire Filename"/>
</tabpanel>

</tabpanels>
</tabbox>

<spacer style="height: 10px"/>

<hbox>
<progressmeter value="50%" style="margin: 4px;"/>
<spacer flex="1"/>
<button id="find-button" label="Find" default="true"/>
<button id="cancel-button" label="Cancel"/>
</hbox>

</vbox>

</window>

47 changes: 47 additions & 0 deletions doc/xul/tabboxes.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
It is common in preference dialogs for tabbed pages to appear. We'll find out how to create them here.

# Tabboxes

Tabboxes are typically used in an application in the preferences window. A series of tabs appears across the top of a window. The user can click each tab to see a different set of options. It is useful in cases when you have more options than will fit in one screen.

XUL provides a method to create such dialogs. It involves five new elements, which are described briefly here and in more detail below.

- [tabbox](./tabbox.md) The outer box that contains the tabs along the top and the tab pages themselves.
- [tabs](./tabs.md) The inner box that contains the individual tabs. In other words, this is the row of tabs.
- [tab](./tab.md) A specific tab. Clicking on the tab brings the tab page to the front.
- [tabpanels](./tabpanels.md) The container for the pages.
- [tabpanel](./tabpanels.md) The body of a single page. You would place the content for a page within this element. The first tabpanel corresponds to the first tab, the second tabpanel corresponds to the second tab and so on.

The `tabbox` is the outer element. It consists of two children, a `tabs` element which contains the row of tabs and a `tabpanels` elements which contains the tabbed pages.

Shown below is the general syntax of a tabbox:

```xml
<tabbox id="tablist">
<tabs>
<!-- tab elements go here -->
</tabs>
<tabpanels>
<!-- tabpanel elements go here -->
</tabpanels>
</tabbox>
```

The `tab` elements are placed inside a `tabs` element, which is much like a regular box. The `tabs` element itself has been placed inside a `tabbox`. The `tabbox` also contains a `tabpanels` element which will appear below the `tabs` due to the vertical orientation on the whole tabbox.

There is really nothing special about the tab elements that make them different than boxes. Like boxes, tabs can contain any element. The difference is that the tabs render slightly differently and only one tab panel's contents are visible at once, much like a `deck`.

The contents of the individual tab pages should go inside each `tabpanel` element. They do not go in the `tab` elements, as that is where the contents of the tabs along the top go.

Each `tabpanel` element becomes a page on the tabbed display. The first panel corresponds to the first tab, the second panel corresponds to the second tab, and so on. There is a one-to-one relationship between the `tab` and `tabpanel` elements.

When determining the size of the `tabbox`, the size of the largest page is used. That means that if there are ten textboxes on one tab page and only one on another, the tab page will be sized to fit the one with the ten on it as this takes up more room. The area taken up by the tab area does not change when the user switches to a new tab page.

# Tabbox example

- Example 1
-

# REF

- [XUL-Tabboxes](https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/Tutorial/Tabboxes)
4 changes: 3 additions & 1 deletion doc/xul/vbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
- A container element which can contain any number of child elements. This is equivalent to the [box](./box.md) element, except it defaults to vertical orientation.
- 様々な子要素を含むことができるコンテナ要素です。これはデフォルトで縦方向に並ぶこと以外は [box](./box.md) 要素と同等です。
- 一个可以包含任何子元素的容器元素。这相当于默认为垂直方向的 [box](./box.md) 元素。

- LongUI::UIVBoxLayout

*HOW IMPL*

Expand Down Expand Up @@ -34,3 +34,5 @@ class UIVBoxLayout final : public UIBoxLayout {

- [XUL-vbox](https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL/vbox)
- [box](./box.md)
- [LongUI::UIVBoxLayout](../../src/control/ui_box.cpp)

Loading

0 comments on commit f1915c4

Please sign in to comment.