Change Page Layout Dynamically Using jQuery Layout Plug in
در بین توسعه دهندگان، خیلی رایج است، چند نسخه از Application خود را داشته باشند که Environmentهای مختلفی را مورد هدف قرار می‌دهد؛ مثل development که مربوط به حالت توسعه می‌باشد و production که مربوط به حالت ارائه نهایی است. هر Environment تعدادی متغیر منحصر بفرد خود را خواهد داشت؛ مثلAPI Endpoint ، app version و ... . انگیولار تنظیمات Environment را فراهم کرده است تا بتوانیم متغیر‌های منحصر بفردی را برای هر Environment، تعریف کنیم.
اگر شما می‌خواهید به صورت خودکار یک flag را اعمال کنید، اجازه بدهید بگوییم prod-- ، در این حالت angular compiler متغیر API endpoint را با API endpoint مربوط به حالت ارائه نهایی برای شما جایگزین می‌کند. چیزی که شما نمی‌خواهید این است که به صورت دستی endpoint را قبل از build پروژه، تغییر دهید. این موضوع شانس دچار اشتباه شدن را کاهش می‌دهد.
Dealing with only 2 Environments
به صورت پیش فرض انگیولار از دو Environment پشتیبانی می‌کند. فایلهای Environment در دایرکتوری environment آن قرار دارند که در مسیر زیر می‌باشد:
داخل دایرکتوری src، در ریشه WorkSpace یا پوشه پروژه شما( آشنایی با مفهوم WorkSpace در انگیولار ).
در داخل دایرکتوری environment، دو فایل با نامهای environment.ts و environment.prod.ts وجود دارند. همانطور که ممکن است حدس زده باشید، فایل دوم برای حالت ارائه نهایی می‌باشد؛ در حالیکه فایل اول برای حالت توسعه است و همچنین به عنوان Environment پیش فرض نیز می‌باشد. Angular CLI compiler ، به صورت خودکار فایل اول را با فایل دوم، هر زمان که شما build را با prod-- انجام میدهید، جایگزین می‌کند:
ng build --prod
اگر فایل environment.ts را باز کنید، خصوصیت production به false تنظیم شده است؛ درحالیکه در environment.prod.ts خصویت production به true تنظیم شده‌است. همه متغیرها بر اساس Environment مشخصی، تفاوت ایجاد می‌کنند که به صورت مناسب باید در دو فایل قرار داده شوند:
// environment.ts environment variables
export const environment = {
production: false,
APIEndpoint: 'https://dev.endpoint.com'
};
// environment.prod.ts environment variables
export const environment = {
production: true,
APIEndpoint: 'https://prod.endpoint.com'
}; برای دستیابی به این متغیرها، environment را import کرده و از آن همانند زیر استفاده می‌کنیم:
import { environment } from './../environments/environment'; که به صورت زیر از آن استفاده می‌شود:
const APIEndpoint = environment.APIEndpoint;
Dealing with 3 or More Environment
این موضوع خیلی رایج است که برای Application های خود، بیش از دو Environment داشته باشیم. ممکن است که شما نیاز داشته باشید به:
staging environment ، beta environment ، production environment ، development environment و ... . انگیولار یک راه را برای ما فراهم کرده است که به صورت دستی Environmentهای بیشتری را که ممکن است نیاز داشته باشیم، اضافه کنیم. در اینجا ما نیاز به دو Environment دیگر به نامهای staging و beta داریم. کار را با ایجاد کردن دو فایل دیگر در کنار environment های موجود شروع می‌کنیم:
1-environment.staging.ts
2-environment.beta.ts
سپس هر کدام از آنها را به صورت زیر ویرایش می‌کنیم:
// environment.staging.ts environment variables
export const environment = {
production: true
APIEndpoint: "https://staging.endpoint.com"
};
// environment.beta.ts environment variables
export const environment = {
production: true,
APIEndpoint: "https://beta.endpoint.com"
}; در ادامه نیاز است در فایل angular.json، تنظیمات را تغییر دهیم ( که در ریشه Workspace می‌باشد) . با انجام اینکار، این امکان به Angular CLI داده خواهد شد که دو environment جدید ایجاد شده را شناسایی و در صورت نیاز از آنها استفاده کند.
در ابتدا فایل angular.json را باز می‌کنیم و کلید configurations را می‌یابیم که در مسیر زیر می‌باشد:
projects -> yourappname -> architect -> build -> configurations
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true
}
} سپس از کلید production و تنظمیات درون آن، یک نمونه تهیه می‌کنیم و در زیر کلید production قرار می‌دهیم. سپس کلید production را به staging تغیر می‌دهیم. در قسمت fileReplacements مقدار کلید with را از
"with":"src/environments/environment.prod.ts"
"with":"src/environments/environment.staging.ts"
اکنون تنظیمات جدید شما برای staging environment باید به صورت زیر باشد:
"configurations": {
"production": {
// ...
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": false,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true
}
} در ادامه همین روال را برای beta environment هم تکرار کنید.
نکته
ممکن است شما نیاز داشته باشید تا تنظیمات بالا را به حالتی دقیق‌تر نسبت به environment مورد نظر اصلاح کنید. مثلا ممکن است نیاز داشته باشید، Service worker را در حالت staging فعال نگه دارید و در حالت beta آن را غیر فعال کنید که این تضمین می‌کند وقتی ریفرش انجام می‌شود، app ، Service worker و منابع مربوط به آن را در مرورگر کش نکرده باشد.
Building your App
در نهایت برای build کردن application خود با environmentهای سفارشی ایجاد شده، می‌توانید از پرچم configurations-- استفاده کنید؛ همانند زیر:
//for staging environment ng build --configuration=staging //for beta environment ng build --configuration=beta
و در نهایت برای استفاده کردن از environment پیش فرض، استفاده از دستور زیر به تنهایی کافی می‌باشد:
//for production environment ng build --prod //for dev environment ng build
اکنون شما می‌توانید پروژه انگیولار خود را با هر تعداد environment ای که دوست دارید، configure کنید.
در قسمت ششم، یک صفحه ساده برای لاگین نوشتیم که عملا کار خاصی نمی‌کرد. حال می‌خواهیم در این قسمت روی UI آن کمی کار کنیم. دقت کنید که هدف این قسمت، آموزش زیبا سازی صفحات نیست؛ بلکه هدف، آشنایی شما با تنظیمات مهم UI است.
صفحه Login ای که در قسمت قبل نوشته شد، خود یک Content Page است و دارای یک Stack Layout با چینش عمودی است. داخل آن دو Entry برای گرفتن نام و نام کاربری وجود دارد و یک Button.
مشکلی که صفحه لاگین دارد این است که اگر در یک تبلت 10 اینچی هم باز شود، عرض Entryها و Button هم 10 اینچ می‌شوند که ما قطعا این را نمی‌خواهیم. اینکه چه می‌خواهیم خود یک سوال است! ولی یکی از راه‌های متداول و آسان که برای صفحه لاگین هم قابلیت استفاده دارد این است که از المان‌های صفحه درخواست می‌شود مثلا 5 سانتی متر باشند. حال اگر صفحه نمایش بیشتر از 5 سانتی متر فضا داشت، دلیلی و ارزشی برای بیشتر بزرگ شدن المان‌های روی صفحه نیست. البته اگر صفحه نمایش کوچکتر از 5 سانتی متر هم باشد، اینکه المان‌های روی صفحه اصرار به 5 سانتی متر ماندن کنند، نتیجه جالبی نخواهد داشت! برای دستیابی به بهترین نتیجه، شما می‌توانید از WidthRequest و HeightRequest استفاده کنید. وقتی WidthRequest را برابر با 5 سانتی متر قرار دهید، در واقع دارید درخواست می‌کنید که این مقدار شود. اگر فضا بیشتر شود، المان مربوطه بزرگتر از 5 سانتی متر نخواهد شد. اگر فضا کل فضایی که دارد، کمتر از 5 سانتی متر باشد و مثلا 4 سانتی متر باشد، آن هم 4 سانتی متر خواهد شد.
برای شروع سؤال پیش می‌آید که این WidthRequest را به کدامیک از Tagها بدهیم؟ Content Page یا Stack Layout یا هر کدام از Entryها و Button لاگین؟ اساسا وظیفه Layout به عهده Page نیست. در اکثر مواقع، اینکار با خود Stack Layout انجام می‌شود ( یا در سایر مثال‌ها با Grid - Flex Layout و ... ) تنظیم WidthRequest برابر با 5 سانتی متر، آن هم برای تک تک Entryها و Button مربوطه هم اساسا ایده جالبی نیست.
برای این که Width Request برابر با 5 سانتی متر شود، باید به آن مقدار 320 داده شود. هر 64 تا می‌شود یک سانتی متر و 320 = 64 * 5
اگر Width Request را در مثال Login برابر با 320 قرار دهید، می‌بینید که کوچک نمی‌شود و کماکان کل فضای صفحه را می‌گیرد! علت این است که هر المان روی صفحه، از جمله Stack Layout، علاوه بر WidthRequest و HeightRequest که عرض و طول Child را نسبت به Parent مشخص می‌کند، دارای VerticalOptions و HorizontalOptions نیز هست. VerticalOptions و HorizontalOptions در کنار WidthRequest و HeightRequest، رابطه بین یک Parent و Child را مشخص می‌کنند (در این مثال رابطه بین Content Page و Stack Layout به عنوان Parent و Child). به صورت پیش فرض هر Child ( در اینجا Stack Layout ) به صورت عمودی و افقی Parent اش ( در اینجا Content Page ) را Fill می‌کند. علت پیش فرض بودن این رفتار این است که کمترین سربار ممکن را از لحاظ Performance دارد و خیلی از جاها هم مفید است. در اینجا چون Stack Layout قصد دارد Parent خود را Fill کند، دیگر WidthRequest برایش معنی ندارد. در ادامه من VerticalOptions را برابر با Start و HorizontalOptions را برابر با Center می کنم. این باعث می‌شود که Stack Layout ما از لحاظ عمودی در بالا و از لحاظ افقی در وسط Content Page قرار بگیرد و بیش از پنج سانتی متر بزرگ نشود و در صورتیکه Content Page خود فضای کمی داشته باشد ( مثلا در یک گوشی موبایل با صفحه نمایش خیلی کوچک باشد )، Stack Layout حتی از پنج سانتی متر کوچکتر هم می‌شود.
دقت کنید که دو Entry و Button داخل Stack Layout نیز Fill هستند، پس داخل Parent خود یعنی Stack Layout را پر می‌کنند. اگر به Stack Layout یک Background دهید، درک بهتری از آن چه که دارد اتفاق می‌افتد، خواهید داشت.
<StackLayout
BackgroundColor="LightYellow"
HorizontalOptions="Center"
Orientation="Vertical"
VerticalOptions="Start"
WidthRequest="320">
مشکل دیگری که وجود دارد این است که اگر بابت کمبود فضا، Stack Layout کوچکتر از 5 سانتی متر شود، از بغل، کامل، به کناره‌های Parent خود می‌چسبد که اصلا جالب نیست. برای رفع این مشکل می‌توانیم از Padding (حاشیه داخلی) و Margin (حاشیه خارجی) استفاده کنیم. در عکس زیر، Background مربوط به Content Page را قرمز و Stack Layout را آبی کرده‌ایم. با اختصاص دادن یک سانتی متر (64) به Padding و نیم سانت به Margin، می‌توانید در عکس زیر تاثیر آن را ببینید:
در سمت راست، بالا و چپ Stack Layout، به اندازه نیم سانت حاشیه قرمز می‌بینید که تاثیر Margin است. همچنین المان‌های داخل Stack Layout نیز هر کدام یک سانت از اطراف فاصله دارند که تاثیر Padding است. در پایین Stack Layout، تا جایی که Content Page بزرگ شود، فضای قرمز می‌بینید، نیم سانت از این فضای قرمز به خاطر Margin بوده، ولی باقی مربوط به این است که VerticalOptions را برای Stack Layout، بر روی Start تنظیم کرده‌ایم که باعث می‌شود Stack Layout بالای Content Page قرار بگیرد و زیر آن تماما قرمز شود. حتی اگر "عرض" صفحه نمایش بزرگتر از عکس قبلی می‌بود، فضای قرمز از راست و چپ بیشتر می‌شد که نیم سانت آن بابت Margin بوده و بیشتر از آن مربوط به HorizontalOptions است که برای Stack Layout روی Center تنظیم شده.
با توجه به اینکه Page - Layout - Controlها در Android-iOS-Windows به معادل‌های Native خود تبدیل می‌شوند و برای مثال ظاهر Button در این سه پلتفرم متفاوت است، ممکن است Padding ای که به یک کنترل داده ایم و در اندروید خوب به نظر می‌رسد، در iOS مقدار دیگری را لازم داشته باشد. مثلا در Android مقدار 2 و در iOS مقدار 3 لازم داشته باشد. یا ممکن است این مقدار به ازای این که در موبایل، تبلت یا دسکتاپ باشیم، لازم باشد که متفاوت باشد. در Xaml ما دو امکان OnPlatform و OnIdiom را داریم که هر Property اعم از Font Size - Padding - Text و ... را می‌توان به ازای هر شرایطی با مقداری متفاوت مقدار دهی نمود. برای مثال داریم:
<StackLayout
Margin="{OnPlatform Android=3,
iOS='0,0,20,0',
UWP='2'}"
Padding="{OnIdiom Default=2,
Tablet=3}" ... البته Propertyهای مهم دیگری نیز در UI تاثیر گذار هستند. برای مثال Opacity برای تنظیم شفافیت، FlowDirection برای تنظیم Right to left و Left to right بودن و خیلی Propertyهای دیگه که به مرور و با بیشتر کار کردن با Xamarin Forms با آنها آشنا می‌شوید.
در قسمت بعدی به نوشتن منطق می‌پردازیم؛ نحوه نمایش دادن خطا و رفتن از صفحه‌ای به صفحه‌ی دیگر.
INTRODUCTION TO CSS GRID LAYOUT
روشی برای استفاده یک اکشن از چند layout مختلف در یک برنامه وجود داره ؟
- Modal progress dialog stays open permanently even when IDE is responsive ('Preparing Solution', 'Creating Project', Edit and Continue, etc).
- PackageId:OpenJDKV1;PackageAction:Uninstall;ReturnCode:0;.
- .sql files are empty.
- Properties Window in Forms Designer shows vertical scrollbar without drag handle with automatic scaling on 4K display in Visual Studio 2019 RC.
- VSIXInstaller.exe crashes randomly when installing multiple extensions sequentially in Visual Studio 2019 RC.1.
- MSBuild failure when executing multi-line Exec commands.
- You can now use Time Travel Debugging with the snapshot debugger on ASP.NET Apps running on an Azure VM. Please note that this feature may not work in all Azure regions at release.
- بررسی کنید آیا return PartialView دارید یا return View ؟ حالت return View فایل layout را هم لحاظ می‌کند.
- همچنین امکان نال تعریف کردن layout به صورت صریح هم وجود دارد:
- همچنین امکان نال تعریف کردن layout به صورت صریح هم وجود دارد:
@{
Layout = null;
} 
طراحی یک معماری خوب و مناسب یکی از عوامل مهم تولید یک برنامه
کاربردی موفق می‌باشد. بنابراین انتخاب یک ساختار مناسب به منظور تولید برنامه
کاربردی بسیار مهم و تا حدودی نیز سخت است. در اینجا یاد خواهیم گرفت که چگونه یک
طراحی مناسب را انتخاب نماییم. همچنین روش‌های مختلف تولید برنامه‌های کاربردی را
که مطمئنا شما هم از برخی از این روشها استفاده نمودید را بررسی می‌نماییم و مزایا
و معایب آن را نیز به چالش می‌کشیم.
ضد الگو (Antipattern) – رابط کاربری هوشمند (Smart UI)
با استفاده از Visual Studio یا به اختصار VS، می‌توانید برنامه‌های کاربردی را به راحتی تولید نمایید. طراحی رابط کاربری به آسانی عمل کشیدن و رها کردن (Drag & Drop) کنترل‌ها بر روی رابط کاربری قابل انجام است. همچنین در پشت رابط کاربری (Code Behind) تمامی عملیات مربوط به مدیریت رویدادها، دسترسی به داده ها، منطق تجاری و سایر نیازهای برنامه کاربردی، کد نویسی خواهند شد. مشکل این نوع کدنویسی بدین شرح است که تمامی نیازهای برنامه در پشت رابط کاربری قرار می‌گیرند و موجب تولید کدهای تکراری، غیر قابل تست، پیچیدگی کدنویسی و کاهش قابلیت استفاده مجدد از کد می‌گردد.
به این روش کد نویسی Smart UI می‌گویند که موجب تسهیل تولید برنامه‌های کاربردی می‌گردد. اما یکی از مشکلات عمده‌ی این روش، کاهش قابلیت نگهداری و پشتیبانی و عمر کوتاه برنامه‌های کاربردی می‌باشد که در برنامه‌های بزرگ به خوبی این مشکلات را حس خواهید کرد.
از آنجایی که تمامی برنامه نویسان مبتدی و تازه کار، از جمله من و شما در روزهای اول برنامه نویسی، به همین روش کدنویسی می‌کردیم، لزومی به ارائه مثال در رابطه با این نوع کدنویسی نمی‌بینم.
تفکیک و جدا سازی اجزای برنامه کاربردی (Separating Your Concern)
راه حل رفع مشکل Smart UI، لایه بندی یا تفکیک اجزای برنامه از یکدیگر می‌باشد. لایه بندی برنامه می‌تواند به شکل‌های مختلفی صورت بگیرد. این کار می‌تواند توسط تفکیک کدها از طریق فضای نام (Namespace)، پوشه بندی فایلهای حاوی کد و یا جداسازی کدها در پروژه‌های متفاوت انجام شود. در شکل زیر نمونه ای از معماری لایه بندی را برای یک برنامه کاربردی بزرگ می‌بینید.
به منظور پیاده سازی یک برنامه کاربردی لایه بندی شده و تفکیک اجزای برنامه از یکدیگر، مثالی را پیاده سازی خواهیم کرد. ممکن است در این مثال با مسائل جدید و شیوه‌های پیاده سازی جدیدی مواجه شوید که این نوع پیاده سازی برای شما قابل درک نباشد. اگر کمی صبر پیشه نمایید و این مجموعه‌ی آموزشی را پیگیری کنید، تمامی مسائل نامانوس با جزئیات بیان خواهند شد و درک آن برای شما ساده خواهد گشت. قبل از شروع این موضوع را هم به عرض برسانم که علت اصلی این نوع پیاده سازی، انعطاف پذیری بالای برنامه کاربردی، پشتیبانی و نگهداری آسان، قابلیت تست پذیری با استفاده از ابزارهای تست، پیاده سازی پروژه بصورت تیمی و تقسیم بخشهای مختلف برنامه بین اعضای تیم و سایر مزایای فوق العاده آن می‌باشد.
1- Visual Studio را باز کنید و یک Solution خالی با نام SoCPatterns.Layered ایجاد نمایید.
· جهت ایجاد Solution خالی، پس از انتخاب New Project، از سمت چپ گزینه Other Project Types و سپس Visual Studio Solutions را انتخاب نمایید. از سمت راست گزینه Blank Solution را انتخاب کنید.
2- بر روی Solution کلیک راست نموده و از گزینه Add > New Project یک پروژه Class Library با نام SoCPatterns.Layered.Repository ایجاد کنید.
3- با استفاده از روش فوق سه پروژه Class Library دیگر با نامهای زیر را به Solution اضافه کنید:
- SoCPatterns.Layered.Model
- SoCPatterns.Layered.Service
- SoCPatterns.Layered.Presentation
4- با توجه به نیاز خود یک پروژه دیگر را باید به Solution اضافه نمایید. نوع و نام پروژه در زیر لیست شده است که شما باید با توجه به نیاز خود یکی از پروژه‌های موجود در لیست را به Solution اضافه کنید.
- Windows Forms Application (SoCPatterns.Layered.WinUI)
- WPF Application (SoCPatterns.Layered.WpfUI)
- ASP.NET Empty Web
Application (SoCPatterns.Layered.WebUI)
- ASP.NET MVC 4 Web
Application (SoCPatterns.Layered.MvcUI)
5- بر روی پروژه SoCPatterns.Layered.Repository کلیک راست نمایید و با انتخاب گزینه Add Reference به پروژه‌ی SoCPatterns.Layered.Model ارجاع دهید.
6- بر روی پروژه SoCPatterns.Layered.Service کلیک راست نمایید و با انتخاب گزینه Add Reference به پروژه‌های SoCPatterns.Layered.Model و SoCPatterns.Layered.Repository ارجاع دهید.
7- بر روی پروژه SoCPatterns.Layered.Presentation کلیک راست نمایید و با انتخاب گزینه Add Reference به پروژه‌های SoCPatterns.Layered.Model و SoCPatterns.Layered.Service ارجاع دهید.
8- بر روی پروژه‌ی UI خود به عنوان مثال SoCPatterns.Layered.WebUI کلیک راست نمایید و با انتخاب گزینه Add Reference به پروژه‌های SoCPatterns.Layered.Model، SoCPatterns.Layered.Repository، SoCPatterns.Layered.Service و SoCPatterns.Layered.Presentation ارجاع دهید.
9- بر روی پروژه‌ی UI خود به عنوان مثال SoCPatterns.Layered.WebUI کلیک راست نمایید و با انتخاب گزینه Set as StartUp Project پروژه‌ی اجرایی را مشخص کنید.
10- بر روی Solution کلیک راست نمایید و با انتخاب گزینه Add > New Solution Folder پوشه‌های زیر را اضافه نموده و پروژه‌های مرتبط را با عمل Drag & Drop در داخل پوشه‌ی مورد نظر قرار دهید.
- 1. UI
- § SoCPatterns.Layered.WebUI
- 2. Presentation Layer
- § SoCPatterns.Layered.Presentation
- 3. Service Layer
- § SoCPatterns.Layered.Service
- 4. Domain Layer
- § SoCPatterns.Layered.Model
- 5. Data Layer
- § SoCPatterns.Layered.Repository
- توجه
داشته باشید که پوشه بندی برای مرتب سازی لایه‌ها و دسترسی راحت‌تر به آنها می‌باشد.
پیاده سازی ساختار لایه بندی برنامه به صورت کامل انجام شد. حال به پیاده سازی کدهای مربوط به هر یک از لایه‌ها و بخش‌ها می‌پردازیم و از لایه Domain شروع خواهیم کرد.
Only Material Web Components that utilized Material UI are being put on pause. The Angular CDK, Material for Angular and the Material UI Design System as a whole are not being affected by this announcement.
Asp.Net Core Web API CRUD with Angular 16
In this .Net 7 tutorial, we have implemented CRUD operations in asp.net core web api with angular 16 using entity framework core and SQL server.
