Uno de los marcos más populares para crear aplicaciones de una sola página es Angular. Se basa en la plantilla MVC, que simplifica el desarrollo y la prueba de dicha aplicación. Muchos usuarios del generador de informes FastReport necesitan mostrar sus informes en aplicaciones web Angular, que discutimos en el artículo usando FR Core Web Report en la aplicación de página única Angular 7. Ahora, en la página web podemos mostrar no solo el informe sino también el cubo de datos de FastCube .NET. Veamos cómo hacerlo.
Inicialmente, debería haber instalado: plataforma Node.js y NET Core SDK 2.0, o mejor más reciente.
Puede crear una aplicación utilizando una plantilla de sdk. Para hacer eso, escriba un comando en una línea de comando:
dotnet new angular -o FCubeAngular
Este comando crea una aplicación de demostración lista para comenzar. Todo lo que tenemos que hacer es agregar nuestro funcional. Ahora en la línea de comando vamos al catálogo con la aplicación creada con la ayuda de un comando:
cd FCubeAngular
e instale paquetes de javascript con un comando:
npm install
Antes de comenzar a trabajar con nuestra aplicación web, tenemos que preparar paquetes Nuget con bibliotecas FastCube. Abra la solución FastCube.Core.sln y construya el objeto. Obtendrá dos paquetes: FastCube.Web.2020.2.1.nupkg y FastCube.Core.2020.2.1.nupkg. Deben colocarse en un directorio local, que luego usará como fuente local de paquetes Nuget.
Ahora puede iniciar el proyecto que había creado antes. Podemos comenzar a instalar paquetes FastCube de inmediato. Abra el administrador de paquetes Nuget. En la esquina superior derecha de la ventana puede ver un icono de engranaje, abre la configuración de las fuentes del paquete. Haga clic en él y agregue una nueva fuente de paquetes: el directorio con nuestros paquetes FastCube:
Seleccione la fuente del paquete agregado en la lista desplegable e instale los paquetes:
Conecte FastCube en el archivo Startup.cs en el método Configure () agregando un código:
app.UseFastCube();
Nuestra aplicación ya contiene el controlador WeatherForecastController. Agreguemos nuestro método web:
[HttpGet("[action]")] public IActionResult ShowCube() { Cube cube = new Cube(); Slice slice = new Slice() { Cube = cube }; FilterManager filterManager = new FilterManager() { Cube = cube }; WebGrid grid; grid = new WebSliceGrid() { Slice = slice }; ViewBag.WebGrid = grid; cube.SourceType = SourceType.File; cube.Load(Path.Combine("C:\\Users\\FR\\Downloads\\fastcube-net-master\\Demos\\Data\\", "Cubes", "calculated_measures.mdc")); return View(); }
Si tiene problemas con la pantalla devuelta, verifique la clase de la que se hereda el controlador. Debe ser Controller, no BaseController.
Ahora consideremos el método web que agregamos. Los objetos Cube y Slice están conectados porque, de hecho, un segmento es parte de un cubo. Para generar una tabla cruzada interactiva, se utiliza el objeto WebGrid. Puede generar tanto un segmento WebCubeGrid como un cubo WebSliceGrid. Descarguemos el cubo que habíamos creado anteriormente en la versión de escritorio de FastCube .NET.
Para mostrarlo, necesitaremos una vista. Esto se puede hacer haciendo clic con el botón derecho en la firma del método ShowCube. La vista contendrá una sola línea de código:
@await ViewBag.WebGrid.Render()
Vayamos a una aplicación SPA ubicada en el directorio ClientApp. Tenemos que agregar nuestro componente al directorio de la aplicación. Mostrará un iframe con la vista que habíamos creado anteriormente. Agregue un subdirectorio de cubo en el directorio de la aplicación. Agregue dos archivos en él: cube.component.html y cube.component.ts. El primero es una pantalla, el segundo es un controlador.
El archivo cube.component.html:
Tenga en cuenta la función safeUrl, que transforma la URL en un modo seguro. Lo agregaremos más tarde.
El botón activa la función Click, que instala el indicador show para mostrar el marco y establece la URL en el método ShowCube en el controlador en el backend.
Esta es la implementación de la función Click en el archivo cube.component.ts:
import { Component } from '@angular/core'; @Component({ selector: 'app-cube-component', templateUrl: './cube.component.html' }) export class CubeComponent { public show: boolean = false; public url: string; Clicked() { this.show = true; this.url = "/WeatherForecast/ShowCube"; } }
Ahora añadamos la función de transformar el enlace al modo normal: agregue el archivo safeUrl.pipe.ts en el mismo directorio:
import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'safeUrl' }) export class SafeUrlPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) { } transform(url) { return this.sanitizer.bypassSecurityTrustResourceUrl(url); } }
El componente y la función agregados deben registrarse en el archivo app.module.ts:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { NavMenuComponent } from './nav-menu/nav-menu.component'; import { HomeComponent } from './home/home.component'; import { CounterComponent } from './counter/counter.component'; import { FetchDataComponent } from './fetch-data/fetch-data.component'; import { CubeComponent } from './cube/cube.component'; import { SafeUrlPipe } from './cube/safeUrl.pipe'; @NgModule({ declarations: [ AppComponent, NavMenuComponent, HomeComponent, CounterComponent, FetchDataComponent, CubeComponent, SafeUrlPipe ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), HttpClientModule, FormsModule, RouterModule.forRoot([ { path: '', component: HomeComponent, pathMatch: 'full' }, { path: 'counter', component: CounterComponent }, { path: 'fetch-data', component: FetchDataComponent }, { path: 'cube', component: CubeComponent } ]) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Además, agregamos un nuevo encabezado al menú en el archivo nav-menu.component.html:
<header> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3" > <div class="container"> <a class="navbar-brand" [routerLink]="['/']">FRCoreAngular</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Toggle navigation" [attr.aria-expanded]="isExpanded" (click)="toggle()" > <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-end" [ngClass]="{ show: isExpanded }" > <ul class="navbar-nav flex-grow"> <li class="nav-item" [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{ exact: true }"> <a class="nav-link text-dark" [routerLink]="['/']">Home</a> </li> <li class="nav-item" [routerLinkActive]="['link-active']"> <a class="nav-link text-dark" [routerLink]="['/counter']">Counter</a> </li> <li class="nav-item" [routerLinkActive]="['link-active']"> <a class="nav-link text-dark" [routerLink]="['/fetch-data']">Fetch data</a> </li> <li class="nav-item" [routerLinkActive]="['link-active']"> <a class="nav-link text-dark" [routerLink]="['/cube']">Cube</a> </li> </ul> </div> </div> </nav> </header>
La aplicación está lista. Ejecutémoslo:
Este sencillo ejemplo muestra cómo se puede mostrar un cubo de datos basado en bibliotecas FastCube en una aplicación Angular de una sola página. Ahora, la aplicación web le proporciona una herramienta conveniente para el análisis de datos. Puede agregar o eliminar medidas, hechos o filtrar sus datos.
