Added DevExtreme blog posts

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.
+
+`<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/).

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<Order>()
+            .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<LoadResult> GetOrdersAsync(DataSourceLoadOptions loadOptions)
+    {
+        ...
+    }
+
+    public async Task<Order> InsertOrder(string values)
+    {
+        ...
+    }
+    ...
+}
+```

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<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
+	);
+});
+```