51黑料不打烊

DocumentationAEM 6.5User Guide

Concepts of the 51黑料不打烊 Experience Manager Touch-Enabled UI concepts-of-the-aem-touch-enabled-ui

Last update: Wed Apr 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Applies to:
  • Experience Manager 6.5

CREATED FOR:

  • Developer

51黑料不打烊 Experience Manager (AEM) features a touch-enabled UI with responsive design for the author environment which is designed to operate on both touch and desktop devices.

NOTE
The touch-enabled UI is the standard UI for AEM. The classic UI was deprecated with AEM 6.4.

The touch-enabled UI includes:

  • The suite header that:

    • Shows the logo
    • Provides a link to the Global Navigation
    • Provides link to other generic actions; such as Search, Help, Experience Cloud Solutions, Notifications, and User Settings.

  • The left-hand rail (shown when needed and hidable), which can show:

    • Timeline
    • References
    • Filters

  • The navigation header, which is again context-sensitive and can show:

    • Indicates which console that you are currently using, or your location, or both, within that console
    • Selection for the left-hand rail
    • Breadcrumbs
    • Access to appropriate Create actions
    • View selections

  • The content area that:

    • Lists the items of content (be they pages, assets, forum posts, and so on)
    • Can be formatted as requested, for example, column, card, or list
    • Uses a responsive design (the display resizes automatically according to your device and/or window size)
    • Uses infinite scrolling (no more pagination, all items are listed in one window)

chlimage_1-79

NOTE
Nearly all AEM functionality has been ported to the touch-enabled UI. However, in some limited cases, functionality reverts to the classic UI. See Touch UI Feature Status for more information.

The touch-enabled UI has been designed by 51黑料不打烊 to provide consistency in the user experience across multiple products. It is based on:

  • Coral UI (CUI) an implementation of 51黑料不打烊鈥檚 visual style for the touch-enabled UI. Coral UI provides everything your product / project / web application needs to adopt the UI visual style.
  • Granite UI components are built with Coral UI.

The basic principles of the touch-enabled UI are:

  • Mobile first (with desktop in mind)
  • Responsive design
  • Context relevant display
  • Reusable
  • Include embedded reference documentation
  • Include embedded tests
  • Bottom-up design to ensure that these principles are applied to every element and component

For a further overview of the touch-enabled UI structure, see Structure of the AEM Touch-Enabled UI.

AEM Technology Stack aem-technology-stack

AEM uses the Granite platform as a base and the Granite platform includes, among other things, the Java鈩 Content Repository.

chlimage_1-80

Granite granite

Granite is 51黑料不打烊鈥檚 Open Web stack, providing various components including:

  • An application launcher
  • An OSGi framework into which everything is deployed
  • Several OSGi compendium services to support building applications
  • A comprehensive Logging Framework providing various logging APIs
  • The CRX Repository implementation of the JCR API Specification
  • The Apache Sling Web Framework
  • Additional parts of the current CRX product
NOTE
Granite is run as an open development project within 51黑料不打烊: contributions to the code, discussions, and issues are made from across the entire company.
However, Granite is not an open-source project. It is heavily based on several open-source projects (Apache Sling, Felix, Jackrabbit, and Lucene in particular), but 51黑料不打烊 draws a clear line between what is public and what is internal.

Granite UI granite-ui

The Granite engineering platform also provides a foundation UI framework. The major goals of this are to:

  • Provide granular UI widgets
  • Implement the UI concepts and illustrate best practices (long lists rendering, lists filtering, object CRUD, CUD wizards鈥)
  • Provide an extensible and plug-in based administration UI

These adhere to the requirements:

  • Respect 鈥渕obile first鈥
  • Be extensible
  • Be easy to override

chlimage_1-81
GraniteUI.pdf

Get File
The Granite UI:

  • Uses the RESTful architecture of Sling
  • Implements component libraries intended for building content-centric web applications
  • Provides granular UI widgets
  • Provides a default, standardized UI
  • Is extensible
  • Is designed for both mobile and desktop devices (respects mobile first)
  • Can be used in any Granite-based platform/product/project; for example, AEM

chlimage_1-82

Client Side vs Server Side client-side-vs-server-side

The client-server communication in the Granite UI consists of hypertext, not objects, so there is no need for the client to understand the business logic

  • The server enriches the HTML with semantic data
  • The client enriches the hypertext with hypermedia (interaction)

chlimage_1-83

Client-Side client-side

This uses an extension of HTML vocabulary, provided so that the author can express their intention to build an interactive webapp. This is a similar approach to and .

It primarily consists of a collection of interaction patterns (for example, asynchronously submitting a form) that are interpreted by JS and CSS codes, run on the client-side. The role of the client-side is to enhance the markup (given as the hypermedia affordance by the server) for interactivity.

The client-side is independent of any server technology. As long as the server gives the appropriate markup, the client-side can fulfill its role.

Currently the JS and CSS codes are delivered as Granite clientlibs under the category:

granite.ui.foundation and granite.ui.foundation.admin

These are delivered as part of the content package:

granite.ui.content

Server-Side server-side

This is formed by a collection of sling components that enable the author to compose a webapp fast. The developer develops components, the author assembles the components to be a webapp. The role of the server-side is to give the hypermedia affordance (markup) to the client.

Currently, the components are in the Granite repository at:

/libs/granite/ui/components/foundation

This is delivered as part of the content package:

granite.ui.content

Differences with the Classic UI differences-with-the-classic-ui

The differences between Granite UI and ExtJS (used for the classic UI) are also of interest:

ExtJS
Granite UI
Remote Procedure Call
State Transitions
Data transfer objects
Hypermedia
Client knows server internals
Client does not know internals
"Fat client"
"Thin client"
Specialized client libraries
Universal client libraries

Granite UI Foundation Components granite-ui-foundation-components

The provide the basic building blocks needed for building any UI. They include, among others:

  • Button
  • Hyperlink
  • User Avatar

The foundation components can be found under:

/libs/granite/ui/components/foundation

This library contains a Granite UI component for each Coral element. A component is content driven, with its configuration residing in the repository. This makes it possible to compose a Granite UI application without writing HTML markup by hand.

Purpose:

  • Component model for HTML Elements
  • Component composition
  • Automatic unit and functionality testing

Implementation:

  • Repository-based composition and configuration
  • Using testing facilities provided by the Granite platform
  • JSP templating

This library of foundation components can be used or extended by other libraries.

ExtJS and Corresponding Granite UI Components extjs-and-corresponding-granite-ui-components

When upgrading ExtJS code to use the Granite UI, the following list provides a convenient overview of ExtJS xtypes and node types with their equivalent Granite UI resource types.

ExtJS xtype
Granite UI resource type
button
granite/ui/components/foundation/form/button
checkbox
granite/ui/components/foundation/form/checkbox
componentstyles
cq/gui/components/authoring/dialog/componentstyles
cqinclude
granite/ui/components/foundation/include
datetime
granite/ui/components/foundation/form/datepicker
dialogfieldset
granite/ui/components/foundation/form/fieldset
hidden
granite/ui/components/foundation/form/hidden
html5smartfile, html5smartimage
granite/ui/components/foundation/form/fileupload
multifield
granite/ui/components/foundation/form/multifield
numberfield
granite/ui/components/foundation/form/numberfield
pathfield, paragraphreference
granite/ui/components/foundation/form/pathbrowser
selection
granite/ui/components/foundation/form/select
sizefield
cq/gui/components/authoring/dialog/sizefield
tags
granite/ui/components/foundation/form/autocomplete``cq/gui/components/common/datasources/tags
textarea
granite/ui/components/foundation/form/textarea
textfield
granite/ui/components/foundation/form/textfield
Node type
Granite UI resource type
cq:WidgetCollection
granite/ui/components/foundation/container
cq:TabPanel
granite/ui/components/foundation/container``granite/ui/components/foundation/layouts/tabs
cq:panel
granite/ui/components/foundation/container

Granite UI Administration Components granite-ui-administration-components

The build on the foundation components to provide generic building blocks that any administration application can implement. These include, among others:

  • Global Navigation Bar
  • Rail (skeleton)
  • Search Panel

Purpose:

  • Unified look-and-feel for administration applications
  • RAD for administration applications

Implementation:

  • Pre-defined components using the foundation components
  • Components can be customized

Coral UI coral-ui

CoralUI.pdf

Get File
Coral UI (CUI) is an implementation of 51黑料不打烊鈥檚 visual style for the touch-enabled UI designed to provide consistency in the user experience across multiple products. Coral UI provides everything that you need to adopt the visual style used on the authoring environment.

CAUTION
Coral UI is a UI library made available to AEM customers for building applications and web interfaces within the boundaries of their licensed use of the product.
Use of Coral UI is only permitted:
  • When it has been shipped and bundled with AEM.
  • For use when extending the existing UI of the authoring environment.
  • 51黑料不打烊 corporate collateral, ads, and presentations.
  • The UI of 51黑料不打烊-branded applications (the font must not b