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

Broken links and missing images for two tutorials. (#3357)

Browse Source 
* Broken links and missing images for two tutorials.

* Replaced .html with .md extensions

Replaced .html with .md extensions.

* Typo in Prerequi(si)tes

Typo in Prerequi(si)tes.
This commit is contained in:
Francesco Corti
2018-05-22 01:52:54 +02:00
committed by Eugenio Romano
parent e8cf6f6f38
commit 1e2be74e3c
6 changed files with 34 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,9 +13,9 @@ In this tutorial you are going to learn how to develop on top of Alfresco Conten
The only prerequisite of this tutorial is the availability of an instance of Alfresco Content Services in a [Docker](https://www.docker.com/) container. Docker is not the only option you might have for the deployment, but it is the faster we found to focus on the development instead of the environment setup.
If you don't have an instance of Alfresco Content Services up and running check the [preparation of the development environment](./preparing-the-development-environment.html).
If you don't have an instance of Alfresco Content Services up and running check the [preparation of the development environment](./preparing-environment.md).
Only to download the requested libraries, you will need the `npm` client. Also in this case check the [preparation of the development environment](./preparing-the-development-environment.html) for further details on how to install it into your development environment.
Only to download the requested libraries, you will need the `npm` client. Also in this case check the [preparation of the development environment](./preparing-environment.md) for further details on how to install it into your development environment.
## Creating the JavaScript application

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

@@ -1,42 +1,37 @@
---
Level: Basic
---
# Creating your ADF application using Yeoman
Learn how to create an ADF application from scratch, using the [Yeoman scaffolding tool](http://yeoman.io/). This task is recommended to get started before developing your 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
Before proceeding, make sure you have set up the Yeoman generator as described in
[Preparing the development environment](./preparing-the-development-environment.html). You will need
the generator to complete this tutorial successfully.
Before any further task, be sure you executed the optional section described in [the preparation of the development environment](./preparing-environment.html), dedicated to the installation of the ADF Yeoman generator. This is a requested prerequisite to complete this tutorial with success.
## Creating the ADF application
Creating a new application is straightforward using the [Yeoman generator](http://yeoman.io/). Open a terminal and execute the following command.
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
The generator will ask you a few questions as it runs, mainly the name of your app (in this example we
are going to use "myApp") and which blueprint you want to use:
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.
![yeoman_creation](../docassets/images/yeoman_creation.png)
The following blueprints are available:
You can select one of the three following blueprints.
- **Process Services:** This will generate an application for Alfresco Process Services. The main
components it contains are Login, App List, Task List, Form and Start Process.
**Process Services**
- **Content Services:** This will generate an application for Alfresco Content Services. The main
components it contains are Login, Document List, and Viewer.
This will generate an application for Alfresco Process Services. It mainly contains the following components: Login, App List, Task List, Form and Start Process.
- **Process and Content Services:** This will generate an application for both Alfresco Process and
Content Services using a combination of the two blueprints above.
**Content Services**
When you have made your selection, the generator will ask if you want to install dependencies right away.
Type "`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:
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.
@@ -48,44 +43,33 @@ see a few warnings at the end like this:
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 are not under the ADF team's control (they happen within the
Angular Flex Layout package that ADF depends on) but you can safely ignore them.
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` containing the new ADF application ready for
development.
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 to the correct Alfresco Content Services and/or
Alfresco Process Services, depending on which blueprint you used to create the project.
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 set up the back-end services correctly, `cd` into the directory of your app (`myApp` in our case)
and open the `proxy.conf.json` file. This file will tell Angular Webpack to create a proxy for your backend
services (Content or Process services). Change the URLs and ports to reflect where these services are
currently running. Below is an example of how the `proxy.conf.json` file should look:
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
"/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, you can run it using the `npm start` command from
a terminal (check that you are in the project folder `myApp` before doing this). The execution of the
command takes a couple of seconds, after which the browser will automatically open at
`http://localhost:4200/`.
Now that you ADF application is correctly configured, start it 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 very basic to begin with. This is
exactly what we need for this example, because it emphasizes the basics rather than complex features that
will be covered in intermediate/expert tutorials to follow. Below is a screenshot of the home page:
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 basis, 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.
![yeoman_start](../docassets/images/yeoman_start.png)

2
docs/tutorials/working-with-nodes-api-service.md
View File

@@ -4,7 +4,7 @@ In this tutorial you will learn how to use the [`NodesApiService`](https://githu
## Preparing the development environment
To focus the description on the `NodesApiService`, in this tutorial we are going to develop on top of the [Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app). If you don't have it already installed into your development environment, check the *how-to* description into the [preparation of the development environment](./preparing-the-development-environment.html).
To focus the description on the `NodesApiService`, in this tutorial we are going to develop on top of the [Alfresco Example Content Application](https://github.com/Alfresco/alfresco-content-app). If you don't have it already installed into your development environment, check the *how-to* description into the [preparation of the development environment](./preparing-environment.html).
Assuming that you have the Alfresco Example Content Application up and running, edit the `FileComponent` defined into the `src/app/components/files/files.component.ts` file. Change the `onNodeDoubleClick` method accordingly with the source code below.