کم هزینهترین روش: جمعها رو سمت کلاینت مدیریت کنید و اصلا اطلاعات جمع آنها رو سمت سرور ثبت نکنید. زمانیکه این TreeView در حال رندر هست، جمع گرههای والد رو بر اساس فرزندان محاسبه و نمایش بدید.
بازخوردهای پروژهها
نمایش ردیف های اضافه در انتهای هر صفحه
سلام ؛
برای این گزارش :
اگر بخواهیم حق بیمه که جزء ستونهای گزارش نیست در همهی صفحات تکرار شود راه حل چیست ؟ در واقع حق بیمه بخشی از هزینه است که به صورت جداگانه قابل محاسبه است اما قرار نیست جزء ستونهای گزارش باشد و باید در هر صفحه تکرار شود .
با تشکر.
در حین بروز استثناهای Entity framework، میتوان توسط ابزارهای Logging متنوعی مانند ELMAH، جزئیات متداول آنها را برای بررسیهای آتی ذخیره کرد. اما این جزئیات فاقد SQL نهایی تولیدی و همچنین پارامترهای ورودی توسط کاربر یا تنظیم شده توسط برنامه هستند. برای اینکه بتوان این جزئیات را نیز ثبت کرد، میتوان یک IDbCommandInterceptor جدید را طراحی کرد.
کلاس EfExceptionsInterceptor
در اینجا نمونهای از یک پیاده سازی اینترفیس IDbCommandInterceptor را مشاهده میکنید. همچنین طراحی یک متد عمومی که میتواند به جزئیات SQL نهایی و پارامترهای آن دسترسی داشته باشد، در اینترفیس IEfExceptionsLogger ذکر شدهاست.
تهیه یک پیاده سازی سفارشی از IEfExceptionsLogger توسط ELMAH
اکنون که ساختار کلی IDbCommandInterceptor سفارشی برنامه مشخص شد، میتوان پیاده سازی خاصی از آنرا جهت استفاده از ELMAH به نحو ذیل ارائه داد:
در اینجا شیء Command به همراه SQL نهایی تولید و پارامترهای مرتبط است. همچنین interceptionContext.OriginalException جزئیات عمومی استثنای رخ داده را به همراه دارد. میتوان این اطلاعات را پس از اندکی نظم بخشیدن، به متد Raise مربوط به ELMAH ارسال کرد تا جزئیات بیشتری از استثنای رخ داده شده، در لاگهای آن ظاهر شوند.
استفاده از ElmahEfExceptionsLogger جهت طراحی یک Interceptor عمومی
برای استفاده از ElmahEfExceptionsLogger و تهیه یک Interceptor عمومی، میتوان با ارث بری از کلاس Interceptor ابتدای بحث شروع کرد و وهلهای از ElmahEfExceptionsLogger را به سازندهی آن تزریق نمود (یکی از چندین روش ممکن). سپس برای استفاده از آن کافی است به ابتدای متد Application_Start فایل Global.asax.cs مراجعه و در ادامه سطر ذیل را اضافه نمود:
پس از آن جزئیات کلیه استثناهای EF در لاگهای نهایی ELMAH به نحو ذیل ظاهر خواهند شد:
کدهای کامل این پروژه را از اینجا میتوانید دریافت کنید:
ElmahEFLogger
کلاس EfExceptionsInterceptor
در اینجا نمونهای از یک پیاده سازی اینترفیس IDbCommandInterceptor را مشاهده میکنید. همچنین طراحی یک متد عمومی که میتواند به جزئیات SQL نهایی و پارامترهای آن دسترسی داشته باشد، در اینترفیس IEfExceptionsLogger ذکر شدهاست.
public interface IEfExceptionsLogger { void LogException<TResult>(DbCommand command, DbCommandInterceptionContext<TResult> interceptionContext); } using System.Data.Common; using System.Data.Entity.Infrastructure.Interception; namespace ElmahEFLogger { public class EfExceptionsInterceptor : IDbCommandInterceptor { private readonly IEfExceptionsLogger _efExceptionsLogger; public EfExceptionsInterceptor(IEfExceptionsLogger efExceptionsLogger) { _efExceptionsLogger = efExceptionsLogger; } public void NonQueryExecuted(DbCommand command, DbCommandInterceptionContext<int> interceptionContext) { _efExceptionsLogger.LogException(command, interceptionContext); } public void NonQueryExecuting(DbCommand command, DbCommandInterceptionContext<int> interceptionContext) { _efExceptionsLogger.LogException(command, interceptionContext); } public void ReaderExecuted(DbCommand command, DbCommandInterceptionContext<DbDataReader> interceptionContext) { _efExceptionsLogger.LogException(command, interceptionContext); } public void ReaderExecuting(DbCommand command, DbCommandInterceptionContext<DbDataReader> interceptionContext) { _efExceptionsLogger.LogException(command, interceptionContext); } public void ScalarExecuted(DbCommand command, DbCommandInterceptionContext<object> interceptionContext) { _efExceptionsLogger.LogException(command, interceptionContext); } public void ScalarExecuting(DbCommand command, DbCommandInterceptionContext<object> interceptionContext) { _efExceptionsLogger.LogException(command, interceptionContext); } } }
تهیه یک پیاده سازی سفارشی از IEfExceptionsLogger توسط ELMAH
اکنون که ساختار کلی IDbCommandInterceptor سفارشی برنامه مشخص شد، میتوان پیاده سازی خاصی از آنرا جهت استفاده از ELMAH به نحو ذیل ارائه داد:
using System; using System.Data.Common; using System.Data.Entity.Infrastructure.Interception; using Elmah; namespace ElmahEFLogger.CustomElmahLogger { public class ElmahEfExceptionsLogger : IEfExceptionsLogger { /// <summary> /// Manually log errors using ELMAH /// </summary> public void LogException<TResult>(DbCommand command, DbCommandInterceptionContext<TResult> interceptionContext) { var ex = interceptionContext.OriginalException; if (ex == null) return; var sqlData = CommandDumper.LogSqlAndParameters(command, interceptionContext); var contextualMessage = string.Format("{0}{1}OriginalException:{1}{2} {1}", sqlData, Environment.NewLine, ex); if (!string.IsNullOrWhiteSpace(contextualMessage)) { ex = new Exception(contextualMessage, new ElmahEfInterceptorException(ex.Message)); } try { ErrorSignal.FromCurrentContext().Raise(ex); } catch { ErrorLog.GetDefault(null).Log(new Error(ex)); } } } }
استفاده از ElmahEfExceptionsLogger جهت طراحی یک Interceptor عمومی
public class ElmahEfInterceptor : EfExceptionsInterceptor { public ElmahEfInterceptor() : base(new ElmahEfExceptionsLogger()) { } }
DbInterception.Add(new ElmahEfInterceptor());
پس از آن جزئیات کلیه استثناهای EF در لاگهای نهایی ELMAH به نحو ذیل ظاهر خواهند شد:
کدهای کامل این پروژه را از اینجا میتوانید دریافت کنید:
ElmahEFLogger
وقتی که در حال ساخت یک وب سایت میباشید با مشکلات و باگهای اینترنت اکسپلورر به احتمال زیاد برخورد داشتهاید. یکی از این مشکلات باگی است که اینترنت اکسپلورر در محاسبه عرض (width) یک box دارد.
محاسبه عرض یک box در اینترنت اکسپلورر 6 به صورت زیر است:
این در حالی است که روش استاندارد محاسبه عرض یک box به صورت زیر است:
برای رفع این مشکل چندین روش وجود دارد. اما به نظر من بهترین روش قرار دادن تگ زیر در ابتدای صفحه است:
محاسبه عرض یک box در اینترنت اکسپلورر 6 به صورت زیر است:
این در حالی است که روش استاندارد محاسبه عرض یک box به صورت زیر است:
برای رفع این مشکل چندین روش وجود دارد. اما به نظر من بهترین روش قرار دادن تگ زیر در ابتدای صفحه است:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
تعریف: Constant فیلدی است که مقدار آن در زمان کامپایل (Compile time) مشخص میشود و این مقدار هیچگاه نمیتواند تغییر کند (ثابت است). از کلمه کلیدی (Keyword) ، const برای تعریف یک constant استفاده میشود.
تعاریف اولیه : Constant Field : فیلد ثابتی که مستقیما در یک Class و یا Struct تعریف میشود.
Constant Local : ثابتی که در بلاکهای برنامه (بدنه یک تابع ، حلقه تکرار و ...) تعریف میشود.
همهی انواع درون ساخت (Built in) در زبان #C مانند (انواع عددی، بولین، کاراکتر، رشته و نوعهای شمارشی) و اشارهگرهای تهی (null reference) میتوانند بصورت constant تعریف شوند. باید توجه داشت که عبارت تعریف و مقدار دهی یک constant (ثابت) باید بصورتی باشد که در زمان کامپایل کاملا قابل ارزیابی باشد.
جدول مقایسهای بین Const و ReadOnly
Constant | ReadOnly |
میتواند به Fieldها و همچنین localها اعمال شود. | تنها به Field ها اعمال میشود. |
مقدار دهی اولیه آن الزامی است. | مقدار دهی اولیه میتواند هنگام تعریف و یا در درون سازنده انجام شود (در هیچ متد دیگری امکان پذیر نیست). |
تخصیص حافظه انجام نمیشود و مقدار آن در کدهای IL گنجانده میشود (توضیح در ادامه مطلب). | تخصیص حافظه بصورت داینامیک انجام میشود و میتوانیم در زمان اجرا مقدار آن را بدست آوریم. |
ثابتها در #C بصورت پیش فرض از نوع static هستند. بدین معنا که از طریق نام کلاس قابل دسترسی هستند. | تنها از طریق وهله سازی از یک کلاس قابل دسترسی هستند. |
نوعهای درون ساز (built in) و Null Reference ها را میتوان بصورت const تعریف کرد. Boolean,Char, Byte, SByte, Int16, UInt16, Int32, UInt32, Int64, UInt64, Single, Double, Decimal , string. | مشابه Constant ها |
مقدار آن در طول عمر یک برنامه ثابت است. | مقدار آن میتواند در هنگام فراخوانی سازنده برای وهلههای مختلف متفاوت باشد. |
فیلدهای const را نمیتوان بصورت پارامترهای out و ref استفاده کرد. | فیلدهای ReadOnly را میتوان بصورت پارامترهای ref و out در درون سازنده استفاده کرد. |
نحوه تعریف یک constant :
همانطور که در تصویر مشاهده میکنید در کنار نماد انتخابی برای constها یک قفل کوچک (نشان از غیرقابل تغییر بودن) قرار گرفته است .
مثالی از تعریف و رفتار Constantها در #C :
const int field_constant = 10; //constant field static void Main(string[] args) { const int x = 10, y = 15; //constant local :correct const int z = x + y; //constant local : correct; const int a = x + GetVariableValue();//Error } public static int GetVariableValue() { const int localx = 10; return 10; }
در خطوط اول و دوم ارزش متغیرهای x,y,z بدرستی محاسبه و ارزیابی شدهاست. اما در خط سوم تخصیص مقدار برای ثابت a به زمان اجرای برنامه موکول شده است. در نتیجه با بروز خطا مواجه میشویم .
فیلدهای فقط خواندنی ReadOnly
در #C فقط Fieldها را میتوان بصورت ReadOnly تعریف کرد. این فیلدها یا در زمان تعریف و یا از طریق سازنده مقدار دهی میشوند.
بررسی تفاوت readonly و const در سطح IL
برای مشاهده کدهای سطح میانی (IL Code) از ابزار خط فرمان Developer Command ویژوال استدیو 2017 و همچنین برنامه ILdasm استفاده شده است. همانطور که در جدول مقایسهای بیان شد، برای constant field ها تخصیص حافظهای صورت نمیگیرد و مقادیر مستقیما در کدهای IL گنجانده میشود.
مثال:
class Program { public const int numberOfDays = 7; public readonly double piValue = 3.14; static void Main(string[] args) { } }
اگر فایل Exe کد فوق را توسط نرم افزار IL Dasm مشاهده کنید، خواهید دید که مقدار ذخیره شده در numberOfDays در کد IL گنجانده شده است :
ولی مقدار ذخیره شده در piValue در زمان اجرا قابل دسترسی میباشد.
مشکل Versioning فیلدهای const
public const int numberOfDays = 7; public readonly double piValue = 3.14;
کد برنامه اصلی که ارجاعی به اسمبلی جانبی دارد:
static void Main(string[] args) { var readEx = new MyLib.TestClass(); var readConstValue = MyLib.TestClass.numberOfDays; var readReadOnlyValue = readEx.piValue; }
.method private hidebysig static void Main(string[] args) cil managed { .entrypoint // Code size 17 (0x11) .maxstack 1 .locals init ([0] class [MyLib]MyLib.TestClass readEx, [1] int32 readConstValue, [2] float64 readOnlyValue) IL_0000: nop IL_0001: newobj instance void [MyLib]MyLib.TestClass::.ctor() IL_0006: stloc.0 //readEx IL_0007: ldc.i4.7 //ارزش ذخیره شده در کد IL_0008: stloc.1 //readConstValue IL_0009: ldloc.0 //readEg IL_000a: ldfld float64 [MyLib]MyLib.TestClass::piValue IL_000f: stloc.2 //readReadOnlyValue IL_0010: ret } // end of method Program::Main
اگر در کتابخانه جانبی ارزش فیلد const را تغییر دهید و آن را مجدد کامپایل کنید، تا زمانیکه اسمبلی برنامه اصلی را کامپایل نکردهاید، همان ارزش قبلی در برنامه نمایش داده میشود.
برای غلبه بر این مشکل از فیلدهای Static ReadOnly استفاده میکنیم.
مثال:
public class ReadonlyStatic { public static readonly string x = "Hi"; public static readonly string y; public ReadonlyStatic() { //y = "Hello"; This is wrong } static ReadonlyStatic() { y = "Hello"; } }
اولین مشکلی که با استفاده از فیلدهای Static ReadOnly حل میشود، مشکل Versioning فیلدهای Const است. بدین ترتیب دیگر نیازی به کامپایل مجدد برنامه مصرف کننده نیست .
نکته بعدی که در کد فوق نشان داده شدهاست، فیلدهای static readOnly در زمان تعریف و یا تنها از طریق سازندهی static میتوانند مقدار دهی شوند.
مقایسه ReadOnly و Static :
ReadOnly | Static |
هم در زمان تعریف و هم از طریق سازنده میتوان آن را مقدار دهی کرد. | در زمان تعریف و تنها از طریق سازنده static میتوان آن را مقدار دهی کرد. |
مقدار بر اساس مقادیری که در سازندهها تعیین میشود متفاوت است. | مقادیر بعد از مقدار دهی اولیه تغییر نمیکنند. |
چه زمانی از Const و چه زمانی از ReadOnly استفاده کنیم :
- زمانی باید از Const استفاده کرد که مطمئن هستیم ارزش ذخیره شده در آن در طول عمر یک برنامه تغییر نمیکند. بطور مثال ذخیره تعداد روز هفته در یک فیلد از نوع Constant. اگر شک داریم که ممکن است این ارزش تغییر کند، میتوانیم از حالت static readOnly برای غلبه بر مشکل Versioning استفاده کنیم.
- از آنجائیکه مقادیر constant در کدهای IL گنجانده میشوند، برای رسیدن به کارآیی بهتر، مقادیری را که در طول عمر یک برنامه تغییر نمیکنند، به صورت const تعریف میکنیم.
- هر زمان تصمیم داشتیم Constant هایی به ازای هر وهله از کلاس داشته باشیم از ReadOnly استفاده میکنیم.
با سلام و با تشکر؛ با اجازه بنده کد فوق رو کاملتر کردم و یک سری کد جدید بهش اضافه کردم و برخی بخشها رو هم تغییر داده ام:
برای استفاده هم داریم :
محتوای کلاس CustomRandom :
1- به جای سوال ، بنده یک عبارت رو نمایش میدم
2- ارسال دیتا از طریق کوئری استرینگ که باعث میشه سشن دیگه نیاز نباشه و از مصرف حافظه رو تا حد زیادی کاسته بشه.
البته این مورد برای سایتهای پربازدید خیلی قابل لمس است و ممکنه روی سایتهای معمولی تفاوت زیادی احساس نشه.
3- ارسال داده بصورت هش شده ، که این رو بنده خودم با یک کلاس دست ساز معمولی به روش TripleDes انجام داده ام که دوستان به هر روشی میتونن داده هاشون رو هش کنن.
4- یکم حروف رو چرخوندم و فاصله بین حروف رو هم طوری تنظیم کردم که در عرض تصویر پخش بشن (از کل عرض تصویر استفاده بشه)
* شایان ذکر است که به نظر من روش فوق در ایجاد نویزهای دایره ای بسیار زیبا بود، چون همیشه همه جا با یک سری خط ساده نویز ایجاد میکنن ولی روش فوق واقعا خلاقانه و قشنگ بود :)
ساختار کنترلر ریکپچای من :
public class CaptchaController : Controller { private static readonly Brush ForeColor = Brushes.Black; private const string FontName = "tahoma"; private const int FontSize = 14; private const int Width = 130; private const int Height = 35; [HttpGet] public ActionResult Image(string cc) { if (string.IsNullOrEmpty(cc) || string.IsNullOrWhiteSpace(cc)) return null; var captchaData = CustomHashing.DecryptTpl(cc); var rand = new Random((int)DateTime.Now.Ticks); // image stream FileContentResult img = null; using (var mem = new MemoryStream()) using (var bmp = new Bitmap(Width, Height)) using (var mtrx = new Matrix()) using (var gfx = Graphics.FromImage((Image)bmp)) { gfx.TextRenderingHint = TextRenderingHint.ClearTypeGridFit; gfx.SmoothingMode = SmoothingMode.AntiAlias; gfx.FillRectangle(Brushes.White, new Rectangle(0, 0, bmp.Width, bmp.Height)); //add noise int rn, xn, yn; var pen = new Pen(Color.Yellow); for (int i = 1; i < 10; i++) { pen.Color = Color.FromArgb((rand.Next(0, 255)), (rand.Next(0, 255)), (rand.Next(0, 255))); rn = rand.Next(0, (130 / 3)); xn = rand.Next(0, 130); yn = rand.Next(0, 30); gfx.DrawEllipse(pen, xn - rn, yn - rn, rn, rn); } //add chars #region draw pic float x = 1, y = 1; int degree = 10; for (int i = 0; i < captchaData.Length; i++) { mtrx.Reset(); x = (float)(Width * (0.19 * i)); y = (float)(Height * 0.19); degree = rand.Next(-25, 25); if (i == 0 && degree > 20) { x += (FontSize + 5); y -= 15; } mtrx.RotateAt(degree, new PointF(x, y)); gfx.Transform = mtrx; gfx.DrawString(captchaData[i].ToString(), new Font(FontName, FontSize), ForeColor, x, y); gfx.ResetTransform(); } #endregion //render as Jpeg bmp.Save(mem, System.Drawing.Imaging.ImageFormat.Jpeg); img = this.File(mem.GetBuffer(), "image/Jpeg"); } return img; }
@{ var r = new Web.Tools.CustomRandom(); string hash = Web.Tools.CustomHashing.EncryptTpl(r.CraeteCapchaNumericData(4)); } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>test Index</title> </head> <body> <div> <img src="@Url.Action("Image", "Captcha", new { cc = hash })" /> </div> </body> </html>
این کلاس به تعداد مورد نیاز کاراکتر عددی/عددی-حروفی میسازه و به شما تحویل میده
public class CustomRandom { /// <summary> /// ساخت یک عبارت عددی رندوم /// </summary> public string CraeteCapchaNumericData(int length) { var rnd = new Random((int) DateTime.Now.Ticks); var temp = new StringBuilder(); for (var i = 0; i < length; i++) temp.Append(Convert.ToChar(rnd.Next(49, 58))); return temp.ToString(); } /// <summary> /// ساخت یک عبارت رندوم /// </summary> public string CreateRandomName(int length) { var rnd = new Random((int) DateTime.Now.Ticks); var temp = new StringBuilder(); var flag = 1; for (var i = 0; i < length; i++) { flag = rnd.Next(0, 15); if (flag < 5) temp.Append(Convert.ToChar(rnd.Next(97, 123))); // lower else if (flag >= 5 && flag < 10) temp.Append(Convert.ToChar(rnd.Next(49, 58))); // numeric else temp.Append(Convert.ToChar(rnd.Next(65, 91))); // biger } return temp.ToString(); } }
همانطور که گفتم پیاده سازی متد های DecryptTpl و EncryptTpl کلاس CustomHashing رو به خود دوستان واگذار میکنم تا با هر الگوریتمی که دوست دارن این کار رو انجام بدن. (^)
امیدوارم کد بنده به دوستان کمک کنه.
موفق باشید
فرض کنید میخواهیم سطرهای جدول را 6 تا 6 تا سوا کنیم و به هر کدام یک عددی انتساب دهیم و هر قسم تولید شده را نیز 2 تا 2 تا سوا کنیم و بهش عدد انتساب دهیم.
به تصویر زیر توجه بفرمایید. ابتدا دادهها به دو دسته ششتایی تقسیم شدن(ستون ntl)، سپس هر کدام از این دستهها نیز به سه دسته دوتایی تقسیم شدن(ستون grp) هدف ما تولید دو ستون ntl و grp توسط query میباشد.
برای بدست آوردن مقادیر دو ستون مذکور روشهای متنوعی وجود دارد که برخی از آنها را در انیجا پوشش میدم.
قبل از هر چیزی ابتدا جدول را ایجاد و 12 سطر زیر را در آن انتشار دهید:
روش اول:
این روش، تعمیم پذیری و پویایی ندارد و برای هر سناریویی مناسب نخواهد بود. ولی از آنجایی که دیدم کوئری زیر میتواند یک نمونه از کاربرد Ntile باشه آن را مطرح کردم.
تابع ntile داخلی سطرهای جدول را به دو قسم تقسیم میکند و برای قسم اول عدد 1 و برای قسم دوم عدد 2 را در نظر میگیرد.
تابع ntile بیرونی بر اساس دو عدد 1و 2 گروه بندی انجام داده و هر گروه را به 3 قسمت تقسیم میکند. قسمت اول 1، دوم 2 و سوم 3 خواهد بود.
لازم به ذکر است که باید خارج قسمت تقسیم تعدادسطرها بر عدد ntile یک عدد صحیح باشد تا خروجی مناسب داشته باشیم. و همچنین بایستی بدانیم که تعداد سطرهای جدول چنتاست تا آن را به گونه ای تقسیم کنیم که خارج قسمت برابر شود با عدد مورد نظر ما یعنی 6.
روش دوم:
در این روش بر خلاف روش قبل که همه چیز توسط تابع بدست میآمد باید خودمان دست به کار شویم و فرمولی را بدست آوریم که نتیجه مورد نظر را تولید کند.
برای حل این مساله ابتدا باید سطرهای جدول را 6 تا 6 تا سوا کنیم و عناصر هر دسته را شماره گذاری کنیم (از 1 تا 6 بر اساس ترتیب مقدار nbr) سپس با کمک سایر فرمولها دستهها را دوتا دوتا شماره گذاری میکنیم.
به تصویر زیر توجه بفرمایید:
در کادر نارنجی رنگ همانطور که اشاره شد ما سطرهای شمارگذاری شده ای داریم که در رنج 1 تا 6 هستند. و در کادر بنفش ستون مورد نظر ما قرار دارد. ستون بنفش با کمک ستون نارنجی بدست آمده است.
اگر تقسیم صحیح را div و باقیمانده صحیح را mod بگیریم فرولهای مورد نظر به این شرح خواهد بود:
طبق کوئری زیر ستون نارنجی(rnk1/rnk2) را به دو طریق میتوان ایجاد نمود و ستون بنفش(grp1/grp2) را نیز به دو طریق میتوان ایجاد نمود.
به تصویر زیر توجه بفرمایید. ابتدا دادهها به دو دسته ششتایی تقسیم شدن(ستون ntl)، سپس هر کدام از این دستهها نیز به سه دسته دوتایی تقسیم شدن(ستون grp) هدف ما تولید دو ستون ntl و grp توسط query میباشد.
برای بدست آوردن مقادیر دو ستون مذکور روشهای متنوعی وجود دارد که برخی از آنها را در انیجا پوشش میدم.
قبل از هر چیزی ابتدا جدول را ایجاد و 12 سطر زیر را در آن انتشار دهید:
CREATE TABLE T (nbr INT NOT NULL); INSERT T VALUES (1), (2), (3), (4), (5), (6), (7), (8), (9), (10), (11), (12);
روش اول:
این روش، تعمیم پذیری و پویایی ندارد و برای هر سناریویی مناسب نخواهد بود. ولی از آنجایی که دیدم کوئری زیر میتواند یک نمونه از کاربرد Ntile باشه آن را مطرح کردم.
SELECT nbr, ntl, NTILE(3) OVER(PARTITION BY ntl ORDER BY nbr) AS grp FROM ( SELECT nbr, NTILE(2) OVER(ORDER BY nbr) ntl FROM T ) AS D;
تابع ntile بیرونی بر اساس دو عدد 1و 2 گروه بندی انجام داده و هر گروه را به 3 قسمت تقسیم میکند. قسمت اول 1، دوم 2 و سوم 3 خواهد بود.
لازم به ذکر است که باید خارج قسمت تقسیم تعدادسطرها بر عدد ntile یک عدد صحیح باشد تا خروجی مناسب داشته باشیم. و همچنین بایستی بدانیم که تعداد سطرهای جدول چنتاست تا آن را به گونه ای تقسیم کنیم که خارج قسمت برابر شود با عدد مورد نظر ما یعنی 6.
روش دوم:
در این روش بر خلاف روش قبل که همه چیز توسط تابع بدست میآمد باید خودمان دست به کار شویم و فرمولی را بدست آوریم که نتیجه مورد نظر را تولید کند.
برای حل این مساله ابتدا باید سطرهای جدول را 6 تا 6 تا سوا کنیم و عناصر هر دسته را شماره گذاری کنیم (از 1 تا 6 بر اساس ترتیب مقدار nbr) سپس با کمک سایر فرمولها دستهها را دوتا دوتا شماره گذاری میکنیم.
به تصویر زیر توجه بفرمایید:
در کادر نارنجی رنگ همانطور که اشاره شد ما سطرهای شمارگذاری شده ای داریم که در رنج 1 تا 6 هستند. و در کادر بنفش ستون مورد نظر ما قرار دارد. ستون بنفش با کمک ستون نارنجی بدست آمده است.
اگر تقسیم صحیح را div و باقیمانده صحیح را mod بگیریم فرولهای مورد نظر به این شرح خواهد بود:
طبق کوئری زیر ستون نارنجی(rnk1/rnk2) را به دو طریق میتوان ایجاد نمود و ستون بنفش(grp1/grp2) را نیز به دو طریق میتوان ایجاد نمود.
SELECT nbr, rnk1, rnk2, (rnk1 + 1) / 2 AS grp2, (rnk1 - 1) / 2 + 1 AS grp2 FROM ( SELECT nbr, ROW_NUMBER() OVER(PARTITION BY (nbr + 5) / 6 ORDER BY nbr) rnk1, (nbr - 1) % 6 + 1 AS rnk2 FROM t )d
در این سری قصد داریم یک برنامهی سادهی دفترچه تلفن را توسط Angular 6x و کامپوننتهای متریال آن ایجاد کنیم؛ اما Grid جزئی از بستهی Angular Material نیست. بنابراین برای طرحبندی برنامه و قرار دادن المانهای مختلف در مکانهای تعیین شدهی صفحه، از Angular FlexBox Module استفاده خواهیم کرد که محصور کنندهی CSS 3 FlexBox است.
آشنایی با Flex Layout Box Model
برای طراحی ظاهر یک برنامهی وب نیاز است عناصر آنرا در مکانهای مختلفی از صفحه قرار داد که به آن Layout گفته میشود. برای این منظور عموما 4 روش ذیل مرسوم هستند:
1. Table
2. Float, position, clear
3. CSS Grids
4. FlexBox CSS
امروزه دیگر آنچنان روشهای 1 و 2 به صورت مستقیم مورد استفاده قرار نمیگیرند. CSS Grid روش نهایی طراحی Layout در آینده خواهد بود و در حال حاضر تعداد مرورگرهایی که از آن پشتیبانی میکنند، قابل توجه نیست؛ اما از FlexBox در IE 11، کروم 21 و فایرفاکس 22 به بعد پشتیبانی میشود.
FlexBox CSS، سیلان المانهای قرار گرفتهی در داخل آنرا سبب میشود. در اینجا یک container اصلی وجود دارد که در برگیرندهی المانها است. در تصویر فوق دو محور را مشاهده میکنید. محور افقی از چپ به راست ادامه پیدا میکند. محور عمودی نحوهی ارتباط عناصر را مشخص میکند.
اکنون این سؤال مطرح میشود که چه تفاوتی بین یک Grid و FlexBox CSS وجود دارد؟ در یک Grid طراحی دو بعدی سطرها و ستون وجود دارد. اما به FlexBox باید به صورت سیلان یک بعدی سلولها نگاه کرد. برای مثال عناصر قرار گرفتهی درون Container یا به صورت افقی درون آن گسترده شده و قرار میگیرند و یا به صورت عمودی.
نحوهی تفکر و کارکرد با FlexBox چگونه است؟
در اینجا باید به دو مفهوم دقت داشت:
الف) سیلان عناصر درون Container که میتواند افقی و یا عمودی باشد.
ب) اندازهی المانها که میتواند ثابت و یا نسبی باشد.
یک Container، جهت سیلان عناصر درون آنرا مشخص میکند. المانهای آن، اندازه، فاصلهی از یکدیگر و ترتیب قرارگیری را ارائه میدهند. یک flex container میتواند شامل چندین flex container تو در تو نیز باشد.
نحوهی سیلان عناصر در FlexBox چگونه است؟
برای نمونه طرحبندی متداول ذیل را درنظر بگیرید:
نحوه تفکر در مورد طراحی این طرحبندی، باید از بیرون به درون و از بالا به پایین (سیلان عمودی) باشد:
سپس نحوهی سیلان عناصر درون Containerهای تعریف شده را مشخص میکنیم. برای مثال اولین Container دارای سیلان افقی از چپ به راست خواهد بود که عنصر سوم آن به دلیل اندازههای مشخص دو عنصر قبلی، به سطر دوم منتقل شدهاست.
در ادامه به قسمت میانی میرسیم که آن نیز دارای سیلان افقی از چپ به راست است:
در اینجا نیز میتوان سه Container را متصور شد که وسطی دارای سیلان افقی از راست به چپ است و مواردی که بر اساس اندازهی آنها در یک سطر جا نشدهاند، به سطر بعدی منتقل خواهند شد:
و تمام این سیلانها و انتقال به سطرهای بعدی بر اساس اندازهی المانها صورت میگیرد:
البته در این تصویر یک ایراد هم وجود دارد. با توجه به اینکه در ناحیهی میانی سه Container تعریف خواهند شد. Container ایی که در میان آن قرار میگیرد، دارای سیلان خاص خودش است و اندازههای آن باید نسبت به این Container تعریف شوند و نه نسبت به کل ناحیهی میانی. یعنی بجای اینکه 50 درصد، 25، 25 و 50 درصد را داشته باشیم، اینها در اصل 100 درصد، 50 و 50 درصد و سپس 100 درصد هستند.
معرفی کتابخانهی Angular Flex Layout
برای کار با Flex CSS نیاز است:
- مقدار زیادی کد CSS نوشت.
- نیاز به درک عمیقی از Flex Box دارد.
- نیاز است با باگهای مرورگرها و تفاوتهای پیاده سازیهای آنها در مورد FlexBox آشنا بود.
- نیاز به Prefixing دارد.
- برای Angular طراحی نشدهاست.
جهت رفع این مشکلات و محدودیتها، تیم Angular کتابخانهای را به نام Angular Flex Layout مخصوص نگارشهای جدید Angular طراحی کردهاست. این کتابخانه مستقل از Angular Material است اما عموما به همراه آن استفاده میشود.
مزایای کار با کتابخانهی Angular flex layout
- پیاده سازی TypeScript ایی دارد. در اصل یک سری directives مخصوص Angular است که با TypeScript نوشته شدهاست.
- به صورت پویا و inline تمام CSSهای مورد نیاز را تولید و تزریق میکند.
- به همراه یک API استاتیک است و همچنین یک API واکنشگرا
- با Angular CLI نیز یکپارچه شدهاست.
نصب و تنظیم کتابخانهی Angular Flex layout
برای نصب این کتابخانه، در ریشهی پروژه دستور زیر را صادر کنید:
سپس ماژول آنرا باید به shared.module.ts اضافه کرد:
کار با API استاتیک Angular Flex layout
API استاتیک Angular Flex layout شامل این مزایا و مشخصات است:
- به صورت یکسری دایرکتیو Angular طراحی شدهاست که به HTML قالب کامپوننتها اضافه میشود.
- از data binding پشتیبانی میکند.
- CSS نهایی را به صورت پویا و inline تولید و به صفحه تزریق میکند. Inline CSS تزریق شده به ویژگیهای styles هر المان تزریق میشوند و موارد مشابه را در صورت وجود بازنویسی میکنند.
- از تشخیص تغییرات پشتیبانی میکند.
- به همراه ویژگیهای fxHide و fxShow است.
- کارآیی مطلوبی دارد.
در اینجا برای تعریف container اصلی از دایرکتیوهای زیر استفاده میشود:
- fxLayout جهتهای flex را مشخص میکند.
- fxLayout میتواند دارای مقداری مانند row، column و row-reverse و column-reverse باشد. برای مثال مقدار row-reverse، نمایش از راست به چپ را سبب میشود.
- fxLayoutWrap مشخص میکند که آیا المانها باید به سطر و یا ستون بعدی منتقل شوند یا خیر؟
- fxLayoutGap فاصلهی بین المانها را مشخص میکند.
- fxLayoutAlign نحوهی چیدمان المان را تعیین میکند.
چند مثال:
و یا حالت راست به چپ آن به صورت زیر است:
و برای تعریف آیتمهای قرار گرفتهی درون containers میتوان از دایرکتیوهای زیر استفاده کرد:
- fxflex برای تعیین اندازه و flex المانها
در اینجا سه مقداری که ذکر میشوند (و یا تنها یک مقدار) چنین معنایی را به همراه دارند:
و یا
- grow به این معنا است که آیتم جاری در صورت وجود فضا (طراحی واکنشگرا و واکنش نشان دادن به اندازهی صفحه)، نسبت به سایر المانها تا چه اندازهای میتواند بزرگ شود.
- shrink به این معنا است که اگر به اندازهی کافی فضا وجود نداشت، این المان نسبت به سایر المانهای دیگر تا چه اندازهای میتواند کوچک شود.
- basis به معنای اندازهی پیشفرض المان است.
در اینجا اندازهها برحسب پیکسل، درصد و یا calcs, em, cw, vh میتوانند تعیین شوند. همچنین یک سری نام مستعار مانند grow, initial, auto, none, nogrow, noshrink هم قابل استفاده هستند.
- fxflexorder برای تعیین ترتیب قرارگیری یک المان
- fxflexoffset برای تعیین فاصله یک المان از container آن
- fxflexAlign برای تعیین محل قرارگیری المان
- fxflexfill برای تعیین اینکه این المان کل ردیف یا ستون را پر خواهد کرد
چند مثال:
در اینجا سه نمایشی را که در ذیل تعریف divها مشاهده میکنید بر اساس تغییر اندازهی صفحه حاصل شدهاند. چون آیتم دوم دارای مقدار grow مساوی 5 است، به همین جهت با تغییر اندازهی صفحه و دسترسی به مقدار فضای بیشتر، بزرگتر شدهاست.
یک مثال کامل
اگر علاقمند باشید تا توانمندیهای angular flex layout را در قالب یک مثال کامل مشاهده کنید، به آدرس زیر مراجعه نمائید:
https://tburleson-layouts-demos.firebaseapp.com/#/docs
در این مثال با تغییر گزینههای مختلف، کد معادل angular flex layout آن نیز تولید میشود.
همچنین wiki خود پروژه نیز به همراه مثالهای بیشتری است:
https://github.com/angular/flex-layout/wiki
کار با API واکنشگرای Angular Flex layout
در طراحی واکنشگرا، container و عناصر داخل آن بر اساس تغییرات اندازهی صفحه و یا اندازهی وسیلهی نمایشی، تغییر اندازه و همچنین موقعیت میدهند و این تغییرات بر اساس انطباق با viewport وسیلهی نمایشی صورت میگیرند. به همین جهت برای طراحی واکنشگرا نیاز به Flex CSS و همچنین Media Query است. نوشتن Medial Query و ترکیب آن با Flex CSS کار مشکلی است. به همین جهت Angular Flex layout به همراه یک API واکنشگرا نیز هست که در پشت صحنه Flex CSS را بر اساس طراحی متریال و Medial Queries مورد استفاده قرار میدهد.
اگر علاقمند هستید تا اندازههای واکنشگرای استاندارد متریال را ملاحظه کنید، میتوانید به آدرس زیر مراجعه نمائید (قسمت Breakpoint system آن):
https://material.io/design/layout/responsive-layout-grid.html#breakpoints
برای مثال هر اندازهای کمتر از 600px در گروه extra small قرار میگیرد (با مخفف xs). از 600px تا 1024px در بازهی small (با مخفف sm)، از 1024px تا 1440px در بازهی medium (با مخفف md) و از 1440px تا 1920px در بازهی large (با مخفف lg) و بیشتر از آن در بازهی xlrage قرار میگیرند (با مخفف xl). این اعداد و بازهها، پایهی طراحی API واکنشگرای Angular Flex layout هستند. به همین جهت نام این بازهها در این API به صورت مخفف xs, sm, md, lg, xl درنظر گرفته شدهاند و مورد استفاده قرار میگیرند. همچنین اگر اندازههای مدنظر از این بازهها کمتر باشند، میتوان از lt-sm, lt-md, lt-lg, lt-xl نیز استفاده کرد. در اینجا lt به معنای less than است و یا اگر بازههای مورد نیاز بیش از این اندازهها باشند میتوان با gt-xs, gt-sm, gt-md, gt-lg کار کرد. در اینجا gt به معنای greater than است.
به این مخففها «media query alias» هم گفته میشود و اکنون که لیست آنها مشخص است، تنها کافی است آنها را به API استاتیکی که پیشتر بررسی کردیم، اضافه کنیم. برای مثال:
برای نمونه فرض کنید یک چنین طرحبندی دسکتاپی را داریم:
معادل طراحی آن با API استاتیک Angular Flex Layout به صورت زیر است:
اکنون که این طرحبندی دسکتاپ را داریم، چگونه باید آنرا تبدیل به طرحبندی موبایل، مانند شکل زیر کنیم؟
برای اینکار ابتدا fxLayout.xs را به سطر میانی اضافه میکنیم تا هرگاه به این اندازه رسیدیم، بجای ردیف، تبدیل به ستون شود. سپس توسط fxFlexOrder.xs، در اندازهی xs، محل قرارگیری المانهای این ستون را هم مشخص میکنیم:
همانطور که ملاحظه میکنید کار کردن با این API بسیار سادهاست و نیازی به کارکردن مستقیم با Media Queries و یا برنامه نویسی مستقیم ندارد و تمام آن در قالب HTML یک کامپوننت قابل پیاده سازی است.
یک نکته: مثال کاملی که پیشتر در این بحث مطرح شد، به همراه مثال واکنشگرا نیز هست که برای مشاهدهی اثر آنها بهتر است اندازهی مرورگر را کوچک و بزرگ کنید.
مخفی کردن و یا نمایش قسمتی از صفحه بر اساس اندازهی آن
علاوه بر media query alias هایی که عنوان شد، امکان نمایش و یا مخفی سازی قسمتهای مختلف صفحه بر اساس اندازهی صفحهی نمایشی نیز هست:
در اینجا fxShow سبب نمایش این div در حالت عادی میشود (پیشفرض آن xl، md و sm است). اما اگر اندازهی صفحه lg باشد، fxHide.lg تنظیم شدهی به true سبب مخفی سازی آن خواهد شد و در اندازهی xs مجددا نمایش داده میشود.
تغییر اندازهی قسمتی از صفحه بر اساس اندازهی آن
در مثال زیر اگر اندازهی صفحه gt-sm باشد (بیشتر از small)، اندازهی این div به 100 درصد بجای 50 درصد حالتهای دیگر، تنظیم میشود:
حالتهای ویژهی طراحی واکنشگرا در Angular Flex Layout
در API واکنشگرای آن حالتهای ویژهی fxshow, fxhide, ngclass و ngstyle نیز درنظر گرفته شدهاند که امکان فعالسازی آنها در اندازههای مختلف صفحه مسیر است:
امکان کار با API واکنشگرا از طریق برنامه نویسی
برای این منظور میتوان از سرویس ObservableMedia مانند مثال زیر استفاده کرد:
در اینجا به فعالسازی یک بازهی خاص گوش فرا خواهیم داد. برای مثال اگر اندازهی صفحه xs بود، سبب بارگذاری محتوای خاص مرتبط با موبایل خواهیم شد.
برای مطالعهی بیشتر
آشنایی با Flex Layout Box Model
برای طراحی ظاهر یک برنامهی وب نیاز است عناصر آنرا در مکانهای مختلفی از صفحه قرار داد که به آن Layout گفته میشود. برای این منظور عموما 4 روش ذیل مرسوم هستند:
1. Table
2. Float, position, clear
3. CSS Grids
4. FlexBox CSS
امروزه دیگر آنچنان روشهای 1 و 2 به صورت مستقیم مورد استفاده قرار نمیگیرند. CSS Grid روش نهایی طراحی Layout در آینده خواهد بود و در حال حاضر تعداد مرورگرهایی که از آن پشتیبانی میکنند، قابل توجه نیست؛ اما از FlexBox در IE 11، کروم 21 و فایرفاکس 22 به بعد پشتیبانی میشود.
FlexBox CSS، سیلان المانهای قرار گرفتهی در داخل آنرا سبب میشود. در اینجا یک container اصلی وجود دارد که در برگیرندهی المانها است. در تصویر فوق دو محور را مشاهده میکنید. محور افقی از چپ به راست ادامه پیدا میکند. محور عمودی نحوهی ارتباط عناصر را مشخص میکند.
اکنون این سؤال مطرح میشود که چه تفاوتی بین یک Grid و FlexBox CSS وجود دارد؟ در یک Grid طراحی دو بعدی سطرها و ستون وجود دارد. اما به FlexBox باید به صورت سیلان یک بعدی سلولها نگاه کرد. برای مثال عناصر قرار گرفتهی درون Container یا به صورت افقی درون آن گسترده شده و قرار میگیرند و یا به صورت عمودی.
نحوهی تفکر و کارکرد با FlexBox چگونه است؟
در اینجا باید به دو مفهوم دقت داشت:
الف) سیلان عناصر درون Container که میتواند افقی و یا عمودی باشد.
ب) اندازهی المانها که میتواند ثابت و یا نسبی باشد.
یک Container، جهت سیلان عناصر درون آنرا مشخص میکند. المانهای آن، اندازه، فاصلهی از یکدیگر و ترتیب قرارگیری را ارائه میدهند. یک flex container میتواند شامل چندین flex container تو در تو نیز باشد.
نحوهی سیلان عناصر در FlexBox چگونه است؟
برای نمونه طرحبندی متداول ذیل را درنظر بگیرید:
نحوه تفکر در مورد طراحی این طرحبندی، باید از بیرون به درون و از بالا به پایین (سیلان عمودی) باشد:
سپس نحوهی سیلان عناصر درون Containerهای تعریف شده را مشخص میکنیم. برای مثال اولین Container دارای سیلان افقی از چپ به راست خواهد بود که عنصر سوم آن به دلیل اندازههای مشخص دو عنصر قبلی، به سطر دوم منتقل شدهاست.
در ادامه به قسمت میانی میرسیم که آن نیز دارای سیلان افقی از چپ به راست است:
در اینجا نیز میتوان سه Container را متصور شد که وسطی دارای سیلان افقی از راست به چپ است و مواردی که بر اساس اندازهی آنها در یک سطر جا نشدهاند، به سطر بعدی منتقل خواهند شد:
و تمام این سیلانها و انتقال به سطرهای بعدی بر اساس اندازهی المانها صورت میگیرد:
البته در این تصویر یک ایراد هم وجود دارد. با توجه به اینکه در ناحیهی میانی سه Container تعریف خواهند شد. Container ایی که در میان آن قرار میگیرد، دارای سیلان خاص خودش است و اندازههای آن باید نسبت به این Container تعریف شوند و نه نسبت به کل ناحیهی میانی. یعنی بجای اینکه 50 درصد، 25، 25 و 50 درصد را داشته باشیم، اینها در اصل 100 درصد، 50 و 50 درصد و سپس 100 درصد هستند.
معرفی کتابخانهی Angular Flex Layout
برای کار با Flex CSS نیاز است:
- مقدار زیادی کد CSS نوشت.
- نیاز به درک عمیقی از Flex Box دارد.
- نیاز است با باگهای مرورگرها و تفاوتهای پیاده سازیهای آنها در مورد FlexBox آشنا بود.
- نیاز به Prefixing دارد.
- برای Angular طراحی نشدهاست.
جهت رفع این مشکلات و محدودیتها، تیم Angular کتابخانهای را به نام Angular Flex Layout مخصوص نگارشهای جدید Angular طراحی کردهاست. این کتابخانه مستقل از Angular Material است اما عموما به همراه آن استفاده میشود.
مزایای کار با کتابخانهی Angular flex layout
- یک کتابخانهی متکی به خود و مستقل است و برای کار با آن الزامی به استفادهی از Angular Material نیست.
- به همراه هیچ فایل CSS جانبی ارائه نمیشود.- پیاده سازی TypeScript ایی دارد. در اصل یک سری directives مخصوص Angular است که با TypeScript نوشته شدهاست.
- به صورت پویا و inline تمام CSSهای مورد نیاز را تولید و تزریق میکند.
- به همراه یک API استاتیک است و همچنین یک API واکنشگرا
- با Angular CLI نیز یکپارچه شدهاست.
نصب و تنظیم کتابخانهی Angular Flex layout
برای نصب این کتابخانه، در ریشهی پروژه دستور زیر را صادر کنید:
npm install @angular/flex-layout --save
import { FlexLayoutModule } from "@angular/flex-layout"; @NgModule({ imports: [ FlexLayoutModule ], exports: [ FlexLayoutModule ] }) export class SharedModule { }
کار با API استاتیک Angular Flex layout
API استاتیک Angular Flex layout شامل این مزایا و مشخصات است:
- به صورت یکسری دایرکتیو Angular طراحی شدهاست که به HTML قالب کامپوننتها اضافه میشود.
- از data binding پشتیبانی میکند.
- CSS نهایی را به صورت پویا و inline تولید و به صفحه تزریق میکند. Inline CSS تزریق شده به ویژگیهای styles هر المان تزریق میشوند و موارد مشابه را در صورت وجود بازنویسی میکنند.
- از تشخیص تغییرات پشتیبانی میکند.
- به همراه ویژگیهای fxHide و fxShow است.
- کارآیی مطلوبی دارد.
در اینجا برای تعریف container اصلی از دایرکتیوهای زیر استفاده میشود:
- fxLayout جهتهای flex را مشخص میکند.
<div fxLayout="row" fxLayout.xs="column"></div>
- fxLayoutWrap مشخص میکند که آیا المانها باید به سطر و یا ستون بعدی منتقل شوند یا خیر؟
<div fxLayoutWrap></div>
<div fxLayoutGap="10px"></div>
<div fxLayoutAlign="start stretch"></div>
چند مثال:
و یا حالت راست به چپ آن به صورت زیر است:
و برای تعریف آیتمهای قرار گرفتهی درون containers میتوان از دایرکتیوهای زیر استفاده کرد:
- fxflex برای تعیین اندازه و flex المانها
<div fxFlex="1 2 calc(15em + 20px)"></div>
fxFlex="grow shrink basis"
fxFlex="basis"
- shrink به این معنا است که اگر به اندازهی کافی فضا وجود نداشت، این المان نسبت به سایر المانهای دیگر تا چه اندازهای میتواند کوچک شود.
- basis به معنای اندازهی پیشفرض المان است.
در اینجا اندازهها برحسب پیکسل، درصد و یا calcs, em, cw, vh میتوانند تعیین شوند. همچنین یک سری نام مستعار مانند grow, initial, auto, none, nogrow, noshrink هم قابل استفاده هستند.
- fxflexorder برای تعیین ترتیب قرارگیری یک المان
<div fxFlexOrder="2"></div>
<div fxFlexOffset="20px"></div>
<div fxFlexAlign="center"></div>
<div fxFlexFill></div>
چند مثال:
در اینجا سه نمایشی را که در ذیل تعریف divها مشاهده میکنید بر اساس تغییر اندازهی صفحه حاصل شدهاند. چون آیتم دوم دارای مقدار grow مساوی 5 است، به همین جهت با تغییر اندازهی صفحه و دسترسی به مقدار فضای بیشتر، بزرگتر شدهاست.
یک مثال کامل
اگر علاقمند باشید تا توانمندیهای angular flex layout را در قالب یک مثال کامل مشاهده کنید، به آدرس زیر مراجعه نمائید:
https://tburleson-layouts-demos.firebaseapp.com/#/docs
در این مثال با تغییر گزینههای مختلف، کد معادل angular flex layout آن نیز تولید میشود.
همچنین wiki خود پروژه نیز به همراه مثالهای بیشتری است:
https://github.com/angular/flex-layout/wiki
کار با API واکنشگرای Angular Flex layout
در طراحی واکنشگرا، container و عناصر داخل آن بر اساس تغییرات اندازهی صفحه و یا اندازهی وسیلهی نمایشی، تغییر اندازه و همچنین موقعیت میدهند و این تغییرات بر اساس انطباق با viewport وسیلهی نمایشی صورت میگیرند. به همین جهت برای طراحی واکنشگرا نیاز به Flex CSS و همچنین Media Query است. نوشتن Medial Query و ترکیب آن با Flex CSS کار مشکلی است. به همین جهت Angular Flex layout به همراه یک API واکنشگرا نیز هست که در پشت صحنه Flex CSS را بر اساس طراحی متریال و Medial Queries مورد استفاده قرار میدهد.
اگر علاقمند هستید تا اندازههای واکنشگرای استاندارد متریال را ملاحظه کنید، میتوانید به آدرس زیر مراجعه نمائید (قسمت Breakpoint system آن):
https://material.io/design/layout/responsive-layout-grid.html#breakpoints
برای مثال هر اندازهای کمتر از 600px در گروه extra small قرار میگیرد (با مخفف xs). از 600px تا 1024px در بازهی small (با مخفف sm)، از 1024px تا 1440px در بازهی medium (با مخفف md) و از 1440px تا 1920px در بازهی large (با مخفف lg) و بیشتر از آن در بازهی xlrage قرار میگیرند (با مخفف xl). این اعداد و بازهها، پایهی طراحی API واکنشگرای Angular Flex layout هستند. به همین جهت نام این بازهها در این API به صورت مخفف xs, sm, md, lg, xl درنظر گرفته شدهاند و مورد استفاده قرار میگیرند. همچنین اگر اندازههای مدنظر از این بازهها کمتر باشند، میتوان از lt-sm, lt-md, lt-lg, lt-xl نیز استفاده کرد. در اینجا lt به معنای less than است و یا اگر بازههای مورد نیاز بیش از این اندازهها باشند میتوان با gt-xs, gt-sm, gt-md, gt-lg کار کرد. در اینجا gt به معنای greater than است.
به این مخففها «media query alias» هم گفته میشود و اکنون که لیست آنها مشخص است، تنها کافی است آنها را به API استاتیکی که پیشتر بررسی کردیم، اضافه کنیم. برای مثال:
fxLayout.sm = "..." fxLayoutAlign.md = "..." fxHide.gt-sm = "..."
معادل طراحی آن با API استاتیک Angular Flex Layout به صورت زیر است:
که در اینجا دو container را ملاحظه میکنید. ابتدا Container بیرونی جهت ارائهی ستونی از سه المان اضافه شدهاست. سپس یک Container میانی برای تعریف ردیفی از سه المان تعریف شدهاست. توسط روش "fxFlex="grow shrink basis نیز اندازههای آنها مشخص شدهاند.
اکنون که این طرحبندی دسکتاپ را داریم، چگونه باید آنرا تبدیل به طرحبندی موبایل، مانند شکل زیر کنیم؟
برای اینکار ابتدا fxLayout.xs را به سطر میانی اضافه میکنیم تا هرگاه به این اندازه رسیدیم، بجای ردیف، تبدیل به ستون شود. سپس توسط fxFlexOrder.xs، در اندازهی xs، محل قرارگیری المانهای این ستون را هم مشخص میکنیم:
همانطور که ملاحظه میکنید کار کردن با این API بسیار سادهاست و نیازی به کارکردن مستقیم با Media Queries و یا برنامه نویسی مستقیم ندارد و تمام آن در قالب HTML یک کامپوننت قابل پیاده سازی است.
یک نکته: مثال کاملی که پیشتر در این بحث مطرح شد، به همراه مثال واکنشگرا نیز هست که برای مشاهدهی اثر آنها بهتر است اندازهی مرورگر را کوچک و بزرگ کنید.
مخفی کردن و یا نمایش قسمتی از صفحه بر اساس اندازهی آن
علاوه بر media query alias هایی که عنوان شد، امکان نمایش و یا مخفی سازی قسمتهای مختلف صفحه بر اساس اندازهی صفحهی نمایشی نیز هست:
<div fxShow fxHide.xs="false" fxHide.lg="true"></div>
تغییر اندازهی قسمتی از صفحه بر اساس اندازهی آن
در مثال زیر اگر اندازهی صفحه gt-sm باشد (بیشتر از small)، اندازهی این div به 100 درصد بجای 50 درصد حالتهای دیگر، تنظیم میشود:
<div fxFlex="50%" fxFlex.gt-sm="100%"></div>
حالتهای ویژهی طراحی واکنشگرا در Angular Flex Layout
در API واکنشگرای آن حالتهای ویژهی fxshow, fxhide, ngclass و ngstyle نیز درنظر گرفته شدهاند که امکان فعالسازی آنها در اندازههای مختلف صفحه مسیر است:
<div fxShow [fxShow.xs]="isVisibleOnMobile()"></div> <div fxHide [fxHide.gt-sm]="isVisibleOnDesktop()"></div> <div [ngClass.sm]="{'fxClass-sm': hasStyle}" ></div> <div [ngStyle.xs]="{color: 'blue'}"></div>
امکان کار با API واکنشگرا از طریق برنامه نویسی
برای این منظور میتوان از سرویس ObservableMedia مانند مثال زیر استفاده کرد:
در اینجا به فعالسازی یک بازهی خاص گوش فرا خواهیم داد. برای مثال اگر اندازهی صفحه xs بود، سبب بارگذاری محتوای خاص مرتبط با موبایل خواهیم شد.
برای مطالعهی بیشتر
قسمتهای عمدهای از مطلب جاری، از ویدیوی زیر که توسط نویسندهی اصلی angular flex layout تهیه شدهاست، گردآوری شدند.
نظرات مطالب
آشنایی با ساختار ViewBag
کلمه dynamic به کامپایلر اعلام میکنه که شی که تعریف کردیم میتونه تغییر کنه یعنی انواع مختلفی به خودش بگیره . شما وقتی یک شی رو با var تعریف میکنید و یک عدد صحیح به اون اختصاص میدید، در دفعه بعد نمیتونید چیزی غیر از عدد صحیح به اون اختصاص بدین. اما با استفاده از dynamic این کار امکان پذیره.
var x = 12; //OK x = "String" //خطای کامپایل dynamic y = 12; //OK y="String"; //OK y=12.7; //OK
فرض کنید با استفاده از ابزار EF Power tools معادل Code first یک بانک اطلاعاتی موجود را تهیه کردهاید. اکنون برای استفاده از آن با گردش کاری متداول EF Code first نیاز است تا جدولی را به نام MigrationHistory نیز به این بانک اطلاعاتی اضافه کنیم. از این جدول برای نگهداری سوابق به روز رسانی ساختار بانک اطلاعاتی بر اساس مدلهای برنامه و سپس مقایسه آنها استفاده میشود. یا حتی ممکن است به اشتباه در حین کار با بانک اطلاعاتی این جدول حذف شده باشد. روش باز تولید آن توسط دستورهای پاور شل به سادگی اجرای سه دستور ذیل است:
IgnoreChanges سبب میشود تا EF فرض کند، تطابق یک به یکی بین مدلهای برنامه و ساختار جداول بانک اطلاعاتی وجود دارد. سپس بر این اساس، جدول MigrationHistory جدیدی را آغاز میکند.
سؤال: چگونه میتوان همین عملیات را با کدنویسی انجام داد؟
متد UpdateDatabase کلاس ذیل، دقیقا معادل است با اجرای سه دستور فوق :
توضیحات
MigrationScaffolder کار تولید خودکار کلاسهای cs مهاجرتهای EF را انجام میدهد. زمانیکه به متد Scaffold آن پارامتر ignoreChanges: true ارسال شود، کلاس مهاجرتی را ایجاد میکند که خالی است (متدهای up و down آن خالی تشکیل میشوند). سپس این کلاسها کامپایل شده و در حین اجرای برنامه مورد استفاده قرار میگیرند.
برای استفاده از آن، نیاز به کلاس MigrationCompiler خواهید داشت. این کلاس در مجموعه آزمونهای واحد EF به عنوان یک کلاس کمکی وجود دارد: MigrationCompiler.cs
صرفا جهت تکمیل بحث و همچنین سهولت ارجاعات آتی، کدهای آن در ذیل نیز ذکر خواهد شد:
جهت مطالعه توضیحات بیشتری در مورد CodeDom میتوان به مطلب «کامپایل پویای کد در دات نت» مراجعه کرد.
استفاده از این کلاسها نیز بسیار ساده است. یکبار دستور ذیل را در ابتدای کار برنامه فراخوانی کنید تا جدول MigrationHistory دوباره ساخته شود:
با این فرض که کلاس Configuration شما چنین شکلی را دارد:
enable-migrations add-migration Initial -IgnoreChanges update-database
سؤال: چگونه میتوان همین عملیات را با کدنویسی انجام داد؟
متد UpdateDatabase کلاس ذیل، دقیقا معادل است با اجرای سه دستور فوق :
using System.Data.Entity.Migrations; using System.Data.Entity.Migrations.Design; namespace EFTests { /// <summary> /// Using Entity Framework Code First with an existing database. /// </summary> public static class CreateMigrationHistory { /// <summary> /// Creates a new '__MigrationHistory' table. /// Enables migrations using Entity Framework Code First on an existing database. /// </summary> public static void UpdateDatabase(DbMigrationsConfiguration configuration) { var scaffolder = new MigrationScaffolder(configuration); // Creates an empty migration, so that the future migrations will start from the current state of your database. var scaffoldedMigration = scaffolder.Scaffold("IgnoreChanges", ignoreChanges: true); // enable-migrations // add-migration Initial -IgnoreChanges configuration.MigrationsAssembly = new MigrationCompiler(ProgrammingLanguage.CSharp.ToString()) .Compile(configuration.MigrationsNamespace, scaffoldedMigration); // update-database var dbMigrator = new DbMigrator(configuration); dbMigrator.Update(); } } }
MigrationScaffolder کار تولید خودکار کلاسهای cs مهاجرتهای EF را انجام میدهد. زمانیکه به متد Scaffold آن پارامتر ignoreChanges: true ارسال شود، کلاس مهاجرتی را ایجاد میکند که خالی است (متدهای up و down آن خالی تشکیل میشوند). سپس این کلاسها کامپایل شده و در حین اجرای برنامه مورد استفاده قرار میگیرند.
برای استفاده از آن، نیاز به کلاس MigrationCompiler خواهید داشت. این کلاس در مجموعه آزمونهای واحد EF به عنوان یک کلاس کمکی وجود دارد: MigrationCompiler.cs
صرفا جهت تکمیل بحث و همچنین سهولت ارجاعات آتی، کدهای آن در ذیل نیز ذکر خواهد شد:
using System; using System.CodeDom.Compiler; using System.Collections.Generic; using System.ComponentModel; using System.Data.Common; using System.Data.Entity; using System.Data.Entity.Migrations; using System.Data.Entity.Migrations.Design; using System.Data.Entity.Spatial; using System.IO; using System.Linq; using System.Linq.Expressions; using System.Reflection; using System.Resources; using System.Text; namespace EF_General.Models.Ex22 { public enum ProgrammingLanguage { CSharp, VB } public class MigrationCompiler { private readonly CodeDomProvider _codeProvider; public MigrationCompiler(string language) { _codeProvider = CodeDomProvider.CreateProvider(language); } public Assembly Compile(string @namespace, params ScaffoldedMigration[] scaffoldedMigrations) { var options = new CompilerParameters { GenerateExecutable = false, GenerateInMemory = true }; options.ReferencedAssemblies.Add(typeof(string).Assembly.Location); options.ReferencedAssemblies.Add(typeof(Expression).Assembly.Location); options.ReferencedAssemblies.Add(typeof(DbMigrator).Assembly.Location); options.ReferencedAssemblies.Add(typeof(DbContext).Assembly.Location); options.ReferencedAssemblies.Add(typeof(DbConnection).Assembly.Location); options.ReferencedAssemblies.Add(typeof(Component).Assembly.Location); options.ReferencedAssemblies.Add(typeof(MigrationCompiler).Assembly.Location); options.ReferencedAssemblies.Add(typeof(DbGeography).Assembly.Location); var embededResources = GenerateEmbeddedResources(scaffoldedMigrations, @namespace); foreach (var resource in embededResources) options.EmbeddedResources.Add(resource); var sources = scaffoldedMigrations.SelectMany(g => new[] { g.UserCode, g.DesignerCode }); var compilerResults = _codeProvider.CompileAssemblyFromSource(options, sources.ToArray()); foreach (var resource in embededResources) File.Delete(resource); if (compilerResults.Errors.Count > 0) { throw new InvalidOperationException(BuildCompileErrorMessage(compilerResults.Errors)); } return compilerResults.CompiledAssembly; } private static string BuildCompileErrorMessage(CompilerErrorCollection errors) { var stringBuilder = new StringBuilder(); foreach (CompilerError error in errors) { stringBuilder.AppendLine(error.ToString()); } return stringBuilder.ToString(); } private static IEnumerable<string> GenerateEmbeddedResources(IEnumerable<ScaffoldedMigration> scaffoldedMigrations, string @namespace) { foreach (var scaffoldedMigration in scaffoldedMigrations) { var className = GetClassName(scaffoldedMigration.MigrationId); var embededResource = Path.Combine( Path.GetTempPath(), @namespace + "." + className + ".resources"); using (var writer = new ResourceWriter(embededResource)) { foreach (var resource in scaffoldedMigration.Resources) writer.AddResource(resource.Key, resource.Value); } yield return embededResource; } } private static string GetClassName(string migrationId) { return migrationId .Split(new[] { '_' }, 2) .Last() .Replace(" ", string.Empty); } } }
استفاده از این کلاسها نیز بسیار ساده است. یکبار دستور ذیل را در ابتدای کار برنامه فراخوانی کنید تا جدول MigrationHistory دوباره ساخته شود:
CreateMigrationHistory.UpdateDatabase(new Configuration());
public class Configuration : DbMigrationsConfiguration<MyContext> { public Configuration() { AutomaticMigrationsEnabled = true; AutomaticMigrationDataLossAllowed = true; } }