redesign and improvement of knowledge management...

Final Degree Project

Redesign and Improvement ofKnowledge Management Software

Studies: Telecommunication Engineering

Author: Diana Canto Estany

Tutor: Professor LIU Fuqiang

Supervisor: Professor Marcel Fernandez

Date: November 2013

Contents

1 Introduction 8

2 Objectives 10

3 OpenKM 12

3.1 Developer Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.2 OpenKM source code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3.2.1 Admin pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.2.2 Fronted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.2.3 Login pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.2.4 Web-Inf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4 New Design and Tools 18

4.1 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.1.1 Colour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.1.2 Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.1.3 Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.1.4 Shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.2 Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.2.1 Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.2.2 Select all . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4.2.3 Sort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

4.2.4 Pop-up menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

5 Workflow 29

1

Redesign and Improvement of KM Software

5.1 Basic Workflow elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

5.1.1 Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

5.1.2 Transactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

5.1.3 Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

5.2 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

5.2.1 Form elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

5.3 Tasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

5.4 Mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

5.5 Join and Fork . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

5.6 Advanced simulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

6 Task management desktop 39

6.1 Novelties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

6.1.1 Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

6.1.2 Not workflow related tasks . . . . . . . . . . . . . . . . . . . . . . . 43

6.1.3 Subtasks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

6.1.4 Other details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

7 Conclusions 45

8 Future Work 47

A OpenKM Specifications 48

B Courses 50

C Platform final design 51

D CSS files 53

E JSP files 83

F Invoice Example - Figures 89

G Modified Files 92

2

List of Figures

4.1 Old colour design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.2 New colour design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.3 Hovered and non-hovered button . . . . . . . . . . . . . . . . . . . . . . . 20

4.4 Login page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.5 Code for the Select All button . . . . . . . . . . . . . . . . . . . . . . . . . 22

4.6 Profile edit menu with ”select all” buttons . . . . . . . . . . . . . . . . . . 23

4.7 Code for sorting tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

4.8 User list menu listed alphabetically A-Z and Z-A . . . . . . . . . . . . . . 24

4.9 Pop-up menu to create a new user . . . . . . . . . . . . . . . . . . . . . . . 25

4.10 Code to display the pop-up menu . . . . . . . . . . . . . . . . . . . . . . . 26

4.11 Ajax functions for the pop-up menu . . . . . . . . . . . . . . . . . . . . . . 27

5.1 Workflow form example source code . . . . . . . . . . . . . . . . . . . . . . 31

5.2 Workflow form example render . . . . . . . . . . . . . . . . . . . . . . . . . 32

5.3 Use of workflow process instance objects . . . . . . . . . . . . . . . . . . . 32

5.4 Form for the reception of a document . . . . . . . . . . . . . . . . . . . . . 34

5.5 Task properties setting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

5.6 Task properties code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

5.7 Example of the use of a MAIL node . . . . . . . . . . . . . . . . . . . . . . 36

5.8 Workflow using FORK and JOIN nodes . . . . . . . . . . . . . . . . . . . . 37

5.9 Image file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

6.1 Eisenhower matrix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

6.2 Create task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

3


6.3 View Task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

C.1 Main Desktop - Old Design . . . . . . . . . . . . . . . . . . . . . . . . . . 51

C.2 Main Desktop - New Design . . . . . . . . . . . . . . . . . . . . . . . . . . 52

F.1 Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

F.2 Source code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

F.3 Decision handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

F.4 Action handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

4


RESUM

La gestio del coneixement ha esdevingut una qestio de gran importancia per a les empresesi entitats aquests ultims 20 anys. Aixı doncs, adaptacions en la tecnologia, com bases dedades, sistemes experts, repositoris de coneixement, sistemes de suport per la presa dedecisions en grup, intranets i sistemes digitals de suport pel treball en equip han sigutintroduıdes per tal de sumar esforos en la tasca de la gestio de coneixement.

L’OpenKM es una plataforma basada en software lliure que ens ajuda a gestionar demanera efectiva la intelligencia disponible als nostres recursos. Tambe inclou una eina degestio de tasques que permet als administradors fer un seguiment exhaustiu de les tasquesassignades als diferents usuaris. Aixı doncs, en aquets projecte el codi font de l’OpenKMes modificat per tal d’afegir noves capacitats i renovar la imatge de la plataforma. A mesa mes, es proposa un nou escriptori pel gestor de tasques amb la finalitat de permetrenoves funcionalitats i ajudar als usuaris a millorar les seves habilitats en la gestio deltemps.

5


RESUMEN

La gestion del conocimiento ha llegado a ser una cuestion de gran importancia paraempresas y entidades durante estos ultimos 20 anos. En consecuencia, adaptaciones en latecnologıa, como bases de datos, sistemas expertos, repositorios de conocimiento, sistemasde apoyo en la toma de decisiones en grupo, intranets y sistemas digitales de apoyo parael trabajo en equipo han sido introducidas con el objetivo de sumar esfuerzos en la tareade la gestion del conocimiento.

OpenKM es una plataforma basada en software libre que nos ayuda a gestionar de maneraefectiva la inteligencia disponible en nuestros recursos. Tambien incluye una herramientade gestion de tareas que permite a los administradores hacer un seguimiento exhaustivode las tareas asignadas a los usuarios. Ası pues, en este proyecto el codigo fuente deOpenKM es modificado con tal de conseguir nuevas capacidades y de renovar la imagende la plataforma. Ademas, se propone un nuevo escritorio para el gestor de tareas con elfin de permitir nuevas funcionalidades y ayudar a los usuarios a mejorar sus habilidadesen la gestion del tiempo.

6


ABSTRACT

Knowledge management has become a main issue for companies and institutions in thelast twenty years. Thus, specific adaptations of technologies such as knowledge bases,expert systems, knowledge repositories, group decision support systems, intranets, andcomputer-supported cooperative work have been introduced to further enhance knowledgemanagement efforts.

OpenKM is a free software based platform which helps to efficiently manage the intelli-gence of the available resources. Moreover, it includes a task management system whichallows administrators to keep track of the tasks assigned to any users. However, theplatform does not include all the functionalities needed to performance all desirable tasksfrom a user point of view. Thus, in this project the OpenKM source code is modified inorder to add new capabilities and renew the image of the platform. Furthermore, a newtask management desktop is proposed in order to allow new functionalities and help theusers improve their time management skills.

7

Chapter 1

Introduction

Knowledge management efforts have a long history, to include on-the-job discussions,formal apprenticeship, discussion forums, corporate libraries, professional training andmentoring programs. More recently, with increased use of computers in the second half ofthe 20th century, new technologies development has made that companies and institutionsfocus their efforts on handling a huge amount of information. Few years ago, the focus wason obtaining this information. Over time, the focus shifted to digitalizing and buildingthe infrastructure to share this documentation around the world. Nowadays, the focus ison finding the best way of managing and classifying all the documents, video and othersources of knowledge to make them easily accessible.

But knowledge management is not the only problem that concerns institutions and com-panies. The concept of ”soft skills” has appeared as the future personal attributes thatwill make the difference among hundreds of well-prepared professionals. Unlike hard skills,which are about a person’s skill set and ability to perform a certain type of task or activity,soft skills relate to a person’s ability to interact effectively with co-workers and customersand are broadly applicable both in and outside the workplace. Thus, it has appeared tobe a key element on making the difference among rival companies, as well.

Soft skills enhance an individual’s interactions, job performance and career prospectsand are an important part of someone’s individual contribution to the success of anorganization. In consequence, new software and tools are being developed and furtherimproved with the aim of strengthening these attributes. Nevertheless, the concept ofsoft skills is hugely broad including proficiencies such as communication skills, conflictsolving, personal effectiveness, strategic thinking and team building, to name a few.

Directly related to personal effectiveness, concepts like task management and time man-agement can be found. These two attributes can be easily tracked in a digital way pro-viding the user with tools that will help him analyse their amount of work, their availabletime and the way it is being spent. Task management may form part of project manage-ment and process management and can serve as the foundation for efficient workflow in

8


an organisation. Therefore, we can have a positive impact on an individual’s soft skillsand, by extension, to its performance in its workplace.

In this project the use of specific software that combines both knowledge and task man-agement tools is proposed. OpenKM consists of 4 desktops: the main one, where all thedocumentation is accessible; the searcher, where different kinds of criteria can be used tofind the desired information; the dashboard, where the user can keep track of its tasks andthe new documentation uploaded to the system; and the administration desktop, wherethe administration can create users and profiles, start and assign tasks and define otherconfiguration properties.

The focus of this project is to improve the platform in order to make it more comfort-able, dynamic and intuitive. Therefore, the source code has been modified allowing newfunctionalities such as sorting lists or having pop-up menus and the image of the platformhas been renewed. Furthermore, a new task management desktop has been proposed inorder to allow the specification of tasks’ priority and deadline, as well as including in thesystem tasks not directly assigned by the administrator.

9

Chapter 2

Objectives

In this project, the use of a particular knowledge management platform is proposed. Themain objective of this project is then to improve this platform and provide its users withbetter tools. Thus, the open source platform is modified to implement and evaluate thosechanges and new functionalities.

This project is specifically focused on a knowledge management platform which includes,as well, task management tools. Besides being a platform to storage and find documentsin an easy, fast and tidy way, it is also a vehicle of communication between administratorsand normal users. Administrators are able to perform a great amount of actions such asassigning tasks to the rest of users and keeping track of the evolution of those tasks.

To achieve this objectives (improve the platform and provide its users with better tools),the open source code will be modified in order to make the platform more comfortable,dynamic and intuitive. Therefore, in this project the open source code of OpenKM willbe modified in order to add some new capabilities to the OpenKM platform and makepossible a new set of actions both for administrators and normal users.

Thus, one of the objectives of this project is to modify the OpenKM platform in order toachieve the following:

• Propose a new and fresh design for the whole platform

• Increase the efficiency and efficacy in the users’ performance of tasks by adding toolsto both sort and re-use the available information

• Increase the interactivity user-platform both through the design and the new func-tionalities

Once the code is modified, the platform will be installed in a server in conjunction withanother platform called OpenMeetings to provide the customer with a full service.

10


Furthermore, the possibilities provided but the workflows (assignment of tasks) and thewhole task management system will be analysed and tested, setting the bases to un-derstand what can be done and how and identify its weaknesses and the points to beimproved.

Finally, a new desktop for the OpenKM platform will be proposed to be added, having ahigher impact in task and time management and providing the users with enough toolsto manage their tasks according to its importance and its deadline, as well as includingin the system tasks without requiring the intervention of an administrator.

11

Chapter 3

OpenKM

With the pass of the years different tools to facilitate knowledge management have ap-peared in the market. However, it is difficult to find free software technologies able tofulfil the user expectations. OpenKM is focused on creating an Open Source ElectronicDocument Management System, that due to its characteristics can be used by big com-panies as well as by small ones as a useful tool in processing knowledge management,providing a more flexible and cost effective alternative to other proprietary applications.

The use of a Knowledge Management System in a company or institution helps to manage,more efficiently, the intelligence of the available resources of this company; this impliesan increase of productivity in the short term. Through these systems the information, aswell as the knowledge generated within the organization, can be both globally accessed.

Technologically speaking, a document management system has been created to provide theknowledge management that will use free software standards and technologies. OpenKMprovides the solution to:

• Control the growing volume of information to be managed

• End the diversification of information storage sources

• Prevent the duplication of information

• Obtain valid information through the control of document versions

• Reduce time and resources used in locating information

• Avoid knowledge leaks or wrongful access by users

• Restrict non-authorized users access to the information

Through the OpenKM system, relevant and useful information can be accessed and foundin the least possible time to resolve problems and make decisions. OpenKM helps to

12


improve corporation processes, integrating common tasks (and interrelated tasks) intoone single tool and permitting the different departments of the organization controlledand supervised parameterized access to the information.

Given that this is a project based on free software, all the tools and results emergingfrom the project are available to the general public, with usage rights free of charge undera GNU GPL version 2 licence. The OpenKM software can be downloaded quite easily.OpenKM is based on J2EE technology and the Apache Tomcat so it can be installed andrun on various platforms.

Therefore, the aim of this project strives on improving the available software by addingfeatures and flexibility and trying to fulfil the user necessities as much as possible.

3.1 Developer Guide

The very first step of this project focused on both installing OpenKM and downloadingthe source code in order to proceed with the planned improvements and modifications.The developer environment can be set in any operating system (Linux, Windows, etc.)since it is a multi-platform system, but Linux is recommended, because it is what it isbeing used.

In the OpenKM wiki [1] there is information about how to install OpenKM for developers.The requirements for OpenKM 4.0 and 5.0 are the following:

Software Site

Maven maven.apache.org/Eclipse Juno eclipse.org/juno/Subversion eclipse plugin subclipse.tigris.orgMaven to eclipse plugin m2eclipse.sonatype.orgJava JDK 1.6 oracle.com/technetwork/java/javase/downloads/

The complete list of OpenKM specifications is available in the appendix A.

On one hand, if our objective is to modify the source code of OpenKM we need to importthis code. The first thing to do is installing Eclipse and Java. Then, Eclipse needs to beexecuted and using Eclipse Market Place, Maven support can be installed as well. Oncethis is finished, support for Subversion should be installed and then we can proceed withthe OpenKM checkout.

This process will take some time because it will download all the libraries needed byOpenKM. After downloading the source code, some project properties will have to bechanged in order to remove the errors got during the process.

13


The built will have to be configured selecting the project, writing the goals, setting thevirtual machine memory parameters and configuring Java. Finally, the first compilationcan be launched and an OpenKM folder will be automatically created into the Targetfolder in our project.

On the other hand, OpenKM has to be installed in our computer so we can use it andcheck the changes we implement. Once we have OpenKM Community (which comes withTomcat and OpenKM application) installed, we need to remove OpenKM.war folder andmake a link from the OpenKM Target folder to the Tomcat folder. With this actionwe will be able to modify the source code in our project in Eclipse and see the changesdirectly in the OpenKM installed in our computer.

Last but not least, Tomcat server has to be configured in Eclipse so we are finally able toaccess our local OpenKM installation.

Besides the purely knowledge management tools that OpenKM is offering, there is anothertool which will be also a focus of this project. This tool is more related to task managementand we will refer to it as workflow. Workflow allows us to define tasks, assign them toour OpenKM users and have a complete follow-up of the process, starting when the taskis assigned and finishing when the task has been executed.

To be able to use and develop workflow, jBPM3 should be installed as well. The informa-tion available in the OpenKM wiki [1] urges to install JBoss Developer Studio as the basedeveloping platform and then download, install and configure jBPM3 in JBoss DeveloperStudio. However, jBPM3 can be also installed and configured easily in Eclipse and thisis how this project has been done.

Once having both the OpenKM source code and jBPM3 we have the possibility to developworkflow using some OpenKM classes to make API calls. This aspect will be furtherdetailed in section 5.

3.2 OpenKM source code

When going through the OpenKM source code 4 clearly distinguishable sections are found:

• Admin: that includes the part of the platform that is only accessible for adminusers.

• Fronted: that encompasses the main desktop as well as the search and the dashboardpanels.

• Login page: that includes the login desktop and the error pages in case there is anerror in the login information.

14


• Web-Inf: were all the OpenKM classes and libraries needed are placed.

As it is explained in the following sections, the source code uses different languages (Java,HTML, CSS, jQuery). Therefore, to be able to understand and modify those files I tooksome online courses to increase my knowledge and have a better impact in the platform.The list of the aforementioned courses can be find in the annex B.

3.2.1 Admin pages

The administation desktop is quite broad and offers a wide range of possibilities:

• Activity log: any operation done by OpenKM users are automatically audited in thedatabase. This is a complete audit tracking log for any operation done in OpenKM.

• Automation rules: for adding some rules related to the actions that are performed,such as specifying a new path where documents will be created.

• Configuration: where the administrator can see the parameters that have beenloaded during OpenKM start up and ensure that changes in OpenKM.cfg have beenloaded correctly.

• Crontab: with this feature you can create scheduled tasks in a easy way. In thispage you can see the already registered tasks. The last start and last stop columnsshow the last time a task was executed. If you want to see the output of the script,you can set an email and you will be notified every time the task is executed.

• Database query: using database query, administrators can make queries on OpenKMdatabases. The query type can be JDBC or Hibernate.

• Languages: offers the possibility of adding new languages to the platform. Nowadaysit is only available in English and Spanish.

• Metadata: where the administrator can have an overview of the registered groupproperties. New metadata properties can be added as well.

• Mime types: for creating, editing and removing mime types.

• Profiles: each user must be assigned a profile. A profile is a definition of general con-figuration parameters of the UI interface, available extensions, and other OpenKMfeatures that allows for customization of the end user interface.

• Reports: for creating and using own Jasper Reports.

• Repository export: to export all the folder structures and documents to a serverdisk.

15


• Repository import: to import folder structure to OpenKM server.

• Scripting: enables administrators to execute some BeanShell scripts in folders, firedon every notified event.

• Statistics: to have an overview about the repository size and its distribution: doc-uments by context, documents size by context, folders by context, memory usageand disk usage.

• Thesaurus: where the administrator can start thesaurus folder tree creation.

• Users: creating, editing and deleting the accounts for the users of the platform.

• Utilities: from this panel some advanced administrator utilities can be accessed.

• Workflow: listing of the workflows available and its state if they have been assignedto any user.

These parts of the platform are mainly formed by several JSP files and some CSS and JSfiles which provide the desired format and functions.

JavaServer Pages (JSP) is a technology that helps software developers create dynamicallygenerated web pages based on HTML, XML, or other document types. JSP allows Javacode and certain pre-defined actions to be interleaved with static web mark-up content,with the resulting page being compiled and executed on the server to deliver a document.

CSS files combined to the XHTML tags in the JSP files define the format of the platform,thus those will be the target of section 4.1.

3.2.2 Fronted

The index.jsp file together with some other HTML and CSS files defines the skeleton ofthe platform. This includes the main desktop, the search panel and the dashboard panel.

The main desktop shows the different folders and documents available to the user. Onthis desktop documents can be previewed, downloaded, uploaded, deleted, etc. Users cansubscribe to the different documents so every time a modification is made, these userswill be notified by e-mail. OpenKM also allows users to synchronize their e-mail accountwith the platform, so they can have access to their inbox directly from OpenKM, thatstorages mailing in folders according to date of reception.

On the search panel users can look for documents. The platform allows several waysof performing this task: by the document’s name, key words assigned to the differentdocuments, folder, type of document, date, users, among other. Enquiries can be savedin order to perform future searches in a faster way.

16


On the dashboard panel a user can have an overview of the updates on the informationavailable in the system (last documents uploaded or modified) and also of the tasks(workflows) he is involved in. It is also the place where users will be actually able toaccomplish their tasks and access their e-mail inbox.

3.2.3 Login pages

This section of the platform is formed by some JSP files which configure the login desktopof the system as well as the error messages in case of wrong login information.

3.2.4 Web-Inf

Web-Inf counts with more than 2000 files being mainly OpenKM classes. These classesare files containing Java code that can be used in workflows or in extensions which enableto add features at OpenKM Core level.

17

Chapter 4

New Design and Tools

As was previously mentioned, the main objective of this project is to propose the use ofOpenKM as a knowledge management platform. That means providing the future userswith a platform that fulfils their needs in terms of design, tools and possibilities.

Therefore, a new design for the whole platform has been created and new tools to increasethe efficiency and efficacy in the users’ performance of tasks have been added to the system.All these aspects will be analysed and described in detail in this chapter.

4.1 Design

The layout of a webpage or a program is the very first thing a user sees when using it.How things look, where they are placed, how they are organised are definitely aspectswhich will either make our user feel comfortable and willing to benefit from the tools weare offering or just disliking our platform and using it only when it is due to.

Knowledge management is a practice which requires an easy but constant maintenance.If we want our company to have a good document management system there is a need tofacilitate the use of the platform, as everyone in the company, no matter which positionholds, should be both using and contributing to the system. Taking into account allthese facts, some changes in the platform’s design have been made. The aforementionedchanges include:

• Colour

• Interactivity

• Size

• Shape

18


To be able to implement these changes some code has been added to the CSS files.Cascading Style Sheets (CSS) is a style sheet language used for describing the presentationsemantics (the look and formatting) of a document written in a mark-up language. Itsmost common application is to style web pages written in HTML and XHTML, but thelanguage can also be applied to any kind of XML document.

The final version of these files can be found in the section D.

4.1.1 Colour

Colour plays a vitally important role in the world in which we live. Colour can swaythinking, change actions and cause reactions. It can irritate or soothe your eyes, raise yourblood pressure or suppress your appetite. Colour is a powerful form of communication.For instance red means ”stop” and green means ”go”, and this is something not just tokeep in mind but to take advantage of when designing our platform.

One more thing to take into account is that colour associations and meanings vary fromculture to culture. Mixing, combining certain colours can boost specific culture, religionor gender associations, while avoiding certain colours and combinations of colours canneutralise inherent negative cultural connotations.

OpenKM platform was basically grey as you can see in figure 4.1. Different tones ofgrey were used in its elements and only green and red were present when a message wasdisplayed after human interaction.

In Europe and America, grey is the colour most associated with boredom, solitude andemptiness. Grey is the colour of conformity- not having any personality of its own. Then,if we intend users to usually contribute to the system proactively, we should avoid thiskind of associations.

As it is shown in figure 4.2, the primary colour for this new version of OpenKM is blue.Blue is the favourite colour of more than half of the world’s people - it is the colour leastdisliked by most cultures and, last but not least, OpenKM logo is also blue, so everythingstays as a whole.

Figure 4.1: Old colour design

19


Figure 4.2: New colour design

4.1.2 Interactivity

Some basic changes in the CSS and HTML code have been made to allow some interactionwith the user:

• Submitting buttons change their colour when the user hovers over them.

• The text in the headers of the columns which can be sorted is underlined when auser hovers over it.

• The cursor changes to pointer every time that hovers an element containing a linkor allowing an action.

You can see one of these examples in the figure bellow.

(a) Normal button (b) Button when a user hovers over it

Figure 4.3: Hovered and non-hovered button

4.1.3 Size

Blue is sharply refracted by the eyes. This causes the lens to flatten and to push the blueimage back. We perceive that blue areas are receding and smaller. In addition, the size ofthe text in the platform was rather small. Therefore, the font size was slightly increasedin most of menus and desktops.

4.1.4 Shape

With the aim of having a little bit more organic design, some buttons, tables and otherelements have had their corners slightly rounded.

20


The font style has also been changed achieving a less typewriter style.

(a) Old login page (b) New login page

Figure 4.4: Login page

4.2 Tools

As it was mentioned in the section 3.2.1, the administration desktop is one of the mainparts of the OpenKM software, being actually the one containing more pages. That iswhy the aim of this section will be to improve the admin pages adding some tools to them.

4.2.1 Usability

While getting to know OpenKM and using its software, some basic needed improvementsin terms of usability could be noticed. Usability is the ease of use and learnability of ahuman-made object. Usability evaluation allows assessing whether our product is:

• Efficient enough: are users able to carry out their task while expending reasonableresources such as time, cognitive or physical demand?

• Effective enough: can users complete the tasks they are supposed to perform withthe tool? Is their performance complete and accurate?

• Sufficiently satisfactory for the users: what is the users attitude towards thesystem? Do they experience discomfort?

Although there are a variety of usability evaluation methods which include all stages ofdesign and development, from product definition to final design modifications, this project

21


is based in the lack of resources or features someone who used the software for the firsttime noticed. I focused in three of them which will be detailed below.

4.2.2 Select all

When the administrator wanted to create a new profile for a new user, the menu forcreating this new profile offered 19 sub-menus with a total of 126 options and there wasno way to select more than one option at the same time.

With the aim of allowing the administrator to accomplish its intended tasks at its desiredspeed, the possibility of selecting all the fields related to each sub-menu has been added.This way we strive on giving the administrator as much flexibility as possible. In thefigure 4.5 you can see the code related to this function. The code provided by OpenKMworked differently for two possible situations:

1. Creating a new profile: none of the checkboxes is checked.

2. Editing an existing profile: some of the checkboxes are checked.

That is why the added function foresees these two cases and acts accordingly, eitherselecting all the checkboxes in a submenu or deselecting them.

Figure 4.5: Code for the Select All button

As all the sub-menus are loaded in the same page, the only detail to take into considerationis that every sub-menu needs to have its own id, so they don’t interfere between each other.

This block of code and the corresponding modifications to the source code (such as mod-ifications in the HTML/CSS documents) has been added to the following pages:

22


profile chat.jsp profile dashboard.jsp profile filebrowser.jspprofile menu.jsp profile menu edit.jsp profile menu bookmark.jspprofile menu file.jsp profile menu help.jsp profile menu tool.jspprofile tab.jsp profile tab folder.jsp profile tab documentl.jspprofile tab mail.jsp profile toolbar profile stacks.jsp

Figure 4.6: Profile edit menu with ”select all” buttons

4.2.3 Sort

When having a table with several columns displaying a great amount of information it isuseful for the user to have the possibility of sorting the mentioned table by its differentcolumns. This feature has been added to the different tables in the administration menuusing a jQuery function called tablesorter().

Although this is an existing function, some adaptation to our specific tables had to bedone. As it can be seen in the figure 4.7, there are three blocks of code inside tablesorter().The first one manages the images, like in the tables were there is a column indicating whichusers are active or inactive. In this case, when an image is detected, the code goes throughtextExtraction and uses the src attribute of the image as the reference to sort the column.

The second block, which corresponds to header, manages the columns that should notoffer the possibility to be sorted, like columns having the same information in every row.

header also allows us to have links in the header of our table. That way when the user clickson this specific header, instead of sorting the column any other action can be performed

23


(for instance, displaying a menu).

Finally, the third block uses the widget zebra to maintain the bicolour design of our table.Without this widget, the colour would stay stuck at its row. That way when a columnwould be sorted, each row would move together with its colour and we could have severalrows with the same colour displayed one after each other.

Figure 4.7: Code for sorting tables

The following image shows the profile list page both listed alphabetically from A to Z andfrom Z to A.

Figure 4.8: User list menu listed alphabetically A-Z and Z-A


24


activity log.jsp administration rule list.jsp crontab list.jsplanguage list.jsp logged users.jsp message list.jspprocess definition list.jsp profile list.jsp report list.jsprole list.jsp user list.jsp

4.2.4 Pop-up menu

Every time an administrator wanted to edit or create a user or modify any mime typeor mail configurations, the edit/create menu was displayed in a new page. That way thealready existing information that is available in the ”list” pages (user list.jsp and similarones) remained hidden but sometimes it is useful to have an example of how things havebeen done previously. Moreover, each user action requires the page to be reloaded fromthe server (or a new page loaded) which makes the process inefficient.

These are the reasons to have changed the edit/create/delete menus that appeared innew pages to pop-up menus that are displayed in the same page were the administratoris working so it is able to check any information it may need.

To do so, I have used the jQuery widget dialog(). The basic dialog window is an overlaypositioned within the viewport and is protected from page content (like select elements)shining through with an iframe. It has a title bar and a content area, and can be moved,resized and closed with the ’x’ icon by default.

After modifying the CSS and the correspondent JSP files, the result is the following.

Figure 4.9: Pop-up menu to create a new user

25


The code supporting the pop-up menu is showed in figure 4.10. It is formed by two blocks:the first one distinguishes the three cases we can have (creating, editing or deleting a user)and the second one opens the dialog and defines some of its attributes (the rest can befound at the JSP file in the annex E).

Figure 4.10: Code to display the pop-up menu

The main problem we face when including this pop-up menu is that we need to com-municate with the server asynchronously. Before changing anything, when we wantedto create, edit or delete a user and we clicked on the icon a new page was loaded. Inthis process, a request to the server was made and then the answer from the server wasdisplayed through this new page. But now, we want to stay in the same page but at thesame time communicate with the server. To solve this, some Ajax functions have been

26


added. The corresponding code is displayed in figure 4.11.

Ajax (an acronym for Asynchronous JavaScript and XML) is a group of interrelated webdevelopment techniques used on the client-side to create asynchronous web applications.With Ajax, web applications can send data to, and retrieve data from, a server asyn-chronously (in the background) without interfering with the display and behaviour of theexisting page.

Figure 4.11: Ajax functions for the pop-up menu

27


The three functions are quite similar. Based on the id which indicates the user we want toedit/delete and using a get method, in case the communication with the server is successfulthe information that the server is giving us will be displayed on the pop-up menu.


automation rule list.jsp config list.jsp crontab list.jpglanguage list.jsp mime list.jsp user list.jpg

28

Chapter 5

Workflow

JBoss jBPM is a flexible, extensible framework to process languages. jPDL is one processlanguage that is built on top of that common framework. It is an intuitive process languageto express business processes graphically in terms of tasks, wait states for asynchronouscommunication, timers, automated actions... To bind these operations together, jPDLhas the most powerful and extensible control flow mechanism.

jPDL has minimal dependencies and can be used as easy as using a java library. But itcan also be used in environments where extreme throughput is crucial by deploying it ona J2EE clustered application server. jPDL can be configured with any database and itcan be deployed on any application server.

In this way, tasks can easily be defined and assigned to any OpenKM user in a graphicalenvironment, providing most of the code automatically.

Each of our workflow process usually has three files:

• Process Info File: that contains the source code.

• Graphical Info File: that contains the code related to the form, position and size ofthe nodes that appear in the Image File.

• Image File: that includes the image of our process that is later on displayed inOpenKM.

Then, depending on the action performed by our workflow process we can also have:

• Additional Files: such as forms that need to be included in the deployment.

• Classes and Resources: usually javascripts that need to be included in the deploy-ment.

29


Workflows can be either deployed in Eclipse or directly uploaded to the OpenKM systemusing a .par file. Once having them in the system, the administrator can define whichusers have the right to start which workflows modifying their profile settings. However,the administrator can assign a workflow to every user no matter if the user has de rightto start the workflow or not.

5.1 Basic Workflow elements

5.1.1 Nodes

Nodes are represented as boxes. The most important ones are:

START: every single workflow has to start with a START node and no other STARTnode can be present. Once a user executes a workflow, the flow will go immediately acrossthe transition which connects the START node with the next one.

STATE: when the flow arrives to a STATE node it gets stuck there until a user (usuallythe administrator) fires a signal.

TASK: when some human interaction is needed, a TASK node is required. The flow willbe stuck at this node waiting for human intervention.

DECISION: a DECISION node is used to guide the process running path. This meansyou can tell the workflow which way should go. Decision criteria can be specified asfollows:

• Adding conditions to transactions or BeanShell script which returns a boolean.Bodes go across its transitions examining the conditions until found the first onewhich match a criteria.

• Creating a class which implements the DecisionHandler interface. The decide methodreturns the transition to follow.

NODE: nodes are usually employed to execute complex logic evaluations or actions (seesection 5.1.3). When the flow arrives to a NODE node, it is executed immediately andflows across the output transaction to the next node. A workflow gets never stuck at aNODE node.

END: one END node must be present in a workflow, although several are also allowed.When a workflow arrives to an END node, it is automatically finished.

30


5.1.2 Transactions

A transaction is a connection between two nodes and is represented by an arrow. Duringa transaction execution some actions can be executed. Workflow does not stop during atransaction execution.

The most important thing to take into account is that different transactions going outfrom the same node must have different names.

5.1.3 Actions

Actions are parts of the logic implemented as programs. These programs can do severalactions like connecting with third-party applications to retrieve or store data, send mails,evaluate workflow variables and take some decision, etc. Actions can be defined in twoways:

• Using a BeanShell script.

• Using an action handler, this is a Java class which implements the ActionHandlerinterface.

5.2 Forms

When you want to retrieve data from a user in the workflow, you have to define a wayto do so. OpenKM uses the forms.xml file to draw the components in the form. See theexample below:

Figure 5.1: Workflow form example source code

Here we can see an XML which describes the components related to a task called ”get-data”. This means that when the workflow is executing the ”get-data” task, it needs the

31


user who is assigned to this task to enter some information to continue. In the description,we can see an INPUT where the user should type a number and a button to submit theinformation.

This form definition is rendered as this:

Figure 5.2: Workflow form example render

Forms are also the way to retrieve data from a user and use this data afterwards. Thismeans creating a workflow process instance object, which is an object that will be presentduring the whole workflow life cycle. These objects store the user data in memory andthis user data can be used in each node or action.

When a user submits a workflow form, the objects are always FormElements type. Basi-cally any form submitted by a user will store in memory FormElements type. OpenKMworkflows are thought to use FormElements to initialize data values.

The following example shows two forms: in the first one the user gives a number as inputand the second form shows this number to the user. This is easily done using the keyword data.

Figure 5.3: Use of workflow process instance objects

32


5.2.1 Form elements

Forms accept different elements which will help us to perform our task in the easiest way:

INPUT: used to enter free text. label and name attributes are required.

SUUGESTBOX: this is an implementation of the typical AJAX suggest box component.label, name, filterQuery, valueQuery and dialogTitle attributes are required.

CHECKBOX: best used to represent boolean data. label and name attributes are re-quired.

TEXTAREA: similar to INPUT but for longer text. label and name attributes arerequired.

SELECT: in this case, the value can be selected from a predefined list. Every selectcomponent can contain n arbitrary number of options bigger than one. label and nameattributes are required.

BUTTON: used to submit the information entered in the form. label and name attributesare required.

SEPARATOR: represents a way to draw a separator to group different elements. labeland value attributes are required.

TEXT: prints a text which can contain HTML tags. label and name attributes arerequired.

VALIDATOR: used to validate the information entered by the user. More than onevalidator can be used in every form element.

DOWNLOAD: used to download documents. label and name attributes are required. Itshould also contain one or more node elements which represent the document to download.This node element should have at least the label attribute.

UPLOAD: used to upload documents. label and name attributes are always required. Ifwilling to upload a new document, folderPath or folderUuid should be specified as well.If willing to update an existing document, then documentUuid should be set and typeshould have ”update” as its value.

In the figure 5.4 shows a form that simulates the reception of a document.

33


Figure 5.4: Form for the reception of a document

5.3 Tasks

One of the main utilities of creating a workflow is the possibility to assign tasks to anyuser. Tasks can be created easily with a node task that represents one or many tasksexecuted by a human person. When the process execution arrives to a task node, a taskinstance is created in the workflow member list. This node will enter in a wait state untilthe user notifies the conclusion of the task.

There are different ways to assign a task:

• Actor: this is a String which identify the actor who will perform the task. Whenthe process flow enters in the task node, the task is created and is added to the listof this actor’s pending task.

• Pooled Actor: a sequence of actors. When this task is created is not assigned toany actor but it appears in the list of pooled tasks of all of them. Once one of theactors self-assigns the task, it is added to his own list of pending task and disappearsfrom the pooled tasks list.

• Swimlane: a swimlane defines an assignment which is the same for several tasks ina process. This option allows us to assign any task we might have in the workflowto the user who started the flow, no matter who actually this person was.

34


• Expression: this is an assignment expression evaluated by the jBPM identitycomponent. It can make an assignment by user or role. For example, using the”group(ROLE USER)” expression we create a collection of pooled actors who havethe role ”USER”.

• Handler: here you can specify a class which implements the AssignmentHandlerinterface. This class assigns a TaskInstance or a SwimlaneInstance to a swimlane-ActorId or a set of PooledActors.

jBPM allows us to define this task properties in a menu (see figure 5.5) and get the codeautomatically (see figure 5.6).

Figure 5.5: Task properties setting

Figure 5.6: Task properties code

35


5.4 Mail

A notification email can be send when a task gets assigned to an actor just using thenotify=”yes” attribute on a task. Setting notify to ”yes”, ”true” or ”on” will cause jBPMto send an email to the actor that will be assigned to the task. The email is based on atemplate (see JBPM3 mail configuration) and contains a link to the related document inthe web application.

Similarly to the assignments case, emails can be sent as a task reminder. The reminderelement in jPDL is based upon the timer. The most common attributes will be duedateand repeat. The only difference is that no action has to be specified.

If the email is not related to the accomplishment of a task but the result of it (for instanceif we want to receive a notification every time a workflow gets to certain state) there isthe possibility to use a MAIL node.

The example show below is a simple workflow which notifies the supervisor that a projecthas been finished. Any user simply starting the workflow making reference to the desiredproject will be able to send an email notifying the end of the project.

(a) Image file(b) Code

Figure 5.7: Example of the use of a MAIL node

5.5 Join and Fork

Until now we have seen how to assign a task either to a single user or to a pool of users.However, we only needed one of those users to execute the assigned tasks. With JOINand FORK nodes we have the possibility to give the same task to more than one user andthe process will get stuck at the JOIN node until each of the users finishes the task.

36


The same way, different tasks can be also assigned to different users and the process willwait until all of them finish, thus allowing the simulation of a real process where differentpeople have different roles and different tasks.

The most basic example is shown in figure 5.8

Figure 5.8: Workflow using FORK and JOIN nodes

5.6 Advanced simulation

In this section one complete workflow example will be detailed. It has a great variety ofnodes and include both decision and action handlers.

This example simulates the situation in which some user wants to ask for a refund. Itincludes a decision handler that will check the amount to be refunded and depending onit will directly go to the ”approver” (the person who will finish the workflow after actuallyhaving refund the correspondent amount) or go through the ”reviser” (the person whowill check the request details and ask for further information if needed).

Something to point out in this process is that in the case the reviser needs more infor-mation from the user (a receipt, a clarification, etc.) the ”user” node is automaticallyassigned to the user who started the workflow, so it will work for anyone.

In addition, some ”just-in-case” transactions have been added. This means that althoughthe normal flow from the ”approver” should go to ”end” through the ”approved” trans-action, the approver has still the possibility of going back to the ”reviser” or even tocancel the request if something goes wrong. This way the process has enough flexibilityto handle many different situations.

37


Figure 5.9: Image file

All the files related to this example (action handler, decision handler, form and sourcecode) are available in the F.

38

Chapter 6

Task management desktop

Task management is the process of managing tasks through its life cycle. It involvesplanning, testing, tracking and reporting. Task management can help either individualsachieve goals, or groups of individuals collaborate and share knowledge for the accom-plishment of collective goals. Tasks are also differentiated by complexity, from low tohigh.

Effective task management requires managing all aspects of a task, including its status,priority, time, human and financial resources assignments, recurrence, notifications and soon. These can be lumped together broadly into the basic activities of task management.

Managing multiple individual or team tasks may require specialised task management soft-ware. Specific software dimensions support common task management activities. Thesedimensions exist across software products and services and fit different task managementinitiatives in a number of ways.

Task management may form part of project management and process management andcan serve as the foundation for efficient workflow in an organisation.

Software dimensions criss-crossing nearly all lines of task management products includetask creation, task visualization, notifications, assign resources, compatibility, configura-bility, scalability and reporting.

• Task creation encompasses collaborative capabilities for turning ideas into actions(tasks). Includes activities involved before setting tasks, particularly patterns ofcollaboration involving planning.

• Task visualization encompasses presentation of tasks, most often through timeand list forms. Priority visualization encompasses classification (e.g., budget, time,stakeholders) and mechanism (e.g., colour code or text). Calendaring covers schedul-ing (e.g., availability, meetings, appointments and other potential conflicts) andnotifications.

39


• Notifications encompasses configurable settings for informing past, present andpending deadlines.

• Assigning resources encompasses the ability to delegate tasks and tools to singleor multiple people.

• Compatibility encompasses the ability of a task management environment to con-nect to other systems, software and environments. It includes setting a structureand restrictions on communication going from the task management environmentto other software, systems and environments.

• Configurability encompasses ability to add, remove and manage functionality andusability in task management environments.

• Scalability encompasses ability to perform a task properly when a change in thequantity of users is done to meet the specific task requirements.

• Reporting encompasses presentation of information by displaying either in tabularor graphical display.

However, OpenKM is just offering a few of these options because despite of the fact thatthe administrator has a detailed overview of the state of the task during the whole lifecycle, the user has only access to two lists: tasks that have been assigned to him andtasks that he might choose to complete. No further information/flexibility in the taskperformance is provided.

In addition, task management is a concept strongly related to time management. If weare good at managing our tasks we will probably be more efficient and, the same way, agood time management encompasses a good task management.

Time management is the act or process of planning and exercising conscious control overthe amount of time spent on specific activities, especially to increase effectiveness, effi-ciency or productivity. Time management may be aided by a range of skills, tools, andtechniques used to manage time when accomplishing specific tasks, projects and goalscomplying with a due date. This set encompasses a wide scope of activities, and theseinclude planning, allocating, setting goals, delegation, analysis of time spent, monitoring,organizing, scheduling and prioritizing. Initially, time management referred to just busi-ness or work activities, but eventually the term broadened to include personal activitiesas well.

A time management system is a designed combination of processes, tools, techniquesand methods. Usually time management is a necessity in any project development as itdetermines the project completion time and scope.

The major themes arising from the literature on time management include the following:

• Creating an environment conducive to effectiveness.

40


Writers on creating an environment for effectiveness refer to issues such as the benefitof a tidy office or home to unleashing creativity, and the need to protect ”prime time”.Literature also focuses on overcoming chronic psychological issues such as procrastination.

• Setting of priorities

Which mainly focus on working in priority order and setting gravitational goals.

• Carrying out activity around those priorities.

• The related process of reduction of time spent on non-priorities.

These all four themes take us to the point of considering the possibility of adding a toolin our system to cover most of them. That way both users and administrators can benefitfrom a good time management which will definitely have an impact in terms of efficiency,effectiveness and productivity.

What OpenKM is currently offering consists in:

• Assignment of tasks to a single user/ more than one user.

• Graphical notification for the user when a task has been assigned to him (flickingicon).

• Distribution in either the ”Pendent tasks” list or the ”Unassigned pending tasks”list in the workflow dashboard.

• Possibility for the admin to keep track of the process (when the workflow is started,when its different steps are accomplished and when it is ended).

Nevertheless, the user has no overview about the priority or deadline of the tasks he hasbeen assigned to. In addition, only the workflow tasks can be triggered, leaving any otherduty or request out of the system which will probably lead our user to employ other taskmanagement tools or, in the worst case, to forget about those other duties.

Those will be the main issues to be covered by the new proposed desktop.

6.1 Novelties

As it was already mentioned in the previous section, the necessity of helping users tomanage their time and tasks and the limitations of the available software brings us tothink about a new dashboard and some new features which will be described in thissection.

41


6.1.1 Structure

One of the most important things for having a good time management consists in settingpriorities. This will help the user to distinguish those more important tasks from the oneswhich are unimportant and, therefore, it will be easier to focus on them.

Nowadays, there are many different techniques to set priorities which are usually basedin the urgency and the importance of our tasks. Our structure is based on the Eisen-hower Method which evaluates all tasks using the criteria important/unimportant andurgent/not urgent and puts them in according quadrants as shown in figure 6.1.

I have chosen this method because of its simplicity and its graphical distribution, whichmakes information easier to process.

Figure 6.1: Eisenhower matrix

This way the user can easily have an overview of its tasks and act accordingly:

• Important and Urgent: this will be the first tasks to accomplish. Having themhighlighted will also push the user to finish them as soon as possible.

• Important but not Urgent: this should be the principal quadrant in the matrix.Tasks assigned to this quadrant allow programing and preparation so they can beaccomplished with no hurry or stress. A deadline must be specified and are donepersonally.

• Urgent but not Important: these are the tasks that should be delegated. If nothaving such a possibility our user can take them into account and find the properway/moment to finish them.

42


• Not Urgent, not Important: this quadrant should be empty as its tasks shouldbe dropped.

In addition, having all the tasks visible can be a motivational factor for the user to finishas many as possible. Although unimportant and not urgent tasks should be automaticallydropped, keeping them in the matrix can also motivate us to complete our duties, as theymight be the ones more related to our hobbies.

6.1.2 Not workflow related tasks

Right now every OpenKM user has access to a list of ”Pending tasks” that an adminis-trator has already assigned to him and a list of ”Unassigned pending tasks” that he canchoose to perform. However, all those tasks must be created and introduced to the systemby an administrator. The result is that the user will not have a realistic task list becausein our daily life at work we can be asked to do something during a meeting, having aconversation, etc.

Then, the possibility to include in the list non-workflow related tasks will be added tothe system, thus preventing the user to have different task management tools which willbring him to a less efficient and less effective task and time management. The user willbe able to define both priority and deadline for the aforementioned tasks as it is showedin figure 6.2. Moreover, in case these atributes are not specified, the tasks would stay atthe pendent list instead of being directly assigned to the matrix.

Figure 6.2: Create task

43


6.1.3 Subtasks

At the moment, the workflows that are implemented might have several steps to accom-plish or different small tasks for the user to fulfil. The same way, the tasks added directlyby a user may need the description of one or several subtasks. By clicking on the task, theuser should be able to have an overview of the task itself (date it was started, deadline,description) and also de possibility of adding subtasks as well as editing or deleting them.

The next figure shows an example of the view task.

Figure 6.3: View Task

6.1.4 Other details

To keep following the guidelines stablished in the design of the wholel platform earlier inthis project, pop-up panels for editing, deleting or adding tasks should be implemented.

Also, taking advantage of the draggable() and droppable() functions would allow users tomove tasks from one place to the other in a really easy way.

Having the possibility not just to delete tasks when they are done but also to cross themout will be a positive feature for those used to have their task lists on paper or perceivingthe fact of finishing many tasks as a motivation to accomplish even more.

44

Chapter 7

Conclusions

The introduction of Knowledge Management strategies as part of the practises of compa-nies and other institutions shall improve the way they perform in a near future.

Both public and private organisations are showing their efforts on developing, maintainingand improving technology to support these strategies in order to reinforce themselvestoward the society. Thus, open source platforms such as OpenKM are being furtherdeveloped in order to fulfil the customers’ needs and avoid huge expenses on non-freesoftware. Nonetheless, other currently hot topics can be found just beside knowledgemanagement. The concept of soft skills has appeared as the future personal attributes thatwill make the difference among hundreds of well-prepared professionals. In consequence,new software design is also taking into consideration how these attributes can be improvedand strengthened in order to help institutions achieve further objectives.

In this project, the use of a specific open source software that combines both knowledgeand task management tools is proposed. Having access to the source code has allowed theinclusion of new features which comprise the possibility of listing information by fields,adding select-all buttons and creating pop-up menus as well as the implementation ofa new, more interactive design. At the same time, the task management tool of thissoftware has been evaluated both from the administrator and the basic-user side, andsome changes have been proposed in order to enhance the impact of the platform on theusers’ soft skills related to task and time management and, indirectly, have a positiveimpact on the organisation itself.

The first conclusion that can be drawn from this project is that the inclusion of newcapabilities to the platform (listing information or select-all buttons) improves the qualityof the platform itself. Thus, users can perform their tasks in a fastest and more efficientway. Allowing users to access existing information which can be taken as an examplefor the task they intend to accomplish will definitely help them to succeed and be moreconfident on the use of the software. In addition, these features reinforce one of thebasics of knowledge management: making information easily accessible (including the

45


information of the system itself). Furthermore, /em ajax allows retrieving data from theserver asynchronously which implies saving time and resources small-scale.

Other of the objectives of this project consisted in giving a new design to the platform andit can be concluded that this objective has definitely been accomplished. This new designincludes a new blue based colour palette which erases the associations with boredom andemptiness related to grey, more organic shapes and fonts and an increase of the inter-activity user-platform achieved by the addition of distinguishing attributes to elementsthat may perform a task: hand shaped pointer when hovering over a button; colour ofbuttons being altered when the user hovers over them; background colour of the selecteditem being altered; text leading into a link underlined when hovering over it, etc.

The conclusion drawn after getting to know how workflow works and trying out its el-ements in the different simulations is that workflow is a very powerful tool with lotsof possibilities and applications. However, being able to create mid or high complexityworkflows will require programing knowledge on XML (for forms) and java (for actions)which could lead to an investment in complementary training by the company side. Ad-ditionally, the use of external software is needed to create the .par file that contains theworkflow. This means that OpenKM cannot actually carry out all the functions it ismeant for independently.

The last of the objectives of this project consisted in evaluating the current task man-agement tool, basically composed by the workflow view panel, and proposing a new taskmanagement desktop. In order to fulfil this objective, novelties regarding both structureand functionalities of the current system were taken into consideration. The proposedstructure is based on the Eisenhower Method in order to have a clear understanding ofthe status of the tasks in a visual way. New functionalities include being able to setpriority and deadline to a workflow when it started. With the aim of building a totallyindependent platform which prevents users to work with similar software, in this newversion also tasks not related to workflow can be added to the system.

Thus, it can be concluded that the proposed task manager is an improvement in compar-ison with the original one, being more flexible and offering more possibilities to OpenKMusers.

46

Chapter 8

Future Work

Future lines in the design and the improvement of features of OpenKM keep open basedon this project.

In the side of the design, the way it evolves and gets modified is totally open and relatedto the evolution of the platform itself. What users need, what OpenKM offers.

In the side of the task manager, this document includes the necessary information tomodify the current system. It is described how the structure could be implemented andwhich functions could help users managing their tasks in an easier way. Hence, OpenKMsource code can be easily modified to provide users with this new feature.

In the side of the workflow, it can be used not only to keep track of tasks but alsoto improve users’ quality of performance. Thus, a field that could be studied is howworkflows can be developed in an easier way. At the moment, designing a workflow isa quite easy process regarding the structure and the creation of node tasks. However,the implementation of actions still needs some advanced knowledge. At the same time,workflows are thought to be accomplished by one single person (or a few of them) but therecould also be place for tasks assigned to a group or team. This means moving towardsa more transversal system in the sense that one user could be working in different teamsat the same time, or hold a position in the company, and workflow could be assigned tothat user, several users, a whole team or maybe the users holding the same position indifferent temps (e.g. all team leaders). Then, not only the way of creating a workflow butalso the way a workflow is started and assigned should be studied and possibly modified.

As seen, future lines keep open after this project. Nevertheless, future projects involvingOpenKM or other platforms with similar proposes could use this project as base and makefurther implementations.

47

Appendix A

OpenKM Specifications

OpenKM architecture is based on

• Apache Tomcat

• Java J2EE ( JDK 1.6 )

• GWT ( Google Web Toolkit - Ajax )

• Hibernate

• Spring

• Lucene Text Search Engine

• POI File Format Conversion

• OpenOffice

• jBPM

• KEA

• Weka

• Aperture

• Rdf2go

• Openrdf

OpenKM supported interfaces

• Webdav

48


• Webservices

Operating system support

• Unix

• GNU / Linux

• Windows 2000, Windows XP, Windows 2003

• MacOS

Backend storage repositoryEither a local filesystem or DBMS can be used to store information:

• Oracle

• PostgreSQL

• MySQL

• MS SQL Server

• etc.

49

Appendix B

Courses

Codecademy is an online interactive platform that offers free coding classes in program-ming languages like Python, PHP, JavaScript, and Ruby, as well as mark-up languagesincluding HTML and CSS. The site offers feedback, badges for completing exercises, aswell as a function that keeps track of a user’s total score and displays it to others.

Code Year is a free Codecademy program for anyone who is interested to learn how toprogram. The program intends to help people follow through on a New Year’s Resolutionto learn how to program, by introducing a new course for every week. The differentsections that I completed are the following:

• Web Fundamentals (160 exercices) - Introduction to HTML and CSS

• Web (Original) (260 exercices) - HTML, CSS and JavaScript on the web

• JavaScript (216 exercices) - Making websites interactive and building browser basedgames

• jQuery (68 exercices) - Introduction to jQuery

• jQuery (Original) (162 exercices) - Advanced jQuery

• PHP (86 exercices) - Introduction to PHP

• Python (296 exercices) - Introduction to Python

50

Appendix C

Platform final design

Figure C.1: Main Desktop - Old Design

51


Figure C.2: Main Desktop - New Design

52

Appendix D

CSS files

This appendix includes the two most important CSS files of the platform:

• styles-new.css: CSS for the main desktop, the dashboard panel and the searchpanel.

• styles-nou.css: CSS for the administration desktop.

53

1 body { 2 margin: 0px; 3 background-color: #FFFFFF; 4 } 5 6 body,td,a,div,.p { 7 font-size: 12px; 8 font-family: tahoma, verdana, arial, sans-serif; 9 } 10 11 div,td { 12 color: #000000; 13 } 14 15 a:link,.w,.w a:link { 16 color: #0000cc; 17 } 18 19 a:visited { 20 color: #551a8b; 21 } 22 23 a:active { 24 color: #ff0000; 25 } 26 27 h1 { 28 font-size: 30px; 29 font-weight: bold; 30 } 31 32 h2 { 33 font-size: 25x; 34 font-weight: bold; 35 } 36 37 h3 { 38 font-size: 22px; 39 font-weight: bold; 40 } 41 42 h4 { 43 font-size: 18px; 44 text-decoration: underline; 45 } 46 47 h5 { 48 font-size: 14px; 49 text-decoration: underline; 50 } 51 52 h6 { 53 font-size: 10px; 54 text-decoration: underline; 55 } 56 57 blockquote { 58 border: 1px solid #DBDBCE; 59 background-color: #EBEADD; 60 } 61 62 strong { 63 font-weight: bold; 64 color: #488bff; 65 } 66 67 .bold { 68 font-weight: bold; 69 } 70 71 /* General use */ 72 .okm-NoWrap { 73 font-weight: bold; 74 white-space: nowrap; 75 } 76 77 .okm-Vertical-Line-Border { 78 background-image: url(img/vertical_line_back.gif); 79 background-repeat: repeat; 80 width: 2px; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 1/25

81 } 82 83 .okm-Horizontal-Line-Border { 84 background-image: url(img/horizontal_line_back.gif); 85 background-repeat: repeat; 86 height: 2px; 87 } 88 89 .okm-Border-Left { 90 border-left: 1px solid #bbb; 91 } 92 93 .okm-Border-Top { 94 border-top: 1px solid #bbb; 95 } 96 97 .okm-Border-Right { 98 border-right: 1px solid #bbb; 99 } 100 101 .okm-Border-Bottom { 102 border-bottom: 1px solid #bbb; 103 } 104 105 .okm-Background-White { 106 background: #FEFCF8; 107 } 108 109 /* row results */ 110 .okm-Table-Row { 111 height: 20px; 112 cursor: default; 113 } 114 115 /* top panel */ 116 .okm-TopPanel { 117 background-color: #E9F4FB; 118 } 119 120 .okm-TopPanel-Border { 121 background-color: #E9F4FB; 122 height: 1px; 123 } 124 125 .okm-TopPanel-Line-Border { 126 background-image: url(img/topline_back.gif); 127 background-repeat: repeat; 128 height: 2px; 129 } 130 131 /* leftBar panel */ 132 .okm-VerticalBorderPanel { 133 background-color: #E9F4FB; 134 } 135 136 /* bottom panel */ 137 .okm-bottomPanel { 138 background-color: #E9F4FB; 139 } 140 141 /* general menu */ 142 .okm-TopMenuBar { 143 background-color: #E9F4FB; 144 padding: 0px 0px 0px 0px; 145 cursor: default; 146 font-size: 12px; 147 } 148 149 .okm-MainMenuBar { 150 background-color: #E9F4FB; 151 border: 1px solid #E9F4FB; 152 padding: 4px 6px 4px 6px; 153 cursor: default; 154 color: #0071B9; 155 font-size: 12px; 156 font-weight: bold; 157 } 158 159 .okm-SubMenuBar { 160 background-image: url(img/back_menuitem_new.gif); C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 2/25

161 background-repeat: repeat; 162 background-position: left; 163 backgroung-color: #0071B9; 164 padding: 0px 0px 0px 0px; 165 cursor: default; 166 font-size: 12px; 167 border: 1px solid #989696; 168 } 169 170 .okm-MainMenuItem { 171 padding: 0px 20px 0px 0px; 172 cursor: default; 173 font-size: 12px; 174 cursor: default; 175 height: 20px; 176 white-space: nowrap; 177 } 178 179 .okm-TopMenuBar .gwt-MenuItem-selected { 180 cursor: pointer; 181 font-size: 12px; 182 /*border-right: 1px solid #08246d; 183 border-left: 1px solid #08246d; 184 border-top: 1px solid #08246d;*/ 185 background-color: #C3D9FF; 186 white-space: nowrap; 187 } 188 189 .okm-SubMenuBar .gwt-MenuItem-selected { 190 background-color: #E9F4FB; 191 color: #0071B9; 192 font-size: 12px; 193 cursor: pointer; 194 /*border: 1px solid #08246d;*/ 195 white-space: nowrap; 196 } 197 198 .okm-MainMenuItem-Base-HorizontalSeparator { 199 background-image: url(img/menu_horizontal_separator.gif); 200 background-position: center right; 201 background-repeat: repeat-x; 202 } 203 204 .okm-MainMenuItem-Base-Childs { 205 background-image: url(img/menu_arrow.gif); 206 background-repeat: no-repeat; 207 background-position: center right; 208 } 209 210 /* menu bar */ 211 .okm-MenuBar { 212 background-image: url(img/back_menuitem_new.gif); 213 cursor: default; 214 font-size: 12px; 215 } 216 217 .okm-MenuItem { 218 font-size: 12px; 219 cursor: default; 220 padding: 0px 20px 0px 0px; 221 } 222 223 .okm-MenuItem-strike { 224 cursor: default; 225 font-size: 12px; 226 color: #8D8D7A; 227 } 228 229 .okm-MenuBar .gwt-MenuItem-selected { 230 background-color: #E9F4FB; 231 color: #0071B9; 232 font-size: 12px; 233 cursor: pointer; 234 /*border: 1px solid #08246d;*/ 235 white-space: nowrap; 236 } 237 238 /* general for all menus it seems to be necessary to have correct font size */ 239 .gwt-MenuItem { 240 font-size: 12px; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 3/25

241 } 242 243 /* tree */ 244 .okm-Tree { 245 white-space: nowrap; 246 font-size: 12px; 247 cursor: default; 248 } 249 250 .okm-Tree .okm-TreeItem { 251 white-space: nowrap; 252 } 253 254 .okm-Tree .gwt-TreeItem-selected { 255 white-space: nowrap; 256 background-color: #C3D9FF; 257 } 258 259 .okm-Tree-MenuPopup { 260 background-color: #ECEBEB; 261 border: 1px solid #AAAAAA; 262 padding: 1px; 263 } 264 265 .okm-Tree-TextBox-selected { 266 background-color: #E9F4FB; 267 border: 1px solid #A5A596; 268 font-size: 10px; 269 font-family: tahoma, verdana, arial, sans-serif 270 } 271 272 .okm-Tree-TextBox { 273 background-color: #FFFFFF; 274 border: 1px solid #A5A596; 275 font-size: 10px; 276 font-family: tahoma, verdana, arial, sans-serif 277 } 278 279 .gwt-TreeItem { 280 white-space: nowrap; 281 cursor: default; 282 } 283 284 /* Popup */ 285 .okm-Popup, .okm-Popup-Error { 286 font-size: 12px; 287 background-color: #E9F4FB; 288 border: 1px solid #A5A596; 289 } 290 291 .okm-Popup-label, .okm-Popup-Error-label { 292 font-size: 12px; 293 font-weight: bold; 294 text-align: center; 295 padding-top: 5px; 296 height: 20px; 297 background-image: url(img/popup_label_back.gif); 298 background-repeat: repeat; 299 } 300 301 .okm-Popup-text { 302 background: #FEFCF8; 303 border: 1px solid #A5A596; 304 } 305 306 .okm-Popup .Caption { 307 font-size: 12px; 308 font-weight: bold; 309 text-align: center; 310 padding-top: 5px; 311 height: 20px; 312 background-image: url(img/popup_label_back.gif); 313 background-repeat: repeat; 314 cursor: pointer; 315 cursor: hand; 316 } 317 318 .okm-Popup-Error .Caption { 319 font-size: 12px; 320 font-weight: bold; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 4/25

321 text-align: center; 322 padding-top: 5px; 323 height: 20px; 324 background-image: url(img/popup_label_back_error.gif); 325 background-repeat: repeat; 326 cursor: pointer; 327 cursor: hand; 328 } 329 330 /* VerticalBar */ 331 .okm-VerticalBar { 332 background-image: url(img/separator.gif); 333 background-repeat: repeat; 334 cursor: col-resize; 335 } 336 337 .okm-VerticalBar-Point { 338 background-image: url(img/separator_points.gif); 339 background-repeat: no-repeat; 340 background-position: 50% 50%; 341 cursor: col-resize; 342 font-family: "Small Fonts"; 343 font-size: 4px; 344 } 345 346 .okm-Popup-VerticalBar { 347 background-image: url(img/separator_blue.gif); 348 background-repeat: repeat; 349 cursor: col-resize; 350 } 351 352 .okm-Popup-VerticalBar-Point { 353 background-image: url(img/separator_points_blue.gif); 354 background-repeat: no-repeat; 355 background-position: 50% 50%; 356 cursor: col-resize; 357 font-family: "Small Fonts"; 358 font-size: 4px; 359 } 360 361 /* HorizontalBar */ 362 .okm-HorizontalBar { 363 background-image: url(img/horizontal_separator.gif); 364 background-repeat: repeat; 365 cursor: row-resize; 366 } 367 368 .okm-HorizontalBar-Point { 369 background-image: url(img/horizontal_separator_points.gif); 370 background-repeat: no-repeat; 371 background-position: 50% 50%; 372 cursor: row-resize; 373 font-family: "Small Fonts"; 374 font-size: 4px; 375 } 376 377 /* Solution to IE transparent popup <iframe> problem 378 iframe { 379 filter: progid : DXImageTransform . Microsoft . Alpha(opacity = 0); 380 } */ 381 382 .okm-Popup-HorizontalBar { 383 background-image: url(img/horizontal_separator_blue.gif); 384 background-repeat: repeat; 385 cursor: row-resize; 386 } 387 388 .okm-Popup-HorizontalBar-Point { 389 background-image: url(img/horizontal_separator_points_blue.gif); 390 background-repeat: no-repeat; 391 background-position: 50% 50%; 392 cursor: row-resize; 393 font-family: "Small Fonts"; 394 font-size: 4px; 395 } 396 397 /* File browser */ 398 .okm-FileBrowser { 399 cursor: default; 400 } C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 5/25

401 402 .okm-FileBrowser-Title { 403 background-image: url(img/filebrowser_title.gif); 404 background-repeat: repeat; 405 font-size: 10px; 406 color: #6D6D5F; 407 text-align: left; 408 padding: 4px 0px 0px 4px; 409 height: 20; 410 cursor: default; 411 } 412 413 .okm-FileBrowser-Title-RightBorder { 414 border-right: 1px solid #A5A596; 415 } 416 417 .okm-FileBrowser-Title-LeftBorder { 418 border-left: 1px solid #FFFFFF; 419 } 420 421 .okm-FileBrowser-SelectedRow { 422 background-image: url(img/filebrowser_selected.gif); 423 background-repeat: repeat-x; 424 cursor: default; 425 } 426 427 .okm-FileBrowser-MenuPopup { 428 background-color: #E9F4FB; 429 border: 1px solid #AAAAAA; 430 padding: 1px; 431 } 432 433 .okm-FileBrowser-TextBox { 434 background-color: #FFFFFF; 435 border: 1px solid #A5A596; 436 font-size: 10px; 437 font-family: tahoma, verdana, arial, sans-serif 438 } 439 440 .okm-FileBrowser-Separator { 441 background-image: url(img/horizontal_path_separator_new.gif); 442 background-repeat: repeat; 443 } 444 445 .okm-FileBrowser-Panel { 446 border: 1px solid #A5A596; 447 } 448 449 /* File path */ 450 .okm-FilePath-Title { 451 background-color: #FFFFFF; 452 font-size: 10px; 453 text-align: left; 454 vertical-align: middle; 455 height: 22; 456 border: 1px solid #A5A596; 457 } 458 459 /* Tool Bar */ 460 .okm-ToolBar { 461 background-color: #0071B9; 462 } 463 464 .okm-ToolBar .okm-NoWrap { 465 color: white; 466 } 467 468 .okm-ToolBar-button { 469 background-color: #0071B9; 470 cursor: pointer; 471 cursor: hand; 472 } 473 474 .okm-ToolBar-button-disabled { 475 background-color: #0071B9; 476 } 477 478 .okm-ToolBar-space { 479 padding: 2px 2px 2px 2px; 480 } C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 6/25

481 482 .okm-ToolBar-selected { 483 background-image: url(img/bottom_selected.gif); 484 background-repeat: no-repeat; 485 } 486 487 .okm-ToolBar-Big-selected { 488 background-color: #C3D9FF; 489 cursor: pointer; 490 cursor: hand; 491 } 492 493 .okm-ToolBar-Big-selected .okm-NoWrap { 494 color: #000000; 495 } 496 497 .okm-ToolBar-BigTMP-selected { 498 background-color: #C3D9FF; 499 color: #0071B9; 500 cursor: pointer; 501 cursor: hand; 502 } 503 504 .okm-ToolBar-BigTMP-selected .okm-NoWrap { 505 color: #000000; 506 } 507 508 .okm-ToolBar-Border { 509 border-top: 1px solid #A5A596; 510 border-left: 1px solid #A5A596; 511 border-right: 1px solid #A5A596; 512 } 513 514 /* File upload */ 515 .okm-FileUploadPopup { 516 font-size: 12px; 517 background-color: #EFEBE7; 518 border: 1px solid #110011; 519 } 520 521 .okm-FileUploadPopup-label { 522 font-size: 12px; 523 text-align: center; 524 background-image: url(img/errorpopup_label_back.gif); 525 background-repeat: repeat; 526 } 527 528 .okm-FileUploadPopup-prog-border { 529 height: 15px; 530 width: 205px; 531 background: #fff; 532 border: 1px solid #000; 533 margin: 0; 534 padding: 0; 535 } 536 537 .okm-FileUploadPopup-prog-bar { 538 height: 11px; 539 margin: 2px; 540 padding: 0px; 541 background: #C3D9FF; 542 } 543 544 /* Tab panel */ 545 .gwt-TabPanel { 546 white-space: nowrap; 547 } 548 549 .gwt-TabPanelBottom { 550 /* border-left: 1px solid #87B3FF; */ 551 white-space: nowrap; 552 /*padding-bottom: 5px; 553 border-bottom: 1px solid #bbb; 554 border-left: 1px solid #bbb; 555 border-right: 1px solid #bbb; */ 556 } 557 558 .gwt-TabBar { 559 white-space: nowrap; 560 background-color: #E9F4FB; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 7/25

561 font-size: smaller; 562 } 563 564 .gwt-TabBar .gwt-TabBarFirst { 565 white-space: nowrap; 566 border-bottom: 1px solid #bbb; 567 } 568 569 .gwt-TabBar .gwt-TabBarRest { 570 white-space: nowrap; 571 border-bottom: 1px solid #bbb; 572 } 573 574 .gwt-TabBar .gwt-TabBarItem { 575 white-space: nowrap; 576 border: 1px solid #0071B9; 577 border-right: 1px solid #666; 578 padding: 2px 7px 2px 7px; 579 background-color: #0071B9; 580 color: #FFFFFF; 581 cursor: pointer; 582 cursor: hand; 583 } 584 585 .gwt-TabBar .gwt-TabBarItem .gwt-Label{ 586 color: white; 587 } 588 589 .gwt-TabBar .gwt-TabBarItem-selected { 590 white-space: nowrap; 591 color: #0071B9; 592 font-weight: bold; 593 background-image: none; 594 background-color: #C3D9FF; 595 border: 1px solid #0071B9; 596 border-bottom: 1px solid #fff; 597 border-right: 1px solid #666; 598 padding: 2px 7px 2px 7px; 599 cursor: pointer; 600 cursor: hand; 601 } 602 603 .gwt-TabBar .gwt-TabBarItem-selected .gwt-Label{ 604 color: black; 605 } 606 607 /* Stack Panel */ 608 .okm-StackPanel { 609 border: 1px solid #A5A596; 610 } 611 612 .okm-StackPanel .gwt-StackPanelItem { 613 height: 19px; 614 border: 1px solid #E9F4FB; 615 background-color: #C3D9FF; 616 /*background-image: url(img/stackpanel_back.gif); 617 background-repeat: repeat;*/ 618 } 619 620 .okm-StackPanel .gwt-StackPanelItem-selected { 621 height: 19px; 622 border: 1px solid #E9F4FB; 623 background-color: #C3D9FF; 624 /*background-image: url(img/stackpanel_back.gif); 625 background-repeat: repeat;*/ 626 } 627 628 /* Status Popup */ 629 .okm-StatusPopup { 630 font-size: 12px; 631 background-color: #C7E9FD; 632 border: 1px solid #110011; 633 } 634 635 /* Panels */ 636 .okm-PanelRefreshing { 637 background-color: #C3D9FF; 638 } 639 640 .okm-PanelSelected { C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 8/25

641 background-color: #FFFFFF; 642 } 643 644 .okm-PanelUnselected { 645 background-color: #F6F6EE; 646 } 647 648 /* Logout */ 649 .okm-LogoutPopup { 650 font-size: 12px; 651 background-color: #EFEBE7; 652 border: 1px solid #110011; 653 } 654 655 .okm-LogoutPopup-label { 656 font-size: 12px; 657 text-align: center; 658 background-image: url(img/logoutpopup_label_back.gif); 659 background-repeat: repeat; 660 } 661 662 /* Tab Version */ 663 .okm-Version-SelectedRow { 664 background-image: url(img/version_selected.gif); 665 background-repeat: repeat-x; 666 cursor: default; 667 } 668 669 .okm-Version-Title { 670 background-image: url(img/table_title.gif); 671 background-repeat: repeat; 672 color: #6D6D5F; 673 font-size: 10px; 674 text-align: left; 675 padding: 4px 4px 4px 4px; 676 height: 22px; 677 cursor: default; 678 } 679 680 .okm-Version-Title-Margin { 681 padding: 4px 4px 4px 4px; 682 } 683 684 .okm-Version-Title-RightBorder { 685 border-right: 1px solid #A5A596; 686 } 687 688 .okm-Version-Title-LeftBorder { 689 border-left: 1px solid #FFFFFF; 690 } 691 692 /* Tab Security */ 693 .okm-Security-Title { 694 background-image: url(img/table_title.gif); 695 background-repeat: repeat; 696 color: #6D6D5F; 697 font-size: 10px; 698 text-align: left; 699 padding: 4px 4px 4px 4px; 700 height: 22px; 701 cursor: default; 702 } 703 704 .okm-Security-Title-Margin { 705 padding: 4px 4px 4px 4px; 706 } 707 708 .okm-Security-Title-RightBorder { 709 border-right: 1px solid #A5A596; 710 } 711 712 .okm-Security-Title-LeftBorder { 713 border-left: 1px solid #FFFFFF; 714 } 715 716 .okm-Security-Title-RightBottomBorder { 717 border-bottom: 1px solid #A5A596; 718 border-right: 1px solid #A5A596; 719 } 720 C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 9/25

721 .okm-Security-Title-LeftBottomBorder { 722 border-bottom: 1px solid #A5A596; 723 border-left: 1px solid #A5A596; 724 } 725 726 /* Security popup */ 727 .okm-SecurityPopup { 728 font-size: 12px; 729 background-color: #EFEBE7; 730 border: 1px solid #110011; 731 } 732 733 .okm-Security-SelectedRow { 734 background-image: url(img/security_selected.gif); 735 background-repeat: repeat-x; 736 cursor: default; 737 } 738 739 /* Search */ 740 .okm-Search-Panel { 741 border: 1px solid #A5A596; 742 } 743 744 /* Search results */ 745 .okm-SearchResult { 746 border: 1px solid #A5A596; 747 cursor: default; 748 } 749 750 .okm-Result-Panel { 751 border: 1px solid #A5A596; 752 } 753 754 .okm-SearchResult-Title { 755 background-image: url(img/table_title.gif); 756 background-repeat: repeat; 757 color: #6D6D5F; 758 font-size: 10px; 759 text-align: left; 760 padding: 4px 4px 4px 4px; 761 height: 20; 762 cursor: default; 763 } 764 765 .okm-SearchResult-Title-Margin { 766 padding: 4px 4px 4px 4px; 767 } 768 769 .okm-SearchResult-Title-RightBorder { 770 border-right: 1px solid #A5A596; 771 } 772 773 .okm-SearchResult-Title-LeftBorder { 774 border-left: 1px solid #FFFFFF; 775 } 776 777 .okm-SearchResult-SelectedRow { 778 background-image: url(img/searchresult_selected.gif); 779 background-repeat: repeat-x; 780 cursor: default; 781 } 782 783 .okm-SearchResult-MenuPopup { 784 background-color: #E9F4FB; 785 border: 1px solid #AAAAAA; 786 padding: 1px; 787 } 788 789 /* Search save */ 790 .okm-SearchSaved { 791 cursor: default; 792 } 793 794 .okm-SearchSaved-SelectedRow { 795 background-image: url(img/searchsaved_selected.gif); 796 background-repeat: repeat-x; 797 cursor: default; 798 } 799 800 .okm-SearchSaved-MenuPopup { C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 10/25

801 background-color: #E9F4FB; 802 border: 1px solid #AAAAAA; 803 padding: 1px; 804 } 805 806 /* Tab Properties */ 807 .okm-Properties-Tab { 808 border: 1px solid #A5A596; 809 } 810 811 /* Buttons */ 812 .okm-Button, .okm-NoButton, .okm-YesButton, .okm-AddButton, .okm-DeleteButton{ 813 background-color: #0071B9; 814 border: 1px solid #3079ED; 815 border-radius: 5%; 816 color: #FFFFFF; 817 font-weight: bold; 818 height: 22px; 819 font-size: 12px; 820 font-family: tahoma, verdana, arial, sans-serif; 821 cursor: pointer; 822 cursor: hand; 823 } 824 825 /*.okm-NoButton { 826 background-color: #0071B9; 827 border: 1px solid #3079ED; 828 border-radius: 5%; 829 color: #FFFFFF; 830 font-weight: bold; 831 height: 22px; 832 font-size: 12px; 833 font-family: verdana, arial, sans-serif; 834 cursor: pointer; 835 cursor: hand; 836 /*background-image: url("img/icon/security/no.gif"); 837 background-repeat: no-repeat; 838 padding-left: 17px; 839 background-position: 2px center; 840 }*/ 841 842 .okm-Button:hover, .okm-NoButton:hover, .okm-YesButton:hover, .okm-AddButton:hover, .okm-DeleteButton:hover { 843 background-color: #FFFFFF; 844 color: #0071B9; 845 border: 2px solid #0071B9; 846 } 847 848 /*.okm-YesButton { 849 background-color: #0071B9; 850 border: 1px solid #3079ED; 851 border-radius: 5%; 852 color: #FFFFFF; 853 font-weight: bold; 854 height: 22px; 855 font-size: 12px; 856 font-family: tahoma, verdana, arial, sans-serif; 857 cursor: pointer; 858 cursor: hand; 859 background-image: url("img/icon/security/yes.gif"); 860 background-repeat: no-repeat; 861 padding-left: 17px; 862 background-position: 2px center; 863 } 864 865 .okm-YesButton:hover { 866 background-color: #FFFFFF; 867 color: #0071B9; 868 border: 2px solid #0071B9; 869 }*/ 870 871 /*.okm-AddButton { 872 background-color: #0071B9; 873 border: 1px solid #3079ED; 874 border-radius: 5%; 875 color: #FFFFFF; 876 font-weight: bold; 877 height: 22px; 878 font-size: 12px; 879 font-family: tahoma, verdana, arial, sans-serif; 880 cursor: pointer; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 11/25

881 cursor: hand; 882 background-image: url("img/icon/actions/add.gif"); 883 background-repeat: no-repeat; 884 padding-left: 17px; 885 background-position: 2px center; 886 } 887 888 .okm-AddButton:hover { 889 background-color: #FFFFFF; 890 color: #0071B9; 891 border: 2px solid #0071B9; 892 }*/ 893 894 /*.okm-DeleteButton { 895 background-color: #0071B9; 896 border: 1px solid #3079ED; 897 border-radius: 5%; 898 color: #FFFFFF; 899 font-weight: bold; 900 height: 22px; 901 font-size: 12px; 902 font-family: tahoma, verdana, arial, sans-serif; 903 cursor: pointer; 904 cursor: hand; 905 background-image: url("img/icon/actions/delete.gif"); 906 background-repeat: no-repeat; 907 padding-left: 17px; 908 background-position: 2px center; 909 } 910 911 .okm-DeleteButton:hover { 912 background-color: #FFFFFF; 913 color: #0071B9; 914 border: 2px solid #0071B9; 915 }*/ 916 917 .okm-DownloadZipButton { 918 background-color: #0071B9; 919 border: 1px solid #3079ED; 920 height: 18px; 921 border-radius: 5%; 922 color: #FFFFFF; 923 font-size: 12px; 924 font-weight: bold; 925 font-family: tahoma, verdana, arial, sans-serif; 926 cursor: pointer; 927 cursor: hand; 928 background-image: url("img/icon/actions/export.gif"); 929 background-repeat: no-repeat; 930 padding-left: 17px; 931 background-position: 2px center; 932 } 933 934 .okm-HomeButton { 935 background-color: #0071B9; 936 border: 1px solid #3079ED; 937 height: 18px; 938 border-radius: 5%; 939 color: #FFFFFF; 940 font-size: 12px; 941 font-weight: bold; 942 font-family: tahoma, verdana, arial, sans-serif; 943 cursor: pointer; 944 cursor: hand; 945 background-image: url("img/icon/actions/home.png"); 946 background-repeat: no-repeat; 947 padding-left: 17px; 948 background-position: 2px center; 949 } 950 951 .okm-DownloadButton { 952 background-color: #0071B9; 953 border: 1px solid #3079ED; 954 height: 18px; 955 border-radius: 5%; 956 color: #FFFFFF; 957 font-size: 12px; 958 font-weight: bold; 959 font-family: tahoma, verdana, arial, sans-serif; 960 cursor: pointer; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 12/25

961 cursor: hand; 962 background-image: url("img/icon/actions/download.gif"); 963 background-repeat: no-repeat; 964 padding-left: 17px; 965 background-position: 2px center; 966 } 967 968 .okm-ViewButton { 969 background-color: #0071B9; 970 border: 1px solid #3079ED; 971 height: 18px; 972 border-radius: 5%; 973 color: #FFFFFF; 974 font-size: 12px; 975 font-weight: bold; 976 font-family: tahoma, verdana, arial, sans-serif; 977 cursor: pointer; 978 cursor: hand; 979 background-image: url("img/icon/actions/preview.png"); 980 background-repeat: no-repeat; 981 padding-left: 19px; 982 background-position: 2px center; 983 } 984 985 .okm-ChangeButton { 986 background-color: #0071B9; 987 border: 1px solid #3079ED; 988 height: 18px; 989 border-radius: 5%; 990 color: #FFFFFF; 991 font-size: 12px; 992 font-weight: bold; 993 font-family: tahoma, verdana, arial, sans-serif; 994 cursor: pointer; 995 cursor: hand; 996 background-image: url("img/icon/actions/edit.png"); 997 background-repeat: no-repeat; 998 padding-left: 17px; 999 background-position: 2px center;1000 }1001 1002 .okm-ChangeButton:hover, .okm-ViewButton:hover, .okm-DownloadButton:hover, .okm-HomeButton:hover, .okm-DownloadZipButton:hover {1003 color: #0071B9;1004 font-weight: bold;1005 background-color: #FFFFFF;1006 }1007 1008 .okm-CompactButton {1009 background-color: #0071B9;1010 border: 1px solid #3079ED;1011 height: 18px;1012 border-radius: 5%;1013 color: #FFFFFF;1014 font-size: 12px;1015 font-weight: bold;1016 font-family: tahoma, verdana, arial, sans-serif;1017 cursor: pointer;1018 cursor: hand;1019 background-image: url("img/icon/actions/compact.png");1020 background-repeat: no-repeat;1021 padding-left: 17px;1022 background-position: 2px center;1023 }1024 1025 .okm-CleanButton {1026 background-color: #0071B9;1027 border: 1px solid #3079ED;1028 height: 18px;1029 border-radius: 5%;1030 color: #FFFFFF;1031 font-size: 12px;1032 font-weight: bold;1033 font-family: tahoma, verdana, arial, sans-serif;1034 cursor: pointer;1035 cursor: hand;1036 background-image: url("img/icon/actions/clean.png");1037 background-repeat: no-repeat;1038 padding-left: 17px;1039 background-position: 2px center;1040 } C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 13/25

1041 1042 .okm-SearchButton {1043 background-color: #0071B9;1044 border: 1px solid #3079ED;1045 height: 18px;1046 border-radius: 5%;1047 color: #FFFFFF;1048 font-size: 12px;1049 font-weight: bold;1050 font-family: tahoma, verdana, arial, sans-serif;1051 cursor: pointer;1052 cursor: hand;1053 background-image: url("img/icon/actions/search.png");1054 background-repeat: no-repeat;1055 padding-left: 17px;1056 background-position: 2px center;1057 }1058 1059 .okm-SaveButton {1060 background-color: #0071B9;1061 border: 1px solid #3079ED;1062 border-radius: 5%;1063 color: #FFFFFF;1064 font-weight: bold;1065 height: 22px;1066 font-size: 12px;1067 font-family: tahoma, verdana, arial, sans-serif;1068 cursor: pointer;1069 cursor: hand;1070 /*background-image: url("img/icon/actions/save.png");1071 background-repeat: no-repeat;1072 padding-left: 17px;1073 background-position: 2px center;*/1074 }1075 1076 .okm-CommentButton {1077 background-color: #0071B9;1078 border: 1px solid #3079ED;1079 height: 18px;1080 border-radius: 5%;1081 color: #FFFFFF;1082 font-size: 12px;1083 font-weight: bold;1084 font-family: tahoma, verdana, arial, sans-serif;1085 cursor: pointer;1086 cursor: hand;1087 background-image: url("img/icon/actions/comment_add.png");1088 background-repeat: no-repeat;1089 padding-left: 17px;1090 background-position: 2px center;1091 }1092 1093 .okm-CompactButton:hover, .okm-CleanButton:hover, .okm-SearchButton:hover, .okm-CommentButton:hover {1094 color: #0071B9;1095 font-weight: bold;1096 background-color: #FFFFFF;1097 }1098 1099 /* Iframe */1100 .okm-Iframe {1101 border: 1px solid #A5A596;1102 font-size: 12px;1103 font-family: tahoma, verdana, arial, sans-serif;1104 width: 100%;1105 height: 100%;1106 }1107 1108 /* Inputs */1109 .okm-Input {1110 border: 1px solid #A5A596;1111 font-size: 10px;1112 font-family: tahoma, verdana, arial, sans-serif;1113 -moz-user-select: normal;1114 -khtml-user-select: normal;1115 user-select: normal;1116 white-space: nowrap;1117 background-color: #fff;1118 }1119 1120 .okm-Input-System { C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 14/25

1121 border: 1px solid #A5A596;1122 font-size: 10px;1123 font-family: tahoma, verdana, arial, sans-serif;1124 -moz-user-select: normal;1125 -khtml-user-select: normal;1126 user-select: normal;1127 background-color: #f00;1128 color: white;1129 font-weight: bold;1130 }1131 1132 .okm-Input-Error {1133 color : red;1134 font-weight: bold;1135 }1136 1137 .okm-Input-Ok {1138 color : green;1139 font-weight: bold;1140 }1141 1142 .okm-Input-Warning {1143 color : #306aff;1144 font-weight: bold;1145 }1146 1147 /* TextArea */1148 .okm-TextArea {1149 border: 1px solid #A5A596;1150 font-size: 10px;1151 font-family: tahoma, verdana, arial, sans-serif;1152 background-color: #fff;1153 }1154 1155 /* Selects */1156 .okm-Select {1157 border: 1px solid #A5A596;1158 font-size: 10px;1159 font-family: tahoma, verdana, arial, sans-serif;1160 }1161 1162 /* CheckBox */1163 .okm-CheckBox input {1164 border: 1px solid #A5A596;1165 width: 1em;1166 height: 1em;1167 padding: 0;1168 margin: 0;1169 }1170 1171 /* fancyfileupload */1172 .fancyfileupload-pending {1173 font-family: arial;1174 font-size: 10px;1175 background: #ffbd3f;1176 width: 200px;1177 padding: 5px;1178 }1179 1180 .fancyfileupload-loading {1181 font-family: arial;1182 font-size: 10px;1183 background: #ffbd3f;1184 width: 200px;1185 padding: 5px;1186 }1187 1188 .fancyfileupload-loaded {1189 font-family: arial;1190 font-size: 10px;1191 background: #90ee90;1192 width: 200px;1193 padding: 5px;1194 }1195 1196 .fancyfileupload-failed {1197 font-family: arial;1198 font-size: 10px;1199 background: #ff3f3f;1200 width: 200px; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 15/25

1201 padding: 5px;1202 }1203 1204 /* Draggable */1205 .okm-Draggable {1206 background-color: #C3D9FF;1207 }1208 1209 /* Disable text selection */1210 .okm-DisableSelect { 1211 -webkit-user-select: none;1212 -khtml-user-select: none;1213 -moz-user-select: -moz-none;;1214 -o-user-select: none;1215 user-select: none;1216 }1217 1218 /* Enable text selection */1219 .okm-EnableSelect {1220 -webkit-user-select: text !important;1221 -khtml-user-select: text !important;1222 -moz-user-select: text !important;1223 -o-user-select: text !important;1224 user-select: text !important;1225 }1226 1227 /* Bookmark */1228 .okm-Bookmark-Panel {1229 border: 1px solid #A5A596;1230 background: white;1231 }1232 1233 /* ScrollTable */1234 .gwt-ScrollTable {1235 background: white;1236 }1237 1238 .gwt-ScrollTable .headerWrapper {1239 background-color: #C3D9FF;1240 /*background-image: url(img/table_title.gif);1241 background-repeat: repeat;*/1242 }1243 1244 .gwt-ScrollTable .headerTable tr {1245 /*background-image: url(img/table_title.gif);1246 background-repeat: repeat;*/1247 background-color: #C3D9FF;1248 border: 1px solid #E9F4FB;1249 color: #000000;1250 font-size: 10px;1251 text-align: center;1252 height: 22px;1253 cursor: default;1254 }1255 1256 .gwt-ScrollTable .headerTable tr td {1257 border-left: 1px solid white;1258 border-right: 1px solid #A5A596;1259 white-space: nowrap;1260 margin: 0px;1261 overflow: hidden;1262 height: 22px;1263 }1264 1265 .gwt-ScrollTable .headerTable .gwt-controller tr td {1266 border-left: 0px;1267 border-right: 0px;1268 }1269 1270 .gwt-controller .separator {1271 border-right: 1px solid white;1272 border-left: 1px solid #A5A596;1273 }1274 1275 .gwt-ScrollTable .dataTable tr {1276 background: white;1277 }1278 1279 .gwt-ScrollTable .dataTable tr:hover {1280 background-color: #e0ecff; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 16/25

1281 }1282 1283 .gwt-ScrollTable .dataTable tr:hover td {1284 border-left: 1px solid #e0ecff;1285 border-right: 1px solid #e0ecff;1286 }1287 1288 .gwt-ScrollTable .dataTable tr.selected {1289 background-color: #E9F4FB;1290 height: 22px;1291 }1292 1293 .gwt-ScrollTable .dataTable tr.selected td {1294 border-left: 1px solid #E9F4FB;1295 border-right: 1px solid #E9F4FB;1296 }1297 1298 .gwt-ScrollTable .dataTable tr td {1299 border-left: 1px solid white;1300 border-right: 1px solid white;1301 height: 20px;1302 cursor: default;1303 white-space: nowrap;1304 margin: 0px;1305 overflow: hidden;1306 }1307 1308 /**1309 * CalendarWidget 1310 */1311 .CalendarWidget {1312 border: 1px solid #0071B9;1313 background-color: #E9F4FB;1314 padding: 2px;1315 font-family: Tahoma, Geneva, sans-serif;1316 }1317 1318 .CalendarWidget .navbar {1319 width: 100%;1320 background-color: #E9F4FB;1321 vertical-align: middle;1322 border-bottom: 1px solid #ACA899;1323 }1324 1325 .CalendarWidget .navbar .gwt-Button {1326 padding-left: 5px;1327 padding-right: 5px;1328 }1329 1330 .CalendarWidget .table {1331 font: 10pt sans-serif;1332 text-align: center;1333 background-color: #E9F4FB;1334 }1335 1336 .CalendarWidget .weekheader {1337 background-color: #C3D9FF;1338 }1339 1340 .CalendarWidget .weekheader .days {1341 width: 3em;1342 }1343 1344 .CalendarWidget .cell {1345 cursor: pointer;1346 }1347 1348 .CalendarWidget .cell .gwt-HTML {1349 border: 1px solid #ACA899;1350 background-color: #EEE;1351 }1352 1353 .CalendarWidget .cell .gwt-HTML span {1354 width: 100%;1355 height: 100%;1356 line-height: 2em;1357 }1358 1359 .CalendarWidget .today .gwt-HTML {1360 background-color: #C3D9FF; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 17/25

1361 }1362 1363 .CalendarWidget .day .gwt-HTML {1364 border: 1px solid #C3D9FF;1365 } 1366 1367 /**1368 * DashBoard Widget 1369 */1370 .okm-DashboardWidget .topLeft {1371 background-image: url(img/topLeftHeader-new.gif);1372 background-repeat: no-repeat;1373 cursor: pointer;1374 }1375 1376 .okm-DashboardWidget .topCenter {1377 background-image: url(img/topCenterHeader-new.gif);1378 background-repeat: repeat-x;1379 text-align: center;1380 cursor: pointer;1381 }1382 1383 .okm-DashboardWidget .topRight {1384 background-image: url(img/topRightHeader-new.gif);1385 background-repeat: no-repeat;1386 cursor: pointer;1387 }1388 1389 .okm-DashboardWidget .data {1390 background-color: white;1391 border-left: 1px solid #A5A596;1392 border-bottom: 1px solid #A5A596;1393 border-right: 1px solid #A5A596; 1394 }1395 1396 .okm-DashboardWidget .data tr:hover {1397 background-color: #e0ecff;1398 }1399 1400 .okm-DashboardWidget .data td {1401 height: 20;1402 padding: 0px 4px;1403 }1404 1405 /**1406 * Hyperlink 1407 */1408 .okm-Hyperlink {1409 text-decoration: underline;1410 cursor: pointer; 1411 cursor: hand;1412 }1413 .okm-Hyperlink a:hover {1414 text-decoration: underline;1415 color: blue;1416 }1417 1418 .okm-Hyperlink a {1419 text-decoration: underline;1420 color: black;1421 }1422 1423 /**1424 * News1425 */1426 .okm-NotViewed {1427 font-weight: bold;1428 }1429 1430 /**1431 * Workflow form panel1432 */1433 .okm-WorkflowFormPanel {1434 background-color: #E9F4FB;1435 border-left: 1px solid #A5A596;1436 }1437 1438 .okm-WorkflowFormPanel-Title {1439 white-space: nowrap;1440 padding: 2px 7px 2px 7px; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 18/25

1441 background-image: url(img/topCenterHeader-new.gif);1442 background-repeat: repeat-x;1443 cursor: pointer;1444 }1445 1446 /**1447 * Document Notes1448 */1449 .okm-Notes-Line {1450 background-image: url(img/notes_back.gif);1451 background-repeat: repeat-x;1452 }1453 1454 /**1455 * PushButton1456 */1457 .gwt-PushButton-up,1458 .gwt-PushButton-up-hovering,1459 .gwt-PushButton-up-disabled,1460 .gwt-PushButton-down,1461 .gwt-PushButton-down-hovering,1462 .gwt-PushButton-down-disabled {1463 text-align: center;1464 vertical-align: middle;1465 margin: 0;1466 text-decoration: none;1467 background: url("img/hborder.png") repeat-x 0px -27px;1468 }1469 1470 .gwt-PushButton-up,1471 .gwt-PushButton-up-hovering,1472 .gwt-PushButton-up-disabled {1473 padding: 3px 5px 0px 5px;1474 height: 20px;1475 }1476 1477 .gwt-PushButton-up {1478 border: 1px outset #ccc;1479 cursor: pointer;1480 cursor: hand;1481 }1482 1483 .gwt-PushButton-up-hovering {1484 border: 1px outset;1485 border-color: #9cf #69e #69e #7af;1486 cursor: pointer;1487 cursor: hand;1488 }1489 1490 .gwt-PushButton-up-disabled {1491 border: 1px outset #ccc;1492 cursor: default;1493 opacity: .5;1494 filter: alpha(opacity=40);1495 zoom: 1;1496 }1497 1498 .gwt-PushButton-down,1499 .gwt-PushButton-down-hovering,1500 .gwt-PushButton-down-disabled {1501 padding: 4px 4px 2px 6px;1502 }1503 1504 .gwt-PushButton-down {1505 border: 1px inset #666;1506 cursor: pointer;1507 cursor: hand;1508 }1509 1510 .gwt-PushButton-down-hovering {1511 border: 1px inset;1512 border-color: #9cf #69e #69e #7af;1513 cursor: pointer;1514 cursor: hand;1515 }1516 1517 .gwt-PushButton-down-disabled {1518 border: 1px outset #ccc;1519 cursor: default;1520 opacity: 0.5; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 19/25

1521 filter: alpha(opacity=40);1522 zoom: 1;1523 }1524 1525 /**1526 * ToggleButton1527 */1528 .gwt-ToggleButton-up,1529 .gwt-ToggleButton-up-hovering,1530 .gwt-ToggleButton-up-disabled,1531 .gwt-ToggleButton-down,1532 .gwt-ToggleButton-down-hovering,1533 .gwt-ToggleButton-down-disabled {1534 margin: 0;1535 text-decoration: none;1536 background: url("img/hborder.png") repeat-x 0px -27px;1537 }1538 1539 .gwt-ToggleButton-up,1540 .gwt-ToggleButton-up-hovering,1541 .gwt-ToggleButton-up-disabled {1542 padding: 3px 5px 0px 5px;1543 height: 20px;1544 }1545 1546 .gwt-ToggleButton-up {1547 border: 1px outset #ccc;1548 cursor: pointer;1549 cursor: hand;1550 }1551 1552 .gwt-ToggleButton-up-hovering {1553 border: 1px outset;1554 border-color: #9cf #69e #69e #7af;1555 cursor: pointer;1556 cursor: hand;1557 }1558 1559 .gwt-ToggleButton-up-disabled {1560 border: 1px outset #ccc;1561 cursor: default;1562 opacity: .5;1563 zoom: 1;1564 filter: alpha(opacity=40);1565 }1566 1567 .gwt-ToggleButton-down,1568 .gwt-ToggleButton-down-hovering,1569 .gwt-ToggleButton-down-disabled {1570 padding: 4px 4px 2px 6px;1571 }1572 1573 .gwt-ToggleButton-down {1574 background-position: 0 -513px;1575 border: 1px inset #ccc;1576 cursor: pointer;1577 cursor: hand;1578 }1579 1580 .gwt-ToggleButton-down-hovering {1581 background-position: 0 -513px;1582 border: 1px inset;1583 border-color: #9cf #69e #69e #7af;1584 cursor: pointer;1585 cursor: hand;1586 }1587 1588 .gwt-ToggleButton-down-disabled {1589 background-position: 0 -513px;1590 border: 1px inset #ccc;1591 cursor: default;1592 opacity: .5;1593 zoom: 1;1594 filter: alpha(opacity=40);1595 }1596 1597 /* RichTextArea */1598 .RichTextToolbar {1599 background: #E9F4FB;1600 border: 1px #0071B9; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 20/25

1601 padding: 1px;1602 margin: 0px;1603 }1604 1605 1606 /* Mail */1607 .okm-Mail {1608 background-color: #E9F4FB;1609 }1610 1611 .okm-Mail-White {1612 background-color: #FFFFFF;1613 }1614 1615 .okm-Mail-Link {1616 cursor: pointer; 1617 cursor: hand;1618 }1619 1620 .okm-Mail-MenuPopup {1621 background-color: #E9F4FB;1622 border: 1px solid #AAAAAA;1623 padding: 1px;1624 }1625 1626 /* Horizontal split panel */1627 .hsplitter { 1628 background-image: url(img/separator_points.gif);1629 background-repeat: no-repeat;1630 background-position: 50% 50%;1631 cursor: col-resize;1632 font-family: "Small Fonts";1633 font-size: 4px;1634 background-color: #E9F4FB;1635 horizontal-align: 50%;1636 border-left: 1px solid #A5A596;1637 border-right: 1px solid #A5A596;1638 width: 10px;1639 }1640 1641 .okm-HorizontalSplitPanel .hsplitter { 1642 background-image: url(img/separator_points.gif);1643 background-repeat: no-repeat;1644 background-position: 50% 50%;1645 cursor: col-resize;1646 font-family: "Small Fonts";1647 font-size: 4px;1648 background-color: #E9F4FB;1649 horizontal-align: 50%;1650 border: 0px; 1651 width: 10px;1652 }1653 1654 /* Vertical split panel */1655 .vsplitter { 1656 background-image: url(img/horizontal_separator_points.gif);1657 background-repeat: no-repeat;1658 background-position: 50% 50%;1659 cursor: row-resize;1660 font-family: "Small Fonts";1661 font-size: 4px;1662 background-color: #E9F4FB;1663 height: 10px;1664 vertical-align: 50%;1665 }1666 1667 /* KeyMapControl panel */1668 .okm-KeyMapControl {1669 background-color: #C3D9FF;1670 border-bottom: 1px solid #A5A596;1671 }1672 1673 .okm-PaginationControl {1674 background-color: #C3D9FF;1675 border-top: 1px solid #A5A596;1676 }1677 1678 .okm-KeyMap-Selected {1679 background-image: url(img/filebrowser_selected.gif);1680 background-repeat: repeat-x; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 21/25

1681 padding: 1px 5px;1682 border: 1px solid #FFFFFF;1683 }1684 1685 .okm-KeyMap-Gray {1686 background-color: #E9F4FB;1687 padding: 1px 5px;1688 border: 1px solid #FFFFFF;1689 }1690 1691 .okm-KeyMap-Suggest {1692 background-color: #FFFFFF;1693 font-size: 10px;1694 font-family: tahoma, verdana, arial, sans-serif;1695 -moz-user-select: normal;1696 -khtml-user-select: normal;1697 user-select: normal;1698 white-space: nowrap;1699 }1700 1701 .okm-KeyMap-ImageHover {1702 cursor: pointer; 1703 cursor: hand;1704 }1705 1706 /* Suggest Box */1707 .gwt-SuggestBox {1708 padding: 2px;1709 }1710 1711 .gwt-SuggestBoxPopup {1712 background-color: #E9F4FB;1713 border: 1px solid #999;1714 }1715 1716 .gwt-SuggestBoxPopup .item {1717 padding: 2px 6px;1718 color: #424242;1719 cursor: default;1720 }1721 1722 .gwt-SuggestBoxPopup .item-selected {1723 background: #b7d6f6;1724 }1725 1726 .gwt-SuggestBoxPopup .suggestPopupContent {1727 background: white;1728 }1729 1730 /* Keyword widget */1731 .okm-KeywordWidget-Header {1732 background-color: #C3D9FF;1733 border-bottom: 1px solid #A5A596;1734 cursor: pointer;1735 }1736 1737 /* Normal Table */1738 .okm-Table-SelectedRow {1739 background-color: #E9F4FB;1740 cursor: default;1741 }1742 1743 .okm-Table-BottomBorder {1744 border-bottom: 1px solid #A5A596;1745 }1746 1747 /* Progress Bar */1748 .gwt-ProgressBar-shell {1749 border: 1px solid #faf9f7;1750 border-right: 1px solid #848280;1751 border-bottom: 1px solid #848280;1752 background-color: #AAAAAA;1753 height: 14pt;1754 width: 50%;1755 }1756 1757 .gwt-ProgressBar-shell .gwt-ProgressBar-bar {1758 background-color: #67A7E3;1759 }1760 C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 22/25

1761 .gwt-ProgressBar-shell .gwt-ProgressBar-text {1762 padding: 0px;1763 margin: 0px;1764 color: white;1765 top: 3px;1766 }1767 1768 /* Tag cloud */1769 .okm-cloudWrap {1770 text-align: center;1771 margin: auto;1772 }1773 1774 .okm-cloudTags {1775 float: left;1776 padding: 0px 5px;1777 color: #0071B9;1778 font-size: 5pt;1779 font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; 1780 height: 30px;1781 text-decoration:none;1782 } 1783 1784 .okm-cloudTags a {1785 color: #0071B9;1786 text-decoration: none;1787 font-size: 5pt;1788 position: relative;1789 text-decoration:none;1790 } 1791 1792 .okm-cloudSeparator {1793 background-color: #C3D9FF;1794 border-top: 1px solid #A5A596;1795 border-bottom: 1px solid #A5A596;1796 }1797 1798 /* Hack for disabled form fields visibility in Firefox */1799 [disabled] {1800 color: #777;1801 background-color: #ddd;1802 }1803 1804 /* Stack Panel */1805 .okm-DashboardStackPanel {1806 border-right: 1px solid #A5A596;1807 }1808 1809 .okm-DashboardStackPanel .gwt-StackPanelItem {1810 height: 19px;1811 background-image: url(img/stackpanel_back.gif);1812 background-repeat: repeat;1813 }1814 1815 .okm-DashboardStackPanel .gwt-StackPanelItem-selected {1816 height: 19px;1817 background-image: url(img/stackpanel_back.gif);1818 background-repeat: repeat;1819 }1820 1821 /* Inputs */1822 .okm-Left-Bottom-Border {1823 border-left: 1px solid #A5A596;1824 border-bottom: 1px solid #A5A596;1825 font-size: 10px;1826 font-family: tahoma, verdana, arial, sans-serif;1827 -moz-user-select: normal;1828 -khtml-user-select: normal;1829 user-select: normal;1830 white-space: nowrap;1831 }1832 1833 .okm-Left-Top-Border {1834 border-left: 1px solid #A5A596;1835 border-top: 1px solid #A5A596;1836 font-size: 10px;1837 font-family: tahoma, verdana, arial, sans-serif;1838 -moz-user-select: normal;1839 -khtml-user-select: normal;1840 user-select: normal; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 23/25

1841 white-space: nowrap;1842 }1843 1844 .okm-validationFailedBorder {1845 border: 2px solid #ff0000; 1846 }1847 1848 .okm-validationFailedText {1849 color: #ff0000;1850 font-weight: bold; 1851 }1852 1853 /* TabLayoutPanel */1854 .gwt-TabLayoutPanelTabs {1855 white-space: nowrap;1856 background-color: #0071B9;1857 font-size: smaller;1858 border-bottom: 1px solid #bbb;1859 height: 20px;1860 }1861 1862 .gwt-TabLayoutPanelTab {1863 white-space: nowrap;1864 border-top: 1px solid #0071B9;1865 border-left: 1px solid #0071B9;1866 border-right: 1px solid #666;1867 padding: 2px 7px 2px 7px;1868 background-color: #0071B9;1869 cursor: pointer; 1870 cursor: hand;1871 height: 20px;1872 }1873 1874 .gwt-TabLayoutPanelTab .gwt-Label{1875 color: white;1876 }1877 1878 .gwt-TabLayoutPanelTab-selected {1879 white-space: nowrap;1880 font-weight: bold;1881 background-image: none;1882 background-color: #C3D9FF;1883 border-top: 1px solid #bbb;1884 border-left: 1px solid #bbb;1885 border-right: 1px solid #666;1886 padding: 2px 7px 2px 7px;1887 cursor: pointer; 1888 cursor: hand;1889 height: 20px;1890 }1891 1892 .gwt-TabLayoutPanelTab-selected .gwt-Label{1893 color: black;1894 }1895 1896 /* forum */1897 .okm-Forum-Topic {1898 color: #105289;1899 font-size: 1.2em;1900 font-weight: bold;1901 text-decoration: none;1902 cursor: pointer; 1903 cursor: hand;1904 }1905 1906 .okm-Forum-User {1907 color : #105289; 1908 }1909 1910 .okm-Forum-Gray {1911 color: #898989;1912 }1913 1914 .highlight {1915 color: #7596CF;1916 font-weight: bold;1917 font-size: 1.3em;1918 }1919 1920 /* white panel */ C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 24/25

1921 .whitePanel {1922 background-color: white;1923 }1924 1925 /* Chrome fix for button images */1926 @media screen and (-webkit-min-device-pixel-ratio:0) {1927 .okm-NoButton, .okm-YesButton, .okm-AddButton, .okm-DeleteButton, .okm-DownloadZipButton,1928 .okm-HomeButton, .okm-DownloadButton, .okm-ViewButton, .okm-ChangeButton, .okm-CompactButton,1929 .okm-CleanButton, .okm-SearchButton, .okm-SaveButton, .okm-CommentButton {1930 padding-left: 20px;1931 }1932 }1933 1934 /* Explorer fix for button images */1935 

C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\frontend\styles-new.css: 25/25

1 @CHARSET "UTF-8"; 2 3 body { 4 background-color: #FFFFFF; 5 margin: 0; 6 padding: 0; 7 width: 100%; 8 } 9 10 body, td, a, div, .p { 11 font-size: 12px; 12 font-family: Tahoma, Verdana, Arial, sans-serif; 13 } 14 15 a:link, .w, .w a:link { 16 color: #0071B9; 17 text-decoration: none; 18 } 19 20 a:visited { 21 color: #551a8b; 22 text-decoration: none; 23 } 24 25 a:active { 26 color: #FF0000; 27 text-decoration: none; 28 } 29 30 a:hover { 31 text-decoration: underline; 32 } 33 34 a.button { 35 background-color: #E9F4FB; 36 border: 1px solid #0071B9; 37 border-radius: 5%; 38 padding: 3px 5px 3px 5px; 39 font-size: 12px; 40 font-weight: bold; 41 font-family: Tahoma, Verdana, Arial, sans-serif; 42 } 43 44 h1 { 45 text-align: center; 46 color: #0071B9; 47 } 48 49 h2 { 50 text-align: left; 51 padding-left: 10px; 52 color: #0071B9; 53 } 54 55 img { 56 border: 0; 57 } 58 59 ul { 60 margin: 0px; 61 padding-left: 30px; 62 } 63 64 textarea, input, select { 65 border: 1px solid #A5A596; 66 font-size: 12px; 67 font-family: Tahoma, Verdana, Arial, sans-serif; 68 } 69 70 input.submit { 71 background-color: #E5E5E1; 72 border: 1px solid #A5A596; 73 font-size: 12px; 74 font-family: Tahoma, Verdana, Arial, sans-serif; 75 } 76 77 input.but { 78 background-color: #0071B9; 79 border: 1px solid #3079ED; 80 border-radius: 5%; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\admin\css\style-nou.css: 1/4

81 color: #FFFFFF; 82 font-weight: bold; 83 cursor: pointer; 84 min-width: 55px; 85 height: 22px; 86 } 87 88 input.but:hover { 89 background-color: #FFFFFF; 90 color: #0071B9; 91 border: 2px solid #0071B9; 92 } 93 94 input#fumi:hover { 95 cursor: pointer; 96 font-weight: bold; 97 } 98 99 .task:hover{100 cursor: pointer;101 }102 103 .ui-dialog{104 font-size: 14px;105 font-family: Tahoma, sans-serif;106 background: #E9F4FB;107 border: #0071B9;108 }109 110 .ui-dialog .ui-dialog-titlebar {111 background: #0071B9;112 border: #0071B9;113 color: #FFFFFF;114 }115 116 .ui-dialog ui-dialog-titlebar-close{117 background: #FFFFFF;118 color: #0071B9;119 }120 121 .ui-widget-content {122 border: 1px solid #0071B9;123 }124 125 table.form {126 margin-left: auto;127 margin-right: auto;128 border: 1px solid #0071B9;129 background-color: #E9F4FB;130 }131 132 table.form#home {133 border-radius: 5%;134 text-align: center;135 width: 250px;136 height: 200px;137 }138 139 table.form td.imp {140 color: #0071B9;141 }142 143 table.form tr.fuzzy {144 background-color: #C3D9FF;145 }146 147 table.form th {148 font-weight: bold;149 font-size: 12px;150 height: 16px;151 background-image: url('../img/table_title.gif');152 border: 1px solid #A5A596;153 }154 155 table.results {156 margin-left: auto;157 margin-right: auto;158 margin-bottom: 15px;159 border: 1px solid #789DB3;160 border-collapse: collapse; C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\admin\css\style-nou.css: 2/4

161 }162 163 table.results th {164 font-weight: bold;165 font-size: 12px;166 height: 16px;167 background-image: url('../img/table_title.gif');168 border: 1px solid #A5A596;169 }170 171 table.results th.sort:hover {172 text-decoration: underline;173 cursor: pointer;174 }175 176 table.results td {177 padding-left: 10px;178 border-right: 1px solid white;179 border-left: 1px solid white;180 }181 182 table.results td.c {183 padding-left: 0px;184 text-align: center;185 }186 187 table.results tr.odd {188 background-color: #E9F4FB;189 }190 191 table.results tr.even {192 background-color: #FFFFFF;193 }194 195 table.results tr.fuzzy {196 background-color: #C3D9FF;197 }198 199 table.results tr.warn {200 background-color: #FF7979;201 }202 203 table.results tr.form {204 background-color: #789DB3;205 }206 207 legend {208 font-weight: bold;209 }210 211 div.error {212 color: red;213 text-align: center;214 }215 216 div.warn {217 color: maroon;218 text-align: left;219 }220 221 div.ok {222 color: green;223 text-align: left;224 }225 226 span.highlight {227 color: red;228 font-weight: bold;229 }230 231 input.vanadium-invalid {232 border: 1px solid #f00;233 }234 235 span.vanadium-invalid {236 color: #f00;237 margin-left: 5px;238 }239 240 #breadcrumb { C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\admin\css\style-nou.css: 3/4

241 font: 12px Tahoma, Arial, Helvetica, sans-serif;242 background-color: #E9F4FB;243 height: 20px;244 line-height: 20px;245 color: #FFFFFF;246 border: solid 1px #E9F4FB;247 overflow: hidden;248 margin: 0px;249 padding: 0px;250 }251 252 #breadcrumb li.action {253 list-style-type: none;254 display: inline-block;255 float: right;256 }257 258 #breadcrumb li.action {259 background-image: url('../img/table_title.gif');260 color: #0071B9;261 background-color: #E9F4FB;262 }263 264 #breadcrumb li.action > a {265 display: inline-block;266 background-image: url('../img/bc_vertical_separator.gif'); 267 background-repeat: no-repeat; 268 background-position: left;269 padding-left: 10px;270 padding-right: 10px;271 text-decoration: none;272 color: #0071B9;273 outline: none;274 background-color: #E9F4FB275 }276 277 #breadcrumb li.path {278 list-style-type: none;279 padding-left: 10px;280 display: inline-block;281 float: left;282 color: #0071B9;283 background-color: #E9F4FB;284 }285 286 #breadcrumb li.path > a {287 display: inline-block;288 background-image: url('../img/bc_separator.gif'); 289 background-repeat: no-repeat; 290 background-position: right;291 padding-right: 15px;292 text-decoration: none;293 color: #0071B9;294 outline: none;295 }296 297 #breadcrumb a:hover {298 color: #90A6CC;299 }

C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\admin\css\style-nou.css: 4/4

Appendix E

JSP files

This appendix includes the user list.jsp file, one of the 87 JSP files of the administrationdesktop which have been modified in this project.

83

1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <%@ page import="com.openkm.servlet.admin.BaseServlet" %> 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 4 <%@ taglib uri="http://www.openkm.com/tags/utils" prefix="u" %> 5 <?xml version="1.0" encoding="UTF-8" ?> 6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 7 <html xmlns="http://www.w3.org/1999/xhtml"> 8 <head> 9 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 10 <link rel="Shortcut icon" href="favicon.ico" /> 11 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 12 <link rel="stylesheet" type="text/css" href="css/style-nou.css" /> 13 <link rel="stylesheet" type="text/css" href="css/fixedTableHeader.css" /> 14 <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> 15 <script type="text/javascript" src="js/fixedTableHeader.js"></script> 16 <script type="text/javascript" src="../js/jquery-latest.js"></script> 17 <script type="text/javascript" src="../js/jquery.tablesorter.js"></script> 18 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 19 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 20 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 21 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 22 <script type="text/javascript"> 23 $(document).ready(function () { 24 $('#fumi').click(function (event) { 25 $("#dest").removeClass('ok').removeClass('error').html('Checking....'); 26 $("#dest").load('MailAccount', { action: "checkAll" }, 27 function(response, status, xhr) { 28 if (response == 'Success!') { 29 $(this).removeClass('error').addClass('ok'); 30 } else { 31 $(this).removeClass('ok').addClass('error'); 32 } 33 }); 34 }); 35 TABLE.fixHeader('table.results'); 36 37 $('form').bind('submit', function(event) { 38 var error = $('input[name="usr_id"] + span.vanadium-invalid'); 39 40 if (error == null || error.text() == '') { 41 return true; 42 } else { 43 return false; 44 } 45 }); 46 47 $(".task").click(function (){ 48 if($(this).is("#create")){ 49 var html ='<input class=":required :only_on_blur :ajax;Auth?action=validateUser" name="usr_id" value=""/>'; 50 $("#usr_id").empty().html(html); 51 $('#dialog-form').dialog('option', 'title', "CREATE USER"); 52 ajaxCreate(); 53 }else if($(this).is("#edit")){ 54 var editid = $(this).attr("name"); 55 editid = editid.split("-"); 56 var editid = editid[1]; 57 var id = $("#td-userid-"+editid).html(); 58 $('#dialog-form').dialog('option', 'title', "EDIT USER"); 59 ajaxEdit(id); 60 }else if($(this).is("#delete")){ 61 var deleteid = $(this).attr("name"); 62 deleteid = deleteid.split("-"); 63 var deleteid = deleteid[1]; 64 var id = $("#td-userid-"+deleteid).html(); 65 $('#dialog-form').dialog('option', 'title', "DELETE USER"); 66 $('#dialog-form').html(html); 67 ajaxDelete(id); 68 } 69 $("#dialog-form").dialog("open"); 70 }); 71 72 $('#dialog-form').dialog({ 73 autoOpen : false, 74 height: 390, 75 width: 400, 76 modal: true, 77 }); 78 79 $('#tablesorter').tablesorter({ 80 textExtraction :function(s){ C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\admin\user_list.jsp: 1/5

81 var $el = $(s), 82 $img = $el.find('img'); 83 return $img.length ? $img[0].src : $el.text(); 84 }, 85 headers: { 86 0: { 87 sorter : false 88 }, 89 8: { 90 sorter : false 91 } 92 }, 93 widgets: ['zebra'], 94 }); 95 }); 96 97 function ajaxEdit(id){ 98 $.ajax ({ 99 type : "GET" ,100 url : "Auth" ,101 data : {action : "userEdit", usr_id : id},102 success: function(data){103 $("#dialog-form").empty().html(data);104 $("#form-cancel").click(function (){105 $("#dialog-form").dialog("close"); 106 });107 },108 });109 }110 111 function ajaxCreate(){112 $.ajax ({113 type : "GET" ,114 url : "Auth" ,115 data : {action : "userCreate"},116 success: function(data){117 $("#dialog-form").empty().html(data);118 $("#form-cancel").click(function (){119 $("#dialog-form").dialog("close"); 120 });121 },122 });123 }124 125 function ajaxDelete(id){126 $.ajax ({127 type : "GET" ,128 url : "Auth" ,129 data : {action : "userDelete", usr_id : id},130 success: function(data){131 $("#dialog-form").empty().html(data);132 $("#form-cancel").click(function (){133 $("#dialog-form").dialog("close"); 134 });135 },136 });137 }138 </script>139 <title> User List </title>140 </head>141 <body> 142 <c:set var= "isAdmin" ><%=BaseServlet.isAdmin (request )%></c:set>143 <u:constantsMap className= "com.openkm.core.Config" var="Config" />144 <c:choose>145 <c:when test= "${isAdmin}" >146 <c:url var= "messageList" value= "LoggedUsers" >147 <c:param name= "action" value= "messageList" ></c:param>148 </c:url>149 <ul id= "breadcrumb" >150 <li class= "path" >151 <a href= "Auth" >User list </a>152 </li>153 <li class= "action" >154 <a href= "Auth?action=roleList" >Role list </a>155 </li>156 <li class= "action" >157 <a href= "${messageList}" >Message queue </a>158 </li>159 <li class= "action" >160 <a href= "LoggedUsers" >Logged users </a> C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\admin\user_list.jsp: 2/5

161 </li>162 </ul>163 <br/>164 <c:url value= "Auth" var="urlUserList" >165 <c:param name= "action" value= "userList" />166 </c:url>167 <form action= "${urlUserList}" >168 <table class= "form" >169 <tr>170 <td><strong >Role</strong></ td>171 <td>172 <select name= "roleFilter" >173 <option value= "" ></option>174 <c:forEach var= "role" items= "${roles}" >175 <c:choose>176 <c:when test= "${role.id == roleFilter}" >177 <option value= "${role.id}" selected= "selected" >${role.id} </option>178 </c:when>179 <c:otherwise>180 <option value= "${role.id}" >${role.id} </option>181 </c:otherwise>182 </c:choose>183 </c:forEach>184 </select>185 </td>186 </tr>187 <tr>188 <td colspan= "2" align= "right" >189 <input type= "submit" value= "Search" class= "but" />190 </td>191 </tr>192 </table>193 </form>194 <br/>195 <div style= " text-align : center ;" id="dest" >196 <input type= "button" id="fumi" value= "Force user mail import" />197 </div>198 <br/>199 <table id= "tablesorter" class= "results" width= "80%" >200 <thead>201 <tr>202 <th>#</th>203 <th class= "sort" >Id<img src= "img/sort-arrows.gif" align= "right" /></th>204 <th class= "sort" >Name<img src= "img/sort-arrows.gif" align= "right" /></th>205 <th class= "sort" >Mail<img src= "img/sort-arrows.gif" align= "right" /></th>206 <th class= "sort" >Roles <img src= "img/sort-arrows.gif" align= "right" /></th>207 <th class= "sort" >Profile <img src= "img/sort-arrows.gif" align= "right" /></th>208 <th class= "sort" width= "80px" >Active <img src= "img/sort-arrows.gif" align= "right" /></th>209 <th class= "sort" width= "80px" >Chat<img src= "img/sort-arrows.gif" align= "right" /></th>210 <th width= "150px" >211 <c:url value= "Auth" var="urlCreate" >212 <c:param name= "action" value= "userCreate" />213 </c:url>214 <c:if test= "${db}" >215  <img id= "create" class= "task" src= "img/action/new.png" alt="New user" title= "New user" />216 </c:if>217 </th>218 </tr>219 </thead>220 <tbody>221 <c:forEach var= "user" items= "${users}" varStatus= "row" >222 <c:url value= "Auth" var="urlEdit" >223 <c:param name= "action" value= "userEdit" />224 <c:param name= "usr_id" value= "${user.id}" />225 </c:url>226 <c:url value= "Auth" var="urlDelete" >227 <c:param name= "action" value= "userDelete" />228 <c:param name= "usr_id" value= "${user.id}" />229 </c:url>230 <c:url value= "Auth" var="urlActive" >231 <c:param name= "action" value= "userActive" />232 <c:param name= "usr_id" value= "${user.id}" />233 <c:param name= "roleFilter" value= "${roleFilter}" />234 <c:param name= "usr_active" value= "${!user.active}" />235 </c:url>236 <c:url value= "Auth" var="urlChatDisconnect" >237 <c:param name= "action" value= "userChatDisconnect" />238 <c:param name= "usr_id" value= "${user.id}" />239 <c:param name= "roleFilter" value= "${roleFilter}" /> C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\admin\user_list.jsp: 3/5

240 <c:param name= "usr_active" value= "${!user.active}" />241 </c:url>242 <c:url value= "UserConfig" var="urlConfig" >243 <c:param name= "uc_user" value= "${user.id}" />244 </c:url>245 <c:url value= "MailAccount" var="urlMail" >246 <c:param name= "ma_user" value= "${user.id}" />247 </c:url>248 <c:url value= "TwitterAccount" var="urlTwitter" >249 <c:param name= "ta_user" value= "${user.id}" />250 </c:url>251 <tr class= "${row.index % 2 == 0 ? 'even' : 'odd'}" >252 <td width= "20px" >${row.index + 1} </td><td id= "td-userid-${row.index}" >${user.id} </td><td> ${user.name} </td><td> ${user.ema

il} </td>253 <td id= "td-role-${row.index}" >254 <c:forEach var= "role" items= "${user.roles}" >255 ${role.id}256 </c:forEach>257 </td>258 <td>${user.profile} </td>259 <td class= "c" >260 <c:choose>261 <c:when test= "${db}" >262 <c:choose>263 <c:when test= "${user.active}" >264 <a href= "${urlActive}" ><img src= "img/true.png" alt="Active" title= "Active" /></a>265 </c:when>266 <c:otherwise>267 <a href= "${urlActive}" ><img src= "img/false.png" alt="Inactive" title= "Inactive" /></a>268 </c:otherwise>269 </c:choose>270 </c:when>271 <c:otherwise>272 <img src= "img/true.png" alt="Active" title= "Active" />273 </c:otherwise>274 </c:choose>275 </td>276 <td class= "c" >277 <c:choose>278 <c:when test= "${u:contains(chatUsers, user.id)}" >279 <a href= "${urlChatDisconnect}" ><img src= "img/action/chat_connected.png" alt="Disconnect user" title= "Disconnect user

" /></a>280 </c:when>281 <c:otherwise>282 <img src= "img/action/chat_disconnected.png" alt="User disconnected" title= "User disconnected" />283 </c:otherwise>284 </c:choose>285 </td>286 <td align= "center" >287 <c:if test= "${db}" >288  <img id= "edit" name="edit-${row.index}" class= "task" src= "img/action/edit.png" alt="Edit" title=

"Edit" />289 290  <img id= "delete" name="delete-${row.index}" class= "task" src= "img/action/delete.png" alt="D

elete" title= "Delete" />291 292 </c:if>293 <a href= "${urlConfig}" ><img src= "img/action/config.png" alt="User config" title= "User config" /></a>294 295 <a href= "${urlMail}" ><img src= "img/action/email.png" alt="Mail accounts" title= "Mail accounts" /></a>296 297 <a href= "${urlTwitter}" ><img src= "img/action/twitter.png" alt="Twitter accounts" title= "Twitter accounts" /></a>298 </td>299 </tr>300 </c:forEach>301 </tbody>302 </table>303 <div id= "dialog-form" >304 <form action= "Auth" >305 <input type= "hidden" name="action" value= "${action}" />306 <input type= "hidden" name="persist" value= "${persist}" />307 <input type= "hidden" name="csrft" value= "${csrft}" />308 <table>309 <tr>310 <td><strong >Id</strong></ td>311 <td width= "100%" id="usr_id" >312 <c:choose>313 <c:when test= "${action != 'userCreate'}" >314 <input class= ":required :only_on_blur" name="usr_id" value= "${usr.id}" readonly= "readonly" />315 </c:when> C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\admin\user_list.jsp: 4/5

316 <c:otherwise>317 <input class= ":required :only_on_blur :ajax;Auth?action=validateUser" name="usr_id" value= "" />318 </c:otherwise>319 </c:choose>320 </td>321 </tr>322 <tr>323 <td><strong >Password </strong></ td>324 <td>325 <c:choose>326 <c:when test= "${action == 'userCreate'}" >327 <input class= ":required :only_on_blur" type= "password" name="usr_password" id="usr_password" value= "" autocomplet

e="off" />328 </c:when>329 <c:otherwise>330 <input class= "" type= "password" name="usr_password" id="usr_password" value= "" autocomplete= "off" />331 </c:otherwise>332 </c:choose>333 </td>334 </tr>335 <tr>336 <td nowrap= "nowrap" ><strong> Confirm password </strong></ td>337 <td><input class= ":same_as;usr_password :only_on_blur" type= "password" value= "" autocomplete= "off" /></td>338 </tr>339 <tr>340 <td><strong >Name</strong></ td>341 <td><input class= "" name="usr_name" size="25" value= "${usr.name}" /></td>342 </tr>343 <tr>344 <td><strong >Mail</strong></ td>345 <td><input class= ":email :required :only_on_blur" name="usr_email" size="30" value= "${usr.email}" /></td>346 </tr>347 <tr>348 <td><strong >Active </strong></ td>349 <td>350 <c:choose>351 <c:when test= "${usr.active}" >352 <input name= "usr_active" type= "checkbox" checked= "checked" />353 </c:when>354 <c:otherwise>355 <input name= "usr_active" type= "checkbox" />356 </c:otherwise>357 </c:choose>358 </td>359 </tr>360 <tr>361 <td><strong >Roles </strong></ td>362 <td>363 <select multiple= "multiple" id="usr_roles" name="usr_roles" size="10" >364 <c:forEach var= "role" items= "${roles}" >365 <c:choose>366 <c:when test= "${u:contains(usr.roles, role)}" >367 <option value= "${role.id}" selected= "selected" >${role.id} </option>368 </c:when>369 <c:otherwise>370 <option value= "${role.id}" >${role.id} </option>371 </c:otherwise>372 </c:choose>373 </c:forEach>374 </select>375 </td>376 </tr>377 <tr>378 <td colspan= "2" align= "right" >379 <input type= "button" value= "Cancel" class= "but" />380 <input type= "submit" value= "Send" class= "but" />381 </td>382 </tr>383 </table>384 </form>385 </div>386 </c:when>387 <c:otherwise>388 <div class= "error" ><h3>Only admin users allowed </h3></div>389 </c:otherwise>390 </c:choose>391 </body>392 </html>

C:\openkm-6.2.3-community\tomcat\webapps\OpenKM\admin\user_list.jsp: 5/5

Appendix F

Invoice Example - Figures

Figure F.1: Form

89


Figure F.2: Source code

90


Figure F.3: Decision handler

Figure F.4: Action handler

91

Appendix G

Modified Files

All the files that have been modified for this project can be found in the following link:https://dl.dropboxusercontent.com/u/4038287/Last%20Report.rar

92

Bibliography

[1] wiki.openkm.com

[2] openkm.com

[3] wikipedia.com

[4] jqueryui.com

[5] javascriptsource.com

[6] codecademy.com

[7] stackoverflow.com

[8] www.colormatters.com

[9] knightdalehs.wcpss.net/student life/fine arts/Departments/Fine Art/Collin/Documents/

[10] www.webdesign.org

[11] Daniel Allen, Getting Things Done: the Art of Stress-Free Productivity. New York,2001.

93