- Goto wiki to get practical skills https://github.com/chempkovsky/CS2REACTJS/wiki
- For more information, please visit REACTJS MATERIAL and MATERIAL DESIGN ICONS sites
https://material-ui.com/getting-started/installation/
https://material.io/resources/icons/?style=baseline
- Run Windows command prompt cmd.exe
- Go to the parent folder for your app
cd PARENT_FOLDER_FOR_YOUR_APP- To create the reactjs project enter the command:
npx create-react-app YOUR_APP --template typescript- enter command
cd YOUR_APP- enter commands
npm install @material-ui/core
npm install @material-ui/lab
npm install react-router-dom
npm install @types/react-router-dom --save
npm install react-number-format --saveIn the public\index.html insert into <head>...</head>
<!-- Fonts to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<!-- Icons to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
According to : https://material-ui-pickers.dev/getting-started/installation
- enter commands
npm i @date-io/date-fns@1.x date-fnsAccording to : https://material-ui-pickers.dev/getting-started/installation
- enter commands
npm i @material-ui/pickers- After creating very first view (C# part of the project)
- Launch Visual Studio 2019 and open the server-side solution. The server-side solution includes C # Entity, C # Views, and C # WebApi Services.
- In the solution explorer right click solution node add select “Add/Existing Web site” menu item
- In the dialog select the folder:
YOUR_APP\src- Note: DO NOT select a folder for the entire reactjs application:
YOUR_APP- After creating very first view (C# part of the project)
- Launch Visual Studio 2019
- Right Click the following folder of your reactjs project
src- In the context menu select Add/JavaScripts Wizard
- On the first page click next
- On the second page select the project and Db context of your Entities. Click Next.
- On the third page select "==Context==". Click Next.
- On the fourth page click "Batch processing"-button.
- In the "Batch actions" dialog select "00000-ContextLevelBatch.json" and click "start"-button.
- In the "Batch actions" dialog select "00200-app-glbl-auth.json" and click "start"-button.
- In the "Batch actions" dialog select "00230-appCompAndModule.json" and click "start"-button.
- Configure URLs to connect to server-side servicesConfigure URLs to connect to server-side services.
- open src\shared\services\app-glbl-settings.service.ts
- modify two methods:
public getWebApiPrefix(vwNm: string): string {
let reslt: string = '';
if(!(vwNm === null)) {
if(!(vwNm === null)) {
reslt = 'https://localhost:44312/'; // Set up URLs to connect to server-side services.
}
}
return reslt;
}
public getSecurityWebApiPrefix(): string {
return 'https://localhost:44312/'; // Set up URLs to connect to server-side services.
} - Note: to generate components for the given view please use the batch actions without any suffix. There is one possible.
...fluentui.tsx.t4- with the following two exceptions:
01100-Interfaces.json
01400-WebApiService.json- these two batches apply to any user interface library
- Authorization is turned off by default. To turn it on
- open src\app\shared\services\app-glbl-settings.service.ts
- modify two methods:
getViewModelMask(vwModel: string): number {
return 15; // delete this line when vwModels is ready
...
}
getDashBrdMask(dshBrd: string): number {
return 1; // delete this line when dshBrds is ready
...
} - For more information, please visit NG BOOTSTRAP and AWESOME ICONS sites
https://developer.microsoft.com/en-us/fluentui#/controls/web
https://developer.microsoft.com/en-us/fluentui#/styles/web/icons
- Run Windows command prompt cmd.exe
- Go to the parent folder for your app
cd PARENT_FOLDER_FOR_YOUR_APP- According to https://developer.microsoft.com/en-us/fluentui#/get-started/web
- To create the reactjs project enter the command:
npx create-react-app YOUR_APP --template typescript- enter command
cd YOUR_APP- enter command
npm install @fluentui/react- enter command
npm install react-number-format --save- enter command
npm i @date-io/date-fns@1.x date-fns
npm install @uifabric/react-cards
npm install react-router-dom
npm install @types/react-router-dom --save- After creating very first view (C# part of the project)
- Launch Visual Studio 2019 and open the server-side solution. The server-side solution includes C # Entity, C # Views, and C # WebApi Services.
- In the solution explorer right click solution node add select “Add/Existing Web site” menu item
- In the dialog select the folder:
YOUR_APP\src- NOTE: DO NOT select a folder for the entire reactjs application:
YOUR_APP- After creating very first view (C# part of the project)
- Launch Visual Studio 2019
- Right Click the following folder of your reactjs project
src\app- In the context menu select Add/JavaScripts Wizard
- On the first page click next
- On the second page select the project and Db context of your Entities. Click Next.
- On the third page select "==Context==". Click Next.
- On the fourth page click "Batch processing"-button.
- In the "Batch actions" dialog select "00000-ContextLevelBatch.fluentui.json" and click "start"-button.
- In the "Batch actions" dialog select "00200-app-glbl-auth.fluentui.json" and click "start"-button.
- In the "Batch actions" dialog select "00230-appCompAndModule.fluentui.json" and click "start"-button.
- Configure URLs to connect to server-side servicesConfigure URLs to connect to server-side services.
- open src\shared\services\app-glbl-settings.service.ts
- modify two methods:
public getWebApiPrefix(vwNm: string): string {
let reslt: string = '';
if(!(vwNm === null)) {
if(!(vwNm === null)) {
reslt = 'https://localhost:44312/'; // Set up URLs to connect to server-side services.
}
}
return reslt;
}
public getSecurityWebApiPrefix(): string {
return 'https://localhost:44312/'; // Set up URLs to connect to server-side services.
} - Note: to generate components for the given view please use the batch actions with the sufix
...fluentui.json- with the following two exceptions:
01100-Interfaces.json
01400-WebApiService.json- these two batches apply to any user interface library
- Authorization is turned off by default. To turn it on
- open src\shared\services\app-glbl-settings.service.ts
- modify two methods:
getViewModelMask(vwModel: string): number {
return 15; // delete this line when vwModels is ready
...
}
getDashBrdMask(dshBrd: string): number {
return 1; // delete this line when dshBrds is ready
...
} - implemented as Microsoft Visual Studio Extension (.vsix)
- consists of five wizards:
- DBContext Wizard
- ModelViews Wizard
- WebApiServices Wizard
- JavaScripts Wizard
- FeatureScripts Wizard
- Microsoft Visual Studio 2019 (community edition or higher)
- Visual Studio Code
- NodeJs (https://nodejs.org)
- TypeScript (npm install -g typescript)
- Wizards generate code based on the Material UI component library.
- Wizards generate code based on the Microsoft Fluent UI component library.
- Generators are built on the basis of "T4 Text Template"-Microsoft technology.
- As a result, the developer can modify or rewrite any T4 script at any time.
- The latter makes CS2Reactjs an extremely flexible application development tool that speeds up the development process by several times.
- The developer starts with first entity which is C# Entity Framework class.
- Using DBContext Wizard generates new or modify existing Entity Framework DB-Context.
- Using ModelViews Wizard defines and generates Views which is subset of properties of current Entity and its masters
- Using WebApiServices Wizard defines and generates Web Api Services
- Using JavaScripts Wizard defines and generates rich client interface as typescript components
- Using FeatureScripts Wizard arranges generated components on the pages
- The developer adds next entity to the project and repeats all the steps above.
- Now it's time to get acquainted with a typical Web application created using CS2Reactjs.
- An overview of the main aspects of such an application will help illuminate the class of tasks whose solution CS2Reactjs automates.
- In other words, the goal is to show what you can get at the end of the development process
- Country is a master for
- Dialect, Publisher, Author
- Language is a master for
- Dialect
- Genre, Author, Dialect are masters for
- Manuscript
- Manuscript, Publisher, Edition are masters for
- Book
- have a master-detail chain longer than two:
- Country > Author > Manuscript > Book
- Country > Dialect > Manuscript > Book
- have a node that has more than one master:
- Dialect, Genre, Author are masters for Manuscript
With CS2Reactjs, a developer can model and generate editing forms with master-detail relationships at the user-controls level with a following rules :
- any user-control of the detailed-entity is disabled until the user control of the master-entity is defined :
- For instance, user-control for Manuscript will be disabled until the user-control for Author is defined
- any user-control of the detailed-entity displays data with applied filter defined by the user-control of the master-entity.
- For instance, user-control for Manuscript displays manuscripts of the selected Author
With CS2Reactjs, a developer can model and generate the pairs of tabular data forms with master-detail relationships where:
- Selecting row in the master table fires event to apply filter in the detail-table
- Function to Add(Update/Delete) to the details table is also avalable. User controls associated with the master-entity are disabled and filled with the correct data even for the “Add item” form.
With CS2Reactjs, a developer can model and generate reactjs routing navigation chains of any length:
- Navigation is carried out from the row of the master table. It fires event to apply filter in the detail-table.
- Function to Add(Update/Delete) to any table in the navigation chain is available. And again, the user controls associated with the master-entity are disabled and filled with the correct data even for the “Add item” form
With CS2Reactjs, a developer can model and generate User Interface based on the dialog-boxes and(or) User Interface based on Routing:
- Using User Interface based on the dialog-boxes Add(Update/Delete) form is displayed as a Dialog.
- Using User Interface based on the Routing Add(Update/Delete) form is displayed as a separate page to route
With FeatureSripts Wizard, a developer can model and generate pages with one or more child tabular forms.
- On such pages, only one child form can support routing
- A developer can generate bitmask-based authorization that uses Microsoft Asp .NET storage
- or
- a set of components that can be used independently (this approach requires additional coding)
- Using the browser, go to the URL https://github.com/chempkovsky/CS2Reactjs/releases
- Click CS2Reactjs.vsix
- After loading double click the file and follow the instructions
- Run Visual Studio 2019
- Select menu item
- Extensions/Manage Extensions
- In the left panel of the dialog click installed
- In the middle pane of the dialog, find CS2Reactjs
- Click Uninstall
- Close Visual Studio and follow the instructions
- Run File explorer and go to
- %AppData%\Local\Microsoft\VisualStudio
- In the folder above it must be subfolder with a strange name. Something like this
- “16.0_5e517fbc”
- In this folder it must be subfolder with a name
- “Extensions”
- In the “Extensions” it must be subfolder with a strange name. Something like this
- “5f22nzfd.chk”
- In the last subfolder it must be the file
- CS2Reactjs.dll
- In the folder with CS2Reactjs.dll it must be “Templates”-folder. This is the place for all the T4-scripts
- To make your script available for Wizards add subfolders and files in the “Templates”-folder
- Client side
- Server side
- This presentation explains how to create projects for the client and server.
- Let's start by organizing folders:
- The root folder name for all projects will be
- Development\Demo
-
Step #1
- Run Windows command prompt cmd.exe
-
Step #2
- enter command:
- cd c:\Development\Demo
- enter command:
-
Step #3
- To create the project enter the command:
- npx create-react-app LitApp --template typescript
- To create the project enter the command:
-
Step #4
- enter command
- cd LitApp
- enter command
-
Step #5
- To add the “reactjs-material” package, enter the command
- npm install @material-ui/core
- To add the “reactjs-material” package, enter the command
-
Step #6
- To add the “reactjs-material-lab” package, enter the command
- npm install @material-ui/lab
- To add the “reactjs-material-lab” package, enter the command
-
Step #7
- To add Roboto Font and Font Icons in the In the public\index.html insert into
<head>...</head>the following<!-- Fonts to support Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /><!-- Icons to support Material Design --><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> - To add Roboto Font and Font Icons in the In the public\index.html insert into
-
Step #8
-
To add the “react-router-dom” package, enter the command
- npm install react-router-dom
and than
- npm install @types/react-router-dom --save
-
-
Step #9
- To add the “react-number-format” package, enter the command
- npm install react-number-format --save
- To add the “react-number-format” package, enter the command
-
Step #10
- According to : https://material-ui-pickers.dev/getting-started/installation
- npm i @date-io/date-fns@1.x date-fns
- According to : https://material-ui-pickers.dev/getting-started/installation
-
Step #11
- According to : https://material-ui-pickers.dev/getting-started/installation
- npm i @material-ui/pickers
- According to : https://material-ui-pickers.dev/getting-started/installation
-
Step #12
- To start Visual Studio Code in the folder “c:\Development\Demo\LitApp” run the command
- Code .
-
Step #13
- After Visual Studio Code started select menu item
- Terminal\New Terminal
- To make sure that the project is ready in the Terminal window run the command
- npm start
- To stop in the service in Terminal window type
- [Ctrl]+C
- After Visual Studio Code started select menu item
- CS2Reactjs is solution level tool. So, let's create four projects, one for each type of object (Only for cross-project demonstration):
- Dm01Entity for Entities Framework Entity classes
- Dm02Context for Entities Framework DB Context Classes
- Dm03Views for Views (or ViewModels)
- Dm04WebApp for Web-Api services
- Dm01Entity for Entities Framework Entity classes:
- Run Visual Studio
- Click File/New/Project menu item
- In the dialog select “Class library (.Net Framework)” and click “next”
- Enter “Dm01Entity” for the Project name
- Select “C:\Development\Demo\” for the location
- Enter “DmLit” for the solution name
- Click “Create”
- Run Visual Studio
- Dm02Context for Entity Framework dbcontext classes:
- Run Visual Studio
- Open “DmLit” solution
- In the Solution Explorer right-click the solution node and select “Add/New Project”-menu item
- In the dialog select “Class library (.Net Framework)” and click “next”
- Enter “Dm02Context” for the Project name
- Click “Create”
- Dm03Views for for Views (or ViewModels) :
- Run Visual Studio
- Open “DmLit” solution
- In the Solution Explorer right-click the solution node and select “Add/New Project”-menu item
- In the dialog select “Class library (.Net Framework)” and click “next”
- Enter “Dm03Views” for the Project name
- Click “Create”
- Run Visual Studio
- Dm04WebApp for Web-Api services:
- Run Visual Studio
- Open “DmLit” solution
- In the Solution Explorer right-click the solution node and select “Add/New Project”-menu item
- In the dialog select “Asp.Net Web Application (.Net Framework)” and click “next”
- Enter “Dm04WebApp” for the Project name
- Click “Create”
- On the “Create a New Asp.Net Web Application”
- Select Web Api
- Under “Authentication” click change and select
- Individual user account
- Click “Create”
-
Step #1:
- Run Visual Studio 2019
- Open the “DmLit” solution, which is located in the folder:
- C:\Development\Demo\DmLit
- Remove "Class1.cs" from each project:
- Dm01Entity
- Dm02Context
- Dm03Views
-
Step #3:
- Run Visual Studio 2019
- Open the “DmLit” solution, which is located in the folder:
- C:\Development\Demo\DmLit
- Add “Literature” folder to each project:
- Dm01Entity
- Dm02Context
- Dm03Views
-
Step #4:
- Open the “DmLit” solution
- Add reference to
- System.ComponentModel.DataAnnotations
- to each project:
- Dm01Entity
- Dm02Context
- Dm03Views
-
Step #5:
- Open the “DmLit” solution
- For Dm02Context project add the following NuGet package:
- EntityFramework
- For Dm03Views project add the following NuGet package:
- Newtonsoft.Json
- For Dm04WebApp project add the following NuGet package:
- Microsoft.AspNet.WebApi.Cors
-
Step #6:
- Open the “DmLit” solution
- In Dm04WebApp project open file:
- App_Start\WebApiConfig.cs
- Add “using”:
- using System.Web.Http.Cors;
- In the body of the “Register” method add:
config.EnableCors(new EnableCorsAttribute("*", headers:"*", methods:"*"));
-
Step #7:
- Open the “DmLit” solution
- In the solution explorer right click solution node add select “Add/Existing Web site” menu item
- In the dialog select the folder:
- C:\Development\Demo\LitApp\src
- Note:
- Do NOT select LitApp-folder:
- C:\Development\Demo\LitApp
- Do NOT select LitApp-folder:
-
Step #8:
- It is highly recommended to install in your network or virtual environment the following software:
- MSSQL 2019 Developer Edition (Free Server)
- SQL Server Management Studio 18.5 (Free)
- It is highly recommended to install in your network or virtual environment the following software:
- Step #1:
- Run Visual Studio and Open “DmLit” solution
- Right Click “Literature” of the “Dm01Entity”-project
- Select “Add/Class” menu item
- In the dialog enter the name for the class
- LitGenre
- Click “Add”
- Run Visual Studio and Open “DmLit” solution
- Step #2:
- Open LitGenre file and modify the body of the class as it is shown on the slide
public class LitGenre {
[Display(Description = "Row id", Name = "Id of the genre",
Prompt = "Id of the genre", ShortName = "Genre Id")]
[Required]
public int GenreId { get; set; }
[Display(Description = "Name of the genre",
Name = "Name of the genre",
Prompt = "Name of the genre", ShortName = "Genre Name")]
[StringLength(20, MinimumLength = 3,
ErrorMessage = "Invalid")]
[Required]
public string GenreName { get; set; }
}- Note:
- The following attributes are used by the Wizards to create Typescript and Html
- Display
- Required
- StringLength
- DatabaseGenerated
- Range
-
Step #3:
- Right Click “Literature” of the “Dm02Context”-project and Select “DBContext Wizard” menu item to open the Wizard dialog
-
Note:
- On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be created.
- Click “Next”-button
-
Step #4:
- On the second page of the dialog the developer should select existing DbContext file or create new one.
- Since no DbContext is created, enter “LitDbContext” and click the “Create New DbContext” button
-
Step #5:
- On the third page of the dialog the developer should select the script to generate the code. There are two items in the list
- DbContext.Net.cs.t4
- DbContext.Net.Core.cs.t4
- Select “DbContext.Net.cs.t4”
- Click Next twice
- Click “Save” button
- Click “Next” to get the second page
- On the third page of the dialog the developer should select the script to generate the code. There are two items in the list
-
Step #6:
- The developer is again on the second page. Now select the "Dm02Context" project and the "LitDbContext" context that has already been created.
- Click “Next”
-
Step #7:
- On the third page select “Dm01Entity”-project and “LitGenre”-entity.
- Click “Add required property to DbContext”
DbSet<LitGenre>
- property will be added to the context
-
Step #8:
- On the same third page, the “Modify”-button became available.
- The developer must explicitly define the primary key.
- Click “Modify”
-
Step #9:
- Add ”GenreId” to the primary key list.
- Select “HasKey.Net.cs.t4” template
- Click “Create(Modify)” button. It will add Fluent Api definition of the primary key for “LitGenre”.
modelBuilder.Entity<LitGenre>().HasKey(p => p.GenreId);
-
Step #10:
- Open “LitDbContext.cs” file
- Find the following method
OnModelCreating(DbModelBuilder modelBuilder)- And Insert the following line of code
modelBuilder.Entity<LitGenre>() .Property(p => p.GenreId) .HasDatabaseGeneratedOption(DatabaseGeneratedOption.None);
- This gives a hint that GenreId is not an Identity
-
View (or ModelView) is the structure that the Web Api service sends to and receives from the client. For each entity, the developer must create at least one view.
-
To Add a View to the project
- Run Visual Studio and Open “DmLit” solution
- Right Click “Literature” of the “Dm03Views”-project and select “ModelView Wizard” menu item to open the Wizard dialog
-
Note:
- On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be created.
- Click “Next”-button
-
On the second page of the dialog the developer should select existing DbContext file.
- Select:
- Dm02Context (project)
- LitDbContext (context)
- Click “Next”-button
- Select:
-
On the third page of the dialog the developer should select entity file.
- Select:
- Dm01Entity
- LitGenre
- Click “Next”-button
- Select:
-
On the fourth page of the dialog the developer can select existing view for modification.
- Uncheck “Select View”
- Click “Next”-button
-
On the fifth page select root node and check “Generate JsonProperty Attribute”.
- Two classes will be generated:
- “View” and “Page View”.
- The last one is used by pagination.
- Leave these names unchanged.
-
On the fifth page check “Is Selected” for “GenreId” and “GenreName” nodes. Leave “Property Name” and “Json Property Name” unchanged.
- Click “Next”
-
On the sixth page select “ViewModel.cs.t4”
- click Next
-
On the seventh page click “Save”.
- Open “C:\Development\Demo\DmLit” which is a root of the solution.
- New “.json” file has been created. This is the repository of the wizards.
- Click “Next”
-
On the eighth page select “ViewModelPage.cs.t4” and click Next.
- It generates the second class
-
On the ninth page click save and close the dialog. The repository (.json) file has been updated again.
- Note #1:
- The repo file is updated only when you click the save button.
- Note #2:
- A separate repo file is created for each DBContext.
- Note #1:
-
Before generating Web Api service the developer must define the set of View’s properties that will be used for filtering and the set of View’s properties that will be used for sorting.
-
To Generate Web Api service
- Run Visual Studio and Open “DmLit” solution
- Right Click “Controllers”-folder of the “Dm04WebApp”-project and select “WebApiServices Wizard” menu item to open the Wizard dialog
-
Note:
- On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be saved.
- Click “Next”-button
-
On the second page of the dialog the developer should select existing DbContext file. Select:
- Dm02Context (project)
- LitDbContext (context)
- Click “Next”-button
-
On the third page of the dialog the developer should select the View.
- Select:
- LitGenreView
- Select:
-
On the third page of the dialog the developer should define Properties for filtering and sorting. For our view, “Is used by filter” and “Is used by sorting” must be checked for:
- GenreId
- GenreName
-
On the third page of the dialog the developer should define the Web Api methods to generate. For our view all methods is checked
- Click “Next”
-
On the fourth page of the dialog the developer should select T4-script to generate Web Api Service. Only “DefaultWebApiService.cs.t4” must be selected for this purpose. Other scripts are used for the security
- Click “Next”
-
On the fifth page of the dialog the developer should click “Save” and close the dialog.
-
Note:
- The Wizard’s repo file is updated only when you click “save” button
-
After generating very first Web Api service the developer must add references on Entity’s, Context’s and View’s projects.
- In out case, we should add references on
- Dm01Entity
- Dm02Context
- Dm03Views
- In out case, we should add references on
-
Before creating reactjs typescript classes for the very first View, all auxiliary interfaces, services, components and modules must be in place and ready for use.
-
It’s time to note that the order of generated classes is extremely important. For instance, Component references “css” files. So, “scc” must be generated first.
-
The second point relates to script types. All scripts are divided into two large sets:
- The first one consists of the context level scripts. These scripts are used to generate interfaces, classes, services that are used across the Views and application level components.
- The second set consists of the View level scripts. They are scripts that are used to generate the code for the given view. For instance, Edit form for one View is not applicable for another one because of captions, validations and so on.
-
These two large sets are organized as follows:
- Scripts with a range of 00000-00999 are context level scripts.
- Scripts with a range of 01000-99999 are view level scripts
-
To Generate AUXILIARY reactjs classes
- Run Visual Studio and Open “DmLit” solution
- Right Click “src”-folder of the “Web”-project that was created by “Add/Existing Web Site”-command. So, right click “src”-folder and select “Add/JavaScript Wizard” menu item to open the Wizard dialog
-
Note:
- On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be saved.
- Click “Next”-button
-
On the second page of the dialog the developer should select existing DbContext file. Select:
- Dm02Context (project)
- LitDbContext (context)
- Click “Next”-button
-
On the third page of the dialog the developer should select the View. But to generate context level classes the developer must select:“==Context==“
- Click Next
-
On the fourth page of the dialog instead of selecting the action type the developer should click batch processing button.“batch actions” dialog will be shown.
-
On the page of the “batch actions” dialog the developer should select “ContextLevelBatch.json”. Read hint about:
- Folder selection
- Preliminary steps
- instructions after generation
- Click “Start”-button
- Close the dialog at the end of the generation process
-
Note:
- After closing “batch actions” dialog the “Created Action types” panel has been populated with a list of created files.
- Close the dialog
-
app-glbl-settings.service.ts
- Located: shared/services
- Methods
- getWebApiPrefix and getSecurityWebApiPrefix return root URL for the view’s and security’s WebApi
- Methods
- getDialogWidth and getDialogMaxWidth Return the width of the dialogs for the given view
- Methods
- getViewModelMask and getDashBrdMask are the implementation of the authorization “Bit Mask” security. The first line in the body of each method turns security off.
- Methods
- canActivateChild and canActivate are the implementation of the CanActivate, CanActivateChild interfaces.
- Method
- getValidationErrorMessage returns a validation error message
-
to-binary.pipe.ts
- Located: shared/pipes
-
to-binary-formatter.directive.ts
- Located: shared/directives
- Both pipe and directive are used by authorization Bit Mask security input controls
-
column-selector.component.ts
- Located: shared/components/column-selector
-
column-selector-dlg.component.ts
- Located: shared/components/column-selector-dlg
- Both components are used by all View’s tabular forms
- Using the functionality of these components the end user can change the list of columns to be displayed on the form.
-
web-service-filter.component.ts
- Located: shared/components/web-service-filter
- The component is used by all View’s tabular forms
- Using the functionality of this component the end user can define the filter.
- Preparation steps to first run Dm04WebApp
- Set up default constructor of LitDbContext
public LitDbContext() : base("name=LitConnection") { }- Set up connection strings in the Web.config
<add name="DefaultConnection"
connectionString="Data Source=SRV2016SQL2019;Initial Catalog=AAspNetStorage;Persist Security Info=True;User ID=sa;Password=YOUR_PASSWORD"
providerName="System.Data.SqlClient" />
<add name="LitConnection"
connectionString="Data Source=SRV2016SQL2019;Initial Catalog=AALitStorage;Persist Security Info=True;User ID=sa;Password=YOUR_PASSWORD"
providerName="System.Data.SqlClient" />- Db Migration is not used for this demo app. Instead the following code have been executed in the small console app to create Data Base on the SQL server
Database.SetInitializer(new DropCreateDatabaseAlways<LitDbContext>());
LitDbContext db = new LitDbContext();
db.LitGenreDbSet.FirstOrDefault();
MessageBox.Show("The database was successfully created.", "Done",
MessageBoxButton.OK, MessageBoxImage.Information);
Database.SetInitializer(new CreateDatabaseIfNotExists<LitDbContext>());-
To Generate reactjs classes for the first View
- Run Visual Studio and Open “DmLit” solution
- Create two folders in the “src” folder
- components/lit-genre-view
- services/lit-genre-view
- Right Click
- src/components/lit-genre-view
- And select “Add/JavaScript Wizard” menu item to open the Wizard dialog
-
Note:
- On the first page of the dialog the destination folder is shown. The destination folder is the folder in which the generated file will be saved.
- Click “Next”-button
-
On the second page of the dialog the developer should select existing DbContext file. Select:
- Dm02Context (project)
- LitDbContext (context)
- Click “Next”-button
-
On the third page of the dialog the developer should select the View. Select:
- “LitGenreView“.
-
In the left panel select “UI List Properties” node and check Shown for both:
- GenreId
- GenreName
-
In the left panel of the same page of the dialog select “UI Form Properties” node and check Shown for both properties. Set “InputType” as it is shown on the slide.
- Click “Next”-button
-
On the fourth page click “batch processing”-button. “Batch actions” dialog will be shown.
- Select “01100-Intefaces.json”
- Click “Start”-button
- Close both dialogs
-
Right Click
- src/services/lit-genre-view
- And select “Add/JavaScript Wizard” menu item to open the Wizard dialog.
- Repeat all the steps until the “Batch Actions” dialog box appears.
- Note:
- The developer should not define again
- “UI List Properties”
- “UI Form Properties”
- All settings were saved during the first batch
- The developer should not define again
- In “Batch actions” dialog
- Select “01400-WebApiService.json”
- Click “Start”-button
- Close both dialogs
-
Right Click
- src/components/lit-genre-view
- And select “Add/JavaScript Wizard” menu item to open the Wizard dialog.
- Repeat all the steps until the “Batch Actions” dialog box appears.
- Note:
- The developer should not define again
- “UI List Properties”
- “UI Form Properties”
- All settings were saved during the first batch.
- The developer should not define again
-
In “Batch actions” dialog - Select “01420-SForm.json”
- Click “Start”-button
- Select “01500-EForm.json”
- Click “Start”-button
- Select “01600-LForm.json”
- Click “Start”-button
- Close both dialogs
- Click “Start”-button
<LitGenreViewLformComponent/>-
In ”app-glbl-settings.service.tsx” set the correct URL of getWebApiPrefix method
-
With the VS 2019 run WebApi app (that is a server side) and with VS Code run LipApp (that is client side)
-
Note #1:
- Sform is a search form for the given View
- Eform is an Edit form for the given View
- Lform is a wrapper for the two forms above.
-
Note #2:
- Sform and Eform are the basic forms with all the user interface logic for the given View.
- Other forms are wrappers for these two.
-
to turn on authorization
- app-glbl-login.tsx must be changed in one place
doSubmit() { if(! this.checkValid() ) return; AppGlblLoginService.login(this.context, this.username.Value, this.password.Value) .then((res: any) => res.json()) .then( (respdata: any ) => { this.context.UserName = this.username.Value; this.context.setAuthInfo(respdata); // // the code must be inserted here: // we should get permission bitmask for the current user // getcurrusermasks() // this.onCancel() }, (error: any) => { this.context.showError('http', error); } ); }