001-Dreamweaver-001-bando.png

This article is also published in french Dreamweaver continue son évolution au sein du Creative Cloud

 

Dreamweaver CC 2017.1

001-Dreamweaver-001.png

 

This new intermediate update, Dreamweaver CC 2017.1, could almost pass unnoticed, but to look more closely, it is strong in symbols and perspectives.

 

There are two new features that may not appear as being new, because they seem to have always been around and are an integral part of Dreamweaver.

 

On one hand the Find and Replace module, which was present since the earlier age of Dreamweaver, but which has been revamped since the integration of the new Dark UI interface, and now appears to be polished and complete.

 

An on the other hand, the full support of PHP 7.1, is now a common business and we will therefore be able to benefit from the help and information tools as it should be, depending if we use 5.6 or 7.1, and as a per site basis.

 

Let's also take a look back at some older features that stabilize but that still do not provide WYSIWYG support, but which remain however modifiable, such as coloring code.

 

Usual Precautions Before Updating

001-Dreamweaver-002.png

 

Although intermediate updates are fully integrated when using cloud-managed application flows, it is preferable to use best practices such as ensuring a final synchronization to the platform before launching the upgrade process.

 

This will ensure the backup of a number of items, including application preferences, site descriptions, code fragments, keyboard shortcuts, and workspaces.

 

When launching the application, it is therefore necessary to choose Retrieve synchronization information in order to reconfigure the application, as in the previous version.

 

Bug fixes

 

As with every improvement, whether intermediate or major, a large number of bugs have been corrected, and certain functionalities are improved or polished.

 

This concern both usability, ergonomics and integration within Dreamweaver’s IDE, particularly at the level of the Find and Replace tool.

 

001-Dreamweaver-003.png

Anyway, if you find a bug that has not been taken into account, or if you want an improvement of any kind, do not hesitate to put this information back to the development teams. Go to one of the following URLs: https://dreamweaver.uservoice.com/ and more information on https://forums.adobe.com/thread/878528

 

Coloring the code editor

 

This feature appeared with the previous version, but many expect that this intermediate version allows an ease in the choice of colors used by the editor, as it is true that the coloring of the code can become quickly frustrating.

 

001-Dreamweaver-004.png

By default, Dreamweaver offers two modes, Dark and Light, but on this update two new ones join the band, Raven Dark and Solarized Light, respectively on a Dark and Light basis. And then that's all ... but hey, we can still go further, and in different ways.

 

Find and add themes

 

To find a theme, nothing is simpler. Let's not forget that Dreamweaver uses Brackets as a code editor, and therefore it’s enough to approach a theme dedicated to Brackets directly from the ad hoc github, http://brackets-themes.github.io/.

 

001-Dreamweaver-005.png

Once there, make your choice from the visual catalog, for example NewtonLight-master, and by clicking on the link you will be redirected this time to the github of the appropriate theme.

 

Using the big Green button, you will have the choice to Clone or Download. Simply select Download ZIP, then unpack the download folder and place it in the right folder depending on your system.

 

Windows

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

 

Mac OSx

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

 

Now by going to Dreamweaver Preferences in the Interface category, you will access this new Code Theme and you’ll can select to choose it.

 

Create your own theme

 

For the more adventurous among you, it is possible to create a theme based on a blank sheet ... why not? But, be aware that it is sometimes easier, and often faster, to start from a base close to the final expectations, and, adapt it.

 

Anyway, to create a theme it will be necessary to define a style sheet written in .less (or .css) and a json file that will set up the various necessary parameters. You will find all the information you need on the github Creating Themes.

 

Regarding the package.json file, three properties are particularly important for theme property: file, dark and 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"
      }
 }

 

The first defines the style file containing the set of properties, the second defines whether it is a dark or clear theme, and this is very important for all complementary palettes, (auto completion, tooltips, Help, etc ...) so that they use a color matching the theme and the last property addModeClass  (not present in the above example) is very useful if you use a coloring specific to each language like JavaScript, HTML, CSS ...

 

So, go to the Preferences, Interface Category and click + to add a new code theme, Dreamweaver will propose creating for you the base of these two necessary files, namely the file_theme.less and the package.json.

 

001-Dreamweaver-006.png

We must give a name to this new theme and specify on which theme it is based. This greatly facilitates the creation process, because we will then only have to modify the value of some properties.

 

Edit a theme

 

Once the theme is in place, it is possible to intervene and modify or refine a particular value. Again, Adobe has published a well-detailed nomenclature on its online help Customize code coloring and more specifically in the chapter about selectors.

 

Always from the preferences dialog you can edit the selected theme by pressing the pencil icon.

 

Find and Replace

 

It is true that one of the forces of Dreamweaver has always been its internal search tool, but since the adoption of the Dark UI interface, specific to the tools of the Creative Cloud, some compromises and remakes have been necessary.

 

The search tool, although extremely useful and functional, also had to mature and evolve, at least ergonomically compared to other IDEs, and code editors available on the market.

 

And so, no fewer than three new features that have come to enrich the offering in this sense;

 

  • A new menu completely autonomous on the search and the replacement,
  • Document Search Bar docked at the bottom of the document which acts as quick search
  • And a dialog, not dockable, proposing two possibilities between an advanced search and a search within the site files.

 

The Search menu

 

This menu, which has become independent and autonomous, is not really new there are a few builds of this since it appeared, but it is good to emphasize its presence because it makes the user interface even closer to what the “We expect from a code editor”, and especially a self-respecting IDE.

 

001-Dreamweaver-007.png

 

This menu offers a set of possibilities classically desired in any type of work of repossession of a site, or maintenance of a site with large volume.

 

As usual the keyboard shortcuts are juxtaposed to each action, and each action being sufficiently evocative, it is not necessary to dwell on their various possibilities.

 

"Find Previous" functionality was on the wishlist of majority of users. People wanted to have the capability to go backwards in the search results by looking for the previous element. This is now available, and whatever the mode of search is set to, you can move in both directions!.

 

Quick Find (Ctrl-F or Cmd-F, and, Ctrl-H or Cmd-H )

 

One aspect of this feature, which may surprise when it first appears, is that this type of search cannot be performed if no document is opened, and therefore, instead of any dialog, you’ll gets an alert message informing us.

 

001-Dreamweaver-008.png

 

You can also search inside a text block or within a specified code snippet. If the content portion is selected, search will be limited to that selection or the entire document. Finally, whether it is code or text block, the search may include [any tag], or any defined tag set.

 

Using the filter allows you to combine various classic parameters such as Case-sensitive, Use Regular Expressions, Match Whole Word, Ignore White Spaces, and focus the search only on the selected text.

 

The advanced search, and / or, search in files (Ctrl-Shift-F, ou, Cmd-Shift-F, et, Ctrl-Shift-H, ou, Cmd-Shift-H)

 

Having been one of the forces of Dreamweaver, this dialog is now declined in two tabs, elementary and advanced. These two search modes allow you to search and sort items contained in specific tags by specifying, or not, certain attributes. It is possible to nest as many specificities as necessary.

 

001-Dreamweaver-009.png

001-Dreamweaver-010.png

 

The actions are not limited to replacing a string, but it is possible to modify or remove the framing tag, add or remove attributes, modify their values, in short, ... a great tool in our daily developer and web integrator workflows.

 

To the right of the search buttons you will find an "Exceptions" checkbox. If this option is checked, and if you choose to "replace all", the result panel will then list the matches along with a check box next to it.

 

001-Dreamweaver-008-2.png

 

You will also find, in this panel, a menu to navigate among all these occurrences with the capability of unchecking matches that you did not want. The "replace" button will then only change the occurrences that you had selected above;

 

Save and Load Queries

 

In old versions of Dreamweaver, it was possible to load or save requests. Tasks very practical since repetitive when taking over an old site, or setting up a serious and advanced maintenance.

 

Do not worry, to reactivate these missing features by default, just make a simple change at the registry level. From the taskbar, launch regedit.exe and select in the tree view

 

HKEY_CURRENT_USER \ SOFTWARE \ Adobe \ Dreamweaver CC 2017 \ Advanced Find And Replace

 

then create a new ShowHiddenOptions string and set it to true.

 

001-Dreamweaver-014.png

No need to restart Dreamweaver, as soon as you invoke the search in the files both options will appear at the top of the dialog. This change shouldn’t be considered for all minor Dreamweaver updates.

 

Integration and PHP 7.1 support

 

PHP is clear, http://php.net/supported-versions.php, only the latest version of the 5 range, 5.6, will be supported until the end of 2018, but whatever, the major players in CMS, and other applications developed in PHP are moving more and more towards the use of the range 7 and in this case version 7.1.

 

Dreamweaver therefore had to endure the use of these two versions, which are still likely to cohabit over the next two years.

 

Global management within the application or site definitions

 

A new category has appeared in Preferences, PHP. At the moment, only one drop-down menu is proposed and allows to define the version of the PHP used, that is to say between 5.6 and 7.1, at the application level, that is to say when no site is defined.

 

001-Dreamweaver-011.png

Similarly, in the definition of the sites, appeared the same category, PHP, in the part reserved for the Advanced Parameters.

001-Dreamweaver-012.png

Hint Code and other writing aids

 

By having previously specified the version of PHP used, this allows to obtain the aids, and hints, to the writing and other relative information adapted to the version of the language that is used.

 

001-Dreamweaver-013.png

An important note to take into account is that, henceforth, if the PHP code does not contain closing tags ?> an error will be detected and displayed. It is therefore important to think about changing your habits if you did not systematically use this closure.