نصب: پکیج‌های متنوعی از breeze وجود دارند. برای ما بسته‌ی زیر بهترین انتخاب میباشد. با نصب پکیج زیر، breeze در سمت سرور و کلاینت، به همراه ASP.NET Web API 2.2 and Entity Framework 6 نصب میشود:
Install-Package Breeze.WebApi2.EF6
var instance = breeze.config.initializeAdapterInstance("ajax", "angular");
instance.setHttp($http); Install-Package Breeze.Angular
قلب تپنده‌ی breezejs در کلاینت EntityManager است که نقش data context را در کلاینت، بازی میکند. به برخی از خصوصیات آن می‌پردازیم:
var manager = new breeze.EntityManager({
dataService: dataService,
metadataStore: metadataStore,
saveOptions: new breeze.SaveOptions({ allowConcurrentSaves: true, tag: [{}] })
}); var dataService = new breeze.DataService({
serviceName: "/breeze/"+ "Automobile",
hasServerMetadata: false,
namingConvention: breeze.NamingConvention.camelCase
});
var metadataStore = new breeze.MetadataStore({}); - serviceName: نام سرویس دهنده یا کنترلر سمت سرور میباشد. درمورد کنترلر سمت سرور کمی جلوتر بحث می‌کنیم.
- metadataStore: اطلاعاتی را در مورد تمام آبجکت‌ها (جداول دیتابیس) می‌دهد. مثل نام فیلدها، نوع فیلدها و...
برای کار با متادیتا دو راه وجود دارد:
1- متا دیتا را خودتان در سمت کلاینت ایجاد نمایید:
var myMetadataStore = new breeze.MetadataStore();
myMetadataStore.addEntityType({...}); var customer = function () {
this.City = "";
};
myMetadataStore.registerEntityTypeCtor("Customer", customer); 2- اطلاعات را از سرور دریافت نمایید. در این صورت کنترلر شما باید دارای متد Metadata باشد. بنابراین کنترلی را در سرور به نام Automobile و با محتویات زیر ایجاد نمایید. همانطور که مشاهده می‌کنید، این کنترلر از ApiController مشتق شده است که تفاوت خاصی با Apiهای دیگر ندارد و تنها به BreezeController مزین شده است. این attribute به NET WebApi کمک میکند که فیلترینگ و مرتب سازی با فرمت oData را فراهم کند و همچنین درک صحیح فرمت json را نیز به کنترلر می‌دهد.
EFContextProvider: کامپوننتی که تعامل بین کنترلر breeze با Entity Framework را ساده‌تر میکند و در واقع یک wrapper بر روی دیتاکانتکس یا آبجکت کانتکس میباشد. یکی از وظایف آن ارسال متا دیتا، برای کلاینت‌های breeze است.
[BreezeController]
public class AutomobileController : ApiController
{
readonly EFContextProvider<ApplicationDbContext> _contextProvider =
new EFContextProvider<ApplicationDbContext>();
[HttpGet]
public string Metadata()
{
return _contextProvider.Metadata();
}
[HttpGet]
public IQueryable<Customer> Customers() {
return _contextProvider.Context.Customers;
}
[System.Web.Http.HttpPost]
public SaveResult SaveChanges(JObject saveBundle)
{
_contextProvider.BeforeSaveEntitiesDelegate = BeforeSaveEntities;
_contextProvider.AfterSaveEntitiesDelegate = afterSaveEntities;
return _contextProvider.SaveChanges(saveBundle);
}
protected Dictionary<Type, List<EntityInfo>> BeforeSaveEntities(Dictionary<Type, List<EntityInfo>> saveMap)
{
}
private void afterSaveEntities(Dictionary<Type, List<EntityInfo>> saveMap, List<KeyMapping> keyMappings)
{
}
} - saveOptions: نحوه‌ی چگونگی برخورد با ذخیره کردن اطلاعات را مشخص میکند. با ذخیره سازی تغییرات، متد SaveChanges سمت سرور فراخوانی میشود. در breeze می‌توان به قبل و بعد از ذخیره سازی اطلاعات دسترسی داشت. یکی از موارد رایج کاربرد آن، اعمال چک کردن دسترسی‌ها، قبل از ذخیره سازی میباشد.
برای ذخیره سازی تغییرات:
manger.saveChanges().then(function success() {
}, function failer(e) {
}); manger.rejectChanges()
کوئری:بعد از تعریف Entity Manger می‌توانیم کوئری خود را اجرا نماییم. کوئری ما شامل گرفتن اطلاعات از جدول Customer، با مرتب سازی بر روی فیلد آیدی میباشد و با اجرا کردن کوئری می‌توانیم موفقیت یا عدم موفقیت آن‌را بررسی نماییم.
var query = breeze.EntityQuery
.from("Customer")
.orderBy("Id");
var result= manager.executeQuery(query);
result.then(querySucceeded)
.fail(queryFailed);
query = query.where("Id", "==", 1) var predicate = new breeze.Predicate("Id", "==", false);
query = query.where(predicate)
var p1 = new breeze.Predicate("IsArchived", "==", false);
var p2 = breeze.Predicate("IsDone", "==", false);
var predicate = p1.and(p2);
query = query.where(predicate).orderBy("Id") ?$filter=IsArchived eq false&IsDone eq false &$orderby=Id
اعتبارسنجی :اعتبارسنجی در breeze، هم در سمت کلاینت و هم در سمت سرور امکان پذیر میباشد که در مثالی، در قسمت بعدی، validator سفارشی خودمان را خواهیم ساخت و به entity مورد نظر اعمال خواهیم کرد.
breeze دارای یک سری Validator در سطح پراپرتی‌ها است:
- برای انواع اقسام dataType ها مانند Int,string,..
- برای نیازهای رایجی چون: emailAddress,creditCard,maxLength,phone,regularExpression,required,url
هم چنین در breeze امکان تغییر دادن اعتبارسنجی‌های پیش فرض نیز وجود دارند. برای مثال برای اینکه در فیلدهای required بتوان متن خالی هم وارد کرد، از دستور زیر می‌توان استفاده کرد:
breeze.Validator.required({ allowEmptyStrings: true }); ردیابی تغییرات: هر آیتم Entity دارای EntityAspect است که وضعیت آن‌را مشخص میکند و می‌تواند یکی از وضعیت‌های Added،Modified،Deleted،Detached،Unchanged باشد. با مشخص کردن حالت هر آیتم، با فراخوانی SaveChanges تغییرات بر روی دیتابیس اعمال می‌گردد.
ایجاد آیتم جدید:
manager.createEntity('Customer', jsonValue); manager.createEntity("Customer", jsonValue, breeze.EntityState.Modified, breeze.MergeStrategy.OverwriteChanges) manager.createEntity("Customer", item, breeze.EntityState.Deleted) برای اشنایی بیشتر با امکانات Breeze، قصد داریم یک سایت ایجاد آگهی را راه اندازی کنیم. پیش نیازهای ضروری این بخش typescript ،angularjs ،requirejs هستند. قصد داریم سایتی را برای آگهی‌های خرید و فروش خودرو، مشابه با سایت باما ایجاد نماییم:
امکانات این سایت:
- ثبت نام کاربران
- ثبت آگهی توسط کاربران
- ایجاد برچسب‌های آگهی‌ها
- امتیاز دهی به آگهی‌ها
- جستجوی آگهی‌ها
- و....
ابتدا نصب پکیج‌های زیر
Install-Package angularjs Install-Package angularjs.TypeScript.DefinitelyTyped Install-Package bootstrap Install-Package bootstrap.TypeScript.DefinitelyTyped Install-Package jQuery Install-Package jquery.TypeScript.DefinitelyTyped Install-Package RequireJS Install-Package requirejs.TypeScript.DefinitelyTyped bower install angularAMD
مدلهای برنامه:
ایجاد کلاس BaseEntity
public class BaseEntity
{
public int Id { get; set; }
public bool Status { get; set; }
public DateTime CreatedDateTime { get; set; }
} public class Ad : BaseEntity
{
public string Title { get; set; }
public float Price { get; set; }
public double Rating { get; set; }
public int? RatingNumber { get; set; }
public string UserId { get; set; }
public DateTime ModifieDateTime { get; set; }
public string Description { get; set; }
public virtual ICollection<Comment> Comments { get; set; }
public virtual IdentityUser User { get; set; }
public virtual ICollection<AdLabel> Labels { get; set; }
public virtual ICollection<AdMedia> Medias { get; set; }
} ایجاد جدول برچسب
public class Label
{
public int Id { get; set; }
public string Title { get; set; }
public int? ParentId { get; set; }
public virtual Label Parent { get; set; }
public virtual ICollection<Label> Items { get; set; }
} ایجاد جدول مدیا
public class Media
{
public int Id { get; set; }
public string Name { get; set; }
public string MimeType { get; set; }
} public class AdLabel
{
public int Id { get; set; }
public virtual Ad Ad { get; set; }
public virtual Label Label { get; set; }
[Index("IX_AdLabel", 1, IsUnique = true)]
public int AdId { get; set; }
[Index("IX_AdLabel", 2, IsUnique = true)]
public int LabelId { get; set; }
public string Value { get; set; }
} public class AdMedia
{
public int Id { get; set; }
public virtual Ad Ad { get; set; }
public virtual Media Media { get; set; }
[Index("IX_AdMedia", 1, IsUnique = true)]
public int AdId { get; set; }
[Index("IX_AdMedia", 2, IsUnique = true)]
public int MediaId { get; set; }
} public class Comment : BaseEntity
{
public string Body { get; set; }
public double Rating { get; set; }
public int? RatingNumber { get; set; }
public string EntityName { get; set; }
public string UserId { get; set; }
public int? ParentId { get; set; }
public int? AdId { get; set; }
public virtual Comment Parent { get; set; }
public virtual Ad Ad { get; set; }
public virtual ICollection<Comment> Items { get; set; }
public virtual IdentityUser User { get; set; }
} public class Customer:BaseEntity
{
public string UserId { get; set; }
public virtual string DisplayName { get; set; }
public virtual string BirthDay { get; set; }
public string City { get; set; }
public string Address { get; set; }
public int? MediaId { get; set; }
public bool? NewsLetterSubscription { get; set; }
public string PhoneNumber { get; set; }
public virtual IdentityUser User { get; set; }
public virtual Media Media { get; set; }
} public class Rating
{
public int Id { get; set; }
public string UserId { get; set; }
public Double Rate { get; set; }
public string EntityName { get; set; }
public int DestinationId { get; set; }
} اضافه کردن مدلهای برنامه به ApplicationDbContext
public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
public ApplicationDbContext()
: base("DefaultConnection", throwIfV1Schema: false)
{
}
public DbSet<Ad> Ads { get; set; }
public DbSet<AdLabel> AdLabels { get; set; }
public DbSet<AdMedia> AdMedias { get; set; }
public DbSet<Comment> Comments { get; set; }
public DbSet<Label> Labels { get; set; }
public DbSet<Media> Medias { get; set; }
public static ApplicationDbContext Create()
{
return new ApplicationDbContext();
}
} لود کردن فایل main.js در فایل layout.cshtml ترجیحا در انتهای body
<script src="~/Scripts/require.js" data-main="/app/main"></script>
RequireJS کتابخانه‌ی جاوااسکریپتی برای بارگزاری فایل‌ها در صورت نیاز میباشد. تنها کاری که ما باید انجام بدهیم این است که کدهای خود را داخل moduleها قرار دهیم (در فایل‌های جداگانه) و RequireJS در صورت نیاز آنها را load خواهد کرد. همچنین RequireJS وابستگی بین moduleها را نیز مدیریت میکند.
ایجاد فایل main.ts
path: مسیر فایل‌های جاوا اسکریپتی
shim: وابستگی‌های فایل‌ها(ماژول ها) و export کردن آنها را مشخص میکند.
requirejs.config({
paths: {
"app": "app",
"angularAmd":"/Scripts/angularAmd",
"angular": "/Scripts/angular",
"bootstrap": "/Scripts/bootstrap",
"angularRoute": "/Scripts/angular-route",
"jquery": "/Scripts/jquery-2.2.2",
},
waitSeconds: 0,
shim: {
"angular": { exports: "angular" },
"angularRoute": { deps: ["angular"] },
"bootstrap": { deps: ["jquery"] },
"app": {
deps: ["bootstrap","angularRoute"]
}
}
});
require(["app"]); ایجاد فایل app.ts: کارهایی که در فایل app انجام داده‌ایم:
ایجاد کنترلر SecurityCtrl و اعمال آن به تگ body
<body ng-controller="SecurityCtrl"> ... </body>
"use strict";
module AdApps {
class SecurityCtrl {
private $scope: Interfaces.IAdvertismentScope;
constructor($scope: Interfaces.IAdvertismentScope) {
// security check
this.$scope = $scope;
}
}
define(["angularAmd", "angular"], (angularAmd, ng) => {
angularAmd = angularAmd.__proto__;
var app = ng.module("AngularTypeScript", ['ngRoute']);
var viewPath = "app/views/";
var controllerPath = "app/controller/";
app.config(['$routeProvider', $routeProvider => {
$routeProvider
.when("/", angularAmd.route({
templateUrl: viewPath + "home.html",
controllerUrl: controllerPath + "home .js"
}))
.otherwise({ redirectTo: '/' });
}
]);
app.controller('SecurityCtrl', ['$scope', SecurityCtrl]);
return angularAmd.bootstrap(app);
})} 
