Deconstructing Wireframes into AEM Templates and Components

Transcription

1 Technical Training Deconstructing Wireframes into AEM Templates and Components Hands- on Lab Guide

2 If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement. The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide. Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner. Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization. Adobe, Acrobat, Adobe AIR, Adobe Analytics, Adobe Target, AIR, Distiller, Flash, Flash Builder, Flash Catalyst, Flex, Adobe Digital Enterprise Platform, MXML, PostScript, Reader, SiteCatalyst, SearchCenter, Discover, Recommendations, Insight, Test&Target, Report Builder, Survey, Search&Promote, and Social Media are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners. Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA. Notice to U.S. Government End Users. The Software and Documentation are Commercial Items, as that term is defined at 48 C.F.R , consisting of Commercial Computer Software and Commercial Computer Software Documentation, as such terms are used in 48 C.F.R or 48 C.F.R , as applicable. Consistent with 48 C.F.R or 48 C.F.R through , as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA , USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, , and The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

3 Table of Contents LAB OVERVIEW 4 SCOPE 4 PREPARATION: LOCATE THE L3844 FOLDER 4 PREPARATION: START AND LOGIN TO AEM 4 ACTIVITY 1: EXAMINE THE STATIC HTML 5 ACTIVITY 2: INSTALL THE SUMMIT TOYS ROOT.ZIP PACKAGE AND CREATE OUR ROOT PAGE 7 ACTIVITY THREE: START TO INTEGRATE STATIC HTML INTO AEM 9 ACTIVITY FOUR: INTEGRATE STYLE FROM CREATIVE INTO THE AEM TEMPLATE 10 ACTIVITY FIVE: CREATE A NEW PAGE COMPONENT USING A SUPER TYPE 11 ACTIVITY SIX: ADD A BIG X TO THE CONTENT AND HOME PAGE COMPONENTS 13 ACTIVITY SEVEN: CREATE AND POPULATE THE CONTACT US PAGE COMPONENT AND UPDATE THE HOME PAGE COMPONENT 15 ACTIVITY EIGHT: COMPONENTIZE THE SITE 16 ACTIVITY NINE: INSTALL THE SUMMIT TOYS ASSETS PACKAGE AND THE SUMMIT TOYS COMPONENTS PACKAGE 17 ACTIVITY TEN: INSTALL THE EDITABLE SUMMIT TOYS TEMPLATES.ZIP PACKAGE 18

4 Lab Overview Scope In this training you will learn the process of starting with HTML creative and identifying how many templates and components are required. You will also learn how to reduce redundancy and promote reuse by modularizing the page-rendering components defining local supertypes making use of AEM foundation supertypes Preparation: Locate the L3844 folder 1. Locate the L3844 folder on your desktop. Preparation: Start and login to AEM 1. Double-click on the aem-author-p4502.jar file to start AEM. 2. Once AEM has started, it will open a browser. Login as admin/admin

5 Activity 1: Examine the static HTML Examine the wireframe samples and talk template. Let s bypass any printed material and click through an HTML prototype to start slicing up the creative. A basic understanding of AEM architecture is essential when it comes to top down decomposition. Designing for AEM Designers are the beginning of the journey when it comes to the vision. Think component from the outset. A component is a snippet of authorable content that can vary with respect to user. This can be achieved in several ways in AEM and the list of options continues to grow. Targeting Components, Creating Editable Templates and leveraging Content Fragments are all ways to tweak text and images inside of the same content areas to add value to end user experiences. Divide and Conquer Implementation can be done in phases to gradually transition content from IT controlled to SME controlled. How the content variations are applied need not be a concern at the design phase, leave that up to the developers. What the design wireframes do is deliver the genesis. Look at the creative and start to analyze for similarities and differences. 1. Navigate to the Activity 1 folder and unzip the file named Summit Toy Creative.zip 2. Right click on the index.html page and open with either Chrome or Firefox 3. Follow the links in the navigation and begin to look for similarities in structure 4. Here is where we will look for a base structure and begin the work from there. 5. Aspects like Translation Workflow, potential re-skinning of the creative and potential ownership of the content should also influence your decisions.

6 Pre Requisite to Activity 2 and Beyond Let s do a quick tutorial on the Site Admin, CRX Package Manager and CRXDE-Lite. These are the essential tools for the Workshop. The Site Admin Console in the Touch UI is where we will create our pages for our working copy of the Summit Toys Site. Go to and navigate to Sites The Site Admin Console is reached from the Touch UI You will use the CRX Package Manager to upload the Activity Packages. Users more familiar with AEM Development will have the opportunity to utilize CRXDE-Lite as an IDE but all users will at least use it to view the code we will upload. The CRX Package Manager and CRXDE-Lite links are located side by side and are available atop the CRX itself.

7 Activity 2: Install the Summit Toys Root.zip Package and create our Root Page 1. From your browser, navigate to the AEM Package Manager via the navigation: Tools > Deployment > Packages. Or simply enter the following URL: 2. Click the Upload Package button. 3. Browse and find the Summit Toys Root.zip package in the Activity 2 folder. 4. Click OK. 5. Click Install 6. Navigate to Sites 7. Click Create > Page. Select the Summit Toys Base Content Page and click Next. 8. Create a page titled Summit Toys and open it for editing. Remove the editor.html from the URL and view the HTML source.

8 This, our first template, inherits its base from the foundation. Navigate to /apps/summit_toys/components/structure/contentpage Note that the sling:resourcesupertype property is set to wcm/foundation/components/page Open the head.html and view the static content. Now delete that file, return to the browser and refresh your page. Notice the page title now appears in your browser. View the source again (close the tab already open as content has changed) Notice all of the foundation code and includes have now become available.

9 Activity Three: Start to integrate static HTML into AEM A good starting point for an AEM functional integration (or any functional integration for that matter) is to move the static creative into the CMS templates. We can convert values to dynamic content later but get the look and feel right first! There are two options for this exercise: Advanced: Copy and paste from the exercise folders into the correct html includes. Less Technical? Just install the Copy-Paste Files.zip CRX Package. The body.html and content.html are duplicated in the exercise but you will notice the contents have not changed since the previous exercise. Refresh your Summit Toys Page. See we now have content but no style.

10 Activity Four: Integrate style from creative into the AEM Template Upload and Install Add Summit Styles and Libraries.zip Package 1. Go to Package Manager 2. Upload and install Add Summit Styles and Libraries.zip from Activity 4 folder 3. Refresh your page. Note that the style sheet and css images are there and the colors and structure are looking stylized. Open the new file in the contentpage directory called headlibs.html Note: <sly categories='summit.style'}" /> Now use the Query Tool and search the /etc part of the repository for the string summit.style Double Click on the search result and it will take you to /etc/clientlibs/summittoys Notice the categories property - you see summit.style and summit.author. We have not created summit.author yet but this illustrates the flexibility of clientlibs. I can separate concerns by library.

11 Activity Five: Create a New Page Component using a Super Type Now that we have a Site base, it s time to start looking deeper for structural similarities to identify how many templates I really need. While the goal is to minimize the overall number of templates, some pages like the Home Page are better served with their own Big X to ensure better governance and less opportunity for authors to break the design. This activity will simply create an additional Home Page template and component for the Toys Site. Advanced Users: Create the template and component using CRXDE-Lite following the instructions in the manual. (Steps and screens below) Less Technical? Install the Add a Home Page Component and Template.zip Package provided in Activity 5. (Go down to Create page ) Advanced: Steps to create a template in CRXDE-Lite: 1. Navigate to the /apps/summit_toys/templates directory 2. Right click on templates and create a template named homepage 3. Set a sling resource type: summit_toys/components/structure/homepage 4. Set allowed Paths: /content/summit-toys(/.*)?

12 Advanced: Steps to create a component in CRXDE-Lite: 1. Navigate to summit_toys/components/structure and create a component called homepage 2. Create the property sling:resourcesupertype that points to summit_toys/components/structure/contentpage 3. Rename the homepage.jsp to content.html 4. Enter some static text for now so the page is displayed Create Page: Whether you ve done this by hand or installed the package, we need to create a Home Page. Navigate to Sites > Summit Toys and Click Create Page Select the Summit Home Page Template, click Next and name this page Name: en Title: English * TIP: This is a best practice to allow multi lingual versions of the same site to use the same core structure (as opposed to completely disconnected language sites) Note that I only need create a content.html file and everything else comes from the super type we are inheriting from.

13 Activity Six: Add a Big X to the Content and Home Page Components One of the primary objectives to any CMS is to transition the ability to create, edit and publish content directly to the authors and remove IT dependencies from the process. To illustrate this, we will first give free reign to both of our page components in this activity and then later rescind it from some. While we are in there, we will also configure the mobile emulator framework in AEM to empower our authors to view what they create on mobile devices. Less Technical? Install the Add Paragraph System Package provided Advanced: Follow the instructions immediately below *** Both need to add the Extra Credit piece on the next page To add the layout container manually: Open the content.html page in both page components Copy/paste the following block from the content.html in the Exercise Files Folder <div class="wrapper row3" > <main class="hoc container clear"> <!-- main body --> Top-Level-Page Content <div resourcetype='wcm/foundation/components/responsivegrid'}"></div> <!-- / main body --> <div class="clear"></div> </main> </div> Create an OSGi config node inside of a config folder with the following values Name: com.day.cq.wcm.emulator.emulatorprovider-summit <?xml version="1.0" encoding="utf-8"?> <jcr:root xmlns:sling=" xmlns:jcr=" jcr:primarytype="sling:osgiconfig" mobile.resourcetypes="[summit_toys/components/structure/contentpage]"/> Summit Lab L3844 Dennis Selfridge Deconstructing Templates

14 Extra credit solution for both: 1. Navigate to /content/summit-toys/jcr:content 2. On the jcr:content node, Add the following property name: cq:devicegroups type: String[] value: /etc/mobile/groups/responsive Return to the browser and you should see:

15 Activity Seven: Create and Populate the Contact Us Page Component and update the Home Page Component In the last activity we added the layout container to both existing page rendering components. While we leave it in place for the content page, we will roll it back on the Home Page and add another page component for Contact Us. Advanced: Create the Template and Component for Contact Us (similar to what you did earlier for the Home Page) Copy and paste the contents of the content.html files from the Exercise File Folder. Less Technical? Just install the Contact Us and Home Page.zip CRX Package. Once the code is in place, we will complete the site pages 1. Using the Contact Us Template, create a page beneath the Home Page 2. Title it Contact Us and let AEM create the name contact-us *** At this point it s fair to point out the navigation component will be static. We suggest creating dynamic navigation components but we ll leave that for another class. For now, just trust me :) Using the Summit Toys Base Content Template, create the following pages beneath the Home Page (names need to be exact for navigation) Titles as follow (let AEM generate the names) 1. New Arrivals 2. Best Sellers 3. Games & Toys 4. Gifts *** Note: The navigation is hard coded from the creative so some of it will work on the new pages you ve just created. Let s move on to convert static HTML into components.

16 Activity Eight: Componentize the Site Install the Componetize Page Sections.zip CRX Package in the Activity 8 folder. This will convert all of the static HTML includes into AEM components. Now we can begin to divide these for functional assignment. Group Activity: Lets start with the body.html and see how things have changed beneath the covers: *** Notice the content.html is the only piece that is not pointing directly to a component. Here s where I can manipulate varying shades of the Big X Also, check out the new page component getting ready for Editable Templates! Before we install our Editable Templates, let s get Summit Toys Images and Summit Toys Components into the Site.

17 Activity Nine: Install the Summit Toys Assets Package and the Summit Toys Components Package Find and inspect the two CRX Packages in the Activity 9 folder. This will introduce AEM components and Image Assets for page building. Now we can begin to play author and configure our content for creation. 1. Open the edit tab and view the content finder Assets Tab 2. Install the 1- Summit Toys Assets.zip Package 3. Refresh your page 4. View the Content Finder again and see the Assets for Summit Toy Store are now available 5. Install the 2- Summit Toys Content Components.zip Package 6. Navigate to the Home Page 7. Notice the home page has a baked in component on it. 8. Add an image and update text to that component 9. Go to CRXDE-Lite and navigate to /apps/summit_toys/components/content/contact-us/content.html 10. Go to Line 11 in the HTML and replace <img class="imgr borderedbox inspace-5" src="../images/demo/imgr.gif" alt=""> with <img class="imgr borderedbox inspace-5" src="/content/dam/summittoys/thumbnails/float_right.png " alt="contact Us"> 11. Refresh the Contact Us Page Look at the Section Pages and note that we can now add some content. 1. Go to Design Mode 2. Add the Summit Toys Components 3. Add some foundation components to create content Whoops, my banner component made the designer angry!!! Solution option? Editable Templates and good governance

18 Activity Ten: Install the Editable Summit Toys Templates.zip Package Install the 1- Editable Summit Toys Templates.zip CRX Package in the Activity 10 folder. This will introduce AEM editable templates for page building. Time permitting; we will create an editable template in our site to solve governance versus design issues. (If not, there are prefab packages) To Create an Editable Template 1. Navigate to Tools > Templates 2. Click the Summit Toys Folder 3. Click Create and select the Summit Toys Content Page Template 4. Click Next 5. Title it Summit Toys Section Page 6. Click Create and then Open Make sure you are in Structure Mode 1. Click on the Top Banner and click Policy 2. Select Summit Toys Content from the Policy dropdown 3. Click Check Mark to Save, Click lock icon to unlock the area 4. You will see all available components (should look like this)

19 Now select Initial Content Mode 1. Drag the Top Banner Component above the Layout container, just below the Social Media navigation (should look like this) 2. Refresh the page (if necessary) and look for the wrench to configure 3. Put in default text and pick 2 images (like this)

20 4. Go to Templates tab, select and enable To enable all templates go to root page of either the site or the language (depending on the desired scope), edit properties, select advanced tab Enter the following expressions /conf/summit_toys/settings/wcm/templates/.* /apps/summit_toys/templates/.* See Screen below

21 Now you will have a Summit Toys Section Page template available too This is the one we can use to create editable section pages Looks like we have a design issue again. Too much space! Another option is to create another template/page component and bake the component into that, like so: While the objective is to minimize the number of templates, sometimes the best approach is to settle for reducing the complexity but spinning off another template to satisfy a requirement.

22 There are 2 additional packages mentioned above that are in the Activity 10 folder. To utilize these they can be uploaded via the Package Manager. Here are their names and contents: 2- Complete Editable Template.zip This will deliver the code you create by following the instructions for Activity Static Section Page Template.zip This is the code that creates a Static template for the Summit Toys Section Editable template created in Activity 10. Thank you for attending Adobe Summit and the L3844 Hands on Lab! If you have any questions, feel free to contact me by Dennis Selfridge selfridg@adobe.com The images used as samples in this workshop were supplied by Adobe Stock Also I d like to thank Mark at OS Templates for allowing me to use his responsive Devenna Design template as the basis for this workshop. More information on OS can be found at