Page History
Info |
---|
This page is relevant to you when you want to create your own theme for Blueriq using The Angular framework for Blueriq |
Info |
---|
The Blueriq Material Theme can be used with Blueriq 10.x and onward. |
This will explain on how to get your own material theme up and running so you can start create your own theme based on this kickstarter
Setup the Blueriq Material
...
Theme
The following steps should be taken to get the Angular based Blueriq Material Theme running
...
- Download/fork our theme kickstarter here:
...
...
...
...
...
You've installed yarn, so to install angular material design we also use yarn. Open a command prompt and add Angular material and Angular cdk:
yarn add @angular/material @angular/cdk
To install animations:
- yarn add @angular/animations
Add the import to app.module.ts:
Code Block import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
and:
- add BrowserAnimationsModule to the array of imports in app.module.ts.
Include a theme in styles.css:
Code Block @import "~@angular/material/prebuilt-themes/indigo-pink.css";
Some components of material design rely on HammerJS for gestures. So install hammerjs:
yarn add hammerjs
After install add the import to src/main.ts:
Code Block import 'hammerjs'
You're going to use different icons of material, so add the following link to index.html:
Code Block <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Add Angular component
Now you're ready to add components. Using the command prompt and Angular CLI's scaffolding tooling, add the page component:
...
Replace the generated code in `src\app\page\page.component.ts` with the snipped from under:
Code Block |
---|
import { Component, Host } from '@angular/core';
import { BlueriqComponent } from '@blueriq/angular';
import { Page } from '@blueriq/core';
@Component({
templateUrl: './page.component.html',
styleUrls: ['./page.component.css'],
})
@BlueriqComponent({
type: Page,
})
export class PageComponent {
constructor(@Host() public page: Page) {}
} |
- material
- Configure the `proxy.conf.js` correctly. Read the README.md on how to set the environment variable
- Configure the baseUrl in `environment.ts`
- Set up the base href (see the Base href section below)
- https://my.blueriq.com/ApiDocs/npm-libs/blueriq-angular/0.6.16/additional-documentation/getting-started.html
- Login to artifactory: npm login --always-auth --scope=@blueriq --registry=http://my-example-artifactory.com/artifactory/api/npm/yarn/
- Remove the
yarn.lock
file that is distributed with the kickstarter theme (seeyarn.lock
section below) - Run the following command `yarn install` to install all packages
- Run the following command `yarn start` to see your theme in action. This which will open up a browser that navigates to the `default` shortcut that you configured or use `localhost:4200/flow/<project>/<flow>`
For other possible routes please look at the `app.module.ts` routes.
Customization
The next step would be to customize it to your liking. Take a look at the theme folder and read the 'THEMING.md' to get the best practice on how to do so.
Anchor yarn.lock yarn.lock
yarn.lock
file
Anchor | ||||
---|---|---|---|---|
|
The yarn.lock
file that is distributed with the kickstarter theme is used by Blueriq's CI servers. It references Blueriq's internal Artifactory server, as the CI servers cannot connect to the internet directly.
Therefore, when initially using the kickstarter project, you should remove the yarn.lock file before performing `yarn install`. You should check the resulting new yarn.lock
file into your version control system.
Anchor | ||||
---|---|---|---|---|
|
Angular apps require a base href in order to find the proper resources. More information can be found in the Angular documentation on deployment.
The Blueriq Material theme contains some inline javascript code to determine the base href in case the theme is served from the Runtime itself, because the URL can differ per customer and per server. If you know the URL on which the Angular application runs beforehand, you are encouraged to remove the inline javascript code from index.html and configure the base_href statically, by including a hard coded <base href="/path/to/your/app">
tag or by specifying in the base href in angular.json
.
In production
For more information on this subject please read the following: Angular and Deploying the theme
...
In `src\app\page\page.component.html` add a simple template using the injected page data: `
Code Block |
---|
<h1>{{ page.displayName }}</h1>
<div *ngFor="let child of page.children" [bqElement]="child"></div> |
The `*ngFor` syntax is Angular's way of implementing a repeat over a list, in this case all children of the page. The `[bqElement]` is an Angular _directive_ that causes the passed `child` object to be rendered using the component that matches.
The brackets around `bqElement` cause the argument to be interpreted as TypeScript code.
Register as Blueriq component Besides registering the component as an Angular declaration, we also need to register it as a Blueriq component for the `@BlueriqComponent` decorator to be picked up.
...
In `src\app\app.module.ts` you need to add the following:
Code Block |
---|
providers: [
BlueriqComponents.register([
PageComponent,
]),
], |
See it in action
If `ng serve` is still running, you can immediately open your browser and the page will have automatically refreshed. You should now see the title of the page if everything went well. In Web Inspector, open the console tab and verify that the table with Blueriq components now contains your page component.