SoftSlate Commerce uses the Tiles Framework to organize its JSP templates. Throughout SoftSlate Commerce's JSP templates, you'll see tags like this, which invoke a Tiles definition:
If you aren't familiar with Tiles, you don't have to be to customize the templates. However, some understanding of Tiles and the Tiles definitions will help you find your way around and give you opportunities to customize your store in simpler ways.
"Tiles" can be thought of as different blocks on a page displayed in the browser. Which
templates produce the different blocks are defined in Tiles definition files, which are xml
files located in the
/WEB-INF/conf folder of SoftSlate Commerce. For
example, the Tiles definition for the Center Layout and for the Welcome Screen is found in
/WEB-INF/conf/core/tiles-defs.xml. They look like this:
<definition name="core.baseCenterLayout" path="/WEB-INF/layouts/default/core/centerLayout.jsp" controllerUrl="/LayoutAction.do"> <put name="htmlHead" value="/WEB-INF/layouts/default/core/htmlHead.jsp" /> <put name="header" value="/WEB-INF/layouts/default/core/header.jsp" /> <put name="error" value="/WEB-INF/layouts/default/core/error.jsp" /> <put name="message" value="/WEB-INF/layouts/default/core/message.jsp" /> <put name="leftSide" value="core.leftSide" /> <put name="rightSide" value="core.rightSide" /> <put name="subMenu" value="customer.accountMenu" /> <put name="body" value="/WEB-INF/layouts/default/core/empty.jsp" /> <put name="footer" value="/WEB-INF/layouts/default/core/footer.jsp" /> </definition> <definition name="core.welcome" extends="core.baseCenterLayout"> <put name="pageTitleKey" value="page.welcome"/> <put name="body" value="/WEB-INF/layouts/default/core/welcome.jsp" /> </definition>
These two definitions tell the Tiles Framework which JSP templates to use when displaying
the Welcome Screen. They indicate that the
/WEB-INF/layouts/default/core/centerLayout.jsp file is used to
control the overall layout of the screen. Within that file, the definitions tell Tiles to
/WEB-INF/layouts/default/core/header.jsp where the
<tiles:insert attribute="header"/> tag appears. Similarly,
core.welcome definition tells Tiles to include
/WEB-INF/layouts/default/core/welcome.jsp when it comes across
<tiles:insert attribute="body"/> tag. In this way, the
Welcome Screen is constructed by the Tiles Framework, using the JSP templates defined in the
Tiles definition file.
SoftSlate Commerce extends the Tiles framework to first look inside the
There are some situations where the simplest way to customize a section of a screen is to
change the Tiles definition for the screen rather than the JSP templates themselves. As an
example, let's say you want your store's Welcome Screen to have a different header than the rest
of your store's screens. By default, all of the store's screens include
/WEB-INF/layouts/default/core/header.jsp to render the header.
But you want the Welcome Screen to use a different template (maybe because you want to enlarge
your logo, or include a different set of navigation links).
Example 12.3. Replacing the Welcome Screen's Header
/WEB-INF/conf/core/tiles-defs-custom.xmlis included in SoftSlate Commerce to help with creating custom Tiles definitions. A custom definition will let us identify a special header template file for the Welcome Screen. Find the
/WEB-INF/conf/core/tiles-defs-custom.xmlfile and open it in a text editor.
Add the following custom definition to
/WEB-INF/conf/core/tiles-defs-custom.xml , inside
<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN" "http://jakarta.apache.org/struts/dtds/tiles-config_1_1.dtd"> <!-- Tiles definitions for custom pages. --> <tiles-definitions>
<definition name="core.welcome" extends="core.baseCenterLayout"> <put name="pageTitleKey" value="page.welcome"/> <put name="body" value="/WEB-INF/layouts/default/core/welcome.jsp" /> <put name="header" value="/WEB-INF/layouts/default/core/homeHeader.jsp" /> </definition></tiles-definitions>
/WEB-INF/layouts/default/core/header.jspto be used for the header, this change will call up
/WEB-INF/layouts/default/core/homeHeader.jspinstead, for just Welcome Screen. Save the
/WEB-INF/conf/core/tiles-defs-custom.xmlfile and if necessary upload it to your installation of SoftSlate Commerce.
homeHeader.jspfile itself, with the changes you want to include on the Welcome Screen's header. Since this file is new and not part of the SoftSlate Commerce distribution, you can safely place it in the
defaultdirectory. Doing so will let all of your custom layouts use the file as a default (which will come in handy if you end up creating Multiple Custom Layouts, described below). Create the
homeHeader.jspfile now and if necessary upload it into the
homeHeader.jspfile appearing in place of the regular header.
The three layout definitions,
There is much more information about Tiles available in books and online. Refer to the Struts Web site for more details.