Windows Presentation Foundation

یا به اختصار WPF؛ تکنولوژی مایکروسافت برای طراحی نرم افزار های مدرن با تجربه کاربری بسیار قوی است که از ترکیب یکی از زبان های برنامه نویسی پشتیبانی شده توسط فریم ورک دات‌نت (معمولا C#) و زبان مارک‌آپ XAML بهره میبرد.

این زیرساخت بخشی از چهارچوب معروف مایکروسافت به نام  NET Framework. بوده و از مشهور ترین نرم افزار های ساخته شده توسط آن، محیط توسعه Visual Studio است. در این مطلب نگاهی اجمالی به ویژگی های این زیرساخت می‌اندازیم.

Microsoft Visual Studio, Written in C++ and C# with WPF Microsoft Visual Studio » and «Blend for Visual Studio», Written in C++ and C# with WPF»

امکانات WPF

  • Hardware Accelrated and Direct 3D: نرم‌افزار های توسعه داده شده با WPF به طور پیش‌فرض از امکانات مربوط به شتاب دهنده های گرافیکی، سخت افزاری و DirectX بهره میبرند. 
  • رابط کاربری XAML: رابط کاربری نرم افزار های WPF با مارک‌آپ XAML و Layout های بسیار کارا و قوی تعریف میشوند. به همین دلیل واکنش‌گرا کردن آن بسیار آسان و تغییرات رابط کاربری برای تغییرات احتمالی در آینده نیاز به تغییر بزرگی در بخش های متفاوت برنامه ندارد.
  • پشتیبانی از فرمت های چند رسانه ای: WPF انواع مختلفی از فرمت های چند رسانه ای و پخش کننده های آن ها را به طور پیش‌فرض در خود جای داده و پشتیبانی میکند.
  • تغییر آسان قالب ها و استایل ها: در WPF تغییر ظاهر کنترل ها و تعریف Template های جدید برای نمایش دیتا بسیار آسان است. به عنوان مثال میتوانید به محتوای یک لیست‌باکس کنترل های مختلف مثل عکس یا چک‌باکس اضافه کنید و تغییرات ظاهری متفاوتی را در آن اعمال کنید.
  • جهانی‌سازی: توسعه نرم افزار های چند زبانه و چند‌چینشی به وسیله امکاناتی که WPF در اختیار شما قرار میدهد بسیار آسان است.
  • پشتیبانی از اسناد XPS و PDF و ...: WPF از از امکانات مربوط به گزارش گیری و همچنین پردازش و ایجاد اسناد و کتاب های الکترونیکی بهره میبرد.
  • کتاب خانه ها: برای این زیر ساخت کتاب خانه ها و ابزار های متفاوت بسیاری توسعه داده شده است.
  • برنامه نویسی سه بعدی: در WPF، دقیقا همانند یک موتور بازی سازی امکانات مربوط به ایجاد اشیا گرافیکی و اعمال دوربین و انیمیشن بر روی آن ها تعبیه شده است. اگرچه طراحی سه بعدی در WPF سخت تر از موتور های بازی سازی ست.
  • انیمیشن: WPF از کتاب خانه ها و ابزار بسیار قدرتمندی در زمینه ساخت و توسعه انیمیشن روی کنترل ها و اشکال هندسی، تایم‌لاین ها و استوری‌برد ها بهره میبرد.
  • انقیاد داده: از آنجا که معماری ساخت نرم افزار در WPF مبتنی بر Model-View-ViewModel یا به اختصار MVVM است، انقیاد داده (Data Binding) به اشکال مختلف و بسیار کارآمد در آن پیاده سازی شده است.
  • گرافیک: رندر کننده گرافیکی WPF وابسته به وکتور ها و بردار های گرافیکی‌ست. لذا کیفیت تصاویر و همچنین ظاهر و ساختار برنامه در مانیتور ها با ریزولوشن های متفاوت حفظ می شود. همچنین در این زیرساخت تنظیمات متفاوتی مربوط به hdpi وجود دارد.

در مقایسه با Windows Forms

اگرچه که تکنولوژی فرم های ویندوزی (Windows Forms) تکنولوژی مرده ای نیست و همچنان پشتیبانی و استفاده می‌شود، اما کسانی که با هر دو تکنولوژی WPF و WinForms کار کرده اند و با جادوی WPF آشنایی دارند، برای طراحی نرم افزار های خود هرگز به سمت Windows Forms نمی روند. یکی از دلایلی که هنوز از Windows Forms استفاده می شود این است که امکانات کمتر ولی طراحی راحت تری دارد و برخلاف WPF؛ برای ساخت و توسعه نرم افزار ها شما نیاز به دانش عمیق در مورد اصول طراحی یک نرم افزار مهندسی شده ندارید. نقطه مشترک WPF و WinForms استفاده از رابط های برنامه نویسی Win32 یا همان Classic Desktop است.

در مقایسه با WinRT

نرم افزار های UWP نیز مانند WPF دارای رابط XAML هستند و به طور کلی، شباهت های بسیار زیادی از نظر کنترل ها و Layout با WPF دارند. برخلاف WPF که روی تمامی نسخه های ویندوز که دات نت فریم ورک روی آن نصب شده باشد قابل اجرا هستند، نرم افزار های UWP تنها روی ویندوز های 8 و بالاتر قابل اجرا هستند و بسته به نوع API میتوانند به سیستم عامل نسخه بالاتری نیاز داشته باشند.

نرم افزار های WPF نیز میتوانند به وسیله Desktop Bridge روی Windows Store قرار بگیرند و یا از امکانات ویژه سیستم عامل های به روز تر مانند Widnows 10 استفاده کنند. اما برای توسعه نرم افزار های ویژه این سیستم عامل ها، نرم افزار های Universal و WinRT انتخاب بهتری‌ست.

 فریم ورک الکترون، تکنولوژی متن باز جدیدی برای ساخت نرم افزار های cross-platform و یا قابل اجرا در سیستم عامل های مختلفه. این فریم ورک با استفاده از زبان های HTML ، CSS و جاوا اسکریپت و همچنین بهره گیری از مرورگر کرومیوم میتونه نرم افزار دلخواه شما رو برای لینوکس، مک و یا ویندوز کامپایل و ترجمه کنه. تا حالا نرم افزار های زیادی توسط این فریم ورک تولید و عرضه شده است که از اونها میشه به ویرایشگر قدرتمند اتم اشاره کرد. همچنین شرکت های مطرحی مثل مایکروسافت هم برای نرم افزار های چند پلتفرمه خودشون مثل Microsoft Visual Studio Code در حال استفاده از این فریم ورک هستند. تو این مقاله میخوایم یه آشنایی مختصری با این فریم ورک داشته باشیم. توصیه میکنم برای ساخت نرم افزار دلخواه خودتون با این فریم ورک، از ویرایشگر اتم استفاده کنید. البته بدیهیه که اجباری توی این کار نیست.

 پیش نیاز ها


  • منابع

    الکترون و اتم پروژه های متن بازن و سورسشون توی گیت هاب هست. اگه مایل به همکاری با سازندگان این نرم افزار ها هستید میتونید یه سر به گیت هاب بزنید

    منابع

  • اتم

    ویرایشگر اتم، یه ویرایش گر پیشرفته با قابلیت نصب پکیج و پوسته کاربرپسنده. شایان ذکره که این ویرایشگر هم توسط الکترون ساخته شده.

    دانلود اسناد

  • الکترون

    برای دانلود الکترون میتونید از دستورات npm و یا لینک زیر استفاده کنید. اگه از npm دانلود میکنید نگاهی به شروع با الکترون بندازید

    دانلود اسناد

شروع


برای ساخت نرم افزار خودتون یه پوشه دلخواه بسازید که حاوی فایل های زیر باشه:

  • package.json
  • main.js
  • index.html

به طور پیشفرض میتونید از محتوا های زیر برای فایل ها استفاده کنید. فایل شناسایی پکیج ها به نرم افزار (package.json):

{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}

محتوای جاوا اسکریپت:

var {app} = require('electron')  // کنترل هسته نرم افزار
var BrowserWindow = require('browser-window');  // ساخت پنجره نرم افزار

// گزارش سقوط نرم افزار
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is GCed.
var mainWindow = null;

// دستورات مربوط به خروج نرم افزار پس از بسته شدن تمامی پنجره ها
app.on('window-all-closed', function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// این متد بعد از اینکه الکترون فراخوانی شود اجرا میشود
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // ساخت پنجره نرم افزار
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // لود کردن فایل اچ تی ام ال و طراحی رابط کاربری نرم افزار
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // دستور زیر ابزار های توسعه را برای نرم افزار فعال میکند. رفع مشکل طراحی
// و دیباگ کردن اسکریپت ها را قبل از انتشار نرم افزار به این بخش بسپارید // mainWindow.openDevTools(); // Emitted when the window is closed. mainWindow.on('closed', function() { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. mainWindow = null; }); });

فایل اچ تی ام ال شما هم میتونه چیزی شبیه این باشه:

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
<
/html>

بعد از ساخت فایل ها هم پوشه پروژتون رو داخل فریم ورک الکترون بکشید تا اجرا بشه.

برای اطلاعات بیشتر و شخصی سازی نرم افزار به بخش اسناد الکترون مراجعه کنید. به طور مثال اگه میخواید پنجره نرم افزار توسط کاربر تغییر اندازه داده نشه کافیه تکه کد resize: false رو به بخش تنظیمات پنجره توی فایل main.js وارد کنید.