post improved

6 years ago · d54e27faa5
6 changed files with 204 additions and 300 deletions
--- a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Intergrate-DevExtreme-To-ABP-Based-Application.md
+++ b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Intergrate-DevExtreme-To-ABP-Based-Application.md
@ -1,237 +0,0 @@
 ## Integrate DevExtreme Packages to ABP Framework Based Applications
 Hi, in this step-by-step article, I will show you how to integrate DevExtreme components into ABP Framework based applications.
 ## Install DevExtreme
 You can follow [this documentation](https://js.devexpress.com/Documentation/17_1/Guide/ASP.NET_MVC_Controls/Prerequisites_and_Installation/) to install devexpress packages.
 ## Preparing the Project
 ### Startup template and the initial run
 Abp Framework offers startup templates to get into the business faster. We can download a new startup template using Abp CLI:
 `abp new DevExtremeSample -m none`
 After the download is finished, we run `DevExtremeSample.DbMigrator` project to create the database and seed initial data (admin user, role, etc). Then we run `DevExtremeSample.Web` to see our application working.
 > _Default admin username is **admin** and password is **1q2w3E\***_
 ![initial-project](initial-project.png)
 ### Adding DevExtreme Nuget Packages
 Add following `PackageReference` to your `DevExtremeSample.Application.Contracts` project.
 `<PackageReference Include="DevExtreme.AspNet.Core" Version="20.1.6" />`
 Add following `PackageReference` to your `DevExtremeSample.Application.Web` project.
 `<PackageReference Include="DevExtreme.AspNet.Data" Version="2.6.2" />`
 > Please remember that, you must add _"DevExpress NuGet Feed"_ to your **Nuget Package Sources**. Check [this documentation](https://js.devexpress.com/Documentation/17_1/Guide/ASP.NET_MVC_Controls/Prerequisites_and_Installation/) to more information.
 After adding new packages, do `dotnet restore` for your projects.
 ### Adding DevExtreme NPM Packages
 Open `package.json` file in your `DevExtremeSample.Application.Web` project and add following package depency to `depencies` section.
 `"devextreme": "^20.1.5"`
 Then just open `DevExtremeSample.Application.Web` project folder via CLI and run `yarn` command.
 This will add the DevExtreme npm packages to our node_modules folder as seen below.
 ![yarn](yarn.png)
 We should add some mappings to move required files to under `wwwroot/libs` folder.
 Open `abp.resourcemapping.js` file in your `DevExtremeSample.Application.Web` project and replace the content of file with following.
 ```javascript
 module.exports = {
  aliases: {},
  mappings: {
    "@node_modules/devextreme/dist/**/*": "@libs/devextreme/",
  },
 };
 ```
 Open `DevExtremeSample.Application.Web` project folder via CLI and run `gulp` command. This action will do mappings as we described before.
 ![gulp](gulp.png)
 You can see `devextreme` folder in your `wwwroot/libs` folder.
 ![wwwroot-lib](wwwroot-lib.png)
 ### Adding DevExtreme Css Files To Global Bundles
 Open your `DevExtremeSampleWebModule.cs` file in your `DevExtremeSample.Application.Web` project and add following code to `ConfigureServices` method.
 ```csharp
 Configure<AbpBundlingOptions>(options =>
 {
    options
        .StyleBundles
        .Get(StandardBundles.Styles.Global)
        .AddFiles("/libs/devextreme/css/dx.common.css")
        .AddFiles("/libs/devextreme/css/dx.light.css");
 });
 ```
 ### Adding DevExtreme Js Files
 We cannot add DevExtreme js packages to `Global Script Bundles`, because DevExtreme js packages requires to located in the `<head>` section.
 But we can create `ViewComponent` and render it at `<head>` section with `AbpLayoutHookOptions`.
 Create `Components` folder in your `DevExtremeSample.Application.Web` project. Then create `DevExtremeJs` folder under `Components` folder.
 Create `Default.cshtml` file in your `DevExtremeJs` folder and paste following codes to your file.
 ```csharp
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
 <!-- Devextreme -->
 <abp-script src="/libs/devextreme/js/dx.all.js" />
 <abp-script src="/libs/devextreme/js/dx.aspnet.mvc.js" />
 <abp-script src="/libs/devextreme/js/dx.aspnet.data.js" />
 ```
 Create `DevExtremeJsViewComponent.cs` file in your `DevExtremeJs` folder and paste following codes to your file.
 ```csharp
 namespace DevExtremeSample.Web.Components.DevExtremeJs
 {
    public class DevExtremeJsViewComponent : AbpViewComponent
    {
        public IViewComponentResult Invoke()
        {
            return View("/Components/DevExtremeJs/Default.cshtml");
        }
    }
 }
 ```
 After that, your `*.Web` project should be like as following.
 ![devextreme-js](devextreme-js.png)
 Then we can add this view component to `<head>` section by using **hooks**.
 Open your `DevExtremeSampleWebModule.cs` file in your `DevExtremeSample.Application.Web` project and add following code to `ConfigureServices` method.
 ```csharp
 Configure<AbpLayoutHookOptions>(options =>
 {
    options.Add(
        LayoutHooks.Head.Last, //The hook name
        typeof(DevExtremeJsViewComponent) //The component to add
    );
 });
 ```
 ### Manipulate `JQueryScriptContributor`
 In ABP Framework, all javascript files are located at the end of file by default. But DevExtreme is using `inline` javascript codes and those are requires the `jQuery` package located at `<head>` section.
 ABP Framework has a one contributor that named `JQueryScriptContributor` for `jQuery` packages. It has `jQuery` and some abp packages. We need to manipulate that.
 So create `jQuery` folder in `Components` folder at your `*.Web` project.
 Create `Default.cshtml` file in your `jQuery` folder and paste following codes to your file.
 ```csharp
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
 <script src="/libs/jquery/jquery.js"></script>
 ```
 Create `JqueryHeadViewComponent.cs` file in your `jQuery` folder and paste following codes to your file.
 ```csharp
 using Microsoft.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc;
 namespace DevExtremeSample.Web.Components.jQuery
 {
    public class JqueryHeadViewComponent : AbpViewComponent
    {
        public IViewComponentResult Invoke()
        {
            return View("/Components/jQuery/Default.cshtml");
        }
    }
 }
 ```
 After that, your `*.Web` project should be like as following.
 ![jquery-head](jquery-head.png)
 Then replace your `AbpLayoutHookOptions` with following code block to add `JqueryHeadViewComponent` to `<head>` section.
 ```csharp
 Configure<AbpLayoutHookOptions>(options =>
 {
    options.Add(
        LayoutHooks.Head.Last, //The hook name
        typeof(JqueryHeadViewComponent) //The component to add
        ).Add(
        LayoutHooks.Head.Last, //The hook name
        typeof(DevExtremeJsViewComponent) //The component to add
    );
 });
 ```
 Now create `MyScriptContributor.cs` file at your `*.Web` project and paste following codes to your file.
 ```csharp
 using System.Collections.Generic;
 using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.Core;
 using Volo.Abp.Modularity;
 namespace DevExtremeSample.Web
 {
    [DependsOn(typeof(CoreScriptContributor))]
    public class MyScriptContributor : BundleContributor
    {
        public override void ConfigureBundle(BundleConfigurationContext context)
        {
            context.Files.AddIfNotContains("/libs/abp/jquery/abp.jquery.js");
        }
    }
 }
 ```
 Finally, we replace the `JQueryScriptContributor` with `MyScriptContributor`.
 Replace the `AbpBundlingOptions` at the `DevExtremeSampleWebModule.cs` file with the following code block.
 ```csharp
 Configure<AbpBundlingOptions>(options =>
 {
    options
        .StyleBundles
        .Get(StandardBundles.Styles.Global)
        .AddFiles("/libs/devextreme/css/dx.common.css")
        .AddFiles("/libs/devextreme/css/dx.light.css");
    options.ScriptBundles
        .Get(StandardBundles.Scripts.Global)
        .Contributors
        .Replace<JQueryScriptContributor, MyScriptContributor>();
 });
 ```
 ### Result
 After following this step-by-step article you can use all DevExtreme features in your project.
 ![devexp-result](devexp-result.gif)
 > The result example is created by following [this documentation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ProgressBar/Overview/NetCore/Light/).
--- a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Using-DevExtreme-In-ABP-Based-Application.md
+++ b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Using-DevExtreme-In-ABP-Based-Application.md
@ -1,14 +1,211 @@
 ## Using DevExtreme in ABP Based Application
-Hi, in this article, I will explain some cases of DevExtreme usages in ABP based application.
+Hi, in this step-by-step article, I will show you how to integrate DevExtreme components into ABP Framework based applications.
-This article will reference [this](https://github.com/abpframework/abp-samples/tree/master/DevExtreme-Mvc) sample.
+## Install DevExtreme
-## Integrate DevExtreme Packages to ABP Framework Based Applications
+You can follow [this documentation](https://js.devexpress.com/Documentation/17_1/Guide/ASP.NET_MVC_Controls/Prerequisites_and_Installation/) to install devexpress packages.
-Please follow [Intergrate DevExtreme documentation](Intergrate-DevExtreme-To-ABP-Based-Application.md) to see each step. This article will not include setup informations.
+## Preparing the Project
-## Data Storage
+### Startup template and the initial run
 Abp Framework offers startup templates to get into the business faster. We can download a new startup template using Abp CLI:
 `abp new DevExtremeSample -m none`
 After the download is finished, we run `DevExtremeSample.DbMigrator` project to create the database and seed initial data (admin user, role, etc). Then we run `DevExtremeSample.Web` to see our application working.
 > _Default admin username is **admin** and password is **1q2w3E\***_
 ![initial-project](initial-project.png)
 ### Adding DevExtreme Nuget Packages
 Add the `DevExtreme.AspNet.Core` package to your `DevExtremeSample.Application.Contracts` project.
 ```
 dotnet add package DevExtreme.AspNet.Core
 ```
 Add the `DevExtreme.AspNet.Data` package to your `DevExtremeSample.Web` project.
 ```
 dotnet add package DevExtreme.AspNet.Data
 ```
 > Please remember that, you must add _"DevExpress NuGet Feed"_ to your **Nuget Package Sources**. Check [this documentation](https://js.devexpress.com/Documentation/17_1/Guide/ASP.NET_MVC_Controls/Prerequisites_and_Installation/) to more information.
 ### Adding DevExtreme NPM Depencies
 Open your `DevExtremeSample.Web` project folder with console and add `devextreme` package depency via `npm` or `yarn`.
 `npm install devextreme` or `yarn add devextreme`
 This will add the DevExtreme npm packages to our node_modules folder and `package.json` file as seen below.
 ### Adding Resource Mappings
 The `devextreme` npm package is saved under `node_modules` folder. We need to move them in our `wwwroot/libs` folder to use them in our web project. To add packages in our application, we need to create some mappings by using **Abp Resource Mapping**.
 Open `abp.resourcemapping.js` file in your `DevExtremeSample.Web` project and add following definition to inside `mappings` object.
 `"@node_modules/devextreme/dist/**/*": "@libs/devextreme/"`
 After that, the `abp.resourcemapping.js` file should looks like as following.
 ```
 module.exports = {
  aliases: {},
  mappings: {
    "@node_modules/devextreme/dist/**/*": "@libs/devextreme/",
  },
 };
 ```
 Open your `DevExtremeSample.Web` project folder with console and run `gulp` command. This action will do mappings as we described before.
 ![gulp](gulp.png)
 You can see `devextreme` folder in your `wwwroot/libs` folder.
 ![wwwroot-lib](wwwroot-lib.png)
 ### Adding DevExtremeStyleContributor
 We will add DevExtreme css files as a `BundleContributor`. To get more information, please see this [documentation](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Bundling-Minification).
 Create `Bundling` folder in your `DevExtremeSample.Web` project. Then create `DevExtremeStyleContributor.cs` file and copy following code block to inside it.
 ```csharp
 using System.Collections.Generic;
 using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
 namespace DevExtremeSample.Web.Bundling
 {
    public class DevExtremeStyleContributor : BundleContributor
    {
        public override void ConfigureBundle(BundleConfigurationContext context)
        {
            context.Files.AddIfNotContains("/libs/devextreme/css/dx.common.css");
            context.Files.AddIfNotContains("/libs/devextreme/css/dx.light.css");
        }
    }
 }
 ```
 Open your `DevExtremeSampleWebModule.cs` file in your `DevExtremeSample.Web` project and add following code to `ConfigureServices` method.
 ```csharp
 Configure<AbpBundlingOptions>(options =>
 {
    options
        .StyleBundles
        .Get(StandardBundles.Styles.Global)
        .AddContributors(typeof(DevExtremeStyleContributor));
 });
 ```
 ### Adding DevExtremeScriptContributor
 We cannot add DevExtreme js packages to `Global Script Bundles`, because DevExtreme is using some inline javascript codes and js packages requires to located in the `<head>` section.
 But we can create `ViewComponent` and render it at `<head>` section with `AbpLayoutHookOptions`.
 First, create `DevExtremeScriptContributor.cs` file at your `Bundling` folder and copy following code block to inside it.
 ```csharp
 using System.Collections.Generic;
 using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.JQuery;
 using Volo.Abp.Modularity;
 namespace DevExtremeSample.Web.Bundling
 {
    [DependsOn(
        typeof(JQueryScriptContributor)
        )]
    public class DevExtremeScriptContributor : BundleContributor
    {
        public override void ConfigureBundle(BundleConfigurationContext context)
        {
            context.Files.AddIfNotContains("/libs/devextreme/js/dx.all.js");
            context.Files.AddIfNotContains("/libs/devextreme/js/dx.aspnet.mvc.js");
            context.Files.AddIfNotContains("/libs/devextreme/js/dx.aspnet.data.js");
        }
    }
 }
 ```
 As you see, the `DevExtremeScriptContributor` is depends on `JQueryScriptContributor`. All packages are `JQueryScriptContributor` will added before the `DevExtremeScriptContributor` packages.
 #### Create DevExtremeJsViewComponent
 Create `Components` folder in your `DevExtremeSample.Web` project. Then create `DevExtremeJs` folder under `Components` folder.
 Create `Default.cshtml` file in your `DevExtremeJs` folder and paste following codes to your file.
 ```csharp
@using DevExtremeSample.Web.Bundling
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
 <!-- Devextreme -->
 <abp-script type="typeof(DevExtremeScriptContributor)" />
 ```
 Create `DevExtremeJsViewComponent.cs` file in your `DevExtremeJs` folder and paste following codes to your file.
 ```csharp
 namespace DevExtremeSample.Web.Components.DevExtremeJs
 {
    public class DevExtremeJsViewComponent : AbpViewComponent
    {
        public IViewComponentResult Invoke()
        {
            return View("/Components/DevExtremeJs/Default.cshtml");
        }
    }
 }
 ```
 After that, your `*.Web` project should be like as following.
 ![devextreme-js](devextreme-js.png)
 Then we can add this view component to `<head>` section by using **hooks**.
 Open your `DevExtremeSampleWebModule.cs` file in your `DevExtremeSample.Application.Web` project and add following code to `ConfigureServices` method.
 ```csharp
 Configure<AbpLayoutHookOptions>(options =>
 {
    options.Add(
        LayoutHooks.Head.Last, //The hook name
        typeof(DevExtremeJsViewComponent) //The component to add
    );
 });
 ```
 ### Result
 After following this step-by-step article you can use all DevExtreme features in your project.
 ![devexp-result](devexp-result.gif)
 > The result example is created by following [this documentation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ProgressBar/Overview/NetCore/Light/).
 ---
 ### Sample Application
 We have created a sample application with [Tree List](https://demos.devexpress.com/ASPNetCore/Demo/TreeList/Overview/) and [Data Grid](https://demos.devexpress.com/ASPNetCore/Demo/DataGrid/Overview/) examples.
 You can download the source code from [here](https://github.com/abpframework/abp-samples/tree/master/DevExtreme-Mvc).
 We have some notes about this sample and general usages of DevExtreme at ABP based application.
 ### Data Storage
 We will use an in-memory list for using data storage for this sample.
@ -16,13 +213,13 @@ There is a `SampleDataService.cs` file in `Data` folder at `*.Application.Contra
 We did not create `Entities` etc. Because we want to show "How to use DevExtreme?", because of that, in this sample we focused to application and UI layer.
-## JSON Serialization
+### JSON Serialization
 You can see some `[JsonProperty(Name = "OrderId")]` attributes at DTO's. In this sample, we use that attribute on DTO's properties because DevExtreme official resource is suggesting to _disable the conversion in the JSON serializer_ [(ref)](https://js.devexpress.com/Documentation/19_1/Guide/Angular_Components/Visual_Studio_Integration/Add_DevExtreme_to_an_ASP.NET_Core_Angular_Application/#Troubleshooting). **DO NOT DO THAT!**
 If you change **the conversion in the JSON serializer**, some pre-build abp modules may occur a problem.
-## MVC
+### MVC
 You can use some DevExtreme functions to create UI. The following code blocks show you how you can use it with ABP Applicaion Services.
--- a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-js.png
+++ b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-js.png
--- a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-notes.txt
+++ b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-notes.txt
@ -1,56 +0,0 @@
 libs/devextreme/js > dx.aspnet.data.js
 is added by hand. solve it.
 adding nuget.
 install devexpress to local.
 nuget sources Add -Name "DevExtreme ASP.NET MVC Controls" -Source "%ProgramFiles(x86)%\DevExpress 20.1\DevExtreme\System\DevExtreme\Bin\AspNetCore"
 cd -> *.Web
 dotnet add package DevExtreme.AspNet.Data
 dotnet add package DevExtreme.AspNet.Core
 package.json
 add -> "devextreme":  "^20.1.5"
 *.Web -> comm -> yarn
 abp.resourcemapping.js
 add -> "@node_modules/devextreme/dist/**/*": "@libs/devextreme/"
 *.Web -> comm -> gulp
 *.Web -> *WebModule -> add
 ```csharp
 Configure<AbpBundlingOptions>(options =>
 {
 	options
 		.StyleBundles
 		.Get(StandardBundles.Styles.Global)
 		.AddFiles("/libs/devextreme/css/dx.common.css")
 		.AddFiles("/libs/devextreme/css/dx.light.css");
 	options.ScriptBundles
 		.Get(StandardBundles.Scripts.Global)
 		.Contributors
 		.Replace<JQueryScriptContributor, MyScriptContributor>();
 });
 Configure<AbpLayoutHookOptions>(options =>
 {
 	options.Add(
 		LayoutHooks.Head.Last, //The hook name
 		typeof(JqueryHeadViewComponent) //The component to add
 		).Add(
 		LayoutHooks.Head.Last, //The hook name
 		typeof(DevExtremeHeadViewComponent) //The component to add
 	);
 });
 ```
--- a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/jquery-head.png
+++ b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/jquery-head.png
--- a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/yarn.png
+++ b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/yarn.png