مسیرراهها
قالب سیلورلایتی را ایجاد کرده بودم و IE در حالت نمایش عادی این قالب 30 درصد CPU Usage ثابت داشت. علت را هم متوجه نمیشدم؛ چون در این حالت اصلا کدی وجود نداشت که بخواهد CPU Usage ایی را ایجاد کند. یک سری کد XAML جهت نمایش قالب در کنار هم قرار گرفته بودند و همین.
تا اینکه دیروز در وبلاگ رسمی مرتبط با کارآیی برنامههای Silverlight مطلبی منتشر شد که دقیقا مشکل طراحی قالب من هم همان بود:
خلاصه آن:
اگر در حالت نمایش برنامه Silverlight شما (بدون اینکه کدی در حال اجرا باشد) به صورت ثابت CPU Usage بالایی را مشاهده میکنید، پارامتر enableRedrawRegions تگ بارگذاری افزونهی Silverlight را به true مقدار دهی کنید.
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
...
<param name="enableRedrawRegions" value="true"/>
...
</object>
پس از فعال سازی این گزینه، برنامه را اجرا کنید. نواحی را که مرتبا در حال ترسیم مجدد هستند، با رنگهای آبی، زرد و صورتی مشاهده خواهید کرد.
در این حالت اگر ناحیهای مرتبا در حال به روز رسانی مشاهده گردید، دقیقا همین ناحیه است که سبب CPU Usage بالا و ثابت برنامه شما شده است و باید فکری به حال آن کرد.
چه زمانی ممکن است این حالت (ترسیمهای مجدد بدون پایان) رخ دهد؟
عموما این مشکل در حین استفاده ناصحیح از افکتهای پیش فرض Silverlight مانند DropShadowEffect رخ میدهد. برای مثال میخواهید قسمتی از قالب شما سایه دار باشد اما نحوهی اعمال این سایه بسیار مهم است.
<Border CornerRadius="3">
<!--High cpu usage-->
<Border.Effect>
<DropShadowEffect BlurRadius="7" Color="#FF1E2224" Opacity="3" ShadowDepth="6" Direction="200" />
</Border.Effect>
<StackPanel>
...
...
در این مثال ابتدا یک border تعریف شده و سپس سایهای به آن اعمال گردیده است. سپس داخل این Border یک StackPanel قرار گرفته است به همراه یک سری از اشیاء زیر مجموعه آن. این کار غلط است! همین مورد به ظاهر ساده 30 درصد CPU Usage ثابت را در برنامه ایجاد کرده بود.
علت چیست؟
با این نحوهی تعریف اشتباه DropShadowEffect ، هر نوع تغییر بصری در مجموعهی Border و StackPanel داخل آن، سبب ترسیم مجدد کل ناحیه میگردد. این تغییر بصری حتی میتواند شامل چشمک زدن یک cursor درون یک TextBox در قسمتی از این ناحیه نیز باشد که با استفاده از ویژگی enableRedrawRegions ، این مورد را به خوبی میتوان مشاهده نمود.
راه حل این مساله کدام است؟
از دو Border استفاده کنید. یک Border با ضخامت کم تنها برای نمایش سایه (که دارای هیچ نوع شیء فرزندی نیست) و Border و StackPanel قبلی هم به همان صورت ابتدایی (البته با حذف DropShadowEffect از آن) باقی بماند.
پشتیبانی SQL Server از Spatial data
از SQL Server 2008 به بعد، نوع داده جدیدی به نام geography به نوعهای قابل تعریف ستونها اضافه شدهاست. در این نوع ستونها میتوان طول و عرض جغرافیایی یک نقطه را ذخیره کرد و سپس به کمک توابع توکاری از آنها کوئری گرفت.
در اینجا نمونهای از نحوهی تعریف و همچنین مقدار دهی این نوع ستونها را مشاهده میکنید:
متد geography::STGeoFromText یک SQL CLR function است. این متد در مثال فوق، مختصات یک نقطه را دریافت کردهاست. همچنین نیاز دارد بداند که این نقطه توسط چه نوع سیستم مختصاتی ارائه میشود. عدد 4326 در اینجا یک SRID یا Spatial Reference System Identifier استاندارد است. برای نمونه اطلاعات ارائه شده توسط Google و یا Bing توسط این استاندارد ارائه میشوند.
در اینجا متدهای توکار دیگری مانند geography::STDistance برای یافتن فاصله مستقیم بین نقاط نیز ارائه شدهاند. خروجی آن بر حسب متر است.
پشتیبانی از Spatial Data در Entity framework
پشتیبانی از نوع مخصوص geography، در EF 5 توسط نوع دادهای DbGeography ارائه شد. این نوع دادهای immutable است. به این معنا که پس از نمونه سازی، دیگر مقدار آن قابل تغییر نیست.
در اینجا برای نمونه مدلی را مشاهده میکنید که از نوع دادهای DbGeography استفاده میکند:
به همراه یک Context، تا کلاس GeoLocation در معرض دید EF قرار گیرد:
برای مقدار دهی خاصیت Location از نوع DbGeography میتوان از متد ذیل استفاده کرد که بسیار شبیه به متد geography::STGeoFromText عمل میکند:
تهیه منبع دادهی جغرافیایی
برای تدارک یک مثال واقعی جغرافیایی، نیاز به اطلاعاتی دقیق داریم. این نوع اطلاعات عموما توسط یک سری فایل مخصوص به نام Shapefiles که حاوی اطلاعات برداری جغرافیایی هستند ارائه میشوند. برای نمونه اطلاعات جغرافیایی به روز ایران را از آدرس ذیل میتوانید دریافت کنید:
http://download.geofabrik.de/asia/iran.html
http://download.geofabrik.de/asia/iran-latest.shp.zip
پس از دریافت این فایل، به تعدادی فایل با پسوندهای shp، shx و dbf خواهیم رسید.
فایلهای shp بیانگر فرمت اشکال ذخیره شده هستند. فایلهای shx یک سری ایندکس بوده و فایلهای dbf از نوع بانک اطلاعاتی dBase IV میباشند.
همچنین اگر فایلهای prj را باز کنید، یک چنین اطلاعاتی در آن موجودند:
نکتهی مهمی که در اینجا باید مدنظر داشت، استاندارد GCS_WGS_1984 آن است. این استاندارد معادل است با استاندارد EPSG 4326. عدد 4326 آن جهت ثبت این اطلاعات در یک بانک اطلاعاتی SQL Server حائز اهمیت است (پارامتر coordinateSystemId در متد createPoint) و ممکن است از هر فایلی به فایل دیگر متفاوت باشد.
خواندن فایلهای shp در دات نت
پس از دریافت فایلهای shp و بانکهای اطلاعاتی مرتبط با اطلاعات جغرافیایی ایران، اکنون نوبت به پردازش این فایلهای مخصوص با فرمت بانک اطلاعاتی فاکس پرو مانند، رسیدهاست. برای این منظور میتوان از پروژهی سورس باز ذیل استفاده کرد:
این پروژه در خواندن فایلهای shp بدون نقص عمل میکند اما توانایی خواندن نامهای فارسی وارد شده در این نوع بانکهای اطلاعاتی را ندارد. برای رفع این مشکل، سورس آن را از Codeplex دریافت کنید. سپس فایل Shapefile.cs را گشوده و ابتدای خاصیت Current آنرا به نحو ذیل تغییر دهید:
در اینجا فقط سطر استفاده از Encoding خاصی با شماره 720 و تبدیل آن به UTF8 اضافه شدهاست. پس از آن بدون مشکل میتوان برچسبهای فارسی را از فایلهای dBase IV این نوع بانکهای اطلاعاتی استخراج کرد (اصلاح شدهی آن در فایل پیوست مطلب موجود است).
در کدهای فوق به کمک کتابخانهی C# Esri Shapefile Reader، اطلاعات نقاط بانک اطلاعاتی shape files را خوانده و به صورت لیستهایی از MapPoint بازگشت میدهیم. نکتهی مهم آن، Metadata است که از هر فایلی به فایل دیگر میتوان متفاوت باشد. به همین جهت این اطلاعات را به شکل ویژگیهای key/value در این نوع بانکهای اطلاعاتی ذخیره میکنند.
افزودن اطلاعات جغرافیایی به بانک اطلاعاتی SQL Server به کمک Entity framework
فایل places.shp را در مجموعه فایلهایی که در ابتدای بحث عنوان شدند، میتوانید مشاهده کنید. قصد داریم اطلاعات نقاط آنرا به مدل GeoLocation انتساب داده و سپس ذخیره کنیم:
تعریف متد createPoint را که بر اساس X و Y نقاط، معادل قابل پذیرش آنرا جهت SQL Server تهیه میکند، در ابتدای بحث مشاهده کردید.
در فایلهای مرتبط با places.shp، متادیتا name، معادل نام شهرهای ایران است و type آن بیانگر شهر، روستا و امثال آن میباشد.
پس از اینکه اطلاعات مکانهای ایران، در SQL Server ذخیره شدند، نمایش بصری آنها را در management studio نیز میتوان مشاهده کرد:
کوئری گرفتن از اطلاعات جغرافیایی
فرض کنید میخواهیم مکانهایی را با فاصله کمتر از 5 کیلومتر از تهران پیدا کنیم:
همانطور که پیشتر نیز عنوان شد، متد Distance بر اساس متر کار میکند. به همین جهت برای تعریف 5 کیلومتر به نحو فوق عمل شدهاست. همچنین نحوهی مرتب سازی اطلاعات نیز بر اساس فاصله از یک مکان مشخص صورت گرفتهاست.
و یا اگر بخواهیم دقیقا بر اساس مختصات یک نقطه، مکانی را بیابیم، میتوان از متد SpatialEquals استفاده کرد:
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید:
EFGeoTests.zip
از SQL Server 2008 به بعد، نوع داده جدیدی به نام geography به نوعهای قابل تعریف ستونها اضافه شدهاست. در این نوع ستونها میتوان طول و عرض جغرافیایی یک نقطه را ذخیره کرد و سپس به کمک توابع توکاری از آنها کوئری گرفت.
در اینجا نمونهای از نحوهی تعریف و همچنین مقدار دهی این نوع ستونها را مشاهده میکنید:
CREATE TABLE [Geo]( [id] [int] IDENTITY(1,1) NOT NULL, [Location] [geography] NULL ) insert into Geo( Location , long, lat ) values ( geography::STGeomFromText ('POINT(-121.527200 45.712113)', 4326))
در اینجا متدهای توکار دیگری مانند geography::STDistance برای یافتن فاصله مستقیم بین نقاط نیز ارائه شدهاند. خروجی آن بر حسب متر است.
پشتیبانی از Spatial Data در Entity framework
پشتیبانی از نوع مخصوص geography، در EF 5 توسط نوع دادهای DbGeography ارائه شد. این نوع دادهای immutable است. به این معنا که پس از نمونه سازی، دیگر مقدار آن قابل تغییر نیست.
در اینجا برای نمونه مدلی را مشاهده میکنید که از نوع دادهای DbGeography استفاده میکند:
using System.Data.Entity.Spatial; namespace EFGeoTests.Models { public class GeoLocation { public int Id { get; set; } public DbGeography Location { get; set; } public string Name { get; set; } public string Type { get; set; } public override string ToString() { return string.Format("Name:{0}, Location:{1}", Name, Location); } } }
using System; using System.Data.Entity; using EFGeoTests.Models; namespace EFGeoTests.Config { public class MyContext : DbContext { public DbSet<GeoLocation> GeoLocations { get; set; } public MyContext() : base("Connection1") { this.Database.Log = sql => Console.Write(sql); } } }
private static DbGeography createPoint(double longitude, double latitude, int coordinateSystemId = 4326) { var text = string.Format(CultureInfo.InvariantCulture.NumberFormat,"POINT({0} {1})", longitude, latitude); return DbGeography.PointFromText(text, coordinateSystemId); }
تهیه منبع دادهی جغرافیایی
برای تدارک یک مثال واقعی جغرافیایی، نیاز به اطلاعاتی دقیق داریم. این نوع اطلاعات عموما توسط یک سری فایل مخصوص به نام Shapefiles که حاوی اطلاعات برداری جغرافیایی هستند ارائه میشوند. برای نمونه اطلاعات جغرافیایی به روز ایران را از آدرس ذیل میتوانید دریافت کنید:
http://download.geofabrik.de/asia/iran.html
http://download.geofabrik.de/asia/iran-latest.shp.zip
پس از دریافت این فایل، به تعدادی فایل با پسوندهای shp، shx و dbf خواهیم رسید.
فایلهای shp بیانگر فرمت اشکال ذخیره شده هستند. فایلهای shx یک سری ایندکس بوده و فایلهای dbf از نوع بانک اطلاعاتی dBase IV میباشند.
همچنین اگر فایلهای prj را باز کنید، یک چنین اطلاعاتی در آن موجودند:
GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]
خواندن فایلهای shp در دات نت
پس از دریافت فایلهای shp و بانکهای اطلاعاتی مرتبط با اطلاعات جغرافیایی ایران، اکنون نوبت به پردازش این فایلهای مخصوص با فرمت بانک اطلاعاتی فاکس پرو مانند، رسیدهاست. برای این منظور میتوان از پروژهی سورس باز ذیل استفاده کرد:
این پروژه در خواندن فایلهای shp بدون نقص عمل میکند اما توانایی خواندن نامهای فارسی وارد شده در این نوع بانکهای اطلاعاتی را ندارد. برای رفع این مشکل، سورس آن را از Codeplex دریافت کنید. سپس فایل Shapefile.cs را گشوده و ابتدای خاصیت Current آنرا به نحو ذیل تغییر دهید:
/// <summary> /// Gets the current shape in the collection /// </summary> public Shape Current { get { if (_disposed) throw new ObjectDisposedException("Shapefile"); if (!_opened) throw new InvalidOperationException("Shapefile not open."); // get the metadata StringDictionary metadata = null; if (!RawMetadataOnly) { metadata = new StringDictionary(); for (int i = 0; i < _dbReader.FieldCount; i++) { string value = _dbReader.GetValue(i).ToString(); if (_dbReader.GetDataTypeName(i) == "DBTYPE_WVARCHAR") { // برای نمایش متون فارسی نیاز است value = Encoding.UTF8.GetString(Encoding.GetEncoding(720).GetBytes(value)); } metadata.Add(_dbReader.GetName(i), value); } }
using System.Collections.Generic; using System.Linq; using Catfood.Shapefile; namespace EFGeoTests { public class MapPoint { public Dictionary<string, string> Metadata { set; get; } public double X { set; get; } public double Y { set; get; } } public static class ShapeReader { public static IList<MapPoint> ReadShapeFile(string path) { var results = new List<MapPoint>(); using (var shapefile = new Shapefile(path)) { foreach (var shape in shapefile) { if (shape.Type != ShapeType.Point) continue; var shapePoint = shape as ShapePoint; if (shapePoint == null) continue; var metadataNames = shape.GetMetadataNames(); if(!metadataNames.Any()) continue; var metadata = new Dictionary<string, string>(); foreach (var metadataName in metadataNames) { metadata.Add(metadataName,shape.GetMetadata(metadataName)); } results.Add(new MapPoint { Metadata = metadata, X = shapePoint.Point.X, Y = shapePoint.Point.Y }); } } return results; } } }
افزودن اطلاعات جغرافیایی به بانک اطلاعاتی SQL Server به کمک Entity framework
فایل places.shp را در مجموعه فایلهایی که در ابتدای بحث عنوان شدند، میتوانید مشاهده کنید. قصد داریم اطلاعات نقاط آنرا به مدل GeoLocation انتساب داده و سپس ذخیره کنیم:
var points = ShapeReader.ReadShapeFile("IranShapeFiles\\places.shp"); using (var context = new MyContext()) { context.Configuration.AutoDetectChangesEnabled = false; context.Configuration.ProxyCreationEnabled = false; context.Configuration.ValidateOnSaveEnabled = false; if (context.GeoLocations.Any()) return; foreach (var point in points) { context.GeoLocations.Add(new GeoLocation { Name = point.Metadata["name"], Type = point.Metadata["type"], Location = createPoint(point.X, point.Y) }); } context.SaveChanges(); }
در فایلهای مرتبط با places.shp، متادیتا name، معادل نام شهرهای ایران است و type آن بیانگر شهر، روستا و امثال آن میباشد.
پس از اینکه اطلاعات مکانهای ایران، در SQL Server ذخیره شدند، نمایش بصری آنها را در management studio نیز میتوان مشاهده کرد:
کوئری گرفتن از اطلاعات جغرافیایی
فرض کنید میخواهیم مکانهایی را با فاصله کمتر از 5 کیلومتر از تهران پیدا کنیم:
var tehran = createPoint(51.4179604, 35.6884243); using (var context = new MyContext()) { // find any locations within 5 kilometers ordered by distance var locations = context.GeoLocations .Where(loc => loc.Location.Distance(tehran) < 5000) .OrderBy(loc => loc.Location.Distance(tehran)) .ToList(); foreach (var location in locations) { Console.WriteLine(location.Name); } }
و یا اگر بخواهیم دقیقا بر اساس مختصات یک نقطه، مکانی را بیابیم، میتوان از متد SpatialEquals استفاده کرد:
var tehran = createPoint(51.4179604, 35.6884243); using (var context = new MyContext()) { // find any locations within 5 kilometers ordered by distance var tehranLocation = context.GeoLocations.FirstOrDefault(loc => loc.Location.SpatialEquals(tehran)); if (tehranLocation != null) { Console.WriteLine(tehranLocation.Type); } }
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید:
EFGeoTests.zip
پیشنیازها
تهیه گزارشات Crosstab به کمک LINQ
تهیه گزارشات Crosstab به کمک LINQ - قسمت دوم
در دنیای واقعی، تهیه گزارشات به سادگی که در اکثر نرم افزارهای گزارش ساز موجود پیش بینی شده است، نیست. در این نوع نرم افزارها، بر اساس یک طراح بصری، تعدادی ستون مشخص، ایجاد شده، منبع دادهای به این ستونها متصل و نهایتا گزارش تهیه میشود. اما اگر همین گزارش دارای تعداد ستونهای متغیری باشد، اغلب این برنامهها ناکارآمد خواهند بود. برای مثال لیست حضور و غیاب دانش آموزان را درنظر بگیرید.
اگر معلمی بخواهد سه روز در هفته را گزارش بگیرد، گزارش نیاز به سه ستون خواهد داشت. اگر 20 روز قبل مد نظر باشد، 20 ستون و همینطور الی آخر.
یا نمونهی دیگری از این دست، گزارش حضور و غیاب پرسنل است. در اینجا بر اساس تعداد باری که شخص کارت میزند، ورود و خروج او محاسبه میشود. این مورد هم تعداد ثابتی نیست. ممکن است یک نفر 8 بار در طول روز کارت بزند، یک نفر فقط دو بار. به علاوه جمع ساعات هم اینجا دیگر عددی نیست و نیاز به فرمول خاصی دارد.
روش حل این نوع مسایل را در PdfReport در مثالهای جدید ذیل میتوانید مشاهده کنید:
1) DynamicCrosstab (یک گزارش Crosstab با تعداد ستون متغیر)
2) WorkedHours (یک گزارش Crosstab با تعداد ستون متغیر به علاوه تابع تجمعی سفارشی محاسبه جمع ساعات اشخاص)
3) ExtraHeadingCells (یک گزارش Crosstab به همراه ردیفهای header اضافی و نحوه تعریف آن)
4) ExpensesCrosstab (یک گزارش Crosstab کلاسیک)
5) PdfA (یک گزارش Crosstab که به صورت استاندارد PdfA تهیه شده است. PdfA حالت خاصی از استاندارد PDF است که برای مستند سازی عموما مورد استفاده قرار میگیرد. رمزنگاری اطلاعات در آن ممنوع است. تصاویر بکارگرفته شده نباید شفاف باشند. قلمهای مورد استفاده حتما باید در فایل مدفون شوند و مواردی از این دست)
تهیه گزارشات Crosstab به کمک LINQ
تهیه گزارشات Crosstab به کمک LINQ - قسمت دوم
در دنیای واقعی، تهیه گزارشات به سادگی که در اکثر نرم افزارهای گزارش ساز موجود پیش بینی شده است، نیست. در این نوع نرم افزارها، بر اساس یک طراح بصری، تعدادی ستون مشخص، ایجاد شده، منبع دادهای به این ستونها متصل و نهایتا گزارش تهیه میشود. اما اگر همین گزارش دارای تعداد ستونهای متغیری باشد، اغلب این برنامهها ناکارآمد خواهند بود. برای مثال لیست حضور و غیاب دانش آموزان را درنظر بگیرید.
اگر معلمی بخواهد سه روز در هفته را گزارش بگیرد، گزارش نیاز به سه ستون خواهد داشت. اگر 20 روز قبل مد نظر باشد، 20 ستون و همینطور الی آخر.
یا نمونهی دیگری از این دست، گزارش حضور و غیاب پرسنل است. در اینجا بر اساس تعداد باری که شخص کارت میزند، ورود و خروج او محاسبه میشود. این مورد هم تعداد ثابتی نیست. ممکن است یک نفر 8 بار در طول روز کارت بزند، یک نفر فقط دو بار. به علاوه جمع ساعات هم اینجا دیگر عددی نیست و نیاز به فرمول خاصی دارد.
روش حل این نوع مسایل را در PdfReport در مثالهای جدید ذیل میتوانید مشاهده کنید:
1) DynamicCrosstab (یک گزارش Crosstab با تعداد ستون متغیر)
2) WorkedHours (یک گزارش Crosstab با تعداد ستون متغیر به علاوه تابع تجمعی سفارشی محاسبه جمع ساعات اشخاص)
3) ExtraHeadingCells (یک گزارش Crosstab به همراه ردیفهای header اضافی و نحوه تعریف آن)
4) ExpensesCrosstab (یک گزارش Crosstab کلاسیک)
5) PdfA (یک گزارش Crosstab که به صورت استاندارد PdfA تهیه شده است. PdfA حالت خاصی از استاندارد PDF است که برای مستند سازی عموما مورد استفاده قرار میگیرد. رمزنگاری اطلاعات در آن ممنوع است. تصاویر بکارگرفته شده نباید شفاف باشند. قلمهای مورد استفاده حتما باید در فایل مدفون شوند و مواردی از این دست)
بله. پارامتر rowObject یک آرایه از مقادیر ستونهای ردیف جاری است. یک مثال: «فرمت کردن اطلاعات نمایش داده شده به کمک jqGrid در ASP.NET MVC»
اگر ViewModel را همان فایل code behind عاری از ارجاعاتی به اشیاء بصری بدانیم، یک تفاوت مهم را علاوه بر مورد ذکر شده نسبت به Code behind متداول خواهد داشت: وهله سازی آن باید دستی انجام شود و خودکار نیست.
اگر به ابتدای کلاسهای code behind دقت کنید همیشه واژهی partial قابل رویت است، به این معنا که این کلاس در حقیقت جزئی از همان کلاس متناظر با XAML ایی است که مشاهده میکنید؛ یا به عبارتی با آن یکی است. فقط جهت زیبایی یا مدیریت بهتر، در دو کلاس قرار گرفتهاند اما واژه کلیدی partial اینها را نهایتا به صورت یکسان و یکپارچهای به کامپایلر معرفی خواهد کرد. بنابراین وهله سازی code behind هم خودکار خواهد بود و به محض نمایش رابط کاربری، فایل code behind آن هم وهله سازی میشود؛ چون اساسا و در پشت صحنه، از دیدگاه کامپایلر تفاوتی بین این دو وجود ندارد.
اکنون سؤال اینجا است که آیا میتوان با ViewModel ها هم همین وهله سازی خودکار را به محض نمایش یک View متناظر، پیاده سازی کرد؟
البته صحیح آن این است که عنوان شود ViewModel متناظر با یک View و نه برعکس. چون روابط در الگوی MVVM از View به ViewModel به Model است و نه حالت عکس؛ مدل نمیداند که ViewModel ایی وجود دارد. ViewModel هم از وجود View ها در برنامه بیخبر است و این «بیخبریها» اساس الگوهایی مانند MVC ، MVVM ، MVP و غیره هستند. به همین جهت شاعر در وصف ViewModel فرمودهاند که:
ای در درون برنامهام و View از تو بی خبر_________وز تو برنامهام پر است و برنامه از تو بی خبر :)
پاسخ:
بله. برای این منظور الگوی دیگری به نام ViewModel Locator طراحی شده است؛ روشهای زیادی برای پیاده سازی این الگو وجود دارند که سادهترین آنها مورد زیر است:
فرض کنید ViewModel ساده زیر را قصد داریم به کمک الگوی ViewModel Locator به View ایی تزریق کنیم:
namespace WpfViewModelLocator.ViewModels
{
public class MainWindowViewModel
{
public string SomeText { set; get; }
public MainWindowViewModel()
{
SomeText = "Data ...";
}
}
}
برای این منظور ابتدا کلاس ViewModelLocatorBase زیر را تدارک خواهیم دید:
using WpfViewModelLocator.ViewModels;
namespace WpfViewModelLocator.ViewModelLocator
{
public class ViewModelLocatorBase
{
public MainWindowViewModel MainWindowVm
{
get { return new MainWindowViewModel(); }
}
}
}
در اینجا یک وهله از کلاس MainWindowViewModel توسط خاصیتی به نام MainWindowVm در دسترس قرار خواهد گرفت. برای اینکه بتوان این کلاس را در تمام Viewهای برنامه قابل دسترسی کنیم، آنرا در App.Xaml تعریف خواهیم کرد:
<Application x:Class="WpfViewModelLocator.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vml="clr-namespace:WpfViewModelLocator.ViewModelLocator"
StartupUri="MainWindow.xaml">
<Application.Resources>
<vml:ViewModelLocatorBase x:Key="ViewModelLocatorBase" />
</Application.Resources>
</Application>
اکنون فقط کافی است در View خود DataContext را به نحو زیر مقدار دهی کنیم تا در زمان اجرا به صورت خودکار بتوان به خاصیت MainWindowVm یاد شده دسترسی یافت:
<Window x:Class="WpfViewModelLocator.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid DataContext="{Binding Path=MainWindowVm, Source={StaticResource ViewModelLocatorBase}}">
<TextBlock Text="{Binding SomeText}" VerticalAlignment="Top" Margin="5" />
</Grid>
</Window>
در مورد ViewModel ها و Viewهای دیگر هم به همین ترتیب خواهد بود. یک وهله از آنها به کلاس ViewModelLocatorBase اضافه میشود. سپس Binding Path مرتبط به DataContext به نام خاصیتی که در کلاس ViewModelLocatorBase مشخص خواهیم کرد، Bind خواهد شد.
روش دوم:
اگر در اینجا بخواهیم Path را حذف کنیم و فقط دسترسی عمومی به ViewModelLocatorBase را ذکر کنیم، باید یک Converter نوشت (چون به این ترتیب میتوان به اطلاعات Binding در متد Convert دسترسی یافت). سپس یک قرار داد را هم تعریف خواهیم کرد؛ به این صورت که ما در Converter به نام View دسترسی پیدا میکنیم (از طریق ریفلکشن). سپس نام viewModel ایی را که باید به دنبال آن گشت مثلا ViewName به علاوه کلمه ViewModel در نظر خواهیم گرفت. در حقیقت یک نوع Convection over configuration است:
using System;
using System.Globalization;
using System.Linq;
using System.Windows.Data;
namespace WpfViewModelLocator.ViewModelLocator
{
public class ViewModelLocatorBaseConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
//مقدار در اینجا همان مشخصات ویوو است
if (value == null) return null;
string viewTypeName = value.GetType().Name;
//قرار داد ما است
//ViewModel Name = ViewName + "ViewModel"
string viewModelName = string.Concat(viewTypeName, "ViewModel");
//یافتن اسمبلی که حاوی ویوو مدل ما است
var asms = AppDomain.CurrentDomain.GetAssemblies();
var viewModelAsmName = "WpfViewModelLocator"; //نام پروژه مرتبط
var viewModelAsm = asms.Where(x => x.FullName.Contains(viewModelAsmName)).First();
//یافتن این کلاس ویوو مدل مرتبط
var viewModelType = viewModelAsm.GetTypes().Where(x => x.FullName.Contains(viewModelName)).FirstOrDefault();
if (viewModelType == null)
throw new InvalidOperationException(string.Format("Could not find view model '{0}'", viewModelName));
//وهله سازی خودکار آن
return Activator.CreateInstance(viewModelType);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
کار این تبدیلگر بسیار ساده و واضح است. Value دریافتی، وهلهای از view است. پس به این ترتیب میتوان نام آنرا یافت. سپس قرارداد ویژه خودمان را اعمال میکنیم به این ترتیب که ViewModel Name = ViewName + "ViewModel" و سپس به دنبال اسمبلی که حاوی این نام است خواهیم گشت. آنرا یافته، کلاس مرتبط را در آن پیدا میکنیم و در آخر، به صورت خودکار آنرا وهله سازی خواهیم کرد.
اینبار تعریف عمومی این Conveter در فایل App.Xaml به صورت زیر خواهد بود:
<Application x:Class="WpfViewModelLocator.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vml="clr-namespace:WpfViewModelLocator.ViewModelLocator"
StartupUri="MainWindow.xaml">
<Application.Resources>
<vml:ViewModelLocatorBaseConverter x:Key="ViewModelLocatorBaseConverter" />
</Application.Resources>
</Application>
و استفادهی آن در تمام View های برنامه به شکل زیر میباشد (بدون نیاز به ذکر هیچ نام خاصی و بدون نیاز به کلاس ViewModelLocatorBase یاد شده در ابتدای مطلب):
<Window x:Class="WpfViewModelLocator.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
DataContext="{Binding RelativeSource={RelativeSource Self},
Converter={StaticResource ViewModelLocatorBaseConverter}}"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TextBlock Text="{Binding SomeText}" VerticalAlignment="Top" Margin="5" />
</Grid>
</Window>
مطالب
آشنایی با الگوی MVP
پروژههای زیادی را میتوان یافت که اگر سورس کدهای آنها را بررسی کنیم، یک اسپاگتی کد تمام عیار را در آنها میتوان مشاهده نمود. منطق برنامه، قسمت دسترسی به دادهها، کار با رابط کاربر، غیره و غیره همگی درون کدهای یک یا چند فرم خلاصه شدهاند و آنچنان به هم گره خوردهاند که هر گونه تغییر یا اعمال درخواستهای جدید کاربران، سبب از کار افتادن قسمت دیگری از برنامه میشود.
همچنین از کدهای حاصل در یک پروژه، در پروژههای دیگر نیز نمیتوان استفاده کرد (به دلیل همین در هم تنیده بودن قسمتهای مختلف). حداقل نتیجه یک پروژه برای برنامه نویس، باید یک یا چند کلاس باشد که بتوان از آن به عنوان ابزار تسریع انجام پروژههای دیگر استفاده کرد. اما در یک اسپاگتی کد، باید مدتی طولانی را صرف کرد تا بتوان یک متد را از لابلای قسمتهای مرتبط و گره خورده با رابط کاربر استخراج و در پروژهای دیگر استفاده نمود. برای نمونه آیا میتوان این کدها را از یک برنامه ویندوزی استخراج کرد و آنها را در یک برنامه تحت وب استفاده نمود؟
یکی از الگوهایی که شیوهی صحیح این جدا سازی را ترویج میکند، الگوی MVP یا Model-View-Presenter میباشد. خلاصهی این الگو به صورت زیر است:
Model :
من میدانم که چگونه اشیاء برنامه را جهت حصول منطقی خاص، پردازش کنم.
من نمیدانم که چگونه باید اطلاعاتی را به شکلی بصری به کاربر ارائه داد یا چگونه باید به رخدادها یا اعمال صادر شده از طرف کاربر پاسخ داد.
View :
من میدانم که چگونه باید اطلاعاتی را به کاربر به شکلی بصری ارائه داد.
من میدانم که چگونه باید اعمالی مانند data binding و امثال آن را انجام داد.
من نمیدانم که چگونه باید منطق پردازشی موارد ذکر شده را فراهم آورم.
Presenter :
من میدانم که چگونه باید درخواستهای رسیده کاربر به View را دریافت کرده و آنها را به Model انتقال دهم.
من میدانم که چگونه باید اطلاعات را به Model ارسال کرده و سپس نتیجهی پردازش آنها را جهت نمایش در اختیار View قرار دهم.
من نمیدانم که چگونه باید اطلاعاتی را ترسیم کرد (مشکل View است نه من) و نمیدانم که چگونه باید پردازشی را بر روی اطلاعات انجام دهم. (مشکل Model است و اصلا ربطی به اینجانب ندارد!)
یک مثال ساده از پیاده سازی این روش
برنامهای وبی را بنویسید که پس از دریافت شعاع یک دایره از کاربر، مساحت آنرا محاسبه کرده و نمایش دهد.
یک تکست باکس در صفحه قرار خواهیم داد (txtRadius) و یک دکمه جهت دریافت درخواست کاربر برای نمایش نتیجه حاصل در یک برچسب به نام lblResult
الف) پیاده سازی به روش متداول (اسپاگتی کد)
protected void btnGetData_Click(object sender, EventArgs e)
{
lblResult.Text = (Math.PI * double.Parse(txtRadius.Text) * double.Parse(txtRadius.Text)).ToString();
}
اما این مشکلات را هم دارد:
- منطق برنامه (روش محاسبه مساحت دایره) با رابط کاربر گره خورده.
- کدهای برنامه در پروژهی دیگری قابل استفاده نیست. (شما متد یا کلاسی را اینجا با قابلیت استفاده مجدد میتوانید پیدا میکنید؟ آیا یکی از اهداف برنامه نویسی شیءگرا تولید کدهایی با قابلیت استفاده مجدد نبود؟)
- چگونه باید برای آن آزمون واحد نوشت؟
ب) بهبود کد و جدا سازی لایهها از یکدیگر
در روش MVP متداول است که به ازای هر یک از اجزاء ابتدا یک interface نوشته شود و سپس این اینترفیسها پیاده سازی گردد.
پیاده سازی منطق برنامه:
1- ایجاد Model :
یک فایل جدید را به نام CModel.cs به پروژه اضافه کرده و کد زیر را به آن خواهیم افزود:
using System;
namespace MVPTest
{
public interface ICircleModel
{
double GetArea(double radius);
}
public class CModel : ICircleModel
{
public double GetArea(double radius)
{
return Math.PI * radius * radius;
}
}
}
- خبری از textbox و برچسب و غیره نیست. اصلا نمیداند که رابط کاربری وجود دارد یا نه.
- خبری از رخدادهای برنامه و پاسخ دادن به آنها نیست.
- از این کد میتوان مستقیما و بدون هیچ تغییری در برنامههای دیگر هم استفاده کرد.
- اگر باگی در این قسمت وجود دارد، تنها این کلاس است که باید تغییر کند و بلافاصله کل برنامه از این بهبود حاصل شده میتواند بدون هیچگونه تغییری و یا به هم ریختگی استفاده کند.
- نوشتن آزمون واحد برای این کلاس که هیچگونه وابستگی به UI ندارد ساده است.
2- ایجاد View :
فایل دیگری را به نام CView.cs را به همراه اینترفیس زیر به پروژه اضافه میکنیم:
namespace MVPTest
{
public interface IView
{
string RadiusText { get; set; }
string ResultText { get; set; }
}
}
کار View دریافت ابتدایی مقادیر از کاربر توسط RadiusText و نمایش نهایی نتیجه توسط ResultText است البته با یک اما.
View نمیداند که چگونه باید این پردازش صورت گیرد. حتی نمیداند که چگونه باید این مقادیر را به Model جهت پردازش برساند یا چگونه آنها را دریافت کند (به همین جهت از اینترفیس برای تعریف آن استفاده شده).
3- ایجاد Presenter :
در ادامه فایل جدیدی را به نام CPresenter.cs با محتویات زیر به پروژه خواهیم افزود:
namespace MVPTest
{
public class CPresenter
{
IView _view;
public CPresenter(IView view)
{
_view = view;
}
public void CalculateCircleArea()
{
CModel model = new CModel();
_view.ResultText = model.GetArea(double.Parse(_view.RadiusText)).ToString();
}
}
}
کار این کلاس برقراری ارتباط با Model است.
میداند که چگونه اطلاعات را به Model ارسال کند (از طریق _view.RadiusText) و میداند که چگونه نتیجهی پردازش را در اختیار View قرار دهد. (با انتساب آن به _view.ResultText)
نمیداند که چگونه باید این پردازش صورت گیرد (کار مدل است نه او). نمیداند که نتیجهی نهایی را چگونه نمایش دهد (کار View است نه او).
روش معرفی View به این کلاس به constructor dependency injection معروف است.
اکنون کد وب فرم ما که در قسمت (الف) معرفی شده به صورت زیر تغییر میکند:
using System;
namespace MVPTest
{
public partial class _Default : System.Web.UI.Page, IView
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string RadiusText
{
get { return txtRadius.Text; }
set { txtRadius.Text = value; }
}
public string ResultText
{
get { return lblResult.Text; }
set { lblResult.Text = value; }
}
protected void btnGetData_Click(object sender, EventArgs e)
{
CPresenter presenter = new CPresenter(this);
presenter.CalculateCircleArea();
}
}
}
در اینجا یک وهله از Presenter برای برقراری ارتباط با Model ایجاد میشود. همچنین کلاس وب فرم ما اینترفیس View را نیز پیاده سازی خواهد کرد.
در قسمت قبل توضیحاتی در مورد تب HTML ارائه کردیم.
Panel
Context Menu
این منو زمانی که در پنل راست کلیک کنید ظاهر میشود و نسبت به منطقه (Context)ای که در آن راست کلیک کرده اید ، گزینههای متفاوتی را مشاهده خواهید کرد. در جدول زیر ، گزینهها ، Contextشان و توضیح هر گزینه آمده است.
2 - Computed
دراین تب نتیجهی پردازش استایلهای ارائه شده توسط کاربر ، برای تگ مشخص شده در قسمت NodeView نمایش داده میشود. (مقادیر استایل هایی که در نهایت بروی تگ اعمال شده اند.)
Style Tracing
برای ردیابی استایلها ، استایلها به ترتیب اعمال شدنشان مرتب شده اند و اولین مقدار ، مقداری است که اعمال شده است.
مقادیر Overwrite بصورت خط کشیده شده و استایلهای Overwrite شده بصورت خاکستری-کمرنگ نمایش داده میشوند.
هر استایل هم مانند تب Style ، یک لینک به منبع خود دارد.
Options Menu
Context Menu
این منو زمانی که در پنل راست کلیک کنید ظاهر میشود و نسبت به منطقه (Context)ای که در آن راست کلیک کرده اید ، گزینههای متفاوتی را مشاهده خواهید کرد. در جدول زیر ، گزینهها ، Contextشان و توضیح هر گزینه آمده است.
3 - Layout
در این تب ، مقادیر Box Model بصورت بصری نمایش میدهد. میتوان با کلیک کردن بروی هریک از مقادیر ، آن را ویرایش کرد. (این تغییر بصورت inline در تگ اعمال میشود.)
با حرکت موس بروی قسمتهای مختلف ، میتوان همان قسمتها را در صفحه بصورت خط کشی شده مشاهده کرد.
(البته ظاهرا در ورژن 1.10.4 که بنده استفاده میکنم ، عملیات ویرایش مقادیر به درستی انجام نمیشود.)
Options Menu
4 - DOM
این پنل اطلاعات DOM تگ جاری را نمایش میدهد.
این پنل تمام قابلیتهای پنل DOM اصلی را دارا میباشد.
(در مقالات آینده با تب DOM آشنا خواهیم شد.)
در این قسمت توضیحات کاملی در مورد پنلهای جانبیِ داخل پنل HTML میدهیم.
Side Panels
در پنل HTML درکنار ارائه امکاناتی برای مشاهده و کار با تگهای صفحه ، اطلاعات و امکانات دیگری هم برای تگ انتخاب شده در قسمت NodeView وجود دارد.
Side Panels
در پنل HTML درکنار ارائه امکاناتی برای مشاهده و کار با تگهای صفحه ، اطلاعات و امکانات دیگری هم برای تگ انتخاب شده در قسمت NodeView وجود دارد.
این امکانات در پنل هایی که سمت راست پنل اصلی قرار دارند گنجانده شده است که به ترتیب برای نمایش و ویرایش استایلها ، مشاهده استایلهای محاسبه شده ، مشاهده Layout یا آرایش و نمایش اطلاعات DOM تگ انتخاب شده در NodeView هستند.
1 - Style
در این تب استایل هایی که در حال حاظر بروی تگ انتخاب شده اعمال شده اند ، نمایش داده میشود.
در صورتی که موس را بروی مقادیر استایل هایی که جلوهی بصری دارند بگیرید ، یک پاپآپ کوچک نمایان میشود که مقدار را نمایش میدهد.
Options Menu
هر تب یا پنل در فایرباگ دارای یک سری تنظیمات است که Options Menu نام دارد. تب Style هم دارای یک سری تنظیمات است که دانشتن آنها بسیار به شما کمک خواهد کرد.
این منو با کلیک کردن بروی فلش تب () یا راست کلیک کردن بروی تب ظاهر میشود.
در این تب استایل هایی که در حال حاظر بروی تگ انتخاب شده اعمال شده اند ، نمایش داده میشود.
در صورتی که موس را بروی مقادیر استایل هایی که جلوهی بصری دارند بگیرید ، یک پاپآپ کوچک نمایان میشود که مقدار را نمایش میدهد.
Options Menu
هر تب یا پنل در فایرباگ دارای یک سری تنظیمات است که Options Menu نام دارد. تب Style هم دارای یک سری تنظیمات است که دانشتن آنها بسیار به شما کمک خواهد کرد.
این منو با کلیک کردن بروی فلش تب () یا راست کلیک کردن بروی تب ظاهر میشود.
- Only Show Applied Styles
در صورت انتخاب ، فقط استایل هایی که اعمال شده اند نمایش داده میشوند. (استایلهای Overwrite شده نمایش داده نمیشوند.)
(این گزینه قابلیت خوبی است ، اما چندبار برای بنده پیش آمده که این مورد به اشتباه استایلی که اعمال شده بود را هم Overwrite شده در نظر گرفته بود. پس در هین طراحی استایل و کار با CSS اگر احیانا یکی از استایل هایتان وجود نداشت و از وجود آن اطمینان داشتید ، غیرفعال کردن این گزینه را امتحان کنید.)
- Show User Agent CSS
با فعال کردن این گزینه ، استایل هایی که توسط مرورگر اعمال شده اند هم نمایش داده میشوند.
- Expand Shorthand Properties
با فعال کردن این گزینه ، استایل هایی که بصورت کوتاه شده تعریف شده اند را بصورت گسترده و باز شده نمایش میدهد.
برای مثال ، دستور margin را بصورت margin-top , margin-right , margin-bottom , margin-left نمایش میدهد.
- سه گزینه ی Colors As Hex ، Colors As RGB و Colors As HSL تعیین کنندهی فرمت نمایش رنگها هستند.
- سه گزینه ی :active ، :hover و :focus هم برای تعیین کلاس کاذب برای تگ جاری کاربرد دارند.
برای مثال شما میخواهید استایلی که یک لینک زمان موس برویش قرار دارد را بررسی کنید ، لینک را در NodeView انتخاب میکنید و سپس از گزینهی :hover را فعال میکنید.
Panel
- Element styles
استایل هایی که بصورت inline (در خود تگ) تعریف شده اند هم در این قسمت نمایش داده میشود و نام rule آن element.style است.
- Source Links
در بالا-راست هر بخش ، یک لینک قرار دارد که لینک فایل استایلی است که در همان قسمت وجود دارد و عددی که در پرانتز قرار دارد ، شماره خط استایل در همان فایل است.
اگر نام فایل با نام صفحهی جاری برابر باشد ، به معنی وجود استایل در تگ <style> در صفحهی جاری است و شمارهی بعد از # هم ایندکس تگ <style> است.
(با کلیک بروی لینک فایل ، فایل در خط مورد نظر در پنل CSS نمایش داده میشود.)
- Inherited rules
ruleهای به ارث رسیده هم در قسمتهای جداگانه به همراه استایلهای به ارث رسیده نمایش داده میشود و تگی والد که استایلها از آن به ارث رسیده اند هم در قسمت عنوان همان استایلها نمایش قرار داده شده است. (با کلیک بروی آن ، در قسمت Nodeview انتخاب میشود.)
- User agent rules
استایل هایی که توسط مرورگر اعمال شده اند (User agent rules) ، با عبارت <System> در زیر لینک منبع استایل ، مشخص شده اند.
- Overwritten styles
استایلهای overwrite شده ، با یک خط برویشان مشخص شده اند.
- Inline editing
استایلهای نمایش داده شده در این پنل را براحتی و با کلیک کردن بروی نام یا مقدار هر یک از دستورات میتوانید تغییر دهید.
برای نوشتن دستورات و مقادیر آنها میتوانید از پیشنهادهای فایرباگ هم کمک بگیرید و با دکمههای Arrow Up و Arrow Down هم بین مقادیر مجاز حرکت کنید.
دستورات یا مقادیر نا صحیح در هین تایپ ، با رنگ قرمز و مقادیر صحیح با رنگ سبز مشخص میشوند.
(این امکان خیلی مفید است ، برای مثال میخواهید فونتهای مختلف را برای یک استایل امتحان کنید ، دستور font-family را مینویسید و بعد از زدن Enter ، با دکمه های Arrow Up و Arrow Down در لحظه نتیجهی اعمال فونتهای مختلف و دردسترس را مشاهده میکنید و بهترین را بر میگزینید.
یا برای یافتن بهترین مقدار margin ، بعد از دستور margin ، زدن کلید Enter ، وارد کردن یک عدد برای شروع ، میتوان باز هم با دکمه های Arrow Up و Arrow Down به سرعت تغییر را در صفحه مشاهده کرد.)
- Rendered font highlighted
برای دستور font ، فایرباگ هوشمندانه عمل کرده و فونتی که در حال استفاده است را پررنگ میکند.
این امکان برای یافتن خطاهای متداول هنگام تعریف فونتهای غیر سیستمی ، بسیار مفید است.
Context Menu
این منو زمانی که در پنل راست کلیک کنید ظاهر میشود و نسبت به منطقه (Context)ای که در آن راست کلیک کرده اید ، گزینههای متفاوتی را مشاهده خواهید کرد. در جدول زیر ، گزینهها ، Contextشان و توضیح هر گزینه آمده است.
گزینه | Context | توضیحات |
Copy Rule Declaration | CSS selector | CSS Rule فعلی را به همراه استایل هایش در clipboard کپی میکند |
Copy Style Declaration | CSS selector | استایلهای CSS Rule فعلی را در clipboard کپی میکند |
Copy Location | source link | آدرس فایل تعریف CSS Rule را در clipboard کپی میکند |
Open in New Tab | source link | آدرس فایل تعریف CSS Rule را در تب جدید باز میکند |
Edit Element Style... | everywhere | امکان تعریف استایلهای درون تگ (inline) را محیا میکند |
Add Rule... | everywhere | یک Rule جدید ایجاد میکند CSS Rule هایی که در حال حاظر وجود دارد را هم پیشنهاد میدهد |
Delete "<rule name>" | CSS selector | CSS Rule فعلی را حذف میکند |
New Property... | CSS rule | یک استایل جدید به CSS Rule فعلی اضافه میکند |
Edit "<property name>"... | CSS property | Property فعلی را به حالت ویرایش میبرد راه دیگر ویرایش Property ، کلیک بروی آن است |
Delete "<property name>" | CSS property | Property فعلی را حذف میکند |
Disable "<property name>" | CSS property | Property فعلی را غیر فعال میکند را سریعتر ، کلیک کردن در ناحیهی پشت Property ، بروی علامت قرمز رنگ است |
Refresh | everywhere | محتویات پنل را بروز میکند |
Inspect in DOM Panel |
CSS rule | CSS Rule فعلی را در پنل DOM برای بررسی باز میکند |
Inspect in CSS Panel | CSS rule | CSS Rule فعلی را در پنل CSS برای بررسی باز میکند |
<Default Editor Name> | CSS rule | فایل تعریف استایلها را در ادیتور تعریف شده باز میکند (این گزینه در صورت تعریف ادیتور در تنظیمات FireBug نمایش داده خواهد شد) |
2 - Computed
دراین تب نتیجهی پردازش استایلهای ارائه شده توسط کاربر ، برای تگ مشخص شده در قسمت NodeView نمایش داده میشود. (مقادیر استایل هایی که در نهایت بروی تگ اعمال شده اند.)
Style Tracing
برای ردیابی استایلها ، استایلها به ترتیب اعمال شدنشان مرتب شده اند و اولین مقدار ، مقداری است که اعمال شده است.
مقادیر Overwrite بصورت خط کشیده شده و استایلهای Overwrite شده بصورت خاکستری-کمرنگ نمایش داده میشوند.
هر استایل هم مانند تب Style ، یک لینک به منبع خود دارد.
Options Menu
- Show User Agent CSS
در صورت انتخاب ، فقط استایل هایی که اعمال شده اند نمایش داده میشوند.
- Sort alphabetically
در صورت انتخاب ، استایلها به ترتیب الفبا ، و درصورت عدم انتخاب بصورت گروه بندی نمایش داده میشوند.
- Show Mozilla Specific Styles
در صورت انتخاب ، استایلهای مخصوص Mozilla را نمایش میدهد. (استایل هایی با پیشوند -moz-)
- سه گزینهی Colors As Hex ، Colors As RGB و Colors As HSL تعیین کنندهی فرمت نمایش رنگها هستند.
Context Menu
این منو زمانی که در پنل راست کلیک کنید ظاهر میشود و نسبت به منطقه (Context)ای که در آن راست کلیک کرده اید ، گزینههای متفاوتی را مشاهده خواهید کرد. در جدول زیر ، گزینهها ، Contextشان و توضیح هر گزینه آمده است.
گزینه | Context | توضیحات |
Expand All Styles | everywhere | CSS Rule فعلی را به همراه استایل هایش در clipboard کپی میکند |
Collapse All Styles | everywhere | استایلهای CSS Rule فعلی را در clipboard کپی میکند |
Inspect in DOM panel | styles | آدرس فایل تعریف CSS Rule را در تب جدید باز میکند |
Copy Location |
style source link | امکان تعریف استایلهای درون تگ (inline) را محیا میکند |
Open in New Tab | style source link | یک Rule جدید ایجاد میکند CSS Rule هایی که در حال حاظر وجود دارد را هم پیشنهاد میدهد |
Inspect in CSS panel | style source link | CSS Rule فعلی را حذف میکند |
<Default Editor Name> | style source link | فایل تعریف استایلها را در ادیتور تعریف شده باز میکند (این گزینه در صورت تعریف ادیتور در تنظیمات FireBug نمایش داده خواهد شد) |
3 - Layout
در این تب ، مقادیر Box Model بصورت بصری نمایش میدهد. میتوان با کلیک کردن بروی هریک از مقادیر ، آن را ویرایش کرد. (این تغییر بصورت inline در تگ اعمال میشود.)
با حرکت موس بروی قسمتهای مختلف ، میتوان همان قسمتها را در صفحه بصورت خط کشی شده مشاهده کرد.
(البته ظاهرا در ورژن 1.10.4 که بنده استفاده میکنم ، عملیات ویرایش مقادیر به درستی انجام نمیشود.)
Options Menu
- Show Rulers and Guides
در صورت انتخاب ، خطهای راهنما را هنگام حرکت موس بروی اجزای Box Model در صفحه نمایش میدهد.
4 - DOM
این پنل اطلاعات DOM تگ جاری را نمایش میدهد.
این پنل تمام قابلیتهای پنل DOM اصلی را دارا میباشد.
(در مقالات آینده با تب DOM آشنا خواهیم شد.)
نظرات مطالب
توسعه سیستم مدیریت محتوای DNTCms - قسمت سوم
اگر آخر هر قسمت نمایش فایل EDMX نهایی را هم قرار بدید (قسمت تهیه خروجی XML از نگاشتهای خودکار تهیه شده)، جالب میشه (با code first هم کار میکنه و یک نمایش بصری از ارتباطات رو میشه سریع مشاهده کرد):
void ExportMappings(DbContext context, string edmxFile) { var settings = new XmlWriterSettings { Indent = true }; using (XmlWriter writer = XmlWriter.Create(edmxFile, settings)) { System.Data.Entity.Infrastructure.EdmxWriter.WriteEdmx(context, writer); } }