در مورد بررسی ارتباط با دادهها در WPF باید سه مورد را بشناسیم:
- DataContext: این شیء اتصالش را به منبع دادهها برقرار کرده و هر موقع دادهای را نیاز داریم، از طریق این شیء تامین میشود.
- DataBinding: یک واسطه بین DataContext و هر آن چیزی است که قرار است از دادهها تغذیه کند. در تعریفی رسمیتر میگوییم: روشی ساده و قدرتمند بوده و واسطی است بین مدل تجاری و رابط کاربری. هر زمانی که دادهای تغییر کند، ما را آگاه میسازد که میتواند یک ارتباط یک طرفه یا دو طرفه باشد.
- DataTemplate: نحوهی فرمت بندی و نمایش دادهها را تعیین میکند.
ابتدا قبل از هر چیزی کلاس فرم قبلی را پیاده سازی میکنیم. در این پیاده سازی از یک enum برای انتخاب زمینههای کاری هم کمک گرفته ایم و هچنین با یک متد ایستا، منبع دادهی تک رکوردی را جهت تست برنامه آماده کردهایم:
public enum FieldOfWork { Actor=0, Director=1, Producer=2 } public class Person { public string Name { get; set; } public bool Gender { get; set; } public string ImageName { get; set; } public string Country { get; set; } public DateTime Date { get; set; } public IList<FieldOfWork> FieldOfWork { get; set; } public static Person GetPerson() { return new Person() { Name = "Leo", Gender = true, ImageName ="man.jpg", Country = "Italy", Date = DateTime.Now }; } }
حالا لازم است که این منبع داده را در اختیار DataContext بگذاریم. وارد بخش کد نویسی شده و در سازندهی پنجره کد زیر را مینویسیم:
DataContext = Person.GetPerson();
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); DataContext = Person.GetPerson(); } }
همانطور که میدانید متن کنترل TextBox توسط خصوصیت Text پر میشود و برای همین در این خصوصیت مینویسیم:
Text="{Binding Name}"
Source="{Binding ImageName}"
اطلاع از به روزرسانی در منبع دادهها:
حال این نکته پیش میآید که اگر همین اطلاعات دریافت شده در مدل منبع داده تغییر کند، چگونه میتوانیم از این موضوع مطلع شده و همین اطلاعات به روز شده را که نمایش دادهایم، تغییر دهیم. بنابراین جهت اطلاع از این مورد، کد را به شکل زیر تغییر میدهیم.
کار را از یک کلاس آغاز میکنیم. از اینترفیس INotifyPropertyChanged ارث بری کرده و در آن یک رویداد و یک متد را تعریف میکنیم و کمی در هم در تعریف Propertyها دست میبریم. فعلا اینکار را فقط برای پراپرتی Name انجام میدهیم:
private string _name; public string Name { get { return _name; } set { _name = value; OnPropertyChanged("Name"); } } public event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(string property) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(property)); } }
در بخش Setter آن خصوصیت هم باید این متد را صدا زده و نام خصوصیت را به آن پاس بدهیم تا موقعی که مدل تغییر پیدا کرد، بگوید که خصوصیت Name بوده است که تغییر کرده است.
برای اینکه بدانیم کد واقعا کار میکند و تستی بر آن زده باشیم، فعلا دکمهی Save را به Change تغییر میدهیم و کد داخل پنجره را بدین صورت تغییر میدهیم:
public partial class MainWindow : Window { private Person person; public MainWindow() { InitializeComponent(); person = Person.GetPerson(); DataContext = person; } private void Button_Click(object sender, RoutedEventArgs e) { person.Name = "Leonardo Decaperio"; } }
این کد واقعا کدی مفید جهت به روزرسانی است ولی مشکلی دارد که نام پراپرتی باید به صورت String به آن پاس شود که در یک برنامه بزرگ این مورد یک مشکل خواهد شد و اگر نام خصوصیت تغییر کند باید نام داخل آن هم تغییر کند؛ پس کد را به شکل دیگری بازنویسی میکنیم:
private string _name; public string Name { get { return _name; } set { _name = value; OnPropertyChanged(); } } private void OnPropertyChanged([CallerMemberName] string property="") { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(property)); } }
OnPropertyChanged();
کد این قسمت
در قسمتهای آینده به بررسی تبدیل مقادیر و framework element و کنترلها میپردازیم.
دریافت وابستگیهای سمت کاربر مباحث اعتبارسنجی
زمانیکه گزینهی ایجاد یک پروژهی جدید ASP.NET Core را در VS.NET انتخاب میکنیم، علاوه بر قالب empty آن، قالب دیگری به نام web application نیز در آن موجود است. با انتخاب این قالب، فایلی را به نام bower.json نیز با این محتوا مشاهده میکنید:
{ "name": "asp.net", "private": true, "dependencies": { "bootstrap": "3.3.6", "jquery": "2.2.0", "jquery-validation": "1.14.0", "jquery-validation-unobtrusive": "3.2.6" } }
این بستهها را پس از دریافت، در پوشهی bower_components خواهید یافت:
البته باید دقت داشت که استفاده از bower در اینجا الزامی نیست. اگر علاقمند بودید از npm و node.js استفاده کنید.
افزودن وابستگیهای سمت کاربر مباحث اعتبارسنجی و عمومی کردن آنها
پس از دریافت وابستگیهای مورد نیاز توسط bower، به فایل layout برنامه مراجعه کرده و سپس آنها را به ترتیب ذیل اضافه میکنیم:
<script src="~/bower_components/jquery/dist/jquery.min.js"></script> <script src="~/bower_components/jquery-validation/dist/jquery.validate.min.js"></script> <script src="~/bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script> @RenderSection("scripts", required: false) </body> </html>
// Serve wwwroot as root app.UseFileServer(); // Serve /bower_components as a separate root app.UseFileServer(new FileServerOptions { // Set root of file server FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "bower_components")), // Only react to requests that match this path RequestPath = "/bower_components", // Don't expose file system EnableDirectoryBrowsing = false });
اگر RequestPath را به مسیر دیگری تنظیم کردید، نیاز است ابتدای سه مدخل ذکر شده را بر این اساس اصلاح کنید، تا فایلها توسط وب سرور قابل ارائه شوند.
استفاده از CDN برای توزیع اسکریپتهای اعتبارسنجی مورد نیاز
در مورد environment tag helper در مطلب «ارتقاء به ASP.NET Core 1.0 - قسمت 12 - معرفی Tag Helpers» پیشتر بحث شد. در اینجا نیز میتوان برای مثال در حال توسعه، از اسکریپتهای محلی
<environment name="Development"> <script src="~/bower_components/jquery/dist/jquery.min.js"></script> <script src="~/bower_components/jquery-validation/dist/jquery.validate.min.js"></script> <script src="~/bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script> </environment>
<environment names="Staging, Production"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" asp-fallback-src="/bower_components/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery"> </script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js" asp-fallback-src="bower_components/jquery-validation/dist/jquery.validate.min.js" asp-fallback-test="window.jQuery && window.jQuery.validator"> </script> <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js" asp-fallback-src="/bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js" asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"> </script> </environment>
روش عملکرد fallback هم به این صورت است که بررسی میشود آیا عبارت ذکر شدهی در قسمت asp-fallback-test قابل اجرا است یا خیر؟ اگر خیر، یعنی CDN قابل دسترسی نیست و از نمونهی محلی استفاده میکند.
خلاصهای از Tag helpers اعتبارسنجی
در جدول «راهنمای تبدیل HTML Helpers به Tag Helpers» مطلب «ارتقاء به ASP.NET Core 1.0 - قسمت 12 - معرفی Tag Helpers»، معادلهای HTML Helpers مباحث اعتبارسنجی را نیز ملاحظه کردید. خلاصهی تکمیلی آن به صورت ذیل است:
ValidationSummary.All سبب نمایش خطاهای اعتبارسنجی خواص و همچنین کل مدل میشود:
@Html.ValidationSummary(false)
<div asp-validation-summary="All"></div>
ValidationSummary.ModelOnly صرفا خطاهای اعتبارسنجی در سطح مدل را نمایش میدهد:
@Html.ValidationSummary(true)
<div asp-validation-summary="ModelOnly"></div>
و برای تعیین نمایش خطاهای اعتبارسنجی یک خاصیت از مدل:
@Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
<span asp-validation-for="UserName" class="text-danger"></span>
هدف از مطلب فوق اجرا نمودن عملیات Insert، Update و غیرو...
بوسیله چندین Connection در یک Transaction در زمان اجرای سرویسهای WCF میباشد. برای پیاده سازی و شرح Transaction ، سه پروژه ایجاد مینماییم. دو پروژه WCF سرویس و یک پروژهClient ، هر سه پروژه را در یک Solution به نام WCFTransaction اضافه مینماییم. در هر دو پروژه WCF بطور جداگانه Connection رویDatabase ایجاد مینماییم. سپس سعی میکنیم بوسیله Transaction عملیات Insert هر دو Service را کنترل نماییم. بطوریکه اگر یکی از Service ها در زمان عملیات Insert دچار مشکل شود. دیگری نیز Commit نگردد. به عبارتی در قدیم نمیتوانستیم بیش از یک Connection در یک Transaction ایجاد نماییم. اما بوسیله Transactionscope ، انجام عملیات Insert، Update و غیرو... بوسیله چندین Connection به یکDatabase بطور همزمان در یک Transaction فراهم شده است. برای نمایش دادن عملیات Rollback نیز،به عمد خطایی ایجاد میکنیم،تا نحوه Rollback شدن در Transaction را مشاهده نماییم.
سعی شده است پیاده سازی و استفاده از Transaction در شش مرحله انجام شود.
مرحله اول: ایجاد دو پروژه WCFService و یک پروژه Client جهت فراخوانی (Call) کردن سرویسها
در این مرحله همانطور که از قیل نیز
توضیح داده شده است، دو پروژه WCF به نامهای WCFService1 و WCFService2 ایجاد شده است و یک پروژه Client به نام WCFTransactions نیز ایجاد میکنیم.
مرحله دوم : افزودن Attribute ی به نام TransactionFlow به Interface سرویسها.
در این مرحله در Interface هریک از سرویسها متد جدیدی به نام UpdateData اضافه مینماییم. که عملیات Insert into درون Database را انجام میدهد. حال بالای متد UpdateData از صفت TransactionFlow استفاده مینماییم. تا قابلیت Transaction برای متد فوق فعال گردد و متد فوق اجازه مییابد از Transaction استفاده نماید.
<ServiceContract()> _ Public Interface IService1 <OperationContract()> _ Function GetData(ByVal value As Integer) As String <OperationContract()> _ Function GetDataUsingDataContract(ByVal composite As CompositeType) As CompositeType <OperationContract()> _ <TransactionFlow(TransactionFlowOption.Allowed)> _ Sub UpdateData() End Interface
مرحله سوم:
در این مرحله متد UpdateData را پیاده سازی مینماییم. بطوریکه یک Insert Into ساده در Database انجام میدهیم.و بالای متد فوق نیز کد زیر را میافزاییم.
<OperationBehavior(TransactionScopeRequired:=True)>
کد متد UpdateData
<OperationBehavior(TransactionScopeRequired:=True)> _ Public Sub UpdateData() Implements IService1.UpdateData Dim objConnection As SqlConnection = New SqlConnection(strConnection) objConnection.Open() Dim objCommand As SqlCommand = New SqlCommand("insert into T(ID,Age) values(10,10)", objConnection) objCommand.ExecuteNonQuery() objConnection.Close() End Sub
مرحله دوم و سوم را برای Service دوم نیز تکرار مینماییم.
مرحله چهارم:
در این مرحله TransactionFlow را در Web.Config دو سرویس فعال مینماییم. تا قابلیت استفاده از TransactionFlow برای سرویسها نیز فعال گردد. نحوه فعال نمودن بصورت زیر میباشد:
برای WCFService1خواهیم داشت:
<bindings> <wsHttpBinding> <binding name="TransactionalBind" transactionFlow="true"/> </wsHttpBinding> </bindings>
<endpoint address="" binding="wsHttpBinding" bindingConfiguration="TransactionalBind" contract="WcfService1.IService1">
برای WCFService2نیز خواهیم داشت:
<bindings> <wsHttpBinding> <binding name="TransactionalBind" transactionFlow="true"/> </wsHttpBinding> </bindings>
و در ادامه داریم:
<endpoint address="" binding="wsHttpBinding" bindingConfiguration="TransactionalBind" contract="WcfService2.IService1">
مرحله پنجم:
در این مرحله دو سرویس فوق را به پروژه WCFTransactions اضافه نموده و قطعه کد زیر را درون فرم Load مینویسیم.
Private Sub frmmain_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Using ts As New TransactionScope(TransactionScopeOption.Required) Try Dim obj As ServiceReference1.Service1Client = New ServiceReference1.Service1Client() obj.UpdateData() Dim obj1 As ServiceReference2.Service1Client = New ServiceReference2.Service1Client() obj1.UpdateData() ts.Complete() Catch ex As Exception ts.Dispose() End Try End Using End Sub
پس از اجرای برنامه دو رکورد در جدول درج خواهد شد.
مرحله ششم:
حال برای RollBack کردن کل عملیات و مشاهده آنها کافیست در یکی از متدهای UpdateData یک Throw Exception ایجاد نماییم.
سعی میکنیم با کمی تغییر در متد UpdateData در WCFService2 ، خطایی ایجاد شود، تا نحوه RollBack را مشاهده نماییم.
Public Sub UpdateData() Implements IService1.UpdateData
Throw New Exception()
Dim objConnection As SqlConnection = New SqlConnection(strConnection)
objConnection.Open()
Dim objCommand As SqlCommand = New SqlCommand("insert into T(ID,Age) values(101,101)", objConnection)
objCommand.ExecuteNonQuery()
objConnection.Close()
End Sub
فقط کد زیر به متد UpdateData اضافه شده است:
Throw New Exception()
و در رویداد Load فرم نیز پیاده سازی آن بشکل زیر خواهد بود:
Using ts As New TransactionScope(TransactionScopeOption.Required) Try Dim obj As ServiceReference1.Service1Client = New ServiceReference1.Service1Client() obj.UpdateData() Throw New Exception("There was Error") Dim obj1 As ServiceReference2.Service1Client = New ServiceReference2.Service1Client() obj1.UpdateData() ts.Complete() Catch ex As Exception ts.Dispose() End Try End Using
وقتی برنامه را اجرا نمایید، مشاهده میکنید که هیچ رکوردی دورن دیتابیس درج نشده است.
بسبار مهم: برای اینکه بتوانید بصورت Distibuted عملیات Transaction را انجام دهید میبایست تنظیماتی را روی سرور که دیتایس و سرویسها و کامپیوتر کلاینت انجام دهید که بصورت زیر میباشد:
نحوه تنظیم:
1- سرویسDistribute Transaction Coordinator را روی هر دو Serverهای WCFService ، Database و کامپیوتر کلاینت، Start مینماییم.
البته در شرایطی که Serviceهای WCF و برنامه Client و Database روی یک سیستم باشد، تنظیمات فوق فقط روی همان سیستم انجام میشود.
برای دسترسی به قسمت Service های Windows ابتدا Administrative
Tools و سپس Service را باز نمایید و روی Start کلیک کنید.
2- در ادامه روی MY Computer کلیک راست نموده و تب MSDTC را انتخاب نمایید:
در ادامه روی Security
Configuration کلیک نمایید. تا فرم زیر نمایش داده شود.
مطمئن شوید که آیتمهای زیر انتخاب شده باشند:
· Network DTC Access
· Allow Remote Clients
· Allow Inbound
· Allow Outbound
·
Enable
Transaction Internet Protocol(TIP) Transactions
در ضمن اگر از SQL Server 2000 استفاده مینمایید. لازم است تنظیم زیر را انجام دهید.
روی SQL Server Service Manager کلیک نموده و کامبوی Service را Dropdown نمایید و Distribute Transaction Coordinator را انتخاب کنید. اما برای ورژنهای بالاتر از SQL Server 2000 نیاز به انتخاب Distribute Transaction Coordinator نمیباشد.
امیدوارم مطلب فوق مفید واقع شود، چنانچه کم و کاستی مشاهده نمودید، اینجانب را از نظرات خود بهره مند سازید.
export const genres = [ { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" }, { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" }, { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" } ]; export function getGenres() { return genres.filter(g => g); }
بررسی ساختار کامپوننت ListGroup
شبیه به کامپوننت صفحه بندی که در قسمت قبل ایجاد کردیم، میخواهیم کامپوننت ListGroup نیز به طور کامل از اشیاء movie مستقل باشد؛ تا در آینده بتوان از آن در جاهای دیگری نیز استفاده کرد. به همین جهت فایل جدید src\components\common\listGroup.jsx را ایجاد کرده و سپس با استفاده از میانبرهای imrc و cc در VSCode، ساختار ابتدایی این کامپوننت را ایجاد میکنیم. هرچند میتوان این کامپوننت را به صورت «Stateless Functional Component» نیز طراحی کرد؛ چون state و متد دیگری بجز render نخواهد داشت و تمام اطلاعات خودش را از والد خود دریافت میکند.
سپس به کامپوننت movies مراجعه کرده و این کامپوننت خالی را import میکنیم:
import ListGroup from "./common/listGroup";
برای این منظور ابتدا React.Fragment موجود را با یک div با "className="row جایگزین میکنیم. سپس داخل این row، دو ستون را تعریف خواهیم کرد که در اولی، المان جدید ListGroup قرار میگیرد و در دومی، مابقی عناصری که تاکنون اضافه کردهایم؛ مانند جدول، صفحه بندی و نمایش تعداد آیتمها:
return ( <div className="row"> <div className="col-2"> <ListGroup /> </div> <div className="col"> ... </div> </div> );
import { getGenres } from "../services/fakeGenreService"; // ... class Movies extends Component { state = { // ... genres: getGenres() };
class Movies extends Component { state = { movies: [], pageSize: 4, currentPage: 1, genres: [] }; componentDidMount() { this.setState({ movies: getMovies(), genres: getGenres() }); }
پس از آن میتوان ویژگی جدید items این کامپوننت را به آرایهی genres دریافتی از state، تنظیم کرد:
<ListGroup items={this.state.genres} />
بهتر است هر زمانیکه کاربر، آیتمی را از این لیست انتخاب کرد، توسط بروز رخدادی مانند onItemSelect از وقوع آن مطلع شد و سپس نسبت به آن توسط متد handleGenreSelect، واکنش نشان داد؛ مانند فیلتر کردن لیست فیلمها بر اساس آیتم انتخابی و نمایش آن. به همین جهت ویژگی onItemSelect را به تعریف المان ListGroup اضافه میکنیم:
<ListGroup items={this.state.genres} onItemSelect={this.handleGenreSelect} />
handleGenreSelect = genre => { console.log("handleGenreSelect", genre); };
پیاده سازی نمایش آیتمها در کامپوننت ListGroup
پیاده سازی ابتدایی کامپوننت ListGroup را در اینجا مشاهده میکنید:
import React, { Component } from "react"; class ListGroup extends Component { render() { return ( <ul className="list-group"> {this.props.items.map(item => ( <li key={item._id} className="list-group-item"> {item.name} </li> ))} </ul> ); } } export default ListGroup;
تا اینجا اگر برنامه را ذخیره کرده و در مرورگر نمایش دهیم، به خروجی زیر میرسیم:
البته به نظر عرض ستون آن نامناسب است. به همین جهت به کامپوننت movies مراجعه کرده و col-2 ستون آنرا به col-3 تبدیل میکنیم.
پویا سازی انتخاب نام خواص شیء دریافتی، در کامپوننت ListGroup
در حال حاضر پیاده سازی کامپوننت ListGroup، به شیءای دقیقا با خواص id_ و name وابستهاست و اگر شیء دیگری را که دارای خواصی معادل این نامها نیست، به آن ارسال کنیم، دیگر کار نخواهد کرد. به همین جهت در محل تعریف المان این کامپوننت در کامپوننت movies، دو ویژگی دیگر نام خواص شیء مدنظر را تنظیم میکنیم تا بتوانیم با هر نوع شیءای در اینجا کار کنیم:
<ListGroup items={this.state.genres} textProperty="name" valueProperty="_id" onItemSelect={this.handleGenreSelect} />
import React, { Component } from "react"; class ListGroup extends Component { render() { return ( <ul className="list-group"> {this.props.items.map(item => ( <li key={item[this.props.valueProperty]} className="list-group-item"> {item[this.props.textProperty]} </li> ))} </ul> ); } } export default ListGroup;
تعیین مقادیر پیشفرضی برای خواص props
با زیاد شدن تعداد خواص props، اینترفیس کامپوننتها پیچیدهتر میشوند. در یک چنین حالتی میتوان در کامپوننتها defaultProps را تعریف کرد و توسط آن مقادیر پیشفرضی را برای خواص props درنظر گرفت. به این صورت در حین تعریف المان این کامپوننت، اگر مقادیر مدنظر با مقادیر پیشفرض تعیین شده یکی باشند، دیگر نیازی به ذکر این پارامترها نخواهد بود. برای مثال در انتهای کامپوننت ListGroup، خاصیت جدید defaultProps را تعریف میکنیم (املای آن باید دقیقا به همین شکل باشد؛ و گرنه شناخته نخواهد شد). سپس در اینجا خواصی را که میخواهیم مقادیر پیشفرضی را برای آنها تعیین کنیم، ذکر خواهیم کرد:
ListGroup.defaultProps = { textProperty: "name", valueProperty: "_id" }; export default ListGroup;
<ListGroup items={this.state.genres} onItemSelect={this.handleGenreSelect} />
مدیریت انتخاب گروههای فیلمها
در ادامه میخواهیم رخداد onClick بر روی هر li این لیست را مدیریت کنیم و سبب بروز رخدادی به نام onItemSelect شویم که در ابتدای بحث، آنرا به عنوان خروجی این کامپوننت تعریف کردیم. این رخداد نیز در کامپوننت movies به متد handleGenreSelect متصل است. به همین جهت تعریف ویژگی onClick را که سبب انتقال شیء جاری رندر شده، توسط رویداد onItemSelect به خارج از آن میشود، به المان li کامپوننت ListGroup اضافه میکنیم:
<li key={item[this.props.valueProperty]} className="list-group-item" onClick={() => this.props.onItemSelect(item)} style={{ cursor: "pointer" }} > {item[this.props.textProperty]} </li>
پس از فعالسازی امکان کلیک بر روی هر آیتم لیست رندر شده، اکنون میخواهیم با انتخاب هر گروه، این گروه در این لیست، به صورت انتخاب شده، همانند شماره صفحهی انتخاب شدهی در کامپوننت صفحه بندی، تغییر رنگ دهد و متمایز نمایش داده شود تا مشخص باشد که هم اکنون با کدام آیتم در حال کار هستیم. برای اینکار تنها کافی است کلاس active را به صورت پویا به className هر li، اضافه یا کم کنیم. البته برای این منظور این کامپوننت باید از آیتم انتخاب شده مطلع باشد؛ به همین جهت selectedItem را در لیست ویژگیهای اینترفیس تعریف این المان اضافه میکنیم. برای اینکار ابتدا selectedGenre را با هربار فراخوانی handleGenreSelect که به onItemSelect کامپوننت متصل است، با فراخوانی متد setState به روز رسانی میکنیم:
handleGenreSelect = genre => { console.log("handleGenreSelect", genre); this.setState({selectedGenre: genre}); };
class Movies extends Component { state = { // ... selectedGenre: {} };
<ListGroup items={this.state.genres} onItemSelect={this.handleGenreSelect} selectedItem={this.state.selectedGenre} />
<li key={item[this.props.valueProperty]} className={ item === this.props.selectedItem ? "list-group-item active" : "list-group-item" } style={{ cursor: "pointer" }} onClick={() => this.props.onItemSelect(item)} > {item[this.props.textProperty]} </li>
مدیریت فیلتر کردن اطلاعات گروه فیلم انتخابی
در قسمت قبل، در ابتدای متد رندر کامپوننت movies، از متد paginate برای صفحه بندی اطلاعات استفاده کردیم. فیلتر گروه جاری انتخاب شده را باید پیش از این متد قرار دارد؛ چون تعداد صفحات و اطلاعات نمایش داده شدهی در هر کدام باید بر اساس لیست فیلمهای فیلتر شده باشد.
برای انجام اینکار تغییرات زیر را اعمال خواهیم کرد:
الف) بجای متد paginate، از متد getPagedData زیر استفاده میکنیم:
getPagedData() { const { pageSize, currentPage, selectedGenre, movies: allMovies } = this.state; const filteredMovies = selectedGenre && selectedGenre._id ? allMovies.filter(m => m.genre._id === selectedGenre._id) : allMovies; const first = (currentPage - 1) * pageSize; const last = first + pageSize; const pagedMovies = filteredMovies.slice(first, last); return { totalCount: filteredMovies.length, data: pagedMovies }; }
- در حین Object Destructuring، نام خاصیت movies را نیز به allMovies تغییر دادهایم تا واضحتر باشد.
- در ادامه با استفاده از متد filter جاوااسکریپت، بر اساس id هر گروه انتخاب شده، اشیاء مرتبط با آن، از allMovies جدا شده و بازگشت داده میشود. البته اگر id هم انتخاب نشده باشد (اولین بار نمایش صفحه)، تمام رکوردها یعنی allMovies، مورد استفاده قرار میگیرد.
- پس از آن، همان کدهای صفحه بندی اطلاعات را که در قسمت قبل بررسی کردیم، مشاهده میکنید که اینبار بجای allMovies قسمت قبل، بر روی filteredMovies اعمال شدهاست.
- در آخر، این متد، یک شیء را با دو خاصیت که بیانگر تعداد کل رکوردهای انتخاب شده و دادههای فیلتر شدهی صفحه بندی شدهاست، بازگشت میدهد.
ب) تغییرات متد رندر کامپوننت movies به صورت زیر است:
- ابتدا متد getPagedData فوق، فراخوانی شده و شیء دریافتی از آن با استفاده از ویژگی Object Destructuring، به دو خاصیت totalCount و movies انتساب داده میشود:
render() { const { length: count } = this.state.movies; if (count === 0) return <p>There are no movies in the database.</p>; const { totalCount, data: movies } = this.getPagedData();
- همچنین کامپوننت صفحه بندی، اینبار باید totalCount آیتمهای فیلتر شده را نمایش دهد و نه totalCount تمام فیلمهای موجود را:
<Pagination itemsCount={totalCount}
<p>Showing {totalCount} movies in the database.</p>
handleGenreSelect = genre => { console.log("handleGenreSelect", genre); this.setState({ selectedGenre: genre, currentPage: 1 }); };
افزودن گزینهی نمایش تمام اطلاعات به لیست گروههای فیلمها
در ادامه قصد داریم به بالای لیست گروههای موجود، گزینهی All Genres را نیز اضافه کنیم تا با کلیک بر روی آن، مجددا بتوان لیست تمام فیلمهای موجود را مشاهده کرد.
برای این منظور در جائیکه لیست getGenres را دریافت و نمایش میدهیم، یعنی متد componentDidMount، اندکی تغییر ایجاد کرده و یک آرایهی جدید را ایجاد میکنیم؛ بطوریکه اولین عنصر آن، گزینهی جدید All Genres باشد و سپس توسط spread operator، مابقی عناصر آرایهی گروهها را به این آرایهی جدید اضافه میکنیم:
componentDidMount() { const genres = [{ _id: "", name: "All Genres" }, ...getGenres()]; this.setState({ movies: getMovies(), genres }); }
const filteredMovies = selectedGenre && selectedGenre._id ? allMovies.filter(m => m.genre._id === selectedGenre._id) : allMovies;
پروژه Awesomplete
export function beforeStart(options, extensions) { console.log("beforeStart"); } export function afterStarted(blazor) { console.log("afterStarted"); }
<body> ... <script src="_framework/blazor.{webassembly|server}.js" autostart="false"></script> <script> Blazor.start().then(function () { var customScript = document.createElement('script'); customScript.setAttribute('src', 'scripts.js'); document.head.appendChild(customScript); }); </script> </body>
قسمت دوم آشنایی با Refactoring به معرفی روش «استخراج متدها» اختصاص دارد. این نوع Refactoring بسیار ساده بوده و مزایای بسیاری را به همراه دارد؛ منجمله:
- بالا بردن خوانایی کد؛ از این جهت که منطق طولانی یک متد به متدهای کوچکتری با نامهای مفهوم شکسته میشود.
- به این ترتیب نیاز به مستند سازی کدها نیز بسیار کاهش خواهد یافت. بنابراین در یک متد، هر جایی که نیاز به نوشتن کامنت وجود داشت، یعنی باید همینجا آن قسمت را جدا کرده و در متد دیگری که نام آن، همان خلاصه کامنت مورد نظر است، قرار داد.
- این نوع جدا سازی منطقهای پیاده سازی قسمتهای مختلف یک متد، در آینده نگهداری کد نهایی را نیز سادهتر کرده و انجام تغییرات بر روی آن را نیز تسهیل میبخشد؛ زیرا اینبار بجای هراس از دستکاری یک متد طولانی، با چند متد کوچک و مشخص سروکار داریم.
برای نمونه به مثال زیر دقت کنید:
using System.Collections.Generic;
namespace Refactoring.Day2.ExtractMethod.Before
{
public class Receipt
{
private IList<decimal> Discounts { get; set; }
private IList<decimal> ItemTotals { get; set; }
public decimal CalculateGrandTotal()
{
// Calculate SubTotal
decimal subTotal = 0m;
foreach (decimal itemTotal in ItemTotals)
subTotal += itemTotal;
// Calculate Discounts
if (Discounts.Count > 0)
{
foreach (decimal discount in Discounts)
subTotal -= discount;
}
// Calculate Tax
decimal tax = subTotal * 0.065m;
subTotal += tax;
return subTotal;
}
}
}
همانطور که از کامنتهای داخل متد CalculateGrandTotal مشخص است، این متد سه کار مختلف را انجام میدهد؛ جمع اعداد، اعمال تخفیف، اعمال مالیات و نهایتا یک نتیجه را باز میگرداند. بنابراین بهتر است هر عمل را به یک متد جداگانه و مشخص منتقل کرده و کامنتهای ذکر شده را نیز حذف کنیم. نام یک متد باید به اندازهی کافی مشخص و مفهوم باشد و آنچنان نیازی به مستندات خاصی نداشته باشد:
using System.Collections.Generic;
namespace Refactoring.Day2.ExtractMethod.After
{
public class Receipt
{
private IList<decimal> Discounts { get; set; }
private IList<decimal> ItemTotals { get; set; }
public decimal CalculateGrandTotal()
{
decimal subTotal = CalculateSubTotal();
subTotal = CalculateDiscounts(subTotal);
subTotal = CalculateTax(subTotal);
return subTotal;
}
private decimal CalculateTax(decimal subTotal)
{
decimal tax = subTotal * 0.065m;
subTotal += tax;
return subTotal;
}
private decimal CalculateDiscounts(decimal subTotal)
{
if (Discounts.Count > 0)
{
foreach (decimal discount in Discounts)
subTotal -= discount;
}
return subTotal;
}
private decimal CalculateSubTotal()
{
decimal subTotal = 0m;
foreach (decimal itemTotal in ItemTotals)
subTotal += itemTotal;
return subTotal;
}
}
}
بهتر شد! عملکرد کد نهایی، تغییری نکرده اما کیفیت کد ما بهبود یافته است (همان مفهوم و معنای Refactoring). خوانایی کد افزایش یافته است. نیاز به کامنت نویسی به شدت کاهش پیدا کرده و از همه مهمتر، اعمال مختلف، در متدهای خاص آنها قرار گرفتهاند.
به همین جهت اگر حین کد نویسی، به یک متد طولانی برخوردید (این مورد بسیار شایع است)، در ابتدا حداقل کاری را که جهت بهبود کیفیت آن میتوانید انجام دهید، «استخراج متدها» است.
ابزارهای کمکی جهت پیاده سازی روش «استخراج متدها»:
- ابزار Refactoring توکار ویژوال استودیو پس از انتخاب یک قطعه کد و سپس کلیک راست و انتخاب گزینهی Refactor->Extract method، این عملیات را به خوبی میتواند مدیریت کند و در وقت شما صرفه جویی خواهد کرد.
- افزونههای ReSharper و همچنین CodeRush نیز چنین قابلیتی را ارائه میدهند؛ البته توانمندیهای آنها از ابزار توکار یاد شده بیشتر است. برای مثال اگر در میانه کد شما جایی return وجود داشته باشد، گزینهی Extract method ویژوال استودیو کار نخواهد کرد. اما سایر ابزارهای یاده شده به خوبی از پس این موارد و سایر موارد پیشرفتهتر بر میآیند.
نتیجه گیری:
نوشتن کامنت، داخل بدنهی یک متد مزموم است؛ حداقل به دو دلیل:
- ابزارهای خودکار مستند سازی از روی کامنتهای نوشته شده، از این نوع کامنتها صرفنظر خواهند کرد و در کتابخانهی شما مدفون خواهند شد (یک کار بیحاصل).
- وجود کامنت در داخل بدنهی یک متد، نمود آشکار ضعف شما در کپسوله سازی منطق مرتبط با آن قسمت است.
و ... «لطفا» این نوع پیاده سازیها را خارج از فایل code behind هر نوع برنامهی winform/wpf/asp.net و غیره قرار دهید. تا حد امکان سعی کنید این مکانها، استفاده کنندهی «نهایی» منطقهای پیاده سازی شده توسط کلاسهای دیگر باشند؛ نه اینکه خودشان محل اصلی قرارگیری و ابتدای تعریف منطقهای مورد نیاز قسمتهای مختلف همان فرم مورد نظر باشند. «لطفا» یک فرم درست نکنید با 3000 سطر کد که در قسمت code behind آن قرار گرفتهاند. code behind را محل «نهایی» ارائه کار قرار دهید؛ نه نقطهی آغاز تعریف منطقهای پیاده سازی کار. این برنامه نویسی چندلایه که از آن صحبت میشود، فقط مرتبط با کار با بانکهای اطلاعاتی نیست. در همین مثال، کدهای فرم برنامه، باید نقطهی نهایی نمایش عملیات محاسبه مالیات باشند؛ نه اینکه همانجا دوستانه یک قسمت مالیات حساب شود، یک قسمت تخفیف، یک قسمت جمع بزند، همانجا هم نمایش بدهد! بعد از یک هفته میبینید که code behind فرم در حال انفجار است! شده 3000 سطر! بعد هم سؤال میپرسید که چرا اینقدر میل به «بازنویسی» سیستم این اطراف زیاد است! برنامه نویس حاضر است کل کار را از صفر بنویسد، بجای اینکه با این شاهکار بخواهد سرو کله بزند! هر چند یکی از روشهای برخورد با این نوع کدها جهت کاهش هراس نگهداری آنها، شروع به Refactoring است.
پس اگر قصد توسعه SPA با هر فریمورکی مثل angular را داشته باشید، این را در نظر داشته باشید که دیر یا زود هنگام استفاده از افزونههای جیکوئری به مشکل برخواهید خورد.
بیشتر امکانات تو کار ASP.NET MVC را از دست خواهید داد
به هنگام توسعهی برنامه با استفاده از فریم ورکهای SPA، امکانات توکار ASP.NET MVC مثل اعتبارسنجی یکپارچه و strongly typed viewها را از دست خواهید داد. شاید یک سری پروژه در Github پیدا کنید که سعی کردهاند اینها را با یکدیگر سازگار کنند. اما به محض استفاده متوجه میشوید که اگر همهی کارها را خودتان با Angular انجام بدهید راحتتر هستید تا استفاده از کتابخانههای آزمایشی و ناقص.
البته باز هم نمیگویم که اینها تقصیر AngularJS است. ذات توسعهی SPAها، این گونه است و در توسعهی SPA با هر فریمورکی به این مشکلات برخواهید خورد.
حال که یکسری مشکلات عمومی را بررسی کردیم، بدنیست نگاهی اختصاصی به خود AngularJS بیندازیم.
ضعف طراحی
اگر به تعدای از لینکهای سایت ihateangular مراجعه کنید میبینید که هر کسی نظری دارد: یکی میگوید به هیچ وجه Directive ننویسید، یکی دیگر میگوید کنترلر ننویسید و تمامی کارها را در directiveهای سفارشی نوشته شده توسط خودتان انجام بدهید، کلا همه جا علیه performance این فریمورک صحبت میکنند و همگی به پیچیده بودن آن اذعان دارند.
نتیجه گیری
AngularJS فریمورک خیلی خوبی برای نوشتن برنامههای تست پذیر است و کسی منکر قابلیتهای آن نیست. ولی این را نیز در نظر بگیرید که برای تست پذیر بودن، خیلی چیزها از جمله سادگی کار را از دست میدهید. معمولا میگویند که AngularJS کارهای مشکل را ساده میکند و کارهای ساده را مشکل.
پیشنهاد من این است که اگر هنوز AngularJS را فرا نگرفتهاید، حداقل یادگیری آن را تا انتشار نسخهی 2 آن به تعویق بیندازید. اگر AngularJS را بلد هستید، دیگر آن را در پروژهای استفاده نکنید؛ چون دیگر کدهای شما در نسخهی 2 کار نخواهد کرد و احتیاج به انجام تغییرات گستردهای در کدهای نوشته شده قبلی پیدا میکنید.
namespace ReUsableQueries.Model { public class Student { public int Id { get; set; } public string Name { get; set; } public string LastName { get; set; } public int Age { get; set; } [ForeignKey("BornInCityId")] public virtual City BornInCity { get; set; } public int BornInCityId { get; set; } } public class City { public int Id { get; set; } public string Name { get; set; } public virtual ICollection<Student> Students { get; set; } } }
using System.Data.Entity; using ReUsableQueries.Model; namespace ReUsableQueries.DAL { public class MyContext : DbContext { public DbSet<City> Cities { get; set; } public DbSet<Student> Students { get; set; } } }
public class Configuration : DbMigrationsConfiguration<MyContext> { public Configuration() { AutomaticMigrationsEnabled = true; AutomaticMigrationDataLossAllowed = true; } protected override void Seed(MyContext context) { var city1 = new City { Name = "city-1" }; var city2 = new City { Name = "city-2" }; context.Cities.Add(city1); context.Cities.Add(city2); var student1 = new Student() {Name = "Shaahin",LastName = "Kiassat",Age=22,BornInCity = city1}; var student2 = new Student() { Name = "Mehdi", LastName = "Farzad", Age = 31, BornInCity = city1 }; var student3 = new Student() { Name = "James", LastName = "Hetfield", Age = 49, BornInCity = city2 }; context.Students.Add(student1); context.Students.Add(student2); context.Students.Add(student3); base.Seed(context); } }
var context = new MyContext(); var query= context.Students.Where(x => x.Name.Contains(name)).Where(x => x.LastName.Contains(lastName)).Where( x => x.Age == age);
var query= context.Students.Where(x => x.Name.Contains(name)).Where(x => x.LastName.Contains(lastName)).Where( x => x.Age == age).OrderBy(x=>x.LastName).Skip(skip).Take(take);
var query = context.Students.Where(x => x.Name.Contains(name)).Where(x => x.LastName.Contains(lastName)).Where ( x => x.Age == age).Where(x => x.BornInCityId == 1).OrderBy(x => x.Age);
namespace ReUsableQueries.Quries { public static class StudentQueryExtension { public static IQueryable<Student> FindStudentsByName(this IQueryable<Student> students,string name) { return students.Where(x => x.Name.Contains(name)); } public static IQueryable<Student> FindStudentsByLastName(this IQueryable<Student> students, string lastName) { return students.Where(x => x.LastName.Contains(lastName)); } public static IQueryable<Student> SkipAndTake(this IQueryable<Student> students, int skip , int take) { return students.Skip(skip).Take(take); } public static IQueryable<Student> OrderByAge(this IQueryable<Student> students) { return students.OrderBy(x=>x.Age); } } }
var query = context.Students.FindStudentsByName(name).FindStudentsByLastName(lastName).SkipAndTake(skip,take);
var query = context.Students.AsQueryable(); if (searchByName) { query= query.FindStudentsByName(name); } if (orderByAge) { query = query.OrderByAge(); } if (paging) { query = query.SkipAndTake(skip, take); } return query.ToList();