diff --git 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 new file mode 100644 index 0000000000..eb4d2d1034 --- /dev/null +++ b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Intergrate-DevExtreme-To-ABP-Based-Application.md @@ -0,0 +1,237 @@ +## 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. + +`` + +Add following `PackageReference` to your `DevExtremeSample.Application.Web` project. + +`` + +> 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(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 `` section. + +But we can create `ViewComponent` and render it at `` 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 + + + + + +``` + +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 `` section by using **hooks**. + +Open your `DevExtremeSampleWebModule.cs` file in your `DevExtremeSample.Application.Web` project and add following code to `ConfigureServices` method. + +```csharp +Configure(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 `` 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 + + +``` + +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 `` section. + +```csharp +Configure(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(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(); +}); +``` + +### 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/). diff --git 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 new file mode 100644 index 0000000000..c2c2ddeed7 --- /dev/null +++ b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/Using-DevExtreme-In-ABP-Based-Application.md @@ -0,0 +1,55 @@ +## Using DevExtreme in ABP Based Application + +Hi, in this article, I will explain some cases of DevExtreme usages in ABP based application. + +This article will reference [this](https://github.com/abpframework/abp-samples/tree/master/DevExtreme-Mvc) sample. + +## Integrate DevExtreme Packages to ABP Framework Based Applications + +Please follow [Intergrate DevExtreme documentation](Intergrate-DevExtreme-To-ABP-Based-Application.md) to see each step. This article will not include setup informations. + +## Data Storage + +We will use an in-memory list for using data storage for this sample. + +There is a `SampleDataService.cs` file in `Data` folder at `*.Application.Contracts` project. We store all sample data here. + +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 + +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 + +You can use some DevExtreme functions to create UI. The following code blocks show you how you can use it with ABP Applicaion Services. + +```csharp +Html.DevExtreme().DataGrid() + .DataSource(d => d.Mvc() + .Controller("Order") // Application Service Name 'without **AppService**' + .LoadAction("GetOrders") // Method Name 'without **Async**' + .InsertAction("InsertOrder") + .UpdateAction("UpdateOrder") + .DeleteAction("DeleteOrder") + .Key("OrderID") + ) +``` + +```csharp +public class OrderAppService : DevExtremeSampleAppService, IOrderAppService +{ + public async Task GetOrdersAsync(DataSourceLoadOptions loadOptions) + { + ... + } + + public async Task InsertOrder(string values) + { + ... + } + ... +} +``` diff --git a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devexp-result.gif b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devexp-result.gif new file mode 100644 index 0000000000..03b0875468 Binary files /dev/null and b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devexp-result.gif differ diff --git 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 new file mode 100644 index 0000000000..4fdf614efc Binary files /dev/null and b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-js.png differ diff --git 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 new file mode 100644 index 0000000000..14f5493cda --- /dev/null +++ b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/devextreme-notes.txt @@ -0,0 +1,56 @@ + +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(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(); +}); + +Configure(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 + ); +}); +``` \ No newline at end of file diff --git a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/gulp.png b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/gulp.png new file mode 100644 index 0000000000..4c84e5410d Binary files /dev/null and b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/gulp.png differ diff --git a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/initial-project.png b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/initial-project.png new file mode 100644 index 0000000000..fa2516d23d Binary files /dev/null and b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/initial-project.png differ diff --git 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 new file mode 100644 index 0000000000..a89c465bdc Binary files /dev/null and b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/jquery-head.png differ diff --git a/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/wwwroot-lib.png b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/wwwroot-lib.png new file mode 100644 index 0000000000..26f9a6be72 Binary files /dev/null and b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/wwwroot-lib.png differ diff --git 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 new file mode 100644 index 0000000000..a572068787 Binary files /dev/null and b/docs/en/Community-Articles/2020-08-18-DevExtreme-With-ABP/yarn.png differ