Integranova Software Solutions

Interview on Integranova in Modeling Languages portal

Juan Carlos Molina — Tue, 08 May 2012 07:41:44 +0000

Jordi Cabot, creator of the Modeling Languages portal, interviewed Juan Carlos Molina about Integranova and its MDD/MDA products and technologies.

Juan Carlos outlined the history of the company, its current state of affairs regarding MDA/MDD and what still lies ahead.

See the full interview here.

Demo: Generating full applications from conceptual models with Integranova

Juan Carlos Molina — Mon, 30 Apr 2012 09:16:41 +0000

This video (audio in Spanish) shows how fast and easy it is to obtain a full application from a conceptual model created with Integranova Model Execution System. The demo covers model validation, specification of transformation options, sending of the transformation request, receiving source code files as well as the compilation and deployment steps up to running the actual generated application.

Why Model?

Juan Carlos Molina — Mon, 02 Apr 2012 10:38:58 +0000

These days I’m taking a very interesting on-line course on models called “Model Thinking” by Scott E. Page of the Center for the Study of Complex Systems at the University of Michigan in Ann Arbor.

You might be thinking it makes perfect sense for me to take this course since models is something I work with on a daily basis. Reality is, the kind of models I work with is different from the kind of models taught in that course.

At Integranova we use models as the primary artifact in a software development process. The models in the “Model Thinking” course are related to economics and social sciences, though. Nevertheless, often times I find myself identifying striking similarities in the underlying concepts. And perhaps one of the things that I find more aligned with what we do at Integranova is the rationale behind the use of models. I will go here through the four main reasons that Scott cites in his case for models and will try to port them to our arena.

Intelligent citizens of the world

Ok, Scott applies this in a much broader sense than I will. By “world” he means the world at large. Our scope is not that ambitious, just the world of software development. Unless you’ve been sleeping under a rock lately, you may have spotted a trend in our world towards an increasingly presence of models (most of them UML models but, luckily enough, not all of them!) in the development toolbox. In fact you must have been asleep longer than the Sleeping Beauty if you didn’t see this coming: entity-relationship models or data-flow diagrams have been around for a while now, the UML and its many different diagrams and flavours are no newcomers either, and DSLs are certainly gaining popularity. If you develop software these days, chances are that, at least, you do leverage some sort of model (even inadvertently!).
Class diagrams, anyone?

Thinking More Clearly

Models make us better, clearer thinkers, Scott claims. And for good reason, I’d say. A good model is a simplification of the system we want to build, so it allows our tiny brains to deal with problems which are bigger both in size and in complexity, in ways that would be unaffordable if we were to approach them at a lower (say code) level. As we will see in future posts about good qualities of modeling languages, simplification doesn’t have to be traded for accuracy. Rather, it means telling the essential from the accessory. And that helps a great deal in thinking more clearly.

Using and Understanding Data

What Scott terms ‘using and understanding data’ is what I call ‘focusing on what really matters’. Data, in our case, would be the problem at hand, understanding ‘what’ the system must do — something more or less concise — and not ‘how’ it will be done — with all its wealth of implementation details. I’m sure you’ve heard the old saying: don’t miss the forest for the trees. Our trees are all the nuts and bolts that we take care of when crafting software. If we pay too close attention to them, we may get lost and miss the whole picture.
Have you ever brilliantly (technically speaking) solved the wrong problem? Don’t let that happen to you again.

Using Models to Decide, Strategize and Design

I could not agree more! How come a model be used to decide, strategize and design? Well, good models can be built for a fraction of the time it would take to build the software system they represent, and good models are also (fully) executable (e.g. translatable to full source code). If you do the math, it turns out is far cheaper to try out different approaches — and even accommodate changes to requirements — at the modeling level than do the same at the coding level. Therefore, you can devise different versions of your models, compare them and decide what’s the best approach before even writing a single line of code.

To Sum Up

There’s a bunch other reasons why models are useful and I will elaborate on them in future posts but for now, let me end my act of blatant plagiarism by quoting again Scott E. Page:

When we think about models, they’re simplifications. They’re abstractions. So in a sense, there’s a sense in which they’re wrong. There’s a famous quote by George Box, where he says, “All models are wrong.” And that’s true, right? They are. “But some are useful.”

I would say that not only some, but most of the models we use are indeed very useful.

Develop an application and deploy it in multiple languages

Elena Tejadillos — Thu, 15 Mar 2012 11:46:07 +0000

In a perfect world, everybody would speak the same language. But, it is not. English is the most popular language in technological environments and engineers, technologists and scientists speak it. But most of us like to work in our mother tongue, be it Spanish, German, French, Chinese, etc.

Nowadays, if you install any software or you sign up in any web, one of the typical questions is: Which language do you want to use?. Even more, your location may be detected and the language selected according to your geographical zone. Why? People like to work using a comfy language.

Integranova takes into account this need and as a result, the source code generated by the transformation engines is already prepared to support multiple languages and provides a tool that helps to add multiple languages to your application, this tool is named Multilanguage.
For example, for our customers, we implemented our helpdesk application named HelpCARE web in three languages, Spanish, English and German, as you can see in the image below,

This web application was defined using Integranova tools: modeled in English using Modeler, generated the source code via Web ASP.NET Transformation Engine and externalized its texts to be translated in Spanish and German by means of Multilanguage.

What is Multilanguage?

Multilanguage is not a translator app, there are a lot of free applications or webs for translating like Google Translator. Multilanguage is a tool that externalizes and stores all texts that will be displayed in your final application. Besides, it provides a facility to export these texts to an Excel file to be translated by an expert in the selected language. After that, this file can be imported by the Multilanguage application and it will generate the necessary resources files to offer support for multiple languages in your final application.

What does your application source code need to support Multilanguage?

Integranova has already implemented this facility in all its user interface transformation engines, so all the applications that you generate can support multiple languages.

How long will you take to add a new language?

Most of the time is spent in the translation of texts. The generation of new resources files for the final application is minimal (seconds).

When do you have to decide how many languages your application displays?

You can decide it at any time. Even if your application is already in production, you can add a new language. You only need to add the resources files in the corresponding folder of you application version and run it.

So, dear Integranova user, I invite you to develop your applications in multiple languages, giving them a touch of differentiation at a low cost.

CSS3 Buttons for Web Applications

Carlos García — Thu, 16 Feb 2012 14:52:13 +0000

Buttons in web applications are easy to style to a certain extent, but once one reaches the burden, few things can be done. CSS3 came, I mean, is coming, to change this scenario. Although the specification isn’t finished, it’s implemented by the major players in the browser arena. In this post I’m going to use the border-radius, box-shadow, gradient and text-shadow CSS3 additions to customize the buttons of an Integranova automatically generated web application.

At Integranova we have two model Transformation Engines for web platforms: one for ASP .net and another one for JSF. These Transformation Engines produce full web applications which rely on CSS for doing the application make up, easing the tasks of designers and allowing non-developers to change the look&feel of a generated application. We are so committed with designers that CSS files for both platforms are almost identical.

But we are here to talk about buttons. Currently we produce plain buttons with some style applied so they integrate with the look&feel of the chosen theme. They use images as backgrounds to be fully CSS 2.1 compliant and have the same looks whichever browser the user uses. Ok, that’s enough chatting, let’s get our hands dirty.

We’ll begin with the left button and will end up having the right one.

	Regular
	Hovered

First take a look at how the regular button is styled. By inspecting the element in the DOM tree with our favourite DOM inspector we can see that the button is using the button CSS class defined in the commons.css file.

.button, .buttonhover{
	background:url(./images/general/txtBoxRequired.png) bottom;
    border-top:solid 1px #FFF;border-right:solid 1px #767492 !important;
    border-bottom:solid 1px #767492!important;border-left:solid 1px #FFF;
    color:#387294;
    font-size:10pt;
    margin-bottom:5px}

This class defines a solid border with different colours for the 3D effect, a background image for the gradient, a text colour and text size and a margin for the bottom part of the button. There is nothing too special here.

First we are going to make the button bigger so we can appreciate the changes in all their glory. Add the following line:

padding: 5px 14px 6px;

See what happens? We are using an image as background and the height of the background image is now smaller than the height of the button so the browser is repeating the image to fill the extra pixels. To solve this problem we will set a background color and a CSS3 background gradient overlay so there is no need of using an image. Remove the background-url attribute and add these lines instead:

	background-color: #3e8ede;
	background-image: linear-gradient(bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.25) 54%, rgba(255,255,255, 0.50) 55%, rgba(255,255,255, 0.70) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.25) 54%, rgba(255,255,255, 0.50) 55%, rgba(255,255,255, 0.70) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.25) 54%, rgba(255,255,255, 0.50) 55%, rgba(255,255,255, 0.70) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.25) 54%, rgba(255,255,255, 0.50) 55%, rgba(255,255,255, 0.70) 100%);
    background-image: -ms-linear-gradient(bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.25) 54%, rgba(255,255,255, 0.50) 55%, rgba(255,255,255, 0.70) 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255,255,255, 0)), color-stop(0.54, rgba(255,255,255, 0.25)), color-stop(0.55, rgba(255,255,255, 0.50)), color-stop(1, rgba(255,255,255, 0.70)));

Wow! That’s a lot of code for a gradient, isn’t it? Most browsers support the new CSS3 properties but as CSS3 isn’t still a standard they’ve been added to browsers through CSS extensions, making the use of some CSS3 properties a pain in the… a headache. The result is that we have added one gradient definition for each different browser extension. Fortunately there is a kind of fever with CSS3 and it’s very easy to find CSS3 code generators like the CSS3 Gradient Editor from Mozilla that do the boring job for you.

We’ll get rid of these sharp edges with the border-radius property. We’ll also change the current border colors to achieve a better result. Remove all the border attributes and add these lines:

	border: 1px solid #3e8ede;
	border-bottom:1px solid #9f9f9f;
	border-radius: 6px;

The shape of the button is now completed and we’re almost done. Now, with the box-shadow attribute, we’ll create the shine in top of the button. This will be a very subtle change but a detail that will make our button stand up above the crowd. Add these lines:

	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

Finally play a bit with the properties of the text to make it both readable and fancy. I’ve chosen white bold letters with an inner shadow, done with the text-shadow attribute:

	color:#FFFFFF;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	font-weight: bold;
	font-size: 18px;

After all the changes made, the button class should look like this:

.button, .buttonhover{
	background-color: #3e8ede;
	background-image: linear-gradient(bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.25) 54%, rgba(255,255,255, 0.50) 55%, rgba(255,255,255, 0.70) 100%);
	background-image: -o-linear-gradient(bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.25) 54%, rgba(255,255,255, 0.50) 55%, rgba(255,255,255, 0.70) 100%);
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.25) 54%, rgba(255,255,255, 0.50) 55%, rgba(255,255,255, 0.70) 100%);
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.25) 54%, rgba(255,255,255, 0.50) 55%, rgba(255,255,255, 0.70) 100%);
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.25) 54%, rgba(255,255,255, 0.50) 55%, rgba(255,255,255, 0.70) 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255,255,255, 0)), color-stop(0.54, rgba(255,255,255, 0.25)), color-stop(0.55, rgba(255,255,255, 0.50)), color-stop(1, rgba(255,255,255, 0.70)));
	-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
	padding: 5px 14px 6px;
	color:#FFFFFF;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	font-weight: bold;
	font-size: 18px;
	border: 1px solid #3e8ede;
	border-bottom:1px solid #9f9f9f;
	border-radius: 6px;
}

There is still one thing to do, change the look of the button when the mouse is over it. For this task we need to change the buttonhover class with this code:

.buttonhover, .button:hover{
	background-color: #2ede4e;
	border: 1px solid #2ede4e;
	border-bottom:1px solid #9f9f9f;
	cursor:pointer}

As we have used a semi-transparent white gradient overlay, we only need to change the background and border colors in order to change the whole button.

These buttons will look the same in every browser but Internet Explorer, which implements gradients only from version 10; version that hasn’t been published yet.

We have learned how to use some of the new attributes defined by CSS3 and that brings us a whole new world of possibilities. Do you feel brave enough to use gradients in the menu or make rounded filter borders?

Test Driven Development for model transformation engines

Carlos García — Fri, 03 Feb 2012 10:58:57 +0000

Test Driven Development (TDD) has become so mainstream in the late years that everyone has at least heard about it. The benefits of TDD are clear enough to embrace it without any doubt and so we did before even knowing what TDD was. But first things first.

A long time ago, in an office far, far away… it was a time of hope, no rush with projects, just development. The company had just jumped from University to the outer world and was giving itself some time to grow up the products in order to be mature enough to succeed. There were some model compilers under internal development and engineers tested the code they developed; that was a good way to keep things going. But eventually the model compilers grew up and personal testing wasn’t enough to deliver with the desired quality levels. That wasn’t good. So it was decided that tests should take much more importance in the development process.

But, what happens when you are developing something like a model compiler? the different modeling combinations are potentially infinite so, how can we test every single thing of the model compiler? Model compilers are applications themselves that take as input an application model and produce the source code for the application in the selected platform as output. Fully functional applications with complete business logic and user interface. So we decided to divide the functionality of our software products, be it a model compiler or the modeling tool, into the different features they provided. Then, for each feature we defined one or more tests documents which described all the casuistic that the feature could have. For each particular case we defined a particular test case with an input for the test and an expected behavior as a result.

The test cases are all written in a document that besides containing the tests needed to certify the feature, defines its precise behavior. It is a Test Case document and a requirements document.

The input for the test cases is then derived from this document, this is, the application models that will test the new feature. These models are then used to produce the respective applications code with the new Model Transformation Engines (that’s how we call our model compilers). At this point we have one or more applications that test all the different behaviors of the feature, so they are used to run the tests specified in the documents. If all the tests pass correctly, the new feature is finished and ready to be published.

So we have the documents that specify the tests to be done, the models that implement those tests, from the models we get the source code for a client and a server application with the corresponding data base. Finally we run the tests against that application to ensure that it behaves as it should. With this approach we can guarantee that the new features behave as they should and no new errors are introduced as side effects.

Now the numbers. Currently we have 501 of those documents for testing UI and Server Transformation Engines. Taking only the documents used to test UI Transformation Engines, which were used to test the last version of the Transformation Engine for JSF UI, sum a grand total of 28.440 functional tests that have been passed before publishing. Now that’s what I call quality.

Integranova Blog

Elena Tejadillos — Wed, 25 Jan 2012 12:57:12 +0000

Integranova is pleased to announce a new section on its web, our new Blog.

This blog is a place where Integranova members will post about their professional experiences, technical tips or success stories with our partners using Integranova M.E.S.

All posts will be written in English to be globally understandable.

Any comment from our customers, partners or visitors will be welcome.

Integranova wishes that this new information channel helps our current users and our users to be.

Our Vision

Juan Carlos Molina — Tue, 24 Jan 2012 09:40:05 +0000

Integranova was born out of an academic research project aimed at improving the way software was developed.
From the very beginning…
… we’ve always wanted to shift software development from art to craft
… we’ve believed that development effort was being put in the less productive places and neglecting what really adds value
… we’ve tried to focus more on “what” and not so much on “how”

And we believe that although there’s still a long road lying ahead, we’ve covered a great length of the path.

At Integranova we think that software development can be further industrialised. We want to empower developers by giving them tools that make them more productive, that allow them to concentrate on the functionality of the systems they want to build and care less about how that functionality will be implemented, that let them deal with bigger and more complex systems and help them see the forest and not be blinded by the trees.

How do we get you there? Simply put: by modeling and generating code.

If you’ve stop reading now chances are you’re thinking: “I’ve heard that story before and I know it does not work”
If you’re still curious, or at least skeptical, welcome on board! This is not, in many respects, “the same old story again”.

Stay tuned and you will learn about modeling of structural, behavioral and presentational features, model validation, platform-independence, model transformations and code generation of fully functional applications for different platforms and languages.

In the meantime, you can try out an evaluation version of our tools. Get it here!

See you soon!

Blog is in the air

Carlos García — Wed, 21 Dec 2011 12:20:14 +0000

Today, after a long time thinking about starting a blog, we can say that the new Integranova blog is up and running.

The idea of a blog was around our heads for quite a time but it was always postponed, but for the last months the idea has been growing up and finally it has been materialized in what you are reading right now.

At Integranova we want this blog be a place where you can find posts about technology, methodology, programming languages, events and many other things that cross our minds every day.

Feel free to comment or ask anything you need to know.

See you in the blog.

Design options: New features for developing applications with Integranova

Federico Wendel — Fri, 25 Nov 2011 13:00:36 +0000

Article that presents the new Integranova Tools versions where the new Design Options are supported. These new Design Options can be defined at modelling time in the Presentation model.

DESIGN OPTIONS

Design options are a mechanism to enable analyst to fine tune the code generation. The difference with transformation options is that design options affect a particular presentation element, while transformation options affect all the elements in the model. So, instead of being part of a different artifact, design options are part of the model and will be stored within it.

Design options can have a number of possible values and they are specified in the comments field of the presentation model element. They have the following syntax:

Key1=Value1;
Key2=Value2

For example:

LAYOUT=FIELDS;
SHOWSELECTOR=0

Design options are Transformation Engine dependant so that means all design options are not supported by all Transformation Engines). When a Transformation Engine reads a design option that it does not support, it simply ignores the design option and continues with the default code generation.

List of design options:

Tabs Control for arguments grouping and/or MDIU details (TABCONTROL): Used in a MDIU, it specifies if the details have to be represented inside a tabs control or not. Used in a SIU, it specifies if the grouping elements at the first level can be represented as tabs or not (they will remain normal groups)
Number of columns (NUMCOLS): This design option specifies how many columns a SIU or an IIU must have. The value ‘1’ is only applicable to web transformations engines.
Link to scenario (LINK): When this design option is present in an Action or a Navigation item, it specifies the DisplaySet items that, when used in the same interaction unit, become a hyperlink to said action or navigation item.
Shortcut keys (KEY): This design option specifies which combination or combinations of keys launch certain navigation or action. It will have the effect as clicking the actual action or navigation.
Instance IU layout (LAYOUT): it specifies if the display set contained in an IIUshould be displayed as a table or as independent fields.
Auto-executable filters (AUTOSEARCH): In a PIU which has filters it defines if the filter should be executed when showing the PIU or not.
Show Service IUs (SHOW): In a SIU which has no arguments or just the THIS argument, it means that the SIU must not be displayed and the service represented by the SIU must be directly executed. In case of any error, the user will be warned by a message, as usual. The rest of the functionality (Conditional navigation, outbound arguments, multi-execution…) will remain the same.
Close previous scenario (CLOSEORIGIN): In a SIU, it specifies that after a successful execution of the service the scenario from which the service was opened will be closed.
New line arrangement (NEWLINE): In a SIU’s inbound argument or display set item from a display set displayed as fields, it says that a new field line must be created before or after the current argument.
Show instance selector (SHOWSELECTOR): In an IIU it specifies if the instance selector should be displayed or not.
Display details in a Tree Control (TREE): In a MDIU it specifies if the MDIU can be represented as a tree or not. The effect of this design option depends on the MDIU fulfilling the needed conditions for being represented as a tree.

Download the Feature Overview for more information