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

fineui-foundation

General & other

View repository

Updated 10-16 07:22

About this skill

FineUI Foundation Skill (Foundation)

The common foundation for building any FineUI page.First use this skill to determine "which style to write", set up the page skeleton, and master trusted HTML; then move on to specific component skills (such as fineui-grid）。

Terminology: 4 deployment stacks (Core includes 3 development modes)

Deployment Stack Development Mode Frontend Style
F.js — (pure JavaScript) F.create({ type:'Xxx', ... })
Pro WebForms <f:Xxx runat="server">
Core MVC(classic MVC) Fluent API Html.F().Xxx()...
Core RazorForms(Core recommended) TagHelper <f:Xxx>（PascalCase）
Core RazorPages TagHelper <f:Xxx>（PascalCase）
Java Spring Boot Thymeleaf dialect tags <f:xxx>（kebab-case）

Fluent API / TagHelper isfrontend style, not a mode name; Core modes are MVC / RazorForms / RazorPages. RazorForms and RazorPages share TagHelper tags, but data initialization/events differ. FineUI.Java is the "twin stack" of Core-RazorForms: it is likewise "tag-style stateful server-side components", but uses Spring Boot + Thymeleaf dialect, with all tags/attributes in kebab-case, and page classes in Java.The client-side F.js runtime is identical across all four stacks（F.ui.Grid1.xxx(), render functions, and listener JS are word-for-word identical). See references/stacks.md。

When to Use

  • Determine which style a FineUI project belongs to, to avoid generating code for the wrong side
  • Build a page from scratch (page skeleton, PageManager, Region/ViewPort layout)
  • Use F.create / Fluent / TagHelper to create components
  • Make text output as-is according to HTML (trusted HTML / RawHtml)
  • Understand attribute naming and global configuration items

Before You Start —— first determine the style

Determination clues: pure frontend .html + F.create → F.js；.aspx + <f:Xxx runat="server"> → Pro；Controllers/ + Views/*/Index.cshtml use Html.F() → Core-MVC；Pages/*.cshtml + <f:Xxx> tags → Core-RazorForms(has .designer.cs) or Core-RazorPages(no designer);.html in <html xmlns:f="http://fineui.com/java"> + <f:xxx> lowercase tags,pom.xml/mvnw + page class with @FineUIPage → Java（Spring Boot）。

Quick Overview of Each Style (Creating a Component)

// F.js
F.create({ type: 'Panel', renderTo: '#wrap', id: 'Panel1', title: '面板', bodyPadding: 10 });

<%-- Pro（WebForms）--%>
<f:Panel ID="Panel1" runat="server" Title="面板" BodyPadding="10px"></f:Panel>

// Core-MVC（Fluent API）
@(Html.F().Panel().ID("Panel1").Title("面板").BodyPadding(10))

<!-- Core-TagHelper（RazorForms / RazorPages 相同）-->
<f:Panel ID="Panel1" Title="面板" BodyPadding="10"></f:Panel>

<!-- FineUI.Java（Thymeleaf 方言：标签 + 属性全 kebab-case）-->
<f:panel id="Panel1" title="面板" body-padding="10"></f:panel>

Documentation Reference Files

File When to Read
references/stacks.md Summary table of differences between styles, determination clues, naming conventions, global configuration
references/page-scaffold.md Minimal page skeleton, PageManager location, Region/ViewPort layout, shared _Layout
references/events-postback.md ClickHandler, server-side events, Core RazorForms synchronous/asynchronous event naming,F.customEvent, Pro's two compatibility switches and Grid row commands
references/rawhtml.md Trusted HTML:F.rawHtml / XxxRawHtml / new RawHtml(...)

Related Skills

  • fineui-grid: data tables (the most complex component, with complete comparison across styles (including Java))
  • fineui-form / fineui-datalist / fineui-tree / fineui-window / fineui-panel / fineui-layout / fineui-button / fineui-theming: components and themes
  • fineui-upgrade: version upgrades (identifying breaking changes)

Constraints & Rules

  1. Determine the style first, do not mix: a page uses only one style. F.js attributes are camelCase, the three C# modes are PascalCase,Java tags/attributes are all kebab-case(attribute "values" such as enums/icons still remain PascalCase, e.g. text-mode="Password"); do not mix Fluent API (MVC) with TagHelper (RazorForms/RazorPages).
  2. PageManager location: Pro is written inside the aspx page (<f:PageManager>）；Core's three modes are uniformly placed in the shared _Layout.cshtml of @F.PageManager；Java is placed in the shared shared/layout.html（<f:styles>/<f:scripts> slot) + optional implementation FineUIPageManagerInitializer bean for page-level configuration. None of the three business pages write PageManager.
  3. Text is HTML-encoded by default (v15.2): to output HTML as-is you must declare trusted HTML (F.rawHtml / XxxRawHtml / new RawHtml(...)); do not declare content from user input/database. See references/rawhtml.md。
  4. Never fabricate APIs: for uncertain properties/methods, check the official website API or the JSDoc of F/doc/ . Different syntaxes have different names, don't force-fit them (e.g. Grid column F.js text/field ↔ C# HeaderText/DataField ↔ Java header-text/data-field）。
  5. Enabling tags per stack: Core enabling TagHelper requires _ViewImports.cshtml of @addTagHelper *, FineUI.Core, CSS/JS use @F.RenderCss() / @F.RenderScript()；Java page root tag declares the dialect namespace <html xmlns:f="http://fineui.com/java">, CSS/JS are output by the <f:styles> / <f:scripts> in the master。
  6. Message boxes and postback return values must be distinguished by mode: F.js uses F.alert({ message: ... }) / showNotify(...); Pro and Core-RazorForms 's synchronous control events return void, directly manipulate controls,do not write OnPostXxx, do not return IActionResult, do not call UIHelper.Result(). Button clicks may write void Xxx_Click(object sender, EventArgs e); the second parameter of events such as paging, sorting, and row commands must use their respective dedicated EventArgs. RazorForms backend classes must be partial and inherit the project's existing RazorForms page base class (the official example is XxxModel : BaseModel, while BaseModel itself can inherit PageModel); do not change it to a non- partial RazorPages page and use OnGet / OnPostXxx. Only Core-MVC actions and Core-RazorPages OnPostXxx return IActionResult, ending with return UIHelper.Result();; Java uses message classes Alert.show(...)、Confirm.show(...) or new Notify().show(), synchronous handlers return void, and event parameters are likewise chosen by event type.
  7. Client-side actions only write named functions: Pro/Core use ClickHandler="onXxxClick", Java uses click-handler="onXxxClick", the function's first parameter is event. Do not use OnClientClick / on-client-click in new code or stuff scripts into Handler; see references/events-postback.md。
  8. Core RazorForms event names omit Asyncby default: tags are recommended to write OnClick="btnSave_Click", the backend can use the synchronous void btnSave_Click(...) or the asynchronous async Task btnSave_ClickAsync(...), the tag stays unchanged when switching implementations; when both exist, the asynchronous method takes precedence, and asynchronous events should not use async void. The full Async name is only for compatibility explanation, see references/events-postback.md; this naming rule does not apply to Pro, Java, or other Core modes.

Official Resources