SAP UI5 – Data binding without XML view for the sap.m.Table component

Here I’ll describe the best method I’ve found to bind data to the sap.m.Table component without using XML view, so only with JavaScript, programmatically.

Link to the sap.m.Table component in the SAP UI5 documentation.

First, you need to declare your dataset:

var oData = {
    'History': {
        'Entries': [
            {
                'Type': 'nonFolder',
                'Name': 'LCMCompare',
                'Time': 'Jan 9, 2017 2:01 PM',
                'modifiedCount': '1'
            },
            {
                'Type': 'nonFolder',
                'Name': 'Another one',
                'Time': 'Jan 2, 2017 5:55 PM',
                'modifiedCount': '9'
            },
            {
                'Type': 'nonFolder',
                'Name': 'First comparison',
                'Time': 'Jan 9, 2017 4:41 PM',
                'modifiedCount': '4'
            }
        ]
    }
};

After that, you need to declare your columns definitions:

var oTable = new UI5Table({
    headerText: 'Compared:',
    columns: [
        new UI5Column({
            header: new UI5Label({
                text: 'Type'
            })
        }),
        new UI5Column({
            header: new UI5Label({
                text: 'Comparison Name'
            })
        }),
        new UI5Column({
            header: new UI5Label({
                text: 'Date/Time'
            })
        }),
        new UI5Column({
            header: new UI5Label({
                text: 'Difference'
            })
        })
    ]
});

Now, it’s time to declare the table and to define the binding between the data and the columns: (in my case, I’m naming history as the root as my datasource)

var oModelTable = new sap.m.JSONModel(oData);
oTable.setModel(oModelTable, 'history');
var oTemplate = new UI5ColumnListItem({
    cells : [
        new UI5Text({
            text : '{history>Type}'
        }),
        new UI5Text({
            text : '{history>Name}'
        }),
        new UI5Text({
            text : '{history>Time}'
        }),
        new UI5Text({
            text : '{history>modifiedCount}'
        })
    ]
});
oTable.bindItems('history>/History/Entries', oTemplate);

The last line in this example will bind your data following the root > and the path to the array to iterate through. Your table will be rendered with the data in your oData object. I would suggest to attach this binding with an object in your store, so changes will appear automatically.

Preview of the result: sap-m-table_ui5_result

Envoyer des mails en javascript avec nodemailer

Pour un projet perso qui tourne sur un stack MEAN (Mongo, Express, Angular et NodeJS), j’ai eu besoin de notifier des utilisateurs en leur envoyant un mail.

J’ai donc trouvé plusieurs librairies qui font le boulot, mais j’ai beaucoup accroché avec nodemailer qui pour moi est la plus propre et simple d’utilisation. Et d’ailleurs, avec plus de 5000 stars et 70 contributeurs sur Github ça va, c’est assez stable 🙂

Installation

Ajout de nodemailer au projet (le —save pour ajouter a dépendance au package.json)

npm install nodemailer —save 

Autorisation Gmail

Pour Gmail, et surement les autres aussi, il faut configurer son compte en « Bas niveau de sécurité » pour autoriser une application externe  à lire/envoyer des emails.

(pour ceux qui ne souhaitent pas baisser le niveau de sécurité, il existe d’autres alternatives)

Baisser le niveau de sécurité : https://www.google.com/settings/security/lesssecureapps

Envoyer un email

Au début du fichier, au moment des import, on ajoute une dépendance à nodemailer :

var nodemailer = require('nodemailer');

On crée ensuite la variable « transporter » qui contient les options de connexion et de transport pour l’envoi des emails (qu’on réutilisera à chaque envoi de mail)

var transporter = nodemailer.createTransport('smtps://user%40gmail.com:password@smtp.gmail.com');

Ensuite on construit l’objet JSON « mailOptions » qui contient les différents champs du mail (les symboles unicodes sont supportés!).

var mailOptions = {
  from: ‘Joey Bronner" <mon@email.com>',
  to: ‘yourfriend@email.com, yourotherfriend@email.com’,
  subject: ‘Bonjour',
  text: 'Hello world',
  html: '<b>Hello world</b>'
};

Quatre paramètres sont obligatoires et d’autres sont facultatifs:

  • from
  • to
  • subject
  • text / html

Dernière étape, l’envoi du mail!

transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  }
  console.log(‘Message sent: ' + info.response);
});

Pleins d’options (pièces jointes, templates etc…) sont disponibles, donc si vous avez besoin d’envoyer des mails en JS, pensez à nodemailer!

Plus d’informations sur le repository Github : https://github.com/nodemailer/nodemailer

DevDocs pour regrouper et unifier toutes les dev docs de vos APIs et langages favoris

DEVDOC

Pour les utilisateurs OS X, il existe Dash. Pour ceux qui sont sous Windows/Linux il existe l’équivalent Zeal et pour ceux qui ne veulent pas installer de logiciel lourd pour la doc, il existe DevDocs que je présente dans cet article.

En quelques mots, DevDocs est un moteur de recherche pour documentation technique. Il référence plus de 70 APIs donc pas d’inquiétude, que vous soyez développeur web, mobile, backend etc… vous trouverez votre bonheur 🙂

  • AngularJS
  • Bower
  • React
  • Ruby
  • Javascript
  • Python
  • D3
  • PHP
  • C / C++
  • etc…

Les avantages

  • Interface unifiée
  • Outil de recherche intelligent
  • Rapide
  • Plus de 70 APIs/frameworks/libs disponibles
  • Mode Light/Dark

L’inconvénient

Je ne vois qu’un seul et il concerne le ‘mode offline’ puisque les documentations sauvées sont persistées dans le cache du navigateur.

Quand on développe on aime bien vider le cache pour tester un rendu sur une base propre… et ça peut donc poser problème. Si on veut utiliser ces docs hors-ligne il faut penser à les re-télécharger au cas où le cache aurait été cleané avant.

Pour info, c’est un outil fait par Thibaut Courouble, son blog : http://thibaut.me/

Pour résumer, DevDocs c’est simple, c’est propre et c’est super utile pour mes trajets en train où le WiFi n’est malheureusement pas présent.

(Merci Justin pour les liens)

Javascript : Savoir si deux élements du DOM se chevauchent ou se superposent

Les méthodes isOverlapping() et isInside() ont déjà le premier avantage d’être en pur javascript. Leurs fonctionnalités sont donc de déterminer si deux éléments se chevauchent ou se superposent. C’est très pratique lorsque qu’on veut gérer la superposition des labels pour masquer ceux qui sont partiellement visibles par exemple.

getBoundingClientRect

La méthode getBoundingClientRect() est appliquée sur chacun des éléments du DOM afin de déterminer leurs propriétés (en pixels) :

  • left
  • top
  • right
  • bottom

Ces valeurs sont propres au viewport (zone de visualisation) du client sur lequel cette fonction est exécutée.

isOverlapping

function isOverlapping (elem1, elem2) {
    var rect1 = elem1.getBoundingClientRect();
    var rect2 = elem2.getBoundingClientRect();
    
    return !(rect1.right < rect2.left ||
        rect1.left > rect2.right ||
        rect1.bottom < rect2.top ||
        rect1.top > rect2.bottom);
}

La fonction isOverlapping() renvoie donc true si elem1 et elem2 se chevauchent.

isInside

function isOverlapping (elem1, elem2) {
    var rect1 = elem1.getBoundingClientRect();
    var rect2 = elem2.getBoundingClientRect();

    return (
        ((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
        ((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
        ((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
        ((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
    );
}

La fonction isInside() renvoie donc true si elem1 est entièrement à l’intérieur de elem2 (ou inversement…).

Debugger Node.js avec node-inspector (Chrome Dev Tools)

La première solution pour débugger la partie serveur en Node est de créer des traces via des console.log, console.info, console.error etc… mais ce n’est pas le but de cet article puisqu’il existe une autre manière beaucoup plus efficace de debugger ce code là grace au plugin node-inspector (Chrome Dev Tools).

Au cas où, je mets quand même les différentes options pour ceux qui souhaitent débugger dans la console :

  • console.log([data], […]);
  • console.info([data], […]);
  • console.error([data], […]);
  • console.warn([data], […]);
  • console.dir(obj);
  • console.time(label);
  • console.timeEnd(label);
  • console.trace(label);
  • console.assert(expression, [message]);

Utiliser son browser

Le gros avantage de debugger dans le Chrome Dev Tools c’est de faire du pas à pas et de pouvoir examiner les variables, objets etc à la volée! Pour en profiter, il suffit d’installer le package node-inspector (à propos de package).

npm install -g node-inspector

Au moment du démarrage du serveur, il faudra simplement rajouter le flag –debug

node --debug server.js

Ou pour mettre un break sur le serveur dès son démarrage…

node --debug-brk server.js

Le serveur a été démarré en mode debug, dernière étape, il faut maintenant lancer node-inspector qui va démarrer sur un autre port : 8080

node-inspector &amp;

nodeinspector_command_line

Votre debugger est prêt à l’URL : http://127.0.0.1:8080/debug?port=5858

node_inspector_debugger_tool

Et voilà! Vous pouvez debugger côté serveur like a boss.