Angular 2 y C3.css (1): Perspectiva inicial

1. Introducción

Vamos a crear una pequeña aplicación con Angular 2 y C3.css

La decisión de usar C3,css es:

1. No tiene javascript, por tanto no deberíamos tener problemas con Angular2
2. Es muy potente
3. Es muy pequeña
4. Y sobre todo porque es "responsive" y "mobile first"

Yo estoy utilizando Eclipse con Webclipse.

2. Creación del proyecto

Veamos los pasos que he hecho:

1. He creado un proyecto Angular 2

2. He descargado C3.css a la carpeta app/assets

3. En src/styles.css he puesto la ruta a C3.css

@import './assets/w3.css';

3. Diseño de la interfaz de usuario

Queremos tener un diseño parecido a este de W3Schools . No quiero redescubrir la rueda y utilizar recursos libres que parece que estan funcionando bien.

Para ello adaptamos a este diseño

+-------------------------------------------------+
| ☰              TITULO                          |
+------------+------------------------------------+
|            |                                    | 
| MENU       | ZONA DE CONTENIDO                  | 
| LATERAL    |                                    | 
| OCULTABLE  |                                    | 
|            |                                    | 
|            |                                    | 
+------------+------------------------------------+

Como vemos, queremos un panel lateral que se puede ocultar y mostrar que va a ser nuestro menú, y un panel de contenidos.

Ahora nos queda adaptar lo que nos da W3 al modo de actuar de Angular 2.

Para ello definiremos los siguientes elementos

1. Estructura de datos que guarde el menú (tipo árbol)

2. Componente del menú lateral (sidebar)

3. Componente del contenido principal

4. Servicio simple que proporcione la estructura de datos del menú lateral

De momento, para esta introducción ya tenemos demasiado. Mas adelante lo podemos complicar añadiendo mas components, barras de estado etc.

4. Estructura de datos del menú

Crearemos 2 ficheros 

• config.model.ts: donde guardaremos parámetros y enumeraciones
• menu.model.ts: que define la estructura de menú

Veamos el primero:

/**
 * Configuration and base enums
 */

/**
 * Type of action in a menu
 */
export enum MenuAction {
    Menu = 0,    // Link to submenu
    Component,   // Link to a component
    Procedure,   // Link to a procedure
    URL          // link to an URL
}


Y ahora el segundo

/**
 * Menu structure
 */
import { MenuAction } from './config.model'; // <-- import this

export class Menu {
  title: string;            // title of the menu
  actionType: MenuAction;   // Type of action as MenuAction
  action: string;           // action
  submenu: Menu;            // submenu
  info: string;             // Additional info

  constructor(title: string, actionType: MenuAction,
              info: string, action: string, submenu: Menu) {
  this.title = title;
  this.actionType = actionType;
  this.info = info;
  this.action = action ;
  this.submenu = submenu;
  }
}