Posts Tagged: ‘JQuery’

You might not need jQuery

8. Mai 2014 Posted by Sven Hasselbach

I have found a very interesting website: You might not need jQuery. It contains a lot of usefull solutions for the different IE versions.

XPages: Bootstrap File Input

26. März 2014 Posted by Sven Hasselbach

When using the default file upload control in a Bootstrap application, the default file upload button does not fit anymore to the design:

To fix this issue, you can use a small jQuery plugin named Twitter Bootstrap File Input. When this plugin is added to your XPage, the button will look like this:

 

To initialize the jQuery plugin, you have to call it with a selector which selects all DOM elements of type file:

<xp:scriptBlock
    id="scriptBlockInitFile">
    <xp:this.value>
        <![CDATA[
           $(document).ready( 
               function() {
                   $('input[type=file]').bootstrapFileInput();
               }
           );
        ]]>
    </xp:this.value>
</xp:scriptBlock>

The description of the button can be changed by setting the title attribute. Additionally, you can choose if the file name will be displayed inside or outside of the button:

To place it inside, you need to add the attribute data-filename-placement to the file upload control:

<xp:fileUpload
    id="fileUploadControl"
    value="#{document.Body}"
    title="Datei auswählen">
    <xp:this.attrs>
        <xp:attr
            name="data-filename-placement"
            value="inside" />
    </xp:this.attrs>
</xp:fileUpload>

Because I have added it to a Custom Control and use it multiple times on a XPage, I have changed the original code and added a flag to prevent multiple calls, otherwise all file elements are modified over and over again:

Here is the modified code:

/*
  Bootstrap - File Input
  ======================

  This is meant to convert all file input tags into a set of elements that displays consistently in all browsers.

  Converts all
  <input type="file">
  into Bootstrap buttons
  <a>Browse</a>

  Sven Hasselbach, 26.03.2014:
  Added a fix to prevent multiple wrapping 

*/
(function($) {

$.fn.bootstrapFileInput = function() {

  this.each(function(i,elem){

    var $elem = $(elem);

    // Maybe some fields don't need to be standardized.
    if (typeof $elem.attr('data-bfi-disabled') != 'undefined') {
      return;
    }

    // --- Fix to prevent multiple wrapping 
    // Sven Hasselbach, 26.03.2014

    // check for an existing 'wrapped' attribute'
    if(!!$elem.attr('wrapped'))
        return;

    // add the 'wrapped' attribute
    $elem.attr('wrapped', 'true');
    // --- End of Fix    
    // Set the word to be displayed on the button
    var buttonWord = 'Browse';

    if (typeof $elem.attr('title') != 'undefined') {
      buttonWord = $elem.attr('title');
    }

    var className = '';

    if (!!$elem.attr('class')) {
      className = ' ' + $elem.attr('class');
    }

    // Now we're going to wrap that input field with a Bootstrap button.
    // The input will actually still be there, it will just be float above and transparent (done with the CSS).
    $elem.wrap('<a></a>').parent().prepend($('<span></span>').html(buttonWord));
  })

  // After we have found all of the file inputs let's apply a listener for tracking the mouse movement.
  // This is important because the in order to give the illusion that this is a button in FF we actually need to move the button from the file input under the cursor. Ugh.
  .promise().done( function(){

    // As the cursor moves over our new Bootstrap button we need to adjust the position of the invisible file input Browse button to be under the cursor.
    // This gives us the pointer cursor that FF denies us
    $('.file-input-wrapper').mousemove(function(cursor) {

      var input, wrapper,
        wrapperX, wrapperY,
        inputWidth, inputHeight,
        cursorX, cursorY;

      // This wrapper element (the button surround this file input)
      wrapper = $(this);
      // The invisible file input element
      input = wrapper.find("input");
      // The left-most position of the wrapper
      wrapperX = wrapper.offset().left;
      // The top-most position of the wrapper
      wrapperY = wrapper.offset().top;
      // The with of the browsers input field
      inputWidth= input.width();
      // The height of the browsers input field
      inputHeight= input.height();
      //The position of the cursor in the wrapper
      cursorX = cursor.pageX;
      cursorY = cursor.pageY;

      //The positions we are to move the invisible file input
      // The 20 at the end is an arbitrary number of pixels that we can shift the input such that cursor is not pointing at the end of the Browse button but somewhere nearer the middle
      moveInputX = cursorX - wrapperX - inputWidth + 20;
      // Slides the invisible input Browse button to be positioned middle under the cursor
      moveInputY = cursorY- wrapperY - (inputHeight/2);

      // Apply the positioning styles to actually move the invisible file input
      input.css({
        left:moveInputX,
        top:moveInputY
      });
    });

    $('body').on('change', '.file-input-wrapper input[type=file]', function(){

      var fileName;
      fileName = $(this).val();

      // Remove any previous file names
      $(this).parent().next('.file-input-name').remove();
      if (!!$(this).prop('files') && $(this).prop('files').length > 1) {
        fileName = $(this)[0].files.length+' files';
      }
      else {
        fileName = fileName.substring(fileName.lastIndexOf('\\') + 1, fileName.length);
      }

      // Don't try to show the name if there is none
      if (!fileName) {
        return;
      }

      var selectedFileNamePlacement = $(this).data('filename-placement');
      if (selectedFileNamePlacement === 'inside') {
        // Print the fileName inside
        $(this).siblings('span').html(fileName);
        $(this).attr('title', fileName);
      } else {
        // Print the fileName aside (right after the the button)
        $(this).parent().after('<span>'+fileName+'</span>');
      }
    });

  });

};

// Add the styles before the first stylesheet
// This ensures they can be easily overridden with developer styles
var cssHtml = '<style>'+
  '.file-input-wrapper { overflow: hidden; position: relative; cursor: pointer; z-index: 1; }'+
  '.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover { position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; }'+
  '.file-input-name { margin-left: 8px; }'+
  '</style>';
$('link[rel=stylesheet]').eq(0).before(cssHtml);

})(jQuery);

Thanks to Gregory Pike for his good work. The jQuery plugin is distributed under Apache License.

XPages: Dojo 1.8.1 & jQuery Mobile 1.3.1

25. April 2013 Posted by Sven Hasselbach

As David Leedy got into trouble with Dojo 1.8.1 and jQuery Mobile 1.3.1  and after reading the follow up from Ulrich Krause with the analysis of the problem, I thought that this problem is caused from the AMD loader of Dojo. That’s why I changed the loading order (by forcing the jQuery libraries to get loaded before Dojo), and this seems to work.

I have tested it in IE 8, FF 20.0 and Chrome 26.0.

Here is my test XPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.properties>
        <xp:parameter
            name="xsp.resources.aggregate"
            value="true" />
    </xp:this.properties>
    <xp:this.resources>
        <xp:styleSheet
            href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <xp:headTag
            tagName="script">
            <xp:this.attributes>
                <xp:parameter
                    name="type"
                    value="text/javascript" />
                <xp:parameter
                    name="src"
                    value="http://code.jquery.com/jquery-1.9.1.min.js" />
            </xp:this.attributes>
        </xp:headTag>
        <xp:headTag
            tagName="script">
            <xp:this.attributes>
                <xp:parameter
                    name="type"
                    value="text/javascript" />
                <xp:parameter
                    name="src"
                    value="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" />
            </xp:this.attributes>
        </xp:headTag>
    </xp:this.resources>

    <div
        data-role="page"
        class="jqm-demos"
        data-quicklinks="true">

        <div
            data-role="content"
            class="jqm-content"
            id="contentRefresh">
            <h2
                id="accordion-markup">
                <script>document.write(dojo.version)</script>
            </h2>

            <div>
                <div
                    data-role="collapsible-set"
                    data-theme="c"
                    data-content-theme="d">

                    <div
                        data-role="collapsible">
                        <h3>Section</h3>
                        <p>
                            <xp:label
                                value="#{javascript:java.lang.System.currentTimeMillis()}"
                                id="labelRefresh" />
                        </p>
                    </div>
                </div>
            </div>
            <a
                href="#"
                onclick="XSP.partialRefreshGet('#{id:labelRefresh}')"
                data-role="button">Refresh Label</a>
        </div>
    </div>

</xp:view>

And this is the result:

The XSP object is loaded correctly and Partial Refreshs are executed correctly:

It is required that the resource aggregation is enabled. More details can be found here.

XPages: Capture Signatures with the jQuery-Plugin ‘jSignature’

26. September 2012 Posted by Sven Hasselbach

In one of my current projects it is one of the goals that the members of the field staff have the possibility to sign a report directly on their iPad. After some research I found the very cool jQuery plugin jSignature, which easily allows to add a signature capture field to a XPage.

The plugin is very easy to use: Just add a <div> to your XPage and initialize the plugin with the .jSignature() constructor and that’s it! The API is very simple, but provides everything needed: The captured signatures can be stored in different formats like PNG or SVG or as native Vector. Additionally they can be encoded as BASE64 or BASE30. The data can restored as easy as they can be saved: Just one API call and it’s done.

To save the signatures to a Notes document, the resulting data can be copied to a hidden input field. In the provied example above I additionally added the format of the signature. For a better handling of the generated data I decided to store the data in the SVG format, because this allows to save it directly in standard notes text field (without having problems because of the 32 K limit). This works well and the data can be displayed in standard browsers without any problems. Only in XPiNC this will not work, because the SVG format is not supported. PDFs doesn’t support SVG too, that’s why I created a converted agent using the Apache Batik framework.

I will add a demo database asap. A description of parameters to customize the plugin can be found here.

P.S. The compressed Version is not running on teamstudio Unplugged. You have to use the uncompressed Version. The example uses the x$ function of Mark Roden.

 XPage example

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.resources>
        <xp:script src="/x$.js" clientSide="true"></xp:script>
        <xp:script src="/jSignatureHandler.js" clientSide="true" />
        <xp:styleSheet href="/jSignature.css"></xp:styleSheet>
    </xp:this.resources>
    <xp:this.data>
        <xp:dominoDocument var="documentSig" 
           formName="frmSignature" />
    </xp:this.data>

    <script src="js/jquery-1.8.1.min.js" />
    <script src="js/jSignature/jSignature.min.js" />

    <xp:div id="jSignature" style="width:400.0px"></xp:div>
    <xp:scriptBlock id="scriptBlockSignature">
        <xp:this.value><![CDATA[
        $(document).ready(function() { 
            sigHandler.init( "#{id:jSignature}", 
               "#{id:inputHiddenSignatureData}", 
               "#{id:inputHiddenSignatureFormat}" );
        }
        )]]></xp:this.value>
    </xp:scriptBlock>

    <xp:button id="button1" value="Reset">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[
                sigHandler.reset();
            ]]></xp:this.script>
        </xp:eventHandler>
    </xp:button>

    <xp:button id="button2" value="Save">
        <xp:eventHandler event="onclick" submit="true"
           refreshMode="complete">
            <xp:this.script><![CDATA[ 
                return sigHandler.save();
            ]]></xp:this.script>
            <xp:this.action>
                <xp:saveDocument var="documentSig" />
            </xp:this.action>
        </xp:eventHandler>
    </xp:button>

    <xp:inputHidden id="inputHiddenSignatureData" 
       value="#{documentSignature.SignatureData}" />
    <xp:inputHidden id="inputHiddenSignatureFormat"
       value="#{documentSignature.SignatureFormat}" />

</xp:view>

CSJS library “jSignatureHandler.js”

/**
 * signatureHandler
 * JS Object for handling the signature data
 * Requires jSignature jQuery plugin & special 
 * function "x$" from Mark Roden
 * 
 * @author Sven Hasselbach
 * @category JavaScript
 * @category jQuery
 * @category UI
 * @version 1.0
 */
var signatureHandler = function() {
    _module = "signatureHandler";

    _idJSignature: null; // DOM id of JSignatue DIV
    _idItemData: null; // DOM id of INPUT for signature data
    _idItemFormat: null; // DOM id of INPUT for signature format
    _objDOMJSignature: null; // handle to DOM object
    _objDOMItemData: null; // handle to DOM object
    _objDOMItemFormat: null; // handle to DOM object
    _maxSize = 32000; // max characters to store (32K limit!)
    _format = "svg"; // format used

    /**
     * set DOM id of JSignature DIV
     * @param String id
     */
    this.setJSignatureId = function( id ){
        this._idJSignature = id;
    }
    /**
     * get DOM id of JSignature DIV
     * @return String id
     */
    this.getJSignatureId = function(){
        return this._idJSignature;
    }
    /**
     * set DOM id of data item
     * @param String id
     */
    this.setItemDataId = function( id ){
        this._idItemData = id;
    } 
    /**
     * get DOM id of data item
     * @return String id
     */
    this.getItemDataId = function(){
        return this._idItemData;
    }
    /**
     * set DOM id of format item
     * @param String id
     */
    this.setItemFormatId = function( id ){
        this._idItemFormat = id;
    } 
    /**
     * get DOM id of format item
     * @return String id
     */
    this.getItemFormatId = function(){
        return this._idItemFormat;
    }

    /**
     * get handle to DOM object of JSignature DIV
     * @return Object
     */
    this.getJSignatureDOMObj = function(){
        return this._objDOMJSignature;
    }
    /**
     * set handle to DOM object of JSignature DIV
     * @param Object
     */
    this.setJSignatureDOMObj = function( obj ){
        this._objDOMSignature = obj;
    }
    /**
     * get handle to DOM object of data item
     * @return Object
     */
    this.getItemDataDOMObj = function(){
        return this._objDOMItemData;
    }
    /**
     * set handle to DOM object of data item
     * @param Object
     */
    this.setItemDataDOMObj = function( obj ){
        this._objDOMItemData = obj;
    }
    /**
     * get handle to DOM object of format item
     * @return Object
     */
    this.getItemFormatDOMObj = function(){
        return this._objDOMItemFormat;
    }
    /**
     * set handle to DOM object of format item
     * @param Object
     */
    this.setItemFormatDOMObj = function( obj ){
        this._objDOMItemFormat = obj;
    }

    /**
     * initialize object
     * 
     * @param String id of jSignature DIV
     * @param String id of data item INPUT
     * @param String id of format item INPUT
     * 
     */
    this.init = function( idJSig, idItemData, idItemFormat ){
        try{

            // init jSignature
            this._idJSignature = idJSig;
            this._objDOMSignature = x$( this._idJSignature ) ;
            this._objDOMSignature.jSignature();
            // init data item
            this._idItemData = idItemData;
            this._objDOMItemData = x$( this._idItemData );

            // init format item
            this._idItemFormat = idItemFormat;
            this._objDOMItemFormat = x$( this._idItemFormat );

            return true;
        }catch(e){
            var errMsg = _module + "::" + arguments.callee.name + "\n";
            for( p in e ){
                errMsg += p + ": '"  + e[p] + "'\n";
            }
            console.error( "Error!\n\n" + errMsg );
            return false;
        }
    }

    /**
     * reset jSignature
     */
    this.reset = function(){
        try{
            this._objDOMSignature.jSignature("reset");
            return true;
        }catch(e){
            var errMsg = _module + "::" + arguments.callee.name + "\n";
            for( p in e ){
                errMsg += p + ": '"  + e[p] + "'\n";
            }
            console.error( "Error!\n\n" + errMsg );
            return false;
        }
    }
    /**
     * saves the data from jSignature
     * 
     */
    this.save = function(){
        try{
            var datapair =  this._objDOMSignature.jSignature( "getData", _format );
            var format = "data:" + datapair[0];
            var data = datapair[1];
            // check max size!
            if( data.length >  _maxSize){
                alert( "The size of the signature is too large. Please retry!" );
                return false;
            }

            this._objDOMItemData.val( data );

            this._objDOMItemFormat.val( format )
            return true;

        }catch(e){
            var errMsg = _module + "::" + arguments.callee.name + "\n";
            for( p in e ){
                errMsg += p + ": '"  + e[p] + "'\n";
            }
            console.error( "Error!\n\n" + errMsg );
            return false;
        }
    }
}

// init JS instance
sigHandler = new signatureHandler();

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

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