Gael's blog

Pagination en GWT

2011-12-18T02:11:00.000-08:00

Les interfaces, c'est efficace..... Et ce qui est formidable avec GWT c'est que tout est interfacé. Vous voulez créer votre propre composant et le lier à un SimplePage, aucun problème, il "suffit" de lui faire implémenter HasData.

Vous trouverez ci-dessous un exemple (simple) pour un FlexTable. Il y a sans doute des choses à revoir, notamment le cas de chargement de données asynchrone, le premier appel de la fonction refresh (sur le onAttach? le onLoad?)


package org.gch.FlexTable;

import java.util.ArrayList;
import java.util.List;


import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.view.client.HasData;
import com.google.gwt.view.client.Range;
import com.google.gwt.view.client.RangeChangeEvent;
import com.google.gwt.view.client.RowCountChangeEvent;
import com.google.gwt.view.client.RangeChangeEvent.Handler;
import com.google.gwt.view.client.SelectionModel;

public class FlexTableHasRows extends FlexTable implements HasData {
 
 private Range range = new Range(0, 25);
 
 private Handler handler;
 
 private boolean isExact = true;
 
 private int count;

 private SelectionModel selectionModel;

 @Override
 public HandlerRegistration addRangeChangeHandler(Handler handler) {
  this.handler = handler;
  return addHandler(handler, RangeChangeEvent.getType());
 }

 @Override
 public HandlerRegistration addRowCountChangeHandler(com.google.gwt.view.client.RowCountChangeEvent.Handler handler) {
  return addHandler(handler, RowCountChangeEvent.getType());
 }
 

 @Override
 public Range getVisibleRange() {
  return range;
 }

 @Override
 public boolean isRowCountExact() {
  return isExact;
 }

 @Override
 public void setRowCount(int count) {
  this.count = this.getRowCount();
 }

 @Override
 public void setRowCount(int count, boolean isExact) {
  this.count = this.getRowCount();
  this.isExact = isExact;
  
 }

 @Override
 public void setVisibleRange(int start, int length) {
  range = new Range(start, length);
  RangeChangeEvent.fire(this, getVisibleRange());
  refresh();
 }

 @Override
 public void setVisibleRange(Range range) {
  this.range = range;
  RangeChangeEvent.fire(this, getVisibleRange());
  refresh();
  
 }


 @Override
 public HandlerRegistration addCellPreviewHandler(com.google.gwt.view.client.CellPreviewEvent.Handler handler) {
  System.out.println("addCellPreviewHandler");
  return null;
 }

 @Override
 public SelectionModel getSelectionModel() {
  return this.selectionModel;
 }

 @Override
 public Element getVisibleItem(int indexOnPage) {
  Element e = this.getRowFormatter().getElement(range.getStart() + indexOnPage);
  return e;
 }

 @Override
 public int getVisibleItemCount() {
  return range.getLength();
 }

 @Override
 public Iterable getVisibleItems() {
  List res = new ArrayList();
  int end = range.getStart() + range.getLength();
  
  if (end > this.getRowCount()) {
   end = this.getRowCount();
  }
  for (int i = range.getStart(); i < end; i++) {
   res.add(this.getRowFormatter().getElement(i));
  }
  return res;
 }

 @Override
 public void setRowData(int start, List values) {
  //todo parse element
  
 }

 @Override
 public void setSelectionModel(SelectionModel selectionModel) {
  this.selectionModel = selectionModel;
 }

 @Override
 public void setVisibleRangeAndClearData(Range range,
   boolean forceRangeChangeEvent) {
  System.out.println("setVisibleRangeAndClearData");
  
 }
 
 //TODO
 public void refresh() {
  for (int i = 0; i < this.getRowCount(); i++) {
   this.getRowFormatter().setVisible(i, false);
  }
  int end = range.getStart() + range.getLength();
  
  if (end > this.getRowCount()) {
   end = this.getRowCount();
  }
  for (int i = range.getStart(); i < end; i++) {
   this.getRowFormatter().setVisible(i, true);
  }
  
 }
 
}

Pour l'utilisation:


   VerticalPanel v = new VerticalPanel();
   SimlePager p = new SimplePager();
   FlexTableHasRows flex = new FlexTableHasRows();
   
   for (int i = 0; i < 50; i++) {
      flex.setText(i, 0, i + "");
      flex.setText(i, 1, "Text");
   }
   
   flex.refresh();

   p.setDisplay(flex);
   v.add(flex);
   v.add(p);

GWT CellTable et OnMouseOver

2011-06-01T04:38:00.000-07:00

Enfin! J'ai eu l'occasion il y a quelques jours de me remettre à GWT et d'essayer la version 2.3. Après trois ans de développement en version 1.x, j'ai pu mesurer tous les progrès qui ont été fait avec la sortie de la V2. Pour moi qui suis un fervent défenseur de la non utilisation de composant externe à GWT pour la construction d'interface graphique, l'arrivé du composant CellTable est une aubaine. Malheureusement ce composant n'est pas encore tout à fait abouti, il manque notamment le redimensionnement dynamique des colonnes et l'interaction avec la grille n'est pas prévu. Cela étant dit en farfouillant un peu dans les sources il est possible de rendre la grille sensible aux évènements souris. En voici un exemple:

package org.gch.tables;

import java.util.List;

import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.TableCellElement;
import com.google.gwt.dom.client.TableRowElement;
import com.google.gwt.dom.client.TableSectionElement;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Widget;


public abstract class MyCellTable extends CellTable {


public MyCellTable() {
this.setSize("100%", "100%");
this.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

sinkEvents(Event.ONMOUSEUP | Event.ONDBLCLICK | Event.ONCONTEXTMENU);

}



@Override
protected void onBrowserEvent2(Event event) {
super.onBrowserEvent2(event);

String eventType = event.getType();
final Element target = event.getEventTarget().cast();

// Find the cell where the event occurred.
TableCellElement tableCell = findNearestParentCell(target);
if (tableCell == null) {
return;
}

Element trElem = tableCell.getParentElement();
if (trElem == null) {
return;
}
TableRowElement tr = TableRowElement.as(trElem);
Element sectionElem = tr.getParentElement();
if (sectionElem == null) {
return;
}


TableSectionElement section = TableSectionElement.as(sectionElem);

if("mouseover".equals(eventType) &&  tableCell.getCellIndex() == this.getColumnIndex(column)) {
event.preventDefault();
List visibles = this.getVisibleItems();
T o = visibles.get(tr.getSectionRowIndex());

//Do something with "o"
}

}

private TableCellElement findNearestParentCell(Element elem) {
while ((elem != null)) {
String tagName = elem.getTagName();
if ("td".equalsIgnoreCase(tagName)
  || "th".equalsIgnoreCase(tagName)) {
 return elem.cast();
}
elem = elem.getParentElement();
}
return null;
}
}

L’évènement du siècle!

2011-05-04T10:28:00.000-07:00

Vous êtes au courant, j'en suis certain. Impossible de le manquer! Vendredi 29 avril 2011 a eu lieu la mise en ligne de la version 3.4 de vanilla....

En ce qui me concerne c'est un peu comme croiser une ex que je viens tout juste de plaquer. Je ne l'ai pas encore tout à fait oubliée et je dois bien reconnaître qu'elle a de beaux atouts. La version de démo est bluffante, les exemples sont sexy et prometteurs. Les développeurs ont de quoi être contents.

Mais la rupture est consommée et très vite les points de discorde refont surface: plus de 40 downloads disponibles (sans compter les versions mobiles), de nouveaux logiciels alors que certains ne sont pas utilisés, un portail en version inférieur à GWT 2.0 mais surtout qui utilise toujours GWT-ext.....

Pour filer la métaphore jusqu'au bout, il est possible que cette ex soit plus heureuse aujourd'hui, il n'en reste pas moins que c'est moi qui suis parti et que pour moi c'est une certitude.

TETRIS et HTML 5

2011-04-22T04:17:00.000-07:00

Il y a quelques semaines de cela, après trois ans à utiliser GWT et donc à ne plus avoir à le faire, j'ai du mettre le nez dans du code javascript. Cela fut pour moi l'occasion de faire un tour sur le site de la W3C et de me renseigner un peu plus sur HTML 5 que d'aucun nous annonce comme le remplaçant de flash.

Afin de lier l'utile à l'agréable, je me suis lancé dans la réalisation d'un TETRIS tout en javascript.

Vous trouverez le code ci-dessous.

Pour mettre au point ce code il m'aura fallut quelques heures (5 ou 6) , ce qui me parait raisonnable. Au niveau des transformations permises, il est dommage que ce soit le "canvas" qui bouge et non pas les éléments qu'il contient.

Je suis assez fier de ma façon de faire tourner les pièces... Je ne stocke pas toutes les positions possibles mais je n'utilise pas non plus de vraies matrices de rotation (je n'en ai pas trouvé d'évidente, si quelqu'un a je suis preneur). J'utilise la cyclicité des positions mais là non plus sans faire appel à de la congruence stricte.

Quelques liens intéressants:

http://fr.wikipedia.org/wiki/Tetris

http://www.colinfahey.com/tetris/tetris_en.html

case briques

//////////////////////////////////////////
// Les constantes    //
//////////////////////////////////////////
var maxY = 20;
var maxX = 10;
var cellSize = 20;
var startX = 20;
var startY = 20;
var nextX = maxX*20 + startX + 10;
var nextY = startY + 10;

//////////////////
//La grille     //
//////////////////
var grille = new Array();


////////////////////////////////////
// Matrices des formes  //
////////////////////////////////////
function initCasesO() {
var casesO = new Array();
casesO[0] = new Array();
casesO[1] = new Array();
casesO[2] = new Array();
casesO[3] = new Array();


casesO[0][0] = 0;
casesO[0][1] = 0;
casesO[0][2] = 0;
casesO[0][3] = 0;

casesO[1][0] = 0;
casesO[1][1] = 1;
casesO[1][2] = 1;
casesO[1][3] = 0;

casesO[2][0] = 0;
casesO[2][1] = 1;
casesO[2][2] = 1;
casesO[2][3] = 0;

casesO[3][0] = 0;
casesO[3][1] = 0;
casesO[3][2] = 0;
casesO[3][3] = 0;

return casesO;
}

function initCasesI() {
var casesI = new Array();
casesI[0] = new Array();
casesI[1] = new Array();
casesI[2] = new Array();
casesI[3] = new Array();

casesI[0][0] = 0;
casesI[0][1] = 0;
casesI[0][2] = 1;
casesI[0][3] = 0;

casesI[1][0] = 0;
casesI[1][1] = 0;
casesI[1][2] = 1;
casesI[1][3] = 0;

casesI[2][0] = 0;
casesI[2][1] = 0;
casesI[2][2] = 1;
casesI[2][3] = 0;

casesI[3][0] = 0;
casesI[3][1] = 0;
casesI[3][2] = 1;
casesI[3][3] = 0;

return casesI;
}

function initCasesS() {
var casesS = new Array();
casesS[0] = new Array();
casesS[1] = new Array();
casesS[2] = new Array();
casesS[3] = new Array();

casesS[0][0] = 0;
casesS[0][1] = 0;
casesS[0][2] = 0;
casesS[0][3] = 0;

casesS[1][0] = 0;
casesS[1][1] = 0;
casesS[1][2] = 1;
casesS[1][3] = 1;

casesS[2][0] = 0;
casesS[2][1] = 1;
casesS[2][2] = 1;
casesS[2][3] = 0;

casesS[3][0] = 0;
casesS[3][1] = 0;
casesS[3][2] = 0;
casesS[3][3] = 0;

return casesS;
}

function initCasesZ() {
var casesZ = new Array();
casesZ[0] = new Array();
casesZ[1] = new Array();
casesZ[2] = new Array();
casesZ[3] = new Array();

casesZ[0][0] = 0;
casesZ[0][1] = 0;
casesZ[0][2] = 0;
casesZ[0][3] = 0;

casesZ[1][0] = 0;
casesZ[1][1] = 1;
casesZ[1][2] = 1;
casesZ[1][3] = 0;

casesZ[2][0] = 0;
casesZ[2][1] = 0;
casesZ[2][2] = 1;
casesZ[2][3] = 1;

casesZ[3][0] = 0;
casesZ[3][1] = 0;
casesZ[3][2] = 0;
casesZ[3][3] = 0;

return casesZ;
}

function initCasesL() {
var casesL = new Array();
casesL[0] = new Array();
casesL[1] = new Array();
casesL[2] = new Array();
casesL[3] = new Array();

casesL[0][0] = 0;
casesL[0][1] = 0.25;
casesL[0][2] = 0.5;
casesL[0][3] = 0.5;

casesL[1][0] = 0;
casesL[1][1] = 1;
casesL[1][2] = 1;
casesL[1][3] = 1;

casesL[2][0] = 0;
casesL[2][1] = 1;
casesL[2][2] = 0.5;
casesL[2][3] = 0.75;

casesL[3][0] = 0;
casesL[3][1] = 0;
casesL[3][2] = 0;
casesL[3][3] = 0;

return casesL;
}

function initCasesJ() {
var casesJ = new Array();
casesJ[0] = new Array();
casesJ[1] = new Array();
casesJ[2] = new Array();
casesJ[3] = new Array();

casesJ[0][0] = 0;
casesJ[0][1] = 0.5;
casesJ[0][2] = 0.5;
casesJ[0][3] = 0.75;

casesJ[1][0] = 0;
casesJ[1][1] = 1;
casesJ[1][2] = 1;
casesJ[1][3] = 1;

casesJ[2][0] = 0;
casesJ[2][1] = 0.25;
casesJ[2][2] = 0.5;
casesJ[2][3] = 1;

casesJ[3][0] = 0;
casesJ[3][1] = 0;
casesJ[3][2] = 0;
casesJ[3][3] = 0;

return casesJ;
}

function initCasesT() {
var casesT = new Array();
casesT[0] = new Array();
casesT[1] = new Array();
casesT[2] = new Array();
casesT[3] = new Array();

casesT[0][0] = 0;
casesT[0][1] = 0;
casesT[0][2] = 0;
casesT[0][3] = 0;

casesT[1][0] = 0;
casesT[1][1] = 3;
casesT[1][2] = 1;
casesT[1][3] = 1;

casesT[2][0] = 0;
casesT[2][1] = 0;
casesT[2][2] = 2;
casesT[2][3] = 0;

casesT[3][0] = 0;
casesT[3][1] = 0;
casesT[3][2] = 0;
casesT[3][3] = 0;

return casesT;
}

//////////////////////////
// Matrices de "rotation"//
/////////////////////////
var rotateI = new Array();
rotateI[0] = new Array();
rotateI[1] = new Array();
rotateI[2] = new Array();
rotateI[3] = new Array();


rotateI[0][0] = 0;
rotateI[0][1] = 0;
rotateI[0][2] = 1;
rotateI[0][3] = 0;

rotateI[1][0] = 1;
rotateI[1][1] = 1;
rotateI[1][2] = 0;
rotateI[1][3] = 1;

rotateI[2][0] = 0;
rotateI[2][1] = 0;
rotateI[2][2] = 1;
rotateI[2][3] = 0;

rotateI[3][0] = 0;
rotateI[3][1] = 0;
rotateI[3][2] = 1;
rotateI[3][3] = 0;


var rotateS = new Array();
rotateS[0] = new Array();
rotateS[1] = new Array();
rotateS[2] = new Array();
rotateS[3] = new Array();


rotateS[0][0] = 0;
rotateS[0][1] = 0;
rotateS[0][2] = 1;
rotateS[0][3] = 0;

rotateS[1][0] = 0;
rotateS[1][1] = 0;
rotateS[1][2] = 0;
rotateS[1][3] = 0;

rotateS[2][0] = 0;
rotateS[2][1] = 1;
rotateS[2][2] = 1;
rotateS[2][3] = 1;

rotateS[3][0] = 0;
rotateS[3][1] = 0;
rotateS[3][2] = 0;
rotateS[3][3] = 0;


var rotateZ = new Array();
rotateZ[0] = new Array();
rotateZ[1] = new Array();
rotateZ[2] = new Array();
rotateZ[3] = new Array();


rotateZ[0][0] = 0;
rotateZ[0][1] = 0;
rotateZ[0][2] = 0;
rotateZ[0][3] = 1;

rotateZ[1][0] = 0;
rotateZ[1][1] = 1;
rotateZ[1][2] = 0;
rotateZ[1][3] = 1;

rotateZ[2][0] = 0;
rotateZ[2][1] = 0;
rotateZ[2][2] = 0;
rotateZ[2][3] = 1;

rotateZ[3][0] = 0;
rotateZ[3][1] = 0;
rotateZ[3][2] = 0;
rotateZ[3][3] = 0;

var rotateL = new Array();
rotateL[0] = new Array();
rotateL[1] = new Array();
rotateL[2] = new Array();
rotateL[3] = new Array();


rotateL[0][0] = 0;
rotateL[0][1] = 0.25;
rotateL[0][2] = 0.5;
rotateL[0][3] = 0.25;

rotateL[1][0] = 0;
rotateL[1][1] = 0.5;
rotateL[1][2] = 1;
rotateL[1][3] = 0.5;

rotateL[2][0] = 0;
rotateL[2][1] = 0.25;
rotateL[2][2] = 0.5;
rotateL[2][3] = 0.25;

rotateL[3][0] = 0;
rotateL[3][1] = 0;
rotateL[3][2] = 0;
rotateL[3][3] = 0;

var rotateJ = new Array();
rotateJ[0] = new Array();
rotateJ[1] = new Array();
rotateJ[2] = new Array();
rotateJ[3] = new Array();


rotateJ[0][0] = 0;
rotateJ[0][1] = 0.25;
rotateJ[0][2] = 0.5;
rotateJ[0][3] = 0.25;

rotateJ[1][0] = 0;
rotateJ[1][1] = 0.5;
rotateJ[1][2] = 1;
rotateJ[1][3] = 0.5;

rotateJ[2][0] = 0;
rotateJ[2][1] = 0.25;
rotateJ[2][2] = 0.5;
rotateJ[2][3] = 0.25;

rotateJ[3][0] = 0;
rotateJ[3][1] = 0;
rotateJ[3][2] = 0;
rotateJ[3][3] = 0;

var rotateT = new Array();
rotateT[0] = new Array();
rotateT[1] = new Array();
rotateT[2] = new Array();
rotateT[3] = new Array();


rotateT[0][0] = 0;
rotateT[0][1] = 0;
rotateT[0][2] = 1;
rotateT[0][3] = 0;

rotateT[1][0] = 0;
rotateT[1][1] = 1;
rotateT[1][2] = 0;
rotateT[1][3] = 1;

rotateT[2][0] = 0;
rotateT[2][1] = 0;
rotateT[2][2] = 1;
rotateT[2][3] = 0;

rotateT[3][0] = 0;
rotateT[3][1] = 0;
rotateT[3][2] = 0;
rotateT[3][3] = 0;

/////////////////////////////
// Les objets   //
/////////////////////////////
function Figure(forme) {
this.currentX = 3;
this.currentY = -1;
this.forme = forme;
this.color = forme.color;
}

Figure.prototype.descendre = function() {
this.currentY++;
}

Figure.prototype.moveR = function() {
this.currentX++;
}

Figure.prototype.moveL = function() {
this.currentX--;
}

Figure.prototype.rotate = function() {
this.forme.rotate();
}

function Forme(cases, color, type) {
this.color = color
this.cases = cases;
this.type = type;
}

Forme.prototype.rotate = function() {
if (this.type == 'I') {
for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     this.cases[i][j] = (this.cases[i][j] + rotateI[i][j])%2;    }   }  }  else if (this.type == 'S') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     this.cases[i][j] = (this.cases[i][j] + rotateS[i][j])%2;    }   }    }  else if (this.type == 'Z') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     this.cases[i][j] = (this.cases[i][j] + rotateZ[i][j])%2;    }   }  }  else if (this.type == 'L') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     if(this.cases[i][j] == 1) {      this.cases[i][j] = 0;     }     this.cases[i][j] = (this.cases[i][j] + rotateL[i][j]);    }   }  }  else if (this.type == 'J') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     if(this.cases[i][j] == 1) {      this.cases[i][j] = 0;     }     this.cases[i][j] = (this.cases[i][j] + rotateJ[i][j]);    }   }  }  else if (this.type == 'T') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     this.cases[i][j] = (this.cases[i][j] + rotateT[i][j])%4;    }   }  } }  Forme.prototype.simuleRotate = function() {  var newArray = new Array();  for (var i = 0; i < 4; i++) {   newArray[i] = new Array();   for (var j = 0; j < 4; j++) {    newArray[i][j] = this.cases[i][j];   }  }    if (this.type == 'I') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     newArray[i][j] = (newArray[i][j] + rotateI[i][j])%2;    }   }  }  else if (this.type == 'S') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     newArray[i][j] = (newArray[i][j] + rotateS[i][j])%2;    }   }  }  else if (this.type == 'Z') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     newArray[i][j] = (newArray[i][j] + rotateZ[i][j])%2;    }   }  }  else if (this.type == 'L') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     if(newArray[i][j] == 1) {      newArray[i][j] = 0;     }     newArray[i][j] = (newArray[i][j] + rotateL[i][j]);    }   }  }  else if (this.type == 'J') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     if(newArray[i][j] == 1) {      newArray[i][j] = 0;     }     newArray[i][j] = (newArray[i][j] + rotateJ[i][j]);    }   }  }  else if (this.type == 'T') {   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     newArray[i][j] = (newArray[i][j] + rotateT[i][j])%4;    }   }  }     return newArray; }   //////////////////////////////////// //Initialisation   // /////////////////////////////////// var fig = randomFigure(); var next = randomFigure(); var ctx;  var choice = 0;  function initGrille() {  for (var i = 0; i < 20; i++) {   grille[i] = new Array();  } }  window.addEventListener('load', function () {   initGrille();      var c = document.getElementById("myCanvas");  ctx = c.getContext("2d");  // Boucle de rafraichissement du contexte 2D  boucleJeu = setInterval(refresh, 200);      // Gestion des évènements    window.document.onkeydown = checkDeplace;   }, false);    function refresh() {   var c=document.getElementById("myCanvas");  ctx=c.getContext("2d");  ctx.fillStyle = "#ffffff";  ctx.clearRect(0, 0, 500, 500);  ctx.fill();     ctx.fillStyle = "#000000";  ctx.moveTo(startX, startY);  ctx.lineTo(startX, startY + maxY*cellSize);  ctx.lineTo(startX + maxX*cellSize, startY + maxY*cellSize);    ctx.stroke();   //Affichage de la figure  for (var i = 0; i < 4; i++) {   for (var j = 0; j < 4; j++) {    if (fig.forme.cases[i][j] >= 1) {
  ctx.fillStyle = fig.color;
  ctx.fillRect((fig.currentX + j)* cellSize + startX, (fig.currentY + i) * cellSize + startY, cellSize, cellSize);
 }
}
}

//Affichage des cases remplies
for (var i = 0; i < 20; i++) {   for (var j = 0; j < 10; j++) {    if (undefined != grille[i][j]) {     ctx.fillStyle = grille[i][j];     ctx.fillRect((j+1)* cellSize, (i+1) * cellSize, cellSize, cellSize);    }   }  }    //Affichage de la prochaine figure  for (var i = 0; i < 4; i++) {   for (var j = 0; j < 4; j++) {    if (next.forme.cases[i][j] >= 1) {
  ctx.fillStyle = next.color;
  ctx.fillRect(nextX + j* cellSize, nextY + i * cellSize, cellSize, cellSize);
 }
}
}


if (canMoveDown()) {
fig.descendre();
}
else {
fillGrid();
treatLine();

if (grille[0][6]  == undefined)  {
 fig = next;
 next = randomFigure();
}
else  {
 return;
}
}

}

function randomFigure() {
var _fig;
choice = Math.floor(Math.random()*7);
if (choice == 0) {
_fig = new Figure(new Forme(initCasesO(), "#FFFF00", 'O'));
}
else if (choice == 1) {
_fig = new Figure(new Forme(initCasesS(), "#008000", 'S'));
}
else  if (choice == 2) {
_fig = new Figure(new Forme(initCasesI(), "#00FFFF", 'I'));
}
else if (choice == 3) {
_fig = new Figure(new Forme(initCasesZ(), "#FF0000", 'Z'));
}
else if (choice == 4) {
_fig = new Figure(new Forme(initCasesL(), "#FFA500", 'L'));
}
else if (choice == 5) {
_fig = new Figure(new Forme(initCasesJ(), "#0000FF", 'J'));
}
else if (choice == 6) {
_fig = new Figure(new Forme(initCasesT(), "#FF00FF", 'T'));
}
return _fig;

}

/*Looking for line to be deleted*/
function treatLine() {
var linesToDelete = new Array();
for (var i = 0; i < 20; i++) {   var del = true;   for (var j = 0; j < 10; j++) {    if (undefined == grille[i][j]) {     del = false;     break;    }   }   if (del == true) {    linesToDelete[linesToDelete.length] = i;   }  }    var deleted = 0;  for (var l = linesToDelete.length - 1; l > -1; l--) {
deleteLine(linesToDelete[l]  + deleted);
deleted++;
}
}

/*Delete line*/
function deleteLine(l) {
for (var i = 19; i > 0; i--) {
for (var j = 0; j < 10; j++) {    if (i <= l) {     grille[i][j] = grille[i-1][j];    }   }  } }  /*Fill the grid with the coordinate of the figure which is stopped*/ function fillGrid() {  for (var i = 0; i < 4; i++) {   for (var j = 0; j < 4; j++) {    if (fig.forme.cases[i][j] >= 1) {
  grille[fig.currentY + i][fig.currentX + j] = fig.color;
 }
}
}
}

/*Check if the figure can move down*/
function canMoveDown() {
if (fig.currentY + 4 == maxY) {
for (var j = 0; j < 4; j++) {    if (fig.forme.cases[3][j] >= 1) {
  return false;
 }
}
}
else if (fig.currentY + 4 == maxY + 1) {
for (var j = 0; j < 4; j++) {    if (fig.forme.cases[2][j] >= 1) {
  return false;
 }
}

}
else if (fig.currentY + 4 == maxY + 2) {
for (var j = 0; j < 4; j++) {    if (fig.forme.cases[1][j] >= 1) {
  return false;
 }
}

}
for (var i = 0; i < 4; i++) {   for (var j = 0; j < 4; j++) {    if (fig.forme.cases[i][j] >= 1) {
  if (undefined != grille[fig.currentY + i + 1][fig.currentX + j]) {
   return false;
  }
 }
}
}

return true;

}

/*Check if a figure can flip*/
function isFlipValide(array) {
for (var i = 0; i < 4; i++) {   for (var j = 0; j < 4; j++) {    if (array[i][j] >= 1 ) {
  if (fig.currentX + j < 0 || fig.currentY + i >= maxY || fig.currentX + j >= maxX || grille[fig.currentY + i][fig.currentX + j] != undefined) {
   return false;
  }
 }
}
}
return true;
}

/*Check if a figure move: left, right or flip*/
function checkDeplace(e) {
// Flêche de droite préssée
if (e.keyCode == 39) {
var test = true;
for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     if (fig.forme.cases[i][j] >= 1) {
   //La figure est contre la bordure droite
   if (fig.currentX + j + 1 == maxX) {
    test = false;
    break;
   }
   //Il y a une figure à droite
   else if (fig.currentX + j + 1 < maxX && grille[fig.currentY + i][fig.currentX + j + 1] != undefined) {       test = false;       break;      }     }    }   }   if (test) {    fig.moveR();   }  }  // Flêche de gauche préssée  else if (e.keyCode == 37) {   var test = true;   for (var i = 0; i < 4; i++) {    for (var j = 0; j < 4; j++) {     if (fig.forme.cases[i][j] >= 1) {
   //La figure est contre la bordure gauche
   if (fig.currentX + j == 0) {
    test = false;
    break;
   }
   //Il y a une figure à gauche
   else if (fig.currentX + j - 1 > -1 && grille[fig.currentY + i][fig.currentX + j - 1] != undefined) {
    test = false;
    break;
   }
  }
 }
}
if (test) {
 fig.moveL();
}
}
else if(e.keyCode == 32) {
if (isFlipValide(fig.forme.simuleRotate()) == true) {
 fig.rotate();
}
}
}

function pause(millis)  {
var date = new Date();
var curDate = null;

do {
curDate = new Date();
}
while(curDate-date < millis); }

Voeux

2011-01-20T07:55:00.000-08:00

Ô toi surfeur égaré qui lit ses quelques lignes, je te souhaite une bonne et heureuse année 2011.

Pour moi cette année est déjà l'année du renouveau. En effet je change de société et par la même occasion de statu aussi je ne ferai plus de développements open-source.

Les trois années passées chez BPM auront été riches en apprentissage tant technique qu'humain, tant positif que négatif....

Laveur de cerveaux?

2010-10-24T02:00:00.000-07:00

Cette semaine, plusieurs articles ont eu comme sujet "Power Point". Ils ont pour origine le livre de Franck Frommer, «Pensée Powerpoint : enquête sur un logiciel qui rend stupide».
L'article de Télérama sur le sujet conclue : "Le problème ce n'est pas le logiciel lui-même, mais l'usage que l'on en fait. Ça ne fait que valoriser une façon de penser, l'idéologie dominante: simplicité, efficacité, moindre coût."

Cette conclusion s'applique elle aussi au logiciel de la BI. En effet, lorsque qu'un non informaticien me demande à quoi sert la BI, je réponds "la BI a pour but de rendre intelligible les données que stocke une entreprise". Cet objectif est noble et nécessaire tant la quantité de données stockées est importantes. Hélas, les outils dont nous disposons ont les mêmes travers que les PPT. Ansi, les solutions uniquement "sexy" et rapide à mettre en place sont privilégiées à la mise en place de solutions viables et pertinentes, ses dernières nécessitant temps et réflexion donc argent.

Une api GTW partagée

2010-07-27T04:34:00.000-07:00

Le but de ce post est de montrer comment créer simplement dans eclipse une api graphique GWT réutilisable dans plusieurs projets.

Pré-requis:
Avoir sur son poste une version d'éclipse contenant le plugin GWT ce dernier correctement configurer pour utiliser une version 2.x de l'api GWT.

Etape 1: création du projet.
En cliquant sur l'icône de création d'un projet GWT la fenêtre ci-dessous s'affiche. Pour l'exemple j'ai choisi d'appeler mon projet ApiGwt avec comme package principal org.graphical.api:

Par défaut GWT créé des classes d'exemples. Supprimer toutes les classes existantes ainsi que les packages org.graphical.api.server et org.graphical.api.shared

Etape 2: mise à jour du fichier XML de déclaration du module.

Editer le fichier ApiGwt.gwt.xml et modifier le en supprimant les lignes surlignées en jaunes ci dessous.

Le projet est maintenant prêt et peut-être utiliser pour créer les classes que l'on souhaite partager.

Etape 3: Création d'une classe simple.
Afin d'avoir un plus grande lisibilité dans le code source, il est intéressant de créer un nouveau dossier source. Pour cela faire un clic droit sur le projet puis new -> source folder

J'ai appelé "ui" ce nouveau dossier source. Dans ce dossier il faut créer deux packages:

org.graphical.api.client.ui
org.graphical.api.client.ui.dialogs

Il est maintenant nécessaire de déclarer ces packages comme étant des modules GWT. Pour cela dans le package org.graphical.api.client.ui il faut créer un fichier ApiGwtUI.gwt.xml. Le contenu de ce fichier est le suivant:

Note: penser à décommenter le doctype.

Afin de fournir un exemple, dans le package org.graphical.api.client.ui.dialogs, je créé la classe MyDialog dont le code est:


package org.graphical.api.client.ui.dialogs;

import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;

public class MyDialog extends DialogBox {

 public MyDialog() {
    super();
    this.setText("Mon titre");
    this.setWidget(new HTML("Bla bla bla"));
 }
}

Etape 4: déclaration du nouveau module dans le fichier XML de déclaration principal.
Pour cela il suffit de rajouter la ligne suivante dans le fichier ApiGwt.gwt.xm:

A ce stade il est possible d'exporter les packages créés sous forme de jar afin de les utiliser dans un autre projet GWT. Le soucis est que pour le moment nous n'avons pas testé notre classe.

Etape 5: création d'un package de tests.
Afin de bien séparer les tests du reste je créé un nouveau dossier source nommé "tests". Dans ce dossier je créé deux packages:

org.graphical.api.tests
org.graphical.api.tests.client

Dans le premier package (org.graphical.api.tests), je crée le fichier de déclaration d'un module GWT: ApiGwtTests.gwt.xml dont le contenu est:

La ligne

permet de déclarer quelle est la classe qui implémente "EntryPoint".

Dans le deuxième package org.graphical.api.tests.client je crée la classe "Tests":

package org.graphical.api.tests.client;

import org.graphical.api.client.ui.dialogs.MyDialog;

import com.google.gwt.core.client.EntryPoint;

public class Tests implements EntryPoint {

 @Override
 public void onModuleLoad() {
    MyDialog myDialog = new MyDialog();
    myDialog.show();
    myDialog.center();

 }

}

Une dernière modification est nécessaire avant de pouvoir lancer la classe de test. Il faut éditer le fichier ApiGwt.html et remplacer la ligne:

par la ligne:

Une fois cela fait faire un clic droit sur ApiGwtTests.gwt.xml puis run as -> web application.

L'étape 5 n'est pas nécessaire, en effet il aurait été possible de faire les tests directement dans la classe d'entrée créé automatiquement par GWT. L'intéret de cette solution est qu'elle permet de bien isoler les tests et le reste du code et aussi de faire des exports incluant uniquement les classes effectivement utiles.

Etape 6: export sous forme de jar.
L'arborescence finale est la suivante:

Pour exporter sous forme de jar faire un clic droit sur le projet puis export->java->jar file et sélectionner les packages a exporter comme suit:

Etape 7 : Utilisation du jar créé.
Pour utiliser le jar créé il suffit de la placer dans le répertoire lib de votre projet GWT, de l'ajouter au classpath de celui-ci et enfin de le déclarer dans le fichier .gwt.xml en y ajoutant la ligne suivante:

Conclusion:
Cette démarche me parait intéressante et facile à mettre en place. Lors de mes différents essais je n'ai trouvé qu'un lien sur le sujet (http://java.ociweb.com/mark/programming/GWT.html#Reuse) que j'ai trouvé un peu léger même si tout y est dit, d'où l'idée de ce post.

Charabia

2010-05-04T11:04:00.000-07:00

Il y a un peu plus de deux ans, lorsque j'ai fait mes premiers pas en temps que salarié du privé ma première action a été de créer un répertoire définitions dans mes favoris. Dans ce répertoire je plaçais tous les liens wikipédia vers les acronymes que je découvrait pour la première fois.
Je vous laisse imaginer ce qu'une simple phrase telle que "Pour le design d'un cube OLAP, il est nécessaire de créer un DWH à l'aide d'un ETL" pouvait déclencher comme recherches!

Vendredi dernier l'émission de France Inter Nous Autres, m'a refait vivre ses grands moments avec beaucoup d'humour. L'interview diffusé était tout simplement jouissif, je vous le conseille.

Le retour

2010-04-17T01:05:00.000-07:00

Après bientôt un an d'absence me voici de retour!!

La raison de cette absence prolongée, la recherche d'un appartement. Il a fallut un peu plus de huit mois pour trouver le mouton à cinq pâtes... Emménagement prévu mi juin.

La raison de mon retour, la publication par Smile du livre blanc "Bi open source décisionnel 2010". En effet ce livre blanc à fait débat au sein de ma société (bpm-conseil).

A titre personnel, je ne suis pas surpris que la suite vanilla ne soit pas citée dans ce livre et je ne m'en émeu pas outre mesure. Evidemment, j'aurai préféré que nous soyons présent mais je ne vois ici aucune forme de "censure". J'estime de plus qu'il aurait été difficile de nous jugé objectivement car comme le dit Sylvain Decloix, de nombreuses copies d'écrans n'étant pas à jour je doute que Smile ai eu (pris?) le temps de regarder les dernières avancées de vanilla.

Pour moi sa relative confidentialité est la seule raison objective de l'absence de vanilla dans ce livre blanc. Quoiqu'il en soit, cette raison est de moins en moins valable si j'en juge par le nombre de formations qui sont organisées autour de vanilla, notamment sur le triptyque FreeMetadata, FreeDashboard, BIRT. Le bon travail réalisé en 2008 avec le Grand Lyon nous a ouvert les portes de nombreuses collectivités désireuses de remplacées BO par une solution OpenSource. Enfin la stabilisation de la plateforme et l'augmentation constante des performances nous ouvre les portes de grands comptes.

Gaël

Vanilla 2.0

2009-05-03T05:14:00.000-07:00

Cher lecteur,

Il y a 15 jours a eu lieu une rencontre entre les équipes de bpm-conseil et ses partenaires. L'objectif de ses deux journées était de présenter les nouveautés et les évolutions de la plateforme vanilla depuis la version 1.2.

Parmis les évolutions majeurs, la plus marquante est le rôle central joué par notre métadata. En effet du dashboard au cube en passant par les rapports, tout type de document BI peut être designer à partir d'un métadata. Plus fort encore, pour les rapports, vous avez le choix. Que vous préfériez BIRT pour son interface graphique très facile à utiliser ou IReport pour ses performances il existe un plugin rendant ses deux moteurs compatibles avec le métadata de vanilla.

Côtés nouveautés à court terme deux projets ont attiré l'attention. Le BiGateway et le Workflow designer.

Le Bi Gateway, dont voici un aperçu de l'interface, permet de réaliser la migration de données.

Cet outil fait de vanilla une platforme complète allant de la création de Data Warehouse à la restitution intelligible de données.

L'interface du Workflow designer, dont une première version avait été sorti en début d'année, a été entièrement revue. Cette dernière est ainsi beaucoup plus souple.

Cet outil va rendre obsolète le dernier composant qui rendait, aux yeux de certains, pentaho attractif.

A moyen terme, un produit très attendu est le Map Designer. Entièrement développé en GWT, cette application web a pour but la restitution d'indicateurs géolocalisés. Ce projet me tenant tout particulièrement à coeur j'y consacrerai mon prochain billet.

A bientôt autour de vanilla.

Gaël

Hello world

2009-03-29T04:58:00.000-07:00

Ce premier post pour me présenter "au monde".

Il y a un peu plus d'un an j'ai quitté l'éducation nationale pour me lancer dans une nouvelle aventure professionnelle: l'informatique. Cela faisait plusieurs années que je vivais cette passion en marge de mes activités d'enseignement (j'avais le temps ;-)). Embauché chez bpm conseil, je suis tombé par hasard dans l'osbi (open source BI) et je remercie pour cela Patrick Beaucamp, car peu nombreux sont ceux qui m'aurait donné ma chance.

A l'époque je pensais que j'en avais fini avec les petites mesquineries, les gueguerres pour avoir mon vendredi après-midi de libre ou une équerre dans ma salle. C'était sans compter l'ambiance "conviviale" qui règne dans le petit monde de l'osbi, où chacun se réjouit de la réussite des autres. En effet je ne compte plus les remarques désobligeantes par ce qu'il manque un fichier source ou un fichier de licence... Mais franchement l'essentiel est ailleurs.

J'ai longtemps hésité avant d'ouvrir se blog et d'y exposer mon travail. Mais lorsque j'ai vu que la classe principale de IReport faisait plus de 10 000 lignes, je me suis dis: "pourquoi pas? je ne fais pas pire". Quoiqu'il en soit la critique lorsqu'elle est constructive fait progresser.

Gaël