Crux Framework 5 Showcase updated

Crux Framework 5 Showcase updated!

Crux 5.4 has been released! We also updated our showcase with new components and samples, such as:
  • Data Elements based in the new Data Provider Model: DataGrid, WidgetList, Combobox, Carousel and Pagers.
  • Content Disposal Elements: TopMenuDisposal and SideMenuDisposal.
  • Logical Features: Rest Comunication, Offline Database
See all samples at

Crux 5.4 Released!

A new stable Crux version is available. Crux 5.4.0 was released today and brings a lot of bug fixes and nice features, such as:

  • GWT 2.7 support. Next version will bring GWT 2.8 support and we are already tuned with GWT 3.0!
  • New compilation model which was built over Java Annotations, allowing a faster development compilation triggered when we refresh a page in the browser. Now it's easier, faster and works smoothly.

  • New cross device components: Datagrid (div based), Breadcrumb, Combobox, WidgetList and so on. Now it's easier to code your application that targets any desired device. You want a unique code that will run in your Desktop, Mobile and TV? Are you worried about iOS, Android or WindowsPhone running different browsers like Firefox? Chrome, Edge, Safari? Don't worry, let Crux Framework handle everything for you! 

  • And last but not least: now we have a New data binding system, actually better than AngularJS because it is processed at compile time instead of the slow and clumsy running time.

Visit crux website and take a closer look to this release.

Crux 5.3 Released!

 A new Crux stable version is available. Crux 5.3.0 was released and brings a lot of bug fixes and nice features, as:

  • New DataProvider system, that simplifies the data binding to components like grids, lists or comboboxes.
  • New layout components for cross device applications.

Visit crux website and give a try to this new release.

GWT.create - 2015

We were present in the 2015 edition of GWT.create in Mountain View / CA. It was a great pleasure to be there! We talked to many of the biggest project contributors - as Daniel Kurka, Brian Slesinsky... among many others. We are tuned to what is coming to the GWT comunity: so many great and meaningful features resulting from the work of different people around the world.

We are really excited about the way things are happening: web components, JSInterop, Java 8 and so on!

We also had the opportunity to present Crux in Demo Stage of the event and we have received so many positive feedbacks, which encourages us to continue with renewed vigor, preparing Crux for these changes that are coming.

See more here:

GWT 2.7 Released

A new GWT version was released! GWT 2.7.0 is available to download. The new version has a lot of nice features, as:
  • Super dev mode is faster and can make incremental compilations now.
  • GSS support that can make the web designers easier.
  • JSInterop is available, allowing a very easier integration with native javascript code. 

Incremental compilation

Incremental compilation can turn the Super Dev mode much faster. And it is very important for the development process.


GSS add some nice features to our CSS resources. We can now, for example, create a separate file to define constants for colors, border and fonts sizes etc and the reuse this on a base css file. It makes the task of define multiples skins for applications a very easy task. For example:
 * blueSkinColors.css
@provide 'colors';

 * main.css
@require 'colors';

    background: BASE_PRIMARY_COLOR;

and on your ClientBundle interface:
@Source({"blueSkinColors.gss", "main.gss"})
YourCssInterface css();


JsInterop is still being improved, but is already available for use on this release. You need to enable it through a flag passed to the compiler (-XsInteropMode)

It can makes very easy to use native javascirpt with GWT. It is important when you need to integrate your application with some js library.

You can see an example here

GWT 2.7 and Crux

Crux 5.3 version will be released using this new GWT version. We are making some final adjusts to make it available.
  • Integration with Super Dev Mode: Crux will have some additional features on top of Super DevMode. You will be able to enable hot deployments on your changes, even when a view file, like a crux.xml r view.xml file is changed
  • New themes for Crux widget libraries will use GSS, to allow an easier customization and skins creations.
And for those who doubt about the GWT growing. Take a look on this text by Ray Cromwell:

"Inbox is about 70% GWT code, 30% Closure.
The new Calendar uses the same architecture as Inbox, read into that what you will.
Google Sheets uses GWT in much the same way as Inbox.
Then there's AdWords, Google Shopping Expression, Flights, Hotels, Android Play Console, Google Wallet, Google Groups, and a bunch of new apps coming up.
There are 3,000 engineers internally using GWT, and we record 150,000 monthly active unique users hitting our SDK update servers. Last time I checked, about 20,000 unique domains use GWT.
Apple (iAds Workspace), Amazon (AWS Console), Nike, etc use GWT.

Read the full text here or more on this topic here.

Offline storage of data

The HTML5 brought to us a lot of new resources that have revolutionized the development of web applications (as was said before in this blog 1 e 2). Today I’ll speak about a new resource of HTML5 that solved an ancient need and that had no proper solution, the local data storage.

We can understand “local data storage” as a persistent way to storage data on client-side that might be, or not, sent to server. Can you imagine the potential of this resource? Your application won’t need to stop working when the user lost his internet connection. A good example is the offline Gmail, a Google Chrome app. This app let the Gmail users read and answer theirs e-mails without internet connection.

To have this functionality some developers have used a resource that wasn’t designed to do this, the Cookie. In fact it can be used to make a local data storage, but this is not an efficient way as the Cookie can only store a limited amount of data. Instead of this HTML5 offers an browser native API, called Web Storage.

Web Storage

Also known as HTML5 Storage the Web Storage is a data store made by key / value. It’s a simple idea: relate the stored data to values that can be used to retrieve those data. Because of that simplicity this way of store data became popular and was implemented in almost every browser, as shown by Pic 1 that show the browse versions that support the Web Storage.
Pic. 1 – Browsers that implements the specifications of the offline database and its versions. 
The Web Storage can only store string values, because of that is necessary that the developer deserialize the value to other data structures. In other words, to store an integer value is necessary to convert the value to string before store the data. Another limitation is that the Web Storage can only store 5MBs of data.

With those limitations the Web Storage wasn’t a definitive solution and soon another solution was presented to us, the Web SQL database

Web SQL Database

By the name you can imagine what are the features of this database, right? The Web SQL is a relational database structured SQL. So, with this database we can build tables an relate them,  beyond that you can execute SQL commands to access the stored data, as the example shows: 
var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);
db.transaction(function (tx){
 tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
 tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');

The specification of the Web SQL has two features that should be mentioned.  The first one is that, different from the Web Storage, it has no size restriction, with that the developer can set the size at the moment of the database creation and rests with the browser the job to accept or decline the size of the database. The second one is that the API is natively asynchronous, in other words, the application doesn’t have to wait for the requests to the server to be complete as it is needed on synchronous applications. To accomplish that the Web SQL operations have a callback function that determines in which point the application will receive the response from the database and process it.

However, the W3C announced in 2010 that the Web SQL database is an outdated specification. And exists a recommendation to the developers not to use this technology. Don’t Worry, no needs to despair. The webkit based browsers still and probably will maintain the support to WebSQL. The new API presented by W3C is the indexedDB, that I’ll show you next.

Indexed Database

The IndexedDB is an API with characteristics from a NoSQL database. In other words differently from the WebSQL that stores the data into tables and is relational, the IndexedDB is not relational and stores the data directly as objects.  In addition of being asynchronous this API is transactional, the commands are executed through transactions. To every transaction it should define the type: read only, write only, read and write.

The indexedDB utilizes a value or a set of values as index from the stored objects, like a key / value approach, with that it’s possible to optimize the searches. The IndexedDB is present on every browser on theirs newest versions, because it is a new API. You can check at Pic. 1

Which one should I use?

Analyzing both API’s it’s difficult to compare them and choose the best one, to application that already uses a relational database model the WebSQL is the right choice to do, otherwise the IndexedDB is the best choice, because is the most updated one and recognized by W3C, not to mention the vantages of a NoSQL database. Therefore, the decision of which offline database to use depends a lot of the context of your application.

To make easy the database choice and the application development the Crux framework has a unique implementation for both types of databases. The Crux supports the database creation with an unique abstract model. The same code could map a database IndexedDB or WebSQL. For a browser that supports one or the other,  Crux will use the available one, in the case of a browser the uses both the Crux’s choice is the IndexedDB.

The local data storage allows a range of possibilities e we can evolve even more the web applications. As we saw, there are a lot of efficient solutions that can facilitate the development. From now on you have the knowledge to get deeper in each one of those technologies, below here there are some links that can be useful to clarify more about this theme.

Good Reading!

Useful Links

Impress.js, amazing presentations in HTML5 and CSS3

When we make a presentation of something: a product, an academic work or an idea, we just do not want that presentation to be boring because the public will eventually lose interest.
Creating attractive presentations is not an easy task and demands a lot of time and dedication. It that really true? 

Have you ever imagined being able to create interesting self-explanatory presentations using simple tools like (for instance) a notepad? Moreover, requiring only a CSS3 compatible browser to be played anywhere and on any device?

This amazing solution is brought by Impress.js, , a javascript library inspired by the idea behind Prezi allowing you to create dynamic and high-impact presentations using the features of HTML5 and the power of CSS3.

The prerequisite to successfully use this tool is just to have some knowledge in HTML, CSS3 and be a reasonable designer, since the tool does not have ready styles or animations where you only replace a few things and everything is ready up. Still… is worth checking the results obtained from the use of impress.js.

This is a presentation that shows some of the power of impress.js

One great benefit of impress.js is the lightness of the presentation, not only by the size (previous presentation has just over 1MB - 95% are the images), but the transitions that are smooth and do not no crashes. The 3D effects are very satisfactory and CSS3 offers a great variety of possibilities in the styles development and animations allowing greater freedom in creation.

Using impress.js
The impress.js is simple to use! In this address you can download the file package containing the sample presentation. With it we can understand exactly how the impress.js works because it contains a detailed explanation of each step of the presentation in the index.html file source code . Moreover we can use this sample as a template, reusing the styles and animations.

The downloaded package contains the CSS style used in the presentation sample (this can be changed or completely rebuilted), the library Impress.js, the index.html and some others files. 
But if you do not want to use the package with the sample, we can only insert the impress.js library in our presentation HTML file and call impress().init(). One tip is putting this call at the end of the html file, when all page elements will be ready.

<script src="js/impress.js"></script>
This is an example of how you can insert the library at the end of the file and call the impress().init (), but you can call it at an event too.
Below, we will show some parts of the sample code file with explanations that will help you create your own presentation.
<div id="impress">

<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
    <q>Aren't you just bored with all those slides-based presentations?</q>

<div class="step slide" data-x="0" data-y="-1500">
    <q>Don't you think... <strong>in modern browsers...</strong></q>

<div class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
    <p>It's a <strong>presentation tool</strong> <br/>

To build your presentation is necessary to know some basic rules of impress.js:

impress: the id impress is the set of slides. It's something like the stage to other slides. All presentation slides must be within the element that contains this id. 
<div id="impress">

step: the step is a class that define an element to be displayed. A stylized HTML element with this class becomes a step (slide) presentation. It can also be a tag <img>. In the previous example, taken from the sample file, each div element can be understood as a slide, but this is not an impress.js rule because what defines a stage presentation is the use of the step class.


data-x, data-y, data-z 
The position of the slide is defined by the attributes date-x (horizontal), date-y (vertical) and date-z (depth). The default value is 0 (zero) and is measured in pixels.  
In the example below the slide is positioned with the value "0" on the X axis and "0" in the Y axis. 
These values are referred to the center of the slide. One important tip is that the Y axis works with inverted references: up negative values (date-y = "-500") and down (date-y = "500") positive values.
<div id="start" class="step" data-x="0" data-y="0">

To achieve the effect of sliding from right to left, we can do as follows: 
<div id="second" class="step" data-x="1000" data-y="0">
<p>slide 2</p>
The slide will move only horizontally since the y-axis remained with the same value of the previous slide.

The data-z defines the sense of depth. The higher the number, the element will feel closer to us, the smaller, farther.
<div id="third" class="step" data-x="1000" data-y="0" data-z="10000">
<p>slide 3</p>

Define the scale of the element. The number "n" says that this element will be n times greater than the others. The default value is 1.
<div id="quarter" class="step" data-x="1000" data-y="0" data-scale="5">
<p>slide 4</p>

Define the element rotation degree . In the next example the slide will have a rotation of 90 degrees clockwise 
<div id="fifth" class="step" data-x="1000" data-y="0" data-rotate="90">
<p>slide 5</p>

data-rotate-x, data-rotate-y e data-rotate-z  
Is the same idea of previous data-rotate, but applied to each axis: x, y and z.
<div id="sixth" class="step" data-x="1000" data-y="0" data-rotate-x="40">
<p>slide 6</p>

It is important to note that all definitions are based on the previous slide. So pay attention to the positions, grades and scales of the previous slide to build the current one.  

Basically that’s all folks! Now use your creativity and get to work.