How to customize desktop applications using Java Synth

Java Synth is a component in Swing toolkit, which is able to provide a configurable, nicer interface and user experience as it allows customizing the look and feel of Java by one created by Synth.

 Synth is available since its J2SE 5.0 version, and it can be configured through a xml document, where the style of app’s elements are defined.

 Example of xml setting:


<synth>

<style id=”estiloEjemplo”>

<font name=”Arial” size=”11” style=”BOLD”/>

<color type=”BACKGROUND” value=”#000000”/>

<color type="FOREGROUND" value="BLACK" />

</style>

<!—Aqui le aplicamos el estilo creado a un textfiled -->

<bind style="estiloEjemplo" type="name" key="miTextFieldCreado" />

</synth>

Once the xml document that contains the Synth styles is created, we must load it to the context of the application through load method of SynthLookAndFeel class, as following example.


SynthLookAndFeel lookAndFeel = new SynthLookAndFeel();

lookAndFeel.load(new File("synthExample.xml").toURL());

UIManager.setLookAndFeel(lookAndFeel);

Something we should think about is that Synth does not have a default style, and it does not apply any style to the components that are not defined in our xml document. Anyway, you can have a part of the application with a default style and another one with a configurable style by Synth .This is because Synth allows you to assign a particular style to a component by its name and also allows you to assign a style to a set of components of the same type via style inheritance (similar to how it would apply in CSS).

The way to apply a inheritance style through Synth is by creating a style and associate it to the name of the class that identifies the element. For example, we can have a style for an combo box element, in particular or have a general style for all the combo box of the application.

 Example:


<!—Estilo de un combo box -->

<style id="miComboStyle">

<font name="Arial" size="11" />

<insets top="2" bottom="1" left="4" right="1" />

<state value="ENABLED">

<color value="#000007" type="TEXT_FOREGROUND" />

</state>

<state value="SELECTED">

<color type="TEXT_FOREGROUND" value="#FFFFFF" />

<color type="TEXT_BACKGROUND" value="#BEA08C" />

</state>

<state value="DISABLED">

<color value="#CCCCCC" type="BACKGROUND" />

<color value="#EFECEC" type="TEXT_FOREGROUND" />

</state>

</style>

<!—Aquí le aplicamos el estilo creado a todos los combo box de la aplicación, por herencia de estilos-->

<bind style="miComboStyle" type="region" key="ComboBox" />

Advantages and disadvantages of Synth

One advantage that it has, is that through the inheritance of styles, as we previously mentioned, one can define a style and apply it to all the components of the application, in this way we will be able to save code.

Another advantage of the styles created through Synth, is that the styles behave the same way in different platforms.

As negative aspects we could observe that there are not much documents or user experiences of it in the net, besides the one given by Oracle in its website referred to Java Synth.

Another disadvantage is that if you only work with one xml configuration document, this one could grow exponentially, helping for it to become difficult to understand and unmaintainable.


Creating a reusable widget with AngularJs

What is a directive? Angular’s directives are very powerful components, they are able to control how a page renders in many different ways, many of the tags and attributes that are bundled with angular are it self directives. We can use them creating HTML widgets which will have a specific purpose and the idea is that they end up being a decoupled component which we can test and use in any places by just configuring them with some parameters.

How do we write and use a directive?

</p>
&nbsp;
<p dir="ltr"> app.directive('domManipulation', function () {</p>
<p dir="ltr">  return {</p>
<p dir="ltr">    link: function ($scope, element, attrs) {</p>
<p dir="ltr">       element.bind('click', function () {</p>
<p dir="ltr">           element.html('Click detected!');</p>
<p dir="ltr">       });</p>
<p dir="ltr">       element.bind('mouseenter', function () {</p>
<p dir="ltr">            element.css('background-color', 'orange');</p>
<p dir="ltr">       });</p>
<p dir="ltr">      element.bind('mouseleave', function () {</p>
<p dir="ltr">          element.css('background-color', 'white');</p>
<p dir="ltr">      });</p>
<p dir="ltr">   }</p>
<p dir="ltr">};</p>
<p dir="ltr">});</p>
&nbsp;
<p dir="ltr">

With the use of “directive” we define a directive on our application. Directives supports the

following operations:

-Restrict: this is whether the directive can be used as element “E”, and attribute “A”, as CSS class “C”, or as a comment “M”.

-Scope: use the parent scope or use a new isolated scope.

-Template: defines the content of the output, it could be HTML, and expression or another directive.

-TemplateUrl: path to HTML template.

-Controller: to define a controller that will be associated to the directive.

-Link: function that is used for the DOM manipulation, link has access to the scope as a diferent against compile, which is pretty similar.

-Replace: whether we want or not replace the HTML code that calls our directive.

In the previous example by using link we are doing some DOM manipulation.

How do we use the directive?

</p>
<p dir="ltr"><div dom-manipulation>Click! here!</div></p>
<p dir="ltr">

That’s it when our mouse passes over the tag, our widget will play his part and will do the magic. For more details about directives you can check the official Angular Documents.

Reusable Widgets

We saw a directive, the options it offers and how to use it, but now let’s see an example a little bit more useful of a daily basis reusable widget.

As example we can write a form widget, this is something we use very often on a web application and if you think about it it involves a lot of code repetition. What if we had a widget that is reusable, testable and simple to read?, in that way we could use a unique piece of HTML code to resolve all form of the application.

</p>
<p dir="ltr">    mainModule.directive('myFormDirective', function () {</p>
<p dir="ltr">       return {</p>
<p dir="ltr">  restrict: 'EC',</p>
<p dir="ltr">  templateUrl: '/someUrlToTemplate/form.html',</p>
<p dir="ltr">  scope: {</p>
<p dir="ltr">      formItems: '='</p>
<p dir="ltr">   }</p>
<p dir="ltr">       };</p>
<p dir="ltr"> });</p>
<p dir="ltr">

In this case we have our directive defined with an isolated scope, this is important to get our widget to be decoupled so we can use it in many places.

We defined the “formItems” as a scope variable with the symbol “=” that is our way in for the parameters that the form will receive and bind which will be an array of items.

The template for the directive will be:

</p>
<p dir="ltr"><div ng-repeat="formItem in formItems"></p>
<p dir="ltr"> <div ng-switch on="formItem.type"></p>
<p dir="ltr"><input type="text" ng-switch-when="string" data-ng-model="formItem.content"></p>
<p dir="ltr"><input type="number" ng-switch-when="number" data-ng-model="formItem.content"></p>
<p dir="ltr"><input type="checkbox" ng-switch-when="boolean" data-ng-model="formItem.content"></p>
<p dir="ltr"><select ng-switch-when="list" data-ng-model="formItem.content" ng-options="option for option in formItem.options"class="formItem.selectedClass"/></p>
<p dir="ltr">  </div></p>
<p dir="ltr">  <div></p>
<p dir="ltr"><button ng-switch-when="button" data-ng-model="formItem.content" ng-click=”formItem.click($event)"/></p>
<p dir="ltr">  </div></p>
<p dir="ltr"></div></p>
<p dir="ltr">

Then we iterate throught the “formItems” and based on each type will be rendering our fields so to use this directive we do the following:

</p>
<p dir="ltr"><div class=”my-form-directive” form-items=”someController.elements”></div></p>
<p dir="ltr">

someController is our controller, which scope contains the elements as a JSON array with the following format:

</p>
<p dir="ltr">var elements = [{type: ‘text’, selectedClass: ‘someClass’, content: {}}];</p>
<p dir="ltr">

As a summary, on each controller we just define the elements that we want on our form and with just one HTML line, will be rendering the form and using our unique HTML template all over the application, that means easy to test, and if we modify something it will impact on all forms.

Stay tuned, soon we will be showing how you can test these reusable widgets.


Language ATL (Atlas Transformation Language)

The transformation from one model to another one is an important aspect  in the software oriented to models development and ATL, language gives some tools for this transformations. To perform transformations with ATL developers have to mix imperative programming with  declarative programming, since ATL is a hybrid between these two programs. Declarative programming aims to describe the problem to which you want to resolution declaring a set of conditions, propositions or assertions, and through internal mechanisms to reach the necessary instructions to give the solution. Unlike declarative programming, imperative programming provides a series of  instructions or steps that indicate the computer how it should perform a task.

An ATL transformation program is composed by rules that define how the source elements model matches to create and initialize the elements of the target models. Also, in addition to the basic models transformations, ATL defines an additional model that allows to specify requests in the models.

ATL offers developers the possibility to design through three different unit type: ATL Module, ATL Consult and ATL Library; any of these units defines itself in its own ATL file. ATL files are characterized for having the .atl extension.

Families to Persons is a basic ATL example, similar to “Hello World”. It is based in transforming each family member into person.

For this example the .atl file includes the following:


module Familia2Personas; --Nombre del archivo o modulo

create OUT : Persona from IN : Familias; --Metamodelo de salida (out) y de entrada(in)

This is the file heading, where it is define the name and the in and out metamodels. The characters “–“  help to put comments, they are the same as “//” in java.


helper context Familias!Miembro def: Apellido : String =

if not self.Padre.oclIsUndefined() then

self.Padre.Apellido

else

if not self.Madre.oclIsUndefined() then

self.Madre.Apellido

else

if not self.Hijos.oclIsUndefined() then

self.Hijos.Apellido

else

self.Hijas.Apellido

endif

endif

endif;

helper context Familias!Miembro def: esMujer() : Boolean =

if not self.Madre.oclIsUndefined() then

true

else

if not self.Hijas.oclIsUndefined() then

true

else

false

endif

endif;

These are the helpers that you need to make the transformations. The helpers are compose of the word helper, follow by context, that might be optative and it is where the context of helper, def:, here is where helper is given a name, this name has to be the only one since through it the helpers call is done.

After the name of the helper, it must be specified its type, String, Boolean, etc. And least the body of the helper. The helpers above are for identifying the “Apellido” of a member and know if its “hombre” or “mujer”.


rule Miembro2Hombre {

from

s : Familias!Miembro (not s.esMujer())

to

t : Persona!Hombre (

Nombre_Completo <- s.Nombre + ' ' + s.Apellido

)

}

rule Miembro2Mujer {

from

s : Familias!Miembro (s.esMujer())

to

t : Persona!Mujer (

Nombre_Completo <- s.Nombre + ' ' + s.Apellido

)

}

Last of all there are the transformation rules, that are composed by the world rule followed by the name of the rule. The body of every rule is composed of four parts, two of them are optional. The first one is known as the source of the transformation and goes by the word from, and here it is where the variable of the metamodel´s source it´s state. In our first example the variable “s” is defined as an type object Familias!Miembro and with the front brackets it is determined when the transformation needs to be done.

The second part of the hepler is known as the site of the local variables declarations, and it is state by the word using, this section is optional and is where the variables that are going to be use are declared and start.  In our example there is no need of the section using, to do the transformations.

The third part is known as the destination of the transformation and it is state with the word to.  Here the target object of the transformation is defined and inside the front brackets its assigned the value to each component of the target object. In the example of the rules of transformation  you can see how the component Nombre_Completo acquires the value of the name of “s”, plus a space and the last name of “s”.

The fourth part is known as the imperative transformation block. In this part it is allowed to establish imperative instructions that will be execute once the model starts working. This section is state with the word do, and is optional.


Introduction to AutoHotKey: firsts steps

We all find ourselves at some point with problems that happen once and again, no matter what they are, that take a lot of our time. Many decide to keep on doing the same overwhelming tasks over and over, others decide to create their own solution. Maybe we find ourselves dealing with a particular problem related to our job that no one ever had, and we have to be the firsts to solve it. Luckily, we have many tools that allow us to simplify everyday situations and save time and effort. This time i would like to tell you a little bit about AutoHotKey, a tool that doesn’t stand out for its power, but for its versatility and flexibility, and it can be be used by anyone whether novice or expert in the computer field.

What is AutoHotKey?

AutoHotKey is a scripting and macros language to automate in a simple way and with little code repetitive tasks (and not so repetitive), and it also allow us to create windows, custom forms, send clicks, events, etc.

The beauty of AutoHotKey lies in that each Windows user can detect their daily experiences (good or bad) And consider a proper and personal solution.

How does it work?

After downloading AHK, right click in the desktop, and select:

New> AHK Script

The syntax is extremely simple, you only need to learn how AHK processes our keyboard, some of the simplest hotkeys are Alt (!), Windows (#), Shift (+), etc.

Practical example and its scripts:

Watch ipconfig without opening manually CMD (in this case the blind is Windows + I):


#i::run, %comspec% /k ipconfig /all, , max

Writing lambda expressions in an intuitive and more comfortable way:


!Right:: Send {=}{>}

!Left:: Send {<}{=}

This way, when we press Alt + right/left, we obtain the lambda expression that we want. Even though Visual Studio, Eclipse and other IDEs have similar functions (snippets), these are characteristic of IDE and are not shared between different  environments. With AHK, we have the advantage of being able to put a “standard”  in our way of writing or programming. Needless to say, the scripts are enabled / disabled with a click.

We can also replace acronyms or terms we use every day, or create your own using the following format ‘:: x :: y’ where ‘x’ is the shortcut and ‘y’ is the expansion we want, for example:


::bdt:: Good morning everyone!

Get writing “Good morning everyone” if we write btd followed by a space or comma:

As expected, script complexity increases with the problem we want to solve. I would like you to comment on a recurring situation and a its possible AHK solution!