Andrej Koelewijn

Howto debug Mendix java actions

2014-01-16T00:00:00+01:00

To debug Java Actions used in a Mendix Microflow you need to make some configuration changes to the way you start the Mendix runtime.

Add the following in your project settings, in server configuration add the following to Extra JVM parameters:

-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005

Start your application in Mendix.

In your Java IDE you need to configure remote debugging. The following screenshot shows my configuration in IntelliJ

Start the debugger, put some breakpoints in your java code, and start debugging.

Profiling Mendix using JProfiler

2014-01-15T00:00:00+01:00

JProfiler is a Java profiler which can give you insight into what a running application is doing: which methods are consuming the most cpu, how many objects are created, etc. Jprofiler also shows you information about jdbc calls and sql statements executed by your java application.

Setting up Jprofiler to profile a Mendix runtime is easy, you can start profiling a running Mendix runtime, without reconfiguration or restarting the application.

The installation guide provides a more complete manual, but the basic steps are:

download and install Jprofiler on a desktop, this will be the client gui
download and unzip Jprofiler on your server, start bin/jpenable (see see section B.3.10 Attaching To JVM of the manual)
Start the client on your desktop, connect to a remote server on the port indicated by jpenable

Here are some screenshots:

Choose to profile an application on a remote server

My Mendix application is running in a virtual machine running Linux

Choose which Java you are using

I’ve already started the Mendix runtime

IP Address of my virtual machine

Directory in the virtual machine where i unzipped Jprofiler

This is the port returned by running bin/jpenable

Start

Choose how you want Jprofiler to collect information about your application

This is just default setup

And finally where looking at some data collected by Jprofiler

I currently have 4 database connections

JDBC Hotspots shows the heaviest SQL statements

Dynamische Architectuur Visualisaties

2013-11-30T00:00:00+01:00

Tijdens het LAC-2013 heb ik een presentatie verzorgd over Dynamische Architectuur Visualisatie. Tijdens deze presentatie heb ik laten zien hoe ik schetsen in SVG formaat gebruik als visuele ondersteuning van een presentatie. De svg versie van deze presentatie zie je hieronder. De volgende pagina biedt de mogelijkheid om slides van de presentatie te bookmarken, of the mailen: Dynamische Architectuur Visualisatie. Source code van de library staat op github: Inkscape presenter.

Monitoring Mendix using JMX

2013-11-18T00:00:00+01:00

The following is only relevant if you run Mendix on-premises. If you do, you probably have standard monitoring tooling that you use to monitor all your applications.

For java applications most monitoring tools provide a way to hook into JMX to get information about the application. The following describes how you can use JMX to get information on your Mendix application.

Mendix doesn’t provide any runtime or application specific MBeans, which means that without writing your own MBeans you will only be able to monitor generic JVM statistics. In this post i’ll describe how you enable JMX on your Mendix runtime. I’ll also decribe how you can write custom MBeans to expose Mendix runtime information and application specific information.

This post will discuss the following:

Starting the Mendix runtime with JMX enabled
MBean exposing generic Mendix statistics
MBean exposing application specific statistics
Register MBeans using a Startup microflow

Starting the Mendix runtime with JMX enabled

To enable JMX on your Mendix runtime you can use the following javaopts to the m2ee.yaml for your Mendix runtime:

 javaopts: [
   "-Dfile.encoding=UTF-8", "-XX:MaxPermSize=64M", "-Xmx128M", "-Xms128M",
   "-Djava.io.tmpdir=/tmp",
   "-Dcom.sun.management.jmxremote",
   "-Dcom.sun.management.jmxremote.port=7845",
   "-Dcom.sun.management.jmxremote.local.only=false",
   "-Dcom.sun.management.jmxremote.authenticate=false",
   "-Dcom.sun.management.jmxremote.ssl=false",
   "-Djava.rmi.server.hostname=192.168.1.70",
 ]

After you restart the Mendix runtime you will be able to connect to it using tools like JConsole or VisualVM. Every JVM by default exposes information like memory usage, garbage collection and threading. If you want more, you can write you own MBeans.

MBean exposing generic Mendix statistics

The simplest way to expose management information is by writing a MBean interface and a Java class which implements the interface. You can define getters and setter, but you can also define methods which can be called from generic management tooling. I’ve used this for example to tell a running application to reload its configuration file.

Example of an interface which contains getters for some generic Mendix information, MxStatsMBean.java:

package jmx.actions;
public interface MxStatsMBean {
    public int getMaximumNumberConcurrentUsers() throws Exception;
    public int getActionQueueSize();
    public int getActiveActionCount();
    public int getScheduledActionCount();
    public long getNumberConcurrentSessions();
    public long getCurrentUserCount();
    public long getCompletedActionCount();
    public long getNamedUserCount();
}

And here is the implementation, MxStats.java. The methods just call the Mendix Core class, and return the value:

package jmx.actions;
import com.mendix.core.Core;
public class MxStats implements MxStatsMBean {
    public int getMaximumNumberConcurrentUsers() throws Exception {
            return Core.getMaximumNumberConcurrentUsers();
    }
    public int getActionQueueSize(){
        return Core.getActionQueueSize();
    }
    public int getActiveActionCount(){
        return Core.getActiveActionCount();
    }
    public int getScheduledActionCount(){
        return Core.getScheduledActionCount();
    }
    public long getNumberConcurrentSessions(){
        return Core.getNumberConcurrentSessions();
    }
    public long getCurrentUserCount(){
        return Core.getConcurrentUserCount(true);
    }
    public long getCompletedActionCount(){
        return Core.getCompletedActionCount();
    }
    public long getNamedUserCount(){
        return Core.getNamedUserCount();
    }
}

Here’s a screenshot of JConsole showing the values exposed by this MBean:

MBean exposing application specific statistics

You can use the same approach, with an Interface and implementation class, to also expose application specific information. Here’s a different approach: one that exposes a dynamic set of values. You can do the same with methods, but the example only shows attributes to retrieve values.

The idea is that you will have a Java Action that you can call in a microflow, where you expose arbitrary key, value pairs. Here’s an example in the Mendix modeler:

The implementation of the SetJmxValue looks like this:

package jmx.actions;
public class SetJmxValue extends CustomJavaAction<Boolean>
{
  private String name;
  private Long value;
  public SetJmxValue(IContext context, String name, Long value)
  {
    super(context);
    this.name = name;
    this.value = value;
  }
  @Override
  public Boolean executeAction() throws Exception
  {
    // BEGIN USER CODE
    MxAppStats.setLongValue(name,value);
    return true;
    // END USER CODE
  }
  /* .... */
}

The real meat is in the MxAppStats class. Here i use a HashMap to store all the key,value pairs that will be exposed. The HashMap is implemented as a static property, so this will be runtime instance specific (for production you’ll want to make this code thread-save, which it currently isn’t). GetMBeanInfo returns the data which tells the monitoring software which properties are exposed in this MBean.

package jmx.actions;

import javax.management.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Vector;

public class MxAppStats implements DynamicMBean {

    private static HashMap stats;

    @Override
    public Object getAttribute(String attribute) throws AttributeNotFoundException, MBeanException, ReflectionException {
        return getStats().get(attribute);
    }

    @Override
    public void setAttribute(Attribute attribute) throws AttributeNotFoundException, InvalidAttributeValueException, MBeanException, ReflectionException {
        getStats().put(attribute.getName(), attribute.getValue());
    }

    @Override
    public AttributeList getAttributes(String[] attributes) {
        AttributeList list = new AttributeList();
        for (Object name : getStats().keySet()) {
            list.add(new Attribute((String) name, getStats().get(name)));
        }
        return list;
    }

    @Override
    public AttributeList setAttributes(AttributeList attributes) {
        return null;
    }

    @Override
    public Object invoke(String actionName, Object[] params, String[] signature) throws MBeanException, ReflectionException {
        return null;
    }

    @Override
    public MBeanInfo getMBeanInfo() {
        //MBeanAttributeInfo[] attrs = new MBeanAttributeInfo[getStats().size()];
        ArrayList<MBeanAttributeInfo> attrs = new ArrayList();
        for (Object name : getStats().keySet()) {
            MBeanAttributeInfo attr = new MBeanAttributeInfo(
                    (String) name,
                    "java.lang.Long",
                    "Property " + name,
                    true,
                    true,
                    false
            );
            attrs.add(attr);
        }
        MBeanInfo info = new MBeanInfo(
                this.getClass().getName(),
                "Mendix App MBean",
                (MBeanAttributeInfo[]) attrs.toArray(new MBeanAttributeInfo[0]),
                null,
                null,
                null
        );
        return info;
    }

    public static void setLongValue(String name, Long value) {
        getStats().put(name, value);
    }

    private static HashMap getStats() {
        if (stats == null) {
            stats = new HashMap();
        }
        return stats;
    }
}

Register the MBeans using a Startup microflow

You need to register your MBean with the MBeanServer, before they can be used. We will call the initialization code in a Startup Microflow.

First we need to create a microflow:

Now we can call it in the startup of the Mendix runtime:

And the java code for the InitJMX action:

@Override
public Boolean executeAction() throws Exception
{
  // BEGIN USER CODE
      initJmx();
      return true;
  // END USER CODE
}
// BEGIN EXTRA CODE
  private MBeanServer mbs = null;
  private void initJmx() throws NotCompliantMBeanException, InstanceAlreadyExistsException, MBeanRegistrationException, MalformedObjectNameException {
  mbs = ManagementFactory.getPlatformMBeanServer();
  /*
   * runtime statistics
   */
  MxStatsMBean mxStats = new MxStats();
  ObjectName mxMbeanName = new ObjectName("Mx:name=MxMbean");
  mbs.registerMBean(mxStats, mxMbeanName);
  /*
   * application statistics
   */
  MxAppStats appStats = new MxAppStats();
  ObjectName mxAppMbeanName = new ObjectName("Mx:name=MxAppMbean");
  mbs.registerMBean(appStats, mxAppMbeanName);
  }
// END EXTRA CODE

JMX is the default Java way to expose information to monitoring tooling, so there are lots of options besides JConsole and VisualVM. There’s command line tooling like jmxterm, or complete monitoring suites like Hyperic HQ, Hawt.io, and RHQ. Other well know monitoring tooling like Splunk and New Relic also offer ways to feed it JMX data. Or you can create something cutting edge using Logstash, jmxtrans, ElasticSearch and Kibana.

Testing Mendix applications using Selenium

2013-10-05T00:00:00+02:00

Selenium is a useful tool for automating functional tests. In this post i’ll show you some tips and tricks about using Selenium IDE with Mendix. Selenium IDE is a Firefox plugin that enables you to record whatever you are doing in Firefox, so that you can repeat these steps as a test script.

You can use Selenium IDE to record tests scripts, but these scripts need to be edited before you can use them:

Replace id targets with xpath targets
- Most buttons you can target by the text in the button
```
mouseDown //button[text()='New']
```
- Mendix 4 buttons aren’t implemented using a button tag, but use a series of nested divs and spans. Also, the mouseDown event handler doesn’t trigger execute the logic behind the button. Keypress with a return keySequence on the top div does the trick. (Tip: Inspect Element in Google Chrome has a tab called Event Listeners which lists all the event handlers of an html element.)
```
keyPress //div[contains(@class,'mendix_Button')][.//span[text()='New']] \\13
```
- You can target input fields by the label before it:
```
type //input[ancestor::tr/th/label='Omschrijving'] test-value
```
  This xpath expression selects the input element, which is in a table row, that has a table header containing a label Omschrijving.
- If you have a form with multiple columns, you can use the following xpath:
```
type //input[preceding::th[1]/label='Omschrijving'] test-value 
```
  This xpath expression tells Selenium to select the input field where the closest preceding table header contains a label Omschrijving.
- To choose a value from a dropdown list:
```
select //select[preceding::th/label='Af Bij'] label=Af
```
  This selects the value Af from a dropdown list preceded bij a label Af Bij.
- To edit an entity from a DataGrid table, you can use the following:
```
waitForElementPresent //table//tr/td/div[text()='test-transactie-1']
doubleClick //table//tr/td/div[text()='test-transactie-1']
```
  This will cause a double click on a tablecell containing the text test-transactie-1.
Replace most mouse clicks with mouseDown mouseUp. To click on a button you need the following commands:
```
mouseDown //label[text()='Save']
mouseUp //label[text()='Save']
```
Btw, you don’t need to do this for popup alter windows. Here you can use click:
```
click //button[text()='OK'] 
```

Add a fireEvent blur after typing text in an input field:

fireEvent //input[preceding::th[1]/label='Btw percentage'] blur

Add waitForElementPresent commands, for example:

waitForElementPresent //button[text='New']
waitForElementPresent //h1[text()='Boek']

An ofcourse, a test script wouldn’t be complete without some actual tests:
```
verifyValue //input[preceding::th[1]/label='Bon nummer'] 123
```
This verifies that the page contains an input field preceded by a label Bon nummer contains the value 123.
```
assertVisible //table//tr/td/div[text()='inkoop-1-checked']
```
This checks a table cell contains the value inkoop-1-checked.
```
assertVisible //h1[text()='Edit Boek']
```
This verifies that the page contains a header with the text Edit Boek.
```
assertVisible //div[@class='alert alert-error'][text()='Invalid currency']
```
This verifies that the page contains an error message with the text Invalid currency.
```
assertElementNotPresent //dev[@class='alert alert-error']
```
This verifies that the page doesn’t contain any error messages.

This has been tested with Mendix 5.0.0 beta 7. You’ll probably need different xpath expressions for other versions of Mendix. Firefox inspector is a useful tool for inspecting the generated html to determine the correct xpath expressions.

Debugging with webstorm and karma

2013-05-07T00:00:00+02:00

I think this is not mentioned in Vojta’s testacular video, or maybe I missed it, but i had to install JetBrain’s chrome debugger plugin to be able to debug tests run with Karma in Webstorm.

The steps i used to get it to work:

Install chrome Jetbrains IDE support plugin
Configure a Karma Server run configuration in Webstorm:
Configure a Karma debug configuration in Webstorm:
Run Karma server
Run Karma debug

Small example

Create project folder

npm install -g karma
mkdir test-karma
cd test-karma
mkdir app
mkdir app/js
mkdir app/lib
cp <angular library> app/lib/angular.min.js
mkdir config
mkdir test
mkdir test/unit

Edit app/index.html

<!doctype html>
<html ng-app>
	<head>
	    <title>Hello World</title>
	    <script src="lib/angular.min.js"></script>
	    <script src="js/app.js"></script>
	</head>
	<body ng-controller="HelloWorldCtrl">
	    <p>Hello </p>
	    <input id="name" name="name" type="text" ng-model="name" 
	           placeholder="What's your name?"/>
	     <a href="#" ng-click="reset();">Reset</a>
	</body>
</html>

Edit app/js/app.js

function HelloWorldCtrl($scope) {
	$scope.reset = function(){
	    $scope.name = "";
	};
}

Edit test/unit/HelloWorldCtrlSpec.js

describe('HelloWorld controller',function(){
	it('Should reset name value',function(){
		var scope = {},
			ctrl = new HelloWorldCtrl(scope);
		scope.name = "john";
		scope.reset();
		expect(scope.name).toBe("");
	});
});

Create a karma configuration file:

$> karma init config/karma.conf.js

    Which testing framework do you want to use ?
    > jasmine
    Do you want to use Require.js ?
    > no
    Do you want to capture a browser automatically ?
    > Chrome
    Which files do you want to test ?
    > test/**/*Spec.js
    Any files you want to exclude ?
    > 
    Do you want Testacular to watch all the files and run the tests on change ?
    > yes
    Config file generated at "/home/akoelewijn/projects/training-angularjs/test-karma/config/karma.conf.js".

Five examples why every tablet needs a camera

2013-01-21T00:00:00+01:00

There are a lot of people who think camera’s in tablets are a bad idea. “Nobody should be allowed to take pictures with a large tablet in front of their face.”

But if you can think outside of the traditional camera box for a moment, and start to think what’s possible if you combine a really portable computer with a decent camera, you’ll soon see interesting new possibilities.

Just a couple examples:

Camscanner - turns your tablet or smartphone into a scanner. You take a picture of your notes using camscanner, it enhances the contrast and readability, and truns it into a pdf. Great tool if you still prefer to take notes with traditional pen and paper, but would like to store your notes digitally.
POP prototyping - turns your paper mockups into clickable digital mockups. You just draw your mockups on pen and paper, take some pictures, and add some interaction: what screen should be displayed when you press somewhere on your paper mockup?
Magicplan - Take a picture of all the corners of a room, and Magicplan automatically draws a map of the room. Magicplan also calculates the size of your room. Would be even nicer if you could integrate it with something like Google sketchup and create 3d models of your rooms. I bet there’s an app for that?
Puppetpals - Nice app to create animated stories. What makes it really nice is that you can take pictures of the people around you and quickly add them into your story.
DermoMap - Application to help diagnosing skin problems. It offers information on all sorts of skin diseases. Using the camera, a picture of a skin problem can be used in the application to compare it with available pictures.

There’s probably a lot more things you do with a computer that would benefit from direct access to a camera. It’s certainly a lot faster and easier than having to take a picture with another device and then getting the picture into the application where you need it.

Time to toss out the laptop?

2013-01-07T00:00:00+01:00

While converting my old wordpress blogposts to markdown i read some of my old posts. For example, here is what i wrote when Apple launched the iPhone in 2007:

In a couple of years mobile phones will be powerful enough to replace laptops for most common computing usages. You won’t need a separate laptop. You walk around with your mobile phone, in the office or at home you put it in a docking station, attach a keyboard and a bigger display, and you have all the computing power you need.

Some news this last week indicates we’re getting close to that point: 76 cores in a mobile cpu & desktop OS for phones.

Moving from Wordpress to Jekyll

2013-01-03T00:00:00+01:00

Work in progress

I’m a slow mover here, far behind the hype-curve, but this blog is currently being moved to jekyll. The following are some notes and links from this process.

Reasons to migrate:

Cheaper hosting - this blog is currently hosted on DreamHost. By migrating to a static site using Jekyll, cheaper options become available, for example Amazon S3 or Github.
Learn something new -10 years ago this blog started on Moveable Type, which also generated static html pages. In 10 years we’ve gone from full dynamic back to static, mostely thanks to javascript. The dynamic parts in many pages can be generated using javascript and external APIs. I wanted to see how well this works using Jekyll and S3.
Security - Wordpress blogs are a frequent target of attacks, my weblog has been hacked once so far. A static website should be a lot more secure. I’m also trying Cloudflare as an extra defence mechanism.
Speed - A static website should be a bit faster than a dynamically generated wordpress site. Also interested to see if Cloudflare speeds up things.
Readability - it’s time for a cleaner design, i do most of my reader on a tablet these days. I want to create a better reading experience on tablets by removing all the sidebars, etc.

Some usefull links i’ve found:

converting wordpress posts

This is where is spent most of my time. There are automatic conversion scripts, but i still need to do a bit of manual work on every post to create nice markdown formatted posts.

The following gedit external tool script helps converting html posts to markdown posts:

#!/bin/sh
sed 's/\r//g' | \
  sed 's/\[sourcecode.*\]/<pre><code>/g' | \
  sed 's/\[\/sourcecode\]/<\/pre><\/code>/g' | \
  sed 's/\[code.*\]/<pre><code>/g' | \
  sed 's/\[\/code\]/<\/pre><\/code>/g' | \
  sed 's/^$/<div\/>/g' | \
  pandoc -f html -t markdown --reference-links --indented-code-classes=code

Some manual changes:

Replace image links.
Modify embed tags used to include svg images. Now using image tags.

The result is much cleaner post text.

syntax highlighting

You can do code highlighting when generating the static pages using one of the markdown engines. I’ve chosen to implement it client side, leaving the generated html as clean as possible.

[Google code prettify] will determine the correct programming language so you don’t have to specify it yourself. The following javascript lines enable prettify on all pre tags:

$(document).ready(function(){
    $("pre").addClass("prettyprint");
    prettyPrint();
});

Images

Automatic conversion of image links in html to markdown didn’t work as well as i hoped. The following was created for html links showing a thumbnail image and linking to a fullsize image:

[![][]][]
[![][]]: http://www.andrejkoelewijn.com/wp/wp-content/uploads/2010/03/Screenshot-1.png

I manually replaced these with the following:

[![screenshot alt text][screenshot thumbnail]][screenshot]
[screenshot]: http://www.andrejkoelewijn.com/blog/images/2010/03/Screenshot-1.png
[screenshot thumbnail]: http://www.andrejkoelewijn.com/blog/images/2010/03/Screenshot-1-320x240.png

Comments

Disqus

Keep url the same comments:true Add disqus javascript to post template

Objects

Svg animations using objects - replaced by img tag, link to html page with object Problems with html generation using kramdown

Search

Google Custom Search Engine

Socialite.js

Urls

url in wordpress everything is path, no resource:

http://www.andrejkoelewijn.com/wp/2010/03/05/jee-cdi-tip-target-unreachable-identifier-resolved-to-null/

Default in jekyll, ends with html page:

http://www.andrejkoelewijn.com/blog/2013/01/03/moving-from-wordpress-to-jekyll.html

This can be configured in _config.yml

permalink:   pretty

Javascript

Javascript libraries are used from CDNJS

Upload to Dreamhost

For now this weblog is still hosted on Dreamhost, i’ll look into S3 when the migration to Jekyll has been completed.

Deployment is done using rsync:

rsync --progress --compress --recursive --checksum --delete _site/ user@host.tld:public_html/

Caching with CloudFlare

Cloudflare CDN to cache all content Pagerule to host html pages: www.andrejkoelewijn.com/wp/20////

Performance result on webpagetest

Upload to s3

To deploy to Amazon S3 the following s3cmd line can be used:

s3cmd sync --dry-run --skip-existing --delete-removed ~/Dropbox/weblog-andrej/site-src/_site/ s3://<bucket name>

Remote debuggen van mobiele applicaties

2012-12-05T00:00:00+01:00

Ik kwam vanochtend op Google+ een interessante presentatie van Magaret Leibovic tegen waarin ze onder andere de tools in firefox bespreekt die je kunt gebruiken voor het debuggen van web applicaties op een smartphone.

Safari biedt vergelijkbare tooling om webapplicaties op een iPad of iPhone te debuggen. Deze heb ik recent gebruikt, en ik moet zeggen, dat werkt heel aardig. Tooling is vrij compleet: er is ondersteuning voor javascript debugging, je kunt zien welke resources van het netwerk gedownload worden, de timing, wat er in de appcache is opgeslagen, etc. Grootste nadeel is dat je nu ook voor het ontwikkelen van webapplicaties Mac OSX nodig hebt, aangezien dit alleen in safari ondersteund wordt.

Firefox biedt vergelijkbare functionaliteit, maar nog lang niet zo uitgebreid. In Firefox 18 zit een remote javascript debugger, in Firefox 19 komt ook ondersteuning voor remote web logging (console.log). De overige tooling lijkt nog afwezig.

Ook chrome biedt ondertussen ondersteuning voor het remote debuggen van mobiele web applicaties. Helaas alleen op Android. Er is wel een chrome voor iOS, maar deze heeft geen remote debugging ondersteuning. De tooling van Chrome voor debuggen is wel een stuk completer dan van Firefox, zoals je in onderstaande screenshots kunt zien.

Javascript debugging:

Debuggen van netwerk verkeer:

Resources view is handig als je wilt zien of offline caching mbv appcache werkt:

Helaas is er dus nog geen goede tooling die overal werkt, maar Safari en Chrome lopen duidelijk voor op Firefox. Hopelijk komt daar snel verandering in.