Changing the Basic "Look and Feel"
Basic customization of the OOTB HTML Step Processor involves making basic changes to the user interface, such as modifications to
the banner, colors
and images in the OOTB Step Processor.
These changes are primarily made in the ASPX page (FnStepProcessor.aspx)
see the following Note text, its code-behind file (FnStepProcessor.aspx.vb),
and the relevant User Control. To make global changes, edit the Cascading
Style Sheet, FnStyleSheet.css, in the FNOpenClient directory.
Note:The public class
FnStepProcessor implements the top level
HTML Step Processor page; the class inherits System.Web.UI.Page.
The examples which follow illustrate these types of customization.
Note:
A number of these modules implement the IFnStepUIModel interface,
which you can use for the OOTB modules, or for your own custom UI modules.
The IFnStepUIModel interface is as follows:
Public Interface IFnStepProcUIModel
' --------------------------------------------------------------------------
' Sub SetData()
'
' Purpose: Set the data for UC model
' Parameters:
' ByVal strXML As String
' Throws:
' --------------------------------------------------------------------------
Sub SetData(ByVal aFnEpStepElement As Object)
' -----------------------------------------------------------------------------
' Function GetData()
'
' Purpose: Get the serializable .NET class as output of the UC model
' Parameters:
' Returns: serializable .NET class
' Throws:
' ---------------------------------------------------------------------------
Function GetData() As Object
' -----------------------------------------------------------------------------
' Function IsModified()
'
' Purpose: Return the state of the user control
' Parameters:
' Returns: Boolean
' Throws:
' ---------------------------------------------------------------------------
Function IsModified() As Boolean
' -----------------------------------------------------------------------------
' Function GetId()
'
' Purpose: Get the User Control id
' Parameters:
' Returns: serializable .NET class
' Throws:
' ----------------------------------------------------------------------------
Function GetId() As Integer
' ------------------------------------------------------------------------------
' Function SetVisible()
'
' Purpose: Get the User Control id
' Parameters:
' Returns: serializable .NET class
' Throws:
' ----------------------------------------------------------------------------
Sub SetVisible(ByVal bVisible As Boolean)
End Interface ' *** Public Interface IFnStepProcUIModel ***
Changing the Banner of the OOTB Step
Processor
The banner of the OOTB Open Client Step Processor is specified by the
following code in the FnStepProcessor.aspx.vb file:
Private Sub SetBannerBar()
aFnBannerUC.TitleBarText = GetLabel()
Dim aFnBannerDataUtil As New FnBannerDataUtil()
' Set the headline for the banner
aFnBannerDataUtil.AddTopLinks("Process", m_aFnQueryString.LibraryName)
aFnBannerUC.DataSource = aFnBannerDataUtil.LinkArrayList()
End Sub
To modify the banner, modify the code in the FnBannerUC.ascx User Control.
For example, modify the following table cell code to change the Banner
navigation link:
<table cellSpacing="0" cellPadding="0"
width="100%" border="0">
<tr>;
<td width="40%">;
<img src="<%=m_aFnUIBlock.SpacerImage>
"width="10" height="1" border="0">
<img src="<%=m_aFnUIBlock.LogoImage%>"
width="112" height="49" alt="FileNet Logo"
border="0">
</td>
<td>
<table cellSpacing="0"
cellPadding="0" width="100%" border="0">
<tr>
<td
height="31" width="1%"> </td>
<td
align="right" width="99%">
<asp:datalist
id="dlGlobalNavigation" runat="server"
repeatdirection="horizontal"
EnableViewState="False">
<ItemTemplate>
<asp:HyperLink
id="HyperLink1" runat="server"
NavigateUrl='<%#
GetHRef(CType(Container.DataItem, FnBannerNavigationItem))%>'
target='<%#
(CType(Container.DataItem, FnBannerNavigationItem).Target)%>'
Enabled='<%#
(CType(Container.DataItem, FnBannerNavigationItem).IsEnabled)%>' >
<%#
(CType(Container.DataItem, FnBannerNavigationItem).Label) %>
</asp:HyperLink>
|
</ItemTemplate>
</asp:datalist>
</td>
</tr>
Changing the Colors of the OOTB Step
Processor
You can change the colors of the OOTB Step Processor by modifying the
appropriate User Control, depending on the item color you want to
change. For example, to change the background color of the banner, modify the
tag argument bgcolor in the FnBannerUC.ascx
User Control file:
<tr>
<td class="BaseDarkColor" valign="top">
<table cellSpacing="0"
cellPadding="0" width="100%" height="100%"
border="0" class="BaseDarkColor">
<tr height="1%"
valign="top">
<td
bgcolor="#FFFFFF"><img src="<%=m_aFnUIBlock.TabCornerLeftImage%>"
border="0"></td>
</tr>
...
Changing the Images in the OOTB Step
Processor
Change the image of an item in the OOTB Step Processor (for example,
to change a banner image, an icon image, a logo, etc.) by using your own
image in its place as referenced by that User Control. For example, to
modify the image used for the banner, modify the following table cell
in the FnBannerUC.ascx User Control file, specifying the image
you want to use as the src= value:
<td class="BaseDarkColor" align="right"
valign="top">
<asp:datalist id="dlMainTabs" runat="server"
repeatdirection="horizontal" EnableViewState="False">
<ItemTemplate>
<asp:HyperLink
class="tasksNav" id="TabRef" runat="server"
NavigateUrl='<%#
GetHRef(CType(Container.DataItem, FnBannerNavigationItem)) %>'
Enabled='<%#
(CType(Container.DataItem, FnBannerNavigationItem).IsEnabled) %>'>
<asp:Image
id="Image1"
src='<%#
(CType(Container.DataItem, FnBannerNavigationItem).ImageURL) %>'
runat="server"
border="0" align="absmiddle" />
<asp:Label
id="Label1" runat="server" valign="top">
<%#
(CType(Container.DataItem, FnBannerNavigationItem).Label) %>
</asp:Label>
<img
src="<%=m_aFnUIBlock.SpacerImage%>" width="10"
height="1" border="0">
</asp:HyperLink>
</ItemTemplate>
</asp:datalist>
</td>
|