FastReport سورس باز شد
We are very pleased to announce the launch of our Open Source project - Fast Report Open Source.
We are hoping to develop a friendly community of .Net Core developers who will share our eagerness to create fast, powerful and convenient reporting tool for Windows, Windows Server, Linux and MacOS.
We also encourage you to be a part of the global reporting team! Join us on GitHub: github.com/FastReports/FastReport
.NET 5 launch
.NET Conf is a free, three-day, virtual developer event co-organized by the .NET community and Microsoft. This year .NET 5.0 will launch at .NET Conf 2020! Come celebrate and learn about the new release. We're also celebrating our 10th anniversary and we're working on a few more surprises. You won't want to miss this one.
آموزش TypeScript #3
تعریف متغیرها و انواع داده
در TypeScript هنگام تعریف متغیرها باید نوع داده ای آنها را مشخص کنیم. در TypeScript پنج نوع داده ای وجود دارد که در زیر با ذکر مثال تعریف شده اند. مفاهیم ماژول، کلاس و تابع در پست بعدی به تشریح توضیح داده خواهند شد.
number : معادل نوع داده ای number در JavaScript است. برای ذخیره سازی اعداد صحیح و اعشاری استفاده میشود.
یک مثال:
class NumberTypeOfTypeScript { MyFunction() { var p: number; p = 1; var q = 2; var r = 3.33; alert("Value of P=" + p + " Value of q=" + q + " Value of r=" + r); } } window.onload = () =>{ var value = new NumberTypeOfTypeScript(); value.MyFunction(); }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>TypeScript HTML App</title> <link rel="stylesheet" href="app.css" type="text/css" /> <script src="app.js"></script> </head> <body> <h1>Number Type in TypeScript</h1> <div id="content"/> </body> </html>
string : معادل نوع داده ای رشته ای است و برای ذخیره سازی مجموعه ای از کاراکترها از نوع UTF-16 استفاده میشود.
یک مثال:
class StringTypeOfTypeScript { Myfunction() { var s: string; s="TypeScript" var empty = ""; var abc = "abc"; alert("Value of s="+ s+" Empty string="+ empty+" Value of abc ="+abc) ; } } window.onload = () =>{ var value = new StringTypeOfTypeScript(); value.Myfunction(); }
var StringTypeOfTypeScript = (function () { function StringTypeOfTypeScript() { } StringTypeOfTypeScript.prototype.Myfunction = function () { var s; s = "TypeScript"; var empty = ""; var abc = "abc"; alert("Value of s=" + s + " Empty string=" + empty + " Value of abc =" + abc); }; return StringTypeOfTypeScript; })(); window.onload = function () { var value = new StringTypeOfTypeScript(); value.Myfunction(); };
boolean: برای ذخیره سازی مقادیر true یا false میباشد.
مثال:
class booleanTypeofTypeScript { MyFunction() { var lie: bool; lie = false; var a = 12; if (typeof (lie) == "boolean" && typeof (a) == "boolean") { alert("Both is boolean type"); } if (typeof (lie) == "boolean" && typeof (a) != "boolean") { alert("lie is boolean type and a is not!") } else { alert("a is boolean type and lie is not!"); } } } window.onload =()=> { var access = new booleanTypeofTypeScript(); access.MyFunction(); }
var booleanTypeofTypeScript = (function () { function booleanTypeofTypeScript() { } booleanTypeofTypeScript.prototype.MyFunction = function () { var lie; lie = false; var a = 12; if(typeof (lie) == "boolean" && typeof (a) == "boolean") { alert("Both is boolean type"); } if(typeof (lie) == "boolean" && typeof (a) != "boolean") { alert("lie is boolean type and a is not!"); } else { alert("a is boolean type and lie is not!"); } }; return booleanTypeofTypeScript; })(); window.onload = function () { var access = new booleanTypeofTypeScript(); access.MyFunction(); };
مثال:
class NullTypeinTypeScript { MyFunction() { var p: number = null; var x = null; if (p== null) { alert("p has null value!"); } else { alert("p has a value"); } } } window.onload = () =>{ var value = new NullTypeinTypeScript(); value.MyFunction(); }
var NullTypeinTypeScript = (function () { function NullTypeinTypeScript() { } NullTypeinTypeScript.prototype.MyFunction = function () { var p = null; var x = null; if(p == null) { alert("p has null value!"); } else { alert("p has a value"); } }; return NullTypeinTypeScript; })(); window.onload = function () { var value = new NullTypeinTypeScript(); value.MyFunction(); };
undefined:معادل نوع undefined در Javascript است. اگر به یک متغیر مقدار اختصاص ندهید مقدار آن undefined خواهد بود.
مثال:
class UndefinedTypeOfTypeScript { Myfunction() { var p: number; var x = undefined; if (p == undefined && x == undefined) { alert("p and x is undefined"); } else { alert("p and c cannot undefined"); } } } window.onload = () =>{ var value = new UndefinedTypeOfTypeScript(); value.Myfunction(); }
var UndefinedTypeOfTypeScript = (function () { function UndefinedTypeOfTypeScript() { } UndefinedTypeOfTypeScript.prototype.Myfunction = function () { var p; var x = undefined; if(p == undefined && x == undefined) { alert("p and x is undefined"); } else { alert("p and c cannot undefined"); } }; return UndefinedTypeOfTypeScript; })(); window.onload = function () { var value = new UndefinedTypeOfTypeScript(); value.Myfunction(); };
ادامه دارد...
مهاجرت به AngularJS 2.0
"Our goal with Angular 2 is to make the best possible set of tools for
building web apps not constrained by maintaining backwards compatibility
with existing APIs." —Angular blog
.NET Data Community Standup - Azure SQL Database and SQL Server 2022: what’s new for developers
During this show we will discuss some of the new capabilities introduced on both SQL Server and our Azure services that have an impact on app development like:
T-SQL and IQP enhancements
Local Development Experience
JSON enhancements
DataAPI Builder
And more…
کتابخانه SmartWizard
Smart Wizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support. It is easy to implement and gives a neat and stylish interface for your forms, checkout screen, registration steps etc. Based on the feedback from our users over the past years we have come up with the best ever built jQuery wizard plugin of all time. Demo
Features:
- Bootstrap support
- Responsive themes
- Heavily customizable toolbar, option to add extra buttons
- Theme support with various themes included
- Customizable css styles
- Url navigation and step selection
- Public methods for external function call
- Enhanced event support
- In-built wizard reset method
- Ajax content loading with option to specify individual url for steps
- Keyboard navigation
Bootstrap Icons v1.8.0 منتشر شد
Bootstrap Icons v1.8.0 is here with over 140 new icons, including dozens of new heart icons ready for Valentine’s Day and dozens of filetype icons. We’re not at almost 1,700 icons and is once again our second largest release. Keep reading to see what’s new.
extra small, small, medium, large, extra large
در این نگارش، break-point از نوع extra small، نسبت به نگارش سوم بوت استرپ، جدید است.
به این ترتیب این گرید به شدت انعطاف پذیر شده و میتوان برای اندازههای مختلف صفحه، طرحبندیهای متفاوتی را ارائه داد.
دربرگیرندهها و ردیفهای گرید بوت استرپ
گرید طرحبندی بوت استرپ 4، 12 ستونه است و از فناوری خاصی به نام Flexbox استفاده میکند. برای کار با آن نیاز است با دو عنصر اصلی زیر آشنا بود:
- Containers: هدف آنها تنظیم طرحبندی، مطابق با break-point (های) خاصی میباشد.
- ردیفها و ستونها: طرحبندی اصلی را تشکیل میدهند و ردیفها، تعریف ستونها را میسر میکنند.
بررسی Grid Containers
در بوت استرپ 4، دو نوع Container با کلاسهای زیر وجود دارند:
- container: یک دربرگیرندهی متداول است و طرحبندی را در میانهی صفحه و بر اساس break-point (های) خاصی نمایش میدهد. این دربرگیرنده، در اطرف آن یک padding با اندازهی 15px را نیز به همراه دارد و با break-pointهای زیر خودش را تطبیق میدهد:
extra small: کمتر از 576px
small: بیشتر از 576px
medium: بیشتر از 768px
large: بیشتر از 992px
extra-large: بیشتر از 1200px
- container-fluid: این دربرگیرنده، کل عرض نمایشی صفحه را پوشش میدهد.
یک مثال: تعریف container، row و columns
<head> <style> img { width: 100px; display: block; } </style> </head> <body> <header class="clearfix" style="height: 50vh; background: url(images/background.jpg) no-repeat center center; background-size: cover; margin-bottom: 20px;"> <div class="container"> <img src="images/wisdompetlogo.svg" alt="Wisdom Pet Logo"> </div> </header> <div class="container"> <section id="services"> <div class="row"> <article class="col"> <img class="mx-auto" src="images/icon-exoticpets.svg" alt="Icon"> <h3>Exotic Pets</h3> <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p> </article> <article class="col"> <img class="mx-auto" src="images/icon-grooming.svg" alt="Icon"> <h3>Grooming</h3> <p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p> </article> <article class="col"> <img class="mx-auto" src="images/icon-health.svg" alt="Icon"> <h3>General Health</h3> <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p> </article> <article class="col"> <img class="mx-auto" src="images/icon-nutrition.svg" alt="Icon"> <h3>Nutrition</h3> <p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p> </article> <article class="col"> <img class="mx-auto" src="images/icon-pestcontrol.svg" alt="Icon"> <h3>Pest Control</h3> <p>We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.</p> </article> <article class="col"> <img class="mx-auto" src="images/icon-vaccinations.svg" alt="Icon"> <h3>Vaccinations</h3> <p>Our veterinarians are experienced in modern vaccination protocols that prevent many of the deadliest diseases in pets.</p> </article> </div> </section> </div> </body>
توضیحات:
- برای آزمایش این مثال، ابتدا کلاس container آنرا حذف کنید:
<div class="container">
اما چون میخواهیم محل قرارگیری لوگوی داخل این هدر، با حاشیهی سمت چپ container ذیل آن یکی باشد، این logo را داخل container قرار دادهایم.
- از این جهت که تصاویر استفاده شده از نوع svg هستند و بسیار بزرگ میباشند، با style تعریف شدهی در ابتدای head، اندازهی آنها را کاهش دادهایم و همچنین نوع نمایشی آنها را نیز به block تنظیم کردهایم. در این حالت برای اینکه تصاویر در میانهی این block قرار گیرند، از کلاس mx-auto استفاده شدهاست.
- در مرحلهی بعد، کار تعریف سطرها و ستونها انجام شدهاست:
<div class="container"> <section id="services"> <div class="row"> <article class="col">
برای مثال اگر عرض صفحه را کاهش دهیم، فقط به اندازهی سه آیتم، فضا برای نمایش وجود خواهد داشت و اگر عرض صفحه را بیشتر کنیم، امکان نمایش هر 6 آیتم تعریف شده را مانند تصویر قبلی، میسر میکند.
انواع ستونهای طرحبندی در بوت استرپ 4
همانطور که عنوان شد، گرید بوت استرپ 4، دارای 12 ستون است. البته در اینجا یک ستون میتواند عرض چندین ستون را نیز به خود اختصاص دهد.
در این تصویر، فرمول تعریف کلاسهای ستونها را در بوت استرپ 4 مشاهده میکنید. هر قسمتی از این فرمول که داخل پرانتز قرار گرفتهاست، یعنی ذکر آن اختیاری میباشد؛ به همین جهت در مثال قبلی، ذکر صرفا col نیز کار کرد. در این حالت اگر دو ستون را تعریف کنید، هر کدام 50 درصد عرض container را به خود اختصاص میدهند و اگر سه ستون تعریف شود، هر کدام 33 درصد عرض را اشغال میکنند.
در این فرمول BP به معنای break-point است و یکی از مقادیر ذکر شدهی مقابل آنرا میتواند داشته باشد. برای مثال اگر col-sm را تعریف کردیم، یعنی این ستون تا زمانیکه اندازهی صفحه تا 576px باشد، کل عرض صفحه را پر میکند.
COL در اینجا به معنای تعداد ستونی است که این محتوا قرار است به خود اختصاص دهد. برای مثال col-md-6 یعنی این ستون تا رسیدن به break-point از نوع md، کل عرض صفحه را به خود اختصاص میدهد؛ پس از آن (اندازهی صفحهی بیشتر از 768px) این ستون، 6 واحد از 12 واحد ممکن را به خود اختصاص خواهد داد.
ذکر BP نیز اختیاری است. یعنی اگر تنها col-6 را تعریف کردیم، این ستون در تمام break-pointها و در تمام اندازههای ممکن صفحه، همواره 6 واحد از 12 واحد موجود را به خود اختصاص میدهد.
مثال: بررسی فرمول تعریف ستونها در بوت استرپ 4
<head> <style> img { width: 100%; height: 200px; max-height: 200px; } </style> </head> <body> <div class="container"> <div id="services"> <div class="row"> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Exotic Pets</h4> <p>We offer <strong>specialized</strong> care for <em>reptiles, rodents, birds,</em> and other exotic pets.</p> </section> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Grooming</h4> <p>Our therapeutic <span class="font-weight-bold">grooming</span> treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p> </section> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>General Health</h4> <p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p> </section> <section class="col"> <img class="img-fluid" src="images/image.png" alt="sample image"> <h4>Nutrition</h4> <p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p> </section> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Pest Control</h4> <p>We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.</p> </section> <section class="col"> <img src="images/image.png" alt="sample image"> <h4>Vaccinations</h4> <p>Our veterinarians are experienced in modern vaccination protocols that prevent many of the deadliest diseases in pets.</p> </section> </div> </div> </div> </body>
- سپس کل محتوا را داخل یک ردیف تعریف کردهایم.
- در ادامه هر المان section تعریف شده را به صورت یک col در آوردهایم. به این ترتیب بوت استرپ سعی میکند تا کل عرض را با ستونهای تعریف شده تا جائیکه ممکن است پر کند:
و اگر عرض صفحه را کوچکتر کنیم، باز هم تاجائیکه ممکن است تعدادی را در سطر اول و مابقی را در سطرهای بعدی جا خواهد داد:
در ادامه میخواهیم مشخص کنیم، ستونهای خاصی، همیشه عرض مشخصی را به خود اختصاص دهند:
<div class="container"> <div id="services"> <div class="row"> <section class="col-6">
در این حالت، اولین ستون تعریف شده، تحت هر حالتی و با هر اندازهی صفحهای، همیشه نصف عرض (6 واحد از 12 واحد) را به خود اختصاص خواهد داد.
مرحلهی بعد این است که مشخص کنیم یک ستون در چه اندازهای از صفحه شروع کند به اختصاص دادن عرضی خاص به خود. برای این منظور هر 6 عنصر section تعریف شده را به صورت زیر ویرایش میکنیم:
<section class="col-sm">
و اگر صفحه را بزرگتر کنیم، مجددا همان حالت تعریف col خالی تکرار میشود و بوت استرپ سعی میکند در هر سطر، تا جائیکه میتواند، تعداد آیتم بیشتری را جا دهد. اگر بخواهیم این تعداد جا دادنها را نیز کنترل کنیم، میتوان به صورت زیر عمل کرد:
<section class="col-sm-6">
امکان تعریف بیش از یک break-point برای هر ستون در بوت استرپ 4
در این جدول انواع break-pointهای قابل تعریف توسط بوت استرپ 4 را ملاحظه میکنید. تا اینجا تاثیر اعمال تنها یکی از اینها را بر روی یک ستون بررسی کردیم؛ اما میتوان چندین break-point را بر روی یک ستون نیز اعمال کرد. برای مثال اگر به تمام sectionهای مثال این قسمت ترکیب زیر را اضافه کنیم:
<section class="col-sm-6 col-md-4">
امکان تغییر موقعیت شروع ستونها در بوت استرپ 4
در تصویر فوق، فرمول تغییر موقعیت شروع ستونها در بوت استرپ 4 را مشاهده میکنید. برای مثال اگر offset-sm-1 را به اولین section اضافه کنیم:
<section class="col-sm-6 col-md-4 offset-sm-1">
برای نمونه این قابلیت، پیشتر یکی از روشهای در مرکز صفحه قرار دادن ستونها بود؛ اما چون بوت استرپ 4 از Flexbox استفاده میکند، روشهای بهتری نیز برای آن وجود دارند که آنها را در قسمتهای بعد بررسی میکنیم.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_04.zip