How to Create a Fully Featured Internet Website - Docs.day

8/13/2019 How to Create a Fully Featured Internet Website - Docs.day

1/24

6/12/13 How to Create a Fully Featured Internet Website - docs.day.com

wem.help.adobe.com/enterprise/en_US/10-0/wem/howto/website.html

Adobe (www.adobe.comhttp://www.adobe.com/go/gnav_adobe_logo_en_us)

Products (www.adobe.comhttp://www.adobe.com/go/gnav_products_en_us) Solutions (www.adobe.comhttp://www.adobe.com/go/gnav_solutions_en_us) Learning

(www.adobe.comhttp://www.adobe.com/go/gnav_learning_en_us) Help (www.adobe.comhttp://www.adobe.com/go/gnav_help_en_us) Downloads

(www.adobe.comhttp://www.adobe.com/go/gnav_downloads_en_us) Company (www.adobe.comhttp://www.adobe.com/go/gnav_company_en_us)

Store (www.adobe.comhttp://www.adobe.com/go/gnav_store_en_us)

Adobe Store (www.adobe.comhttp://www.adobe.com/go/gnavtray_store_en_us) for home and home office

Education Store (www.adobe.comhttp://www.adobe.com/go/gnavtray_store_education_en_us) for students, educators, and staff

Business Store (www.adobe.comhttp://www.adobe.com/go/gnavtray_store_business_en_us) for small and medium businesses

Other ways to buy (www.adobe.comhttp://www.adobe.com/go/gnavtray_store_otherwaystobuy_en_us)

ADEP Version 10.0 Overview (www.adobe.com /enterprise/en_US/10-0.html) / WEM 5.4

(www.adobe.com/enterprise/en_US/10-0/wem.html) / How To (www.adobe.com/enterprise/en_US/10-

0/wem/howto.html) /

How to Create a Fully Featured Internet WebsiteThis tutorial enables you to create a fully featured website with CQ5. The website will be based on Geometrixx, the reference website that comes with your CQ5 installation.

This tutorial is targeted primarily at web developers. All development will take place within an author environment.

This tutorial describes how to:

Install CQ5

Set up CRXDE

Set up the project in CRXDE

Create the template, component and scripts used as the basis for creating content pages

Create the follow ing components for use on your pages:

Top Navigation

List Children

Logo

Image

Text-Image

Search

Include various foundation components

After performing all the steps, your pages will look as follows:

Installing CQ and the CRXDE development environment

To install a CQ instance for developing your website, follow either the instructions for setting up a deployment environment with author and publish instances (www.adobe.com/enterprise/en_US/10-

0/wem/howto/installingcq.html) , or just perform a generic installation (www.adobe.com/enterprise/en_US/10-0/wem/howto/installingcq.html#Installing%20a%20CQ%20WCM%20Instance%20-

%20Generic%20Procedure) , which makes this step as easy as downloading the CQ Quickstart jar package, placing the license.properties file in the s ame directory and double-clicking the download

Quickstart jar package.

Additionally, proceed as fol lows in order to setup and start the CRXDE development environment (www.adobe.com/enterprise/en_US/10-0/wem/developing/developmenttools.html) :
http://wem.help.adobe.com/enterprise/en_US/10-0/wem/developing/developmenttools.htmlhttp://wem.help.adobe.com/enterprise/en_US/10-0/wem/howto/installingcq.html#Installing%20a%20CQ%20WCM%20Instance%20-%20Generic%20Procedurehttp://wem.help.adobe.com/enterprise/en_US/10-0/wem/howto/installingcq.htmlhttp://wem.help.adobe.com/enterprise/en_US/10-0/wem.htmlhttp://wem.help.adobe.com/enterprise/en_US/10-0/wem/developing/developmenttools.htmlhttp://wem.help.adobe.com/enterprise/en_US/10-0/wem/howto/installingcq.html#Installing%20a%20CQ%20WCM%20Instance%20-%20Generic%20Procedurehttp://wem.help.adobe.com/enterprise/en_US/10-0/wem/howto/installingcq.htmlhttp://wem.help.adobe.com/enterprise/en_US/10-0/wem/howto.htmlhttp://wem.help.adobe.com/enterprise/en_US/10-0/wem.htmlhttp://wem.help.adobe.com/enterprise/en_US/10-0.htmlhttp://www.adobe.com/go/gnavtray_store_otherwaystobuy_en_ushttp://www.adobe.com/go/gnavtray_store_business_en_ushttp://www.adobe.com/go/gnavtray_store_education_en_ushttp://www.adobe.com/go/gnavtray_store_en_ushttp://www.adobe.com/go/gnav_store_en_ushttp://www.adobe.com/go/gnav_company_en_ushttp://www.adobe.com/go/gnav_downloads_en_ushttp://www.adobe.com/go/gnav_help_en_ushttp://www.adobe.com/go/gnav_learning_en_ushttp://www.adobe.com/go/gnav_solutions_en_ushttp://www.adobe.com/go/gnav_products_en_ushttp://www.adobe.com/go/gnav_adobe_logo_en_us


2/24


wem.help.adobe.com/enterprise/en_US/10-0/wem/howto/website.html 2

1. Ensure that CQ is installed and running.

2. Download the CRXDE package.

3. Extract the package.

4. Double -click the executable.

5. Enter the location of your CQ ins tallation; for example http://localhost:4502for CQ Quickstart.

6. Enter your username(default: admin) and password (default: admin).

7. Click OK.

Setting up the project structure in CRXDE

In this s ection, you will create the mygeometrixx application and its s tructure in CRXDE. Proceed as follows:

1. In CRXDE, right-click apps, select New, then Folder. In the wizard dialog, type mygeometrixxas Folder nameand click Finish.

2. Right-click mygeometrixx, select New, then Folder. In the wizard dialog, type componentsas Folder nameand click Finish.

3. Right-click mygeometrixx, select New, then Folder. In the wizard dialog, type templatesas Folder nameand click Finish.

The structure in CRXDE looks as follows:

Setting up the Designer

In this s ection, you will s et up the designer for your application using the Designer. Proceed as follows:

1. In your browser, open the Toolstab of CQ WCM.

2. Under Designs, create a new page. Enter mygeometrixxas the Titleand click Create.

3. In CRXDE refresh the tree in Navigator.

4. In CRXDE, right-click the file etc/designs/geometrixx/static.css, then select Copy. Right-click the node etc/designs/mygeometrixxand select Paste.

5. In CRXDE, right-click the folder /etc/designs/geometrixx/images, select Copy. Right-click the node etc/designs/mygeometrixx, select Paste.

Creating the Contentpage Template, Component, Script and Pages

In this s ection, you will create:

The contentpage template which w ill be used to create content pages in the example webs ite mygeometrixx.

The contentpage component w hich w ill be used to render pages of content.

The contentpage script.

Following pages w hich all use the contentpage template: My Geometrixx, Englishand Products , Services and Customers.

The Productspage that you will create will look as follows:

Creating the Contentpage Template

To create the contentpage template, which will be us ed to create all the pages of the webs ite, follow the steps:

1. In CRXDE, right-click /apps/mygeometrixx/templates, select New, then Template.

2. In the wizard dialog, type:

Label: contentpage

Title: My Geometrixx Content Page Template

Description: This is My Geometrixx Content Page Template

Resource Type: mygeometrixx/components/contentpage

Click Finish.

3. To display the template in the Create Pagedialog when creating a page right under Websites from the Websitesconsole, set the allowedPathsproperty of the template node to: /content(/

Creating the Contentpage Component

To create the contentpage component, which will be us ed to render pages of content, follow the steps:

1. In CRXDE, right-click /apps/mygeometrixx/components, select New, then Component.

2. In the wizard dialog, type:

Label: contentpage.

Title: My Geometrixx Content Page Component.

Description: This is My Geometrixx Content Page Component.

Click Finish.

3. The structure now looks as follows:


3/24


4/24



12. Link your pages to the mygeometrixx des igner: in CRX Explorer, select the node /content/mygeometrixx/jcr:content. Double-click the property cq:designPathand set its Valueto/etc/designs/mygeometrixx.

13. In your browser, open a new tab and browse to http://localhost:4502/content/mygeometrixx/en/products.html. It looks as follows :

Enhancing the Contentpage Script

This s ection describes how to enhance the contentpage script:

first by using the foundation page scripts; the foundation components are those inbuilt in CQ

then by writing your own sc ripts

The Productspage will look as follows:

Using the Foundation Page Scripts

To include head.jspand body.jspfrom the foundation page component into your script:

1. In CRXDE, add a property to the node apps /mygeome trixx/components/con tentpage:

Select the node apps/mygeometrixx/components/contentpage.

In the Propertiestab, right-click, select Add Property....

In the dialog, type sling:resourceSuperTypeas Nameand set the Typeto String. Click Finish.

For the new property click the column Value, enter foundation/components/pageand press Enterto save the changes.

2. Open the file contentpage.jspunder /apps/mygeometrixx/components/contentpageand replace the existing code with the following:


5/24



Using your own scripts

In this section you will split the body part of the contentpage component into several parts. You will do this by creating script files for every part, then by including them into the script body.jspthat defin

body. Follow the s teps:

1. In CRXDE, create the file left.jspunder /apps/mygeometrixx/components/contentpage:Right-click the node /apps/mygeometrixx/components/contentpage, select New, then JSP.

In the dialog, as File nametype left.jspand click Finish.

2. Edit the file left.jspto remove the existing content and replace with the following code:

logo

newslist

search

3. Save the changes .

4. In CRXDE, create the file center.jspunder /apps/mygeometrixx/components/contentpage:

Right-click the node /apps/mygeometrixx/components/contentpage, select New, then JSP.

In the dialog, as File nametype center.jspand click Finish.

5. Edit the file center.jspto remove the existing content and replace with the following code:

trail

title

parsys


7. In CRXDE, create the file right.jspunder /apps/mygeometrixx/components/contentpage:

Right-click the node /apps/mygeometrixx/components/contentpage, select New, then JSP.

In the dialog, as File nametype right.jspand click Finish.

8. Edit the file right.jspto rem ove the existing content and replace with the following code:

iparsys


10. In CRXDE, create the file body.jspunder /apps/mygeometrixx/components/contentpage:

Right-click the node/apps/mygeometrixx/components/contentpage, select New, then JSP.

In the dialog, as type body.jspand click Finish.

11. Edit the file body.jspto remove the existing content and replace with the following code:

topnav


6/24



toolbar

disclaimer


13. In your browser, reload the Products Page. It looks as follows:

Creating the Top Navigation Component

In this section you will create a component that displays links to all top level pages of the website as a mechanism for navigating the website. This component will be displayed at the top of all pages c

using the contentpage template.

In the first version of the top navigation component (topnav) the navigation items will be text links only. In the s econd version you will implem ent topnav with image navigation links.

Your top navigation will then look as follows:

Creating the Top Navigation Component

To create the topnav component:


2. In the wizard dialog enter:

Label: topnav.

Title: My Top Navigation Component.

Description: This is My Top Navigation Component.

Click Finish.

Creating the Top Navigation Script with Textual Links

This s ection describes how to create the rendering s cript for the text-link based topnav component:

1. In CRXDE, open the file topnav.jspunder /apps/mygeometrixx/components/topnav.

2. Copy and paste the following code:


7/24



}

}

%>


Including Top Navigation in the Contentpage Component

To include topnav in your contentpage Component:

1. In CRXDE, open the file body.jspunder /apps/mygeometrixx/components/contentpageand replace:

topnav

with:


3. In your browser, reload the Products Page. The top navigation appears as follows:

Enhancing Pages with Subtitles

To enhance the pages with s ubtitles that will be displayed in the top navigation:

1. In your browse r, navigate to the ProductsPage.

2. In the Sidekick, select the Pagetab and click Page Properties....

3. In the dialog , in the Basictab, expand the More Titles and Descr iptionframe, as Subtitle, enter what we do. Click OK.

4. Repeat the former steps to add the subtitle about our servicesto the ServicesPage.

5. Repeat the former steps to add the subtitle the trust we earnto the CustomersPage.

Creating the Top Navigation Script with Image Links

In this s ection you will enhance the rendering s cript of the topnav component to use linked images for the navigation items. The im age should display the title and the description of the page reference

the steps:

1. In CRXDE, open the file topnav.jspunder /apps/mygeometrixx/components/topnavand replace:

with:


3. Again in CRXDE, right-click /apps/mygeometrixx/components/contentpage, select New, then File.

4. In the dialog , as Name, type: navimage.png.java. Click Finish.

5. Copy the following code into navimage.png.java:

package apps.mygeometrixx.components.contentpage;

import java.awt.Color;

import java.awt.Paint;

import java.awt.geom.Rectangle2D;

import java.io.IOException;

import javax.jcr.RepositoryException;

import com.day.cq.wcm.api.Page;

import com.day.cq.wcm.api.PageManager;

import com.day.cq.wcm.api.components.Component;

import com.day.cq.commons.SlingRepositoryException;

import com.day.cq.wcm.commons.WCMUtils;

import com.day.cq.wcm.commons.AbstractImageServlet;

import com.day.cq.wcm.foundation.ImageHelper;

import com.day.image.Font;

import com.day.image.Layer;import org.apache.sling.api.SlingHttpServletRequest;

import org.apache.sling.api.SlingHttpServletResponse;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.api.servlets.SlingSafeMethodsServlet;

/**

* Renders the navigation image

*/

public class navimage_png extends AbstractImageServlet {

protected Layer createLayer(ImageContext ctx)

throws RepositoryException, IOException {

PageManager pageManager = ctx.resolver.adaptTo(PageManager.class);

Page currentPage = pageManager.getContainingPage(ctx.resource);

// constants

int scale = 6;

int paddingX = 24;

int paddingY = 24;

Color bgColor = new Color(0x004a565c, true);


8/24



String title = currentPage.getNavigationTitle();

if (title == null) {

title = currentPage.getTitle();

}

if (title == null) {

title = currentPage.getName();

}

title = title.toUpperCase();

Paint titleColor = Color.WHITE;

Font titleFont = new Font("Myriad Pro", 10 * scale, Font.BOLD);

int titleBase = 10 * scale;

String subtitle = currentPage.getProperties().get("subtitle", "");

Paint subtitleColor = new Color(0xffa9afb1, true);

Font subTitleFont = new Font("Tahoma", 7);

int subTitleBase = 20;

// load background image from docroot

Component c = WCMUtils.getComponent(ctx.resource);

Layer bg = ImageHelper.createLayer(c.getLocalResource("navimage_bg.jpg"));

// draw the title text (4 times bigger)

Rectangle2D titleExtent = titleFont.getTextExtent(0, 0, 0, 0, title, Font.ALIGN_

Rectangle2D subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Fo

// check if subtitleExtent is too width

if ( subtitle.length() > 0 ) {

int titleWidth = (int)titleExtent.getWidth() / scale;

if ( subtitleExtent.getWidth() > titleWidth && subtitleExtent.getWidth() + 2

bg.getWidth() ) {

int charWidth = (int)subtitleExtent.getWidth() / subtitle.length();

int maxWidth = (bg.getWidth() > titleWidth + 2 * paddingX ? bg.getWidth

int len = (maxWidth - ( 2 * charWidth) ) / charWidth;

subtitle = subtitle.substring(0, len) + "...";

subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.A

}

} int width = Math.max((int) titleExtent.getWidth(), (int) subtitleExtent.getWidth

Layer text = new Layer(width, (int) titleExtent.getHeight() + 40, new Color(0x01

text.setPaint(titleColor);

text.drawText(0, titleBase, 0, 0, title, titleFont, Font.ALIGN_LEFT | Font.ALIGN

text.resize(text.getWidth() / scale, text.getHeight() / scale);

text.setX(0);

text.setY(0);

if (subtitle.length() > 0) {

// draw the subtitle normal sized

text.setPaint(subtitleColor);

text.drawText(0, subTitleBase, 0, 0, subtitle, subTitleFont, Font.ALIGN_LEFT

}

// and merge the layers

text.setY(paddingY);

text.setX(paddingX);

text.setBackgroundColor(bgColor);

int bgWidth = bg.getWidth();

if ( text.getWidth() + 2 * paddingX > bgWidth ) {

bgWidth = text.getWidth() + 2 * paddingX;

bg.resize(bgWidth, bg.getHeight());

}

bg.merge(text);

return bg;

}

}


7. To have navimage_bg.jpgas the background:

In CRXDE, right-click /apps/geometrixx/components/contentpage/navimage_bg.jpgand select Copy.

Right-click /apps/mygeometrixx/components/contentpageand select Paste.

8. In your browser, reload the Products page. The top navigation now appears as follows :

Creating the List Children Component

In this s ection you will create the list children (lis tchildren) component which displays a lis t of links with the title, description and date of pages (for example, product pages) which are below either the c

page or a root page defined in the component dialog.

It will look as follows:


9/24



Creating Product Pages

In this s ection you will create two pages below the Products page, describing two specific products. For each page, you will set a title, a des cription and a date.

1. In your browser, in the Websites tab, select the Productspage in the left pane. Click New...then select New Page....

2. In the dialog enter:

Title: Product 1.

Name: product1.

Select My Geometrixx Content Page Template.

Click Create.

3. Select the Productspage. Click New...then select New Page....

4. In the dialog enter:

Title: Product 2.

Name: product2.

Select My Geometrixx Content Page Template.

Click Create.

5. In CRX Explorer, set a description and a date for the Product 1 page:

Browse to the node /content/mygeometrixx/en/products/product1/jcr:content. Double-click thejcr:descriptionproperty and set the Value to This is a description of th

Product 1!. Save the update.

Right-click/content/mygeometrixx/en/products/product1/jcr:content, select New Property. Set Nameto dateand Valueto 10/11/2008. Save the update.

6. In CRX Explorer, set a description and a date for the Product 2 page:

Browse to the node /content/mygeometrixx/en/products/product2/jcr:content.Double-click thejcr:descriptionproperty and set the Value to This is a description of th

Product 2!. Save the update.

Right-click/content/mygeometrixx/en/products/product2/jcr:content, select New Property. Set Name to dateand Value to 20/11/2008. Save the update.

Creating the List Children Component

To create the listchildren component:

1. In CRXDE, right-click/apps/mygeometrixx/components, select New, then Component.


Label: listchildren.

Title: My Listchildren Component.

Description: This is My Listchildren Component.

Click Finish.

Creating the List Children Script

This s ection describes how to create the listchildren script. This dis plays a list of links with title, description and date of pages (for example, product pages) that are below either the current page or a ro

as defined in the component dialog. Follow the steps:

1. In CRXDE, open the file listchildren.jspunder /apps/mygeometrixx/components/listchildren.

2. Copy and paste the following code:



10/24



Creating the List Children Dialog

In this s ection, you will create the dialog for the listchildren component.

1. Create the dialog node under the listchildren component:

In CRXDE, right-click the node/apps/mygeometrixx/components/listchildren, select New, then Dialog.

In the wizard dialog, as Name enter dialogand as Title, select List Children. Click Finish. The dialog generated looks as follows:

With the following properties:

2. With CRXDE edit the titleproperty for tab1node. Set it to Edit Component.

3. With the CRX Explorer, create an itemsnode under the tab1node:

4. With the CRX Explorer, create the listrootnode under the itemsnode:

5. Add properties for the listrootnode as follows:

NOTE

The previous procedure uses the default dialog structure.

It is poss ible to create dialogs (s uch as thos e seen in Geometrixx) by manually creating and configuring the individual nodes.

Including List Children in the Contentpage Component

In order to include the lis tchildren component in your contentpage component, proceed as follows:

1. In CRXDE, open the file left.jspunder /apps/mygeometrixx/components/contentpageand replace:

newslist

with:


Viewing List Children in a Page

To see the full operation of this com ponent you can view the Products page:

w hen the parent page ("Path of list root") is not def ined.

w hen the parent page ("Path of list root") is defined.

1. In your browser, reload the Products Page. The listchildren component appears as follows:

2. Double-click your component to open the edit dialog:


11/24



3. As Path of list root, enter: /content/mygeometrixx/en. Click OK. The listchildren component on your page now looks as follows:

Creating the Logo Component

In this s ection you will create the component which dis plays the logo, with underlying link to the homepage of the example website mygeometrixx. The logo im age and the home link can be configured g

(same for every page of the website). You will create a des ign mode dialog to provide the image and the link path. The logo component will be placed on the upper left side of all pages in the website.

It will look as follows:

Creating the Logo Component

To create the logo component, follow the steps:



Label: logo.

Title: My Logo Component.

Description: This is My Logo Component.

Click Finish.

Creating the Logo Script

This section describes how to create the script to display the logo image with a link to the homepage.

1. In CRXDE, open the file logo.jspunder /apps/mygeometrixx/components/logo.

2. Copy the following code tologo.jsp:

Home


Creating the Logo Design Dialog

In this s ection, you will create the design dialog for your logo component.

1. In CRXDE, under the node /apps/mygeometrixx/components/logo, create a new dialog with:

Name: design_dialog.

Title: Logo (Design).

Properties as follows:


12/24



2. For the node tab1set the titleproperty t o General.

3. Under the node tab1create a node items (cq:WidgetCollection).

4. Under the node design_dialog/i/items/tab1/items create a new nodeabsParent (nt:unstructured) and set the following properties:

5. Under the node design_dialog/i/items/tab1/items create a new node margin (nt:unstructured) and set the following properties:

6. Under the node design_dialog/items/itemscreate a img node (cq:Widget) and set the following properties:

Including Logo in the Contentpage Component

In order to include the logo in your contentpage component, proceed as follows :

1. In CRXDE, open the file left.jspunder /apps/mygeometrixx/components/contentpageand replace:

logo

with:


3. In your browser, reload the Productspage. The logo looks as follows , though currently it only shows the underlying link:

Setting the Logo Image in a Page

This section describes how to set an image as your logo using the design mode dialog.

1. In your browser, switch to design mode.

2. In the Design of logobar, click Editto use the dialog to edit the settings for the logo com ponent:

3. In the dialog select the Imagetab. Upload your image. Click OK. The logo looks as follows and is activated as a link:


13/24



Including the Breadcrumb Component

In this s ection, you will include the breadcrumb (trail) component, which is one of the foundation components.

1. In CRXDE, brows e to/apps/mygeometrixx/components/contentpage, open the file center.jspand replace:

trail

with:


3. In your browser, reload the Products 1page. The trail component looks as follows:

Note: You have the possibility to define the Parent Level in design mode.

Including the Title Component

In this s ection, you will include the title component, which is one of the foundation components.


title

with:


3. In your browser, reload the Productspage. The title component looks as follows:

Note: You have the possibility to set a different Title and the Type / Size in edit mode.

Including the Paragraph System Component

The paragraph system (parsys) is a significant part of a website as it m anages a lis t of paragraphs. It is us ed to structure the content parts on a website.In this s ection, you will include the parsys com ponent (one of the foundation components) in your contentpage component.


parsys

with:


3. In your browser, refresh the Productspage. It now has the parsys component, which is s een as follows:

Creating the Image Component

In this s ection you will create a com ponent which displays im ages in the main paragraph s ystem of the example website mygeometrixx. You will create a dialog enabling you to specify the image and o

properties (title, description, size) when in edit mode. These will be s tored in the paragraph resource. Users will have the possibility to crop, map and rotate the image.

Creating the Image Component

To create the image component, follow the steps:



Label: image.

Title: My Image Component.

Description: This is My Image Component.


14/24



Group: MyGeometrixx.

Click Next.

Allowed Parents: */parsys.

Click Finish.

Creating the Image Script

This section describes how to create the image s cript.

1. In CRXDE, brows e to/apps/mygeometrixx/components/imageand open the file image.jsp

2. Copy the following code toimage.jsp:

0) {

%>


Creating the Image Rendering Script

This s ection describes how to create the script that renders the image:

1. In CRXDE, right-click /apps/mygeometrixx/components/image, select New, then New File....

2. In the dialog, as Nameenter img.png.java. Click Finish.

3. Open the new file and copy the following code into it:

package apps.mygeometrixx.components.image;

import java.io.IOException;

import java.io.InputStream;

import javax.jcr.RepositoryException;

import javax.jcr.Property;import javax.servlet.http.HttpServletResponse;

import com.day.cq.wcm.foundation.Image;

import com.day.cq.wcm.commons.RequestHelper;

import com.day.cq.wcm.commons.WCMUtils;

import com.day.cq.wcm.commons.AbstractImageServlet;

import com.day.cq.commons.SlingRepositoryException;

import com.day.image.Layer;

import org.apache.commons.io.IOUtils;

import org.apache.sling.api.SlingHttpServletRequest;

import org.apache.sling.api.SlingHttpServletResponse;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.api.resource.ValueMap;

import org.apache.sling.api.servlets.SlingSafeMethodsServlet;

/**

* Renders an image

*/

public class img_png extends AbstractImageServlet {

protected Layer createLayer(ImageContext c)

throws RepositoryException, IOException {

// don't create the later yet. handle everything later

return null;

}

protected void writeLayer(SlingHttpServletRequest req,

SlingHttpServletResponse resp,

ImageContext c, Layer layer)

throws IOException, RepositoryException {

Image image = new Image(c.resource);

if (!image.hasContent()) {

resp.sendError(HttpServletResponse.SC_NOT_FOUND);

return;

}

// get style and set constraints

image.loadStyleData(c.style);

// get pure layer

layer = image.getLayer(false, false, false);


15/24



// crop

boolean modified = image.crop(layer) != null;

// resize

modified |= image.resize(layer) != null;

// rotate

modified |= image.rotate(layer) != null;

if (modified) {

resp.setContentType("image/png");

layer.write("image/png", 1.0, resp.getOutputStream());

} else {

// do not re-encode layer, just spool

Property data = image.getData();

InputStream in = data.getStream();

resp.setContentLength((int) data.getLength()); resp.setContentType(image.getMimeType());

IOUtils.copy(in, resp.getOutputStream());

in.close();

}

resp.flushBuffer();

}

}


Creating the Image Dialog

This s ection describes how to create the dialog for edit mode, so that the image and related properties (title, description, size) can be stored in the paragraph resource

You will copy the dialog from the foundation im age component:

1. In CRXDE, right-click the node/libs/foundation/components/image/dialogand select Copy.

2. Right-click the node /apps/mygeometrixx/components/imageand click Paste.

3. Your dialog in /apps/mygeometrixx/components/imagelooks as follows:

Creating the Image cq:editConfig Node

In this s ection, you will create the cq:editConfig node s tructure. It enables you to drag as sets from the Content Finder into your image com ponent.

1. Using the CRX Explorer, under the node /apps/mygeometrixx/components/image, create a new node as follows:

Name: cq:editConfig.

Type: cq:EditConfig.

2. Under the node cq:editConfig, create a new node as follows:

Name: cq:dropTargets.

Type: cq:DropTargetConfig.

3. Under the node cq:dropTargets, create a new node as follows:

Name: image.

Type: nt:unstructured.

4. In CRXDE set the properties as follows:

Adding the icon

In this section, you will add the icon to appear beside the image component when it is lis ted in Sidekick:

1. In CRXDE, right-click the file /libs/foundation/components/image/icon.pngand select Copy.

2. Right-click the node /apps/mygeometrixx/components/imageand click Paste.

Viewing Image in a Page

In this s ection, you will view the Products page and add your image component to the paragraph system.

1. In your browser, reload the Productspage.


16/24



2. In the Sidekick, click the design modeicon.

3. Click the Editbutton to edit the design dialog of par.

4. In the dialog, a list ofAllowed Componentsis s hown; check My Image Component and click OK.

5. Return to edit mode.

6. Double-click the parsys frame (on Drag components or assets here). The Insert New Componentand Sidekickselectors look as follows:

The Text-Image Component

In this s ection you will create a com ponent (textimage) which displays text and images in the main paragraph system of the example website m ygeometrixx.

You will create a dialog for edit mode that enables you to specify the text and im age, together with certain dis play properties (title, description, size) that are stored in the paragraph resource. Users will

the possi bility to crop, map and rotate the image.

Creating the Text-Image Component

To create the textimage component, follow the s teps:



Label: textimage.

Title: My Text-Image Component.

Description: This is My Text-Image Component.

Super Resource Type: apps/mygeometrixx/components/image.


Click Next.

As Allowed Pa rents, type */parsys.

Click Finish.

Creating the Text-Image Script

This s ection describes how to create the textimage script:

1. In CRXDE, navigate to /apps/mygeometrixx/components/textimageand open the file textimage.jsp

2. Copy the following code into textimage.jsp:

0) {


17/24



%>

0) {

%> 0) {

%>


Creating the Text-Image Dialog

This s ection describes how to create the edit mode dialog that will enable you to specify the text, image and dis play properties (title, description, size) to be s tored in the paragraph resource.

You will copy the dialog from the corresponding foundation textimage component:

1. In CRX Explorer, right-click the node /libs/foundation/components/textimage/dialogand select Copy.

2. In the dialog, navigate to the node /apps/mygeometrixx/components/textimageand click Open. Click OK.

3. The structure of your dialog in /apps/mygeometrixx/components/textimagelooks as follows:

Creating the Text-Image cq:editConfig Node

In this s ection, you will create the cq:editConfig node s tructure. It enables you to drag as sets from the Content Finder into the textimage component.

You will copy the cq:editConfig node from the foundation textimage component.

1. In CRX Explorer, right-click the node /libs/foundation/components/textimage/cq:editConfigand select Copy.

2. In the dialog, navigate to the node /apps/mygeometrixx/components/textimageand click Open. Click OK.

3. The structure under /apps/mygeometrixx/components/textimagelooks as follows:

4. Select the node /apps/mygeometrixx/components/textimage/cq:editConfig/cq:dropTargets/image/parameters/imageand set the Value of the sling:resourceType property to

mygeometrixx/components/image. Save the change.

Adding the Icon

In this s ection, you will add the icon which appears in the Sidekick beside the textimage com ponent :

1. In CRX Explorer, right-click the file /libs/foundation/components/textimage/icon.pngand select Copy.

2. Navigate to the node /apps/mygeometrixx/components/textimageand click Open. Click OK.

Adding Text-Image to the Paragraph System

In this s ection, you will view the Productspage and add your textimage com ponent to the paragraph system.

1. In your browser, reload the Productspage.


18/24




3. Click the Editbutton to edit the design dialog of par.

4. In the dialog, a list ofAllowed Componentsis s hown; check My Text-Image Componentand click OK.

5. Switch to edit mode.

6. Double-click the parsys frame. The textimage component is now listed:

Including the Toolbar Component

In this s ection, you include the toolbar component, which is one of the foundation components.

You have several options, in edit mode as well as des ign mode.

1. In CRXDE, navigate to /apps/mygeometrixx/components/contentpage, open the file body.jspand replace:

toolbar

with:


3. In the Websites tab, select the Englishpage under My Geometrixx. Create the Toolbar page under English. Using the Page Properties...in Sidekick set Hide in Navigation(in Sidekick).

4. Under Toolbar, create following pages:

Contacts

Feedback

Login

Search

5. In your browser, reload the Productspage. It looks as follows :

Creating the Search Component

In this s ection you will create the component to s earch for content on the website. This search component can be placed in the paragraph system of any page (for example, on a specialized search res

page).

Your search input box will look as follows in the Englishpage:

Your search input box will look as follows in the Searchpage:


19/24



Creating the Search Component

To create the search component:


2. In the wizard dialog :

Label: search.

Title: My Search Component.

Description: This is My Search Component.


Click Next.

As Allowed Pa rents, type */parsys.

Click Finish.

3. In CRX Explorer, copy the node /libs/foundation/components/search/dialogto under /apps/mygeometrixx/components/search.

4. In CRX Explorer, copy the node /libs/foundation/components/search/i18nto under/apps/mygeometrixx/components/search(for internationalization).

5. In CRX Explorer, copy the node /libs/foundation/components/search/resourcesto under /apps/mygeometrixx/components/search(for the document format icons).

Creating the Search Script

This s ection describes how to create the search script:

1. In CRXDE, navigate to /apps/mygeometrixx/components/searchand open the file search.jsp.

2. Copy the following code to search.jsp:


20/24



${result.trackerScript}

${result.trackerScript}

Languages

${label} (${bucket.count}) - remove filter

${label} (${bucket.count})

Tags



File types



Last Modified


21/24



${bucket.value}

(${bucket.count}) - remove filter

${bucket.value} (${bucket.count})

${hit.icon} ${hit.title}

${hit.excerpt}

${hit.URL} -

-

${page.index + 1}

${page.index + 1}

3. Save the changes.

Including a Search Box in the Contentpage Component

To include a search input box in the left section of your contentpage, proceed as follows:

1. In CRXDE, open the file left.jspunder /apps/mygeometrixx/components/contentpageand before:

%>

insert:

%>

advanced search



22/24



4. In your browser, reload the Productspage. It looks as follows :

Including the Search Component in the Search Page

In this s ection, you will add your search component to the paragraph system.

1. In your browser, open the Searchpage.


3. Click the Editbutton to edit the Design of par.

4. In the dialog, a list of the Allowed Componentsis shown; check My Search Componentand click OK.

5. Return to edit mode.

6. Drag the My Search Componentfrom the Sidekick into the parsys frame. It looks as follows:

7. Navigate to your Productspage. Search for customersin the input box and press Enter. You are redirected to the Search page. Switch to preview mode: the output will be shown in a s imilar for

the following:


23/24


24/24


(www.adobe.comhttp://www.adobe.com/go/gfooter_truste_logo)

Copyright 2012 Adobe Systems Incorporated. All rights reserved.

Use of this website s ignifies your agreement to the Terms of Use (www.adobe.comhttp://www.adobe.com/go/gfooter_terms_of_use) and Online Privacy Policy

(www.adobe.comhttp://www.adobe.com/go/gfooter_privacy_policy) .
http://www.adobe.com/go/gfooter_privacy_policyhttp://www.adobe.com/go/gfooter_terms_of_usehttp://www.adobe.com/go/gfooter_truste_logo

How to Create a Fully Featured Internet Website - Docs.day

Documents

Transcript of How to Create a Fully Featured Internet Website - Docs.day