نصب این افزونه در ویژوال استدیو 2015 با خطا مواجه میشود.نسخه بروز شده و بدون مشکل آن برای این نسخه از ویژوال استدیو در سایت خانم جولی لرمن مهیا شده است.
TypeScript Template در ASP.NET MVC4
یکپارچه سازی اعتبارسنجی EF Code first با امکانات WPF و حذف کدهای تکرای INotifyPropertyChanged
بررسی سطح بالای مکانیزمهای اعتبارسنجی و AOP بکارگرفته شده
در حین کار با قالب پروژه WPF Framework، هنگام طراحی Modelهای خود (تفاوتی نمیکند که Domain model باشند یا صرفا Model متناظر با یک View)، نیاز است دو مورد را رعایت کنید:
[ImplementPropertyChanged] // AOP public class LoginPageModel : DataErrorInfoBase
ب) از کلاس پایه DataErrorInfoBase مشتق گردد
البته اگر به کلاسهای Domain model برنامه مراجعه کنید، صرفا مشتق شدن از BaseEntity را ملاحظه میکنید:
public class User : BaseEntity
[ImplementPropertyChanged] // AOP public abstract class BaseEntity : DataErrorInfoBase //پیاده سازی خودکار سیستم اعتبارسنجی یکپارچه
بررسی جزئیات مکانیزم AOP بکارگرفته شده
بسیار خوب؛ اینها چطور کار میکنند؟!
ابتدا نیاز است مطلب «معرفی پروژه NotifyPropertyWeaver» را یکبار مطالعه نمائید. خلاصهای جهت تکرار نکات مهم آن:
ویژگی ImplementPropertyChanged به ابزار Fody اعلام میکند که لطفا کدهای تکراری INotifyPropertyChanged را پس از کامپایل اسمبلی جاری، بر اساس تزریق کدهای IL متناظر، به اسمبلی اضافه کن. این روش از لحاظ کارآیی و همچنین تمیز نگه داشتن کدهای نهایی برنامه، فوق العاده است.
برای بررسی کارکرد آن نیاز است اسمبلی مثلا Models را دیکامپایل کرد:
همانطور که ملاحظه میکنید، کدهای تکراری INotifyPropertyChanged به صورت خودکار به اسمبلی نهایی اضافه شدهاند.
البته بدیهی است که استفاده از Fody الزامی نیست. اگر علاقمند هستید که این اطلاعات را دستی اضافه کنید، بهتر است از کلاس پایه BaseViewModel قرار گرفته در مسیر MVVM\BaseViewModel.cs پروژه Common استفاده نمائید.
در این کلاس، پیاده سازیهای NotifyPropertyChanged را بر اساس متدهایی که یک رشته را به عنوان نام خاصیت دریافت میکنند و یا متدی که امکان دسترسی strongly typed به نام رشته را میسر ساخته است، ملاحظه میکنید.
/// <summary> /// تغییر مقدار یک خاصیت را اطلاع رسانی خواهد کرد /// </summary> /// <param name="propertyName">نام خاصیت</param> public void NotifyPropertyChanged(string propertyName) /// <summary> /// تغییر مقدار یک خاصیت را اطلاع رسانی خواهد کرد /// </summary> /// <param name="expression">نام خاصیت مورد نظر</param> public void NotifyPropertyChanged(Expression<Func<object>> expression)
public class AlertConfirmBoxViewModel : BaseViewModel { AlertConfirmBoxModel _alertConfirmBoxModel; public AlertConfirmBoxModel AlertConfirmBoxModel { set { _alertConfirmBoxModel = value; NotifyPropertyChanged("AlertConfirmBoxModel"); // ویا .... NotifyPropertyChanged(()=>AlertConfirmBoxModel); } get { return _alertConfirmBoxModel; } }
بررسی جزئیات اعتبارسنجیهای تعریف شده
EF دارای یک سری ویژگی مانند Required و امثال آن است. WPF دارای اینترفیسی است به نام IDataErrorInfo. این دو را باید به نحوی به هم مرتبط ساخت که پیاده سازیهای مرتبط با آنها را در مسیرهای WpfValidation\DataErrorInfoBase.cs و WpfValidation\ValidationHelper.cs پروژه Common میتوانید ملاحظه نمائید.
<TextBox Text="{Binding Path=ChangeProfileData.UserName, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged, NotifyOnValidationError=true, ValidatesOnExceptions=true, ValidatesOnDataErrors=True, TargetNullValue=''}" />
همچنین حالتهای بررسی اعتبارسنجی آن نیز به PropertyChanged تنظیم گردیده است. در این حالت WPF به تعاریف شیء ChangeProfileData مراجعه کرده و برای نمونه اگر این شیء اینترفیس IDataErrorInfo را پیاده سازی کرده بود، نام خاصیت جاری را به آن ارسال و از آن خطاهای اعتبارسنجی متناظر را درخواست میکند. در اینجا وقت خواهیم داشت تا بر اساس ویژگیها و Data annotaions اعمالی، کار اعتبارسنجی را انجام داده و نتیجه را بازگشت دهیم.
خلاصهی تمام این اعمال و کلاسها، در کلاس پایه DataErrorInfoBase این قالب پروژه قرار گرفتهاند. بنابراین تنها کاری که باید صورت گیرد، مشتق کردن کلاس مدل مورد نظر از آن میباشد.
همچنین باید دقت داشت که نمایش اطلاعات خطاهای حاصل از اعتبارسنجی در این قالب پروژه بر اساس امکانات قالب متروی MahApps.Metro انجام میگیرد (این مورد از Silverlight toolkit به ارث رسیده است) و در حالت کلی خودکار نیست؛ اما در اینجا نیازی به کدنویسی اضافهتری ندارد.
به علاوه باید دقت داشت که این مورد ویژه را باید بر اساس آخرین Build کتابخانه MahApps.Metro که بهروزتر است دریافت و استفاده کرد. در اینجا با پارامتر Pre ذکر شده است.
PM> Install-Package MahApps.Metro -Pre
همانطور که مطلع هستید در تنظیمات یک دایرکتوری مجازی در IIS6 یا 5، حتی پس از نصب دات نت فریم ورک سه و نیم، گزینه انتخاب نگارش 3.5 ظاهر نمیشود و همان تنظیمات ASP.Net 2.0 کافی است (شکل زیر) (دات نت 3 و سه و نیم را میتوان بعنوان افزونههایی با مقیاس سازمانی (WF ، WCF و ...) برای دات نت 2 درنظر گرفت).
هنگام استفاده از VS.Net 2008 و تنظیم نوع پروژه به دات نت فریم ورک 3.5 ، به صورت خودکار تنظیمات لازم به وب کانفیگ برنامه جهت استفاده از کامپایلرهای مربوطه نیز اضافه میشوند که شاید از نظر دور بمانند.
برای آزمایش این مورد، فرض کنید صفحه زیر را بدون استفاده از code behind و VS.Net ایجاد کرده ایم (جهت آزمایش سریع یک قطعه کد Linq ).
<%@ Page Language="C#" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Linq" %>
<form id="Form1" method="post" runat="server">
<asp:GridView ID="GridView1" runat="server" />
</form>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string[] cities = {
"London", "Amsterdam", "San Francisco", "Las Vegas",
"Boston", "Raleigh", "Chicago", "Charlestown",
"Helsinki", "Nice", "Dublin"
};
GridView1.DataSource = from city in cities
where city.Length > 4
orderby city
select city.ToUpper();
GridView1.DataBind();
}
</script>
این قطعه کد چون از قابلیتهای کامپایلر جدید سی شارپ استفاده میکند، با کامپایلر پیش فرض و تنظیم شده دات نت 2 کار نخواهد کرد و باید برای رفع این مشکل، فایل web.config جدیدی را نیز به پوشه برنامه اضافه کنیم:
<?xml version="1.0"?>
<configuration>
<system.codedom>
<compilers>
<compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
<providerOption name="CompilerVersion" value="v3.5"/>
<providerOption name="WarnAsError" value="false"/>
</compiler>
</compilers>
</system.codedom>
<system.web>
<compilation defaultLanguage="c#">
<assemblies>
<add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
</assemblies>
</compilation>
</system.web>
</configuration>
همانطور که ذکر شد اگر از VS.Net 2008 استفاده کنید، هیچ وقت درگیر این مباحث نخواهید شد و همه چیز از پیش تنظیم شده است.
پس از نصب Git اطمینان حاصل کنید که NodeJs ، npm و jspm نیز بر روی سیستم شما نصب باشند. در این قسمت گفتهایم که چگونه از این «اطمینان» آگاه شوید.
حال نوبت به ساخت اولین پروژهی MVC ما میرسد. یک پروژه MVC جدید با نام دلخواه خودتان در مسیر دلخواه خودتان ایجاد کنید. با خط فرمان، در ریشهی پروژه دستور زیر را اجرا کنید:
jspm init
بدون هیچ تغییری، به هیچ کدام از سوالات پاسخ ندهید و از دکمهی enter استفاده کنید تا مقادیر پیشفرض اعمال شوند. اگر تصویر زیر را در خروجی مشاهده کردید یعنی تا بدین جای کار به درستی پیش رفتهاید :
حالا نوبت به نصب محتویات Aurelia میباشد. برای این کار دستورات زیر را اجرا کنید :
jspm install aurelia-framework jspm install aurelia-bootstrapper
توجه داشته باشید، اگر دستورات بالا به درستی اجرا و تکمیل شوند، باید پس از پایان هر دستور، پیام زیر را در انتهای خروجی مشاهده کنید:
پس از این کارها، فایل Layout را باز کنید و کدهای آن را به صورت زیر تغییر دهید:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Aurelia - www.dotnettips.info</title> </head> <body aurelia-app> <div> @RenderBody() </div> <script src="~/jspm_packages/system.js"></script> <script src="~/config.js"></script> <script> System.import("aurelia-bootstrapper"); </script> </body> </html>
export class App { }
<template> <h3>www.dotnettips.info</h3> </template>
در بخشهای بعدی در مورد کدهای فوق و همچنین به سایر مباحث دیگر Aurelia میپردازیم.
نکتهی تکمیلی
زمانیکه میخواهید از دستوارت jspm استفاده کنید، باید به ریشهی برنامه مراجعه کنید. حال اگر پوشههای تودرتوی زیادی داشته باشید، این رفت و آمدها زمانبر و خسته کننده خواهند شد. برای حل این مشکل کافیست روی پروژه، راست کلیک کنید و گزینهی Open Folder in File Explorer را انتخاب کنید تا ریشهی پروژه باز شود. حالا کافیست در فضای خالی Windows Explorer کلید Shift را گرفته و راست کلیک کنید. حالا یک آیتم جدید با نام Open command window here ظاهر شده است. کافیست روی آن کلیک کنید. CMD در ریشهی سایت باز خواهد شد.
دانلود پروژه جاری در مخزن گیت
از FxCop چه خبر؟
یکی دیگر از تغییرات عمدهی ASP.NET Core با نگارشهای قبلی آن، نحوهی مدیریت مسیریابیهای سیستم است. در نگارشهای قبلی مبتنی بر HTTP Moduleها، مسیریابیها توسط یک HTTP Module مخصوص، با pipeline اصلی ASP.NET یکپارچه شدهاند و زمانیکه مسیر درخواستی با تنظیمات سیستم تطابق داشته باشد، پردازش کار به HTTP Handler مخصوص ASP.NET MVC منتقل میشود:
اما در ASP.NET Core مبتنی بر میان افزارها، زیر ساخت مسیریابی به صورت زیر تغییر کردهاست:
میان افزار ASP.NET MVC را که در قسمت قبل فعال کردیم، باید بتواند کنترلر و اکشن متد متناظر با URL درخواستی را مشخص کند. این تصمیم گیری نیز بر اساس تنظیماتی به نام Routing انجام میشود. در قسمت قبل، حالت ساده و پیش فرض این تنظیمات را مورد استفاده قرار دادیم
app.UseMvcWithDefaultRoute();
public static IApplicationBuilder UseMvcWithDefaultRoute(this IApplicationBuilder app) { if (app == null) throw new ArgumentNullException("app"); return app.UseMvc((Action<IRouteBuilder>) (routes => routes.MapRoute("default", "{controller=Home}/{action=Index}/{id?}"))); }
روش دیگر معرفی این تنظیمات، استفاده از Attribute routing است:
[Route("[controller]/[action]")]
مسیریابیهای قراردادی
در قسمت قبل، یک POCO Controller را به صورت ذیل تعریف کردیم و این کنترلر، بدون تعریف هیچ نوع مسیریابی خاصی در دسترس بود:
namespace Core1RtmEmptyTest.Controllers { public class HomeController { public string Index() { return "Running a POCO controller!"; } } }
app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); });
در این تعاریف، هر کدام از قسمتهای قرارگرفتهی داخل {}، مشخص کنندهی قسمتی از URL دریافتی بوده و نامهای controller و action در اینجا جزو نامهای از پیش مشخص شده هستند و برای نگاشت اطلاعات مورد استفاده قرار میگیرند. برای مثال اگر آدرس home/index/ درخواست شد، برنامه به کلاس HomeController و متد عمومی Index آن هدایت میشود. همچنین قسمت آخر این پردازش به ?id ختم شدهاست. وجود ?، به معنای اختیاری بودن این پارامتر است و اگر در URL ذکر شود، به پارامتر id این اکشن متد، نگاشت خواهد شد. مواردی که پس از = ذکر شدهاند، مقادیر پیش فرض مسیریابی هستند. برای مثال اگر صرفا آدرس home/ درخواست شود، مقدار اکشن متد آن با مقدار پیش فرض index جایگزین خواهد شد و اگر تنها مسیر / درخواست شود، کنترل Home و اکشن متد Index آن پردازش میشوند.
در اینجا به هر تعدادی که نیاز است میتوان متدهای routes.MapRoute را فراخوانی و استفاده کرد؛ اما ترتیب تعریف آنها حائز اهمیت است. هر مسیریابی که در ابتدای لیست اضافه شود، حق تقدم بالاتری خواهد داشت و هر تطابقی با یکی از مسیریابیهای تعریف شده، در همان سطح سبب خاتمهی پردازش سایر مسیریابیها میشود.
استفاده از Attributes برای تعریف مسیریابیها
بجای تعریف قرار دادهای پیش فرض مسیریابی در کلاس آغازین برنامه، میتوان از ویژگی Route نیز استفاده کرد. هرچند روش تعریف مسیریابیهای قراردادی، از نگارشهای آغازین ASP.NET MVC به همراه آن بودهاند، اما با زیاد شدن تعداد کنترلرها و مسیریابیهای سفارشی هر کدام، اینبار با نگاه کردن به یک کنترلر، سریع نمیتوان تشخیص داد که چه مسیریابیهای خاصی به آن مرتبط هستند. برای ساده سازی مدیریت برنامههای بزرگ و ساده سازی تعاریف مسیریابیهای خاص آنها، استفاده از ویژگی Route نیز به ASP.NET MVC اضافه شدهاست.
یک مثال: کنترلر About را درنظر بگیرید:
using Microsoft.AspNetCore.Mvc; namespace Core1RtmEmptyTest.Controllers { public class AboutController : Controller { public ActionResult Hello() { return Content("Hello from DNT!"); } public ActionResult SiteName() { return Content("DNT"); } } }
اما اگر آدرس /About/ را درخواست دهیم چطور؟ چون در مسیریابی پیش فرض، تعریف {action=Index} را داریم، یعنی هر زمانیکه در URL درخواستی، قسمت action آن ذکر نشد، آنرا با index جایگزین کن و این کنترلر دارای متد Index نیست. در ادامه اگر بخواهیم متد Hello را تبدیل به متد پیش فرض این کنترلر کنیم، میتوان با استفاده از ویژگی Route به صورت ذیل عمل کرد:
using Microsoft.AspNetCore.Mvc; namespace Core1RtmEmptyTest.Controllers { [Route("About")] public class AboutController : Controller { [Route("")] public ActionResult Hello() { return Content("Hello from DNT!"); } [Route("SiteName")] public ActionResult SiteName() { return Content("DNT"); } } }
AmbiguousActionException: Multiple actions matched. The following actions matched route data and had all constraints satisfied: Core1RtmEmptyTest.Controllers.AboutController.Hello (Core1RtmEmptyTest) Core1RtmEmptyTest.Controllers.AboutController.SiteName (Core1RtmEmptyTest)
روش بهتر و refactoring friendly آن نیز به صورت ذیل است:
using Microsoft.AspNetCore.Mvc; namespace Core1RtmEmptyTest.Controllers { [Route("[controller]")] public class AboutController : Controller { [Route("")] public ActionResult Hello() { return Content("Hello from DNT!"); } [Route("[action]")] public ActionResult SiteName() { return Content("DNT"); } } }
یک نکته: در حین تعریف مسیریابی یک کنترلر میتوان پیشوندهایی را نیز ذکر کرد؛ برای مثال:
[Route("api/[controller]")]
تعریف قیود، برای مسیریابیهای تعریف شده
فرض کنید به کنترلر About فوق، اکشن متد ذیل را که یک خروجی JSON را بازگشت میدهد، اضافه کردهایم:
//[Route("/Users/{userid}")] [Route("Users/{userid}")] public IActionResult GetUsers(int userId) { return Json(new { userId = userId }); }
و اگر مسیریابی Users/{userid} را تعریف کنیم، یعنی این مسیریابی پس از ذکر کنترلر about، به عنوان یک اکشن متد آن مفهوم پیدا میکند:
http://localhost:7742/about/users/1
در هر دو حالت، ذکر پارامتر userid الزامی است (چون با ? مشخص نشدهاست)؛ مانند:
[Route("/Users/{userid:int?}")]
[Route("Users/{userid:int}")]
قیودی را که در اینجا میتوان ذکر کرد به شرح زیر هستند:
• alpha - معادل است با (a-z, A-Z).
• bool - برای تطابق با مقادیر بولی.
• datetime - برای تطابق با تاریخ میلادی.
• decimal - برای تطابق با ورودیهای اعشاری.
• double - برای تطابق با اعداد اعشاری 64 بیتی.
• float - برای تطابق با اعداد اعشاری 32 بیتی.
• guid - برای تطابق با GUID ها
• int - برای تطابق با اعداد صحیح 32 بیتی.
• length - برای تعیین طول رشته.
• long - برای تطابق با اعداد صحیح 64 بیتی.
• max - برای ذکر حداکثر مقدار یک عدد صحیح.
• maxlength - جهت ذکر حداکثر طول رشتهی مجاز ورودی.
• min - برای ذکر حداقل مقدار یک عدد صحیح.
• minlength - جهت ذکر حداقل طول رشتهی مجاز ورودی.
• range - ذکر بازهی اعداد صحیح مجاز.
• regex - ذکر یک عبارت با قاعده جهت مشخص سازی الگوی قابل پذیرش.
برای ترکیب چندین قید مختلف نیز میتوان از : استفاده کرد:
[Route("/Users/{userid:int:max(1000):min(10)}")]
ذکر نام Route برای ساده سازی تعریف آدرسی به آن
در حین تعریف یک Route میتوان نام دلخواهی را نیز به آن انتساب داد (همانند نام default مسیریابی ثبت شدهی در کلاس آغازین برنامه):
[Route("/Users/{userid:int}", Name="GetUserById")]
string uri = Url.Link("GetUserById", new { userid = 1 });
مشخص سازی ترتیب پردازش مسیریابیها
ترتیب مسیریابیهای ثبت شدهی در کلاس آغازین برنامه، همان ترتیب افزوده شدن و ذکر آنها است.
در اینجا میتوان از خاصیت order نیز استفاده کرد و اعداد کوچکتر، ابتدا پردازش میشوند (مقدار پیش فرض آن نیز صفر است):
[Route("/Users/{userid:int}", Name = "GetUserById", Order = 1)]
امکان تعریف قیود سفارشی
اگر قیودی که تا اینجا ذکر شدند، برای کار شما مناسب نبودند و نیاز بود تا الگوریتم خاصی را جهت محدود سازی دسترسی به یک مسیریابی خاص پیاده سازی کنید، میتوان به صورت ذیل عمل کرد:
using System; using System.Globalization; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Routing; namespace Core1RtmEmptyTest { public class CustomRouteConstraint : IRouteConstraint { public bool Match(HttpContext httpContext, IRouter route, string routeKey, RouteValueDictionary values, RouteDirection routeDirection) { object value; if (!values.TryGetValue(routeKey, out value) || value == null) { return false; } long longValue; if (value is long) { longValue = (long)value; return longValue != 10; } var valueString = Convert.ToString(value, CultureInfo.InvariantCulture); if (long.TryParse(valueString, NumberStyles.Integer, CultureInfo.InvariantCulture, out longValue)) { return longValue != 10; } return false; } } }
public class CustomRouteConstraint : IRouteConstraint
در آخر برای ثبت و معرفی آن باید به متد ConfigureServices کلاس آغازین برنامه مراجعه کرد:
public void ConfigureServices(IServiceCollection services) { services.AddRouting(options =>options.ConstraintMap.Add("Custom", typeof(CustomRouteConstraint)));
[Route("/Users/{userid:int:custom}")]
یک نکته: اگر به سورس ASP.NET Core مراجعه کنید ، تمام قیودی را که پیشتر نام بردیم (مانند int، guid و امثال آن) نیز به همین روش تعریف و پیشتر ثبت شدهاند.
معرفی بستهی نیوگت Microsoft.AspNetCore.SpaServices
مسیریابیهای پیش فرض ASP.NET Core با مسیریابیهای برنامههای SPA مانند AngularJS (و امثال آن) تداخل دارند؛ از این جهت که درخواستهای رسیدهی به سرور، ابتدا به موتور پردازشی ASP.NET وارد میشوند و اگر یافت نشدند، کاربر با پیام 404 مواجه خواهد شد و دیگر در اینجا برنامه به مسیریابی خاص مثلا AngularJS 2.0 هدایت نمیشود.
برای این موارد مرسوم است که یک fallback route را در انتهای مسیریابیهای موجود اضافه کنند (به آن catch all هم میگویند)
app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); routes.MapRoute( name: "spa-fallback", template: "{*url}", defaults: new { controller = "Home", action = "Index" }); });
برای حل این مشکل مایکروسافت بستهای را به نام Microsoft.AspNetCore.SpaServices ارائه داده است.
برای افزودن آن بر روی گره references کلیک راست کرده و گزینهی manage nuget packages را انتخاب کنید. سپس در برگهی browse آن Microsoft.AspNetCore.SpaServices را جستجو کرده و نصب نمائید:
انجام این مراحل معادل هستند با افزودن یک سطر ذیل به فایل project.json برنامه:
{ "dependencies": { //same as before "Microsoft.AspNetCore.SpaServices": "1.0.0-beta-000007" },
app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" }); });
// Serve wwwroot as root app.UseFileServer(); // Serve /node_modules as a separate root (for packages that use other npm modules client side) app.UseFileServer(new FileServerOptions { // Set root of file server FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "node_modules")), // Only react to requests that match this path RequestPath = "/node_modules", // Don't expose file system EnableDirectoryBrowsing = false });
var ss = require("sdk/simple-storage"); ss.storage.myArray = [1, 1, 2, 3, 5, 8, 13]; ss.storage.myBoolean = true; ss.storage.myNull = null; ss.storage.myNumber = 3.1337; ss.storage.myObject = { a: "foo", b: { c: true }, d: null }; ss.storage.myString = "O frabjous day!";
delete ss.storage.value;
if (!ss.storage.Variables) { ss.storage.Variables=[]; ss.storage.Variables.push(true); ss.storage.Variables.push(false); ss.storage.Variables.push(false); ss.storage.Variables.push(false); } if (!ss.storage.interval) ss.storage.interval=1; if (!ss.storage.DateVariables) { var now=String(new Date()); ss.storage.DateVariables=[]; ss.storage.DateVariables.push(now); ss.storage.DateVariables.push(now); ss.storage.DateVariables.push(now); ss.storage.DateVariables.push(now); }
contentScriptFile: self.data.url("jquery.min.js") contentScriptFile: [self.data.url("jquery.min.js"),self.data.url("const.js"),self.data.url("popup.js")]
از شیء port به صورت عملی استفاده میکنیم. کد main.js را به صورت زیر تغییر دادیم:
function handleChange(state) { if (state.checked) { panel.show({ position: button }); var v1=[],v2; if (ss.storage.Variables) v1=ss.storage.Variables; if (ss.storage.interval) v2=ss.storage.interval; panel.port.emit("vars",v1,v2); } } panel.port.on("vars", function (vars,interval) { ss.storage.Variables=vars; ss.storage.interval=interval; });
$(document).ready(function () { addon.port.on("vars", function(vars,interval) { if (vars) { $("#chkarticles").attr("checked", vars[0]); $("#chkarticlescomments").attr("checked", vars[1]); $("#chkshares").attr("checked", vars[2]); $("#chksharescomments").attr("checked", vars[3]); } $("#interval").val(interval); }); $("#btnsave").click(function() { var Vposts = $("#chkarticles").is(':checked'); var VpostsComments = $("#chkarticlescomments").is(':checked'); var Vshares = $("#chkshares").is(':checked'); var VsharesComments = $("#chksharescomments").is(':checked'); var Vinterval = $("#interval").val() ; var Variables=[]; Variables[0]=Vposts; Variables[1]=VpostsComments; Variables[2]=Vshares; Variables[3]=VsharesComments; interval=Vinterval; addon.port.emit("vars", Variables,Vinterval); $("#messageboard").text( Messages.SettingsSaved); }); });
نکته بسیار مهم: در کد بالا ما فایل جاوااسکریت را از طریق فایل popup.html معرفی کردیم، نه از طریق خصوصیت contentscriptfile. این نکته را همیشه به خاطر داشته باشید. فایلهای js خود را تنها در دو حالت استفاده کنید:
- از طریق دادن رشته به خصوصیت contentScript و استفاده از self به جای addon
- معرفی فایل js داخل خود فایل html با تگ script که به درد اسکریپتهای با کد زیاد میخورد.
اگر فایل شما شامل استفاده از کلمهی کلیدی addon نمیشود، میتوانید فایل js خود را از طریق contentScriptFile هم اعمال کنید.
فایل popup.html
<script src="jquery.min.js"></script> <!-- Including jQuery --> <script type="text/javascript" src="const.js"></script> <script type="text/javascript" src="popup.js"></script>
<script type="text/javascript" src="const.js"></script> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="rssreader.js"></script>
pageWorker = require("sdk/page-worker"); page= pageWorker.Page({ contentScriptWhen: "ready", contentURL: self.data.url("./background.htm") }); page.port.emit("vars",ss.storage.Variables,ss.storage.DateVariables,ss.storage.interval);
var variables=[]; var datevariables=[]; var period_time=60000; var timer; google.load("feeds", "1"); $(document).ready(function () { addon.port.on("vars", function(vars,datevars,interval) { if (vars) { Variables=vars; } if (datevars) { datevariables=datevars; } if(interval) period_time=interval*60000; alarmManager(); }); }); function alarmManager() { timer = setInterval(Run,period_time); } function Run() { if(Variables[0]){RssReader(Links.postUrl,0, Messages.PostsUpdated);} if(Variables[1]){RssReader(Links.posts_commentsUrl,1,Messages.CommentsUpdated); } if(Variables[2]){RssReader(Links.sharesUrl,2,Messages.SharesUpdated);} if(Variables[3]){RssReader(Links.shares_CommentsUrl,3,Messages.SharesCommentsUpdated);} } function RssReader(URL,index,Message) { var feed = new google.feeds.Feed(URL); feed.setResultFormat(google.feeds.Feed.XML_FORMAT); feed.load(function (result) { if(result!=null) { var strRssUpdate = result.xmlDocument.firstChild.firstChild.childNodes[5].textContent; var RssUpdate=new Date(strRssUpdate); var lastupdate=new Date(datevariables[index]); if(RssUpdate>lastupdate) { datevariables[index]=strRssUpdate; addon.port.emit("notification",datevariables,Message); } } }); }
- چه بخشهایی از سایت باید بررسی شوند.
- آخرین تاریخ تغییر هر کدام که در زمان نصب افزونه، تاریخ نصب افزونه میشود و با اولین به روز رسانی، تاریخ جدیدی جای آن را میگیرد.
- دورهی سیکل زمانی یا همان interval بر اساس دقیقه
Run
RSSReader
page.port.on("notification",function(lastupdate,Message) { ss.storage.DateVariables=lastupdate; Make_a_Notification(Message); }) function Make_a_Notification(Message) { var notifications = require("sdk/notifications"); notifications.notify({ title: "سایت به روز شد", text: Message, iconURL:self.data.url("./icon-64.png"), data:"https://www.dntips.ir", onClick: function (data) { tabs.open(data); } }); }
البته این نکته قابل ذکر است که اگر کاربر طلاعات پنل را به روزرسانی کند، تا وقتی که مرورگر بسته نشده و دوباره باز نشود تغییری نمیکند؛ چرا که ما تنها در ابتدای امر مقادیر ذخیره شده را به RSSReader فرستاده و اگر کاربر آنها را به روز کند، ارسال پیام دیگری توسط page worker صورت نمیگیرد. پس کد موجود در main.js را به صورت زیر ویرایش میکنیم:
pageWorker = require("sdk/page-worker"); page= pageWorker.Page({ contentScriptWhen: "ready", contentURL: self.data.url("./background.htm") }); function SendData() { page.port.emit("vars",ss.storage.Variables,ss.storage.DateVariables,ss.storage.interval); } SendData(); panel.port.on("vars", function (vars,interval) { ss.storage.Variables=vars; ss.storage.interval=interval; SendData(); });
var timer; function alarmManager() { timer = setInterval(Run,period_time); } addon.port.on("vars", function(vars,datevars,interval) { if (vars) { Variables=vars; } if (datevars) { datevariables=datevars; } if(interval) period_time=interval*60000; if(timer!=null) { clearInterval(timer); } alarmManager(); });
Page Mod
var pageMod = require("sdk/page-mod"); pageMod.PageMod({ include: "*.mozilla.org", contentScript: 'window.alert("Page matches ruleset");' });
var data = require("sdk/self").data; var pageMod = require("sdk/page-mod"); pageMod.PageMod({ include: "*.mozilla.org", contentScriptFile: [data.url("jquery-1.7.min.js"), data.url("my-script.js")] });
پنل تنظیمات
"preferences": [{ "description": "مطالب سایت", "type": "bool", "name": "post", "value": true, "title": "مطالب سایت" }, { "description": "نظرات مطالب سایت", "type": "bool", "name": "postcomments", "value": false, "title": "نظرات مطالب سایت" }, { "description": "اشتراک ها", "type": "bool", "name": "shares", "value": false, "title": "اشتراک ها" }, { "description": "نظرات اشتراک ها", "type": "bool", "name": "sharescomments", "value": false, "title": "نظرات اشتراک ها" }, { "description": "دوره زمان برای بررسی سایت", "name": "interval", "type": "integer", "value": 10, "title": "دوره زمانی" }]
از آنجا که مقادیر بالا تنها مقادیر پیش فرض خودمان هست و اگر کاربر آنها را تغییر دهد، در این صفحه هم باید اطلاعات تصحیح شوند، برای همین از کد زیر برای دسترسی به پنل تنظیمات و کنترلهای موجود آن استفاده میکنیم. همانطور که میبینید کد مورد نظر را در یک تابع به نام Perf_Default_Value قرار دادیم و آن را در بدو اجرا صدا زدیم. پس کاربر اگر به پنل تنظمیات رجوع کند، میتواند تغییراتی را که قبلا داده است، ببیند. بنابراین اگر الان تغییری را ایجاد کند، تا باز شدن مجدد مرورگر چیزی نمایش داده نمیشود. برای همین دقیقا مانند تابع SendData این تابع را هم در کد شنود پنل panel اضافه میکنیم؛ تا اگر کاربر اطلاعات را از طریق روش قبلی تغییر داد، اطلاعات هم اینک به روز شوند.
function Perf_Default_Value() { var preferences = require("sdk/simple-prefs").prefs; preferences.post = ss.storage.Variables[0]; preferences.postcomments = ss.storage.Variables[1]; preferences.shares = ss.storage.Variables[2]; preferences.sharescomments = ss.storage.Variables[3]; preferences["myinterval"] =parseInt(ss.storage.interval); } Perf_Default_Value(); panel.port.on("vars", function (vars,interval) { ss.storage.Variables=vars; ss.storage.interval=interval; SendData(); Perf_Default_Value(); });
perf=require("sdk/simple-prefs"); var preferences = perf.prefs; function onPrefChange(prefName) { switch(prefName) { case "post": ss.storage.Variables[0]=preferences[prefName]; break; case "postcomments": ss.storage.Variables[1]=preferences[prefName]; break; case "shares": ss.storage.Variables[2]=preferences[prefName]; break; case "sharescomments": ss.storage.Variables[3]=preferences[prefName]; break; case "myinterval": ss.storage.interval=preferences[prefName]; break; } } //perf.on("post", onPrefChange); //perf.on("postcomments", onPrefChange); perf.on("", onPrefChange);
اشکال زدایی Debug