BlogJava-Noah-文章分类-CQ5http://www.blogjava.net/Noah/category/53686.html<span style="font-family: 宋体; mso-ascii-font-family: Calibri; mso-hansi-font-family: Calibri" lang="ZH-CN">不是经典我不发</span>zh-cnThu, 27 Jun 2013 07:23:16 GMTThu, 27 Jun 2013 07:23:16 GMT60用CQ5创建在对话框的组件http://www.blogjava.net/Noah/articles/401006.html眼镜蛇眼镜蛇Thu, 27 Jun 2013 06:44:00 GMThttp://www.blogjava.net/Noah/articles/401006.htmlhttp://www.blogjava.net/Noah/comments/401006.htmlhttp://www.blogjava.net/Noah/articles/401006.html#Feedback0http://www.blogjava.net/Noah/comments/commentRss/401006.htmlhttp://www.blogjava.net/Noah/services/trackbacks/401006.html1.       创建组件

a.       在CRXDE Lite里，右键点击相应的组件文件夹如/apps/demoNoah/components，并且选择“Create”—“Create component…”,在弹出的窗口中输入相应信息，如下图：

                    

b.       一路点击“Next”直到“OK”。

2.       创建对话框

a.       右键点击刚才建立的组件，选择“Create”—“Create Dialog…”在弹出的窗口中输入相应信息，如下图：

                    

b.       点击保存，此时目录结构如下：

                     
              c.   右键点击dialog/items/items/tab1节点，选择“Create”—“Create Node…”输入如图
            

d.       用同样的方法在“items”下建立“title”节点，但此时Type选择“cq:Widget”

e.      然后，添加如下属性：

    

f.       然后，再在“title”下建立“fieldConfig”节点，属性如下：

       

g.       用同样方法建立“des”节点，注意目录结构，如图

    

3.       获取变量值

a.       打开“Buick_Tech_Info.jsp”,输入如下内容：

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="java.util.Iterator,
      com.day.cq.wcm.foundation.List,
com.day.cq.wcm.api.Page,
        com.day.cq.wcm.api.PageFilter"%>
<cq:defineObjects />
    <%
    //List list = (List)request.getAttribute("titles");
String[] titles = (String[])properties.get("titles", String[].class);
String[] des = (String[])properties.get("description", String[].class);

  

b.       这里只主要说明的是怎么获取用户输入的数据，具体想怎么显示可自行实现，比如：

<%
    if(titles != null){
    for(int i=0; i<titles.length; i++){
    %>
            <a class="accordion_headings"><%=titles[i]%></a>
            <div id="test-content">
                <div class="accordion_child">
                    <%= (i<des.length?des[i]:"")%>
                </div>
            </div>
<%
    }
}
    %>

4.       在页面中添加上相应的组件

a.       到页面中找到这个组件，并拖一个到页面中。

b.      在这个区域中点右键，选择“Edit”。会出现类似如下界面

    

b.       填写完成后，点“OK”，用户所填写的信息会显示在页面上。

5.       到此整个过程完成。



眼镜蛇 2013-06-27 14:44 发表评论
]]>怎么使用CQ5来开发网站http://www.blogjava.net/Noah/articles/400958.html眼镜蛇眼镜蛇Wed, 26 Jun 2013 01:46:00 GMThttp://www.blogjava.net/Noah/articles/400958.htmlhttp://www.blogjava.net/Noah/comments/400958.htmlhttp://www.blogjava.net/Noah/articles/400958.html#Feedback0http://www.blogjava.net/Noah/comments/commentRss/400958.htmlhttp://www.blogjava.net/Noah/services/trackbacks/400958.html阅读全文

眼镜蛇 2013-06-26 09:46 发表评论
]]>How to Create a Fully Featured Internet Website in CQ5http://www.blogjava.net/Noah/articles/400946.html眼镜蛇眼镜蛇Tue, 25 Jun 2013 09:42:00 GMThttp://www.blogjava.net/Noah/articles/400946.htmlhttp://www.blogjava.net/Noah/comments/400946.htmlhttp://www.blogjava.net/Noah/articles/400946.html#Feedback0http://www.blogjava.net/Noah/comments/commentRss/400946.htmlhttp://www.blogjava.net/Noah/services/trackbacks/400946.html阅读全文

眼镜蛇 2013-06-25 17:42 发表评论
]]>How to Develop Componentshttp://www.blogjava.net/Noah/articles/400941.html眼镜蛇眼镜蛇Tue, 25 Jun 2013 08:12:00 GMThttp://www.blogjava.net/Noah/articles/400941.htmlhttp://www.blogjava.net/Noah/comments/400941.htmlhttp://www.blogjava.net/Noah/articles/400941.html#Feedback0http://www.blogjava.net/Noah/comments/commentRss/400941.htmlhttp://www.blogjava.net/Noah/services/trackbacks/400941.htmlThis section describes how to create your own components and add them to the paragraph system.

A quick way to get started is to copy an existing component and then make the changes you want. You can also use this method to edit existing components (although Day recommends that you back up the original component).

An example of how to develop a component is described in detail in Extending the Text and Image Component - An Example.

Developing a new component by adapting an existing component

To develop new components for CQ WCM based on existing component, you copy the component and create a javascript file for the new component and store it in a location accessible to CQ5:

  1. Create a new component folder in /apps/<website-name>/components/<MyComponent> by copying an existing component, such as the Text component, and renaming it.

  2. In the CRX Explorer, modify the jcr:description and jcr:title to reflect its new name.

  3. Open the new component folder and make the changes you require; also, delete any extraneous information in the folder.

    You can make changes such as:

    • adding a new field in the dialog box

    • replacing the .jsp file (name it after your new component)

    • or completely reworking the entire component if you want

    For example, if you take a copy of the standard Text component, you can add an additional field to the dialog box, then update the .jsp to process the input made there.

  4. In the Content Explorer, navigate to the component and change the allowedParents property to */parsys, which makes it available to the paragraph system.

    [Note] Note

    Either cq:editConfig node, dialog, or design_dialog node should be present and properly initialized for the new component to appear.

  5. Activate the new component in your paragraph system either by adding /apps/<website-name>/components/<MyComponent> to the /etc/designs/default/<website-name>/jcr:content/contentpage/parsys/components property in CRX or by following the instructions in Adding new components to paragraph systems.

  6. In CQ WCM, open a page in your web site and insert a new paragraph of the type you just created to make sure the component is working properly.

[Note] Note

To see timing statistics for page loading, you can use Ctrl-Shift-U - with ?debugClientLibs=true set in the URL.

Adding a new component to the paragraph system (design mode)

After the component has been developed, you add it to the paragraph system, which enables authors to select and use the component when editing a page.

  1. Access a page within your authoring environment that uses the paragraph system; for example <contentPath>/Test.html.

  2. Switch to Design mode by either:

    • adding ?cmsmode=design to the end of the URL and accessing again; for example <contextPath>/ Test.html?cmsmode=design.

    • clicking Design in Sidekick

    You are now in designmode and can edit the paragraph system:

  3. Click Edit.

    A list of components belonging to the paragraph system are shown (all those defined with the property allowedParents=*/parsys). Your new component is also listed.

    The components can be activated (or deactivated) to determine which are offered to the author when editing a page.

  4. Activate your component, then return to normal edit mode to confirm that it is available for use.

Extending the Text and Image Component - An Example

This section provides an example on how to extend the widely used text and image standard component with a configurable image placement feature.

The extension to the text and image component allows editors to use all the existing functionality of the component plus have an extra option to specify the placement of the image either:

  • on the left-hand side of the text (current behavior and the new default)

  • as well as on the right-hand side

After extending this component, you can configure the image placement through the component's dialog box.

The following techniques are described in this exercise:

  • Copying existing component node and modifying its metadata

  • Modifying the component's dialog, including inheritance of widgets from parent dialog boxes

  • Modifying the component's script to implement the new functionality

Extending the existing textimage component

To create the new component, we use the standard textimage component as a basis and modify it. We store the new component in the Geometrixx CQ WCM example application. To extend the textimage component, go to the CRX Explorer (server name:port number/crx) and log in as admin and then navigate to the Content Explorer.

  1. Copy the standard textimage component from /libs/foundation/components/textimage into the Geometrixx component folder, /apps/geometrixx/components, using textimage as the target node name. (Copy the component by navigating to the component, right-clicking and selecting Copy and browsing to the target directory.)

  2. To keep this example simple, navigate to the component you copied and delete all the subnodes of the new textimage node except for the following ones:

    • dialog definition: textimage/dialog

    • component script: textimage/textimage.jsp

  3. Edit the component metadata:

    • Component name

      • Set jcr:description to Text Image Component (Extended)

      • Set jcr:title to Text Image (Extended)

    • Component listing in the paragraph (parsys component) system (leave as is)

      • Leave allowedParents defined as */parsys

    • Group, where the component is listed in the sidekick (leave as is)

      • Leave componentGroup set to General

    • Parent component for the new component (the standard textimage component)

      • Set sling:resourceSuperType to foundation/components/textimage

    After these steps the component node looks like the following:

     

  4. Modify the component's dialog box to include the new option. The new component inherits the parts of the dialog box that are the same as in the original. The only addition we make is to extend the Advanced tab, adding an Image Position dropdown list, with options Left and Right:

    • Leave the textimage/dialog properties unchanged.

    • Note how textimage/dialog/items has three subnodes, tab1 to tab3, representing the three tabs of the textimage dialog box.

    • For the first two tabs (tab1 and tab2):

      • Change xtype to cqinclude (to inherit from the standard component).

      • Add a pathParameter property with values /libs/foundation/components/textimage/dialog/items/tab1.infinity.json and /libs/foundation/components/textimage/dialog/items/tab2.infinity.json, respectively.

      • Remove all other properties or subnodes.

    • For tab3:

      • Leave the properties and subnodes without changes

      • Add a new field definition to tab3/items, node position of type cq:Widget

      • Set the following properties (of type String) for the new tab3/items/position node

        • name: ./imagePosition

        • xtype: selection

        • fieldLabel: Image Position

        • type: select

      • Add subnode position/options of type cq:WidgetCollection to represent the two choices for image placement, and under it create two nodes, o1 and o2 of type nt:unstructured

      • For node position/options/o1 set the properties: text to Left and value to left

      • For node position/options/o2 set the properties: text to Right and value to right

    Image position is persisted in content as the imagePosition property of the node representing textimage paragraph.

    After these steps, the component dialog box looks like this:

  5. Extend the component script, textimage.jsp, with extra handling of the new parameter.

    • Open the /apps/geometrixx/components/textimage/textimage.jsp script for editing.

    • We are going to manipulate the style of the <div class="image"> tag, generated by the component, to float the image to the right. It is located in the following area of the code:

          Image img = new Image(resource, "image");
    if (img.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
%><div class="image"><%
        img.loadStyleData(currentStyle);

      We are going to replace the emphasized code fragment %><div class="image"><% with new code generating a custom style for this tag.

    • Copy the following code fragment, and replace the %><div class="image"><% line with it:

              // todo: add new CSS class for the 'right image' instead of using
        //       the style attribute
        String style="";
        if (properties.get("imagePosition", "left").equals("right")) {
            style = "style=\"float:right\"";
        }
        %><div <%= style %> class="image"><%

      Note that for simplicity we are hard-coding the style to the HTML tag. The proper way to do it would be to add a new CSS class to the application styles and just add the class to the tag in the code in the case of a right-aligned image.

    • The code fragment, after the change, should look like this (new code emphasized):

          Image img = new Image(resource, "image");
    if (img.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
        // todo: add new CSS class for the 'right image' instead of using
        //       the style attribute
        String style="";
        if (properties.get("imagePosition", "left").equals("right")) {
            style = "style=\"float:right\"";
        }
        %><div <%= style %> class="image"><%
        img.loadStyleData(currentStyle);

    • Save the script to the repository.

  6. The component is ready to test.

Checking the new component

After the component has been developed, you can add it to the paragraph system, which enables authors to select and use the component when editing a page. These steps allow you to test the component.

  1. Open a page in Geometrixx; for example, English/Company

  2. Switch to design mode by clicking Design in Sidekick

  3. Edit the paragraph system design by clicking Edit on the paragraph system in the middle of the page. A list of components, which can be placed in the paragraph system are shown, and it should include your newly developed component, Text Image (Extended). Activate it for the paragraph system by selecting it and clicking OK.

  4. Switch back to the editing mode.

  5. Add the Text Image (Extended) paragraph to the paragraph system, initialize text and image with sample content. Save and you should see the default rendering of Text and Image component:

  6. Open the dialog of the text and image paragraph, and change the Image Position on the Advanced tab to Right, and click OK to save the changes.

  7. You see the paragraph rendered with the image on the right:

  8. The component is now ready to use.

The component stores its content in a paragraph on the Company page. The following screenshot shows how our new configuration parameter is persisted in the repository, with the node representing the paragraph we have just created.

The textimage/imagePosition parameter represents the position of the image for this paragraph on /content/geometrixx/en/company page.



眼镜蛇 2013-06-25 16:12 发表评论
]]>How to Create Templateshttp://www.blogjava.net/Noah/articles/400940.html眼镜蛇眼镜蛇Tue, 25 Jun 2013 07:50:00 GMThttp://www.blogjava.net/Noah/articles/400940.htmlhttp://www.blogjava.net/Noah/comments/400940.htmlhttp://www.blogjava.net/Noah/articles/400940.html#Feedback0http://www.blogjava.net/Noah/comments/commentRss/400940.htmlhttp://www.blogjava.net/Noah/services/trackbacks/400940.htmlCQ5 page templates are simply models used to create new pages. They can contain as little, or as much, initial content as needed, their role being to create the correct initial node structures, with the required properties (primarily sling:resourceType) set to allow editing and rendering.

Creating a new Template (based on an existing template)

Needless to say a new template can be created completely from scratch, but often an existing template will be copied and updated to save you time and effort. For example, the templates within Geometrixx can be used to get you started.

  1. Copy an existing template (preferably with a definition as close as possible to what you want to achieve) to a new node.

    [Note] Note

    Templates are usually stored in /apps/<website-name>/templates/<template-name>.

  2. Change the jcr:title of the new template node to reflect its new role. You can also update the jcr:description if appropriate.

  3. Copy the component on which the template is based (this is indicated by the sling:resourceType property of the jcr:content node within the template) to create a new instance.

    [Note] Note

    Components are usually stored in /apps/<website-name>/components/<component-name>.

  4. Update the jcr:title and jcr:description of the new component.

  5. Replace the thumbnail.png if you want a new thumbnail picture to be shown in the template selection list.

  6. Update the sling:resourceType of the template's jcr:content node to reference the new component.

  7. Make any further changes to the functionality or design of the template and/or its underlying component.

    Changes made to the /apps/<website>/templates/<template-name> node will affect the template instance (as in the selection list).

    Changes made to the /apps/<website>/components/<component-name> node will affect the content page created when the template is used.

You can now create a page within your website using the new template.



眼镜蛇 2013-06-25 15:50 发表评论
]]>