Building Portals with InfoGlue

1. Building Portals with InfoGlue Silicon Valley Code Camp 2007 Freeman Jackson INNOVATION FEED INC.

2. What is InfoGlue? • InfoGlue is a Content Management System. • How to manage a company’s or organization’s information internally and externally. • InfoGlue helps organizations manage their information mainly targeted for the Web both internally, in intranets etc., and externally in public websites and extranets.

3. What are the parts? • InfoGlue is a pure Java platform. • The management tool and the public sites are using information from a database. • Two main types of applications and they are the administrative tool and the delivery engine. • The administrative tools are where you manage all aspects of your site. • The delivery engines are specialized in presenting sites to users based on the data managed by the tools.

4. Delivery Engines • By default InfoGlue installs 3 delivery engines. • The first is the working version which presents the working version of the site. • There is also a version called staging or preview which shows the site in a preview mode so the publisher can check that the site will look good after publication. • The last delivery engine is the one that shows the live site to visitors.

5. Sample Medium Setup

6. How does it work • InfoGlue can be text, image, word-files, animations or anything else of informational value. There are no format limitations. • The presentation/site structure part of the InfoGlue system is what handles building • specific websites and it is called the “Structure tool”. • With this tool you manage the site structure and chose which information to put on which pages and with which layout etc. • You can also define links between pages among many other things.

7. Behind the curtain • A very important thing to understand in InfoGlue later on is how a page gets delivered to the user upon request.

9. A simple page component

10. Page Components • A page has at least one component. This component is called the base component. • The second component used is for layout: header, left, middle, right and footer. • The third layer is for the presentation components & bindings.

11. What is a binding? • A binding is what connects a source of information with a component so that the component can use it for presentation or other purposes.

12. Development process • Site/Page analysis • Content types • Template/Component-list

13. Site/Page analysis • What types of information are there and how we can generalize this into information types. • What parts of the pages are there, how can we create a layout system which is both simple and easy to maintain and still dynamic and extendable for users who want that. • What components do we have to build to make it happen? • What complex functionalities are there, how we solve it? • Are there some external systems that should be integrated somehow and if so – how is this best done. • Do we need to create new page types other than the default?

14. Tools • Built in tools You can work with InfoGlue without any external tools at all. All templates/components and everything is there as pure text editable though the normal browser text-editor. • HTML-editors When creating templates/components there is a lot of HTML-coding developers use an external editor like Macromedia Dream Weaver to create the HTML and then transfer it to the tool by copy/paste and then continue working with it there. • Velocity editor For editing the templates and adding velocity-code some developers like to have an editor that can validate their velocity code for them. There are several ones that support this, among them Edit Plus and Eclipse if you use a plug-in. • Easy Edit One of the developers of the platform (Stefan Sik) has developed an applet based tool which lets you work in any editor you want and have the applet sync the text/images to the server when you save. This suits some people and the tool is found on the marketplace.

15. Basics about Page types

16. Management Tool/Type Definitions

17. Fields & Site Node Type Definition

18. The Site Node view & Bindings

19. Components • Composite pattern • Creating a component • Slots • Properties & bindings • Component caching

20. Composite pattern • InfoGlue implements the composite pattern which means that a page can be built up of small fragments. The composite pattern is implemented so that a component can have so called “Slots” in it. • It can have any number of slots and in each slot you can then put 0..n other components. You can have any number of compositions which means there is no limits to what you may do.

21. Creating a component • You create a new component just by creating a new content in the content tool with the content type “HTMLTemplate”. • The old templates from the old way of building are actually just as good components as new ones except that they don’t operate on component-bindings but only on page-bindings if you don’t modify their logic.

22. Slots • A slot is as previously stated a place holder for other components. You don’t need to do much to create a slot. Just add the tag <ig:slot id=”slotname”></ig:slot> to the component html at the position you choose. There are a couple of optional attributes to the slot-tag: inherit, disallowedComponentNames and allowedComponentNames. • Inherit is used to state if the slot should be inherited to pages below (if not overridden) or not. The allowedComponentNames and disallowedComponentNames attribute allows you to specify a list of component names that are allowed not allowed in this slot.

23. Slots • Here is a full example: <ig:slot id="rightColumn" inherit="false" allowedComponentNames="PuffImage,RelatedInfo,Searchform"> </ig:slot>

24. Properties & bindings • One of the main benefits of components is that they can have properties. This means that an instance of the component on one page can have different settings than the same component located on another page. This enables developers to write very dynamic and reusable components if needed. The users can configure their sites rather than having developers helping them all the time. • You define properties in the attribute field “ComponentProperties” in the HTMLTemplatecontent you create for each component and the format is XML. Don’t worry – there is a property editor built in so you don’t have to hack away but it has to be turned on.

25. Properties & bindings • For each property you want to define you have an element like this: • <property name="TargetPage" type="binding" entity="SiteNode"/>

26. Properties & bindings • The “name” is what you reference in you code later to get the property value. The type can be one of the following: • binding – means you want to assign a resource from somewhere. This type requires an extra attribute “entity” which defines what kind of resource it is you wish to bind. Types of bindings: • SiteNode means you wish to bind one or many pages – probably for navigation purposes. • Content bindings are most often because that is how the component knows what information to display on a certain page. • textfield – lets you have short strings assigned to a component. Could be used to state the width of the component or something else you want to be able to define dynamically.

27. Properties & bindings <?xml version="1.0" encoding="UTF-8"?> <properties> <property name="OrderedPages" type="binding" entity="SiteNode" multiple="true"/> <property name="TargetPage" type="binding" entity="SiteNode"/> <property name="Image" type="binding" entity="Content" allowedContentTypeNames="Image,Asset"/> <property name="OrderedImages" type="binding" entity="Content"/ multiple="true"> <property name="Width" type="textfield" /> <property name="Height" type="textfield" /> <property name="AltText" type="textfield" /> </properties>

28. Component caching (Menu e.g.) PropertyName: CacheResult Type: Textfield or dropbox Possible values: "true" / "false" Description: If you set this to "true" the component will be cached until either it expires or a new publication is made. Subcomponents will also be cached with it. PropertyName: UpdateInterval Type: Textfield Possible values: -1 and up. Description: If you have the CacheResult property set to true and you set this to a positive number the components result will be cached for as many milliseconds. PropertyName: CacheKey Type: Textfield Possible values: Works like the page cache key and defaults to the same key. Use this with caution. It's optional.

29. New content with HTMLTemplate.

30. Looks like this

31. The lowest field

32. Component description

33. API • The component example shown above is JSP-based. • You can develop components in JSP, Velocity or Freemarker. • The system recognizes JSP-templates on its own and let’s tomcat compile them. • You can of course write scriptlets which uses the BasicTemplateController as you do in velocity but an even more elegant solution is to use the many taglibs supplied with InfoGlue. • When it comes to Velocity and its close relative Freemarker there are two APIs to be aware of when it comes to components. • You will want to use the $templateLogic-object a lot probably as it contain many good utility methods. Also you want to look into the new templateLogic.componentLogic-object as that contains most of the methods you need for the component specific stuff.

34. Integration • Simple integration via Iframes • Simple integration via embedding <html> <head><title>Embedded</title></head> <body> #set($remoteContent = $templateLogic.getUrlContent(“http://www.w3c.org”)) Here is the W3C content: $remoteContent </body> </html>

35. Advanced integration via custom classes in velocity • If you wish to do embedding of external resources in a more advanced way you will probably want to integrate by using pre made or custom backend logic. A very common situation is when you have some internal or external web service or database you wish to fetch information from but you just want to fetch the data and still let InfoGlue handle the presentation. • The solution is to write custom classes. In InfoGlue this is very simple. As long as you have an empty constructor in your Java class and put it in the InfoGlue class path it will be usable from any template in your site.

36. Advanced integration via custom classes in velocity import java.util.List; public class MyClass { public MyClass() { } public String getHelloWorld() { return “Hello World”; } public List getOrders(String customerNumber) { //Here we could connect to the order database with jdbc and query it // instead return null; } }

37. Advanced integration via custom classes in velocity <html> <head><title>Embedded</title></head> <body> #set($myClass = $templateLogic.getObjectWithName(“MyClass”)) The class says $myClass.getHelloWorld() to us. </body> </html>

38. Portlet development • This section will guide you through creating a simple Hello World portlet and deploying it in InfoGlue. It will not show you how to build portlets with more sophisticated frameworks like Struts or Webwork as that is not a question for InfoGlue.

39. Step 1 – Hello World Portlet import java.io.PrintWriter; import java.io.IOException; import javax.portlet.GenericPortlet; import javax.portlet.PortletException; import javax.portlet.RenderRequest; import javax.portlet.RenderResponse; /** * HelloWorld Portlet */ public class HelloPortlet extends GenericPortlet { public void doView(RenderRequest req, RenderResponse res) throws PortletException, IOException { res.setContentType("text/html"); PrintWriter out = res.getWriter(); out.println("<h1>Hello World</h1>"); } } The code needs portlet-api-1.0.jar in its class path to compile.

40. Step 2 - Create a portlet.xml <portlet-app xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd" version="1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd http://java.sun.com/xml/ns/portlet/portlet-app_1_0.xsd"> <portlet> <description>Hello Portlet</description> <portlet-name>HelloPortlet</portlet-name> <display-name>Hello Portlet</display-name> <portlet-class>org.infoglue.portlets.HelloPortlet</portlet-class> <expiration-cache>-1</expiration-cache> <supports> <mime-type>text/html</mime-type> <portlet-mode>VIEW</portlet-mode> </supports> <portlet-info> <title>Hello Portlet</title> <short-title>Hello Portlet</short-title> <keywords>Hello,Portlet</keywords> </portlet-info> </portlet> </portlet-app>

41. Step 3 - Create a web.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <display-name>Hello Portlet</display-name> <servlet> <servlet-name>HelloPortlet</servlet-name> <display-name>HelloPortlet Wrapper</display-name> <description>Hello Portlet Wrapper</description> <servlet-class>org.apache.pluto.core.PortletServlet</servlet-class> <init-param> <param-name>portlet-guid</param-name> <param-value>Hello.HelloPortlet</param-value> </init-param> <init-param> <param-name>portlet-class</param-name> <param-value>org.infoglue.portlets.HelloPortlet</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>HelloPortlet</servlet-name> <url-pattern>/HelloPortlet/*</url-pattern> </servlet-mapping> </web-app>

42. Step 4 – Package the portlet • Create a war-file with the following contents. • HelloPortlet.war • -- web.xml • -- portlet.xml • -- WEB-INF • -- classes • -- org • -- infoglue • -- portlets • -- HelloPortlet.class

43. Step 5 – Deploy the portlet in InfoGlue

44. Step 5 – Deploy the portlet in InfoGlue

45. Step 6 – Use the portlet on a page though a component. #set($portletName = "HelloPortlet.HelloPortlet") #set($calendarPortlet = $portalLogic.getPortletWindow($portletName, "p$templateLogic.componentLogic.infoGlueComponent.id")) $calendarPortlet.setAttribute("componentId", $templateLogic.componentLogic.infoGlueComponent.id) $calendarPortlet.setAttribute("languageCode", $templateLogic.locale.language) $calendarPortlet.setAttribute("siteNodeId", $templateLogic.siteNodeId) $calendarPortlet.render() Restart tomcat

46. The End Freeman Jackson InnovationFeed.com 1230 Market Street, #252 San Francisco, CA 94102 510-575-4124 freeman@innovationfeed.com