Actualités

Ionic 5 est disponible 🎉🚨

La version 5.0 d’Ionic (Magnesium) est disponible depuis le 11 février. Cette nouvelle version majeure du framework arrive avec son lot d’évolutions. Qu’est-ce qui a réellement changé par rapport la version précédente ? Les bonnes pratiques de la version 4 sont-elles toujours d’actualités avec cette nouvelle version ? Quel effort doit-on fournir afin de migrer une application de la version 4 à la version 5 ?

Alors, qu’est-ce qui va vraiment changer dans Ionic 5?

Pas mal de nouvelles fonctionnalités et évolutions, mais pas de bouleversements majeurs. 
C’est en effet ce qu’il ressort de l’annonce d’Ionic sur leur blog et de la consultation de la liste des changements – changelog – disponible sur github.
De plus, il y aura une rétrocompatibilité des API de la version 4 avec la version 5. C’est une excellente nouvelle car cela facilitera d’autant la migration d’une application de la version 4 à la version 5. 

En qualité de partenaire officiel d’Ionic, Jnesis a décidé d’analyser les principales évolutions. Parmi les principaux changements de la version 5 d’Ionic, on peut donc noter:

  • la suppression des Events au profit des observables / observers de rxjs.
  • de nouvelles couleurs par défaut sont disponibles pour Ionic 5
  • l’attribut « mode » d’un élément s’applique désormais à lui-même ainsi qu’à l’ensemble des ses enfants
  • Il n’y a plus d’icône spécifique à Android ou iOS. De nouvelles options sont cependant disponibles pour personnaliser l’apparence des icônes
  • les styles ont été revus:
    • remplacement d’attributs par des classes
    • changement dans les médias queries
    • la classe activated à été remplacée par ion-activated
    • certaines propriétés CSS globales ont été mises à jour
  • certains composants ont été modifiés (Action Sheet, Anchor, Back Button Card Split Pane, Button FAB Button Item Menu Button Tabs, Controllers, Header / Footer, List Header, Menu, Nav Link, Radio, Searchbar, Segment, Segment Button, Select Option, Skeleton Text)

Comment migrer une application en version 4 vers 5 ?

Contrairement à la migration de la version 3 vers la version 4 qui comprenait des changements très importants au niveau de la structure du framework, la migration de la version 4 à la version 5 est beaucoup moins lourde.

Avant de mettre à jour son application vers la version 5, il est recommandé de mettre à jour l’application vers la dernière version 4, puis de corriger l’ensemble des warnings js présents dans l’application (les warnings en version 4 non corrigés générerons des erreurs en version 5).

Une fois les warnings corrigés, on lance la commande suivante :

npm i @ionic/angular@latest --save

L’essentiel des adaptations est alors visuel (mise à jour des couleurs, propriétés CSS customisées, icônes ou styles dans les composants).

N’hésitez pas à nous contacter si vous souhaitez vous faire accompagner par des experts ionic dans votre démarche de migration ou pour réaliser un audit préliminaire..

Migration Ionic 3 vers 4

Migration d’une application mobile Ionic 3 vers Ionic 4

Ionic logo

Pourquoi effectuer une migration ionic 3 vers 4?

Ionic 4 a été publié en Janvier 2017 et offre de nombreuses évolutions par rapport à la version 3.

Pour n’en citer que quelques unes :

  • Le framework a été entièrement reconstruit à partir de zéro à l’aide d’API Web standard, et chaque composant est conditionné en tant que composant Web*.
  • Contrairement à Ionic 3, le système de routage permet d’avoir des url et d’y passer des paramètres, ce qui simplifie la navigation, notamment pour les applications web progressives(progressive web app ou PWA).
  • La montée en version d’Angular (passage de la version 5 à la version 8) de RxJS (passage de la version 5 à la version 6), avec toutes leurs nouveautés.

*Cette nouvelle version dispose donc de nombreux avantages. Il est désormais possible, grâce aux composants web de créer un composant sur une application Ionic, et de le réutiliser par exemple dans une application Angular (ou l’inverse !)

Outre ces nouveautés, Ionic 4, une montée en version régulière d’une application ou d’un logiciel est toujours une bonne pratique, car elle permet de résoudre des problèmes de compatibilité, de sécurité et de profiter des dernières nouveautés du framework. La performance des applications est également accrue de plus de 50%, notamment sur le temps initial de chargement de l’application.

Ionic Angular 4 vs Ionic Angular 3

Comment procéder ?

Création de l’application sous Ionic 4

La position des différents dossiers ayant largement évolué, la meilleure façon d’initialiser la migration vers Ionic 4 est de créer une nouvelle application avec la nouvelle version 5 de l’interface en ligne de commande d’Ionic.

interface en ligne de commande d'Ionic

Ionic préconise alors de copier le contenu des différents éléments statiques, notamment les styles de l’application, services ou fichiers de configuration vers les nouveaux dossiers prévus dans la version 4.

Migration des composants

La migration d’un composant s’effectue en plusieurs étapes. La première concerne la vue avec le fichier html, avec son style, avant de mettre à jour la logique métier.

Migration visuelle

Les deux plus grands challenges sont alors de migrer l’ensemble des composants de la version 3 vers les composants web de la version 4. 

Pour exemple, la migration d’un simple bouton est alors la suivante : Migration d’un bouton

<button ion-button>Bouton</button> // Ionic 3
<ion-button>Bouton</ion-button> // Ionic 4

Pour certains composants, liés à des données, la migration a cependant été beaucoup plus importante, notamment en ce qui concerne la migration des formulaires, avec les ion-input.

La migration, même pour un simple bouton ne s’arrête cependant pas ici ! Du fait de la création de réels composants web, le style des boutons s’applique d’une manière différente : C’est le shadow DOM. Cela apporte de nombreux avantages: il est possible par exemple d’appliquer des styles bien précis à un seul nœud du DOM, sans que tout le reste de l’application soit impacté. Il est important de prendre cela en compte lors de la migration des composants car l’intérieur des shadow root n’étant plus atteignable par des sélecteurs CSS extérieurs.

L’autre effet du passage aux web components est que les styles appliqués en version 3 ne fonctionnent plus nécessairement dans la version 4 car l’arbre de rendu est modifié. C’est la, sans doute que se trouve la partie la plus longue d’une migration vers Ionic 4 ; Le bouton, stylisé avec une couleur rouge en version 3, ne fonctionnera plus après la migration : 

<style>
.bouton-rouge {
background-color: red;
}
</style>
 
<button ion-button class="bouton-rouge">Bouton rouge</button> // code Ionic 3 - le bouton sera bien rouge
<ion-button class="bouton-rouge">Bouton avec la couleur par défaut</ion-button> // code Ionic 4 - le bouton ne sera pas rouge

Le DOM généré pour la version 3 : 

Le DOM généré pour la version 4 :

Pour cet exemple basique, on utilise pour la version 4 les custom properties du composant :

<style>
.bouton-rouge {
--background-color: red;
}
</style>
 
<button ion-button class="bouton-rouge">Bouton rouge</button> // code Ionic 3 - le bouton sera bien rouge
<ion-button class="bouton-rouge">Bouton avec la couleur par défaut</ion-button> // code Ionic 4 - le bouton ne sera pas rouge

Migration de la logique métier

Maintenant que le visuel de l’application est à nouveau cohérent avec la version 3, on veille à ce que la logique métier fonctionne encore. On note de nombreux changements dans la version 4 d’Ionic, notamment au niveau du cycle de vie de l’application.

Le cycle de vie de l’application représente différentes fonctions qui sont exécutées à différents stades du chargement de l’application. Dans Ionic 4, les différentes méthodes existantes sont représentées ci-dessous :

Ainsi, la méthode ionViewDidLoad() a par exemple été remplacée par la méthode supportée par Angular ngOnInit(). Si du code Ionic est migré vers la version 4 est exécuté dans la méthode ionViewDidLoad(), il ne sera donc plus exécuté, sans pour autant générer d’erreur ! Cet exemple montre qu’il est important de prêter une attention particulière à tous les points de la migration.

Dans tous les cas, une lecture générale de l’ensemble du code est requise afin de vérifier si les méthodes de chaque composant sont encore maintenues par les nouvelles versions d’Ionic, Angular, RxJS…

Bonnes pratiques

Même si le but d’une migration n’est pas de réécrire le code métier, on se retrouve cependant parfois contraint d’adapter du code source qui utilise des fonctions ou des plugins dépréciés ou plus supportés par les nouvelles versions d’Ionic ou de Angular/RxJS.

C’est par exemple le cas de la fonction throw de RxJS qui était utilisé pour enregistrer les erreurs de chaque requête HTTP: cette méthode était donc dupliquée pour chaque requête.

Dans les nouvelles versions d’Angular, on utilise HttpInterceptor qui simplifie énormément la gestion des erreurs HTTP, car elle enregistre les erreurs de l’ensemble des requêtes de l’application en une seule fonction pour toute l’application.

Migration des plugins cordova vers capacitor

Les plugins cordova permettent d’accéder aux éléments matériels des appareils sous Android et IOS. Ils permettent par exemple d’accéder à l’appareil photo ou encore coordonnées GPS. La migration  peut être une tache relativement fastidieuse car certains plugins, développés par la communauté ne sont pas compatibles avec la version 4 d’Ionic.

Nous avons par exemple remplacé le plugin cordova cordova-plugin-ionic-webview qui sers à faire des zoomes dans une image avec le multi-touch par un composant ionic-img-viewer qui n’est pas un plugin cordova.

Avec Ionic 4, l’équipe d’Ionic conseille fortement de migrer cordova vers capacitor qui est une solution open source développée par l’équipe d’Ionic. Avec ce nouveau framework, les plugins seront plus orientés PWA / web, contrairement aux plugins cordova qui ne sont en général compatibles uniquement sur iOS et Android.  De plus, cordova est un projet maintenu par des bénévoles, et il a récemment  eu des difficultés à se tenir à jour avec les derniers changements des plates-formes natives car iOS et Android subissent constamment des changements, qu’il s’agisse de nouvelles mises à jour de système d’exploitation ou de nouveau matériel.

Depuis fin 2019, l’Apple store indique qu’il n’acceptera bientôt plus les applications qui utilisent UIWebView, la webview historiquement utilisée par cordova. Même si cette webview n’est plus utilisée depuis très peu de temps par cordova, il reste des références dans certains plugins cordova qui empêcheront peut-être une soumission future sur le magasin d’application d’Apple.

Capacitor utilise par défaut la webview WKWebView qui est la webview conseillée et non dépréciée par Apple.

Notre retour d’expérience

Après avoir achevé des migrations sans point de blocages particulier, nous pouvons souligner les points suivants : 

  • Plus la logique métier est claire et bien organisée, plus la migration sera rapide,
  • Plus les bonnes pratiques de la version 3 sont respectées, plus la migration sera rapide,
  • Partir d’une nouvelle application Ionic 4 sera toujours plus efficace que d’essayer de monter à la main les versions des différents modules via le node package manager.

→ Le guide de migration officiel est disponible sur le site officiel d’Ionic

n’hésitez pas à nous contacter si vous souhaitez vous faire accompagner par des experts ionic dans votre démarche de migration ou pour réaliser un audit préliminaire..

Les 10 ans de jnesis à Lisbonne

Entre 2 projets Ionic et Sencha, les membres de l’équipe Jnesis France sont partis pour un voyage à Lisbonne à l’occasion des 10 ans de JNESIS . C’est donc avec plein d’idées et de bonne humeur que le groupe rentre du Portugal pour continuer d’innover pour vous proposer leurs services .

Précédent
Suivant

Nouveau cours en ligne Java sur Jnesis Academy

C’est avec une grande joie (et un peu de fierté 😇) que Jnesis Academy vous annonce son nouveau cours en ligne et en vidéo : Java et les bases de données avec JDBC, Hibernate et JPA

Il nous a fallu plusieurs mois pour réussir à compiler en moins de 10h tout ce que vous devez savoir pour bien démarrer !

Si vous avez besoin d’une base de données pour vos développements, que vous soyez plus MySQL, Oracle, SQL Server, PostgreSQL ou n’importe quel autre type de serveur, ce cours est fait pour vous !

Et comme d’habitude, ce cours est agrémenté de travaux pratiques 🔨 pour mieux vous accompagner.

Plus d’informations sur le lien ci-dessous : 

https://apprendre-java.teachable.com/p/java-et-les-bases-de-donnees-avec-jdbc-hibernate-et-jpa

N’hésitez pas à visiter notre rubrique dédiée en savoir plus sur notre offre de formation et de coaching.

Pour ne rien rater de notre actualité, suivez nous sur les réseaux  linkedin jnesiset

Formation Ionic officielle et en français !

En tant qu’organisme de formations agréé, Jnesis a le plaisir de vous annoncer une formation officielle Ionic en français !

Grâce à ce cours vous serez en capacité de mettre en oeuvre tout le fantastique potentiel d’Ionic, notamment dans sa version 4 avec toutes les dernières nouveautés.

Opter pour une formation délivrée par jnesis, c’est la garantie d’une approche pragmatique, “de développeur à développeur”, sur la base du support officiel Ionic traduit en français.

  • où?
    Paris (intra-muros)
  • quand?
    3 jours du 3 au 5 décembre 2019
  • pour qui?
    toute personne qui dispose de connaissances en Angular et HTML/CSS
  • pour quoi faire?
    apprendre à développer efficacement et suivant les bonnes pratiques en Ionic
  • combien ça coûte?
    2 400€ HT par personne
    (peut faire l’objet d’une prise en charge par votre OPCA/OPCO au travers du plan formation pour les entreprises éligibles)

Nous serions très heureux de vous compter parmi nous pour cette première édition et serions ravis de partager toutes nos connaissances et bonnes pratiques avec vous.

Ne tardez pas à vous inscrire, le nombre de place est volontairement très limité afin de garantir un maximum d’interaction.

Pour plus d’information, visitez directement notre site : jnesis.com/ionic/formation-ionic/

Mais au fait, ionic c’est quoi?

web ou natif? ou mieux les 2 avec ionic?

Rappelons-le, ces applications ont vocation à offrir le meilleur des 2 mondes, web et natif, avec un temps de développement (time-to-market) plus court, et sans subir les complexités liées à chaque OS. C’est la promesse d’ionic.

Tout d’abord, il s’agit avant tout d’applications Web qui bénéficient donc d’une stack technologique unique et surtout générique: HTML + CSS + JS, quel que soit le type de terminal (Desktop, Mobile …) et quel que soit le système d’exploitation (Android, iOS, Windows …).

C’est le fameux : write once, run anywhere

Ces applications sont également capable de tirer profit de l’expérience native. Les applications sont intégrées, fiables et surtout interopérables avec les équipements et services natifs comme par exemple :

  • la géolocalisation GPS,
  • l’appareil photo,
  • l’authentification forte par empreinte ou lecture du visage,
  • ou une API de paiement par exemple

Applications Hybrides ou Progressive Web App ?

Ionic as future proof as the web

https://ionicframework.com/

Il est intéressant de souligner que quelque soit le standard qui correspond le mieux à vos besoins, ionic vous apporte une solution adaptée. Ainsi, vous pouvez choisir de développer des applications Mobiles Hybrides ou des Applications Web Progressives (PWA).

Mais alors, quel type d’applications choisir ? Jnesis est bien évidemment là pour vous orienter car la solution universelle n’existe pas. Profitons-en pour apporter quelques éclairages dans la suite de cet article.

Application Hybride

Tout d’abord et pour faire simple, une application hybride est une application web convertie en application native. Elle pourra donc être publiée dans les store respectifs, publics ou privés, ou diffusée directement (Android uniquement).

Il est à noter que le domaine des applications Hybrides a évolué très rapidement ces dernières années. Là où Adobe PhoneGap était encore la seule option il y a quelques années pour convertir les applications Web, la mouture Open Source Apache Cordova a depuis donné naissance à de multiples implémentations. Mais avec capacitor, ionic va plus loin et dépasse le cadre du mobile natif. Ainsi vos applications Web vont pouvoir fonctionner dans n’importe quel environnement : Desktop natif, Progressive Web App (PWA)…

Enfin, grâce notamment aux plugins offerts par ionic / capacitor, l’application pourra s’intégrer avec la très grande majorité des équipements et services natifs.

Application Web Progressive (PWA)

Plus récemment, les Applications Web Progressives (PWA) sont apparues. Elles ne sont pas converties en applications natives mais profitent des nouvelles fonctionnalités des navigateurs web qui offrent désormais des passerelles avec les équipements et services de l’équipement. Au final, ce sont des applications Web qui se comportent comme des applications mobiles, elles sont donc plus engageantes que les applications web classiques et apparaissent totalement intégrées.

Pour résumer voici quelques caractéristiques des PWA (liste non exhaustive) : 

  • travailler offline (stocker de l’information et effectuer des traitements)
  • accessibles via les raccourcis et bibliothèques d’applications
  • apparaître totalement headless (sans interface graphique du navigateur) et démarrent avec un splash screen (écran d’accueil) comme toute application native
  • recevoir les notifications serveur (push-notifications)
  • accéder à l’appareil photo, le GPS,.. 

Quelle framework Javascript choisir avec Ionic ?

ionic applications hybrides

Si ionic a privilégié angularjs à son origine, une des forces de ionic aujourd’hui est sa totale indépendance vis à vis du framework web. Son intégration avec le standard Web Components rend les développements agnostiques du framework Web :

Une solution de développement complète

Lorsque cela est possible, Jnesis privilégie les solutions verticales car elles vous offrent un retour sur investissement immédiat.

Avec Ionic nous choisissons là encore l’efficacité grâce notamment à la prise en charge de l’intégration continue de vos applications.

Enfin, grâce à Ionic Studio, les développeurs peuvent également tirer profit d’un l’environnement de développement intégré.

 

Travaillez directement avec le partenaire officiel ionic 

jnesis partenaire ionic officielJnesis est LE partenaire officiel ionic pour la France et la Suisse, avec un gros savoir-faire technique autour du développement ionic et des services associés.

 

N’hésitez pas à nous contacter pour toute demande de développement, formation, coaching ou consulting. Nos équipes de spécialistes ionic se feront un plaisir de vous répondre.

Pour ne rien rater de notre actualité, suivez nous sur les réseaux  linkedin jnesiset

Envie de travailler avec LE partenaire Ionic officiel pour la France et la Suisse?

Après un long processus de qualification (démarré dès 2018) et de formation de nos équipes, nous avons le plaisir d’annoncer que nous sommes à présent LE partenaire Ionic en France et Suisse. Ionic est un des leaders mondiaux des applications mobiles cross-platform (iOS, Android et Windows Mobile).

En tant que partenaire Ionic, nous offrons dès à présent une gamme complète de services :

  • développement sur mesure ou co-développement avec vos équipes de votre application mobile Ionic
  • audit de code
  • architecture de votre projet mobile : hé oui une application mobile ça ne se limite pas à une jolie interface, ça se connecte très souvent au SI de votre entreprise !
  • consulting

Pour ceux qui ne connaissent pas encore Ionic, c’est une solution technique qui permet de développer efficacement une application mobile une seule fois et de la déployer partout. C’est à dire sur les stores Android Google Play Store, iOS App Store et Windows Phone.

Et cela sans nécessiter de réécriture pour une plate-forme ou une autre. C’est le principe du « write once, run anywhere ».

En conclusion, un gain notoire de temps et d’argent, avec tous les avantages d’une application native.

En d’autres termes vous bénéficiez des principaux avantages et possibilités de la plate-forme et du device. Comme par exemple la géolocalisation GPS, l’appareil photo pour scanner un code barre ou un QR-code, l’authentification forte par empreinte ou lecture du visage. Bien entendu, tout cela en fonction des possibilités du device utilisé.

Un projet mobile Ionic?

N’hésitez pas à nous contacter pour partager avec nous vos projets et ambitions mobiles. Notre équipe peut vous accompagner de la structuration de votre idée jusqu’à son déploiement dans les mains de vos utilisateurs.

jnesis partenaire ionic officiel

Retrouvez-nous sur le site officiel partenaire Ionic (le petit point vert sur la France c’est nous!) : https://ionicframework.com/trusted-partners , sur la page dédiée du site Jnesis https://jnesis.com/ionic/ et bien sûr sur les réseaux sociaux (twitter & linkedin)

Comment profiter de Font Awesome 5 dans les applications Ext JS 6 ?

Objectif

Dans cet article nous allons vous montrer comment à Jnesis nous intégrons Font Awesome 5 aux application Ext JS 6.

Qu’est ce que Font Awesome 5 ?

Font Awesome 5 a été publié en Décembre 2017 et offre de nombreuses évolutions par rapport à la version 4. Pour n’en citer que quelques unes :

  • De nouvelles icônes
  • 4 jeux de caractères : solid (fas), regular (far), light (fal) et brand (fab) au lieu d’un seul (fa)
  • Toujours une version GPL mais aussi une version PRO payante avec les icônes « light » (fal) et parfois les icônes regular (far)
  • Toujours la possibilité de contrôler le style des caractères avec CSS mais aussi maintenant avec SVG

Comment Ext JS intègre t-il Font Awesome ?

Le thème utilisé a son importance. Il peut s’agir d’un thème utilisant de façon native le package Font Awesome intégré à Ext JS (packages/font-awesome) comme c’est le cas du thème par défaut Triton, cf theme-triton/package.json :

"requires": [
        "font-awesome",
        "font-ext"
],

Il peut aussi au contraire s’agir d’un thème où Font Awesome est optionnel comme le thème Neptune. Dans ce cas le requires se fait dans app.json :

"requires": [
        "font-awesome"
],

Le package Ext JS font-awesome utilise Font Awesome 4.7, il va donc falloir adapter nos applications pour utiliser Font Awesome 5.

Pour cet article, notre application de test consistera en une application basique nommée MyApp générée via un simple :

sencha generate app

Il s’agira d’une application universelle (universal) sur la base du thème Ext JS 6 par défaut : triton.

Elle va comprendre l’icône fa-user de Font Awesome 4.7 et l’icône fa-glasses apportée par Font Awesome 5.

Nous utiliserons l’icône fa-user dans ses 4 versions, la version Font Awesome 4 et les 3 versions Font Awesome 5 : solid, regular et light.

Lorsque l’on utilise uniquement Font Awesome 4.7, voilà ce que l’on obtient :

On remarque que les préfixes fas, far et fal sont « ignorés » par Font Awesome 4.7 et que fa-glasses est inconnu.

Passer à Font Awesome 5 – Solution rapide

Téléchargez le fichier font-awesome-531.zip ici

Dézippez l’ensemble dans un répertoire packages/local/font-awesome-531 au niveau de votre application ou de votre workspace.

Modifiez le fichier app.json de votre application pour utiliser font-awesome-531 au lieu de font-awesome.

"requires": [
        "font-awesome-531"
],

Rebuildez, et voilà le résultat !

Avec le thème Triton, la solution permet toujours d’utiliser les icônes de Font Awesome 4.

Le caractère fal fa-user (PRO) sera inconnu mais c’est le caractère du jeu Font Awesome 4 qui va être utilisé.

Attention tout de même, si l’on avait utilisé le thème Neptune, la solution ne permettrait plus d’utiliser les icônes de Font Awesome 4.

Le caractère fal fa-user (PRO) sera inconnu et rien ne va le remplacer.

Version payante (PRO) de Font Awesome 5

Sans l’avoir nous même essayée, la procédure pour intégrer également les icônes PRO devrait être très similaire. Il suffirait vraisemblablement d’ajouter les fichiers complémentaires au répertoire resources/font (EOT, TTF, WOFF, SVG et WOFF2). Voir la solution détaillée en bas de page.

Notes et limitations

  • N’utilisez plus le préfixe de police x-fa
  • Seul le thème Triton vous permettra encore d’utiliser également les icônes Font Awesome 4
  • Les glyphes Font Awesome 5.3.1 devront utilisés les familles de Font suivantes :
    • ‘Font Awesome Free’
    • ‘Font Awesome Brands’
    • [Probablement quelque chose comme ‘Font Awesome Pro’] pour les icônes de la version payante

Exemple :

{
    title: 'glyph alipay xf642@\'Font Awesome 5 Brands\'',
    glyph:'xf642@\'Font Awesome 5 Brands\'',
    bind: {
        html: '{loremIpsum}'
    }
}

Que contient notre package?

Si vous ne souhaitez pas utiliser le package que nous avons conçu parce que :

  • vous voulez essayer par vous-même
  • ou simplement comprendre en détail comment notre solution fonctionne

voici la procédure à suivre en détails…

La procédure consiste à ajouter Font Awesome 5.3.1 au workspace ou à l’application sous forme d’un nouveau package que nous l’appellerons font-awesome-531.

Ce nouveau package vient REMPLACER la référence à l’ancien package nommé font-awesome. Pour autant, dans le cas du thème triton, nous ferons en sorte que notre nouveau package intègre les version 5.3.1 ET 4.7, les caractères des 2 versions resteront utilisables pour le thème triton.

  • Selon que votre application fasse partie d’un workspace ou non, générez le package font-awesome-531 au niveau du workspace OU de votre application
sencha generate package font-awesome-531
  • Copiez le fichier ext/packages/font-awesome/sass/etc/all.scss vers font-awesome-531/sass/etc (il s’agira normalement plutôt de remplacer un fichier vide)
  • Copiez le fichier ext/packages/font-awesome/sass/src/all.scss vers font-awesome-531/sass/src
  • Créez un répertoire fonts dans packages/local/font-awesome-531/resources
  • Copiez les fichiers ext/packages/font-awesome/ressources/fonts/ vers font-awesome-531/resources/fonts pour également ajouter les icônes Font Awesome 4 dans votre nouveau package.
  • Téléchargez Font Awesome 5.3.1 ici
  • Copiez tous les fichiers depuis fontawesome-free-5.3.1-web/webfonts vers packages/local/font-awesome-531/resources/fonts (EOT, TTF, WOFF, SVG et WOFF2)
  • Copier les fichiers sass depuis fontawesome-free-5.3.1-web/scss vers font-awesome-531/sass/etc
  • Modifiez le fichier font-awesome-531/sass/src/all.scss comme suit :
// All rule-generating imports go here vs in etc/all.scss so that they will
// cascade after the framework rules.  This ensures that where the framework provides
// a default icon, but also provides an iconCls to override it (for example tree icons)
// the fa rules will override the framework ones (assuming specificity of fa rules is
// the same or greater than the framework rules)
@import "../etc/regular.scss";
@import "../etc/solid.scss";
@import "../etc/brands.scss";
@import "../etc/_variables";
@import "../etc/_core.scss";
@import "../etc/_larger.scss";
@import "../etc/_fixed-width.scss";
@import "../etc/_list.scss";
@import "../etc/_bordered-pulled.scss";
@import "../etc/_animated.scss";
@import "../etc/_rotated-flipped.scss";
@import "../etc/_stacked.scss";
@import "../etc/_icons.scss";
 
// The "x-fa" class should be used in Ext JS applications instead
// of "fa".  The "fa" class sets some properties that may collide
// with theme properties, whereas "x-fa" sets only the font-family.
.#{$prefix}fa:before {
    font-family: 'FontAwesome' !important;
}
 
.far {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 400;
}
.fas {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
}
.fab {
    font-family: 'Font Awesome 5 Brands' !important;
}
//Surcharge de fa-content
@function fa-content($fa-var) {
  @return "#{ $fa-var }";
}
  • Modifiez le fichier package.json du nouveau package comme suit en replaçant le bloc « sass » par ce qui suit (ceci ajoute également le bloc « resources » pour que font-awesome-531 soit ajouté au ressource du build) :

"sass" : {
    "namespace": "FontAwesome531",
    "etc": [
        "${package.dir}/sass/etc/all.scss"
     ],
    "var": [
        "${package.dir}/sass/var"
    ],
    "src": [
        "${package.dir}/sass/src",
        "${package.dir}/sass/src/all.scss"
    ]
},
"resources": [{
    "path": "${package.dir}/resources",
    "output": "shared"
}]
  • Il ne restera plus qu’à modifier le fichier app.json de votre application pour utiliser font-awesome-531 au lieu de font-awesome:
"requires": [
        "font-awesome-531"
],

Netbeans que se passe t-il ?

Depuis quelques mois, l’environnement de développement Netbeans de Oracle dispose d’une branche Open Source gérée par la communauté Apache.

On a donc maintenant le choix entre deux « natures » de Netbeans mais aucune des deux ne semble être en mesure de suivre le rythme des évolutions de la machine virtuelle.
En effet, la version d’Oracle semble figée à la version 8 de Java alors que la version Open Source peine à passer à la version 10 de Java.
Alors faut il passer à un autre environnement de développement ?

Jean-Philippe Ehret, fondateur de Jnesis vous en parle plus en détails dans la vidéo qui suit. Il vous parlera également des conséquences de cette version sur les cours Java en ligne délivrés par Jnesis.

Java 11 rétrocompatibilité non garantie !

A chaque sortie d’une nouvelle version de Java, notamment de Java 11, se pose la question de la rétrocompatibilité. Puisque certaines API du langage Java n’ont pas été maintenues dans Java 11, il vous faudra alors procéder à une phase de migration de votre application. Ci-dessous la liste des fonctionnalités / packages qui n’ont pas été mainenus :

  • Java FX
  • java.activation
  • java.corba
  • java.transaction
  • java.xml.bind
  • java.xml.ws
  • java.xml.ws.annotation

Par conséquent, si votre application utilise une de ces fonctionnalité, cette phase de migration sera nécessaire.

Jean-Philippe Ehret, fondateur de Jnesis vous en parle plus en détails dans la vidéo qui suit. Il vous montrera quelques symptômes du problème et pour exemple comment migrer une application utilisant JAXB (java.xml.bind).