Eclipse GLSP – Nodes and Moveable Labels

In my last tutorial I gave a short introduction into Eclipse GLSP and how you can get started with your own Domain specific source model. Eclipse GLSP provides a powerful and rich feature set to solve different kind of problems in the modelling area. Today I would like to show a solution to a not so rare problem in graphical modelling.

In BPMN 2.0 and other modelling languages, elements often have labels outside of the element – e.g a label below an symbol. In BPMN labels are also moveable and can be placed at any position in a diagram even if the label is associated with the symbol:

How can this be realised with GLSP? It took me a long time, but the solution is quite simple. Let’s assume you have followed my first tutorial creating your GNode Elements out from your source model. In that case you have a GModelFactory creating the GNode elements.

Continue reading “Eclipse GLSP – Nodes and Moveable Labels”

Build Your Own Modelling Tool with Eclipse GLSP

Eclipse GLSP is a new graphical language server platform allowing you to build powerful and highly adoptable modelling tools. Like many modern modelling frameworks it is based on Node.js and runs in a web browser. But unlike many other modelling tools, Eclipse GLSP takes a much broader approach. It forces the strict separation between the graphic modelling and the underlying model logic. With this concept Eclipse GLSP can not only be integrated in different tooling platforms like Eclipse Theia, Microsoft VS Code or the Eclipse desktop IDE, it also allows any kind of extension and integration within such platforms. On the project homepage you can find a lot of examples and videos demonstrating the rich possibilities.

Continue reading “Build Your Own Modelling Tool with Eclipse GLSP”

MVC 1.0 – Binding Input Values

MVC 1.0 is the new action based web framework for Jakarta EE. One advantage of the new technology is that you can work with plain html. With the expression language (EL) provided by JSP and Facelets you can easily bind values form a CDI controler to an input field:

    <input type="text" value="#{}" name="name" />

This works also for Textareas:

    <textarea name="descripton">#{dataController.description}</textarea>

A little bit more tricky in this szeanrio is the handling of select options (Combobox). As the selected Item is defined by an attribute within the option tag a combination with EL is clumsy. But with the help of jQuery this can also be archived easily. See my following example:

  <dt>Sort Order:</dt>
      <select name="sortOrder" id="sortOrder">
        <option value="DESC">Descanding</option>
        <option value="ASC">Ascanding</option>

<script type="text/javascript">
$(document).ready(function() {
  // update the select option....

See also the tutorial “MVC 1.0 in Java EE 8 – Handling Form Submits” to learn how you can submit you form inputs with MVC 1.0.

Ben.JS becomes more secure

Today I worked on the new release 0.3.0 of Ben.JS. This new release now contains no longer eval() calls. This makes the framework more secure. The old calls were replaced by direct method calls. You can test the new release by downloading the latest version from the Download site.

Another improvement is the possibility to provide a application specific release version to Ben.JS. A release version makes sure, that URIs used  in internal load() events will be extend by the release version as a custom parameter. This avoids the annoying browser caching of html templates when you upgrade your application. You simply can start Ben.JS in your application with a custom version number like this:

var myTemplate = benJS.createTemplate({
    id : "my-template",
    url : "view.html"
var benJS =;
        appVersion : "1.0.0"

A template URI like “view.html” will be extended with the version number to “view.html?appVersion=1.0.0”


An Alternative to AngularJS and Ember…?

JavaScript FrameWork BenJS  – Version 0.2.0 released!

Today I released the latest version 0.2.0 of the JavaScript FrameWork Ben.JS. You can take a look at the idea and concept of Ben.JS on the project homepage.

My main goal for this project is to provide a tiny small and simple alternative for the big players in the area of Singe-Page-Application Frameworks (SPA Frameworks) –   especially Angular and Ember.

Today JavaScript is not only a widespread programming language, but also a platform to develop clean and stable web applications. But first of all, this is not the merit of frameworks, but of the language itself. A good way to learn using JavaScript in the right manner is the Book ‘JavaScript Patterns’ from Stoyan Stefanov.

I am convinced that for a good JavaScript application it’s enough to know the most important patterns and to understand the right usage of jQuery. And here is the most important reason for BenJS:  The core function of this framework is to transport data models into a Web page and to manage user inputs according to the data model. But in my eyes it is also important to understand, that the business logic should be encapsulated into a Web- or MicroService. For my understanding it is not the task of JavaScript to implement business logic! If you follow this principle and hide your business logic into a WebService, BenJS will be the right alternative to bring your business data into your Web application.

If you have any ideas, questions and feedback join the project on GitHub!


JavaScript Framework Ben.JS version 0.1.0 released

Today I started the release 0.1.0 of the JavaScript Framework Ben.JS. The new release includes improvements of handling view templates and for-each blocks. We tested the framework within the latest version of the Imixs-Workflow AdminClient which is now based on Ben.JS and the Imixs Rest API.

Ben.JS is a plain small and easy-to-learn JavaScript framework for single-page-applications (SPA). The framework simplifies the way to create powerful JavaScript Web Applications with a lightweight MVC framework. Read more about Ben.JS here.


Singe-Page-Application = Don’t think about the business logic!

Today, I discussed with some capable developers the pros and cons of SPA frameworks. This discussion resulted in a debate about the business logic in SPAs, which brought me to the following thoughts about a SPA architecture. In one sentence: Don’t think about the business logic!

Why? Take a moment and remember about the basic idea of a Singe Page Application, what is the general concept behind all that? Basically it is the fact that we can represent any kind of information in modern web browsers. Using HTML5, CSS3 and JavaScript enables us to deal with information in a very easy way. Browsers were build to present information – noting else!. JavaScript on the other hand is just a way to deal with some behaviour how to represent information to the user. For example: fade in some very important message, or show a bubble information text when the user moves the mouse over a picture.

On the other hand we today know very well the concept of REST Services. This is one of the major enablers of Singe-Page-Applications. All frameworks, like Backbone, React, AngularJS, Emer.JS or Ben.JS deal with REST Services and help us to handle the information which we want to show to the user. But if you think about that – these frameworks were build on the following problem: how to present data in a Web Browser using JavaScript?

Today the most SPA frameworks also deal with a heavy load of functionality which makes it hard to understand most of these frameworks. This is because people began to think about another problem: How can we process information? But this the domain of business logic. In the past this business logic was placed in server side frameworks like JEE or Spring. I think this is the right place for this kind of logic. A server should think about how data should be stored in a database, validate data, transform data or update data depending on various business rules. But the time when the Single-Page-Frameworks become more and more common in modern development, many people begun to believe that JavaScript is now the place for business logic. And so we began to use REST Services just to store and fetch data entities. But this is absolutely wrong! Business Logic means to deal with business data in a way  going conform with the business process. So business logic is something which is related to the data and not to the representation of data!

So at the end this means that you should put all your business logic into your REST Service API which is the interface between your Browser front-end and your database back-end. And now you will see what Singe-Page-Applications are really good for: they just represent the data provided by your REST Services. No business logic here! Just show the user the data provided by the back-end. This means: if there is data – show it to the user – if there was something going wrong with the data – show the error message to the user. A Singe-Page-Application can be as dumb as a Terminal application in the 1980s. Put your business logic into the back-end, and use SPA to represented your data. The result will be a  be scale-able, flexible and modern Web Application. And the best: You don’t need to worry about which framework you choose on the front-end. No matter if Angular 2.0 brings up a new concept. The goal of your Web Application is just to represent information – nothing else!

Take a look at the open source project Ben.JS which solves the problem of representing data in a web browser….

Why I started another Singe-Page-Application Framework

Today I decided to start a new open source project providing a singe-page-application (SPA) framework. This sounds crazy, because we live in a time in which so many different spa frameworks are developed.

The reason why I am interested in singe-page-application frameworks is that I have an existing complex JEE Application build on JSF 2.0 and I am looking for a way to reduce the evolved complexity of my web front-end. I don’t think that JSF can compete with SPA in modern web applications. On the other hand I already have an existing Rest Service API in my application. So this is the reason why I stared to look around for a SPA framework that fits my needs.

Continue reading “Why I started another Singe-Page-Application Framework”

Single Page Applications – AngularJS vs. Ember.js

I just started to develop my first JavaScript single page application (SPA) and so I took a look on different JavaScript frameworks. I just want to share some of my thoughts here:

My own background is JEE and I have developed a JEE application with EJBs, JSF and a little bit jQuery. Because of the fact that my existing project (imixs-workflow) provides already a REST API, migrating from JSF to a JavaScript SPA looks promising .

Continue reading “Single Page Applications – AngularJS vs. Ember.js”

How to Submit an Embedded Form in jQuery Dialog using AJAX

Today I searched for a solution to submit a form embedded into a jQuery dialog with ajax.

My situation is the following: I use a jQuery UI Dialog to display a feedback-form in my web application. The feedback form should not change the state of the page the user worked before.

So my first approach was to change my form post action into a ajax post action. This can be done easily during the initialisation of the dialog. See the following code snippet:

 * Method to initialize the feedback dalog.
 * @see contact_dialog.xhtml
function initContactDialog() {
    // set default settings for profile dialog
        resizable : false,
        height : 530,
        width : 550,
        modal : true,
        autoOpen : false

    // hide contact dialog per default
    // the following method modifies the submit request into a ajax request
    // So the dialog will be closed after the submit was successfull without
    // affects to the main page.
    $('#dialog-contact-form').submit(function() {
        // show up waiting panel
               type: "POST",
               url: "http://localhost:8080/myrestservice",
               data: $("#dialog-contact-form").serialize(), // serializes the form's elements.
               success: function(data)
               error: function(data)
                   alert('An error occured. Could not send data!'); // show response from post.

        return false; // avoid to execute the actual submit of the form.

With the initContactDialog() method I initialize the dialog and bind a function to the submit event of my form. The function changes the submit into a ajax call and closes the dialog after the ajax request was finished.

This is quite easy and the dialog will automatically close when the Ajax submit was finished.

Here is the html part of my dialog form:

    <!-- Dialog Box -->
        <div id="dialog-contact"  title="#{global.contact_title}">
            <form id="dialog-contact-form" method="post" name="contact_form">

                <h:panelGrid columns="2">

                                <input type="text" name="txtfirstname" value="" />
                        <dl style="">
                                <input type="text" name="txtlastname" value="" />
                        <dl style="">
                                <input type="text" name="txtemail" value="" />
                <dl style="margin: 0 0 0 0px;">
                        <textarea style="width: 450px; height: 80px;" name="_description" />
                <input type="submit" value="send" />


I open the dialog with the following JavaScript function:

 * helper method to open the contact dialog. 
 * The method creates a new empty contact workitem.
function openContact() {    


As you can see in my script and in the html snippet I have added a div section with the class ‘ajax-wait-panel’. This div overlays the form of my dialog when the ajax call is started. So the user will see a ‘Please wait’ message until the ajax request is finished. I simply add the class ‘ajax-waiting’ to the div section in the moment the request starts and remove the class when the submit was finished. So this is the css part of my solution:

/* Ajax-wait-panel can be useded in jquery dialogs
   for long runnign ajax request.
   Start by setting display:none to make this hidden.
   Background we set to 80% white with
   our animation centered, and no-repeating */
 .ajax-wait-panel {
    display:    none;
    position:   absolute;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .6 ) 
                50% 50% 
    cursor: wait;

.ajax-wait-panel  h2 {
    position: absolute;
    top: 50%;
    margin-top: -80px;
    color: #666;
    text-align: center;
    width: 100%;
/* Class to be added when ajax wait panel should 
   be displayed */
.ajax-waiting {
     display: block;