Architexa product review

Architexa product is an Eclipse plugin from Architexa.com company. As their web site say:

Architexa helps you understand and document large/complex Java code bases within Eclipse

and allowing to create and explore diagrams that make sense.

I have tried it really little but the conclusions are clear: Architexa is a tool with a great potential.

Installation

Installing Architexa is really easy because it is prepared as any other Eclipse plugin (see the install section).

I’m using Eclipse 4.2 (Juno) and the steps were:

  • Go to Help > Install new software and add a new place called architexa with the URL: http://update.architexa.com/4.2/client.
  • Select the Architexa plugin and click next button until installation is done.

Really easy, don’t you?

After Eclipse restarts you will be asked for a valid Architexa user. Go to the registration page and register for a free license. That’s all.

Exploring a project

To test Architexa I have opened a relatively small maven project, which allows to download files from an FTP server. It haven’t a great domain model neither thousand of classes but has all the necessary to test the basic Architexa capabilities.

  • Layered diagrams
  • Class diagrams
  • Sequence diagrams

The bad

Before to continue, I must say Architexa seems to me a product with a great potential, but on the other hand it leaves me with bad feelings.

I prefer to comment all the bad things first so the good things comes later and the reader was left with a good feeling.

  • The Architexta web site is IMO horrible and much more the personal area of each user (http://my.architexa.com/). In addition it seems not much stable, at least for me the profile and setting sections fails with a 500 server error.
  • Once Architexa is installed it needs to build an index from your code. Initially I don’t built the index (when the tool ask me to do it) and after importing the project and building it by hand, it seems not work properly. For some reason my index was corrupted and I need to remove and import the project a couple of times before it woks.
  • The layered, class and sequence diagrams are powerful tools but the way to explore and navigate could be a bit more intuitive. In addition the shapes and colors used could be improved.

As you can see the bad things are almost all related to design and visual aspects, not to the product functionality. Nothing a good web designer can solve.

My opinion for Architexa guys is: Architexa is a great product so make it looks like a great product.

Working with the diagrams

Because the project is a small the most useful diagrams has been the class and sequence diagrams.

In the case of class diagram I added some classes related to the task to download and read radar files. Once a class is added to the diagram you can make actions like:

  • select which methods can be visible in the diagram
  • navigate from a method to other classes (show called method)
  • show which classes references a method (show calling method)

Thanks to this actions you can explore the classes and its dependencies in both directions.

The sequence diagram works in a similar way, you start adding a class or method and, for example, given a method add all the used methods from the same class or from other classes:

Finally, in the layered diagram I have added some classes to see its dependencies. Easily we can see the classes and the packages they belong to.

In addition, on any diagram you can select a class or method and navigate directly to the source code to see the corresponding lines of code.

Conclusions

As I commented previously Architexa is a tool with a great potential. It can help team members to understand better how code works or documenting processes.

As a future features I would like to suggest its integration with the debugger. First the possibility to highlight the current executed method on the class or sequence diagram. Second, the possibility to allow to create a diagram step by step while debugging, that is, selecting which methods or classes we want to add to the sequence diagram while advancing step by step in the code.

Congratulations to the Architexa team for their product !!!

Creating static maps in OpenLayers using PhantomJS

Many times in a web mapping application it is desired to save a picture with the current map information.

Those who works with Google Maps API has also the Static Maps API, which works similarly than Google Maps but produces static images. For example, next call:

produces the image:

Unfortunately, using libraries other than Google Maps, like OpenLayers or Leaflet, there is no similar solution. Probably the best, simple and powerful one, is to install a plugin on your browser to take screenshots. But well.. I think that does not deserve to write a post :p

How to render a web page element to an image?

After writing my last post (Taking Web Page Screenshots), where I show to to take a screenshot of a whole page, I was thinking on using PhantomJS to render only a portion of a page to an image.

The PhantomJS’s WebPage object has a clipRect property which determines the portion of the web page that must be rendered. With this in mind we can see a solution could be:

  • Get the bounding rectangle of the desired DOM element to be rasterized.
  • Set the clipRect property
  • Render the page to a file.

For that purpose I have prepared a little JavaScript application to run with PhantomJS. Its usage is as follows:

For example, the next execution against the demo of Animated Cluster Strategy for OpenLayers selecting the first map:

Produces the image:

Next is the whole code of the program (called rasterize_element.js and based on the rasterize.js application attached on the PhantomJS package):

Note: The code is accesible at GitHub:Gist.

Alternatives and references

Of course I’m not the first one that has explore this issue. A nice snippet from n1k0 can be found at GitHub:Gist. It does more or less the same as the code shown in this post.

Another alternative is the use of CasperJS. As its home page says:

CasperJS is an open source navigation scripting & testing utility written in Javascript and based on PhantomJS — the scriptable headless WebKit engine. It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks such as:

With CasperJS capturing a page element is as easy as:

Taking web page screenshots

Recently I have worked on system that requires to take web page screenshots. Not only a screenshot of the whole page but of a concrete element.

Looking on the net I have found many solutions for this problems, which can be classified in to categories:

  • Local applications: I mean a screen capture program or a plugin for your browser (both Chrome and FireFox has some nice plugins for this).
  • Online services: There are some online services that offers possibility to get a screenshots (like url2png), test your web site on different browsers (like browsershots or browserling) or even an API to automatize the task to capture a web page (like thumbalizer or url2png).

The solution

There are alternatives but I like to go beyond the easy solutions and try things, so, after looking a bit more I found a powerful solution: PhantomJS.

Oh, wonderful, but.. what is PhantomJS and what is it good for?

As the project page says:

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
PhantomJS is created by Ariya Hidayat.

This means you have all the powerful of a WebKit based browser within a program, so you can use it for: headless website testing, site scraping, page rendering, network monitoring, …

How to use PhantomJS to take a web page screenshot?

Go to the project page and download the binary package . In my case I download the Linux 64-bit system.

PhantomJS is a command line tool and, once and uncompressed the previous package, you will find it in the bin/phantomjs. As a command tool the usage looks like:

You can get more usage information with: ./phantomjs --help

PhantomJS accepts programs coded in JavaScript or CoffeeScript and, hopefully, the package comes with a examples folder which is full of examples in both languages.

One of the sample programs is the rasterize.[js|coffee] which shows how we can rasterize a web page to an image file.
The program usage is:

And the whole program code is:

Probably the most important sentences are:

  • The inclusion of the webpage module:
  • Load the web page with openfunction:
  • Render the web page to a file with the renderfunction:

Note also in the rasterize.js source code the page.viewportSize is defined to be 600x600 which is equivalent as we where navigating a page with a screen resolution of 600x600.

Lets to to see a sample and take a screenshot of this blog site:

This makes a screenshot of the whole blog site. Here I attached a modified version of the image with lot less resolution of the original, but you can get an idea of the powerful of PhantomJS.: