This spar is created by Klish Group, Inc. to demonstrate the basic components implementation and usage in Estudio. For questions: support@klishgroup.com ********************************************************************************************************************************************************* To install and set up this demo site follow these instructions: ********************************************************************************************************************************************************* 1. Create the page types by merging the pagetype-config.xml from under the toolkit_src\etc\conf\livesite_customer in EstudioComponentGuide.spar with the pagetype-config.xml under "\local\config\lib\content_center\livesite_customer_src\etc\conf\livesite_customer" a. Build livesite toolkit. -- Open a command prompt and change to the TeamSite install directory: \local\config\lib\content_center\livesite_customer_src -- Run build.bat or build.sh (this will force TeamSite to restart) 2. Create a project in Estudio named: EstudioComponentGuide 3. Install the spar using the archive_manager a. Open a command prompt and change to the TeamSite install directory: /install b. Invoke the following command to install the spar into the new workarea: install_archive.ipl EstudioComponentGuide.spar /default/main/EstudioComponentGuide/WORKAREA/default 4. Copy the below files from under the project path: \default\main\EstudioComponentGuide\WORKAREA\default\iwov-resources\grid to the \default\main\EStudioGlobal\WORKAREA\default\iwov-resources\grid - Bootstrap4.0.css and Foundation6.4.2.css This is required in case the users want to create the page types Bootstrap 4.0 and Foundation 6.4.2 in other projects. Note: When deploying the site to a runtime environment, in addition to merging the pagetype-config.xml, copy the common XSL file in the LiveSite Toolkit onto the runtime Place: toolkit_src\etc\classes\com\interwoven\com\component\xsl\common\common-templates.xsl On the runtime at: \LiveSiteDisplayServices\webroot\WEB-INF\classes\com\interwoven\com\component\xsl\common\common-templates.xsl Finally restart the runtime application server ********************************************************************************************************************************************************* List of items created for the demo: ********************************************************************************************************************************************************* Components: All the components are created with four skins: Foundation, Foundation6.4.2, Bootstrap and Bootstrap4.0 where default skin is Bootstrap. These components are developed using XSL 2.0. -- Header - Sticky Header component on the page which uses the External class:com.interwoven.livesite.external.impl.LivesiteSiteMap to read the default.sitemap to display navigation links in top nav. It uses the "Navigation/Header" DCR to load labels or images in the header. -- Hero - Single image component with Title, Body and CTA button. The text content can be aligned - Left, Center and Right -- Breadcrumb - This component shows the breadcrumbs of the page the user is on. It reads the links from default.sitemap using the Component External. -- Simple Content - Simple component to display Title, Date, Body and CTA. -- Video - This component displays the responsive Youtube or Vimeo video using the Video ID. -- Footer - Sticky Footer component on the page uses DCR to display the links in the footer. -- Carousel - This component uses DCR to display images with Title, Body and CTA Button. -- Card - This component uses DCR to display cards horizontally in a row of 2-4 tiles with Image, Title, Sub Title, Body and CTA from a DCR. -- Social Sharing - This component uses DCR to fetch the social share sites to be included for sharing content. Also, it allows "ShareThis" to be setup. Users will need to provide the "ShareThis" Property ID in the component datum to enable "ShareThis" widget on the page. -- Disqus - This component uses the disqus plug-in. The users need to register on disqus site and get the forum name. This short forum name needs to be set in the component datum to view Disqus on the site. -- Adaptive Image Hero - This component loads a different sized image based on the media size. It uses the OpenText Adaptive Media Images which can be transformed on the fly. If the OpenText Media Management is not configured, it will load the placeholder images from the site: http://via.placeholder.com/1024x768 which will also be loaded with different sizes based on the media size. It also, supports images from the Teamsite but in this case only one image will be resized in all the mdeia devices. Page Types: Custom page types have been created to implement the Bootstrap 4 and Foundation 6.4.2 - Updated the pagetype-config.xml to implement page types: -- Bootstrap 4.0 -- Foundation 6.4.2 - The page type should be created before the spar can be installed. Sites: Four sites have been created to demonstrate the components in different versions of Bootstrap Grid and Foundation Grid. -- Bootstrap Site: This site demonstrates the components or templates using the Bootstrap Grid. The version of Bootstrap used is 3.3.5. -- Foundation Site: This site demonstrates the components or templates using the Foundation Grid. The version of Foundation used is 5.5.1. -- Bootstrap 4 Site: This site demonstrates the components or templates using the latest version of Grid system used in Bootstrap. The version of Bootstrap used is 4.0.0. Custom page type has been created to implement the new grid system used in Bootstrap version 4.0.0. -- Foundation 6 Site: This site demonstrates the components or templates using the latest version of XY Grid system in Foundation 6.4.2. Custom page type has been created to implement the new grid system used in Foundation version 6.4.2. Templates: Each site contain templates developed using various components. - Bootstrap: -- Modern Business -- Shop HomePage -- Dark -- Basic -- Blog Listing -- Blog Post - Foundation: -- News-Magazine -- Agency -- Dark -- Basic -- Blog Listing -- Blog Post - Bootstrap 4 -- Modern Business -- Shop HomePage -- Basic -- Blog Listing -- Blog Post - Foundation 6: -- News-Magazine -- Agency -- Basic -- Blog Listing -- Blog Post XSL: The XSL version used to create each component is 2.0. This project supports two versions of Bootstrap (3.3.5 and 4.0.0) and two versions of Foundation (5.5.1 and 6.4.2). Hence, each component is built with four skins. One skin per version of Bootstrap and Foundation. Hence, the XSLs for each skin is located under the Workarea path:/iwov-resources/xsl in folder structure as follows: - Bootstrap -- v3.3.5 -- v4.0.0 - Foundation -- v5.5.1 -- v6.4.2 To use the components in any other project the XSL files needs to be copied to the path /iwov-resources/xsl with exactly same folder structure. Below is the list of XSLs per component: Header: -- header-bootstrap.xsl -- header-foundation.xsl Hero -- hero-bootstrap.xsl -- hero-foundation.xsl Breadcrumb -- breadcrumb-bootstrap.xsl -- breadcrumb-foundation.xsl Simple Content -- simple-content-bootstrap.xsl -- simple-content-foundation.xsl Video -- video-bootstrap.xsl -- video-foundation.xsl Footer -- footer-bootstrap.xsl -- footer-foundation.xsl Card -- card-bootstrap.xsl -- card-foundation.xsl Carousel -- carousel-bootstrap.xsl -- carousel-foundation.xsl Adaptive Image Hero -- adaptive-image-hero-bootstrap.xsl -- adaptive-image-hero-foundation.xsl Disqus -- disqus-default.xsl Social Sharing -- social-sharing-default.xsl DCTs: - Navigation -- Footer -- Header - Marketing -- Card -- Carousel -- Social Share Common XSL: The common XSL has been created that contains the common templates to display the links using DATUM, DCR or Sitemap across various components. Components will not work if this file is not present in the following locations: - \ApplicationContainer\standalone\deployments\wcm-service.war\WEB-INF\classes\com\interwoven\com\component\xsl\common - \ApplicationContainer\standalone\deployments\iw-cc.war\WEB-INF\classes\com\interwoven\com\component\xsl\common - \ApplicationContainer\standalone\deployments\iw-preview.war\WEB-INF\classes\com\interwoven\com\component\xsl\common In the spar, this XSL is placed under the path: \toolkit_src\etc\classes\com\interwoven\com\component\xsl\common. The spar contains a script:post-install.webapps.ipl that will copy the common_templates.xsl under the above specified locations. Any changes in this files needs to be deployed to TeamSite using the below process: - Copy the common_templates.xsl to the location: \local\config\lib\content_center\livesite_customer_src\etc\classes\com\interwoven\com\component\xsl\common on TeamSite server. - Open a command prompt and change to the TeamSite install directory: \local\config\lib\content_center\livesite_customer_src - Run build.bat or build.sh (this will force TeamSite to restart) Note: If common_templates.xsl is not copied to any of the war locations specified earlier, then copy it manually and restart JBoss. On runtime, this file needs to be copied in location: \LiveSiteDisplayServices\webroot\WEB-INF\classes\com\interwoven\com\component\xsl\common\common-templates.xsl Once copied, runtime application server needs to be restarted. *********************************************************************************************************************************************************** Use Components in another project: *********************************************************************************************************************************************************** Any project using the components from this project needs the XSL files mentioned under the XSL section. Hence, copy the XSLs for any component from this project to the path: \WORKAREA\default\iwov-resources\xsl\ in the new project. Then publish the XSL to runtime. Note: Please copy the XSL in exactly the same path as in this project otherwise the components will not work.