AEM Sightly Brackets Extension

AEM Sightly Brackets Extension
AEM Sightly Brackets Extension
Overview / Development Tools /
OVERVIEW
Sightly is the new HTML templating system introduced with Adobe Experience Manager 6.0. The AEM
Sightly Brackets Extension provides a smoother development workflow for writing AEM components, offering
several features like:
• Sightly syntax-highlighting;
• code-completion for Sightly expressions, data-sly-* block elements and Use-API Java objects;
• bidirectional synchronisation.
REQUIREMENTS
AEM Sightly Brackets Extension supports Brackets version greater or equal than sprint 38. You can
download a new Brackets version from brackets.io.
HOW TO INSTALL THE AEM SIGHTLY BRACKETS EXTENSION
To install the extension proceed as follows:
1.
2.
Open Brackets. In menu File, select Extension Manager...
Enter sightly in the search bar and look for AEM Sightly Brackets Extension.
3.
4.
Click Install.
Restart Brackets when asked.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 1
Created on 2015-01-07
AEM Sightly Brackets Extension
WORKING WITH THE AEM SIGHTLY BRACKETS EXTENSION
The content-package project
After the extension has been installed, you can start developing AEM components by either opening a
content-package folder from your file system with Brackets or by creating the structure for one from within
the editor.
The project has to contain at least:
1. a jcr_root folder (e.g. myproject/jcr_root)
2. a filter.xml file (e.g. myproject/META-INF/vault/filter.xml); for more details about the structure of the
filter.xml file please see the Workspace Filter definition.
Synchronisation Settings
In order to synchronise your content to and from an AEM server you need to define your Synchronisation
Settings. This can be done by going to Sightly > Project Settings... The menu entry can also be accessed
through shortcuts: #-Shift-P on a Mac or Ctrl-Shift-P on a PC.
The Synchronisation Settings allow you to define:
1. the server URL (e.g. http://localhost:4502)
2. the username used for synchronising content
3. the user's password
The settings will be saved in your project's root folder, in the .brackets.json file, e.g.
myproject/.brackets.json.
Synchronising Content
The AEM Sighly Brackets Extension provides two types of content synchronisation.
1.
Automated synchronisation for HTML, JavaScript, CSS and .content.xml files; provided that
the remote path of the files you are editing is allowed to be synchronised by the filtering rules defined
in filter.xml, these files will be synced to the AEM server on-save; for .content.xml files their parent
folders will be synchronised.
NOTE
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 2
Created on 2015-01-07
AEM Sightly Brackets Extension
2.
Brackets has a list of predefined file extensions for the languages defined above:
• HTML: html, htm, shtm, shtml, xhtml, cfm, cfml, cfc, dhtml, xht, tpl, twig, hbs,
handlebars, kit, jsp, aspx, ascx, asp, master, cshtml, vbhtml
• JavaScript: js, jsx, js.erb, jsm, _js
• CSS: css, css.erb
Therefore any documents matching Brackets' extension list for the above languages
will get synchronised automatically on-save.
On-demand bidirectional synchronisation
•
through the Project Explorer contextual menu entries - Export to Server or Import from Server - if
the selected entry belongs to the jcr_root folder
NOTE
If the selected entry is a folder only the folder's content that's marked as included by the
filtering rules from filter.xml will be synchronised.
NOTE
If the selected entry is outside of the jcr_root folder the Export to Server and Import
from Server contextual menu entries are disabled.
•
full content-package synchronisation through the Sightly top-level menu, by selecting either:
• Export Content Package - #-Shift-E on a Mac, Ctrl-Shift-E on a PC
• Import Content Package - #-Shift-I on a Mac, Ctrl-Shift-I on a PC
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 3
Created on 2015-01-07
AEM Sightly Brackets Extension
The AEM Sightly Brackets Extension adds a notification icon on the main toolbar, in the bottom right corner
of the Brackets window. After a synchronisation operation is performed the notification icon's colour changes
to indicate the synchronisation status:
• green - all files have been synchronised successfully
• yellow - some of the files were not synchronised successfully
• red - none of the selected files were synchronised
• blue - a sync operation is in progress
Hovering with your mouse cursor above the notification icon will make a tooltip appear with a summary of the
last synchronisation operation. Clicking on the notification icon will open the Synchronisation Status report
dialog, offerring more detailed information about each file from the content tree you synchronised.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 4
Created on 2015-01-07
AEM Sightly Brackets Extension
The AEM Sightly Brackets extension also supports .vltignore files for excluding content from synchronising to
and from the repository.
KNOWN ISSUES OR LIMITATIONS
•
•
•
Currently the AEM Sightly Brackets Extension does not support working with embedded content
packages.
filter-vlt.xml files are not yet taken into consideration.
When synchronising a full content package only the filter.xml file from the META-INF/vault folder is
used as the extension builds ad-hoc content packages that get installed and removed from your AEM
instance; therefore your content package's definition is not altered but its content is updated.
MORE INFORMATION
The AEM Sightly Brackets Extension is an open-source project, hosted on GitHub by the Adobe Marketing
Cloud organisation, under the Apache License, version 2.0:
• Code repository: https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
• Apache License, version 2.0: http://www.apache.org/licenses/LICENSE-2.0.html
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 5
Created on 2015-01-07

Download Report