Plug-in points for skins
There are four plug-in points that are provided by the application as seen from an HTML UI point of view.
From HTML UI point of view, the application provides four plug-in points where the skin-specific files should be included:
- /yfc/container_mb.jsp
The skin-specific container JSP file should handle the search-list alignments which includes the list, or search, or detail JSP files and breadcrumbs JSP file. For example, a skin-specific container JSP file will look like this:
<jsp:include page="/skins/skin-name/yfc/search_mb.jsp flush="true"/> <jsp:include page="/skins/skin-name/yfc/list_mb.jsp flush="true"/> <jsp:include page="/skins/skin-name/yfc/detail_mb.jsp" flush="true"/>
The skin-specific search_mb.jsp, or list_mb.jsp, or yfc/detail_mb.jsp files should include the skin related UI file and framework provided functional files. For example, a skin-specific search JSP file will look like this:
<jsp:include page="/yfc/search_functional_pre_mb.jsp" flush="true"/>> <jsp:include page="/skin-name/search_ui_mb.jsp" flush="true"/> <jsp:include page="/yfc/search_functional_post_mb.jsp" flush="true"/>
When the skin is enabled, the framework provided /yfc/container_mb.jsp file will include the skin-specific /skins/skin-name/yfc/container_mb.jsp file.
- /yfc/innerpanel_mb.jsp
The skin-specific inner panel JSP file should include the skin related UI file and framework provided functional files. For example, a skin-specific search JSP file will look like this:
<jsp:include page="/yfc/innerpanel_functional_pre_mb.jsp" flush="true"/> <jsp:include page="/skins/skin-name/innerpanel_ui_mb.jsp" flush="true"/> <jsp:include page="/yfc/innerpanel_functional_post_mb.jsp" flush="true"/>
When the skin is enabled, the framework provided /yfc/innerpanel_mb.jsp file will include the skin-specific /skins/skin-name/yfc/innerpanel_mb.jsp file
- /common/menubar_mb.jsp
The skin-specific menu bar JSP files should define the layout and rendering of the menu bar. The framework provided menu bar file can also be included in this file (if required).
Note: The skin-specific menubar_anchor.jsp and menubar_dropdown_multilevel.jsp files are used only if the framework provided common/menubar_mb.jsp file is used and no explicit context parameter is provided for menubar_anchor.jsp file.When the skin is enabled and no explicit context parameter is provided for the menu bar anchor JSP file, the framework-provided /common/menubar_mb.jsp file will include skin-specific /skins/skin-name/common/menubar_anchor.jsp file.
- CSS Files
The skin-specific theme css files should refer to images as '../../../console/icons/img-name' or '../../../yfcicons/img-name' in order to support extensibility and localization. For example,
.companyLogo{ float:right; background: url(../../../console/icons/logo.jpg) no-repeat; height:42px; width:151px; margin-right:0; cursor:pointer; }
When the skin is enabled, the framework provided /yfc/container_mb.jsp file will include the skin-specific localized css files such as /skins/skin-name/css/skin-name_theme-name_mb.css file.
Note: By default, the original css files such as /css/theme-name.css will be included before the skin-specific css files.