Version 6 of Adobe Experience Manager (AEM 6) is a major release that introduces significant innovations. Sightly is a new template system to be used in place of (or together with) JSP. Along with Sling Models, SIghtly strongly improves the separation between the logic and presentation. The development effort is reduced because a Sightly template is an HTML 5 document, easily maintainable even by front-end developers.
The presentation provides an overview of the basic features of Sightly and introduces the fundamentals of the new development model with the support of tools released release together with AEM 6.
Ask the AEM Community Expert : May Session. This session will cover in depth sling concepts such as Sling Selectors, Default Sling Post Servlet, Sling Models, and the Sling API.
Last updated on Dec 12, 2014
The Sightly template language, shipped with Adobe Experience Manager 6.0, simplifies a lot the component development workflow by allowing front-end developers to edit components themselves directly.
Learn about the main features of that template language, and about the tools available to make project development work more efficient.
How can we harness AEM6 and Sling to integrate backed layers to the CMS and expose them as a unified framework. creation of these integrations is vital for a coherent, personalize-able and track-able sites.
Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
Ask the AEM Community Expert : May Session. This session will cover in depth sling concepts such as Sling Selectors, Default Sling Post Servlet, Sling Models, and the Sling API.
Last updated on Dec 12, 2014
The Sightly template language, shipped with Adobe Experience Manager 6.0, simplifies a lot the component development workflow by allowing front-end developers to edit components themselves directly.
Learn about the main features of that template language, and about the tools available to make project development work more efficient.
How can we harness AEM6 and Sling to integrate backed layers to the CMS and expose them as a unified framework. creation of these integrations is vital for a coherent, personalize-able and track-able sites.
Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
AEM Best Practices for Component DevelopmentGabriel Walt
This presentation describes how to easily get started with an efficient development workflow with Adobe Experience Manager 6.1.
The tools and technologies presented are:
* Project Archetype – https://github.com/Adobe-Marketing-Cloud/aem-project-archetype
* AEM Eclipse Extension – https://docs.adobe.com/docs/en/dev-tools/aem-eclipse.html
* AEM Brackets Extension – https://docs.adobe.com/docs/en/dev-tools/aem-brackets.html
* Sightly Template Language – http://www.slideshare.net/GabrielWalt/component-development
* Sightly REPL Tool – https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl
* Sightly TodoMVC Example – https://github.com/Adobe-Marketing-Cloud/aem-sightly-sample-todomvc
RichText Editor (RTE) is an integral component of AEM and it provides AEM authors a WYSIWYG text-editing experience on the web pages. RTE offers diverse configurations to developers.
This presentation provides an in-depth understanding of this component and shows various concepts, use-cases, modes, configurations, best practices, limitations and troubleshooting that surround it.
E-Seminar recording published here -
https://helpx.adobe.com/experience-manager/kt/eseminars/gems/AEM-Rich-Text-Editor-RTE-Deep-Dive1.html
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
Adobe Experience Manager Core ComponentsGabriel Walt
Components for AEM Sites that cover the most common web content needs.
Discover which components exist, what features they offer, how they work technically and how they can be extended by a developer.
This document is about how to Write a CRUD App with Spring Boot Jpa or jdbc. a related example for this document is on github with the following address :
https://github.com/ghorbanihamid/SpringBoot_AOP_JPA_Example
AEM Best Practices for Component DevelopmentGabriel Walt
This presentation describes how to easily get started with an efficient development workflow with Adobe Experience Manager 6.1.
The tools and technologies presented are:
* Project Archetype – https://github.com/Adobe-Marketing-Cloud/aem-project-archetype
* AEM Eclipse Extension – https://docs.adobe.com/docs/en/dev-tools/aem-eclipse.html
* AEM Brackets Extension – https://docs.adobe.com/docs/en/dev-tools/aem-brackets.html
* Sightly Template Language – http://www.slideshare.net/GabrielWalt/component-development
* Sightly REPL Tool – https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl
* Sightly TodoMVC Example – https://github.com/Adobe-Marketing-Cloud/aem-sightly-sample-todomvc
RichText Editor (RTE) is an integral component of AEM and it provides AEM authors a WYSIWYG text-editing experience on the web pages. RTE offers diverse configurations to developers.
This presentation provides an in-depth understanding of this component and shows various concepts, use-cases, modes, configurations, best practices, limitations and troubleshooting that surround it.
E-Seminar recording published here -
https://helpx.adobe.com/experience-manager/kt/eseminars/gems/AEM-Rich-Text-Editor-RTE-Deep-Dive1.html
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
Adobe Experience Manager Core ComponentsGabriel Walt
Components for AEM Sites that cover the most common web content needs.
Discover which components exist, what features they offer, how they work technically and how they can be extended by a developer.
This document is about how to Write a CRUD App with Spring Boot Jpa or jdbc. a related example for this document is on github with the following address :
https://github.com/ghorbanihamid/SpringBoot_AOP_JPA_Example
Add-On Development: EE Expects that Every Developer will do his Dutyreedmaniac
Add-Ons are what make ExpressionEngine the flexible powerhouse that it is today. Being able to write your own simple plugins or incredibly expansive modules allows you to mold ExpressionEngine to nearly any task that your website might require. However, with that power comes a great responsibility to insure that your code is not slowing down the entire site or unduly stressing the server through bad code architecture.
There are simple tools already built into ExpressionEngine and PHP that you can use to see precisely what your Add-On is doing during page processing and where it might be doing more work than is absolutely necessary. Every developer should use these to optimize their work from the very beginning of development, prior to release. This workshop will explain these tools and how you can use them effectively. It will also delve deeper into optimization techniques and tricks that will keep your code light and clean, while finding a balance between functionality and performance.
Introduction
Require JS
Handlebars
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
AngularJS 1.x - your first application (problems and solutions)Igor Talevski
We will talk about all aspects of building a single page application with AngularJS, and we will discuss real examples from day-to-day work. We will also cover a large amount of theory about general web development, best practices, and today's client demands. We will focus on three (3) main points: architecture, security, and real time notification.
Add-On Development: EE Expects that Every Developer will do his DutyLeslie Doherty
A presentation on Add-On Development: EE Expects that Every Developer will do his Duty as given at the EECI2009 conference in Leiden by Paul Burdick, lead developer at Solspace.
Introduction
Require JS
Handlebars
Conclusions
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
Improving the Quality of Existing Software - DevIntersection April 2016Steven Smith
How do you improve the quality of your existing software, while continuing to add value for your customers? What are some heuristics and code smells you can look for, and principles and patterns you can use to guide you, as you make your software better over time instead of worse? How can we improve our skills and techniques so that writing high quality software becomes our default, fastest way of working?
Session 34 - JDBC Best Practices, Introduction to Design PatternsPawanMM
In this session, you will learn:
1. Deployment Descriptor
2. Configuring and Mapping a Servlet
3. The flow of the demo web apps
4. JDBC Best practices
5. Design Patterns
This is a presentation that was presented at Tech Next meetup group (http://www.meetup.com/TechNext/events/168164922/), to introduce the audience to AngularJs (http://angularjs.org/).
It covers major ideas that AngularJS thrives on - data-binding, directives, services, dependency-injections, form validations, overall application architecture, Angular's view of MVC etc.
The content was prepared with the recent experience I gained which working for a short stint on a project earlier and is as per best of my knowledge.
Improving the Quality of Existing SoftwareSteven Smith
How do you improve the quality of your existing software, while continuing to add value for your customers? What are some heuristics and code smells you can look for, and principles and patterns you can use to guide you, as you make your software better over time instead of worse?
Similar to Introduction to Sightly and Sling Models (20)
Enhancing Project Management Efficiency_ Leveraging AI Tools like ChatGPT.pdfJay Das
With the advent of artificial intelligence or AI tools, project management processes are undergoing a transformative shift. By using tools like ChatGPT, and Bard organizations can empower their leaders and managers to plan, execute, and monitor projects more effectively.
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTier1 app
Even though at surface level ‘java.lang.OutOfMemoryError’ appears as one single error; underlyingly there are 9 types of OutOfMemoryError. Each type of OutOfMemoryError has different causes, diagnosis approaches and solutions. This session equips you with the knowledge, tools, and techniques needed to troubleshoot and conquer OutOfMemoryError in all its forms, ensuring smoother, more efficient Java applications.
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisGlobus
JASMIN is the UK’s high-performance data analysis platform for environmental science, operated by STFC on behalf of the UK Natural Environment Research Council (NERC). In addition to its role in hosting the CEDA Archive (NERC’s long-term repository for climate, atmospheric science & Earth observation data in the UK), JASMIN provides a collaborative platform to a community of around 2,000 scientists in the UK and beyond, providing nearly 400 environmental science projects with working space, compute resources and tools to facilitate their work. High-performance data transfer into and out of JASMIN has always been a key feature, with many scientists bringing model outputs from supercomputers elsewhere in the UK, to analyse against observational or other model data in the CEDA Archive. A growing number of JASMIN users are now realising the benefits of using the Globus service to provide reliable and efficient data movement and other tasks in this and other contexts. Further use cases involve long-distance (intercontinental) transfers to and from JASMIN, and collecting results from a mobile atmospheric radar system, pushing data to JASMIN via a lightweight Globus deployment. We provide details of how Globus fits into our current infrastructure, our experience of the recent migration to GCSv5.4, and of our interest in developing use of the wider ecosystem of Globus services for the benefit of our user community.
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
Developing Distributed High-performance Computing Capabilities of an Open Sci...Globus
COVID-19 had an unprecedented impact on scientific collaboration. The pandemic and its broad response from the scientific community has forged new relationships among public health practitioners, mathematical modelers, and scientific computing specialists, while revealing critical gaps in exploiting advanced computing systems to support urgent decision making. Informed by our team’s work in applying high-performance computing in support of public health decision makers during the COVID-19 pandemic, we present how Globus technologies are enabling the development of an open science platform for robust epidemic analysis, with the goal of collaborative, secure, distributed, on-demand, and fast time-to-solution analyses to support public health.
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
Custom Healthcare Software for Managing Chronic Conditions and Remote Patient...Mind IT Systems
Healthcare providers often struggle with the complexities of chronic conditions and remote patient monitoring, as each patient requires personalized care and ongoing monitoring. Off-the-shelf solutions may not meet these diverse needs, leading to inefficiencies and gaps in care. It’s here, custom healthcare software offers a tailored solution, ensuring improved care and effectiveness.
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800
In this slide, we show the simulation example and the way to compile this solver.
In this solver, the Helmholtz equation can be solved by helmholtzFoam. Also, the Helmholtz equation with uniformly dispersed bubbles can be simulated by helmholtzBubbleFoam.
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns
Unlocking Business Potential: Tailored Technology Solutions by Prosigns
Discover how Prosigns, a leading technology solutions provider, partners with businesses to drive innovation and success. Our presentation showcases our comprehensive range of services, including custom software development, web and mobile app development, AI & ML solutions, blockchain integration, DevOps services, and Microsoft Dynamics 365 support.
Custom Software Development: Prosigns specializes in creating bespoke software solutions that cater to your unique business needs. Our team of experts works closely with you to understand your requirements and deliver tailor-made software that enhances efficiency and drives growth.
Web and Mobile App Development: From responsive websites to intuitive mobile applications, Prosigns develops cutting-edge solutions that engage users and deliver seamless experiences across devices.
AI & ML Solutions: Harnessing the power of Artificial Intelligence and Machine Learning, Prosigns provides smart solutions that automate processes, provide valuable insights, and drive informed decision-making.
Blockchain Integration: Prosigns offers comprehensive blockchain solutions, including development, integration, and consulting services, enabling businesses to leverage blockchain technology for enhanced security, transparency, and efficiency.
DevOps Services: Prosigns' DevOps services streamline development and operations processes, ensuring faster and more reliable software delivery through automation and continuous integration.
Microsoft Dynamics 365 Support: Prosigns provides comprehensive support and maintenance services for Microsoft Dynamics 365, ensuring your system is always up-to-date, secure, and running smoothly.
Learn how our collaborative approach and dedication to excellence help businesses achieve their goals and stay ahead in today's digital landscape. From concept to deployment, Prosigns is your trusted partner for transforming ideas into reality and unlocking the full potential of your business.
Join us on a journey of innovation and growth. Let's partner for success with Prosigns.
Listen to the keynote address and hear about the latest developments from Rachana Ananthakrishnan and Ian Foster who review the updates to the Globus Platform and Service, and the relevance of Globus to the scientific community as an automation platform to accelerate scientific discovery.
First Steps with Globus Compute Multi-User EndpointsGlobus
In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.
Accelerate Enterprise Software Engineering with PlatformlessWSO2
Key takeaways:
Challenges of building platforms and the benefits of platformless.
Key principles of platformless, including API-first, cloud-native middleware, platform engineering, and developer experience.
How Choreo enables the platformless experience.
How key concepts like application architecture, domain-driven design, zero trust, and cell-based architecture are inherently a part of Choreo.
Demo of an end-to-end app built and deployed on Choreo.
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxrickgrimesss22
Discover the essential features to incorporate in your Winzo clone app to boost business growth, enhance user engagement, and drive revenue. Learn how to create a compelling gaming experience that stands out in the competitive market.
Check out the webinar slides to learn more about how XfilesPro transforms Salesforce document management by leveraging its world-class applications. For more details, please connect with sales@xfilespro.com
If you want to watch the on-demand webinar, please click here: https://www.xfilespro.com/webinars/salesforce-document-management-2-0-smarter-faster-better/
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
Enhancing Research Orchestration Capabilities at ORNL.pdfGlobus
Cross-facility research orchestration comes with ever-changing constraints regarding the availability and suitability of various compute and data resources. In short, a flexible data and processing fabric is needed to enable the dynamic redirection of data and compute tasks throughout the lifecycle of an experiment. In this talk, we illustrate how we easily leveraged Globus services to instrument the ACE research testbed at the Oak Ridge Leadership Computing Facility with flexible data and task orchestration capabilities.
Understanding Globus Data Transfers with NetSageGlobus
NetSage is an open privacy-aware network measurement, analysis, and visualization service designed to help end-users visualize and reason about large data transfers. NetSage traditionally has used a combination of passive measurements, including SNMP and flow data, as well as active measurements, mainly perfSONAR, to provide longitudinal network performance data visualization. It has been deployed by dozens of networks world wide, and is supported domestically by the Engagement and Performance Operations Center (EPOC), NSF #2328479. We have recently expanded the NetSage data sources to include logs for Globus data transfers, following the same privacy-preserving approach as for Flow data. Using the logs for the Texas Advanced Computing Center (TACC) as an example, this talk will walk through several different example use cases that NetSage can answer, including: Who is using Globus to share data with my institution, and what kind of performance are they able to achieve? How many transfers has Globus supported for us? Which sites are we sharing the most data with, and how is that changing over time? How is my site using Globus to move data internally, and what kind of performance do we see for those transfers? What percentage of data transfers at my institution used Globus, and how did the overall data transfer performance compare to the Globus users?
2. 2
• What is Sightly?
• Why Sightly?
• Separation of concerns
• Comparing JSP and Sightly development
• Sightly features
• Sightly: the basics of the language
• Not a silver bullet
• Sightly and Sling Models
• An amazing combination
• Basic usage
• Learning from experience
• wcm-io and ACS Commons libraries
• Useful links
• A few hands-on examples
Summary
3. 3
• New secure server-side HTML Templating Language introduced with AEM6 for
efficient development
• “Sightly” (meaning “pleasing to the eye”)
• “Alternative” to JSP
• Specification and TCK open sourced to GitHub
• Reference Adobe implementation donated to Apache Sling by Adobe (September
2014)
• Sightly reference implementation has been folded into Apache Sling project
• org.apache.sling.scripting.sightly
• org.apache.sling.xss
What is Sightly
6. 6
The standard workflow:
• Front end developers create HTML mark up, designs with all necessary client side
libraries
• (AEM) back end developers take this well formed, high-fidelity static HTML
“prototype”
• Systematically split the whole template in pieces
• Put it together again as JSP templates and components
• Add custom business logic inside JSP templates and components
This leads to well known issues:
• The process of splitting and putting together is error prone
• The process itself is time consuming
• This way of development does not provide good (and simple) separation of concerns
between UI and business logic
• As front end developers can’t easily maintain JSPs, they don’t develop new
components “inside” AEM
• They don’t directly cope with components issues in Author mode
(both visualization and UI issues)
Why Sightly: separation of concerns
13. 13
Why Sightly: comparing JSP and Sightly
• Writing custom tag lib is not easy
• Need to mantain both Java class and TLD
• Custom tag lib lifecycle is hard to understand and difficult to integrate
inside the templates
• Have you ever effectively used it for your projects?
JSP Sightly
Based on Published Standards / Open Source?Y (*) N Y
IDE Support? Y Y/N
Officially Documented / Supported? Y Y
Documented Extension Model? Y N
Includes XSS escaping? Y (**) Y
Allows Basic Logic? Y Y
Enables Bad Coding Practices? Y N
* Some proprietary TagLibs used for interacting with CQ
** Provided by additional tag libraries
14. 14
Why Sightly: features
• Code-less language, forcing strict separation of concerns
• Powerful extension points with the Use-API
• Automatic contextual HTML escaping and XSS protection
• Automatically removes HTML attributes if value is empty
• Reuses HTML blocks for statements
15. 15
Sightly: the basics of the language
Expression language example:
<a href=‘‘{properties.link || ‘#’}’’ title=‘‘{properties.jcr:title}’’>
${properties.jcr:description}
</a>
Features:
- Automatic contextual HTML escaping and XSS escaping (warning!)
- Fallback value if property is empty
- Remove HTML attribute if value is empty
16. 16
Sightly: the basics of the language
• Sightly comments
<!-- /* This will disappear from the output *-->
• Expression language
${properties.myProperty}
• They can only be used in attribute values, comments or in element content
• Standard bindings are available as in JSPs
• Block statements
<div data-sly-include=‘‘another-template.html’’></div>
17. 17
Sightly: the basics of the language
• Expression bindings:
• ${properties}
• ${pageProperties}
• ${inheritedPageProperties}
• ${request} Sling Request
• ${resource} Sling Resource
• ${currentPage} WCM Page
• ${currentDesign} WCM Design
• ${component} WCM Component
• ${wcmmode} WCM Mode
Access properties with dot
notation ${properties.foo}
To avoid complex expressions inside
templates, Sightly does not allow
passing arguments to function call.
Only zero argument calls are allowed
from templates.
18. 18
Sightly: the basics of the language
• Options allow to manipulate the result of an expression, or to pass
arguments to block statements
• Everything after the @ are comma separated options:
${myVar @ optionOne, optionTwo}
• Examples:
• String formatting:
${‘Page {0} of {1}’ @ format=[current, total]}
• Internationalization:
${‘Page’ @ i18n}
• Array join:
${[‘one’, ‘two’] @ join=‘; ’}
19. 19
Sightly: the basics of the language
• Display context
• Every expression in Sightly has a display context
• Display context depends on the location within the HTML structure
• Example: text node, attribute, …
• Sightly automatically detect the context of expressions and escape them appropriately (to
prevent XSS)
This is not true for script (JS) and style (CSS) contexts
In this case we should explicitly set the context
• Example
<a href="${properties.link}" title="${properties.title}">${properties.text}</a>
Three variables, three different contexts.
No explicit context setting is required in the above cases
20. 20
Sightly: the basics of the language
• Display context option
• The context option offers control over escaping and XSS protection
• Explicit context must be set for style contexts:
<span style="color: ${properties.color @
context='styleToken'};">...</span>
• To safely output markup (filtering out scripts)
<div>${properties.richText @ context=‘html’}</div>
uses AntiSamy policy rules
The default antisamy configuration is present at /libs/cq/xssprotection/config.xml, which can
be overlaid with your custom config within /apps.
• Adding URI validation protection to other attributes than src or href
<p data-link=‘‘${link @ context=‘uri’}’’>text</p>
21. 21
Sightly: the basics of the language
• Most useful contexts and what they do:
• uri To display links and paths (validates URI)
• attribute Encodes HTML special characters
• text Encodes HTML special characters
• scriptString Encodes characters that would break out the string
• styleString Validates CSS tokens. Outputs nothing if it fails
• html Filters HTML to meet AntiSamy policy rules, removing what doesn’t match
• unsafe Disable all escaping and XSS protections
22. 22
Sightly: the basics of the language
• Block statements
• To keep markup valid, block statements are defined by data-sly-* attributes
that can be added to any element on the markup
• <input data-sly-STATEMENT=‘‘foo’’ />
• Block statements can have no value, a static value, or an expression
<input data-sly-STATEMENT=‘‘${bar}’’ />
• Despite using data-attributes, block statements are all executed on the
server and no data-sly-* attribute is sent to the client!
• Sightly block statements:
• Markup inclusion: Include, Resource
• Control flow: test, list, template, call
• Markup modification: unwrap, element, attribute, text
• Object initialization: use
23. 23
Sightly: the basics of the language
• Template and call statements
• Similar to data-sly-include
• Main difference: you can pass parameters to the included template
• Templates must be declared and called from another template
• <data-sly-template> declares a template
<template data-sly-template.header> <div> my template </div> </template>
Defines a template called header
Notice: the host element are not output by Sightly. If you call this template the only printed
mark up will be
<div> my template </div>
• <div data-sly-call=‘‘header’’></div> calls the template header defined above
• Templates can be located in a different file
• Templates accept parameters
<template data-sly-template.two=‘‘${ @ title}’’> <h1>${title}</h1> </template>
<div data-sly-call=‘‘${two @ title=properties.jcr:title}’’></div>
24. 24
Sightly: the basics of the language
• Unwrap statement
• Removes the host element while retaining its content
<div data-sly-unwrap> <h1> Title </h1> </div>
Output: <h1> Title </h1>
• Warning!
• Use unwrap only when there’s no other way to write your template
• Prefer adding statements to existing elements
• Templates can easily become difficult to read
• Unwrap can also be subject to condition
<div class=‘‘edit-md’’ data-sly-unwrap=‘‘${wcmmode.edit}’’>
Text
</div>
Output: Text in EDIT mode
Output in PREVIEW/PUBLISH mode: <div class=‘‘edit-md’’>
Text
</div>
• Use data-sly-test to remove the element content as well
25. 25
Sightly: the basics of the language
• Use statement: Sightly Javascript Use API. Enables a Sightly file to access
helper code written in Javascript.
• Initialize a helper objects
<div data-sly-use.logic=‘‘logic.js’’>${logic.value}</div>
Inside logic.js file
use(function()) {
return {
value: ‘‘Hello World’’
};
});
Output:
<div> Hello World </div>
• Use Javascript Use API only for very simple tasks (date formatting, text
formatting, simple conditional logic, …):
• Javascript Use API is server-side Javascript (some JS native features are not fully supported)
• Cannot be debugged
• Very hard to find errors
• It’s slow
• Very hard to write Javascript Use API code for more complex task (e.g., cycling on repository
nodes, calling external services, etc.)
26. 26
Sightly: the basics of the language
• Use statement: Sightly Java Use API enables a Sightly file to access helper
methods in a custom Java class.
• POJO extending WCMUse class
• WCMUse has been deprecated from AEM 6.1
and replaced with WCMUsePojo which uses
the new Sightly API from Apache Sling
• Local Java class: when the Java files are located in the content repository,
next to the Sightly template, only the class name is required to call the logic
• Bundle Java class: the Java class must be compiled and deployed within
an OSGi bundle (recommended when Java code implements logic
common to many components)
27. 27
Sightly: the basics of the language
• Many ways to do the same thing. But, what kind of Use-API is better?
• Model logic:
This logic is not tied to a template and is potentially reusable among
components. It should aim to form a stable API that changes little, even in
case of a full redesign. ➔ Java located in OSGi bundle
Example: Java class retrieving information from a web service; Java class
implementing logic for computing the menu structure
• View logic:
This logic is specific to the templates and is likely to change if the design
changes. It is thus a good practice to locate it in the content repository, next
to the template.
➔ JavaScript located in component if components are to be maintained by front-end devs (typically
with Brackets).
➔ Java located in component if performance is critical (e.g. when many requests are not cached by
the dispatcher).
Example: code implementing logic to output certain css classes inside the
template mark up (e.g., list menu, with selected/non selected items)
28. 28
Not a silver bullet
• Sightly is a good option to improve the maintanability of your AEM
components but…
• You should follow best practices and guidelines otherwise your template code can
explode easily
• data-sly-unwrap can be evil
• wrap author/preview version of HTML inside smaller templates to be included; this makes your
components easier to read
• avoid use context=‘‘unsafe’’
• It is not extensible with new block statements or options
• Can be hard to debug
• <img data-sly-use.logic=‘‘foo.test.SomeLogic’’ data-sly-test=‘‘${logic.value}’’ >
• if the test is false, everything below img tag won’t be output; this can be hard to debug
• always use self closed elements
• Can lead to many Use API files containing the same logic
• Before implementing a new one, think about a common class extending WCMUse or Sling Model
• Can be frustrating, sometimes
• Write Use API external code even for the easy tasks
• Follow a style guide: https://github.com/Netcentric/aem-sightly-style-guide
29. 29
Sightly and Sling Models: an amazing combination
• Sling Models are POJOs implementing the adapter pattern. They can be
automatically mapped from Sling objects
• Resource
• SlingHttpRequest
• Entirely annotation driven
• OOTB, support resource properties (implemented with ValueMap), SlingBindings,
OSGi services, request attributes
• Current latest version: 1.2.0
• AEM6+SP2 comes with 1.0.0
• Versions > 1.0.0 contain very useful features:
• 1.0.6: injector-specific annotations
• 1.1.0: @Self, @SlingObject, @ResourcePath annotations
• 1.2.0: Sling validation
30. 30
Sightly and Sling Models: basic usage
package com.foo.core;
@Model(adaptables=Resource.class)
public class MyModel {
@Inject private String propertyName;
public String getResult() {
return ‘‘Hello World ’’ + propertyName;
}
}
• Class is annotated with @Model
• adaptbles option defines which types of objects are adaptable to this Sling Model
• Fields that need to be injected are annotated
In this case, propertyName is a property coming from the adapted resource
• Constructor injection (since 1.1.0)
@Model(adaptables=Resource.class)
public class MyModel {
@Inject
public MyModel(@Named("propertyName") String propertyName) {
// constructor code
}
}
31. 31
Sightly and Sling Models: basic usage
@Injected fields/methods are assumed to be required. To mark them as optional,
use @Optional:
@Model(adaptables=Resource.class)
public class MyModel {
@Inject @Optional
private String otherName;
}
A default value can be provided (for Strings & primitives):
@Model(adaptables=Resource.class)
public class MyModel {
@Inject @Default(values="defaultValue")
private String name;
}
32. 32
Sightly and Sling Models: basic usage
OSGi services can be injected:
@Model(adaptables=Resource.class)
public class MyModel {
@Inject
private ResourceResolverFactory resourceResolverFactory;
}
List injection for child resources works by injecting grand child resources (since
Sling Models Impl 1.0.6). For example, the class
@Model(adaptables=Resource.class)
public class MyModel {
@Inject
private List<Resource> addresses;
}
addresses will contain address1 and address2
33. 33
Sightly and Sling Models: basic usage
The @PostConstruct annotation can be used to add methods which are invoked upon
completion of all injections:
@Model(adaptables=SlingHttpServletRequest.class)
public class MyModel {
@Inject
private PrintWriter out;
@Inject
@Named("log")
private Logger logger;
@PostConstruct
protected void sayHello() {
logger.info("hello");
}
}
34. 34
Sightly and Sling Models: basic usage
Available injectors:
https://sling.apache.org/documentation/bundles/models.html#available-injectors
35. 35
Sightly and Sling Models: basic usage
Injector-specific annotation vs normal annotations
Those annotations replace @Via, @Filter, @Named, @Optional, @Required, @Source and
@Inject. @Default may still be used in addition to the injector-specific annotation to set
default values. All elements given above are optional.
Annotation
Supported Optional
Elements
Injector
@ScriptVariable optional and name script-bindings
@ValueMapValue optional, name and via valuemap
@ChildResource optional, name and via child-resources
@RequestAttribute optional, name and via request-attributes
@ResourcePath optional, path, and name resource-path
@OSGiService optional, filter osgi-services
@Self optional self
@SlingObject optional sling-object
36. 36
Sightly and Sling Models: client code
From a Sightly template:
<div data-sly-use.model=‘‘com.foo.core.MyModel’’>${model.result}</div>
From Java code:
MyModel model = resource.adaptTo(MyModel.class)
37. 37
Sightly and Sling Models: learning from experience
• Sling Models are instantiated everytime they are used with data-sly-use or adaptTo.
Issues can happen when the Sling Model instantiation includes connection to DB or web
service calls. Best practice: put Sling Model instance inside request object (in case the
same model is used within the same request).
• They can be hard to debug sometimes…
Since Sling Models 1.2.0 there is another way of instantiating models. The OSGi service
ModelFactory provides a method for instantiating a model that throws exceptions. This is
not allowed by the Javadoc contract of the adaptTo method. That way null checks are not
necessary and it is easier to see why instantiation of the model failed.
• Why Sling Models and NOT WCMUse
Sling Models are based on the adapter pattern
Dependency injection
Less simpler code
It’s a POJPO unit testable
38. 38
Sightly and Sling Models: ACS AEM commons and wcm.io
https://adobe-consulting-services.github.io/acs-aem-commons/features/aem-sling-models-
injectors.html
Allows for Sling Models classes and interfaces to be injected with common AEM-related
objects, namely those made available using <cq:defineObjects/>: resource,
resourceResolver, componentContext, pageManager, etc.
@Inject
private Page resourcePage;
http://wcm.io/sling/models/
Support injection request-derived context objects on all models, not only when the adaptable
is a request
The name “Sightly” (meaning “pleasing to the eye”) highlights its focus on keeping your markup beautiful, and thus maintainable, once made dynamic.
This way of development does not provide good (and simple) separation of concerns between UI and business logic: in realtà I modi ci sarebbero: CUSTOM TAG LIBRARIES
Il tempo per lo sviluppo dei component con l’utilizzo di JSP + logica Java all’interno è maggiore
AUTOMATIC CONTEXTUAL HTML ESCAPING AND XSS PROTECTION:
Sightly automatically filters and escapes all variables being output to the presentation layer to prevent cross-site-scripting (XSS) vulnerabilities.
As Sightly understands the HTML syntax, it is capable to automatically detect the scope in which variables are placed, and automatically do proper context-aware escaping and XSS protection. Yet, it is possible to manually control the display context if needed.
REUSES HTML BLOCKS FOR STATEMENTS:
Sightly block statements are custom data attributes added directly to existing HTML. This allows easy and unobtrusive annotation of a prototype static HTML page, converting it to a functioning dynamic template without breaking the validity of the HTML code.
The display context of a Sightly expression refers to its location within the structure of the HTML page. For example, if the expression appears in place that would produce a text node once rendered, then it is said to be in a text context. If it is found within the value of an attribute, then it is said to be in an attribute context, and so forth.
With the exception of script (JS) and style (CSS) contexts, Sightly will automatically detect the context of expressions and escape them appropriately, to prevent XSS security problems. In the case of scripts and CSS, the desired context behavior must be explicitly set. Additionally, the context behavior can also be explicitly set in any other case where an override of the automatic behavior is desired.
Here we have three variables in three different contexts: properties.link (uri context), properties.title (attribute context) and properties.text (text context). Sightly will escape each of these differently in accordance with the security requirements of their respective contexts. No explicit context setting is required in normal cases such as this one:
<a href="${properties.link}" title="${properties.title}">${properties.text}</a>
The display context of a Sightly expression refers to its location within the structure of the HTML page. For example, if the expression appears in place that would produce a text node once rendered, then it is said to be in a text context. If it is found within the value of an attribute, then it is said to be in an attribute context, and so forth.
With the exception of script (JS) and style (CSS) contexts, Sightly will automatically detect the context of expressions and escape them appropriately, to prevent XSS security problems. In the case of scripts and CSS, the desired context behavior must be explicitly set. Additionally, the context behavior can also be explicitly set in any other case where an override of the automatic behavior is desired.
Here we have three variables in three different contexts: properties.link (uri context), properties.title (attribute context) and properties.text (text context). Sightly will escape each of these differently in accordance with the security requirements of their respective contexts. No explicit context setting is required in normal cases such as this one:
<a href="${properties.link}" title="${properties.title}">${properties.text}</a>
Less code to write (only one annotation is necessary in most of the cases)
More robust (in case of name collisions among the different injectors, you make sure that the right injector is used)
Better IDE support (because the annotations provide elements for each configuration which is available for that specific injector, i.e. filter only for OSGi services)
Why Sling Models and NOT WCMUse: https://www.cognifide.com/blogs/cq/sightly-and-slice---where-a-beautiful-markup-meets-a-beautiful-code/#.VgK7-d_tmko
Why Sling Models and NOT WCMUse: https://www.cognifide.com/blogs/cq/sightly-and-slice---where-a-beautiful-markup-meets-a-beautiful-code/#.VgK7-d_tmko