Seaside - 页面格式答案

【问题标题】：Seaside - Page formattingSeaside - 页面格式
【发布时间】：2013-07-17 02:32:52
【问题描述】：

我们的页面呈现如下内容：

有没有办法更好地格式化这个？例如，可能在一列中有标签，而在另一列中有输入？

这是我们代码的 sn-p：

renderContentOn: html

    html horizontalRule.
    html horizontalRule.
    html heading level: 2; with: 'System Warnings & Errors:'.
    html horizontalRule.
    (SpendingManager warningsFound = false) ifFalse: [ 
        self renderWarnings.
        WarningsReport renderContentOn: html.
        SpendingManager clearProblemList.

    html horizontalRule.
    html horizontalRule.
    ].

        html heading level: 2; with: 'Create A Fund:'.
            html form: [
            html label: 'Code:  '.
            html textInput
            on: #fName of: FundCreator.
                html break.
            html label: '   Starting Amount:  '.
            html textInput
            on: #amount of: FundCreator.
                html break.

        html submitButton
            callback: [(FundCreator fName = '') ifFalse: [FundCreator createFromUI.] 
                                                ifTrue: [SpendingManager addProblem: 'SP0002']. 
            self renderReport ];
            text: 'Create Fund'.
        ].

        html heading level: 2; with: 'Create A GLAC:'.
        html form: [

            html label: 'Code:  '.
            html textInput
            on: #gName of: GLACCreator.
                html break.

            html label: '   Debit Fund:  '.
            html textInput
            on: #dFund of: GLACCreator.
                html break.

            html label: '   Credit Fund:  '.
            html textInput
            on: #cFund of: GLACCreator.
                html break.

            html label: '   Description:  '.
            html textInput
            on: #descr of: GLACCreator.
                html break.

        html submitButton
            callback: [GLACCreator createFromUI. self renderReport ];
            text: 'Create GLAC'.

    ].

        html heading level: 2; with: 'Create a Transaction:'.
        html form: [

            html label: 'GLAC:  '.
            html textInput
            on: #aGLAC of: TransactionCreator.
                html break.

            html label: '   Amount:  '.
            html textInput
            on: #amount of: TransactionCreator.
                html break.

        html submitButton
            callback: [TransactionCreator createFromUI. self renderReport ];
            text: 'Create Transaction'.

    ].

【问题讨论】：

只是一个讨论：谁发明了seaside？听起来比写 HTML 更复杂。
@ShivanRaptor Avi Bryant 等等。这取决于你定义的复杂。它有点冗长，但通常您会将内容拆分为多个组件。
除了样式（你可能想用 CSS 做）之外，你应该考虑把你的代码分成多个组件。
@ShivanRaptor 在构建复杂的应用程序时，它比使用 html 或模板语言要简单得多。

标签： html css smalltalk seaside

【解决方案1】：

您可以做几件事。

更简单的方法是呈现一个表格并将所有标签放入一列，将文本输入放入另一列。您可以使用 css 使表格和单元格边框不可见。

更好的解决方案是为标签分配一个 css 类，然后再次使用 css 使所有标签具有相同的大小和方向。

【讨论】：

【解决方案2】：

一定要在 CSS 中做到这一点，这就是它的用途。你可以设置标签和输入元素显示为一个块，然后使用宽度和对齐来得到你想要的布局。

这样的事情应该可以帮助您入门：

form label {
  display: block;
  float: left;
  text-align: right;
  padding-right: 1em;
  padding-top: 0.3em;

  width: 15em;
}

form input {
  display: block;
  float: left;
  padding-top: 0.3em;
}

form br {
  clear: left;
}

【讨论】：