mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
Ole tutorial updates (#6153)
[skip ci] * Restructure tutorials to remove duplication * Update to work with ADF 4.0 and fix language + grammar * Restructure and add Angular CLI section for prerequisites * Language fixes
This commit is contained in:
Ole Hejlskov
GitHub
parent
dea062263e
commit
71ec41f303
@ -1,7 +1,7 @@
|
||||
# Prerequisites for building and running apps with the Alfresco Application Development Framework
|
||||
|
||||
See our tutorial
|
||||
[Preparing the development environment](docs/tutorials/preparing-environment.md)
|
||||
[Creating your first ADF Application](docs/tutorials/creating-your-first-adf-application.md)
|
||||
for full details of what you need to install before using ADF.
|
||||
|
||||
If you experience [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)
|
||||
|
||||
@ -23,9 +23,7 @@ See the [Introduction page](INTRODUCTION.md) to get started with the Alfresco Ap
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration. See our tutorial
|
||||
[Preparing the development environment](docs/tutorials/preparing-environment.md)
|
||||
for full details.
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration. see the prerequisites section in [creating your first ADF Application](./creating-your-first-adf-application.md) for full details.
|
||||
|
||||
## Components
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
title: Tutorials
|
||||
children:
|
||||
- creating-your-first-adf-application.md: 'Creating your first ADF application'
|
||||
- creating-the-app-using-yeoman.md: 'Creating your ADF application using Yeoman'
|
||||
- creating-javascript-app-using-alfresco-js-api.md: 'Creating your JavaScript application using alfresco-js-api'
|
||||
- new-component.md: 'Adding a new component'
|
||||
- new-view.md: 'Adding a new view'
|
||||
|
||||
@ -8,7 +8,6 @@ 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/). |
|
||||
| [**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. |
|
||||
|
||||
@ -62,7 +62,7 @@ When Activiti 7 is up and running again, you will be then ready to build your ow
|
||||
## Building the ADF application
|
||||
|
||||
You can create an ADF application easily using the [Yeoman generator](https://yeoman.io/).
|
||||
See our [tutorial](creating-the-app-using-yeoman.md) for a full description of
|
||||
See our [tutorial](creating-your-first-adf-application.md) for a full description of
|
||||
how to do this. Make sure you select "Process Services with Activiti" as the type of project
|
||||
to create.
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ Level: Beginner
|
||||
|
||||
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.
|
||||
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, but you can use the same principles to customize the themes in any ADF application.
|
||||
|
||||
## About the `adf-core` theming
|
||||
|
||||
|
||||
@ -22,12 +22,7 @@ services then you might need to proxy your application first.
|
||||
The only prerequisite of this tutorial is that an instance of Alfresco Content Services in a [Docker](https://www.docker.com/) container should be available. Docker is not the only option for deployment,
|
||||
but its simplicity allows us to focus more on the development of the environment setup.
|
||||
|
||||
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`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) libraries (also explained in
|
||||
[Preparing the development environment](./preparing-environment.md)).
|
||||
You will need the `npm` client to download the requested [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) libraries.
|
||||
|
||||
## Creating the JavaScript application
|
||||
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
---
|
||||
Title: Creating an ADF app using Yeoman
|
||||
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.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before any further task, be sure you executed the optional section described in [the preparation of the development environment](./preparing-environment.md), dedicated to the installation of the ADF Yeoman generator. This is a requested prerequisite to complete this tutorial with success.
|
||||
|
||||
## Creating the ADF application
|
||||
|
||||
The creation of a brand new application is straightforward using the [Yeoman generator](http://yeoman.io/). Open a terminal and execute the following command.
|
||||
|
||||
yo alfresco-adf-app
|
||||
|
||||
After the execution, the generator asks few questions: mainly the name of your app (in this example we are going to use `myApp`) and which blueprint you want to use. below the picture showing how the wizard looks like.
|
||||
|
||||
|
||||
|
||||
You can select one of the three following blueprints.
|
||||
|
||||
**Process Services**
|
||||
|
||||
This will generate an application for Alfresco Process Services. It mainly contains the following components: Login, App List, Task List, [`Form`](../../lib/process-services/src/lib/task-list/models/form.model.ts) and Start Process.
|
||||
|
||||
**Content Services**
|
||||
|
||||
This will generate an application for Alfresco Content Services. It mainly contains the following components: Login, Document List, Viewer.
|
||||
|
||||
**Process and Content Services**
|
||||
|
||||
This will generate an application for both Alfresco Process and Content Services and will be a combination of the two blueprints above.
|
||||
|
||||
Select your preferred one and the generator asks if you want to install dependencies right away. Enter `Y` and hit enter. This can take a minute or two depending on your internet connection. You might see a few warnings at the end like this:
|
||||
|
||||
npm notice created a lockfile as package-lock.json. You should commit this file.
|
||||
npm WARN @mat-datetimepicker/core@1.0.4 requires a peer of @angular/core@^5.2.3 but none is installed. You must install peer dependencies yourself.
|
||||
npm WARN @mat-datetimepicker/core@1.0.4 requires a peer of @angular/material@^5.2.4 but none is installed. You must install peer dependencies yourself.
|
||||
npm WARN @mat-datetimepicker/core@1.0.4 requires a peer of @angular/cdk@^5.2.4 but none is installed. You must install peer dependencies yourself.
|
||||
npm WARN @mat-datetimepicker/moment@1.0.4 requires a peer of @angular/material@^5.2.4 but none is installed. You must install peer dependencies yourself.
|
||||
npm WARN @mat-datetimepicker/moment@1.0.4 requires a peer of @angular/material-moment-adapter@^5.2.4 but none is installed. You must install peer dependencies yourself.
|
||||
npm WARN @angular/compiler-cli@5.2.10 requires a peer of @angular/compiler@5.2.10 but none is installed. You must install peer dependencies yourself.
|
||||
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
|
||||
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
|
||||
|
||||
These warnings are normal. Unfortunately they happen within the Angular Flex Layout package that ADF depends on. You can safely ignore them.
|
||||
|
||||
Once done, you will find a folder named `myApp` where you can find all the ADF application already created and completed.
|
||||
|
||||
## Configuring the application
|
||||
|
||||
To configure the ADF application, you only need to point on the correct Alfresco Content Services and Alfresco Process Services, accordingly with the blueprint you decided to use during the creation.
|
||||
|
||||
To setup the correct back-end services, change into the directory of your app (`myApp` in our case) and inspect the `proxy.conf.json` file. This file will tell Angular Webpack to create a proxy for your backend (Content or Process services). Change the URLs and ports to reflect where they are currently running. Below an example of how the `proxy.conf.json` file should look like.
|
||||
|
||||
{
|
||||
"/alfresco": {
|
||||
"target": "http://localhost:8080", // <-- Change this!
|
||||
"secure": false,
|
||||
"changeOrigin": true
|
||||
},
|
||||
"/activiti-app": {
|
||||
"target": "http://localhost:9999", // <-- Change this!
|
||||
"secure": false,
|
||||
"changeOrigin": true
|
||||
}
|
||||
}
|
||||
|
||||
## Using the application
|
||||
|
||||
Now that your ADF application is correctly configured, start it by running the `npm start` command from a terminal, double checking you are located into the project folder (in our case `myApp`). The execution of the command takes a couple of seconds and a browser will automatically open at `http://localhost:4200/`.
|
||||
|
||||
As you can see from the user interface, the Alfresco ADF application is really straightforward and basic. This is a precise requirement for this example, because it focuses the attention on the comprehension of the basics, instead of containing complex features that will be part of an intermediate/expert learning path. Below a screenshot of how the home page looks like.
|
||||
|
||||
|
||||
@ -7,35 +7,28 @@ Level: Basic
|
||||
|
||||
This tutorial shows you how to set up your development environment and create an ADF application.
|
||||
|
||||
In order to get up and running with ADF development, you will need to install a few prerequisites: `node.js`, `Yeoman` and a code editor.
|
||||
To get up and running with ADF development, you will need to install a few prerequisites: `node.js`, `Yeoman`, and a code editor.
|
||||
Once you have the prerequisites installed, you need to create the application using the ADF Yeoman generator, then configure your ADF application to point to your Alfresco Content Services repository.
|
||||
|
||||
## Install node.js
|
||||
## Prerequisites
|
||||
|
||||
### Install node.js
|
||||
|
||||
You need the latest `node.js` release, which you can download from [https://nodejs.org/en/](https://nodejs.org/en/). Choose the installer for your OS and follow the install instructions. Once completed, open a terminal and verify the installation with the following command:
|
||||
|
||||
node -v
|
||||
|
||||
*Note: Both version `10.x` and `11.x` should work just fine.*
|
||||
*Note: Both version `14.x` and `12.x` should work just fine.*
|
||||
|
||||
**TIP**: If you are planning to do extensive development with ADF, `node.js` and Angular, you might consider installing a version manager for `node.js` such as [n](https://github.com/tj/n) or [nvm](https://github.com/creationix/nvm/). This tool will allow you to have multiple `node.js` versions installed at the same time, and easily switch between versions.
|
||||
**TIP**: If you are planning to do extensive development with ADF, `node.js`, and `Angular`, you might consider installing a version manager for `node.js` such as [n](https://github.com/tj/n) or [nvm](https://github.com/creationix/nvm/). This tool will allow you to have multiple `node.js` versions installed simultaneously and quickly switch between versions.
|
||||
|
||||
## Installing a code editor
|
||||
|
||||
All Angular development will be done using [Typescript](https://www.typescriptlang.org). With this in mind, it a great thing to have tools that make development a little easier, but really any text editor will do just fine.
|
||||
|
||||
We recommend [Visual Studio Code](http://code.visualstudio.com) - it's a free, lightweight and *very* powerful tool from Microsoft that works well with Angular development and has a [big ecosystem of plugins](https://marketplace.visualstudio.com/VSCode) to make the developer experience even better.
|
||||
|
||||
Other recommendations include IntelliJ IDEA or WebStorm from [JetBrains](https://www.jetbrains.com) *but note that the community edition does not support [Typescript](https://www.typescriptlang.org).*
|
||||
|
||||
|
||||
## Install ADF Yeoman generator
|
||||
### Install ADF Yeoman generator
|
||||
|
||||
|
||||
|
||||
**Note:** If you're on Linux or macOS you might need to run these commands with `sudo`.
|
||||
**Note:** If you're on Linux or macOS, you might need to run these commands with `sudo`.
|
||||
|
||||
You need to ensure you have `Yeoman` installed by running `yo --version`. If this is not in your system you should run:
|
||||
You need to ensure you have `Yeoman` installed by running `yo --version`. If this is not in your system, you should run:
|
||||
|
||||
npm install -g yo
|
||||
|
||||
@ -43,6 +36,21 @@ Now install the latest version of the `generator-alfresco-adf-app`:
|
||||
|
||||
npm install -g generator-alfresco-adf-app@latest
|
||||
|
||||
### Install Angular CLI
|
||||
|
||||
To take full advantage of Angular, we suggest you install the latest version of [Angular CLI](https://cli.angular.io)
|
||||
|
||||
npm install -g @angular/cli
|
||||
|
||||
This will make it easy to create components, libraries, and much more.
|
||||
|
||||
### Installing a code editor
|
||||
|
||||
All Angular development is using [Typescript](https://www.typescriptlang.org). With this in mind, it a great thing to have tools that make development a little easier, but any text editor will do just fine.
|
||||
|
||||
We recommend [Visual Studio Code](http://code.visualstudio.com) - it's a free, lightweight, and *very* powerful tool from Microsoft that works well with Angular development and has a [big ecosystem of plugins](https://marketplace.visualstudio.com/VSCode) to make the developer experience even better.
|
||||
|
||||
Other recommendations include IntelliJ IDEA or WebStorm from [JetBrains](https://www.jetbrains.com) *but note that the community edition does not support [Typescript](https://www.typescriptlang.org).*
|
||||
|
||||
## Create your first ADF application
|
||||
|
||||
@ -52,38 +60,40 @@ Now that we have all the prerequisites in order, it's time to generate an applic
|
||||
|
||||
Enter a name and choose `Content Services` as the application blueprint, then enter `Y` to install the dependencies.
|
||||
|
||||
The `Yeoman` generator will now create a new project and install all dependencies required for your application.
|
||||
The `Yeoman` generator will create a new project and install all dependencies required for your application.
|
||||
|
||||
*Note: The `Yeoman` generator creates a new directory for your project. Make sure you change into this new directory.*
|
||||
|
||||
## Configure ADF to work with Alfresco Content Services
|
||||
|
||||
The next step is to open up the newly-created project in your code editor, and open the file `proxy.conf.json`. Change the `target` property in this file so it points to your Alfresco Content Services URL and port. Please refer to your installation guide to find this URL, or if you're running an online trial you will find the information in the email.
|
||||
The next step is to open up the newly-created project in your code editor, and open the file `proxy.conf.js`. Change the `target` property in this file, so it points to your Alfresco Content Services URL and port. Please refer to your installation guide to find this URL, or if you're running an online trial, you will find the information in the email.
|
||||
|
||||
Modify `"target": "http://localhost:8080",` so that it matches your URL and save the file.
|
||||
|
||||
Please note that you do not need `/alfresco` at the end of the target URL. Let's say you've launched Alfresco Content Services 6.1 using [Docker Compose](https://docs.alfresco.com/6.0/tasks/deploy-docker-compose.html). Your Alfresco Content Services repository might be available at `http://localhost:8082/alfresco`. In this case you will want the `proxy.conf.json` file to look like this:
|
||||
Please note that you do not need `/alfresco` at the end of the target URL. Let's say you've launched Alfresco Content Services 6.1 using [Docker Compose](https://docs.alfresco.com/6.0/tasks/deploy-docker-compose.html). Your Alfresco Content Services repository might be available at `http://localhost:8080/alfresco`. In this case, you will want the `proxy.conf.json` file to look like this:
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
module.exports = {
|
||||
"/alfresco": {
|
||||
"target": "http://localhost:8082",
|
||||
"target": "http://localhost:8080",
|
||||
"secure": false,
|
||||
"changeOrigin": true
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
If you're running an [online trial](https://www.alfresco.com/platform/content-services-ecm/trial/online), consult your emails for the correct URL. The `proxy.conf.json` should look like this:
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
module.exports = {
|
||||
"/alfresco": {
|
||||
"target": "https://xyz.trial.alfresco.com",
|
||||
"secure": true,
|
||||
"target": "https://xyz.trials.alfresco.com",
|
||||
"secure": false,
|
||||
"changeOrigin": true
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Start the application
|
||||
@ -96,18 +106,17 @@ A browser will automatically open up at `http://localhost:4200`.
|
||||
|
||||
|
||||
|
||||
Click the key icon in the side navigation and you can now log in!
|
||||
Click the key icon in the side navigation, and you can now log in!
|
||||
|
||||
*Note:* If you're running an online trial you can find your login credentials in the welcome email.
|
||||
*Note:* If you're running an online trial, you can find your login credentials in the welcome email.
|
||||
|
||||
Take a few minutes to explore your application. You have the basic features: Browsing the repository, uploading and previewing documents.
|
||||
Take a few minutes to explore your application. You have the essential features: Browsing the repository, uploading, and previewing documents.
|
||||
|
||||
|
||||
# Next step
|
||||
|
||||
Congratulations! You're now ready to start developing your first ADF application!
|
||||
|
||||
In the next tutorial you will explore how you can extend, use and configure ADF Components by customizing the login screen.
|
||||
In the next tutorial, you will explore how you can extend, use, and configure ADF Components by customizing the login screen.
|
||||
|
||||
* [Extend, use and configure ADF Components](using-components.md)
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
---
|
||||
Title: Customizing the Login component
|
||||
Level: Intermediate
|
||||
---
|
||||
|
||||
# Customizing the Login component
|
||||
|
||||
In this tutorial you will learn how to customize the [Login component](../core/components/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
|
||||
|
||||
Starting from an existing ADF application, the `Login` component, like any other component, is stored in a subfolder of the `app` folder. In the
|
||||
[Alfresco Content App](https://github.com/Alfresco/alfresco-content-app)
|
||||
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](../core/components/login.component.md) 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](../core/components/login.component.md) can be customised via CSS, HTML and Typescript. In this simple
|
||||
example, we will customize the header (as described also in the
|
||||
[technical documentation](../core/components/login.component.md)).
|
||||
|
||||
Open the [`login.component`](../core/components/login.component.md)`.html` file and change the content to match the following source code:
|
||||
|
||||
```html
|
||||
<adf-login ...>
|
||||
<adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
|
||||
</adf-login>
|
||||
```
|
||||
|
||||
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](../core/components/login.component.md) can be customized
|
||||
much more extensively than this. For a complete and detailed description, full of examples, check the
|
||||
[technical documentation about the component](../core/components/login.component.md).
|
||||
This describes every customization available for the [Login component](../core/components/login.component.md).
|
||||
@ -1,102 +0,0 @@
|
||||
---
|
||||
Title: Preparing the development environment
|
||||
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.
|
||||
|
||||
## 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`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md).js uses [npm](https://www.npmjs.com/) as a public registry and package system.
|
||||
|
||||
We suggested to use the current long term support version of `node.js` check the LTS version [here](https://nodejs.org/).
|
||||
|
||||
To check your running version, run the following command in a terminal.
|
||||
|
||||
```sh
|
||||
node -v
|
||||
````
|
||||
|
||||
## Angular CLI
|
||||
|
||||
[Angular CLI](https://cli.angular.io/) is a tool to initialize, develop, scaffold and maintain [Angular](https://angular.io/) applications
|
||||
|
||||
Version 1.6.6 seems to be the most stable version currently. Earlier and later versions have issues regarding `@angular/devkit-core`.
|
||||
|
||||
If you already have `Angular CLI` installed check the version by running:
|
||||
|
||||
```sh
|
||||
ng --version
|
||||
```
|
||||
|
||||
To globally install `Angular CLI` version globally 1.6.6 run:
|
||||
|
||||
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.
|
||||
|
||||
## Alfresco Content Services (optional)
|
||||
|
||||
If you want to develop on top of the [Alfresco Content Services](https://www.alfresco.com/platform/content-services-ecm), you might want to install it using the [Alfresco Content Services Community Deployment](https://github.com/Alfresco/acs-community-deployment.git) project on GitHub.
|
||||
|
||||
We suggest to follow the instructions related to the Docker deployment, considering that you are working on a development environment.
|
||||
|
||||
Please note that you might want to deploy and use Alfresco Content Services Enterprise Edition instead. In this case you can use the [Alfresco Content Services Deployment](https://github.com/Alfresco/acs-deployment.git) project on GitHub.
|
||||
|
||||
## Alfresco Process Services (optional)
|
||||
|
||||
If you want to develop on top of the [Alfresco Process Services](https://www.alfresco.com/platform/process-services-bpm), you might want to install it as described in the [official documentation](https://docs.alfresco.com/process-services1.8/topics/installing_process_services.html).
|
||||
|
||||
Please note that ADF applications are compatible with [Alfresco Process Services powered by Activiti](https://www.alfresco.com/platform/process-services-bpm) and not with [Activiti](https://www.activiti.org/) yet.
|
||||
|
||||
## ADF Yeoman generator (optional)
|
||||
|
||||
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
|
||||
|
||||
(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
|
||||
|
||||
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
|
||||
|
||||
...for versions after ADF 2.0 and:
|
||||
|
||||
sudo npm uninstall generator-ng2-alfresco-app
|
||||
|
||||
...for versions before ADF 2.0.
|
||||
|
||||
## Alfresco Example Content Application (optional)
|
||||
|
||||
In some tutorials you might be required to use the [Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app) available in a public repository on GitHub named [`alfresco-content-app`](https://github.com/Alfresco/alfresco-content-app). The Alfresco Example Content Application is an example application that is used as a starting point for development.
|
||||
|
||||
The Alfresco Example Content Application requires an instance of Alfresco Content Services up and running, to work properly. If you don't have it already, follow the instructions above in the `Alfresco Content Services (optional)` paragraph.
|
||||
|
||||
To make the Alfresco Example Content Application work in your development environment, clone the [`alfresco-content-app` GitHub repository](https://github.com/Alfresco/alfresco-content-app) using the following command in a terminal.
|
||||
|
||||
git clone https://github.com/Alfresco/alfresco-content-app
|
||||
|
||||
Once completed, edit the `proxy.conf.js` file into the root of the project and change the `target` property according to the Alfresco Content Services instance. Below is the setup if you are using the [Alfresco Content Services Community Deployment](https://github.com/Alfresco/acs-community-deployment.git) project on GitHub.
|
||||
|
||||
module.exports = {
|
||||
"/alfresco": {
|
||||
"target": "http://0.0.0.0:8082",
|
||||
...
|
||||
}
|
||||
};
|
||||
|
||||
Once done, open a terminal and move into the `alfresco-content-app` folder and run `npm install`. Then run `npm start` and the application will be served on port `4200`, at the url `http://localhost:4200`.
|
||||
@ -5,7 +5,7 @@ Level: Basic
|
||||
|
||||
# Using ADF Components
|
||||
|
||||
In this tutorial you will learn how to extend, use and configure ADF Components.
|
||||
In this tutorial, you will learn how to extend, use, and configure ADF Components.
|
||||
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ The final result will look like this:
|
||||
|
||||
|
||||
|
||||
We have carefully picked these three customizations because they cover the three fundamental ways you can ways to use, extend and configure ADF Components:
|
||||
We have carefully picked these three customizations because they cover the three fundamental ways you can use, extend, and configure ADF Components:
|
||||
|
||||
1. Configuration Properties
|
||||
2. Event Listeners
|
||||
@ -24,11 +24,11 @@ We have carefully picked these three customizations because they cover the three
|
||||
You should always consult the documentation for the component you are looking to use. For this exercise it would be useful to open a browser window with the [Login Component](../core/components/login.component.md)
|
||||
documentation.
|
||||
|
||||
Let's do a practical example with each approach.
|
||||
Let's do a practical example for each approach.
|
||||
|
||||
## Configuration Properties
|
||||
|
||||
Angular components can easily be configured via properties in the HTML template. In this example we will remove the `Remember me`, `Need Help?` and `Register` links in the footer.
|
||||
Angular components can be configured via properties in the HTML template. In this example, we will remove the `Remember me`, `Need Help?` and `Register` links in the footer.
|
||||
|
||||
Make sure you have the application running from the [previous tutorial](creating-your-first-adf-application.md).
|
||||
|
||||
@ -115,11 +115,11 @@ export class LoginComponent {
|
||||
}
|
||||
```
|
||||
|
||||
Save the files, go to the [login component,](../core/components/login.component.md) enter a valid username and password and you should now see an alert. Looking in the console in the browser, you'll see the event data. Here we get all the details for the form.
|
||||
Save the files, go to the [login component,](../core/components/login.component.md) enter a valid username and password, and you should now see an alert. Looking in the console in the browser, you'll see the event data. Here we get all the details for the form.
|
||||
|
||||
## Content Projection / HTMl Extensions
|
||||
|
||||
The last way a component can be configured or extended is through an approach called Content Projection. This allows components to put placeholders in their template, allowing developers to "project" their own code or components into pre-defined locations within the component.
|
||||
The last way a component can be configured or extended is through an approach called Content Projection. This allows components to put placeholders in their template, allowing developers to "project" their code or components into pre-defined locations within the component.
|
||||
|
||||
In normal HTML, elements can be nested, for example:
|
||||
|
||||
@ -134,7 +134,7 @@ In normal HTML, elements can be nested, for example:
|
||||
We can use the same approach with ADF Components to inject custom code or whole components into the ADF component.
|
||||
|
||||
The documentation gives information about which targets are in place. Components that support content
|
||||
project have a
|
||||
project has a
|
||||
[Transclusions](../user-guide/transclusion.md)
|
||||
section in the doc page with all the relevant details.
|
||||
|
||||
@ -159,7 +159,7 @@ Let's add a simple Hello World message in the footer. Open the template `src/app
|
||||
|
||||
Be careful that you place the `<adf-login-footer/>` tag _inside_ the `<adf-login/>` tag.
|
||||
|
||||
Inside the `<adf-login-footer/>` or `<adf-login-header/>` tags we can put anything we want, as long as we wrap it inside an `<ng-template/>` tag. We can also source in custom or 3rd party components.
|
||||
Inside the `<adf-login-footer/>` or `<adf-login-header/>` tags, we can put anything we want, as long as we wrap it inside an `<ng-template/>` tag. We can also source in custom or 3rd party components.
|
||||
|
||||
### Bonus objective: Add a custom logo and background to the login screen
|
||||
|
||||
@ -168,7 +168,7 @@ docs to find out how you can change the logo and background image!
|
||||
|
||||
# Next steps
|
||||
|
||||
We have a number of tutorials for you to explore. Here are a few suggested ones to try next:
|
||||
We have some tutorials for you to explore. Here are a few suggested ones to try next:
|
||||
|
||||
- [Basic theming](basic-theming.md)
|
||||
- [Create a new page](new-view.md)
|
||||
|
||||
@ -28,9 +28,7 @@ We have developed some practical examples to show you how to interact with an in
|
||||
|
||||
To focus the description on the [`NodesApiService`](../core/services/nodes-api.service.md), we will develop on top of the
|
||||
[Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app).
|
||||
If you don't have it already installed in your development environment then see the
|
||||
_how-to_ description in
|
||||
[preparation of the development environment](./preparing-environment.md).
|
||||
If you don't have it already installed in your development environment then see the prerequisites section in [creating your first ADF Application](./creating-your-first-adf-application.md).
|
||||
|
||||
When you have the Alfresco Example Content Application up and running, edit the `FileComponent`
|
||||
defined in `src/app/components/files/files.component.ts`. Change the `navigateTo` method
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
{ "title": "Tutorials", "file": "tutorialIndex.md",
|
||||
"children": [
|
||||
{ "title": "Creating your first ADF application", "file": "creating-your-first-adf-application.md"},
|
||||
{ "title": "Creating your ADF application using Yeoman", "file": "creating-the-app-using-yeoman.md"},
|
||||
{ "title": "Creating your JavaScript application using alfresco-js-api", "file": "creating-javascript-app-using-alfresco-js-api.md"},
|
||||
{ "title": "Adding a new component", "file": "new-component.md"},
|
||||
{ "title": "Adding a new view", "file": "new-view.md"},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user