ساختار گزارش خاص
یک Flex Container متداول به این صورت کار میکند:
این کلاسها که موارد داخل پرانتز آنها اختیاری است، المان را تبدیل به یک المان Flexbox میکنند. حالت نمایشی پیشفرض آنها block است؛ اما اگر نیاز بود میتوان آنها را تبدیل به in-line نیز کرد. بنابراین سادهترین Flex Container را میتوان با افزودن کلاس d-flex ایجاد کرد.
بر روی یک Flex Container میتوان کلاسهای تعیین جهت را نیز تعریف کرد:
به این ترتیب میتوان آیتمها را به صورت ردیفها و یا ستونهایی، نمایش داد. مقدار row در اینجا به صورت پیشفرض اعمال میشود. بنابراین ذکر کلاس خالی flex به معنای قرار دادن المانها در طی چندین ردیف در صفحه است. در اینجا استفادهی از reverse، نمایش المانها را از راست به چپ میسر میکند.
در یک Flex Container امکان تعیین ترتیب عناصر نیز وجود دارد:
این مورد را در مطلب «طرحبندی صفحات وب با بوت استرپ 4 - قسمت دوم » بررسی کردیم. کلاس order را علاوه بر ستونها، بر روی هر دربرگیرندهای که دارای کلاس d-flex است نیز میتوان اعمال کرد.
همچنین امکان تنظیم فواصل بین آیتمها نیز در یک Flex Container پیش بینی شدهاست:
برای مثال استفادهی از مقدار تراز center، روش بسیار مناسبی برای قرار دادن عناصر، در میانهی افقی صفحه است. این مورد را نیز در قسمت قبل بررسی کردیم.
میتوان نحوهی Wrap المانها را بر اساس فضای خالی در یک Flex Container به صورت زیر تنظیم کرد:
که در اینجا دو مقدار wrap و nowrap قابل تنظیم است. در حالت wrap، اگر آیتمها با اندازهی خودشان در ردیف جاری جا نشدند، به سطر یا سطرهای بعدی منتقل خواهند شد. حالت پیشفرض nowrap است.
برای تغییر تراز عمودی المانها در یک Flex Container از کلاس align-content استفاده میشود:
این مورد را نیز در قسمت قبل بررسی کردیم و همانند کار با ستونها میباشد.
یک مثال: بررسی ویژگیهای یک Flex Container
<head> <style> .item { background: #f0ad4e; text-align: center; width: 150px; height: 30px; border: 1px solid white; } </style> </head> <body> <div class="container bg-danger"> <div class="bg-info" style="height:100vh"> <div class="item">Exotic</div> <div class="item">Grooming</div> <div class="item">Health</div> <div class="item">Nutrition</div> <div class="item">Pests</div> <div class="item">Vaccinations</div> </div> </div> </body>
در ابتدا کلاس d-flex را به div داخل container اضافه میکنیم:
<div class="bg-info d-flex" style="height:100vh">
و اگر جهت این Flex Container را به صورت صریح مشخص کنیم:
<div class="bg-info d-flex flex-column" style="height:100vh">
و یا اگر بخواهیم آیتمها را از راست به چپ به صورت یک ردیف نمایش دهیم میتوان از flex-row-reverse استفاده کرد:
<div class="bg-info d-flex flex-row-reverse" style="height:100vh">
و اگر بجای row در این حالت column را مقدار دهی کنیم:
<div class="bg-info d-flex flex-sm-column-reverse" style="height:100vh">
آیتمها از پایین صفحه شروع خواهند شد. البته در این مثال break-point از نوع sm نیز ذکر شدهاست تا پس از گذر از این اندازهی صفحه، چنین اتفاقی رخ دهد.
و یا اگر بخواهیم آیتمها از راست به چپ در طی یک ردیف، پس از اندازهی صفحهی sm و همچنین در میانهی صفحه ظاهر شوند، میتوان از کلاس justify-content استفاده کرد:
<div class="bg-info d-flex flex-sm-row-reverse justify-content-center" style="height:100vh">
و اگر wrap را فعال کنیم:
<div class="bg-info d-flex flex-sm-row-reverse justify-content-center flex-wrap" style="height:100vh">
اگر آیتمها با اندازهی اصلی خودشان، در ردیف جاری جا نشدند، به سطرهای بعدی منتقل خواهند شد.
اگر nowrap را فعال کنیم:
<div class="bg-info d-flex flex-sm-row-reverse justify-content-center flex-nowrap" style="height:100vh">
و با فعالسازی align-content-start، تمام آیتمها را به سمت بالای صفحه هدایت میکند و align-content-end، آنها را از پایین صفحه شروع خواهد کرد:
<div class="bg-info d-flex flex-sm-row-reverse justify-content-center flex-wrap align-content-start" style="height:100vh">
کنترل آیتمهای قرار گرفتهی درون یک Flex Container در بوت استرپ 4
علاوه بر امکان کنترل ویژگیهای یک Flex Container، اجزای قرار گرفتهی درون آنها را نیز میتوان کنترل کرد و اینکار توسط کلاس align-self میسر است:
این مورد نیز همانند توضیحات کلاس align-self اعمالی به ستونها است که در قسمت قبل بررسی کردیم.
به علاوه در اینجا امکان تعریف floating elements نیز مسیر است که شبیه به دسترسی به امکانات CSS در بوت استرپ است با امکان تنظیم break-points:
فرض کنید به تمام آیتمهای داخل Flex Container کلاس float-left را اضافه کردهایم. در این حالت Container قابلیت ردیابی اندازهی این آیتمها را از دست میدهد. به همین جهت با اعمال کلاس clearfix بوت استرپ به container، مجددا امکان ردیابی این آیتمها را پیدا میکند.
کلاسهای تعریف margin و padding در بوت استرپ 4
در بوت استرپ 4 کلاسهای ویژهای برای ایجاد margin و padding بین عناصر در نظر گرفته شدهاند که خلاصهی آنها فرمول زیر است:
ابتدا با تعریف یک خاصیت شروع میشود؛ مانند m یا p، برای کنترل margin و padding. سپس لبهای که باید به آن اعمال شود بدون فاصله و یا - ذکر میشود؛ مانند mt به معنای margin-top. در این فرمول x به معنای اعمال همزمان به چپ و راست است و y به معنای اعمال همزمان به بالا و پایین و اگر میخواهید آیتمهای کناری آیتم جاری را به دو طرف لبهها هدایت کنید از mx-auto استفاده کنید.
در اینجا امکان اعمال یک break-point اختیاری نیز وجود دارد. در آخر اندازه ذکر میشود که بین 0 تا 5 متغیر است.
یک مثال: اعمال کلاسهای padding و margin بوت استرپ 4
<head> <style> .item { background: #f0ad4e; text-align: center; border: 1px solid white; } </style> </head> <body> <div class="container bg-danger"> <div class="bg-info d-flex"> <div class="item">Exotic</div> <div class="item">Grooming</div> <div class="item bg-danger ml-3 my-sm-3 pb-3 pt-5">Health</div> <div class="item">Nutrition</div> <div class="item">Pests</div> <div class="item">Vaccinations</div> </div> </div> </body>
نمایش و مخفی سازی عناصر در بوت استرپ 4
کلاس invisible سبب میشود تا المانی در صفحه نمایش داده نشود، اما این المان همچنان فضای اختصاصی خود را خواهد داشت. کلاس visible به معنای نمایان بودن المانی تنها برای screen readers است (دستگاههای کمکی معلولها).
اما روش اصلی نمایش و یا مخفی سازی عناصر در بوت استرپ 4، استفاده از خاصیت display است:
برای مثال با انتساب کلاس d-sm-none به المانی، میتوان سبب مخفی شدن آن پس از گذر از sm شد.
امکان تعیین اندازهی عناصر در بوت استرپ 4
بوت استرپ 4 تعدادی کلاس ویژه را برای تعیین اندازهی عناصر نیز افزودهاست:
در اینجا w=width، h=height، mw=max-height و mh=max-height است با مقادیر 25، 50، 75 و 100 و مقدار پیشفرض آن 100 است (یعنی پوشاندن کل container).
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_06.zip
در نرم افزارهای بزرگ و چند کاربره، اتصال به بانک اطلاعاتی کامپیوتر سرور، یکی از نیازهای اساسی برنامه نویسان محسوب میگردد. در این بخش با دو اصطلاح بسیار مهم سروکار داریم.
1. کلاینت (Client): منظور از کلاینت کامپیوتری است که میخواهد به سرور متصل گردد و از SQL کامپیوتر سرور خدماتی را دریافت نماید.
2. سرور (Server): کامپیوتری است که میخواهیم به آن متصل شویم و دادهها را بصورت متمرکز بر روی آن ذخیره و بازیابی نماییم.
به دو روش میتوان به سرور متصل شد:
1. Windows Authentication
در این روش جهت اتصال به بانک اطلاعاتی، کامپیوتر مبدا یا Client باید عضو شبکه ای باشد کهServer در آن وجود دارد. در واقع برای شبکه هایی استفاده میشوند که دارای Domain می باشند وClient به عنوان یک کاربر شناخته شده در سرور تعریف شده است.
2. SQL Authentication
در این روش کلاینت به عنوان یک کاربر یا Login در SQL تعریف شده است و دارای نام کاربری و رمز عبور میباشد.
جهت اتصال از راه دور به یک سرور دارای SQL، باید تنظیمات زیر را برای کامپیوتر سرور انجام دهیم:
1. به SQL Server کامپیوتر سرور متصل شوید.
2. در پنجره Object Explorer بر روی نام سرور (اولین آیتم موجود در لیست) کلیک راست کنید و گزینهProperties را انتخاب نمایید.
3. در پنجره ظاهر شده (Server Properties) و در قسمت Select a page (سمت چپ پنجره) بر رویSecurity کلیک کنید.
4. در سمت راست پنجره گزینه SQL Server and Windows Authentication mode را انتخاب کنید.
5. دکمه OK را انتخاب کنید. پنجره پیغامی مبنی بر Restart کردن سرور نمایش داده میشود. این پنجره را تایید کنید.
6. مجددا بر روی نام سرور کلیک راست کنید و گزینه Restart را انتخاب نموده و در پیغام ظاهر شده Yesرا انتخاب نمایید.
تا به اینجا سرور آماده پذیرش اتصال از راه دور بصورت SQL Authentication می باشد. حال نوبت به تعریف یک Login می باشد تا توسط این Login بتوانید به سرور از راه دور متصل شوید. مراحل زیر را برای تعریفLogin دنبال کنید:
1. در پنجره Object Explorer به مسیر Security > Logins بروید.
2. بر روی پوشه Logins کلیک راست نموده و گزینه New Login… را انتخاب نمایید.
3. در پنجره ظاهر شده در بخش Login name نامی را به کاربر اختصاص دهید. (به عنوان مثال user1)
4. گزینه SQL Server authentication را انتخاب نموده و در بخش Password و Confirm password رمز عبوری را به این کاربر اختصاص دهید. (به عنوان مثال abc123)
5. گزینه Enforce password policy را از حالت انتخاب خارج کنید تا رمز عبور را از قید سیاستهای رمزگذاری ویندوز خارج کنید.
6. در قسمت Select a page (سمت چپ پنجره) بر روی Server Roles کلیک کنید.
7. در سمت راست پنجره گزینه sysadmin یا هر نوع دسترسی دیگری را که مایل هستید انتخاب نمایید.
توجه: با انتخاب sysadmin کاربر ایجاد شده به کل سرور و بانکهای اطلاعاتی دسترسی کامل یاAdmin دارد. اگر نمیخواهید کاربر چنین دسترسی داشته باشد، در بخش فوق فقط گزینه public انتخاب شده باشد.
8. در قسمت Select a page (سمت چپ پنجره) بر روی User Mapping کلیک کنید. در این بخش نحوه دسترسی کاربر را به بانکهای اطلاعاتی موجود، مشخص میکنیم.
9. در سمت راست پنجره و در بخش Users mapped to this login یک یا چند بانک اطلاعاتی را که میخواهید توسط این Login قابل دسترسی باشند را انتخاب نمایید.
10. پس از انتخاب هر بانک اطلاعاتی، در قسمت پایین (Database role membership for:) نوع دسترسی کاربر به آن Database را انتخاب کنید. در اینجا من db_owner را انتخاب میکنم تا کاربر دسترسی کامل به بانک اطلاعاتی انتخاب شده را داشته باشد.
11. دکمه OK را انتخاب کنید تا Login مورد نظر ساخته شود.
حالا میتوانید از راه دور و حتی از روی خود سرور با کاربر ایجاد شده به سرور متصل شوید. برای این منظور SQL را Disconnect نمایید و یا یکبار SQL Server Management Studio (SSMS) را ببندید و دوباره اجرا نمایید. در پنجره Connect to Server اطلاعات زیر را وارد نمایید:
Server name :نام یا IP سرور (به عنوان مثال 192.168.0.1)
Authentication: انتخاب گزینه SQL Server Authentication
Login: طبق مثال user1
Password: طبق مثال abc123
پس از ورود با مشخصات فوق فقط میتوانید به بانک اطلاعاتی دسترسی باشید که در قسمت User Mapping انتخاب کرده بودید. اگر sysadmin را انتخاب کرده باشید به تمامی بانکهای اطلاعاتی موجود دسترسی دارید.
برخی مشکلات اتصال از راه دور
ممکن است در زمان اتصال از راه دور با مشکل عدم امکان اتصال به سرور مواجه شوید. برای این منظور و اطمینان از صحت تنظیمات سرور، موارد زیر را در سرور بررسی نمایید تا بدرستی تنظیم شده باشند:
1. به مسیر Start > All Programs > Microsoft SQL Server 2008/2005 > Configuration Tools > SQL Server Configuration Manager مراجعه کنید و موارد زیر را بررسی نمایید:
1.1. بر روی SQL Server Services کلیک کنید و در سمت راست پنجره بررسی کنید که ستون Stateمربوط به SQL Server Browser و SQL Server در وضعیت Running باشد.
1.2. بر روی آیتمهای زیر مجموعه SQL Server Network Configuration کلیک کنید و در سمت راست پنجره بررسی کنید که آیتم های Shared Memory، Named Pipes و TCP/IP در وضعیت Enabled باشند.
1.3. بر روی آیتم SQL Native Client Configuration > Client Protocols کلیک کنید و در سمت راست پنجره بررسی کنید که آیتم های Shared Memory، Named Pipes و TCP/IP در وضعیت Enabled باشند.
2. بررسی کنید که فایروال سیستم سرور غیر فعال باشد و یا SQL Server به برنامه های Trust فایروال اضافه شده باشد.
<form action="/rest/login" method="POST"> <input name="username" required> <input type="password" name="password" required> </form>
محتوا یا content به معنای المانهایی هستند که درون یک المان قرار میگیرند. برای مثال در اینجا المان <form> دارای محتوایی متشکل از دو المان <input> است و دون المان <input> دارای محتوایی نیستند.
از ویژگیها و یا attributes، برای ارائهی اطلاعات بیشتر و یا تعیین حالت عناصر استفاده میشود. برای نمونه در اینجا المان <form> دارای دو ویژگی action و method است که برای ارائهی اطلاعاتی بیشتر جهت تعیین روش و محل ارسال اطلاعات به سرور از آنها استفاده میشود. همچنین میتوان ویژگیهای سفارشی را نیز توسط ویژگیهای شروع شدهی با -data نیز به المانها اضافه کرد که جزئی از استاندارد HTML 5 است. هرچند میتوان ویژگی کاملا غیرمتعارفی مانند myproject-uuid را نیز به یک المان اضافه کرد. این مورد مشکل خاصی را ایجاد نکرده و صفحه بدون مشکل رندر میشود؛ اما یک چنین صفحهای دیگر به عنوان یک صفحهی استاندارد HTML ارزیابی نخواهد شد؛ از این جهت که از ویژگی استفاده کردهاست که در هیچکدام از استانداردهای HTML ذکر نشدهاست.
آخرین نگارش HTML5 به همراه 4 ویژگی جدید دیگر نیز هست:
- Boolean attribute : مانند ویژگی required که به المانهای <input> قابل انتساب است. حضور این نوع ویژگیها بدون مقداری در یک المان
<input name=username required>
نمونهی دیگری از این نوع ویژگیها، ویژگی hidden است که به HTML 5.1 اضافه شدهاست و اگر به عنصری اضافه شود، آن المان رندر نخواهد شد.
- unquoted attribute: به این معنا که میتوان "" را از اطراف مقدار یک ویژگی حذف کرد:
<input name=username required>
- single-quoted and double-quoted attributes: که به معنای استفاده از "" و یا '' جهت تعیین مقدار یک ویژگی است.
تفاوت attributes با خواص المانها چیست؟
Attributes در تعریف تگ HTML یک عنصر ظاهر میشوند اما خواص، جزئی از تعریف شیء یک عنصر هستند.
<div class="bold">I'm a bold element</div>
<a href="http://www.site.com/blog/">Read the blog</a>
<script> document.querySelector('A').href = 'https://www.dntips.ir'; </script>
- برای مثال واژهی class در زبان جاوا اسکریپت یک واژهی کلیدی است. به همین جهت در اینجا اگر بخواهیم مقدار ویژگی class را تغییر دهیم باید از خاصیت className آن المان استفاده کنیم.
- مورد دوم ویژگی checked المانهای radio و checkbox است. این ویژگی فقط در ابتدای کار این المانها به آنها متصل میشود:
<input type="checkbox" checked> <script> // this does not remove the checked attribute document.querySelector('INPUT').checked = false; </script>
- تمام ویژگیهای غیراستانداردی که تعریف شوند، دارای خاصیت متناظری در آن المان نخواهند بود، اما به آنها expando properties گفته میشود.
یافتن المانها بر اساس ویژگیهای آنها
از آنجائیکه attribute selectors در استاندارد W3C CSS 2 معرفی شدهاند، امکان کار با آنها از زمان IE 8.0 میسر بودهاست و برای کار با آنها الزاما نیازی به استفاده از jQuery نیست!
یافتن المانها بر اساس نام ویژگیها
<form action="/submitHandler" method="POST"> <input name="first-name"> <input name="last-name" required> <input type="email" name="email" required> <button disabled>submit</button> </form>
var $result = $('[required], [disabled]');
var result = document.querySelectorAll('[required], [disabled]');
در اینجا باید دقت داشت که این جستجو صرفا بر اساس نام ویژگیها انجام میشود؛ حتی اگر این ویژگی دارای مقداری نباشد:
<div class="bold">I'm bold</div> <span class>I'm not</span>
var result = document.querySelectorAll('[class]');
یافتن المانها بر اساس نام و مقدار ویژگیها
<section> <h2>Sites</h2> <ul> <li> <a href="https://www.dntips.ir/">dotnettips</a> </li> <li> <a href="https://google.com/">Google</a> </li> </ul> </section>
var $result = $('A[href="https://www.dntips.ir/"]');
var result = document.querySelectorAll('A[href="https://www.dntips.ir/"]');
و یا اگر اینبار بخواهیم تمام ویژگیهای کلاسی که دارای مقدار هستند را انتخاب کنیم، روش آن با استفاده از exclusion selector به صورت زیر است:
var result = document.querySelectorAll('[class]:not([class=""]');
یافتن المانها بر اساس نام و قسمتی از مقدار ویژگیها
<a href="https://www.dntips.ir/">home page</a> <a href="https://www.dntips.ir/postsarchive">articles</a> <a href="https://www.dntips.ir/newsarchive">news</a>
var result = document.querySelectorAll('A[href*="www.dotnettips.info"]');
یافتن المانها بر اساس نام و کلمهای مشخص در مقدار ویژگیها
<div class="one two three">1 2 3</div> <div class="onetwothree">123</div>
var result = document.querySelectorAll('[class∼=two]');
در اینجا نوع دیگری از کوئری را هم میتوان مطرح کرد: آیا المانی مشخص، دارای کلاس two است؟
روش انجام آن در jQuery به صورت زیر است:
var hasTwoClass = $divEl.hasClass('two');
var hasTwoClass = divEl.classList.contains('two');
همچنین خاصیت classList به همراه متدهای استاندارد add و remove نیز هست که معادل متدهای addClass و removeClass جیکوئری هستند.
divEl.classList.remove('red'); divEl.classList.add('blue');
// removes "hide" class divEl.classList.toggle('hide'); // re-adds "hide" class divEl.classList.toggle('hide');
یافتن المانها بر اساس نام و شروع یا خاتمهی عبارتی مشخص در مقدار ویژگیها
<img id="cat" src="/images/cat.gif"> <img id="zebra" src="zebra.gif"> <a href="#zebra">watch the zebra</a> <a href="/logout">logout</a>
var result = document.querySelectorAll('A[href^="#"], [src$=".gif"]');
خواندن مقادیر ویژگیها
<input type="password" name="user-password" required>
// returns "password" $inputEl.attr('type'); // returns "true" $inputEl.is('[required]');
// returns "password" inputEl.getAttribute('type'); // returns "true" inputEl.hasAttribute('required');
تغییر مقدار ویژگیها
<input name="temp" required>
روش انجام اینکار در جیکوئری:
$inputEl .attr('type', 'email') // #1 .removeAttr('required') // #2 .attr('name', 'userEmail'); // #3
inputEl.setAttribute('type', 'email'); // #1 inputEl.removeAttribute('required'); // #2 inputEl.setAttribute('name', 'userEmail'); // #3
کاربران امروزه با عناصری که به نحوی خاص درون صفحه عمل میکنند، آشنا شدهاند. بنابراین انتخاب مناسب برای اتخاذ این عناصر زمانی مناسب است که به تکمیل کارآیی و رضایت کاربر کمک کند.
یک کامپوننت در واقع از دو بخش تشکیل شدهاست:
1 - اول اینکه چگونه به نظر میرسد ( UI ).
2 – دوم اینکه چگونه کار میکند ( UX ).
این عناصر رابط ( component ) شامل :
Input Controls : check boxes, radio buttons, drop down lists, list boxes, buttons, toggles, text fields, date field
Navigational Components : breadcrumb, slider, search field, pagination, slider, tags, icons
Informational Components : tool tips, icons, progress bar, notifications, message boxes, modal windows
Containers : accordion
اما باید توجه داشت که فقط به این موارد محدود نمیشوند.
در این
قسمت به طور مختصر با این دست از کامپوننتها ( UI Component ) آشنا میشویم.
کامپوننت V-Alert برای انتقال اطلاعات مهم به کاربر مورد استفاده قرار میگیرد. این کامپوننت چهار نوع اطلاعات را به کاربر گوشزد میکند که شامل موفقیتها، اطلاعات، هشدارها و خطاها میباشد.
هشدارها میتوانند یک رنگ خاص را داشته باشند که به طور پیش فرض نمایش داده نمیشوند.
در مثال پایین، کامپوننت v-alert شامل دو مقدار است که برای آن تنظیم شدهاست. مقدار (value) که شامل یک مقدار Boolean است و مقدار (type) که مشخص کننده نوع هشدار است (موفقیت ، اطلاعات ، هشدار و خطا).
در قطعه کد پایین، این چهار نوع اطلاعات قابل نمایش به کاربر مشخص شدهاند:
<div id="app"> <v-app id="inspire"> <div> <v-alert :value="true" type="success"> This is a success alert. </v-alert> <v-alert :value="true" type="info"> This is a info alert. </v-alert> <v-alert :value="true" type="warning"> This is a warning alert. </v-alert> <v-alert :value="true" type="error"> This is a error alert. </v-alert> </div> </v-app> </div>
برای کامپوننت V-Alert میتوان propertiesهای مختلفی را مشخص نمود که از جمله آنها میتوان به موارد زیر اشاره کرد:
Color : به وسیله این property میتوان رنگ پیغام را مشخص نمود. هم به وسیله نام رنگ میتوان رنگ مورد نظر را مشخص کرد و هم به وسیلهی کد RGB این کار را انجام داد. dismissible : این تنظیم مشخص میکند که پیغام، قابلیت بسته شدن را دارد یا خیر که حاوی یک مقدار Boolean است.
icon : مشخص کننده یک نماد خاص است که درون جعبه پیغام قرار میگیرد.
type : مشخص کننده نوع پیام است که پیشتر در مورد آن توضیح داده شد.
کامپوننت v-avatar برای تغییر اندازه تصاویر مورد استفاده قرار میگیرد که معمولا جهت نمایش عکس پروفایل استفاده میشود.
طریقه استفاده :
avatar، دارای یک اندازهی پویا است که میتواند برای هر وضعیتی تغییر کند.
برای این کامپوننت سه properties قابل تنظیم است:
color : به وسیله این property میتوان رنگ دلخواهی را برای آواتار مشخص نمود. هم به وسیله نام رنگ میتوان رنگ مورد نظر را مشخص کرد و هم به وسیله کد RGB این کار را صورت داد.
size : به طور پیشفرض برای avatar، سایز 48 تنظیم شدهاست که میتوان این میزان را کم و یا زیاد کرد.
tile : همانند border radius در css عمل میکند. با تنظیم این گزینه میتوانیم یک آواتار گرد داشته باشیم.
به وسیله این کامپوننت میتوان نمادهایی را برای نمایش اطلاعاتی به کاربر یا جلب توجه کاربر به یک عنصر خاص، ایجاد نمود.
این کامپوننت نیز properties خاص خود را دارد که از جمله آن میتوان به color , left , mode , overlab و غیره اشاره کرد.
قطعه کد پایین نشان دهنده چگونگی عملکرد این کامپوننت است:
<div id="app"> <v-app id="inspire"> <div> <v-badge color="purple" left overlap> <template v-slot:badge> <v-icon dark small> done </v-icon> </template> <v-icon color="grey lighten-1" large> account_circle </v-icon> </v-badge> <v-badge overlap color="orange"> <template v-slot:badge> <v-icon dark small> notifications </v-icon> </template> <v-icon large color="grey darken-1"> account_box </v-icon> </v-badge> </div> </v-app> </div>
نتیجه قطعه کد بالا بدین ترتیب است:
این کامپوننت را میتوان جایگزین sidebarها نمود. این کامپوننت در درجه اول در موبایل مورد استفاده قرار میگیرد که میتواند شامل متن و یا آیکن باشد.
به وسیله این کامپوننت امکان انتقال از یک بخش از صفحه به بخشی دیگر امکان پذیر میشود.
این کامپوننت نیز properties خاص خود را دارد که از جمله آن میتوان به active-sync (برای نشان دادن فعال یا غیر فعال بودن گزینه انتخاب شده)، fixed ( برای مشخص کردن موقعیت کامپوننت در صفحه) و موارد دیگر اشاره کرد.
تقسیم بندی اجزاء این کامپوننت به شرح زیر است:
1 - محل قرار گیری کامپوننت
2- آیکن غیر فعال
3- برچسب غیر فعال
4 - آیکن فعال
5- برچسب فعال
قطعه کد پایین نشان دهنده چگونگی یک bottom navbar است:
<div id="app"> <v-app id="inspire"> <v-card height="200px" flat> <div> Active: {{ bottomNav }} // </div> <v-bottom-nav :active.sync="bottomNav" :value="true" absolute color="transparent"> <v-btn color="teal" flat value="recent"> <span>Recent</span> <v-icon>history</v-icon> </v-btn> <v-btn color="teal" flat value="favorites"> <span>Favorites</span> <v-icon>favorite</v-icon> </v-btn> <v-btn color="teal" flat value="nearby"> <span>Nearby</span> <v-icon>place</v-icon> </v-btn> </v-bottom-nav> </v-card> </v-app> </div>
این کامپوننت برای ایجاد یک دکمه چه به صورت متن و یا آیکن مورد استفاده قرار میگیرد. دکمهها به کاربران این امکان را میدهند تا اقداماتی را انجام دهند و انتخابهای خود را تنها با یک کلیک انجام دهند.
از دکمهها ممکن است در جاهای مختلف صفحه به خصوص در دیالوگ باکسها، فرمها و ابزارها مورد استفاده قرار گیرد.
کامپوننت v-btn نیز مانند سایر کامپوننتها تنظیمات خاص خود را دارد که از جمله آن میتوان به کوچکی و بزرگی دکمه، فعال یا غیر فعال بودن دکمه، نوع متن یا آیکن بودن دکمه اشاره نمود.
حالتهای مختلفی از دکمهها وجود دارند که میتوانند به بهتر شدن UI برنامه ما کمک کنند. برای مثال میتوان به موارد زیر اشاره کرد:
button drop-down variants : دکمههای کرکرهای که معمولا برای نظم و کم جا بودن در صفحه مورد استفاده قرار میگیرند.
icons : آیکنها میتوانند برای محتوای اصلی یک دکمه مورد استفاده قرار بگیرند تا ظاهر زیباتری را به دکمه ما بدهند.
floating : این دکمهها حالت آیکن را دارند؛ با این تفاوت که آیکن مورد نظر، درون یک محتوا قرار میگیرد.
loaders : به وسیله این دکمهها میتوان کاربر را متوجه انجام یک پردازش نمود. به صورت پیشفرض بعد از فشردن این نوع دکمهها محتوای دکمه فشرده شده تغییر ظاهر داده و به شکل یک دایره در حال چرخش در میآید. البته میتوان این پیشفرض را به حالتهای دیگری نیز تغییر داد.
round : این نوع دکمهها دقیقا کارآیی دکمههای معمولی را دارند؛ با این تفاوت که این دکمهها دارای لبههایی گرد هستند.
یک نمونه از ایجاد انواع دکمهها در زیر آمده است:
<div id="app"> <v-app id="inspire"> <div> <v-btn color="success">Success</v-btn> <v-btn color="error">Error</v-btn> <v-btn color="warning">Warning</v-btn> <v-btn color="info">Info</v-btn> </div> </v-app> </div>
یکی از کامپوننتهایی که به تازگی به vuetify اضافه شده است، کامپوننت تقویم یا v-calendar است. از این کامپوننت برای نمایش تاریخ، روز، هفته، ماه و سال استفاده میشود. یک تقویم دارای یک نوع و یک مقدار است که تعیین میکند چه نوع تقویمی، در طول چه مدت زمانی نمایش داده شود.
حالتهای مختلفی برای نمایش تقویم در صفحه وجود دارد که برای مثال میتوان به موارد زیر اشاره کرد:
events : به وسیله این گزینه میتوان برای هر روز یک رخداد خاص را مشخص نمود که به وسیله کلیک بر روی آن، اطلاعات آن رخداد نمایش داده شود.
weekly : میتوان یک تقویم هفتگی را ایجاد نمود و رخدادهای هفتگی را برای آن تنظیم کرد.
نمونه ایجاد یک تقویم در پایین آمده است:
<div id="app"> <v-app id="inspire"> <v-layout wrap> <v-flex xs12> <v-sheet height="500"> <v-calendar ref="calendar" v-model="start" :type="type" :end="end" color="primary"> </v-calendar> </v-sheet> </v-flex> <v-flex sm4 xs12> <v-btn @click="$refs.calendar.prev()"> <v-icon dark left> keyboard_arrow_left </v-icon> Prev </v-btn> </v-flex> <v-flex sm4 xs12> <v-select v-model="type" :items="typeOptions" label="Type"> </v-select> </v-flex> <v-flex sm4 xs12> <v-btn @click="$refs.calendar.next()"> Next <v-icon right dark> keyboard_arrow_right </v-icon> </v-btn> </v-flex> </v-layout> </v-app> </div>
js قطعه کد new Vue({ el: '#app', data: () => ({ type: 'month', //مشخص کننده نوع تقویم که در اینجا تقویم به صورت ماهانه است start: '2019-01-01', end: '2019-01-06', typeOptions: [ { text: 'Day', value: 'day' }, { text: '4 Day', value: '4day' }, { text: 'Week', value: 'week' }, { text: 'Month', value: 'month' }, { text: 'Custom Daily', value: 'custom-daily' }, { text: 'Custom Weekly', value: 'custom-weekly' } ] }) })
همانطور که مطلع هستید در تنظیمات یک دایرکتوری مجازی در IIS6 یا 5، حتی پس از نصب دات نت فریم ورک سه و نیم، گزینه انتخاب نگارش 3.5 ظاهر نمیشود و همان تنظیمات ASP.Net 2.0 کافی است (شکل زیر) (دات نت 3 و سه و نیم را میتوان بعنوان افزونههایی با مقیاس سازمانی (WF ، WCF و ...) برای دات نت 2 درنظر گرفت).
هنگام استفاده از VS.Net 2008 و تنظیم نوع پروژه به دات نت فریم ورک 3.5 ، به صورت خودکار تنظیمات لازم به وب کانفیگ برنامه جهت استفاده از کامپایلرهای مربوطه نیز اضافه میشوند که شاید از نظر دور بمانند.
برای آزمایش این مورد، فرض کنید صفحه زیر را بدون استفاده از code behind و VS.Net ایجاد کرده ایم (جهت آزمایش سریع یک قطعه کد Linq ).
<%@ Page Language="C#" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Linq" %>
<form id="Form1" method="post" runat="server">
<asp:GridView ID="GridView1" runat="server" />
</form>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string[] cities = {
"London", "Amsterdam", "San Francisco", "Las Vegas",
"Boston", "Raleigh", "Chicago", "Charlestown",
"Helsinki", "Nice", "Dublin"
};
GridView1.DataSource = from city in cities
where city.Length > 4
orderby city
select city.ToUpper();
GridView1.DataBind();
}
</script>
این قطعه کد چون از قابلیتهای کامپایلر جدید سی شارپ استفاده میکند، با کامپایلر پیش فرض و تنظیم شده دات نت 2 کار نخواهد کرد و باید برای رفع این مشکل، فایل web.config جدیدی را نیز به پوشه برنامه اضافه کنیم:
<?xml version="1.0"?>
<configuration>
<system.codedom>
<compilers>
<compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
<providerOption name="CompilerVersion" value="v3.5"/>
<providerOption name="WarnAsError" value="false"/>
</compiler>
</compilers>
</system.codedom>
<system.web>
<compilation defaultLanguage="c#">
<assemblies>
<add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
</assemblies>
</compilation>
</system.web>
</configuration>
همانطور که ذکر شد اگر از VS.Net 2008 استفاده کنید، هیچ وقت درگیر این مباحث نخواهید شد و همه چیز از پیش تنظیم شده است.
استفاده از pdfreport برای اولین بار
یک تجربه
سالها پیش یکی از همکاران تعریف میکردند که یک شرکت نرم افزاری برای مشاوره معماری نرم افزار از ایشان دعوت به همکاری کرده است. پس از مراجعه به شرکت متوجه شدند که تیم اصلی برنامه نویسان درگیر تولید ORM ای برای پروژه جدید شرکت هستند که برای تولید این ابزار بیش از 4 ماه را وقت صرف کردهاند؛ اما در مراحل نهایی کار دچار مشکلات زیادی شده اند. به نحوی که از ایشان برای کمک به رفع مشکل ORM ( به جای تولید نرم افزار مشتری) دعوت کردهاند.
در آن زمان یادم هست که EF 5 (که تقریبا نسخه سوم بعد از 3.5 و 4 میباشد - جزئیات در اینجا) توسط مایکروسافت ارائه شده بود. همچنین NHibernate هم همزمان با EFها (تاریخچه نسخهها در اینجا) قابل دسترسی بودهاست. با این حال تیم فنی به این دلیل که کوئریهای تولیدی توسط EF کند هستند، اقدام به ساخت ORM کرده بودند. جالب اینکه با بررسی بیشتر مشخص شدهاست که حجم دادههای پروژه در بدترین حالت در یک جدول به 5 هزار رکورد میرسد.
4 ماه صرف وقت و هزینه تیم 2 نفره برای طراحی و پیاده سازی و تست ORM ای که در نهایت به دلیل مشکلات Performance کنار گذاشته شد و از EF استفاده کردند. شاید در این 4 ماه میتوانستند 30 درصد پروژه اصلی را پیاده سازی کنند.
شاید بتوان 3 دلیل عمده «فنی» شکست برخی از پروژههای نرم افزاری در ایران را به شرح زیر عنوان کرد:
- عدم استفاده مناسب از ابزارها و راهکارهای موجود و انجام دوباره کاری
- استفاده غیر ضروری و عجولانه از تکنولوژیهای جدید (بدون داشتن نیروی کار مسلط)
- پایین بودن سطح فنی و بهروز نبودن برخی از برنامه نویسان ایرانی
متن باز (Open Source)
با پیشرفت توسعه نرم افزار و تمایل شرکتهای بزرگ دنیا به تولید کامپوننتهای متن باز (Open Source) ریسک استفاده از این نوع ابزارها نیز کمتر شده است. بطوریکه درصورت نیاز میتوان کامپوننت را برای پروژهها سفارش سازی کرد.
شاید کمتر کسی باور میکرد که روزی شرکت مایکروسافت محصولات خود را Open Source کند. اما امروز، در سال 2017 میلادی، شرکت مایکروسافت اقدامات مهمی را در این زمینه انجام داده است که میتوانید جزئیات پروژههای متن باز این غول کامپیوتری دنیا را در اینجا و همچنین اینجا ملاحظه کنید.
یک سناریو
فرض کنید یک پروژه تحت وب را شروع کرده اید. بدون در نظر گرفتن جزئیات پروژه میتوان گفت به ابزارهای زیر نیاز خواهید داشت:
ابزار | مثال |
ORM | EF , NHibernate , Dapper , LLBLGEN |
IOC COntainer | Unity , StructureMap , Autofac , Castle.Windsor, LightInject , Ninject |
Report Tools | CrsytalReport , Stimusoft , DevExpress Report, Telerik Report Tools, EasyReport |
UI Component | Telerik , JqueryUI , Bootsrap ,CompnentArt, ComponentOne |
Error Logger | ELMAH , NLog , log4net |
Mapper Tools | AutoMapper , ValueInjecter |
ملاحظات استفاده از ابزارها
توجه به چند نکته در استفاده از ابزارها و کتابخانههای آماده ضروری میباشد، بدین شرح:
- ابزار مورد نیاز را با R&D (تحقیق و توسعه) انتخاب کنید. ابزارهایی که در پروژههای واقعی استفاده شدهاند، بسیار مناسب میباشند.
- توجه داشته باشیدکه استفاده از چندین ابزار باعث ایجاد تداخل در پروژه نشود (این مورد معمولا در کامپوننتهای UI مانند JqueryUI و Bootsrtap اتفاق میافتد)
- مستندات مربوط به ابزارها را حتما مطالعه کنید. لطفا بدون تسلط از ابزاری استفاده نکنید.
گاهی پیش میآید که یک برنامه نویس بدون مطالعه مستندات مربوط به یک IOC Container از آن ابزار استفاده میکند و در Register اولیه ویژگی LifeCycle مربوط به Context را با حالت Singleton مقداردهی میکند. بدین ترتیب پس از نیم ساعت، پروژه به دلیل آنچه که میتوان "چاقی Context" نامید، DONE یا حداقل کند میشود که رفع این مشکل ساعتها زمان میبرد.
درصورت امکان از ابزارها بصورت مستقیم استفاده نکنید. یک لایه واسط مخصوص خودتان را برای تنظیمات کلی ابزارها تهیه کنید که در آینده به دردتان خواهد خورد! (بیشتر در سمت سرور)
فرض کنید در پروژه WPF از کامپوننتهای زیبای DevExpress استفاده میکنید. به ازای هر کامپوننت یک کلاس به پروژه اضافه کنید که از کلاس اصلی آن کامپوننت Devexspress ارث میبرد و در لایه UI خود از کلاس جدید خود استفاده کنید. با این کار میتوانید ویژگیهای عمومی کامپوننتها را یکبار برای کل پروژه اعمال کنید.
نتیجه گیری
اگر بخواهیم چرخ را اختراع نکنیم و از تجربیات موفق موجود استفاده کنیم، میتوان نتیجه گرفت که استفاده از ابزارهای آماده برای توسعه نرم افزار با رعایت دستورالعمل استفاده امری مفید میباشد. اما باید توجه داشته باشیم که استفاده از هر ابزاری به هرقیمتی در هرپروژهای، حرفه ای نیست. همهی راهکارها، ابزراها و تکنولوژیهای مورد استفاده باید در راستای هدف اصلی «تولید و تحویل به موقع نرم افزار با کیفیت به مشتری» باشد؛ هدفی که در بسیاری از موارد فراموش شده و بیشتر زمان پروژه، صرف کارهای غیر ضروری میشود.