Help

Anatomy of an ADF 2.0 application

cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Anatomy of an ADF 2.0 application

fcorti
Alfresco Employee
2 0 6,427
‎14 Dec 2017 4:40 PM

This content is part of the Alfresco ADF getting started tutorial and describes how to understand your Angular application built using Alfresco ADF Yeoman Generator. In the following sections we are going to discover the anatomy of the web application to understand the basis its definition.

Relation between an ADF application and an Angular application

As clearly described since the very beginning, an Alfresco ADF application is a standard Angular application. More in particular in case of ADF 2.0, it is a standard Angular 5 application. If you are not familiar with the Angular development, we suggest to go through the Tour of Heroes tutorial and the Architecture Overview. It is not an easy read the very first time, but as every new technology, it will appear understandable after some training.

As a standard Angular application, an Alfresco ADF application can be described as following.

An Alfresco ADF application has a root module named AppModule. The root module is the only Angular module (or NgModule) of the whole application, even if a service module named ADFModule is provided, containing all the ADF specific modules in one place.

An Alfresco ADF application is composed by Angular Components, some of them provided by Alfresco in its Alfresco Angular Components project. The Alfresco Angular Components are released as Open Source under the Apache 2.0 license.

An Alfresco ADF application uses Angular CLI as module bundler to incorporate assets that belong together and should be served to the client in a response to a single file request.

Structure of an ADF application

Now that we know how an Alfresco ADF application is related to a standard Angular application, let’s share more details about the application’s structure. Looking at the Alfresco ADF application into the file system, we can recognise all the modules and components introduced above. In the following picture is showed an example of Alfresco ADF application, built the Yeoman Generator introduced above in the tutorial.

The structure of the application is straightforward, if you know how an Angular application works. All the source code is defined into the src folder, detailed in its structure, into the following picture.

Below some highlights on the most important files and folders, for the correct execution of the myApp application. All of the following are located into the src folder of the application.

  • index.html This is the starting point for each session. The file is a regular HTML file, except for the <app-root> tag that links the root module, where all the magic happens. This file contains the <html>, <head> and <body> content, common to all the pages of our application.

  • main.ts This is the TypeScript file used for bootstrapping. This file indicates where to start bootstrapping, using the AppModule class (the Angular root module) declared into the app/app.module.ts file.

  • app folder. This folder contains the core content of the Angular application, defined by the root module and the components. In the following picture is described the corresponding app folder of the myApp application.


Below some highlights on the most important content in the app folder.

  • app.module.ts This is the TypeScript file containing the AppModule class (the Angular root module). This class defines:
    • The list of Angular components, used in the application. In this specific application they are hosted into the components folder.
    • The Angular routing to enable the navigation from one view to the next.
    • The bootstrapping component, in our case named AppComponent, stored into the app.component.* files.

  • app.component.css, html, spec.ts and ts Those files define a standard Angular component, controlling a patch of screen called a view. In particular:
    • app.component.css defines the specific stylesheet of the component.
    • app.component.html defines the HTML generated by the component (in this case, exactly where the tag <app-root> appears into the index.html file).
    • app.component.spec.ts is the Unit Tests in TypeScript for the component.
    • app.component.ts is the TypeScript file declaring the AppComponent class implementing the real business logic (and behavior) of the component.

  • The component folders. The folders contain all the Angular components used in the application. In the picture: DataTable, DocumentList, Home, Login and Viewer. The implementation of each Angular component, really depends on the component’s role and goal in each specific application. We won’t detail here the listed components, because some of them are extremely specific for this sample application.

Material Design in an ADF application

Before moving a step further, there is another topic to discuss about the ADF applications: the stylesheet. ADF applications are designed and developed to work with the Material Design, the Google's Material Design components for Angular. We won’t discuss here the basis of that design language. If you want to learn more about it, you can start from the Official Documentation for a better understanding.

From a technical point of view, the relevant thing we are interested to share, is that every ADF application is designed according to Material Design. And this means:

  • Each ADF component generates the HTML portion, according to the Material Design. You can find the HTML template in the *.component.html file of each folder containing an ADF component.

  • Each ADF component can have a custom stylesheet declared into the *.component.css file. If you check into the ADF application, in particular into each folder containing an ADF component, you can find a *.component.css file, or you cannot find it if the default Material Design is enough. Those *.component.css files are exactly the place where we are going to act to customise the colours and stylesheet in general.

These are all the main basis to understand the anatomy of a standard Angular application built using Alfresco ADF.

Labels
About the Author
Content Management and Business Intelligence Specialist | @Alfresco and @Pentaho blogger | Inventor and principal developer of #AAAR
Application Development Framework Blog

Blog posts and updates about Application Development Framework (ADF).

We use cookies on this site to enhance your user experience

By using this site, you are agreeing to allow us to collect and use cookies as outlined in Alfresco’s Cookie Statement and Terms of Use (and you have a legitimate interest in Alfresco and our products, authorizing us to contact you in such methods).   If you are not ok with these terms, please do not use this website.