inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3745] Fixed links in rel notes, tutorials and guide (#4179)

Browse Source
This commit is contained in:
Andy Stark
2019-01-17 17:21:23 +00:00
committed by Eugenio Romano
parent 274c4d9389
commit 74475dbd42
29 changed files with 146 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/tutorials/README.md
View File

@@ -8,14 +8,14 @@ Github only: true
| Name | Level | Abstract |
| -- | -- | -- |
| [**Creating your first ADF application**](creating-your-first-adf-application.md) | Basic | This tutorial shows you how to set up your development environment and create an ADF application. |
| [**Creating your ADF application using Yeoman**](creating-the-app-using-yeoman.md) | Basic | In this tutorial you are going to see how to create an ADF application from scratch, using the [Yeoman scaffolding tool](http://yeoman.io/). This is a "getting started" task that should enable you to start developing your own ADF application. |
| [**Creating your Alfresco JavaScript application**](creating-javascript-app-using-alfresco-js-api.md) | Basic | In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. This is a "getting started" task that should enable you to start developing your own JavaScript application on top of Alfresco Content Services or Alfresco Process Services. |
| [**Adding a new component**](new-component.md) | Basic | By definition, a _component_ controls a patch of screen called a _view_. For example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion ofan application's layout. In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application. |
| [**Adding a new view**](new-view.md) | Beginner | Every application developed in Angular is a single page application where the concepts of _view_ and _routing_ play a key role in the user experience. Being a single page application, the navigation between the different layouts (called _views_) is enabled through the _routing_. In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint. |
| [**Creating your ADF application using Yeoman**](creating-the-app-using-yeoman.md) | Basic | In this tutorial you are going to see how to create an ADF application from scratch, using the [Yeoman scaffolding tool](http://yeoman.io/). |
| [**Creating your Alfresco JavaScript application**](creating-javascript-app-using-alfresco-js-api.md) | Basic | In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. |
| [**Adding a new component**](new-component.md) | Basic | In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application. |
| [**Adding a new view**](new-view.md) | Beginner | In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint. |
| [**Using ADF Components**](using-components.md) | Basic | In this tutorial you will learn how to extend, use and configure ADF Components. |
| [**Basic theming**](basic-theming.md) | Beginner | As detailed in the [user guide page about theming](../user-guide/theming.md), you can easily customize the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) used by an ADF application. In this tutorial you will see how to modify the CSS, using a step-by-step approach. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can use the same principles to customize the themes in any ADF application. |
| [**Customizing the Login component**](customising-login.md) | Intermediate | In this tutorial you will learn how to customize the [`Login` component](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html) following the [technical documentation](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html). The task will be very simple. See the documentation for further details about customizing this component, along with examples. |
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a [`DataTable` component](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html) with custom data from a generic back-end service or third party API. As an example we are going to use data from one of the available services on Alfresco Content Services. However, the procedure is much the same if want to use an Alfresco Process Services endpoint or a third party API. |
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | | In this tutorial you will learn how to use the [`NodesApiService`](../core/nodes-api.service.md). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the [`NodesApiService`](../core/nodes-api.service.md) is used as an abstraction layer, defined by one of the services in the ADF Core library. |
| [**Working with Nodes using the JS API**](working-with-nodes-js-api.md) | | In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library. |
| [**Content metadata component**](content-metadata-component.md) | Advanced | In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../content-services/content-metadata.component.md). This component is used to render the standard and custom metadata of generic content item (called a _node_) stored in Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own applicatioin. As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app). |
| [**Basic theming**](basic-theming.md) | Beginner | In this tutorial you will see how to theme an ADF app by modifying the CSS. |
| [**Customizing the Login component**](customising-login.md) | Intermediate | In this tutorial you will learn how to customize the Login component following the technical documentation. |
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a DataTable component. |
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | Intermediate | In this tutorial you will learn how to use the [`NodesApiService`](../core/nodes-api.service.md). |
| [**Working with Nodes using the JS API**](working-with-nodes-js-api.md) | Intermediate | In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). |
| [**Content metadata component**](content-metadata-component.md) | Advanced | In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../content-services/content-metadata.component.md). |

4
docs/tutorials/basic-theming.md
View File

@@ -5,7 +5,9 @@ Level: Beginner
# Basic theming
As detailed in the [user guide page about theming](../user-guide/theming.md), you can easily customize the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) used by an ADF application. In this tutorial you will see how to modify the CSS, using a step-by-step approach. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can use the same principles to customize the themes in any ADF application.
In this tutorial you will see how to theme an ADF app by modifying the CSS.
As detailed in the [user guide page about theming](../user-guide/theming.md), you can easily customize the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) used by an ADF application. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can use the same principles to customize the themes in any ADF application.
## About the `adf-core` theming

4
docs/tutorials/content-metadata-component.md
View File

@@ -5,7 +5,9 @@ Level: Advanced
# Content metadata component
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../content-services/content-metadata.component.md). This component is used to render the standard and custom metadata of generic content item (called a _node_) stored in Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own applicatioin. As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app).
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../content-services/content-metadata.component.md).
This component is used to render the standard and custom metadata of generic content item (called a _node_) stored in Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own applicatioin. As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app).
## About the `ContentMetadataComponent`

12
docs/tutorials/creating-javascript-app-using-alfresco-js-api.md
View File

@@ -5,7 +5,9 @@ Level: Basic
# Creating your Alfresco JavaScript application
In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco. This is a "getting started" task that should enable you to start developing your own JavaScript application on top of Alfresco Content Services or Alfresco Process Services.
In this tutorial you will learn how to create an application in JavaScript from scratch to interact with Alfresco.
This is a "getting started" task that should enable you to start developing your own JavaScript application on top of Alfresco Content Services or Alfresco Process Services.
The tutorial uses Alfresco Content Services for demonstration purposes, but development on
top of Alfresco Process Services follows exactly the same principles.
@@ -24,7 +26,7 @@ If you don't have an instance of Alfresco Content Services up and running, see
[Preparing the development environment](./preparing-environment.md)
to learn how to set it up.
You will need the `npm` client to download the requested Node libraries (also explained in
You will need the `npm` client to download the requested [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) libraries (also explained in
[Preparing the development environment](./preparing-environment.md)).
## Creating the JavaScript application
@@ -95,7 +97,7 @@ To deploy the `my-js-app` application into the Alfresco Content Services Docker
// List the active containers into your environment.
docker container ls
// Copy the CONTAINER_ID of the image with name 'alfresco/alfresco-content-repository-community:...'.
// Copy the CONTAINER_ID of the image with name 'alfresco/alfresco-content-repository-community:...'.
// Open a shell into the container.
docker exec -i -t <CONTAINER_ID> /bin/bash
@@ -103,10 +105,10 @@ To deploy the `my-js-app` application into the Alfresco Content Services Docker
// Create the 'my-js-app' folder into the Tomcat's webapps folder.
mkdir webapps/my-js-app
// Back to the host's shell.
// Back to the host's shell.
exit
// Copy the 'my-js-app' folder into the Tomcat's webapps folder.
// Copy the 'my-js-app' folder into the Tomcat's webapps folder.
docker cp ../my-js-app <CONTAINER_ID>:/usr/local/tomcat/webapps
This is all you need to deploy the JavaScript application into the same Tomcat instance as

4
docs/tutorials/creating-the-app-using-yeoman.md
View File

@@ -5,7 +5,9 @@ Level: Basic
# Creating your ADF application using Yeoman
In this tutorial you are going to see how to create an ADF application from scratch, using the [Yeoman scaffolding tool](http://yeoman.io/). This is a "getting started" task that should enable you to start developing your own ADF application.
In this tutorial you are going to see how to create an ADF application from scratch, using the [Yeoman scaffolding tool](http://yeoman.io/).
This is a "getting started" task that should enable you to start developing your own ADF application.
## Prerequisites

16
docs/tutorials/customising-login.md
View File

@@ -5,7 +5,9 @@ Level: Intermediate
# Customizing the Login component
In this tutorial you will learn how to customize the [`Login` component](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html) following the [technical documentation](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html). The task will be very simple. See the documentation for further details about customizing this component, along with examples.
In this tutorial you will learn how to customize the [Login component](../core/login.component.md) following the technical documentation.
The task will be very simple. See the documentation for further details about customizing this component, along with examples.
## Locating the component into your application
@@ -14,15 +16,15 @@ Starting from an existing ADF application, the `Login` component, like any other
it is stored in the `/src/app/components/login` path. In an ADF app created with [Yeoman](http://yeoman.io/)
it is stored in the `/src/app/login` path.
Once you have located the `Login` component for your application, you can customize it as described below.
Once you have located the Login component for your application, you can customize it as described below.
## Changing the header
As with every regular
[Angular Component](https://angular.io/guide/architecture-components),
you can customize the `Login` component can be customised via CSS, HTML and Typescript. In this simple
you can customize the Login component can be customised via CSS, HTML and Typescript. In this simple
example, we will customize the header (as described also in the
[technical documentation](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html)).
[technical documentation](../core/login.component.md)).
Open the [`login.component`](../core/login.component.md)`.html` file and change the content to match the following source code:
@@ -38,7 +40,7 @@ After saving the file, the login form will look like this:
## More examples
As mentioned earlier, this is a very basic example and the `Login` component can be customized
As mentioned earlier, this is a very basic example and the Login component can be customized
much more extensively than this. For a complete and detailed description, full of examples, check the
[technical documentation about the component](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html).
This describes every customization available for the `Login` component.
[technical documentation about the component](../core/login.component.md).
This describes every customization available for the Login component.

4
docs/tutorials/new-component.md
View File

@@ -5,7 +5,9 @@ Level: Basic
# Adding a new component
By definition, a _component_ controls a patch of screen called a _view_. For example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion ofan application's layout. In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application.
In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application.
By definition, a _component_ controls a patch of screen called a _view_. For example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion of an application's layout.
## Creating a component

4
docs/tutorials/new-view.md
View File

@@ -5,7 +5,9 @@ Level: Beginner
# Adding a new view
Every application developed in Angular is a single page application where the concepts of *view* and *routing* play a key role in the user experience. Being a single page application, the navigation between the different layouts (called *views*) is enabled through the *routing*. In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint.
In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint.
Every application developed in Angular is a single page application where the concepts of *view* and *routing* play a key role in the user experience. Being a single page application, the navigation between the different layouts (called *views*) is enabled through the *routing*.
## Creating a view

22
docs/tutorials/preparing-environment.md
View File

@@ -5,16 +5,18 @@ Level: Beginner
# Preparing the development environment
Here you will find the prerequisites for all the tutorials and descriptions of the entire documentation. This document contains the development environment description, along with the details of the suggested versions for each tool, library and module.
Here you will find the prerequisites for all the tutorials and descriptions of the entire documentation.
This document contains the development environment description, along with the details of the suggested versions for each tool, library and module.
## Node.js
[Node.js](https://nodejs.org) is a JavaScript runtime built using an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js uses [npm](https://www.npmjs.com/) as a public registry and package system.
[Node.js](https://nodejs.org) is a JavaScript runtime built using an event-driven, non-blocking I/O model that makes it lightweight and efficient. [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md).js uses [npm](https://www.npmjs.com/) as a public registry and package system.
You need the latest `node.js` from either the `8.x` or `9.x` branch.
To check the version, run the following command in a terminal.
node -v
node -v
## Angular CLI
@@ -24,15 +26,15 @@ Version 1.6.6 seems to be the most stable version currently. Earlier and later v
If you already have `Angular CLI` installed check the version by running:
ng --version
ng --version
To globally install `Angular CLI` version globally 1.6.6 run:
sudo npm install -g @angular/cli@1.6.6
sudo npm install -g @angular/cli@1.6.6
## Code Editor
We recommend [Visual Studio Code](http://code.visualstudio.com) - it's a free, lightweight and *very* powerful tool from Microsoft that works well for Angular development.
We recommend [Visual Studio Code](http://code.visualstudio.com) - it's a free, lightweight and _very_ powerful tool from Microsoft that works well for Angular development.
## Alfresco Content Services (optional)
@@ -52,24 +54,24 @@ Please note that ADF applications are compatible with [Alfresco Process Services
You can check if you have `Yeoman` installed by running `yo --version`. If this is not in your system then you can install it by running:
sudo npm install -g yo
sudo npm install -g yo
(The `sudo` command is not required on Windows but you may need to ensure you are running a command
prompt with Administrator privileges).
Install the latest version of the `generator-alfresco-adf-app` using the following command.
sudo npm install -g generator-alfresco-adf-app
sudo npm install -g generator-alfresco-adf-app
If you have an earlier version of the generator installed then it usually a good idea to uninstall it before reinstalling the latest version. This is especially true if you installed the generator packages before ADF 2.0 because the packages were renamed for this version.
Uninstall previous versions with:
sudo npm uninstall generator-alfresco-adf-app
sudo npm uninstall generator-alfresco-adf-app
...for versions after ADF 2.0 and:
sudo npm uninstall generator-ng2-alfresco-app
sudo npm uninstall generator-ng2-alfresco-app
...for versions before ADF 2.0.

14
docs/tutorials/working-with-data-table.md
View File

@@ -5,24 +5,26 @@ Level: Intermediate
# Working with a Data Table
In this tutorial you will learn how to populate a [`DataTable` component](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html) with custom data from a generic back-end service or third party API. As an example we are going to use data from one of the available services on Alfresco Content Services. However, the procedure is much the same if want to use an Alfresco Process Services endpoint or a third party API.
In this tutorial you will learn how to populate a DataTable component.
The custom data for the table generally comes from a generic back-end service or third party API. As an example we are going to use data from one of the available services on Alfresco Content Services. However, the procedure is much the same if want to use an Alfresco Process Services endpoint or a third party API.
## Prerequisites and data source
Before diving deep into the technical description of the
[`DataTable` component](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html),
[DataTable component](../core/datatable.component.md),
let's start with a description of the development environment and its prerequisites.
In this tutorial we will start from an existing ADF application set up to use (at least) Alfresco Content
Services as a service layer. For convenience and relevance to the Data Table, we suggest using the
[Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app). This application
is well documented [here](https://alfresco.github.io/alfresco-content-app/#/), and you can choose to
is well documented, and you can choose to
[build it from the source code](https://alfresco.github.io/alfresco-content-app/#/build) or
[run it in a Docker container](https://alfresco.github.io/alfresco-content-app/#/docker).
However, if you prefer to create a brand new ADF application from scratch then you should still be able
to follow the tutorial without difficulty.
For this tutorial, the endpoint used to populate the [Data Table component](../../lib/core/datatable/components/datatable/datatable.component.ts) is the
For this tutorial, the endpoint used to populate the [DataTable component](../../lib/core/datatable/components/datatable/datatable.component.ts) is the
[`/people` service](https://api-explorer.alfresco.com/api-explorer/#!/people/listPeople) which lists
all users available in an Alfresco Content Services instance. The `/people` service is suitable for the
purpose of this tutorial because it is available by default in the Alfresco Content Services REST API.
@@ -169,7 +171,7 @@ of the DataTable, and even smaller components like Attachment List, Comment List
Content Selector are also based on it.
Looking at the
[documentation](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html),
[documentation](../core/datatable.component.md),
we can see that it has a lot of different options, including single/multi selection, click events,
context menus, actions and keyboard navigation.
@@ -199,7 +201,7 @@ access to all the data in the row, if required. When you click a row, you should
## DataTable columns
Let's dig a bit deeper into the different options for rendering columns within the DataTable. The documentation for the
[Data Column component](https://alfresco.github.io/adf-component-catalog/components/DataColumnComponent.html)
[Data Column component](../core/data-column.component.md)
is quite in-depth and has lots of examples. We highly recommend checking it out.
From the documentation we can see that the [Data Column component](../core/data-column.component.md) has quite a few properties but the

4
docs/tutorials/working-with-nodes-js-api.md
View File

@@ -5,7 +5,9 @@ Level: Intermediate
# Working with Nodes using the JS API
In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api). We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library.
In this tutorial you will learn how to use the [`AlfrescoCoreRestApi`](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api).
We have developed some practical examples to show you how to interact with an instance of Alfresco Content Services without using the REST endpoints directly. With this approach the `AlfrescoCoreRestApi` is used as an abstraction layer, defining one of the core services of the [`alfresco-api-js`](https://github.com/Alfresco/alfresco-js-api) library.
## Preparing the development environment