From HTML UI point of view, the application provides four plug-in points where the skin-specific files should be included:
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.
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
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).
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.
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.