mahmoodkabi
چهارشنبه 29 تیر 1390, 23:31 عصر
Mvvm چیست؟
روش پیاده سازی نرم افزار است که گره خوردگی بین UI (VIEW) برنامه با منطق برنامه (viewModle) به حداقل میزان ممکن می رساند. حتی می توان برنامه را طوری پیاده کرد که هیچ گونه ارتباطی بین این دو وجود نداشته باشد. این روش پیاده سازی با استفاده از Binding پیشرفته ای که در SilverLight و WPF وجود دارد ممکن شده است.
در این مقاله MVVM و Binding ی که در SilverLight وجود دارد به اضافه موارد مرتیط با این دو شرح داده شده است.
این برنامه با ارتباط به دیتابیس اعمال متداول در یک برنامه تجاری را فراهم می آورد. این اعمال شامل وروود ، حذف ، ویرایش و جستجو رکوردهای داده ای می باشد.
در این برنامه یک جدول به نام calcdigt وجود دارد . وظیفه این جدول نگهداری اطلاعاتی می باشد که از جمع ، تفریق ، ضرب و تقسیم دو عدد حاصل می شود.
نیازمندیهای برنامه:
1- visualStudio 2010
2- SQLserver 2008 or 2005
قدم اول:
VisualStudio را باز کنید و یک پروژه سیلور لایت را اغاز نمایید. دقت کنید گزینه WCF RIS Services تیک خورده باشد. (تصویر 1-1)
7271172740
تصویر 1-1
بر روی پروژه وب راست کلیک کنید(mvvm_CalcDigit1.Web) و گزینه add/add new item را کلیک کنید. صفحه زیر نمایش داده می شود.(تصویر 1-2). نام CalcDigitModel.edmx را برای این entity model انتخاب کنید.
در صفحه ای که باز می شود ADO.NET Entity DataModel را انتخاب و add کنید. یک ویزارد نمایش داده می شود. در این ویزارد شما می توانید به دیتابیس متصل شود و جدول های مورد نظر خود را انتخاب کنید . ما در این پروژه تنها به یک جدول نیاز داریم. نام دیتا بیس ما mvvm و نام جدول ما CalcDigit می باشد.(تصویر 1-3)
در پایان بر روی دکمه FINISH کلیک کنید. موجودیت CalcDigits به entity model شما اضافه می گردد.
72747
قبل از رفتن به مراحل بعد پروژه را یک بار کامپایل کنید. دقت کنید که نباید هیچ خطایی در برنامه رخ دهد. این کار برای اینست که domain service موجودیت های جدید را شناسایی کند.
اکنون یک domain service به پروژه وب خود اضافه کنید. نام این domain service را CalcDigitDomainService.cs بگذارید. (تصویر 1-4)
7271472743
تصویر 1-4
بر روی دکمه add کلیک کنید تا ویزارد نماش داده شود. (تصویر 1-5)
7271572744
تصویر 1-5
چک باکس calcDigit را تیک بزنید تا امکان خواندن رکوردها فراهم شود. با تیک زدن چک باکس enable editing متدهای insert و update در domain servise نیز ایجاد می گردد.
در اینجا کار ما در قسمت وب پروژه به پایان می رسد.
قدم دوم:
صفحه mainpage بعد از اضافه کردن کنترل های لازم به شکل زیر در می اید.(تصویر 1-6)
72718
72748
تصویر 1-6
این صفحه در حقیقت UI یا همان View می باشد. پیاده سازی Model در تمامی برنامه ها الزامی نیست و بستگی به ساختار برنامه شما دارد. به سراغ پیاده سازی ViewModel برنامه می رویم. بعد از اینکه ViewModel را پیاده سازی کردیم به View برنامه باز می گردیم و طریقه Bind کردن کنترل های View را به ViewModel بررسی می نماییم.
یک folder به پروژه mvvm_CalcDigit1 اضافه کنید . به این فولدر یک کلاس با نام DigitViewModel.cs add کنید.
برای خوانایی بهتر کلاس DigitViewModel آن را به سه قسمت command، properties and varibels و method and event تقسیم بندی کرده ایم.
تمامی آنچه که می خواهیم در Biding به کار ببریم در این ناحیه قرار می دهیم. به عنوان نمونه به کد زیر دقت کنید.
public RelayCommand SaveCommand
{
get;
private set;
}
یک نمونه از کلاس RelayCommand با نام SaveCommand ایجاد کردیم. وظیفه SaveCommand ذخیره اطلاعات در دیتابیس با کمک متد SaveChengs می باشد. این متد در constructor کلاس به SaveCommand معرفی شده است.
در متد saveChangs ابتدا متغیر IsBusy را True می کنیم. با این کار امکان تغییر دیگری در برنامه را تا پایان عملیات ذخیره اطلاعات از کاربر می گیریم. سپس در یک حلقه داده های وروودی را رکوورد به رکوورد بررسی می نماییم تا خطایی در داده ها وجود نداشته باشد. در صورتی که از درست بودن داده ها اطمینان حاصل کردیم تنها با یک خط اطلاعات را در دیتابیس ذخیره می نماییم.
_context.SubmitChanges(SaveChangesCompleted, null);
در این خط از DomainContext (_context) می خواهیم اطلاعات را ذخیره کند (SubmitChanges) و بعد از ذخیره اطلاعات متد SaveChangesCompleted را صدا بزند (در اصطلاح به این عمل Callback می گویند)
public void SaveChanges()
{
IsBusy = true;
foreach (var entity in _context.CalcDigits)
{
if (entity.HasChanges
&& entity.HasValidationErrors)
{
MessageBox.Show("Impossible to save");
return;
}
}
_context.SubmitChanges(SaveChangesCompleted, null);
}
private void SaveChangesCompleted(SubmitOperation op)
{
IsBusy = false;
MessageBox.Show("SAVE OK!", "", MessageBoxButton.OK);
}
RelayCommand یکی از کلاس های کتابخانه MVVMLIGHT می باشد . این کتابخانه را از سایت www دانلود کنید. برای راحتی کار شما کلاس های مورد نیاز از این کتابخانه در پوشه Helper قرار داده شده است.
سایر دستورات در ناحیه Command مانند همین قسمت می باشد
INotifyPropertyChanged اینترفیس
viewModel ما از این اینترفیس ارث بری دارد.وظیفه این اینترفیس به روز رسانی view و viewmodel از تغییرات رخ داده در دیگری می باشد.
در viewmodel هر خاصيتي كه قرار است در binding شركت داشته باشد بايد اينترفيس INotifyPropertyChanged را پياده سازي نمايد.
به دو نمونه کد زیر دقت کنید.
public CalcDigit selectedNumber
{
set
{
_currentNumber = value;
if (PropertyChanged == null) return;
RaisePropertyChanged("selectedNumber");
}
get {return _currentNumber;}
}
public string SearchText
{
set
{
_txtSearch = value;
if (PropertyChanged == null) return;
RaisePropertyChanged("SearchText");
}
get { return _txtSearch; }
}
selectedNumber و SearchText در view برنامه در قسمت binding چند کنترل به کار رفته است. به راحتی می توانید در XAML ، برنامه آنها را پیدا کنید.
اکنون برنامه را اجرا کنید و نتیجه برنامه را مشاهده فرمایید.
سورس برنامه را از این لینک دانلود کنید
http://www.mediafire.com/?uu80rsncwyk298x
روش پیاده سازی نرم افزار است که گره خوردگی بین UI (VIEW) برنامه با منطق برنامه (viewModle) به حداقل میزان ممکن می رساند. حتی می توان برنامه را طوری پیاده کرد که هیچ گونه ارتباطی بین این دو وجود نداشته باشد. این روش پیاده سازی با استفاده از Binding پیشرفته ای که در SilverLight و WPF وجود دارد ممکن شده است.
در این مقاله MVVM و Binding ی که در SilverLight وجود دارد به اضافه موارد مرتیط با این دو شرح داده شده است.
این برنامه با ارتباط به دیتابیس اعمال متداول در یک برنامه تجاری را فراهم می آورد. این اعمال شامل وروود ، حذف ، ویرایش و جستجو رکوردهای داده ای می باشد.
در این برنامه یک جدول به نام calcdigt وجود دارد . وظیفه این جدول نگهداری اطلاعاتی می باشد که از جمع ، تفریق ، ضرب و تقسیم دو عدد حاصل می شود.
نیازمندیهای برنامه:
1- visualStudio 2010
2- SQLserver 2008 or 2005
قدم اول:
VisualStudio را باز کنید و یک پروژه سیلور لایت را اغاز نمایید. دقت کنید گزینه WCF RIS Services تیک خورده باشد. (تصویر 1-1)
7271172740
تصویر 1-1
بر روی پروژه وب راست کلیک کنید(mvvm_CalcDigit1.Web) و گزینه add/add new item را کلیک کنید. صفحه زیر نمایش داده می شود.(تصویر 1-2). نام CalcDigitModel.edmx را برای این entity model انتخاب کنید.
در صفحه ای که باز می شود ADO.NET Entity DataModel را انتخاب و add کنید. یک ویزارد نمایش داده می شود. در این ویزارد شما می توانید به دیتابیس متصل شود و جدول های مورد نظر خود را انتخاب کنید . ما در این پروژه تنها به یک جدول نیاز داریم. نام دیتا بیس ما mvvm و نام جدول ما CalcDigit می باشد.(تصویر 1-3)
در پایان بر روی دکمه FINISH کلیک کنید. موجودیت CalcDigits به entity model شما اضافه می گردد.
72747
قبل از رفتن به مراحل بعد پروژه را یک بار کامپایل کنید. دقت کنید که نباید هیچ خطایی در برنامه رخ دهد. این کار برای اینست که domain service موجودیت های جدید را شناسایی کند.
اکنون یک domain service به پروژه وب خود اضافه کنید. نام این domain service را CalcDigitDomainService.cs بگذارید. (تصویر 1-4)
7271472743
تصویر 1-4
بر روی دکمه add کلیک کنید تا ویزارد نماش داده شود. (تصویر 1-5)
7271572744
تصویر 1-5
چک باکس calcDigit را تیک بزنید تا امکان خواندن رکوردها فراهم شود. با تیک زدن چک باکس enable editing متدهای insert و update در domain servise نیز ایجاد می گردد.
در اینجا کار ما در قسمت وب پروژه به پایان می رسد.
قدم دوم:
صفحه mainpage بعد از اضافه کردن کنترل های لازم به شکل زیر در می اید.(تصویر 1-6)
72718
72748
تصویر 1-6
این صفحه در حقیقت UI یا همان View می باشد. پیاده سازی Model در تمامی برنامه ها الزامی نیست و بستگی به ساختار برنامه شما دارد. به سراغ پیاده سازی ViewModel برنامه می رویم. بعد از اینکه ViewModel را پیاده سازی کردیم به View برنامه باز می گردیم و طریقه Bind کردن کنترل های View را به ViewModel بررسی می نماییم.
یک folder به پروژه mvvm_CalcDigit1 اضافه کنید . به این فولدر یک کلاس با نام DigitViewModel.cs add کنید.
برای خوانایی بهتر کلاس DigitViewModel آن را به سه قسمت command، properties and varibels و method and event تقسیم بندی کرده ایم.
تمامی آنچه که می خواهیم در Biding به کار ببریم در این ناحیه قرار می دهیم. به عنوان نمونه به کد زیر دقت کنید.
public RelayCommand SaveCommand
{
get;
private set;
}
یک نمونه از کلاس RelayCommand با نام SaveCommand ایجاد کردیم. وظیفه SaveCommand ذخیره اطلاعات در دیتابیس با کمک متد SaveChengs می باشد. این متد در constructor کلاس به SaveCommand معرفی شده است.
در متد saveChangs ابتدا متغیر IsBusy را True می کنیم. با این کار امکان تغییر دیگری در برنامه را تا پایان عملیات ذخیره اطلاعات از کاربر می گیریم. سپس در یک حلقه داده های وروودی را رکوورد به رکوورد بررسی می نماییم تا خطایی در داده ها وجود نداشته باشد. در صورتی که از درست بودن داده ها اطمینان حاصل کردیم تنها با یک خط اطلاعات را در دیتابیس ذخیره می نماییم.
_context.SubmitChanges(SaveChangesCompleted, null);
در این خط از DomainContext (_context) می خواهیم اطلاعات را ذخیره کند (SubmitChanges) و بعد از ذخیره اطلاعات متد SaveChangesCompleted را صدا بزند (در اصطلاح به این عمل Callback می گویند)
public void SaveChanges()
{
IsBusy = true;
foreach (var entity in _context.CalcDigits)
{
if (entity.HasChanges
&& entity.HasValidationErrors)
{
MessageBox.Show("Impossible to save");
return;
}
}
_context.SubmitChanges(SaveChangesCompleted, null);
}
private void SaveChangesCompleted(SubmitOperation op)
{
IsBusy = false;
MessageBox.Show("SAVE OK!", "", MessageBoxButton.OK);
}
RelayCommand یکی از کلاس های کتابخانه MVVMLIGHT می باشد . این کتابخانه را از سایت www دانلود کنید. برای راحتی کار شما کلاس های مورد نیاز از این کتابخانه در پوشه Helper قرار داده شده است.
سایر دستورات در ناحیه Command مانند همین قسمت می باشد
INotifyPropertyChanged اینترفیس
viewModel ما از این اینترفیس ارث بری دارد.وظیفه این اینترفیس به روز رسانی view و viewmodel از تغییرات رخ داده در دیگری می باشد.
در viewmodel هر خاصيتي كه قرار است در binding شركت داشته باشد بايد اينترفيس INotifyPropertyChanged را پياده سازي نمايد.
به دو نمونه کد زیر دقت کنید.
public CalcDigit selectedNumber
{
set
{
_currentNumber = value;
if (PropertyChanged == null) return;
RaisePropertyChanged("selectedNumber");
}
get {return _currentNumber;}
}
public string SearchText
{
set
{
_txtSearch = value;
if (PropertyChanged == null) return;
RaisePropertyChanged("SearchText");
}
get { return _txtSearch; }
}
selectedNumber و SearchText در view برنامه در قسمت binding چند کنترل به کار رفته است. به راحتی می توانید در XAML ، برنامه آنها را پیدا کنید.
اکنون برنامه را اجرا کنید و نتیجه برنامه را مشاهده فرمایید.
سورس برنامه را از این لینک دانلود کنید
http://www.mediafire.com/?uu80rsncwyk298x