SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfineui-form

fineui-form

General & other

View repository

Updated 10-16 07:22

About this skill

FineUI Form Skill (Form)

When to Use

  • Build entry/edit forms, configure fields, labels, required red star, multi-column layout
  • Field validation (required, regex, comparison, custom) and whole-form submit validation
  • Read/backfill field values
  • Use Calendar to select date, date range, month, year, or time

Before You Start

  1. Which syntax? F.js / Pro / Core-MVC / Core-RazorForms / Core-RazorPages / Java（Spring Boot）(determination see fineui-foundation）。
  2. Single column or multiple columns?
    • Single column:SimpleForm(C#, fields placed directly in <Items>); F.js uses Form + layout: 'anchor'。
    • Multiple columns:Form（C#，<Rows><f:FormRow ColumnWidths="...">); F.js uses nested Panel layout:'column' + columnWidth。

Quick overview of each syntax (one required field + submit validation)

// ① F.js
F.create({
    type: 'Form', isFluid: true, id: 'form1', renderTo: '#wrap', title: '登录', layout: 'anchor', bodyPadding: 10,
    fieldDefaults: { labelWidth: 100 },
    items: [
        { type: 'TextBox', id: 'tbxName', fieldLabel: '用户名', required: true, emptyText: '请输入用户名' },
        { type: 'Button', text: '提交', validateForm: 'form1', handler: function () { showNotify('通过'); } }
    ]
});

<%-- ② Pro（WebForms）--%>
<f:SimpleForm ID="SimpleForm1" runat="server" IsFluid="true" BodyPadding="10px" Title="登录">
    <Items>
        <f:TextBox runat="server" ID="tbxName" Label="用户名" Required="true" ShowRedStar="true" EmptyText="请输入用户名" />
        <f:Button ID="btnSubmit" runat="server" Text="提交" ValidateForms="SimpleForm1" OnClick="btnSubmit_Click" />
    </Items>
</f:SimpleForm>

// ③ Core-MVC（Fluent API）
@(F.SimpleForm().IsFluid(true).BodyPadding(10).Title("登录").ID("SimpleForm1")
    .Items(
        F.TextBox().ID("tbxName").Label("用户名").Required(true).ShowRedStar(true).EmptyText("请输入用户名"),
        F.Button().Text("提交").ValidateForms("SimpleForm1").OnClick(Url.Action("btnSubmit_Click"), "SimpleForm1")
    ))

<!-- ④ Core-RazorForms（TagHelper）：OnClick="方法名" -->
<f:SimpleForm ID="SimpleForm1" IsFluid="true" BodyPadding="10" Title="登录">
    <Items>
        <f:TextBox ID="tbxName" Label="用户名" Required="true" ShowRedStar="true" EmptyText="请输入用户名"></f:TextBox>
        <f:Button ID="btnSubmit" Text="提交" _ValidateForms="SimpleForm1" OnClick="btnSubmit_Click"></f:Button>
    </Items>
</f:SimpleForm>

<!-- ⑤ Core-RazorPages（TagHelper）：OnClick="@Url.Handler(...)" + OnClickFields -->
<f:Button ID="btnSubmit" Text="提交" _ValidateForms="SimpleForm1"
          OnClick="@Url.Handler(&quot;btnSubmit_Click&quot;)" OnClickFields="SimpleForm1"></f:Button>

<!-- ⑥ FineUI.Java（Thymeleaf 方言）：全 kebab-case；validate-forms 直接写、逗号分隔（无下划线前缀）-->
<f:simple-form id="SimpleForm1" is-fluid="true" body-padding="10" title="登录">
    <f:items>
        <f:text-box id="tbxName" label="用户名" required="true" show-red-star="true" empty-text="请输入用户名"></f:text-box>
        <f:button id="btnSubmit" text="提交" validate-forms="SimpleForm1" on-click="btnSubmit_Click"></f:button>
    </f:items>
</f:simple-form>

// FineUI.Java 页面类：@FineUIPage 路由 + extends FineUIPageBase；void 处理器无需 return
@FineUIPage("form/login")
public class Login extends FineUIPageBase {
    public void btnSubmit_Click(Object sender, EventArgs e) {
        Notify notify = new Notify();
        notify.setMessage("通过");
        notify.show();
    }
}

Note that in TagHelper _ValidateForms(underscore convenience form)——ValidateForms is string[], pass it using the underscore string syntax. Multiple forms separated by commas:_ValidateForms="Form1,Form2"。FineUI.Java directly writes validate-forms="Form1,Form2"(no underscore prefix).

Documentation Reference Files

File When to read
references/form-layout.md Form vs SimpleForm, LabelWidth/LabelAlign, multi-column FormRow/ColumnWidths
references/fields.md Basic fields (TextBox/TextArea/NumberBox/DatePicker/DropDownList/CheckBox/RadioButtonList/CheckBoxList/TimePicker/Label/Hidden) + reading values
references/advanced-fields.md Advanced fields: FileUpload (file upload), TriggerBox (trigger), DropDownBox (dropdown tree/dropdown table/multi-select dropdown), HtmlEditor (rich text)
references/calendar.md Calendar embedded calendar: date and range, month/year/time panels, min/max date, selection events and reading/writing values
references/validation.md Required/regex/comparison/custom validation, whole-form validation, server-side MarkInvalid

Related Skills

  • fineui-foundation: syntax determination, page skeleton, naming conventions, RawHtml
  • fineui-grid: Grid cell editing uses the same set of field controls as editor

Constraints & Rules

  1. Decide the syntax first, do not mix: F.js uses fieldLabel/required(camelCase); C# uses Label/Required（PascalCase）；FineUI.Java uses label/required(kebab-case), property "values" are still PascalCase (text-mode="Password"、display-type="Switch"、compare-operator="GreaterThan"）. Do not use F.js's fieldLabel in C# (C# is Label）。
  2. Use SimpleForm for single column, Form for multiple columns: Form's fields must be wrapped in <Rows><f:FormRow><Items> ; SimpleForm fields are directly in <Items>。
  3. Required red star：Required="true" must be paired with ShowRedStar="true" to display the red star.
  4. Whole-form validation is on the submit button：ValidateForms="表单ID"(Core-TagHelper uses _ValidateForms；FineUI.Java directly writes validate-forms="表单ID", comma-separated multiple forms, no underscore prefix); it is not set on the Form container.
  5. Value reading method differs by syntax: Pro / Core-RazorForms use control fields (tbxName.Text); Core-MVC / RazorPages use postback parameters or UIHelper.TextBox("id")；FineUI.Java uses control field getters/setters (tbxName.getValue()、ddl.getSelectedValue()、cbx.isChecked()、cbl.getSelectedValues()）. See references/fields.md。
  6. Pro change events use the recommended mode: project global setting EnableImplicitChangeEvents="false" after that, declare OnTextChanged、OnSelectedIndexChanged、OnCheckedChanged and other server-side events to automatically post back, without writing AutoPostBack="true"; explicit AutoPostBack always takes precedence. Postbacks from other controls only synchronize field values and will not also trigger that field's change event.
  7. Never fabricate APIs: if unsure about a field property, check the official API or F/doc/ JSDoc。
  8. Calendar is different from DatePicker: Calendar is a date/time panel displayed directly on the page; when you need a date panel to pop up from an input box, use DatePicker. Calendar's date-type panel reads and writes SelectedDate, and partial values such as month/year/time are used according to references/calendar.md using Text。

Official Resources

  • Online API: JS https://fineui.com/js/api/ · Pro https://fineui.com/pro/api/ · Core https://fineui.com/core/api/
  • FineUI.Java: control property semantics are consistent with Core (property names in kebab-case, enum values same as Core), and the client-side F.js API is exactly the same as the JS side; when looking up properties, refer to the Core API and then convert to kebab-case according to the naming convention.