Dreamweaver continue son évolution au sein du Creative Cloud

Cette nouvelle mise à jour intermédiaire pourrait presque passer quasi inaperçu, mais à y regarder de plus près, elle est forte de symboles et de perspectives.

Il existe deux nouvelles fonctionnalités qui peuvent ne pas apparaître comme nouvelles, tant elles semblent toujours avoir été présentes et font partie intégrante de Dreamweaver.

D’une part, le module Rechercher et remplacer, présent depuis de multiples versions antérieures de Dreamweaver, mais qui a été réorganisé depuis l’intégration de la nouvelle interface UI Dark, et qui maintenant a été affiné et complété.

D’autre part, le support complet de PHP 7.1, qui est largement employé, et, donc maintenant nous serons en mesure de pouvoir bénéficier des divers outils d’aide et d’information comme il se doit, selon que nous utilisons 5.6 ou 7.1. Ce choix peut être défini au niveau du site.

Prenons le temps également de revenir une fonctionnalité plus ancienne qui se stabilise au travers de cette nouvelle version. Bien que ne fournissant toujours pas de support WYSIWYG, la coloration du code reste complètement modifiable et personnalisable.

Précautions habituelles avant la mise à jour

Bien que les mises à jour intermédiaires soient pleinement intégrer aux flux applicatifs géré par un Cloud, il est néanmoins préférable de s’entourer de bonnes pratiques telle que s’assurer d’une dernière synchronisation vers la plateforme avant de lancer le processus de mise à jour.

Ceci permettra de garantir la sauvegarde d’un certain nombre de points, notamment les préférences de l’application, la description des sites, les fragments de code, les raccourcis clavier et les espaces de travail.

Lors du lancement de l’application il faut donc opter pour Récupérer les informations de synchronisation afin de reconfigurer l’application comme l’était la version précédente.

Correction des bogues

Comme à chaque amélioration, qu’elles soient intermédiaires ou majeures, un grand nombre de bogues ont été corrigés, ainsi que certaines fonctionnalités qui sont améliorées soit au niveau de leur ergonomie, ou de leur intégration au sein de l’IDE, nous le verrons notamment au niveau de l’outil de recherche.

Quoiqu’il en soit, si vous trouvez un bogue qui n’ait pas été pris en compte, ou si vous souhaitez une amélioration de quelque nature que ce soit, n’hésitez surtout pas à remonter cette information auprès des équipes de développement, pour cela, allez sur une des URL suivantes: https://dreamweaver.uservoice.com/ ou sur https://forums.adobe.com/thread/878528

La coloration de l’éditeur de code

Cette fonctionnalité est apparue avec la version précédente, mais beaucoup attendaient que cette version intermédiaire permette une facilité quant au choix des couleurs employées par l’éditeur, car il est vrai que la coloration du code peut être rapidement frustrante.

Par défaut Dreamweaver propose deux modes Dark et Light, mais depuis cette mise à jour, deux nouveaux ont rejoint le groupe, Raven Dark et Solarized Light, basés respectivement un thème foncé et clair. Et puis c’est tout… mais bon, il nous est quand même possible d’aller plus loin, et ce de deux manières

Trouver et ajouter des thèmes

Pour trouver un thème, rien de plus simple, car n’oublions pas que Dreamweaver utilise Brackets comme éditeur de code, et donc il suffit de se rapprocher d’un thème dédié à Brackets directement depuis le github ad hoc, http://brackets-themes.github.io/.

Faites votre choix depuis le catalogue visuel, par exemple NewtonLight-master, et en cliquant sur le lien vous allez être redirigé cette fois ci sur le github du thème en question. Depuis le gros bouton vert, Clone ou Download, il vous suffit de sélectionner Download ZIP, de décompresser le dossier télécharger et de le placer dans le dossier

Pour Windows

C:\Users\{votre session}\AppData\Roaming\Adobe\Dreamweaver CC 2017\fr_FR\Configuration\Brackets\extensions\user

Pour Mac OSx

~/Library/Application Support/Adobe/Dreamweaver CC 2017/en_US/Configuration/Brackets/extensions/user/

Maintenant en vous rendant dans les Préférences de Dreamweaver catégorie Interface, vous accéderez à ce nouveau Thème du code.

Créer son propre thème

Pour les plus téméraires, il est possible de créer son thème en partant d’une feuille blanche… pourquoi pas, mais sachez qu’il est parfois plus facile, et souvent plus rapide, de partir d’une base proche de nos attentes et de l’adapter.

Quoiqu’il en soit, pour créer un thème il va falloir définir une feuille de style écrite en .less (ou .css) et un fichier json qui va mettre en place les divers paramètres nécessaires. Vous trouverez toutes les infos nécessaires an vous rendant sur le github Creating Themes.

Concernant le fichier package.json, trois propriétés sont particulièrement importantes à prendre en compte au niveau du thème : file, dark et addModeClass.

{
    "title": "Raven",
    "name": "Raven",
    "description": "Built-in dark theme for Brackets",
    "version": "0.42.0",
    "author": "Miguel Castillo <mahchagnu@gmail.com>",
    "engines": {
        "brackets": ">=0.42.0"
    },
    "theme": {
        "file": "main.less",
        "dark": "true"
    }
}

Dreamweaver vous propose de créer pour vous la base de ces deux fichiers nécessaires, à savoir le fichier_theme.less et le package.json.

Rendez-vous dans les Préférences catégorie Interface et cliquez sur + afin d’ajouter un nouveau thème de code.

Il faut alors donner un nom à ce nouveau thème et précisez sur quel thème il s’appuie. Cela facilite grandement la mise en place.

Modifier un thème

Une fois le thème en place, il est possible d’intervenir et de modifier ou d’affiner telle ou telle valeur, encore faut-il en comprendre le fonctionnement. Là encore Adobe a publié une nomenclature bien détaillée sur son aide en ligne Customize code coloring (Personaliser la couleur du code) et plus précisément dans le chapitre concernant les sélecteurs.

Toujours depuis la boite de dialogue des préférences vous pouvez éditer le thème sélectionné en pressant sur l’icône du crayon.

Rechercher Remplacer

Il est vrai qu’une des forces de Dreamweaver a toujours été son outil de recherche interne, mais depuis l’adoption de l’interface DrakUI, propre aux outils du Creative Cloud, certains compromis et refontes ont été nécessaires.

L’outil de recherche, bien qu’extrêmement utile et fonctionnel, se devait également de mûrir et d’évoluer, du moins ergonomiquement face aux autres IDE, et, éditeurs de code disponibles sur le marché.

Et c’est donc, pas moins de trois nouvelles fonctionnalités qui sont venus enrichir l’offre en ce sens ;

• un nouveau menu complétement autonome sur la recherche et le remplacement,
• une barre de recherche bloquée en bas du document qui fait office de recherche rapide
• et une boite de dialogue, non dockable, aux possibilités hybrides faisant le grand écart entre une recherche avancée et une recherche au sein des fichiers du site.

Le menu Rechercher

Ce menu propose un ensemble de possibilités classiquement souhaité dans tout type de travail de reprise d’un site, ou de la maintenance d’un site à large volume.

Comme à l’habitude les raccourcis clavier sont juxtaposé à chaque actions, et chaque action étant suffisamment évocatrices, il n’est pas nécessaire de s’attarder sur leurs diverses possibilités.

Depuis quelques temps déjà un grand nombre d’utilisateur souhaitait avoir la possibilité de remonter dans l’arborescence en recherchant l’élément précédent. C’est chose faites, et quel que soit le mode de recherche, celle-ci peut se faire dans les deux sens.

La recherche Rapide (Ctrl-F ou Cmd-F, et, Ctrl-H ou Cmd-H )

Une particularité de cette fonctionnalité, qui peut surprendre lors de sa première apparition, est que ce type de recherche ne peut s’effectuer si aucun document n’est ouvert, et donc, en lieu et place d’une quelconque boite de dialogue, on obtient un message d’alerte nous en informant.

Cette palette couvre aussi bien la recherche dans le texte que dans le code. Si une portion de contenu est sélectionnée, cette recherche pourra ne porter que sur cet ensemble, ou sur l’intégralité du document. Enfin, qu’il s’agisse de code ou de texte, la recherche pourra inclure [toute balise], ou, uniquement sur le jeu de balise qui sera définie.

L’utilisation du filtre permet de pouvoir cumuler divers paramètres classiques tels que Respecter la casse, Utiliser des expressions régulières, Correspondre au mot entier, Ignorer les espaces blancs, et, de ne focaliser la recherche que sur le texte sélectionné.

La recherche avancée, et/ou, recherche dans les fichiers (Ctrl-Shift-F ou Cmd-Shift-F)

Ayant fait une des forces de Dreamweaver, cette boite de dialogue se décline en deux onglets, élémentaire et avancée. Ces deux modes de recherche permettent d’aller rechercher et trier des éléments contenus dans des balises spécifiques en précisant, ou non, certains attributs. Il est possible d’imbriquer autant de spécificités que nécessaires.

Les actions ne se limitent pas à remplacer une chaine de caractères, bien au contraire, il est possible de modifier, voir retirer la balise encadrante, ajouter ou retirer des attributs, modifier leur valeurs, bref… un grand outil dans notre quotidien de développeur intégrateur web.

À la droite des boutons de recherche vous trouverez une case à cocher « Exceptions ». Si cette case est cochée, et si vous optez pour « remplacer tout », le panneau des résultats listera alors chacune des correspondances précédées d’une case de sélection cochée par défaut.

Vous trouverez également, dans ce panneau, un menu pour naviguer parmi toutes ces occurrences avec la possibilité de décocher ce qui ne correspondrait pas à votre choix. Le bouton « remplacer » permet alors de n’affecter que les occurrences qui seront restées sélectionnées.

Enregistrer et charger des requêtes

Dans l’ancienne mouture il était possible de charger ou d’enregistrer des requêtes. Tâches bien pratiques puisque répétitives lors de la reprise d’un vieux site, ou de la mise en place d’une maintenance sérieuse et avancée.

Ne vous inquiétez pas, pour réactiver ces fonctionnalités manquantes par défaut, il suffit d’un peu de gymnastique coté base de registre. Depuis la barre des tâches, lancer regedit.exe et sélectionnez dans l’arborescence

HKEY_CURRENT_USER\SOFTWARE\Adobe\Dreamweaver CC Next\Advanced Find And Replace, ensuite créez une nouvelle chaîne ShowHiddenOptions et lui donner la valeur true. Pas besoin de relancer Dreamweaver, dès que vous invoquerez la recherche dans les fichiers les deux options apparaîtront dans le haut de la boite de dialogue.

Cette modification devrait être prise en compte pour l’ensemble des mises à jour mineures de Dreamweaver.

Intégration et prise en compte de PHP 7.1

PHP est clair, http://php.net/supported-versions.php, seule la dernière version de la gamme 5, la 5.6, sera supporté jusqu’en fin 2018, mais quoiqu’il en soit les acteurs majeurs en CMS, et autres applications développées en PHP s’orientent de plus en plus vers l’utilisation de la gamme 7 et en l’occurrence la version 7.1.

Dreamweaver se devait donc de supporter lui aussi l’emploi de ces deux versions qui risquent encore de cohabiter ces deux prochaines années.

Gestion globale au sein de l’application ou des définitions de site

Une nouvelle catégorie a fait son apparition dans les Préférences, PHP. Pour l’instant un seul menu déroulant est proposé et permet de définir la version du PHP employé, à savoir entre 5.6 et 7.1, et ce, au niveau applicatif, c’est-à-dire lorsque aucun site n’est défini.

De même, dans la définition des sites, est apparue la même catégorie, PHP, au niveau de la partie réservée aux Paramètres avancés.

Code Hint et autres aides à l’écriture

En ayant spécifié au préalable la version de PHP employée, cela permet d’obtenir les aides à l’écriture et autres informations relatives adaptées à la version du langage qui est employé.

Une note importante à prendre en compte est que dorénavant si le code PHP ne contient pas de balises fermante ?> une erreur sera détectée et affichée. Il est donc important de penser à modifier ses habitudes si vous n’aviez pas systématiquement recours à cette fermeture.