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

fineui-window

Frontend & websites

View repository

Updated 10-16 06:52

About this skill

FineUI Window & MessageBox Skill (Window & MessageBox)

When to Use

  • Popup window: inline content window, or an iframe popup that loads another page (common edit popup)
  • Open/close window, iframe child page passing data back to the parent page after closing
  • Message prompts: Alert dialog, Confirm confirmation box, Notify notification box

Before You Start

  1. Which syntax? F.js / Pro / Core-MVC / Core-RazorForms / Core-RazorPages / Java (Spring Boot) (for determination see fineui-foundation）。
  2. Is the window content inline or iframe?
    • Inline: content is written inside the window (F.js contentEl / C# <Content> or ContentEl / Java content="..." property）。
    • iframe: loads another page (EnableIFrame=true + iframe url), used for a standalone edit page.Edit popups basically all use iframe.
  3. Just a message prompt(not a popup page) → directly use MessageBox (references/messagebox.md）。

Quick overview of each syntax (one inline window + show button)

// ① F.js
F.create({
    type: 'Window', id: 'Window1', title: '窗体', width: 650, height: 300, modal: false,
    resizable: true, maximizable: true, bodyPadding: 10, contentEl: '#content1', hidden: true
});
F.create({ type: 'Button', renderTo: '#wrap', text: '显示窗体',
    handler: function () { F.ui.Window1.show(); } });

<%-- ② Pro（WebForms）--%>
<f:Window ID="Window1" runat="server" Title="窗体" Width="650px" Height="300px" IsModal="false"
    EnableResize="true" EnableMaximize="true" BodyPadding="10px" CloseAction="HidePostBack" OnClose="Window1_Close">
    <Content><p>窗口内联内容</p></Content>
</f:Window>
<f:Button ID="btnShow" runat="server" Text="显示窗体" ClickHandler="onShowWindowClick" />
<script>
    var Window1ClientID = '<%= Window1.ClientID %>';
    function onShowWindowClick(event) { F(Window1ClientID).show(); }
</script>

// ③ Core-MVC（Fluent API）
@(F.Window().ID("Window1").Title("窗体").Width(650).Height(300).IsModal(false)
    .EnableResize(true).EnableMaximize(true).BodyPadding(10)
    .CloseAction(CloseAction.HidePostBack).OnClose(Url.Action("Window1_Close")).ContentEl("#content1").Hidden(true))
@(F.Button().Text("显示窗体").ClickHandler("onShowWindowClick"))

<!-- ④ Core-RazorForms（TagHelper）：OnClose="方法名" -->
<f:Window ID="Window1" Title="窗体" Width="650" Height="300" IsModal="false"
    EnableResize="true" EnableMaximize="true" BodyPadding="10" CloseAction="HidePostBack" OnClose="Window1_Close">
    <Content><p>窗口内联内容</p></Content>
</f:Window>
<f:Button ID="btnShow" Text="显示窗体" ClickHandler="onShowWindowClick"></f:Button>

<!-- ⑤ Core-RazorPages（TagHelper）：OnClose="@Url.Handler(...)" -->
<f:Window ID="Window1" Title="窗体" Width="650" Height="300" CloseAction="HidePostBack"
    OnClose="@Url.Handler(&quot;Window1_Close&quot;)"> <Content><p>...</p></Content> </f:Window>

<!-- FineUI.Java（Thymeleaf 方言）：内联内容用 content 属性；on-close="方法名" -->
<f:window id="Window1" title="窗体" width="650" height="300" is-modal="false"
    enable-resize="true" enable-maximize="true" body-padding="10"
    close-action="HidePostBack" on-close="Window1_Close" content="<p>窗口内联内容</p>"></f:window>
<f:button id="btnShow" text="显示窗体" click-handler="onShowWindowClick"></f:button>

// Core / Java 页面脚本；Pro 需使用上面渲染后的 ClientID
function onShowWindowClick(event) {
    F.ui.Window1.show();
}

// FineUI.Java 页面类：服务端显隐用 setHidden；on-close 处理器返回 void
@FineUIPage("window/window")
public class Window extends FineUIPageBase {
    com.fineui.java.core.controls.Window Window1;
    public void Window1_Close(Object sender, EventArgs e) { Alert.show("触发了窗体的关闭事件！"); }
}

Documentation Reference Files

File When to read
references/window.md Window container (inline/iframe), open/close, iframe passing data back (closeArgument)
references/messagebox.md Alert dialog, Confirm confirmation box, Notify notification box (including icons, callbacks)

Related Skills

  • fineui-foundation: syntax determination, RawHtml (when message content contains HTML)
  • fineui-form: an iframe edit window usually contains a form
  • fineui-grid: double-click a row/row action button to open the edit window

Constraints & Rules

  1. Determine the syntax first, do not mix：F.js camelCase（modal/maximizable）；C# PascalCase（IsModal/EnableMaximize）；Java kebab-case（is-modal/enable-maximize), inline content uses the content property rather than the <Content> child tag。
  2. CloseAction="HidePostBack" + OnClose: to trigger a server-side event when the window closes (such as refreshing the parent table), the window needs to set CloseAction="HidePostBack"（Java close-action="HidePostBack", default Hide does not trigger) and bind OnClose/on-close。
  3. OnClose event signature differs by syntax：Pro / RazorForms 方法名(object sender, WindowCloseEventArgs e)(read e.CloseArgument）；MVC [HttpPost] 方法名()；RazorPages OnPost方法名()；Java void 方法名(Object sender, EventArgs e), read the close argument from e.getArgument()(not WindowCloseEventArgs.CloseArgument）。
  4. iframe window passing data back: server-side child page uses ActiveWindow.GetHidePostBackReference(参数)(Pro/Core) or ActiveWindow.hidePostBack("参数")(Java); client-side uses F.activeWindow.hidePostBack("参数"). The postback parameter name for MVC/RazorPages is the window ID + _closeArgument; Pro/RazorForms reads WindowCloseEventArgs.CloseArgument, Java reads e.getArgument(). See references/window.md。
  5. For popup messages inside an iframe use Alert.ShowInTop / target:'_top': directly calling Alert.Show inside the iframe will display in the small frame; to cross to the top level use ShowInTop（C#）/ Alert.showInTop(...)（Java） / target: '_top'（JS）。
  6. Never fabricate APIs: if unsure, check the official website API or F/doc/ JSDoc。

Official Resources