آموزش dialog در برنامه نویسی اورلیا

آموزش dialog در برنامه نویسی اورلیا

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش dialog در برنامه نویسی اورلیا خواهیم پرداخت.

مرحله ۱ – نصب یک افزونه Dialog

پلاگین Dialog را می توان از پنجره خط فرمان نصب کرد.

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog

برای کارکرد این افزونه، باید از بوت استرپ دستی استفاده کنیم. ما در درس پیکربندی به این موضوع پرداختیم. در داخل فایل main.js ، ما باید پلاگین aurelia-dialog را اضافه کنیم.

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
   .plugin('aurelia-dialog'); 

   aurelia.start().then(() => aurelia.setRoot());
}

مرحله ۲ – ایجاد پوشه ها و فایل ها

ابتدا ما یک دایرکتوری جدید به نام modal خواهیم ساخت. بیایید آن را داخل پوشه کامپوننت ها قرار دهیم. خط فرمان را باز کرده و کد زیر را اجرا کنید.

C:\Users\username\Desktop\aureliaApp\src\components>mkdir modal

در این پوشه ، دو فایل جدید ایجاد خواهیم کرد. این پرونده ها نمای ماشینی و نمای مدل را برای ما دارند.

C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.html
C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.js

مرحله ۳ – یک Modal ایجاد کنید

ابتدا اجازه دهید کدهای view-model را اضافه کنیم. ما باید کنترل کننده گفتگو را وارد و تزریق کنیم. این کنترل کننده برای مدیریت ویژگی های خاص مد استفاده می شود. در مثال زیر، ما از آن استفاده می کنیم تا یک حالت را به صورت افقی متمرکز کنیم.

my-modal.js

import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';

@inject(DialogController)

export class Prompt {
   constructor(controller) {
      this.controller = controller;
      this.answer = null;

      controller.settings.centerHorizontalOnly = true;
   }
   activate(message) {
      this.message = message;
   }
}

کد مشاهده به این شکل خواهد بود. با کلیک روی دکمه ها ، حالت استاندارد باز یا بسته می شود.

my-modal.html

<template>
   <ai-dialog>
      <ai-dialog-body>
         <h2>${message}</h2>
      </ai-dialog-body>

      <ai-dialog-footer>
         <button click.trigger = "controller.cancel()">Cancel</button>
         <button click.trigger = "controller.ok(message)">Ok</button>
      </ai-dialog-footer>	
   </ai-dialog>	
</template>

مرحله ۴ – یک Modal را راه اندازی کنید

آخرین مرحله تابعی برای تحریک حالت ما است. ما باید DialogService را وارد و تزریق کنیم. این سرویس روشی باز دارد که در آن می توانیم view-model را از پرونده و مدل my modal عبور دهیم ، بنابراین می توانیم داده ها را به صورت پویا پیوند دهیم.

app.js

import {DialogService} from 'aurelia-dialog';
import {inject} from 'aurelia-framework';
import {Prompt} from './components/modal/my-modal';

@inject(DialogService)

export class App {
   constructor(dialogService) {
      this.dialogService = dialogService;
   }
   openModal() {
      this.dialogService.open( {viewModel: Prompt, model: 'Are you sure?' }).then(response => {
         console.log(response);
            
         if (!response.wasCancelled) {
            console.log('OK');
         } else {
            console.log('cancelled');
         }
         console.log(response.output);
      });
   }
};

سرانجام، ما یک دکمه ایجاد خواهیم کرد تا بتوانیم عملکرد openModal را فراخوانی کنیم.

app.html

<template>
   <button click.trigger = "openModal()">OPEN MODAL</button>
<template>

اگر برنامه را اجرا کنیم ، می توانیم با کلیک بر روی دکمه OPEN MODAL یک عملکرد جدید جدید ایجاد کنیم

منبع.

لیست جلسات قبل آموزش برنامه نویسی اورلیا

1. آموزش برنامه نویسی اورلیا
2. بررسی اجمالی برنامه نویسی اورلیا 
3. آموزش تنظیمات محیطی در برنامه نویسی اورلیا 
4.  آموزش اولین برنامه در برنامه نویسی اورلیا
5. آموزش اجزا در برنامه نویسی اورلیا
6. آموزش چرخه زندگی کامپوننت در برنامه نویسی اورلیا
7. آموزش عناصر سفارشی در برنامه نویسی اورلیا
8. آموزش تزریق وابستگی در برنامه نویسی اورلیا
9. آموزش پیکربندی در برنامه نویسی اورلیا
10. آموزش پلاگین ها در برنامه نویسی اورلیا
11. آموزش اتصال داده ها در برنامه نویسی اورلیا
12. آموزش رفتار اتصال در برنامه نویسی اورلیا
13. آموزش مبدل ها در برنامه نویسی اورلیا
14. آموزش رویدادها در برنامه نویسی اورلیا
15. آموزش گردآورنده رویداد در برنامه نویسی اورلیا
16. آموزش فرم ها در برنامه نویسی اورلیا
17. آموزش HTTP در برنامه نویسی اورلیا
18. آموزش رفرنس ها در در برنامه نویسی اورلیا
19. آموزش مسیریابی در برنامه نویسی اورلیا
20. آموزش تاریخچه در برنامه نویسی اورلیا
21. آموزش انیمیشن ها در برنامه نویسی اورلیا
22. آموزش dialog در برنامه نویسی اورلیا
23. آموزش بومی سازی در برنامه نویسی اورلیا
24. آموزش ابزارها در برنامه نویسی اورلیا
25. آموزش بسته بندی در برنامه نویسی اورلیا
26. آموزش اشکال زدایی در برنامه نویسی اورلیا
27.  جامعه برنامه نویسی اورلیا