Posts Tagged: ‘Datasource’

XPages: JQuery Gantt Module

16. September 2012 Posted by airwolf89

In the past weeks I was trying something new, at least new for me…

I realised that using jQuery in Xpages is a wonderful idea. Mark Roden has a nice blog with great things you can do with jQuery in XPages. You can find it here: Xomino Also check out his demo site: Xomino JQinX Demo

In one project I wanted to use a gantt chart. I want to write this article to show you how it’s done and warn you about the problems I had.

Let’s start.

To use jQuery you have to download it and integrate it in your database. Build your own version of jQuery here: JQuery Download It is the download page of JQuery UI, a set of many nice plugins and modules for jQuery. A version of the base jQuery is included. You can also configure a custom theme for your jQuery modules. It is on the right menu when you follow the link “design a custom theme

For the gantt chart I am using this module: Taitems JQuery Gantt Chart Module

So, now you have to integrate these files into your database. You can do this either via the resource category in the database, or via the PackageExplorer (it is an Eclipse View) I recommend using the package explorer, because you can manage your files more easily. Simply drag and drop your files and create some folders to organize them.

Now you have to load them into your application. You can do this easily via a theme with the following statement:

<resource>
<content-type>application/x-javascript</content-type>
<href>js/jquery-1.7.min.js</href>
</resource>

Or you load them directly into your code via the resource properties of the XPage/ Custom Control

<xp:script src="js/jquery-ui-1.8.23.custom.min.js" clientSide="true"/>

You have to do this for the jQuery base module, the UI module and the gantt module, also you have to load the CSS files.

First problem I had to face: The gantt module doesn’t work with every jQuery version. I was using jQuery 1.8.0. But when using this module, I had an error message which complained about some undefined variables (TypeError: m is undefined) Using the 1.7 version was a solution to this.

Now we can get started. On the page of the gantt module is an easy manual how to use this module. It is quite self explaining.

To implement a gantt chart, you only have to put in these few lines of code (client side of course)

<xp:scriptBlock id="scriptBlock1">
<xp:this.value>
// + "/ganttJSONBuilder?OpenAgent";
// + "/js/data.js";
jQuery( function() {
var dataPath = location.href.substring(0,
location.href.lastIndexOf('/') + 1)
+ "/ganttJSONBuilder?OpenAgent;

$(".gantt").gantt( {
source : dataPath
});
});]]>
<<!--xp:this.value>
<<!--xp:scriptBlock>

As data source the module uses JSON data. Use this site to validate your JSON data easily. The structure of your data is explained in the manual site of the module.

Be aware, the module expects a URL as data source. That means you can’t use server side Javascript in that scriptblock to generate the data source. So, we have two options on how to load the data into the module, either via a file which you can put into the WebContent folder in your database, or you call an agent. The agent is probably the better option because you sure want to load data dynamically.

Using an agent to achieve this is basically easy, you only have to write your JSON string into a variable and then you do this:

PrintWriter pw = getAgentOutput();
pw.println(output);

The difficulty of generating the JSON string itself depends on your data. In my case it was a simple project management, so some tasks, projects and editors. I used a view. I looped the entries and parsed the information into a JSON String.

There are some nice little things you should know when doing so.

The first line of your JSON string has to be the content type of the output, for JSON it is: Content-type: application/json; charset=utf-8\n
Also, it is very important that you use line breaks in the string, simply by using \n. If you aren’t doing that, your JSON string will not be properly interpreted and the module shows nothing but a nice grey bar.
Easily to overlook, but also important, in JSON you have to use a comma to separate your entries. Be sure you have no comma behind your last entry or parameter. It will result in a misinterpretion of the data.
The next important thing is, in the JSON data, you have to provide all entries defined in the manual. That means, if you forgot to write one of the parameters into the string, it is valid, but not recognized by the gantt module and isn’t doing anything. All of them need a value. providing nothing will have the same result: Nothing =)
I wanted to have my projects and tasks separated. In one line the project and then in the other lines the related tasks. This is possible by writing an extra entry to your JSON string, in which you only write the information about the project. When writing the tasks of the project, you probably don’t want to write the project in front of each task. If you think you can define an empty string for the name parameter of the JSON entry, you are wrong. The module needs a value of at least one character. Using an empty string results in not displaying the chart and some nice error messages. Using a space (” “) is the solution.
Also, you have to provide a start and end date for each entry. I wanted to have no duration for the project, so I didn’t provide the “from” and “to” parameter, it rewarded me with some other javascript errors. So I used the whole duration of the project for the project entry, it’s a good feature anyway.

A nice feature: You can use HTML in your JSON parameters, so, if you use
tags for example in your desc parameter and some formatting tags, you can make the mouseOver of the entries look more beautiful and put some more information into it.

If you think the styleClasses available for your entries in the chart (ganttRed, ganttGreen, ganttOrange) are not that beautiful, or you want to use some more, you can easily define some. There is a css file in the module. Looks like this:

.fn-gantt .ganttOrange {
background-color: #FCD29A;
}
.fn-gantt .ganttOrange .fn-label {
color: #714715 !important;
}

Copy those entries and do your own styles, the class at the end of the definition is recognized by the module, so you can use it directly in the “customClass” parameter of your JSON.

But there is one big problem when using this module. Above the chart, I have some buttons. I wanted to load different charts with those buttons. Easily done I thought, just firing a partial execute on the chart container to set another data source or something. But, nothing happens, in fact really nothing, not even an event which I could see in my FireBug. Some other buttons with only clientside code are working fine. All other buttons on the whole page are working fine, only those I have directly above my chart didn’t wanted to work. I haven’t figured out what’s the problem, if I find it, I will let you know.

Another problem is that the gantt chart is not working in the Notes Client. If I open the Xpage in my Notes client, the chart isn’t loaded, only a nice grey bar. Other jQuery modules are working fine, for example the accordion or flip is working, but not the module. If you want to use it in the NotesClient you should think about another solution… or wait until I find a solution for this problem =)

Another thing you should consider are loading times. The loading time is increasing dramatically proportional on how many entries you display (rowsPerPage parameter in the gantt function) and how many years they cover. If you want to display some tasks from a period of 10 years or more, you have to wait a bit. I tried a period of 30 years… not a good idea, my browser crashed… after about 5 minutes of loading.

So, I think that’s all I know about the module and how to use it. Despite all the small and big problems I have a nice application with some really nice gantt charts. If you are interested in such an application, you should visit this page (Cobalt Software GmbH), the new version should be available soon. Ok, sorry for the advertisement…

If you have any questions or solutions for my unsolved problems, the comment section is all yours =)

Hope it was useful for some of you.


Filed under: Notes & XPages Tagged: Chart, Cobalt Software GmbH, CSS, Datasource, Gantt, Javascript, JQuery, JSON, Mark Roden, Notes, Parameter, Plugin, Serverside Javascript, Taitem, Tools, Xomino, XPages, Xpages in NotesClient, XpInc

Stumbling Stones: Difference between xp:panel and xp:div

2. April 2012 Posted by airwolf89

Today another stumbling stone.

With this post I want to announce that I will write this Blog in english from now on to reach more readers throughout the world. My old posts will be translated step by step. I hope you understand this step and continue reading my Blog.

But back to topic. Today I was customizing a module in one of my applications. The structure was implemented via xp:panel elements. I wanted to save some performance and wanted to change it to xp:div.

By the way, what is the difference between xp:panel and xp:div, you might ask. Well, it is quite easy. Both controls are container controls which are rendered as a <div> element in HTML. The difference is that you can define a datasource in xp:panel elements. Therefore, xp:panel and xp:div references different Java-classes in the backend. The class for xp:panel is more complex, that means you a bit more serverload. Here is the Java code generated:

 

xp:panel:
private UIComponent createPanel2(FacesContext context,
      UIComponent parent, PageExpressionEvaluator evaluator) {
   UIPanelEx result = new UIPanelEx();
   return result;
}

xp:div
private UIComponent createDiv(FacesContext context,
      UIComponent parent, PageExpressionEvaluator evaluator) {
   XspDiv result = new XspDiv();
   return result;
}

 

It seems not worth to mention, but imagine you have an application with, let’s say 200 div containers throughout the application. With each the server has to load the more complex class and prepare the functionality to create a datasource. If you use xp:div instead, the serverload may decrease a bit. I do not have some statistics to prove how it affects the applications performance in detail, but it is alsways a good idea to reach for maximum performance of an application.

So, what was the problem? I changed the tags to xp:div, and the design of my module was affected. I wondered, because I was thinking both elements are rendered as a <div> element in HTML. But a short glance into the Firebug told me something. For two panels, I didn’t define an ID attribute. So, the second difference between xp:div and xp:panel is that xp:panels without an ID attribute are NOT rendered in an XPage. This could affect either some CSS hierarchies and also, if you need every pixel in a container, affects the way it is displayed. In my case it had the result that an image, which I used as a button was not displayed next to an inputBox, it was displayed below that.

Here an example with the output:

 

Without IDs:

XSP:
<xp:panel>
   <xp:panel>
      test 1
   </xp:panel>
</xp:panel>

<xp:br/>

<xp:div>
   <xp:div>
      test 2
   </xp:div>
</xp:div>

HTML:
test 1
<br>
<div>
   <div>
      test 2
   </div>
</div>

With IDs:

XSP:
<xp:panel id="panel1">
   <xp:panel id="panel2">
      test 1
   </xp:panel>
</xp:panel>

<xp:br/>

<xp:div id="div1">
   <xp:div id="div2">
      test 2
   </xp:div>
</xp:div>

HTML:
<div id="view:_id1:panel1">
   <div id="view:_id1:panel2">
      test 1
   </div>
</div>
<br>
<div id="view:_id1:div1">
   <div id="view:_id1:div2">
      test 2
   </div>
</div>

 

This is not a big deal, if you know that and always set an ID attribut, as it should be, you won’t encounter that problem. But like it is always, you have to know it or you get confused by its consequences.


Filed under: Stumbling Stones Tagged: Attribute, CSS, Datasource, Hierarchy, HTML, Java, Notes, Stumbling Stone, xp:div, xp:panel, XPages

Erfahrungsbericht: Notes Entwickler Camp 2012

28. März 2012 Posted by airwolf89

Ja, schöne Dinge vergehen viel zu schnell. Heute war der letzte Tag des Notes Entwickler Camps 2012. Ich möchte an dieser Stelle meine Erfahrungen teilen und jedem ans Herz legen zu überlegen dort auch mal teilzunehmen.

Tag 1

Nach einer größtenteils unproblematischen Anreise kamen mein Kollege Sven Hasselbach und ich in Gelsenkirchen im Maritim Hotel an. Das Hotel war völlig in Ordnung, nichts über die Maße luxuriöses, aber zu meckern gab’s auch nichts.

Pünktlich um 10:30 Uhr startete das Camp mit der Begrüßung durch Rudi Knegt, dem Initiator und Veranstalter des Camps, welcher scheinbar immer gut gelaunt zu sein scheint =)

Anschließend teilte Philippe Riand in einer Präsentation mit, was in Zukunft in Sachen ICS, Social Business und XPages tun wird. Ein Kommentar, mit Live-Demo stach besonders heraus. Nämlich dass es bald einen richtigen Serverside Javascript Debugger geben wird. Dies wurde durch einen spontanen Begeisterungsausbruch der ca. 230 Teilnehmer kurz unterbrochen.
Quintessenz der Vorstellung war denke ich, dass sich IBM in Zukunft, wie zu erwarten war, auf den Bereich Social Business und XPages konzentrieren wird. Serverside Javascript soll sich zu Lingua Franca entwickeln, denn es wird an vielen Schnittstellen zu anderen Systemen, beispielsweise auch Sharepoint gearbeitet und soll zukünftig eine generische Schnittstelle für eine Vielzahl von Web-Anwendungen bereitstellen.

Anschließend gab es wie immer das kurze “Speed-Agendaing” (wahrscheinlich ein Produkt der von Rudi Knegt zum Leben erweckten Sprache “Rudisch”), in welchem die Referenten ein kurzen Abriss über die anstehenden Präsentationen gaben, um dem Teilnehmer die Entscheidung zu erleichtern an welchem von den 5 gleichzeitigen Sessions man denn teilnehmen sollte.

Ich entschied mich für die Session von Detlev Pöttgen von Midpoints, welche von Widgets, Livetext und Plugins handelte. In dieser Session stellte er die Einsatzmöglichkeiten und die Handhabung von Widgets dar. Wie man eines anlegt, wie man selbst welche mit Hilfe von Plugins erstellt und wie man sie unter den Usern verteilt. Letzteres kam leider aufgrund vieler Fragen ein wenig zu kurz, doch es gab über dieses Thema am nächsten Tag noch eine Session die sich auschließlich mit diesem Thema beschäftigte, von daher nicht so schlimm. Außerdem wurde ein konkretes Pluging gezeigt, welches intern beim Referenten genutzt wird. Es war ein Plugin, welches bei Markierung einer E-Mail Daten über den Absender aufruft und anzeigt welche Tickets und Aufträge dieses Kunden noch offen sind. Coole Idee.

Mein Fazit dazu: Eine sehr schöne Technologie, die meinerseits und bei mir in der Firma bisher ziemlich kurz kam. Jedoch sieht man alleine an den Plugins, welche wir für die Entwicklung verwenden, was damit möglich ist. Auch bieten sie eine schöne Schnittstelle mit denen man auf Web-Anwendungen zugreifen kann, auch auf XPages. Ich werde mir in Zukunft auf jeden Fall mal genauer anschauen was man damit machen kann und schauen dass wir das unseren Kunden anbieten können.

Parallel hielt Ulrich Krause einen Vortrag über die Grundlagen der XPages Entwicklung, Rocky Oliver über die bis heute große Macht von Lotusscript, Manfred Meise einen Vortrag über Security in Notes, sowohl auf Admin, als auch auf Entwickler Seite, was selbst erfahrenen Notes Entwicklern noch das ein oder andere erneut ins Gedächtnis rief bzw. klar gemacht hat, was Security angeht. Manuel Nientit. Zeigte in seiner Hands-On Session praktisch wie man in Javascript einsteigt.

Nach der Kaffepause ging es für mich mit dem Vortrag von Niklas Heidloff weiter, in welchem er kurz die schönsten Projekte auf OpenNTF vorstellte. Dabei zeigte er ein paar interne Zahlen von OpenNTF, beispielsweise dass fast jeden Tag ein neues Projekt auf OpenNTF hochgeladen wird und mittlerweile über 800 Projekte beherbergt. Er ging auf eine Vielzahl von Projekten ein, dessen Erwähnung diesen ohnehin schon viel zu langen Post sprengen würde. Zum größten Teil die wirklich gut gelungenen Projekte für die beiden vergangenen Development Contests und nutzte gleich die Chance den auf dritten Development Contest aufmerksam zu machen. Er zeigte sich stolz auf die Community wie viele Projekte jeden Monat neu hochgeladen werden und welche Qualität diese vorweisen können. Auch kündigte er an dass bereits an einem Plugin gearbeitet wird, mit dem man auf die veröffentlichten XSnippets direkt aus dem Domino Designer zugreifen kann.

Mein Fazit dazu: Man sollte auf jeden Fall einmal ein wenig Zeit investieren sich die Projekte auf OpenNTF anzuschauen und zu evaluieren welche man davon verwenden kann. Ich möchte fast schon garantieren dass für jeden das ein oder andere Projekt interessant sein wird. Auch ich werde, in Zukunft, versuchen mich dort ein wenig mehr einzubringen und XSnippets zu posten und auch mal das ein oder andere Control oder sogar Projekt zu veröffentlichen.

Parallel hielt Matthew Fyleman einen Vortrag darüber wie man bestehende Notes Applikationen am besten in XPages Anwendungen verwandelt. Gerd Hildebrandt zeigte in seinem Vortrag dass LotusScript noch lange nicht tot ist. Christian Habermüller zeigte wie man am besten Workflows analysiert und dokumentiert und dabei auch ein wenig über den Tellerrand des Entwicklerhorizonts schaut. Das Hands-On von Thomas Schneider über Composite Applications fiel leider aufgrund eines Unfalls in der Familie aus. Gute Besserung an dieser Stelle.

Das Abendprogramm bestand dann aus “Speed-Demoing” bei welchem jeder der ein interessantes Problem oder Konzept vorzustellen hatte, 5 bis 10 Minuten Zeit bekam dies mit einer kurzen Präsentation zu zeigen. Anschließend gab es eine offene Fragerunde, in welcher jeder seine Problemchen auf die man während der Entwicklung traf vorstellen und mit allen Teilnehmern diskutieren konnte. Bei diesen Fragerunden, welche jeden Abend stattfanden, wurde eine Vielzahl von Problemen auch direkt gelöst oder zumindest Herangehensweisen vorgeschlagen, was einige Entwickler, denke ich, ziemlich glücklich gemacht haben dürfte. Allerdings ist mir in diesen Veranstaltungen bewusst geworden, wie wenige Leute sich so intensiv mit XPages beschäftigen, so wie ich das bei mir auf Arbeit tue. Der Großteil der Probleme waren allgemeine Probleme mit Notes (im Klassischen Notes Umfeld) oder Probleme mit Lotusscript oder Formelsprache.
Danach gab es dann, moderiert von Gregory Engels, Präsentations-Karaoke.

Anschließend wurden die Teilnehmer von den Veranstaltern dazu genötigt bis 22:30 Uhr die Bier- und Weinreserven des Hotels zu vernichten. Bei dieser überaus unangenehmen Aufgabe wurde viel gefachsimpelt, Erfahrungen ausgetauscht und Bekanntschaften geschlossen und Kontakte geknüpft. Als dann gegen 2 Uhr die letzte Bar im Hotel schloss ging dann auch der letzte Notes-Entwickler glücklich ins Bett und freute sich auf den nächsten Tag.

Tag 2

Pünktlich um 08:10 Uhr startete man dann mit einigen Organisatorischen Dingen und Speed-Agendaing zu den aktuellen Präsentationen in den neuen Tag. Danach machten sich die Teilnehmer, motiviert und ausgeschlafen wie man das nach dem vorherigen Abend erwarten würde auf zu den Sessions.

Ich besuchte die Präsentation von Ulrich Krause in welcher er die Extension Library, wie sie funktioniert, wie man sie installiert und wie man sie verwendet ausführlich beschrieb. Dabei stellte er auch das eine oder andere Modul aus der Extension Library ein. Auch wurden ein paar allgemeine Themen rund um die neuen Features in 8.5.3 vorgestellt. Auch Themen wie Themes wurden angesprochen. Nebenbei wurden natürlich viele Fragen beantwortet.

Mein Fazit: Wie schon vorher für mich feststand wird es für mich, freiwillig, keine Entwicklung mehr ohne die Extension Library geben. Dazu gibt es einfach zu viele geniale Module in der Library welche sich perfekt für die Entwicklung eigener Anwendungen eignen, als dass man sie ignorieren könnte. Außerdem, da durch das Upgrade Pack 1 die Extension Library, in leicht abgespeckter Version, nun vollständig von der IBM supported wird, gibt es nun keinen Grund mehr für Notes Admins sich dagegen zu wehren die “ach so böse openSource Software” auf den eigenen Notes Servern zu installieren.

Parallel hielt Werner Motzet einen Vortrag über agile Software- und Projektmanagementmethoden und gab einige Tipps über eine effizientere Projektführung im Notes Umfeld. Jürgen Kunert stellte vor wie man Richtig(er) kommuniziert, ein Vortrag über Kommunikationsmittel und wie man sie im Entwicklungsumfeld besser nutzen kann. Matthias Schneider stellte den Lotus Protector von IBM ein wenig genauer vor und erläuterte wie man ihn einsetzen und selbst erweitern und anpassen kann. Howard Greenberg lehrte in einer Hands-On Session den Einstieg in die XPages Entwicklung.

Anschliessend besuchte ich die Session von Manfred Meise, in welcher er detailliert die Einsatzmöglichkeiten von Themes darstellte und einen Einstieg in diese Thematik gab. Für mich war leider wenig neues dabei, trotzdem ein interessanter Vortrag.

Mein Fazit: Mit Themes hatte ich mich ja bereits zuvor beschäftigt. Ich wurde jedoch darin bestätigt dass es keinen Grund sie nicht einzusetzen, da sie einem einfach sehr viele Möglichkeiten geben die grafische Gestaltung seiner Anwendungen effektiv aufzubauen und zu verwalten.

Parallel hielt Gregory Engels einen Vortrag, genannt “Ich weiß was du diesen Sommer tun wirst”, in welchem er einen Blick in die Kristallkugel warf und darstellte wie es wahrscheinlich mit Notes und den XPages weitergehen wird und was sich hinter den einzelnen Schlagwörtern, mit welchen die IBM auf der LotusSphere um sich warf, verbirgt und was man damit alles machen könnte. Phil Riand und Niklas Heidloff komprimierten den Inhalt einer Wochenfüllenden Vorstellung über die Features von 8.5.3, der Extension Library, JDBC Datasources, REST Schnittstellen, OAuth, der XPages Workflowengine XFlow, OSGi Tasklets und Plugins. Ich hörte von Teilnehmern die mit Kopfschmerzen und einem von Ideen überquellenden Hirn aus dieser Präsentation herausgingen. Ein Kollege von Thomas Schneider war so freundlich sich mit der Präsentation über Webservices unter Notes auseinanderzusetzen, sodass sie doch noch stattfinden konnte. Vielen Dank für die Anstrengungen. Howard Greenberg setzte sein Hands-On über den Einstieg in XPages fort.

Nach der Mittagspause und einem dringend benötigten, aber viel zu kurzen Mittagsschlaf, besuchte ich die Session von Rocky Oliver, in welcher er über die gute alte Formelsprache referierte und Einsatzmöglichkeiten und das immer noch enorme Potential herausstellte und die wichtigsten Befehle vorstellte und zeigte dass manche Befehle doch mehr können als manch einer denkt. Auch über Stolperfallen und Schwierigkeiten wurden einige Worte verloren. Allerdings gab es auch ein Kapitel wie man Formelsprache in Serverside Javascript einsetzt.

Mein Fazit: Für mich sehr nützlich, da ich ja direkt mit der XPages Entwicklung eingestiegen bin und daher noch die ein oder andere Lücke in Standard Notes Entwicklung habe.

Parallel hielt Niklas Heidloff einen Vortrag wie man XPages Applikationen social macht und ging dabei auf die Möglichkeiten des Social Enablers ein, welcher es aber leider nicht in das Upgrade Pack 1 geschafft hat. Christian Habermüller referierte über agile Methoden im IT-Projektmanagement. Bernhard Köhler hielt einen Vortrag über das leidige Thema wenn man als Entwickler Altlasten erbt und sich mit der Herausforderung konfrontiert sieht alte, historisch gewachsene Anwendungen zu erweitern. Detlev Pöttgen zeigte in seiner Hands-on Session wie man Plugins und Widgets in einer Notes Infrastruktur verteilen kann.

Anschließend besuchte ich den Vortrag von René Winkelmeyer, welcher vorstellte wie man eigene Extensions mit der Extensibility API (!= Extension Library) entwickelt und eigene Module (wie in der Extension Library) entwickelt und installiert. Dabei zeigte er wie man sich eine Entwicklungsumgebung aufsetzt um diese Extensions auf dem Domino Server installiert. Mit dieser Session nahm er einigen Entwicklern, darunter auch mir, die Angst vor diesem Thema, welches nach eigener Aussage von René Winkelmeyer “… nichts für kleine Mädchen ist…”

Mein Fazit: Anhand der Extension Library sieht man ja wie mächtig diese Technologie ist. Extension sind einfach die beste Möglichkeit wiederverwendbare Module zu entwickeln. Mit diesem Thema werde ich mich zukünftig auf jeden Fall auseinandersetzen und hoffentlich auch ein paar Erfolge erzielen. Ich bin ja schließlich kein kleines Mädchen…. =)

Parallel hielt Frank van der Linden wie man das unmögliche mit XPages möglich macht. Dabei ging er auf Themen ein die nur sehr schwer mit Standard Notes Mitteln vor den Xpages umzusetzen waren und nun möglich geworden sind. Matthias Schneider zeigte wie man mit mobilen Anwendungen auf Notes-Daten zugreifen kann. Dabei stellte er zahlreiche Werkzeuge für mobile Anwendungsentwicklung vor, wie z.B die Extension Library, den Lotus Traveler und den Notes Application Player vor. Karsten Lehmann stellte den Einsatz von weiteren NoSQL-Datenbanken und deren Einsatzmöglichkeiten im Notes-Umfeld vor. Peter Klett gab in seiner Hands-On Session einen Einstieg in LotusScript.

Im Abendprogramm gab es wieder eine offene Fragerunde, Speed-Demoing und eine Verlosung in der Dinge wie eine Nintendo Wii, ein Monitor, fernsteuerbare Hubschrauber, Geek-Toys, Entwickler-Treibstoff (Sekt und Wein) und einige T-Shirts von TLCC verlost wurden.
Anschließend wurden wir wieder gezwungen die verbliebenen Bier- und Wein Vorräte des Hotel zu vernichten. Eine Aufgabe der zahlreiche Entwickler widerstrebend aber pflichtbewusst nachgingen und dabei wieder viel fachsimpelten und Erfahrungen austauschten.

Tag 3

Der Endspurt des Entwicklercamps wurde wieder mit organisatorischen Dingen und Speed-Agendaing eingeläutet.

Für mich ging es weiter mit Versionskontrolle im Domino Designer mithilfe von GIT/ eGIT, vorgestellt von Holger Chudek. Hier zeigte er welche Möglichkeiten es im Domino Designer für Versionskontrolle gibt, welche Stolperfallen es gibt und wie man ein solches System einrichten und benutzen kann.

Mein Fazit: Ein sehr schönes Tool, welches natürlich Vor- und Nachteile mit sich bringen kann. Da es in meiner Firma sowieso angedacht war so etwas im Entwicklungsbereich zu verwenden, war dieser Vortrag natürlich sehr hilfreich und aufschlussreich und half bereits einigen Stolpersteinen im vornherein zu umgehen.

Parallel hielt Bernd Hort einen Vortrag über Java-Entwicklung im Notes-Umfeld, in welchem er die Einsatzmöglichkeiten in Agenten, Servlets, Libraries und XPages darstellte. Frank van der Linden hielt einen Vortrag über den Activity Stream und das Social Business Toolkit der IBM, in welchem er darauf einging wie man es verwendet und einsetzten kann. Bernhard Köhler ging in seinem Vortrag “Notes und die Zeit” darauf ein wie man die immer wieder auftretenden Probleme mit Zeit-Daten im Notes-Umfeld in den Griff kriegt. Matthias Schneider zeigte im Hands-On wie man mit mobiler Applikationsentwicklung beginnt.

In der letzten Session lauschte ich den Ausführungen von Richard Sharpe, in welchen er darstellte wie man mobile Applikationen mithilfe der Extension Library entwickelt und gab einige sehr hilfreiche Tipps und nahm vielen Entwicklern die Angst vor diesem Themengebiet.

Mein Fazit: Mobile Applikationsentwicklung ist eigentlich nicht so schwer wie man es sich vielleicht vorstellt. Vor allem mit JQuery hat ein sehr wertvolles und mächtiges Werkzeug an der Hand. Ich werde in Zukunft auf jeden Fall keine Schweissausbrüche bekommen wenn Kunden mal so etwas fordern.

Parallel hielt Matthias Bierl einen Vortrag über die Einsatzmöglichkeiten des Dojo Toolkits zu verfügung, auch abseits der XPages Entwicklung. Peter Klett zeigte Eindrucksvoll wie man im Notes Umfeld Riesenprojekte (nach eigener Aussage ein System mit über 30 Mio. Dokumenten in über 5.500 Datenbanken, was nur ein Projekt von vielen ist) aufsetzen und verwalten kann und räumte mit dem Vorurteil auf dass es mit Notes nicht möglich sei große Systeme zu betreiben. Andreas Artner stellte Schnittstellenentwicklung mit dem Tivoli Directoty Integrator vor und zeigte dass sich hinter diesem Tool mehr verbirgt als der Name glauben lässt. René Winkelmeyer zeigte in einem Hands-On wie man sich eine Entwicklungsumgebung für die Entwicklung mit der Extensibility API aufsetzt und ließ die Teilnehmer erste Erfahrungen in diesem Thema sammeln.

Anschließend startete, während meiner Teilnahme an den kostenlos angebotenen Zertifizierungstests, ein Vortrag von Werner Motzet, in welchem er in sehr interessanter und witziger Art und Weise auf sein Leiden aufmerksam machte, welches er durchleben muss seit seine Firma auf Microsoft Produkte (Outlook und Exchange) umgestiegen ist. Allerdings war dieser Vortrag nicht (nur) eine Hass-Tirade gegen Microsoft Produkte, sondern hinterfragte konstruktiv und kritisch die Unternehmenskultur, das Marketingverhalten und Verhaltensweisen von IBM und Microsoft. Hier stellte er einige sehr wichtige und interessante Fragen, die einige Entwickler nachdenklich stimmten. Damit dies auch bei der IBM passiert kündigte er an auf der nächsten DNUG eine Podiumsdiskussion mit IBM anzustoßen, in welchem Fragen wie Zukunft einiger Produkte, Unternehmenszukunft und Marketingverhalten geklärt werden sollen.

Damit war das Entwicklercamp 2012 vorbei und die Teilnehmer machten sich wieder auf den Heimweg, mit den Köpfen voller Ideen, den Taschen voller Visitenkarten neu geschlossener Kontakte und dem Finger im Terminkalender um nach freier Zeit zu suchen die nötig ist sich mit all den neuen Themen und Ideen auch auseinandersetzen zu können.

Mein Fazit zum Entwicklercamp:

Es macht Spass
Es lohnt sich
Es ist wertvoll

Wenn es in meiner Macht liegt werde ich definitiv wieder teilnehmen. Es waren sehr interessante Themen dabei, von denen ich leider nur einen kleinen Teil mitbekommen konnte. Man konnte sich mit anderen Entwicklern austauschen und Erfahrungen sammeln und tauschen. Auch sehr wertvoll war die Ecke, in welcher man seinen Laptop anschließen konnte um mit anderen Teilnehmern Themen anschaulich besprechen konnte und versuchen neue Ideen und Lösungen für Probleme zu finden. Genau darum ging es auch bei dieser Veranstaltung, welche von Entwicklern für Entwickler gemacht ist, hier geht es nicht darum Technologien oder Dienstleistungen zu verkaufen, sondern um gegenseitig neue Ideen und Lösungen zu entdecken und zu erlernen. Von daher sehr wertvoll für jeden Entwickler, der nicht einfach nur seinen Job macht, sondern das liebt was er tut.

An dieser Stelle nochmal vielen Dank an die Veranstalter, die Referenten und auch an den Sponsor Teamstudio.


Einsortiert unter:Notes & XPages Tagged: Andreas Artner, Android, Apple, Bernd Hort, Bernhard Köhler, Blog, Christian Habermueller, Composite Applications, Datasource, Debugger, Detlev Pöttgen, Development Contest, DNUG, Dojo, Eclipse, eGIT, Extensibility API, ExtLib, Formel, Formula, Frank van der Linden, Gerd Hildebrandt, Gergory Engels, GIT, Holger Chudek, Howard Greenberg, ibm, ICS, Java, Jürgen Kuhnert, JDBC, JQuery, Karsten Lehmann, Livetext, Lotus Protector, Lotus Traveler, Lotusscript, LotusSphere, Manfred Meise, Manuel Nientit, Matthew Fyleman, Matthias Bierl, Matthias Schneider, Mobile, Module, Niklas Heidloff, NoSQL, Notes, Notes 8.5.3, Notes Application Player, Notes Entwickler Camp 2012, OAuth, OpenNTF, OSGi, Peter Klett, Philippe Riand, Plugin, Presentation Karaoke, Rene Winkelmeyer, REST, Richard Sharpe, RKJSoft, Rocky Oliver, Rudi Knegt, Security, Serverside Javascript, Servlet, Social Business, Social Business Toolkit, Social Enabler, Stolperfalle, Tasklet, Teamstudio, Themes, Thomas Schneider, Tivoli Directory Integrator, TLCC, Tools, Ulrich Krause, Werner Motzet, Widget, XFLow, XPages, XSnippets

Stolperfalle: Ids bei clientseitigen Events

20. März 2012 Posted by airwolf89

Heute bin ich mal wieder über einen Fehler gestolpert, welchen ich schonmal begangen habe, und dadurch mal wieder viel Zeit verloren habe. Deshalb landets jetzt hier, in der Hoffnung dass ichs mir auch endlich mal merke =)

Ich hatte ein xp:div Element, welches eingebettet einen Text und ein Bild hatte. Mit einem onMouseover Event wollte ich die URL des zu verwendeten Bildes ändern. Leider reagierte das Element auf keinen MouseOver.

Dies kann man übrigens auf 2 Arten erreichen:

document.getElementById("#{id:zielElement}").src = "url_zum_bild.gif";

oder wenn man sich auf das aktuelle Element beziehen möchte, auf welchem das Event liegt:

try{
	if (thisEvent.originalTarget) {
		thisEvent.originalTarget.src = "btn_go_Hover.gif";
	} else {
		thisEvent.srcElement.src = "btn_go_Hover.gif";
	}
}catch(e){}

Die If-Abfrage hat den Hintergrund dass der Internet Explorer “srcElement” braucht und nicht auf originalTarget zugreifen kann.

Dass mein xp:div auf kein Event gehört hat lag einfach daran dass mein xp:div Element keine ID hatte.

MERKEN: Elemente mit einem clientseitgen Event brauchen IMMER eine ID!!

Btw: Wo wir gerade bei xp:div sind:

Mann sollte immer, wenn man nur ein einfaches div in der Seite braucht, xp:div verwenden. xp:panel hat zwar das gleiche Ergebnis, allerdings werden bei xp:panel noch ein paar Sachen im Hintergrund geladen die es ermöglichen eine Datasource anzubinden. Wenn man dies beachtet kann man noch ein paar Quäntchen Performance aus der Applikation herausholen. Besonders wenn man diese Elemente in einem xp:repeat loopt.


Einsortiert unter:Notes & XPages Tagged: Datasource, Dojo, Event, Firefox, ID, IE, Internet Explorer, mouseover, Notes, Performance, xp:div, xp:panel, xp:repeat, XPages

XSnippet: ViewEntries ohne repeat-control in XPage durchloopen

20. Dezember 2011 Posted by airwolf89

Hallo,

ich hatte heute ein kleines Problem. Die Lösung habe ich als XSnippet veröffentlicht und werde ich hier etwas genauer erklären:

Problem war das folgende:

Ich hatte ein kleines Modul, welches die Bilder von diversen Mitgliedern einer Community anzeigen sollte. Das ganze sollte auch immer zufällig passieren, also dass ich an jeder Position immer andere Mitglieder sehen würde. Leider war es aufgrund der Struktur und des Aufbaus des Moduls nicht möglich ein repeat-control zu verwenden. Daher folgender Lösungsansatz:

Speichere einen Iterator im Hintergrund und greife an jeder benötigten Stelle mit iterator.next() darauf zu.

Ich habe das mal ausprobiert, und siehe da, es funktioniert und ist performanter als gedacht.

Im DataContext der XPage (so etwas wie eine lokale Variable einer XPage, auf welche ich einfach per SSJS zugreifen kann) compute ich meinen Iterator, so zum Beispiel:

var tempTreeMap:java.util.TreeMap = new java.util.TreeMap();
var tempColl:NotesViewEntryCollection = allActiveUsers.getAllEntries();
var tempEntry:NotesViewEntry = tempColl.getFirstEntry();
var tempCollection:java.util.Collection = null;

while (tempEntry != null) {
tempTreeMap.put(@Unique(), tempEntry.getDocument());
tempEntry = tempColl.getNextEntry(tempEntry);
}

tempCollection = tempTreeMap.values();
return tempCollection.iterator();

Somit liegt schonmal ein Iterator im Hintergrund. Nun kann ich in jedem verwendeten image-control mit iterator.next() darauf zugreifen und mir das Dokument holen, welches in der dazugehörigen TreeMap liegt um mir die URL des Bildes zu berechnen.

Natürlich muss abgefangen werden ob es noch ein nächtes Element im Iterator gibt auf welches ich zugreifen möchte, um diese kleinen hässlichen Null-Pointer Exceptions zu vermeiden.

Hier das Snippet:
XSnippets


Stolperfalle: view.getEntryCount()

16. Dezember 2011 Posted by airwolf89

Mal wieder eine kleine Stolperfalle.

Situation war folgende: In einer Anwendung gibt es so etwas wie eine Community, jeder kann Fragen einstellen, diese können kommentiert werden usw. Das ganze soll in verschiedenen Gruppen ablaufen. Nun kann man sich entscheiden ob man die Frage öffentlich (für alle Gruppen sichtbar) oder privat (nur für meine Gruppe sichtbar) einstellen will.

Dazu musste es eine Ansicht geben, wo ich hin und her schalten kann, welche Kategorie ich sehen will.

Dazu habe ich den Viewnamen meiner Datasource berechnen lassen, je nach URL-Parameter um entsprechend die View mit den öffentlichen Dokumenten oder die mit den privaten Dokumenten abzufragen.

Auch musste innerhalb meines Codes abgefragt werden ob sich ein Dokument in der View befindet was angezeigt werden kann, um hässliche Null-Pointer Exceptions zu vermeiden.
Die Lösung dafür war denkbar einfach: myView.getEntryCount()

Damit habe ich abgefragt ob die Anzahl der Einträge 0 ist oder nicht und habe entsprechend die jeweiligen Blöcke angezeigt.

Nun habe ich mir noch jemanden zu testen  , der leider eine Null-Pointer Exception an dieser Stelle bekommen hat. Mit ein paar Printouts fiel uns auf, dass getEntryCount() bei ihm nicht 0 zurückgibt, obwohl es das hätte tun müssen.

Lange Rede kurzer Sinn: getEntryCount() ignoriert sämtliche Lese- und Autorenfelder. Bzw. wird der Befehl wahrscheinlich mit den Rechten des Servers ausgeführt, welcher die Dokumente scheinbar sehen darf.

Die bessere Lösung ist es myView.getFirstDocument() == null abzufragen. Dort bekommt man nur die Dokumente auf die man zugreifen darf.

 

 


XPages: Stolperfalle Recycling

2. Dezember 2011 Posted by airwolf89

Gestern hatte ich mal wieder eine schönes „Feature“ gefunden.

Aufgefallen ist dass eine XPage mit einer Null-Pointer Exception abgestürzt ist. Scheinbar war eine View-Datasource, dessen erstes Dokument ich mir holen wollte, nicht vorhanden.

Einige print-outs ergaben dass der Code mehrmals durchlaufen wird, was bei XPages, welche Editable Areas (Callbacks) benutzen, häufiger zu beobachten ist. Allerdings war die View bei Durchlauf 1 bis 3 noch vorhanden, beim 4. Durchlauf hatte es dann geknallt.

Nach vielen Hin und Her testen stand dann die Ursache fest. Ich hatte in einem Custom Control etwas eingebaut, wo auf eine Funktion in einer SSJS-Scriptlibrary aufgerufen wurde. In dieser Funktion wurde eine View referenziert und später wieder recycled. Normalerweise wäre hier kaum ein Zusammenhang zu erkennen. Aber, die Methode und meine XPage benutzten die gleiche View. Scheinbar ist es so, dass Designelemente nicht mehrfach referenziert werden.

D.h. wenn ich an vollkommen unterschiedlichen Stellen z.b. die gleiche View referenziere und auch nur eine davon recycle, dann werden alle Referenzen auf dieses Designelement gelöscht und es regnet entsprechende Null-Pointer Exception.

Die Lösung dieses Problems war denkbar einfach: Wir nahmen einfach das recycling aus dem Code. Normalerweise muss man auch nicht recyclen, da Domino das im Grunde selbst kann. Lediglich bei großen Schleifen wo viele Dokumente durchgeloopt werden sollte man über recycling nachdenken. Auf jeden Fall muss man aber darauf achten wie ich Designelemente referenziere um mir nicht den Ast abzusägen auf dem ich sitze.


XPages: Tippsammlung

18. Oktober 2011 Posted by airwolf89

Hallo,

hier mal eine kleine Ansammlung von Tipps welche meine Kollegen und ich uns im Laufe der Zeit notiert haben.

Attributbenennung im IE

Dojo scheint bei Attributselektoren (z.B. dojo.query()) im Internet Explorer Probleme zu haben, die richtigen Elemente zu finden, wenn ein Teilstring des Attributs ein reserviertes Wort (z.B. name oder id) enthält. Da Dojo wie jQuery als Selektor-Engine Sizzle einsetzt, kann dieses Phänomen auch bei jQuery auftreten!

Beispiel hierfür ist ein Input-Feld mit dem Namen „username“. Selektiert man dojo.query(‘input[id$="WFApprovalVFL"]‘) wird das username-Feld mitselektiert, obwohl es nicht auf WFApprovalVFL endet.

Selbiges gilt für Keynamen in JSON-Objekten.

Nich gerenderte Datasources werden dennoch computed

Wenn man in einem Custom Control eine Datasource verwendet, dann wird dessen Code IMMER ausgeführt, egal ob rendered=“false“ oder loaded=“false“. Der Code dazu wird immer ausgeführt. Dies kann zu schwer nachvollziehbaren Fehlern führen.

Des weiteren, wenn man mehrere Datasources in unterschiedlichen Custom Controls hat, welche auf das selbe Dokument zeigen, so werden alle diese Datasources gespeichert und ggf. mehrere Dokumente desselben Typs angelegt.
Um dieses Problem zu umgehen kann man in den Custom Controls entweder die Datasource auf der XPage direkt über den namen referenzieren, oder man übergibt die Datasource per Parameter an das Custom Control (compositeData). Da muss man allerdings manuell einen Typ auswählen, da Datasources nicht in der Liste auftauchen. Der Typ heißt: com.ibm.xsp.model.ModelDataSource

Prüfen ob ein Viewpanel kategorisiert ist

Gesetzt den Fall, das zu prüfende View Control auf der XPage heißt viewPanel1, liefert:

var model:com.ibm.xsp.model.domino.DominoViewDataModel = getComponent("viewPanel1").getDataModel();
return model.getCategoryIndentLevel();

den Wert 0, wenn die View kategorisiert ist, -1 wenn nicht.

Use case: Bei kategorisierten Views gehen die Inhalte der Kategoriespalte verloren, wenn die View umsortiert wird. Hiermit kann man prüfen, ob die View umsortiert ist und entsprechend die Anzeige wiederherstellen.

Umgehen des OnChange-Bugs im IE beim Klick auf eine CheckBoxGroup

Werden auf einer XPage oder Custom Control Radiobutton Groups oder Checkbox Groups verwendet, tritt im IE das Phänomen auf, dass beim Partial refresh die übergebenen Werte der Gruppe immer die Werte des vorangegangenen Requests sind. Dies tritt nur auf, wenn man auf das Label klickt, statt direkt auf die Box zu klicken. Grund hierfür ist, dass der IE den Partial refresh-Request abschickt, bevor auf der UI der neue Wert gesetzt wird.

rendered="#{javascript:context.getUserAgent().isIE()}"


Beispiel
:

Es gibt eine Checkbox-Gruppe mit den Optionen A, B, C, D. Beim onchange-Event wird ein Partial refresh auf ein anderes Panel ausgelöst, das abhängig von den gewählten Optionen Elemente ein- oder ausblendet. Klickt man auf das Label für die Option A, kommt kein gewählter Wert an. Klickt man anschließend auf das Label für die Option B, kommt der Wert A an. Klickt man anschließend auf das Label der Option C, kommen A und B an, usw.


Workaround
:

Im onclick-Eventhandler wird der Partial refresh beim oncomplete ein zweites Mal ausgeführt.

 <xp:this.onComplete>
<![CDATA[XSP.partialRefreshPost("#{id:refreshPanelID}");]]>
</xp:this.onComplete>

Obiger Workaround 1 wirkt nicht, wenn auf dem Eventhandler zusätzlich noch Aktionen bzw. Server Side Javascript ausgeführt werden soll. Dieser Code wird dann nur beim ersten partial refresh ausgeführt. Um diesen Eventhandler wieder gängig zu machen, muss man den Click-Event des Labels von seiner Standard-Aktion abhängen und selbst durchführen. Dies macht man in einem clientseitigen Scriptblock. Da aber die Checkbox selbst auch innerhalb des Labels liegt, muss man diese wiederum aus der eigenen Verarbeitung rausnehmen:

 <xp:scriptBlock id="scriptBlock1"
        rendered="#{javascript:context.getUserAgent().isIE()}">
        <xp:this.value><![CDATA[dojo.addOnLoad(function(){
    dojo.query("label",dojo.byId("#{id:checkBoxGroupID}")).forEach(function(el){        
        dojo.connect(el,"onclick",el,function(e){
            if (e.target.type != "checkbox") {
                e.preventDefault();
                dojo.query("input",this).forEach(function(el){
                    dojo.attr(el,"checked",!(dojo.attr(el,"checked")));
                });
            }    
        });
    });        
});]]></xp:this.value>
</xp:scriptBlock>

Ein weiterer Vorteil dieser Methode gegenüber Workaround 1 ist, dass kein zweiter Request nötig ist.

Validierung von zwei abhängigen Eingabefeldern

Bei der Validierung von zwei voneinander abhängigen Eingabefeldern muss der SubmittedValue des Feldes abgefragt werden, das validiert wird. Vergleicht man den Value des Feldes mit dem Value des zweiten Feldes, wird die Validierung nach dem ersten Fehlschlag nicht mehr ausgelöst und der Validierungsfehler bleibt bestehen.

Beispiel:

 <xp:inputText id="recipientNotesID"
   value="#{test.recipientNotesID}"
   disableClientSideValidation="true" required="true">
   <xp:this.validators>
      <xp:validateRequired message="Required value."></xp:validateRequired>
   </xp:this.validators>
</xp:inputText>
<xp:inputText id="recipientNotesPW"
   value="#{test.recipientNotesPW}"
   disableClientSideValidation="true" required="true">
   <xp:this.validators>
      <xp:validateExpression>
         <xp:this.expression><![CDATA[#{javascript:((getComponent("recipientNotesPW").getSubmittedValue()||"")!=(getComponent("recipientNotesID").getValue()||""))}]]>
         </xp:this.expression>
         <xp:this.message><![CDATA[#{javascript:"Values must not be equal."}]]></xp:this.message>
      </xp:validateExpression>
      <xp:validateRequired message="Required value."></xp:validateRequired>
   </xp:this.validators>
</xp:inputText>