AngularJS : le "petit" framework JavaScript (encore un?!) qui monte , qui monte!

Introduction

AngularJS , qu'est ce que c'est ?

AngularJS est un framework JavaScript, créé en octobre 2010 par des développeurs de chez Google et sous la licence MIT.
Il propose une architecture basée sur le pattern MVC (Model View Controller) pour des SPA (Single Page Application), autrement dit des applications web où la navigation se fait sur une même et unique page (exemple : Gmail, Dropbox, iCloud, etc.).

JavaFX : le RIA à la mode Java

RIA : Rich Internet Application

Le concept de "client riche" peut être perçu comme une sorte d’hybride entre le monde client/serveur (client lourd) et le monde web (client léger). Les applications internet riches tentent de réconcilier leurs avantages tout en conservant le meilleur des deux types d'applications : facilité de déploiement, ergonomie et expérience utilisateur enrichie. Par extension du langage HTML, les RIA permettent de créer des interfaces sophistiquées tout en apportant une meilleure ergonomie aux pages web.

Eclipse 3.7 « Indigo » : Vos voeux seront-ils exaucés ?

Comme tous les ans à la même époque, la nouvelle version d'Eclipse vient de sortir. Son  nom de code : "Indigo".

Cette année, Eclipse met l'accent sur trois axes que sont le développement Java d'une part, la modélisation d'autre part et enfin l'intégration (outils surtout axés ALM [Application Lifecycle Management] cette année).

Du côté de Java, on trouve des avancés intéressantes et significatives :

  • WindowBuilder un édtieur d'IHM (Swing, SWT, RCP, XWT et GWT) : Eclipse tente de rattraper son retard au niveau du design d'IHM client riche/web comparé à d'autres IDE comme Netbeans et surtout IntelliJ d'IDEA.
  • Un outil pour réaliser des Tests Fonctionnels : Jubula. Une preuve que les tests de non régression et aussi le développement piloté par les tests d'acceptance sont des mouvances actuelles.
  • Développement RIA (RAP) avec Reina 3.0. Dans la droite ligne du dernier séminaire ANTEO sur les RIA (voir ici), il est clair que cette technologie succite l'intérêt de la communauté RIA.

Du côté des outils et de l'Application Lifecycle Management, Eclipse n'est pas en reste :

  • Intégration de Maven, qui était très attendue, comme en témoigne le forum du plugin M2eclipse. Ce plugin est désormais intégré dans Eclipse mais le résultat est décevant. En dehors du fait qu'il n'est pas intégré dans la version Java EE d'Eclipse, il y a encore du chemin à parcourir sur ce plan avant d'être à la hauteur de nos attentes.
  • Intégration de Git au travers du plugin EGit 1.0. Concurrent avéré de SVN, les développeurs/sociétés qui souhaitent passer de SVN/CVS à git seront ravis.
  • Un outil de revue de code Gerrit, très utile d'autant plus qu'il est très bien intégré avec la notion de revue bloquante/non bloquante. Complémentaire ou opposé à la notion de Pair Programming des méthodes agiles, à vous de juger (voir cet article).
  • Intégration de Mylyn 3.6La toute dernière version de Mylyn clairement orientée ALM, apporte elle aussi son lot de nouveautés (une meilleure gestion des contextes (consultation, modification, merge..), une intégration avec Hudson,Bugzilla ou encore Gerrit).
  • Le support des bases de données NoSQL

Du côté de la Modélisation, c'est surtout EMF qui bénéficie des dernières évolutions :

  • Support des langages DSL via Xtext 2.0
  • EMF 2.7, nouvelle version du framework de modélisation et de génération
  • EMF Compare 1.2 (comparaison de modèles EMF)
  • EMF Facet pour étendre les méta-modèles

En conclusion, vous bénéficierez de quelques précieuses nouveautés mais c'est clairement une déception quant à Maven avec l'intégration "inachevée" de M2Eclipse, ce qui en fait une limite majeure d'Eclipse comparé à Netbeans ou IntelliJ pour les développeurs Java EE !

MSDays de Rennes : Silverlight, l’aventure continue !

Il y avait quelques inquiétudes légitimes dans la communauté des développeurs Silverlight depuis que Microsoft avait pris fait et cause pour HTML 5, en annonçant (2009) que cette technologie serait désormais au cœur de sa stratégie d’interopérabilité.

Ces inquiétudes sont désormais levées puisque le « Flash Killer » fait bien partie de la « roadmap » de Microsoft. L’annonce de Silverlight 5, attendu pour la fin de l’année 2011, confirme que l’aventure continue.

Mais à en croire les nouveautés annoncées, il y a manifestement un changement de stratégie : Silverlight se recentre sur le multimédia et les applications d’entreprise.

Flex 4.5 : l’avenir du développement web ?

Avec la sortie de Flex 4.5, Adobe s’attaque au marché juteux des smartphones et des tablettes. La technologie Flex était déjà une très bonne réponse pour des développements de type RIA (Rich Internet Application) voire RDA (Rich Desktop Application) avec la technologie Adobe AIR. Avec cette offre, Flex permettait déjà de mutualiser du code entre une application Internet et une application cliente installée sur un poste fixe ou nomade, mais avec cette dernière version, Adobe fait un pas de plus.

Antéo à la Conférence Adobe RIA 2010

Pour la seconde année et en tant que partenaire Silver d'Adobe, Antéo était présent ce mardi 30 Novembre 2010 à la conférence Adobe RIA 2010 "L'expérience client au coeur des stratégies business des entreprises".

Antéo présentait son offre de Conseil en Architectures RIA et plus particulièrement sur l'Architecture Flex.

En parallèle du salon partenaire d'Adobe, des conférences sur le thème de  "l'expérience client" étaient programmées. Nous avons pu assister à différentes présentation de  mise en oeuvre de projets Flex chez IDC, GrDF, MMA, Chaumet, Orange, Novartis, PSA, Véolia et la SNCF.

Gestion des colspan – IE vs FF

Introduction

Lors de l'ajout de la fonctionnalité des multiheader dans le grid de SweetDev Ria, nous avons été confrontés à un problème de compatibilité entre Internet Explorer et Firefox.

Le but étant de pouvoir masquer une colonne dans la grid de SweetDev Ria.

Existence de <colgroup> et <cols>

Tout d’abord un petit rappel sur les structures des tables.
Nous sommes habitués à utiliser le tag <table> avec sa structure classique des <td> inclus dans des <tr>, voir nous utilisons le tag <th> pour avoir de beaux headers de colonnes. Cependant, il est moins connus d’utiliser la structuration des colonnes avec les deux tags que sont <colgroup> et <cols>, ceux-ci permettent ainsi d’appliquer un style à toute une colonne ou un groupe de colonnes.

Avec des colonnes normales sans colspan

Lorsque nous n’avons qu’une seule ligne de header dans la grid, le comportement est plutôt simple. Il suffit dans les grandes lignes de modifier le style de la balise <cols> correspondante. Seulement voilà, le comportement entre Internet Explorer et Firefox n’est pas le même.
Sous Firefox, nous utilisons la propriété visibility que nous mettons à collapse.  Le fait de mettre la visibility à collapse permet de masquer la colonne tout en récupérant la place par les autres colonnes.
Sous Internet Explorer, malheureusement la valeur collapse n’est pas autorisée pour la propriété visibility. Et nous devons utiliser autre chose à savoir display que nous mettons à none et width à 0px pour avoir le même effet que sous Firefox.
Voici le code utilisé dans la table :

<table width="500px" cellspacing="0" cellpadding="0" border="1">
<colgroup id="grid1_headTable_colgroup">
<col style="background-color:red" id="grid1_head_col_0"/>
<col style="background-color:white" id="grid1_head_spliter_0"/>
<col style="background-color:yellow" id="grid1_head_col_1"/>
<col style="background-color:lightblue" id="grid1_head_spliter_1"/>
<col style="background-color:lightgreen" id="grid1_head_col_2"/>
</colgroup>
<tr>
<td>th1</td>
<td>th2</td>
<td>th3</td>
<td>th4</td>
<td>th5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</table>

Et la fonction qui est contenu dans le bouton :

<script language="javascript">
function test(){
var maCol=document.getElementById("grid1_head_col_1");
maCol.style.visibility="collapse";
}
</script>

Ce qui donne ceci :

Avant de cliquer sur le bouton pour masquer la colonne
Avant de cliquer sur le bouton pour masquer la colonne
Après avoir cliqué sur le bouton "Test"
Après avoir cliqué sur le bouton "Test"

Dans l'autre cas :

<script language="javascript">
function test(){
var maCol=document.getElementById("grid1_head_col_1");
maCol.style.display="none";
maCol.style.width="0px";
}
</script>

Ce qui donne ceci :

Après click du bouton Test

Après avoir cliqué sur le bouton "Test"

Avec le problème du colspan et de la première colonne

La problématique était de rajouter un système de regroupement de colonnes afin de faire du multiheader. Jusque là tout va bien. Les tests que nous effectuons sont sur Firefox. Et donc les colonnes se masquent bien.
Nous faisons alors les tests sur Internet Explorer. Et là, los du masquage de la première colonne d’un groupe, la colonne se masque bien mais la totalité de label et du style du groupe disparait également. Ceci provient du fait que dans la structure de la table nous avons définit un regroupement de la colonne avec l’attribut colspan sur le nombre de colonnes contenu dans le groupe. Nous avons effectué alors effectués quelques tests.
Nous avons créé une table en html contenant des colspan, nous avons également ajouté un bouton qui grâce à du javascript à permis de masquer la première colonne d’un groupe.

<table width="500px" cellspacing="0" cellpadding="0" border="1">
<colgroup id="grid1_headTable_colgroup">
<col style="background-color:red" id="grid1_head_col_0"/>
<col style="background-color:white" id="grid1_head_spliter_0"/>
<col style="background-color:yellow" id="grid1_head_col_1"/>
<col style="background-color:lightblue" id="grid1_head_spliter_1"/>
<col style="background-color:lightgreen" id="grid1_head_col_2"/>
</colgroup>
<tr>
<td>thG1</td>
<td>thG2</td>
<td colspan="2">thG3</td>
<td>thG5</td>
</tr>
<tr>
<td>th1</td>
<td>th2</td>
<td>th3</td>
<td>th4</td>
<td>th5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
<td>td5</td>
</tr>
</table>

Nous obtenu les résultats suivants :

Table contenant un colspan

Table contenant un colspan

Nous avons tout d’abord utilisé la propriété collapse de visibility (même fonction javascript que décrit dans la partie précédente) ce qui nous a donné les résultats suivants :

Après avoir cliqué sur le bouton "Test"

Après avoir cliqué sur le bouton "Test"

On peut que le résultat est à peu près le même que précédemment à l'exception que l'on perd le style au niveau du regroupement sous Firefox.

Nous avons ensuite essayé le display :none ; width :0px . Voici les résultats :

Après avoir cliqué sur le bouton "Test"

Après avoir cliqué sur le bouton "Test"

On peut voir que la colonne est bien masquée sur Internet Explorer, mais par contre le label a disparu ainsi que le style du regroupement. Ce qui pourrait apparaitre comme étant une réaction tout à fait normal, en effet, on demande au navigateur de masquer une colonne, chose qu'il fait sans se soucier si il y ou non un colspan présent.

Conclusion

Ce problème nous a permis de mettre en évidence un point qui n'est pas trivial. En effet, nous n'avons pas trouvé d'informations particulièrement précises vis à vis de ce problème sur Internet. Il y a bien des sites qui précisent la compatibilité des fonctions et propriétés CSS qui fonctionnent ou non en fonction des navigateurs, mais sans avoir pour autant les solutions à ces différents problèmes.

Pour notre part nous nous referons souvent au site suivant : http://www.quirksmode.org/ qui se veut être une référence dans le domaine

Dans notre cas précis nous nous sommes basés sur cette page là : http://www.quirksmode.org/css/columns.html

Encore une fois, nous nous sommes rendu compte que nous avons pris l'habitude de développer sur Firefox (essentiellement à cause des différents plugins facilitant la vie du développeur) et en pensant que les réactions sont les mêmes sur Internet Explorer (et je ne parle pas ici des autres navigateurs, mais le problème est le même).

Ainsi l'utilisation des CSS nécessite une grande connaissance de leurs rendus sur les différents navigateurs et augmente de manière non négligeable le temps de développement, chose souvent non anticipé.