[原創]FineUI秘密花園（二十七） — 窗體控件概述（上）

窗體控件在項目中使用非常頻繁，同時窗體控件和啟用IFrame的面板控件也一起構成了FineUI所特有的內聯框架，從而使彈出窗體不再局限於IFrame頁面中。本章我們會詳細介紹窗體控件的基本用法。

 

創建窗體控件

在頁面中聲明窗體控件標簽，並設置需要的屬性：

<ext:Window ID="Window2" Width="500px" Height="300px" Icon="TagBlue" Title="窗體" Hidden="false"
    EnableMaximize="true" EnableCollapse="true" runat="server" EnableResize="true"
    IsModal="false" CloseAction="HidePostBack" OnClose="Window2_Close" Layout="Fit">
    <Items>
        <ext:ContentPanel ShowBorder="false" ShowHeader="false" ID="ContentPanel2" EnableBackgroundColor="true"
            BodyPadding="5px" runat="server">
            <br />
            這是窗體的內容。
            <br />
            <br />
            <br />
            <br />
        </ext:ContentPanel>
    </Items>
</ext:Window>

顯示效果如下圖：

這是一個允許折疊、允許最大化、允許關閉、允許改變尺寸、允許拖動的模式窗體，並且關閉后會觸發Close服務器端事件。

 

由於窗體控件也是一個面板控件，所以擁有面板控件的公共屬性，這里列出幾個常用的面板屬性：

• Expanded：是否展開
• Title：面板的標題
• EnableIFrame：是否啟用IFrame
• IFrameUrl：IFrame的地址
• IFrameName：IFrame的名稱

其中EnableIFrame、IFrameUrl、IFrameName三個屬性在上一節介紹TabStrip控件時已經接觸到，在Window控件中會經常使用這三個屬性，比如下面的代碼：

<ext:Window ID="Window2" Width="500px" Height="300px" Icon="TagBlue" Title="窗體" Hidden="false"
    EnableMaximize="true" EnableCollapse="true" runat="server" EnableResize="true"
    IsModal="false" CloseAction="HidePostBack" OnClose="Window2_Close" EnableIFrame=“true” IFrameUrl=“about:blank” >
</ext:Window>

窗體控件自身也擁有很多屬性：

• WindowPosition：窗口的位置（Center、GoldenSection） ，GoldenSection是推薦的、也是默認的窗體位置，對此前面已有詳細解釋。
• EnableClose：是否可以關閉
• EnableDrag：是否可以移動
• EnableMaximize：是否可以最大化
• EnableMinimize：是否可以最小化
• EnableResize：是否可以改變窗口大小
• MinHeight：最小高度
• MinWidth：最小寬度
• IsModal：是否模式窗口
• OnClientCloseButtonClick：點擊關閉按鈕時需要執行的客戶端腳本
• EnableConfirmOnClose：關閉Window之前彈出確認當前表單改變的對話框，只有在EnableIFrame時才有效。如果窗體控件IFrame頁面中的表單內容發生改變，此時關閉此彈出窗體時會首先彈出確認關閉對話框（防止用戶輸入數據由於誤操作而丟失）。
• CloseAction：關閉窗體的動作（點擊關閉按鈕或者按 ESC 鍵都會執行此動作） （Hide、HideRefresh、HidePostBack）。這里的刷新和回發都指的是關閉窗體后對父頁面進行的操作。比如只有將此屬性設為HidePostBack才會在關閉窗體時觸發窗體的Close事件。
• Target：彈出窗口的目標位置（Self、Parent、Top）。這是FineUI的一個創新，也是FineUI內聯框架的精華所在，簡單的一個屬性設置讓彈出窗體不再局限於IFrame的框框中。

 

顯示隱藏窗體控件

在服務器端顯示隱藏窗體控件非常簡單，只需要設置Hidden屬性即可（你可能會看到使用Popup屬性來顯示隱藏窗體，不過這個屬性已經作廢了）。注意Hidden屬性存在於基類ControlBase中，也就是說所有的FineUI控件都擁有此屬性。

比如點擊按鈕來關閉彈出窗體：

protected void btnHideInServer_Click(object sender, EventArgs e)
{
    Window2.Hidden = true;
}

也可以通過JavaScript來關閉當前窗體，FineUI提供了幫助函數來完成這一任務：

<ext:Button ID="btnShowInClient" Text="顯示窗體" EnablePostBack="false" runat="server">
</ext:Button>

 

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        btnShowInClient.OnClientClick = Window2.GetShowReference();
    }
}

 

除了GetShowReference兩個幫助函數，還有很多類似的幫助函數，從官方文檔可以清晰的看到這些幫助函數：

 

與窗體的CloseAction屬性類似（Hide、HideRefresh、HidePostBack），FineUI提供了相應的幫助函數來完成相同的任務：

• GetHideReference：獲取關閉當前激活Window的客戶端腳本
• GetHideRefreshReference：獲取關閉當前激活Window然后刷新頁面的客戶端腳本
• GetHidePostBackReference：獲取關閉當前激活Window然后回發頁面的客戶端腳本

除此之外，還有GetHidePostBackReference還有一個重載函數 GetHidePostBackReference (string argument)，用來在回發時傳遞參數，比如下面這個例子：

<ext:Button ID="btnHideInClient2" Text="隱藏窗體，帶回發參數（客戶端代碼）" EnablePostBack="false"
    runat="server">
</ext:Button>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        btnHideInClient.OnClientClick = Window2.GetHideReference();
        btnHideInClient2.OnClientClick = Window2.GetHidePostBackReference("btnHideInClient2");
    }
}

protected void Window2_Close(object sender, WindowCloseEventArgs e)
{
    Alert.ShowInTop("窗體被關閉了。參數：" + e.CloseArgument);
}

當點擊此按鈕時，界面效果：

 

有些網友希望能夠打開窗體就最大化，這也可以通過上面的JavaScript腳本來實現，其實很簡單：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        PageContext.RegisterStartupScript(Window2.GetShowReference() + Window2.GetMaximizeReference());

    }
}

在本頁面彈出窗體與在父頁面彈出窗體

通常的站點框架是左側菜單，右側IFrame頁面的形式，因此在IFrame頁面中彈出的任何窗體控件都被限制在右側的IFrame頁面中，這也是常見框架的無奈。對於這個常用功能，FineUI進行了擴展，為窗體控件增加Target屬性，從而解除了這個限制（其實FineUI內部進行了大量的工作來滿足這種需求）。

下面通過一個示例來說明兩者的區別：

<ext:Button ID="Button1" runat="server" EnablePostBack="false" Text="在本頁面彈出IFrame窗體">
</ext:Button>
<ext:Button ID="Button2" runat="server" EnablePostBack="false" Text="在父頁面彈出IFrame窗體">
</ext:Button>

<ext:Window ID="Window1" IconUrl="~/images/16/10.png" runat="server" Popup="false"
    WindowPosition="Center" IsModal="true" Title="Popup Window 1" EnableMaximize="true"
    EnableResize="true" Target="Self" EnableIFrame="true" IFrameUrl="about:blank"
    Height="500px" Width="650px" OnClose="Window1_Close">
</ext:Window>

<ext:Window ID="Window2" IconUrl="~/images/16/11.png" runat="server" Popup="false"
    IsModal="true" Target="Parent" EnableMaximize="true" EnableResize="true" OnClose="Window2_Close"
    Title="Popup Window 2" EnableConfirmOnClose="true" CloseAction="HidePostBack"
    EnableIFrame="true" IFrameUrl="about:blank" Height="500px" Width="650px">
</ext:Window>

 

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Button1.OnClientClick = Window1.GetShowReference("../grid/grid_iframe_window.aspx", "彈出窗口一");
        Button2.OnClientClick = Window2.GetShowReference("../grid/grid_iframe_window.aspx", "彈出窗口二");
    }
}

可見，在本頁面彈出窗體控件和在父頁面彈出窗體控件的唯一區別是窗體控件的Target屬性設置，而后台注冊的JavaScript腳本卻完全一樣。

 

那么，如何在彈出窗體的IFrame頁面中關閉當前彈出窗體呢？
使用Hidden屬性啊，很多人可能會不假思索的說。其實這是不對的，因為此窗體是在父頁面中定義的，窗體IFrame中的頁面是拿不到窗體實例的（因為這是兩個頁面），那么該怎么辦？

不用急，FineUI提供了ActiveWindow靜態類幫助完成這一任務，同時也提供了擴展（是否在關閉窗體前檢查窗體IFrame中表單是否改變）。

在窗體IFrame中關閉窗體的三個功能：

• 關閉窗體按鈕：PageContext.RegisterStartupScript(ActiveWindow.GetHideReference());
• 關閉窗體后刷新父頁面按鈕：PageContext.RegisterStartupScript(ActiveWindow.GetHideRefreshReference());
• 關閉窗體后回發父頁面按鈕：PageContext.RegisterStartupScript(ActiveWindow.GetHidePostBackReference());

 

注意：本文中第三次出現了Hide、HideRefresh和HidePostBack內容，但是這次和前兩次都不同。

• 窗體控件的CloseAction屬性，值可以為Hide、HideRefresh和HidePostBack：控制點擊右上角關閉按鈕和ESC來關閉窗體的行為。
• 窗體的GetHideReference、GetHideRefreshReference和GetHidePostBackReference幫助函數：控制關閉當前窗體的行為，發起方是當前窗體所在的頁面。
• 靜態類ActiveWindow的三個幫助函數：控制關閉當前激活窗體的行為，發起方可以不是當前窗體所在的頁面。

 

 

當然我們也可以為按鈕注冊客戶端腳本，在客戶端直接關閉彈出窗體：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        btnClose.OnClientClick = ActiveWindow.GetHideReference();
    }
}

 

對於需要在關閉窗體前檢查IFrame中表單是否改變，並彈出確認框的情況，有相應的擴展：

• 關閉窗體按鈕：PageContext.RegisterStartupScript(ActiveWindow.GetConfirmHideReference());
• 關閉窗體后刷新父頁面按鈕：PageContext.RegisterStartupScript(ActiveWindow.GetConfirmHideRefreshReference());
• 關閉窗體后回發父頁面按鈕：PageContext.RegisterStartupScript(ActiveWindow.GetConfirmHidePostBackReference());

當窗體IFrame中的表單發生改變時，在沒有保存的情況下關閉就會彈出確認對話框，如下圖所示：

 

還記得我們前面介紹的EnableConfirmOnClose屬性么，這個是用來控制右上角關閉按鈕和ESC快捷鍵的類似方法。

 

小結

本章詳細講解了窗體控件的基本用法，包括創建窗體控件、顯示隱藏窗體控件，以及如何在本頁面和父頁面彈出窗體。下一篇文章會繼續深入窗體控件，介紹表格與窗體控件的交互以及子窗體和父頁面的傳值問題。

 

注：《FineUI秘密花園》系列文章由三生石上原創，博客園首發，轉載請注明出處。文章目錄 官方論壇