Quản lý cấu hình web - part 32 pot

Alfresco Surf and Web Editor [ 292 ] • Step 3: Modify the le webscript-framework-config.xml. Uncomment the following code that is placed in the le. This congures the remote Alfresco repository as an endpoint. <endpoint> <id>alfresco-system</id> <name>Alfresco - System access</name> <description>System account access to Alfresco</description> <connector-id>alfresco</connector-id> <endpoint-url> http://localhost:8080/alfresco/s </endpoint-url> <identity>declared</identity> <username>admin</username> <password>admin</password> <unsecure>true</unsecure> </endpoint> The rest of the case study is covered in Chapter 10, in the Alfresco WCM –Surf-based Web application integration section. Now we shall create one more web script that will call other web scripts that are stored in Alfresco WCM to fetch data. • Step 1: Create a news folder inside the site-webscripts/components/ common folder. Create a new le news.get.desc.xml in the news folder. Insert the following code: <webscript> <shortname>News</shortname> <description>Calls the remote Alfresco web script</description> <url>/component/common/news/news</url> </webscript> • Step 2: Create a template le, news.get.html.ftl, in the same location and insert the following code: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="Small Corporation" /> <meta name="keywords" content="small, corporation" /> <link rel="stylesheet" type="text/css" href="${app.context}/css/ style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="${app.context}/css/ base.css" media="screen" /> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="top"> Download from Wow! eBook <www.wowebook.com> Chapter 9 [ 293 ] <#list news as n> ${n.Headline} <br> </#list> </td> </tr> </table> • Step 3: Create a JavaScript le, news.get.js, in the same location and insert the following code: { // get a connector to the Alfresco repository var connector = remote.connect("alfresco-system"); var jsonFeed = connector.get("http://localhost:8080/alfresco/ service/org/cignex/news/getNewsHeadlines.json?storeId=cignex"); var obj = eval('(' + jsonFeed + ')'); if (obj) { model.news = obj["newsItems"]; } } Using YUI (Yahoo User Interface) library YUI is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications. It is an open source JavaScript library using techniques such as DOM scripting, DHTML, and AJAX. YUI consists of several CSS components and nearly three dozen JavaScript components, all of which are designed to empower the rapid creation of web applications that run in all of the major web browsers. It provides a rich set of widgets and utilities, such as animation, drag-and-drop, image loader, menu, paginator, uploader, and many others. Mainly, it has six components: • YUI Core: It is a light set of tools for event management. It consists of Yahoo Global objects within which all of the YUI library code resides. It also contains an Event utility that provides developers with easy and safe access to browser events such as mouse clicks, key press, and so on. • YUI Utilities: It provides various utilities like animation, data source, storage, SWF, JSON, image loader, drag-and-drop, and many more. • YUI Widgets: It provides a variety of easy-to-use controls, such as Data Table, menu, paginator, progress bar, uploader, image cropper, and many more. Download from Wow! eBook <www.wowebook.com> Alfresco Surf and Web Editor [ 294 ] • CSS Resources: It consists of CSS Reset (removes inconsistent styling of HTML elements provided by browsers), CSS fonts (standardized cross- browser font families and size rendering), and CSS base (an optional CSS le that complements YUI's core CSS foundation). • Development tools: It contains Logger Control (provides a quick and easy way to write log messages to an onscreen console), Proler (allows you to specify exactly the parts of your application to the prole), ProlerViewer control (used in combination with Proler to provide rich visualizations of your proling data), and YUI test utility (testing framework for browser- based JavaScript solutions). • Build Tool: YUI Compressor is a build-process component written in Java that minies your JavaScript and CSS. It is a JavaScript and CSS minier designed to be 100 percent safe and yield a higher compression ratio than most other tools. As we discussed earlier, we have a set of predened controls that we can use by instantiating an object and calling a set of methods on them. For instance, use the horizontal menu plugin provided by the YUI library and observe how easy it is to make a rich menu. Modify the le header.get.html.ftl located at site-webscripts/components/ common/header . Insert the downloaded code from the Packt website. You will notice a change in the menu style. Download the code samples from the Packt website. Download from Wow! eBook <www.wowebook.com> Chapter 9 [ 295 ] Alfresco Web Editor Alfresco Web Editor is an application developed using the Spring Surf platform. It provides in-context editing capabilities for Alfresco repository content. Because of the in-context editing capability of the Web Editor, it's very easy for any non- technical person to edit Alfresco content directly from the web page. It supports Presentation editing for Surf-based websites. Alfresco Web Editor is a Surf application incorporating the Alfresco Form Engine. It uses the Form Service default template. Alfresco Web Editor is packaged as a standalone WAR le ( awe.war). Hence you can deploy it as a standalone application on the same server where Alfresco is running or also can deploy it as a part of any Surf Application remote to the Alfresco server. Deploying and using Alfresco Web Editor First you need to download the Alfresco Web Editor. A le alfresco-enterprise- webeditor-3.3.zip will consist of the awe.war le and other required les. To deploy AWE, follow the steps mentioned below: 1. Browse to https://network.alfresco.com and download the alfresco- enterprise-webeditor-3.3.zip le. Refer to the Alfresco wiki to download the community version: http://wiki.alfresco.com/wiki/ Alfresco_Community_Edition_3.3 . Download from Wow! eBook <www.wowebook.com> Alfresco Surf and Web Editor [ 296 ] 2. Stop your Alfresco server if it's already running. 3. Deploy the awe.war le (which is there in the downloaded ZIP le) into the same application server where Alfresco is running. 4. Restart your Alfresco server. Once you start the Alfresco server, you can navigate to http://localhost:8080/ awe . You will see the login page; provide the same username and password you are using for Alfresco (admin/admin). The rst page you will see will be the metadata page; here you can pass any Alfresco content noderef as itemId parameter and can update the metadata of that content as shown in the following screenshot: Download from Wow! eBook <www.wowebook.com> Chapter 9 [ 297 ] Deploying Web Editor to a Spring Surf Application As mentioned in the introduction of the Alfresco Web Editor, we can also deploy the Web Editor to any Surf Application, which is remote to the Alfresco server. In this section, we will discuss how we can deploy and what are the extra congurations we need to do for using it in a Surf-based application. The Alfresco Web Editor distribution contains all of the required les for conguring it for the Surf-based application. 1. Copy the following les to the WEB-INF/lib directory: ° yui-2.7.0.jar ° spring-webeditor-1.0.0.CI-SNAPSHOT.jar ° alfresco-forms-client-3.3.jar ° alfresco-webeditor-plugin-3.3.jar 2. Conguring the Tag Library: Alfresco Web Editor provides tag library. If you intend to use the tags provided in this library, you need to copy the alfresco-webeditor- taglib-3.3.jar le in the WEB-INF/lib folder. This tag library mainly includes three tags: startTemplate, markContent, and endTemplate. We will discuss about these tags later in this chapter. 3. Conguring the Servlet Filter: If you are using the previously mentioned tags, startTemplate, markContent, and endTemplate will only render the output if you have congured the Web Editor lter in web.xml as follows: <filter> <filter-name>Alfresco Web Editor Filter</filter-name> <description>Enables support for the Alfresco Web Editor</ description> <filter-class>org.alfresco.web.awe.filter.WebEditorFilter</ filterclass> </filter> <filter-mapping> <filter-name>Alfresco Web Editor Filter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> Download from Wow! eBook <www.wowebook.com> Alfresco Surf and Web Editor [ 298 ] You can also set the following two optional parameters to control the contextPath when the URLs to the Web Editor are generated and for the debug mode: <init-param> <param-name>contextPath</param-name> <param-value>/quickstart</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> 4. Conguring Web Editor Forms: The Alfresco Web Editor uses Forms to edit the content and the metadata. By default, it displays the title, description, and content elds. An alternative form can be used by providing a markContent tag with the formId attribute. The node type is presumed to be cm:content. If you have custom types or wish to specify other properties, you can use the form's conguration techniques. Alfresco Web Editor tag library The Alfresco Web Editor tag library consists of three tags: StartTemplate, markContent, and endTemplate. • startTemplate tag Purpose: This tag bootstraps the Web Editor Framework using a script element that executes a Web Script. Place this tag in the head section of the page. Attributes: toolbarLocation This attribute species the location of the toolbar. <awe:startTemplate toolbarLocation="top" /> species the location as top in the window for the toolbar. The possible values are: top, left, and right. This is an optional attribute; the default is top. Download from Wow! eBook <www.wowebook.com> Chapter 9 [ 299 ] • markContent tag Purpose: This tag indicates the editable area on the page. This renders an Edit icon; when clicked, it displays a form to edit the content or metadata or both. Attributes: id: This attribute species the noderef of the Alfresco node. This is a mandatory attribute. title: This attribute species a title for the marked editable area. The same title will be used in quick edit drop–down, form edit pop-up dialog, and so on. This is a mandatory attribute. formId: This attribute species which form will be used when the marked area is edited. This is an optional attribute. nestedMarker: This attribute denes whether the editable area is nested within another HTML tag that represents the content being edited. If set to "true" the whole parent element is highlighted when the area is selected in the quick edit drop-down menu. If set to "false", only the edit icon is highlighted. • endTemplate tag Purpose: This tag initializes the Web Editor with details of all of the marked content areas on the page. It also renders a script element that executes the WEF resources web script, which starts the process of downloading all of the assets required to render and display the toolbar and all congured plugins. Place this tag just before the closing body element Attributes: This tag doesn't have any attribute. Sample Web Application using Alfresco Web Editor When you download the Web Editor distribution, you will nd one sample application, customer.war. This is a simple JSP-based application, which uses the tag library provided by AWE. In this application, we will use the already created content on our custom JSP and will allow users to have an in-context editing facility for that content. Download from Wow! eBook <www.wowebook.com> Alfresco Surf and Web Editor [ 300 ] For example, you can create content in Alfresco. Go to Company Home and a specic space where you want to create the content. Use the Add content functionality to upload any le. Here in this example, I have uploaded one HTML le called Cignex_Merge_News.html to the Alfresco repository. In the noderefs.jsp le located at customer/includes, provide the noderef of the previously created content from the Alfresco Repository as shown next (it is the modied content of noderefs.jsp): <% String mainTextNodeRef = "workspace://SpacesStore/3b12b9a8-8f9f-414d- 8a9d-40047822d1cf"; %> Note that workspace://SpacesStore/3b12b9a8-8f9f-414d- 8a9d-40047822d1cf is the noderef of Alfresco content Cignex_ Merge_News.html. To nd the nodeRef of your content, go to the View Details page of the content and click on Alfresco Node Reference. Also update the body.jsp located at customer/includes accordingly. Once you specify the noderefs as earlier and click on http://localhost:8080/ customer , you can see the screen shown in the following screenshot: Download from Wow! eBook <www.wowebook.com> Chapter 9 [ 301 ] This application has custom tags to display the property and content of the specied noderef. To display any property of the noderef, use a property tag like: <customer:property nodeRef="<%=mainTextNodeRef%>" property="cm:description" /> To display the content of the noderef, use a content tag like: <customer:content nodeRef="<%=mainTextNodeRef%>" /> As discussed earlier, the startTemplate tag will have a toolbarLocation attribute that species the location of the toolbar (the default is "top"). The following screenshot shows the toolbar on the page: You can directly click on the link available in the drop-down here in the toolbar. Another option is the Edit icon that is also available with the content. The following screenshot shows how you can use the in-context editing feature to edit the content. Download from Wow! eBook <www.wowebook.com> . directory: ° yui-2.7.0.jar ° spring-webeditor-1.0.0.CI-SNAPSHOT.jar ° alfresco-forms-client-3.3.jar ° alfresco-webeditor-plugin-3.3.jar 2. Conguring the Tag Library: Alfresco Web Editor provides. Editor</ description> <filter-class>org.alfresco .web. awe.filter.WebEditorFilter</ filterclass> </filter> <filter-mapping> <filter-name>Alfresco Web Editor Filter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> Download. mode: <init-param> <param-name>contextPath</param-name> <param-value>/quickstart</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> 4. Conguring Web Editor Forms: The Alfresco Web Editor uses