قدرت مایکروسافت Blazor را باز کنید: ادغام بدون درز با طراح گردش کار – اکنون راهنمای را بررسی کنید!

مقدمه

قبل از اینکه به راهنمای اصلی ادغام Workflow Designer با Blazor بپردازیم، منطقی است که مزایای عملی استفاده از موتورهای گردش کار در برنامه ها را به خوانندگان منتقل کنیم. اگر قبلاً به این موضوع فکر نکرده‌اید، یا اگر انگیزه لازم برای پیاده‌سازی موتور گردش کار را نداشته‌اید، مطمئناً این ویدیوی YouTube توسط جف فریتز شما را مجذوب خود خواهد کرد. جف فریتز مدیر برنامه اصلی در بخش توسعه دهندگان مایکروسافت است که بر روی تیم انجمن دات نت کار می کند. ما مطمئن هستیم که این ویدیو به شما کمک می‌کند تا مزایای پیاده‌سازی Workflow Engine با ویرایشگر گردش کار بصری را درک کنید و هرگونه شک و تردیدی را که ممکن است داشته باشید برطرف کند.

جف فریتز به روشی ساده و قابل دسترس، با استفاده از یک مثال تحویل، توضیح می دهد که چگونه استفاده از موتور گردش کار به ساده سازی توسعه کمک می کند و زمان و تلاش صرف شده برای بازسازی و آزمایش را کاهش می دهد.

https://www.youtube.com/watch?v=vpMzm6TsdDY

بررسی اجمالی

همه توسعه دهندگان بک اند دات نت در چارچوب های فرانت اند محبوب مانند React یا Angular تخصص ندارند. با این حال، توسعه دهندگان باطن دات نت اغلب دارای مهارت در Microsoft Blazor هستند. ما اغلب درخواست‌هایی از تیم پشتیبانی فنی خود دریافت کرده‌ایم تا نمونه‌ای از ادغام نسخه اجتماعی Optimajet WorkflowEngine (که شامل یک طراح بصری است) با Microsoft Blazor ایجاد کنیم. ما این کار را انجام داده‌ایم و یک مثال و راهنمای در مخزن GitHub با شما به اشتراک می‌گذاریم).

بیایید با ایجاد یک برنامه با استفاده از blazorserver قالب.

mkdir workflow-designer-blazor
cd workflow-designer-blazor
dotnet new blazorserver

ما می توانیم این برنامه را با استفاده از dotnet watch دستور داده و کد آن را در لحظه تغییر دهید. این یک ویژگی عالی از dotnet CLI! اگر
اگر برنامه را اجرا کنید و آن را در یک مرورگر باز کنید، چیزی شبیه به این خواهید دید:

اپلیکیشن Empty Blazor

آنچه می خواهیم اضافه کنیم:

1. فایل های CSS و JS برای Workflow Designer از CDN.
2. طراح عنصر ناوبری در پانل سمت چپ با صفحه مربوطه.
3. طراح گردش کار در صفحه جدید Blazor.

افزودن گردش کار CSS و JS برای طراح گردش کار

ابتدا باید CSS و JS را از Workflow Designer به برنامه خود اضافه کنیم تا بتوانیم Designer را به صفحه جدیدی متصل کنیم. ما نیز خواهیم کرد
نیاز به اتصال jQuery دارید، زیرا Workflow Designer از آن در کار خود استفاده می کند.

ما فقط برای جلوگیری از کپی کردن فایل های Designer در پروژه از CDN استفاده خواهیم کرد. البته، می توانید به جای CDN از فایل های محلی استفاده کنید، مخصوصاً
زمانی که در محیطی با دسترسی محدود به اینترنت کار می کنید مهم است.

اطلاعات مهم

با توجه به نحوه کار Blazor با کد جاوا اسکریپت، کد خارجی جاوا اسکریپت باید بعد از اسکریپت گنجانده شود. blazor.server.js.

باز کن Pages/_Host.cshtml فایل و خطوط برجسته شده را مانند شکل زیر اضافه کنید. سبک ها در داخل اضافه می شوند tag, scripts are added to the end of the page.

@page "https://dev.to/"
@using Microsoft.AspNetCore.Components.Web
@namespace workflow_designer_blazor.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers


 lang="en">

     charset="utf-8"/>
     name="viewport" content="width=device-width, initial-scale=1.0"/>
     href="~/"/>
     rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
     href="css/site.css" rel="stylesheet"/>
     href="workflow-designer-blazor.styles.css" rel="stylesheet"/>
     rel="stylesheet" href="https://unpkg.com/@@optimajet/workflow-designer@12.5.1/dist/workflowdesigner.min.css">
     rel="icon" type="image/png" href="favicon.png"/>
     type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>


 type="typeof(App)" render-mode="ServerPrerendered"/>

 id="blazor-error-ui">
     include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    
     include="Development">
        An unhandled exception has occurred. See browser dev tools for details.
    
     href="" class="reload">Reload
     class="dismiss">🗙


"_framework/blazor.server.js">
// &new>
"https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous">
"https://unpkg.com/@@optimajet/workflow-designer@12.5.1/dist/workflowdesignerfull.min.js"
        async defer>

"js/designerInterop.js">
// <&new
body>

function renderWorkflowDesigner(options) {
    var wfdesigner = new WorkflowDesigner({
        apiurl: options.apiUrl,
        name: 'wfe',
        language: 'en',
        renderTo: options.elementId,
        graphwidth: window.innerWidth - 400,
        graphheight: window.innerHeight - 100,
        showSaveButton: true,
    })

    const data = {
        schemecode: options.schemeCode,
        processid: options.processId
    }

    if (wfdesigner.exists(data)) {
        wfdesigner.load(data)
    } else {
        wfdesigner.create(data.schemecode)
    }
}

function waitForJsAndRender(options) {
    if (typeof window.WorkflowDesigner !== 'undefined') {
        renderWorkflowDesigner(options)
        return
    }

    // the interval here is only needed to wait for the javascript to load with the designer
    const interval = setInterval(() => {
        // if the designer hasn't been uploaded yet, we'll wait a little longer
        if (typeof window.WorkflowDesigner === 'undefined') return

        clearInterval(interval)
        renderWorkflowDesigner(options)
    }, 30)
}

 class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    

@page "/designer"
@inject IJSRuntime JSRuntime

Workflow designer

 id="root">

@code
{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var options = new
            {
                apiUrl = "https://demo.workflowengine.io/Designer/API",
                elementId = "root",
                schemeCode = "SimpleWF"
            };
            await JSRuntime.InvokeAsync("waitForJsAndRender", options);
        }
    }
}