Presentation from OpenCms Days 2014. Techem maintains about 13 international customer portals with OpenCms. These portals are based on a cluster solution which provides automated content creation including navigation and permissions. The business applications are integrated as portlets in a responsive web design provided by the OpenCms environment. In this session Torsten talks about how he and his colleagues at Techem handle localization, business logic and content distribution for their international customer portals. A strong focus in their development process is time to market and the need for reusability. With more than 3,000 employees, Techem is the market leader in Germany and in further European countries for the management and billing of energy and water in real estate. Sustainable reduction of energy and water consumption and saving our customers' time and costs is the goal we have set ourselves.

1. How Techem handles
international customer portals
Techem.
The world of intelligent energy
and water saving solutions

2. About me: Torsten Berger
Senior Java Developer
Techem Energy Services GmbH
I am using OpenCms for the development of our
customer portals with business applications since
2009.
2 The world of intelligent energy and water saving solutions

3. Our task: to use energy wisely
The Situation
Reducing climate harming CO2 emissions worldwide is a necessity
for us all. Resources, such as oil, gas and water, are in ever
shortening supply and are becoming increasingly expensive.
The challenge
Saving energy and reducing water consumption consciously and
intelligently.
The Techem solution
Sustainable, comprehensive energy and water management –
bringing benefits for the environment and for our customers.
3 The world of intelligent energy and water saving solutions

4. Techem, your partner full of energy
Techem in figures
• Successfully in the market for over 60 years
• Service provider for almost ten million apartments
• More than 47.2 million measuring devices in use
• World market leader with over 25.4 million
radio measuring devices
Save energy and water with Techem
• 22 billion kilowatt­hours
and 6.1 million tons of
CO2 thanks to Techem energy saving solutions
• Worldwide 37 million cubic metres less water
consumption per year with technology from Techem
Source: Figures based on the Felsmann study (billing savings = approx. 20 %) and on the basis of the current Techem 2013 energy reference data.
4 The world of intelligent energy and water saving solutions

5. We are there for you when you need us
Techem is a global leader in the provision of management solutions
and billing of energy and water in properties.
Techem is there for its customers in more than 20 countries.
With almost 100 locations, we have a blanket presence across the German
domestic market.
In total, over 3.200 Techem employees
are committed to providing the best
possible service for our customers
­and
for the environment.
5 The world of intelligent energy and water saving solutions

6. Online Services: the Techem Portal
All information with a mouse click
• Available around the clock
• More flexibility, better overview
• Lower administrative costs,
less paperwork
Convenient solutions
• Billing Online, Archive Online
• Info Center, Online Orders
• Techem Monitoring
• adapterm Cockpit
6 The world of intelligent energy and water saving solutions

7. Online Services: the Techem Portal
7 The world of intelligent energy and water saving solutions

8. Portlet: Integration in OpenCms
8
Portlet space

9. Portlet: Style in OpenCms
Style information provided by OpenCms Modul
• Portlets do not have separate css files anymore
• OpenCms Pages and Portlets use the same css files
• Portlet Showcase with all used components get styled not the portlet
• Styling is done external by an agency
9 The world of intelligent energy and water saving solutions

10. Portlet for OpenCms: Where do I get it
https://github.com/eonas
• opencmsinstaller
• opencmsportaldriver
• addressbookportlet
• opencmsportal
• https://github.com/eonas/opencmsportal/wiki
10 The world of intelligent energy and water saving solutions

11. TMAC for Portlets: TranslationManangementAndConfiguration
Default German Country Languages Default English
Translations
Application
Country
Configuration
e.g. Address Default Configuration e.g. columns
11 The world of intelligent energy and water saving solutions

12. Hardware: Architectur New <> Old
12 The world of intelligent energy and water saving solutions
OpenCMS
Master
OpenCMS
Slave1
OpenCMS
Slave2
Proxy1
Proxy2
Portal User
OCEE-Cluster
Loadbalancer
https / Firewall
LDAP Server
Old World
• Country = seperate Cluster
New World
• Country = Site in Cluster

13. Scripting: Rhino <> OpenCmsShell
automated import / export Do some XML Modifications
OpenCmsShell
22 Countries / Sites
Rhino = Javascript support in Java 6
Provides full access back into OpenCms Java Code
13 The world of intelligent energy and water saving solutions

14. Scripting: Enable OpenCms for JavaScript
<%@ page import="org.opencms.file.CmsObject" %><%@ page import="org.opencms.jsp.CmsJspBean" %><%@ page import="javax.script.ScriptEngine" %><%@
page import="javax.script.ScriptEngineManager" %><%@ page import="java.io.ByteArrayOutputStream" %><%@ page import="java.io.PrintWriter" %><%@page
buffer="none" session="false" %><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %><%@ taglib prefix="cms" uri="http://www.opencms.org/taglib/cms"
%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
ServletInputStream inputStream = request.getInputStream();
ByteArrayOutputStream buffer = new ByteArrayOutputStream();
byte[] bb = new byte[1024];
int len;
while ( (len = inputStream.read(bb)) != ­1
) {
buffer.write(bb, 0, len);
}
inputStream.close();
String script = new String(buffer.toByteArray(), "utf­8");
CmsJspBean cmsBean = new CmsJspBean();
cmsBean.init(pageContext, request, response);
final CmsObject cmsobject = cmsBean.getCmsObject();
response.setContentType("text/plain");
PrintWriter writer = response.getWriter();
ScriptEngineManager factory = new ScriptEngineManager();
ScriptEngine engine = factory.getEngineByName("JavaScript");
engine.getContext().setWriter(writer);
engine.getContext().setErrorWriter(writer);
engine.put("cms", cmsBean);
engine.put("cmsObject", cmsobject);
writer.write("Startn");
try {
engine.eval(script);
} catch ( Exception ex ) {
ex.printStackTrace(writer);
}
writer.write("Stopn");
writer.close();
%>
• This Jsp e.g. „/system/script/javascript.jsp“ in
OpenCms executes the transfered JavaScript in an
OpenCms Context.
• Lets see next page for how to call this file.
14

15. Scripting: The other side
15
package de.eonas.opencms.remotescript;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URL;
import java.net.URLConnection;
import org.apache.commons.io.IOUtils;
public class Client {
public static void main(String[] args) throws Exception {
Client client = new Client();
client.execute();
}
public void execute() throws IOException {
URL u = new URL("http://localhost:8080/cms/system/script/javascript.jsp");
URLConnection urlConnection = u.openConnection();
urlConnection.addRequestProperty("Content­Type",
"text/plain");
urlConnection.setDoInput(true);
urlConnection.setDoOutput(true);
urlConnection.connect();
OutputStream outputStream = urlConnection.getOutputStream();
copy(outputStream, "/variablen.js");
copy(outputStream, "/functions.js");
copy(outputStream, "/do.js");
outputStream.close();
InputStream inputStream = urlConnection.getInputStream();
IOUtils.copy(inputStream, System.out);
}
private void copy(OutputStream outputStream, String file) throws IOException {
InputStream resourceAsStream = this.getClass().getResourceAsStream(file);
IOUtils.copy(resourceAsStream, outputStream);
resourceAsStream.close();
}
}
• This Javacode transfers the Javascript files via post
request to OpenCms.
• Lets see next page for the new functionality via the
included JavaScript.

16. Scripting: JavaScript Example to execute
Time for a Demo....
• Use content template „/shared/demo“
• Create a new country with different locale trees
• Customise properties on locale subsidemap
• Switch „target“in containerpages from shared
elements to new country elements
• Customise Property Navigationtext
• Customise Property Description
• And many more posibilities
• Create Permissions for new Country
• Make Sibling to real file
...
login('Admin', 'admin');
project('Offline');
var siteLand = '/sites/kp_demo';
var sprachen = ['en', 'de', 'da'];
copyFromShared(siteLand, sprachen, true);
customizeNavTextProperty(siteLand, 'en');
customizeDescriptionProperty(siteLand, 'en');
...
16 The world of intelligent energy and water saving solutions

17. Thank You
Questions ???
17 The world of intelligent energy and water saving solutions