شاخهها ( نودها ) میتوانند فونتهای مختلف داشته باشند.برای تنظیم فونت باید از تابع ()setFont استفاده شود.البته که باید فونت انتخابی بر روی سیستم کاربر موجود باشد در غیر این صورت مرورگر یک فونت دلخواه و پیش فرض خود را جایگزین فونت شما خواهد نمود. در صورت بروز هر گونه خطا در فونت ، متن داخل گرهها کوتاه خواهد شد.
با توجه به محدودیت IE در پیاده سازی excanvas ، در کل کاراکترها متن نود کوتاه میشود. ( اگر کاراکترهای نود ، کاملا پرشونده fit نشوند ، بخشی از کل متن کاراکترهای نود نوشته یا رسم خواهد شد )
پارامترهای تابع ()setFont :
-
نام فونت . حالت فونت ضخیم bold یا مورب italic قابل استفاده است.
- اندازه فونت در واحد پیکسل
- رنگ فونت ( اختیاری )
- چیدمان عمودی ( 1 و c یا center برای وسط چین . ( اختیاری )
var o = new orgChart(); o.setColor('#99CC99', '#CCFFCC'); o.setFont('arial', 18); o.addNode(0, '', '', 'Arial 18', 1); o.setColor('#CCCC66', '#FFFF99'); o.setFont('arial', 10, '#000000'); o.addNode(11, 0, 'u', 'text will be split if it does not fit. ThisIsAVeryLongWordAndItWillBeClipped. Too many lines will be clipped too.'); o.setFont('arial', 10, '#000000', 0); o.addNode(12, 0, 'u', 'aligned at top'); o.setFont('arial', 10, '#000000', 1); o.addNode(13, 0, 'u', 'centered'); o.setColor('#CC4950', '#FF7C80'); o.setFont('times', 16, '#FF0F00'); o.addNode(21, 0, 'l', 'Times 16 red'); o.setFont('times', 16, '#000000'); o.addNode(22, 0, 'l', 'Times 16'); o.setFont('times', 48, '#000000'); o.addNode(23, 0, 'l', 'Times 48 does not fit at all'); o.setColor('#CC9966', '#FFCC99'); o.setFont('jokerman', 12, '#000000'); o.addNode(31, 0, 'r', 'Jokerman (if available)'); o.setFont('bold times', 16, '#000000'); o.addNode(32, 0, 'r', 'bold Times 16'); o.setFont('italic times', 16, '#000000'); o.addNode(33, 0, 'r', 'italic Times 16'); o.setFont('bold italic times', 16, '#000000'); o.addNode(34, 0, 'r', 'bold italic Times 16'); o.setColor('#B5D9EA', '#CFE8EF'); o.setFont('arial', 28, '#000000'); o.addNode(50, '', '', 'Arial 28'); o.setFont('arial', 29); o.addNode(51, 50, 'u', 'Arial 29'); o.setFont('arial', 30); o.addNode(52, 51, 'u', 'Arial 30'); o.setFont('arial', 31); o.addNode(53, 52, 'u', 'Arial 31'); o.setFont('arial', 32); o.addNode(54, 53, 'u', 'Arial 32'); o.drawChart('c_fonts');
اندازه و مکان :
شما میتوانید اندازه نودها و فضا و offset بین نودها را نیز تنظیم نمائید.این تنظیم بصورت عمومی تاثیر گذار است و تمامی نودها از این تنظیم تبعیت خواهند نمود:
پارامترهای تابع ()setSize:
- عرض نودها در واحد پیکسل.
- ارتفاع نودها در واحد پیکسل.
- فاصله عرضی بین نودهای پدر u-nodes. ( اختیاری ).
- فاصله طولی بین نودها ( اختیاری ).
- offset عرضی ( فاصله ) از نود چپ و نود راست ( اختیاری ).
var o = new orgChart(); o.setSize(36, 12, 4, 25, 180); o.setColor('#99CC99', '#CCFFCC'); o.setFont('arial', 18); o.addNode(0, '', '', 'Root node'); o.setFont('arial', 12); o.setColor('#CCCC66', '#FFFF99'); o.addNode(11, 0, 'u', 'u-node 1'); o.addNode(12, 0, 'u', 'u-node 2'); o.addNode(13, 0, 'u', 'u-node 3'); o.setColor('#CC4950', '#FF7C80'); o.addNode(21, 0, 'l', 'l-node 1'); o.addNode(22, 0, 'l', 'l-node 2'); o.addNode(23, 0, 'l', 'l-node 3'); o.setColor('#CC9966', '#FFCC99'); o.addNode(31, 0, 'r', 'r-node 1'); o.drawChart('c_size');
شما میتوانید به نودها در پارامتر ششم تابع ()addNode آدرس پیوند خود را اضافه نمائید.
در صورت ایجاد پیوند کامل ( مانند : http://www.yourdomain.com ) پیوند در برگه ( tab ) یا یک پنجره جدید ( بسته به تنظیمات مرورگر سمت کاربر ) باز خواهد شد.
اگر نشانگر ماوس ، روی این نوع از نودها قرار بگیرد تغییر شکل به مانند دست ( اشاره گر ) میدهد.
نکته : در این نمونه کد ، هر نود در یک چارت سازمانی جدید دوباره رسم شده اند.در چارت سازمانی قدیمی ، نودها از بین نمیروند و همه مسیرهای باقی مانده فعال خواهند ماند.بنابراین اگر reDraw در این نمونه استفاده شود ، چند پیوند در یک نود باز خواهد شد .
اگر بخواهید فقط یک لینک به نودی اختصاص دهید ، یک نود پیوندی بدون پیوند به آن اضافه کنید ( مانند نودها سبز مثال نمونه ).
var o = new orgChart(); o.setColor('#99CC99', '#CCFFCC'); o.setFont('arial', 18); o.addNode( 0, '', '', 'Searching', 1); o.addNode(50, '', '', 'Social', 1); o.addNode(90, '', '', 'Misc.', 1); o.setColor('#CCCC66', '#FFFF99'); o.setFont('arial', 12); o.addNode(11, 50, 'u', 'Facebook', 0, 'http://facebook.com'); o.addNode(13, 90, 'u', 'Youtube', 0, 'http://youtube.com'); o.addNode(14, 13, 'l', 'Youtube Music', 0, 'http://youtube.com/music'); o.addNode(15, 13, 'l', 'Youtube Entertainment', 0, 'http://youtube.com/entertainment'); o.setColor('#CC4950', '#FF7C80'); o.addNode(21, 0, 'l', 'Google', 0, 'http://google.com'); o.addNode(22, 0, 'l', 'Bing', 0, 'http://bing.com'); o.addNode('r2', '', '', 'Top of this Page', 0, '#'); o.addNode('', 'r2', 'u', 'Back to the introduction', 0, '/orgchart'); o.drawChart('c_links');
در قسمت چهارم و آخر این مطلب ، نمونههای بیشتری از ایجاد چارت سازمانی تحت وب ، درج تصویر در نودها و نمایش نمودار بعنوان یک تصویر ارائه خواهد شد.
با توجه به اینکه React یک سیستم متشکل از کامپوننتهای کوچک و بزرگ است و از JSX جهت کدنویسی استفاده میکند و یک قالب HTML، متشکل از تمام عناصر به صورت درهم ریخته میباشد و بخشهای مختلفی دارد، امکان استفادهی مستقیم از قالب HTML در آن وجود ندارد و باید با فرمت React همخوانی داشته باشد. من در اینجا از قالب رایگان و راستچین شده AdminLTE که بر پایه بوت استرپ 4 میباشد استفاده کردهام.
همانطور که میدانید React پوشهای را به نام public، مهیا کردهاست که برای استفادهی عمومی از فایلهای استاتیک ایجاد شدهاست. پس ابتدا فایلهای js,css، تصاویر و دیگر فایلهای استاتیک را به پوشهی public منتقل میکنیم. سپس فایل index قالب را باز کرده و به تگ header فایل مراجعه کنید. تگهای لینکهای معرفی فایلهای css و script ای را که در آن تعریف شدهاند، کپی کرده به هدر فایل index.html که در پوشهی public قرار دارد، منتقل کنید. همچنین از فایلهای اسکرپیت دیگر که در پایین تگ Body قرار گرفتهاند، غافل نگردید.
در اینجا باید بخشهای اساسی قالب، همانند navbar و sidebar را به صورت کامپوننت ایجاد کنیم.
پس ابتدا یک کامپوننت NavBar.jsx را ایجاد کرده و کدهای همین قسمت را در متد render قرار میدهیم:
import React, { Component } from "react";
class NavBar extends Component {
state = {};
render() {
return (
<React.Fragment>
<nav>
<!-- Left navbar links -->
<ul>
<li>
<a data-widget="pushmenu" href="#"><i></i></a>
</li>
<li>
<a href="index3.html">خانه</a>
</li>
<li>
<a href="#">تماس</a>
</li>
</ul>
<!-- SEARCH FORM -->
<form>
<div>
<input type="search" placeholder="جستجو" aria-label="Search">
<div>
<button type="submit">
<i></i>
</button>
</div>
</div>
</form>
...
</nav>
</React.Fragment>
);
}
}
export default NavBar;
- تمامی کامنتهای موجود در فایل را حذف کنید.
- تمام تگها که شامل خصوصیت class هستند را با استفاده از ابزار جستجو، یافته و با عبارت className جایگزین کنید.
- در صورتیکه روی تگها از خصوصیت style استفاده کردهاید، به شکل زیر ویرایش کرده و قالب jsx را روی آن پیاده کنید.
style="opacity:0.8;"
style={{ opacity: "0.8" }}
- در صورتیکه از تگهای img و یا input استفاده میکنید، حتما باید انتها تگها به شکل زیر بسته شده باشند:
<input type="search" placeholder="جستجو" aria-label="Search">
<input className="form-control form-control-navbar" type="search" placeholder="جستجو" aria-label="Search" />
import React, { Component } from "react"; class NavBar extends Component { state = {}; render() { return ( <React.Fragment> <nav className="main-header navbar navbar-expand bg-white navbar-light border-bottom"> <ul className="navbar-nav"> <li className="nav-item"> <a className="nav-link" data-widget="pushmenu" href="#"> <i className="fa fa-bars"></i> </a> </li> <li className="nav-item d-none d-sm-inline-block"> <a href="index3.html" className="nav-link"> خانه </a> </li> <li className="nav-item d-none d-sm-inline-block"> <a href="#" className="nav-link"> تماس </a> </li> </ul> <form className="form-inline ml-3"> <div className="input-group input-group-sm"> <input className="form-control form-control-navbar" type="search" placeholder="جستجو" aria-label="Search" /> <div className="input-group-append"> <button className="btn btn-navbar" type="submit"> <i className="fa fa-search"></i> </button> </div> </div> </form> ... </nav> </React.Fragment> ); } } export default NavBar;
return ( <React.Fragment> <NavBar /> <SideBar /> <div className="content-wrapper" style={{ marginTop: "20px" }}> <DomainList /> </div> <Footer /> </React.Fragment> )
پس از نصب SDK جدید، اگر دستور dotnet new mvc را صادر کنید، فایل csproj تولید شدهی آن تنها دارای TargetFramework ای معادل netcoreapp3.0 است و نه هیچ مورد دیگری:
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp3.0</TargetFramework> </PropertyGroup> <ItemGroup> </ItemGroup> </Project>
- ابتدا TargetFramework را به netcoreapp3.0 تنظیم کنید.
- سپس تمام PackageReferenceهایی را که به بستههای Microsoft.AspNetCore.All و یا Microsoft.AspNetCore.App اشاره میکنند، حذف کنید.
- ارجاع به بستهی Microsoft.AspNetCore.Razor.Design را نیز حذف کنید.
- اگر پیشتر خاصیت AspNetCoreHostingModel را به حالت درون پروسهای تنظیم کردهاید، آنرا حذف کنید؛ چون حالت پیشفرض نگارش 3 است.
- حذف شدن JSON.NET را مدنظر داشته باشید.
- تغییرات حالت ثبت سرویسهای MVC و Razor Pages و Web API را مدنظر داشته باشید.
پروژهی DNTIdentity به ASP.NET Core 2.1 ارتقاء داده شد.
- مشاهدهی لیست کامل تغییرات
برای اجرای آن فقط کافی است:
- ابتدا SDK جدید را نصب کنید.
- سپس مجوز SSL آنرا تبدیل به مجوز امن و قابل اطمینان کنید.
- در ادامه به پوشهی DataLayer مراجعه کرده و ابتدا دستور dotnet restore را صادر کنید. بعد از آن دو فایل cmd موجود در آنرا اجرا کنید. فایل اول مهاجرتها را تولید میکند و فایل دوم، آنها را به بانک اطلاعاتی از نوع LocalDB اعمال خواهد کرد. بانک اطلاعاتی تولید شده را در پوشهی wwwroot/App_Data میتوانید مشاهده کنید.
- در آخر به پوشهی اصلی برنامه مراجعه کرده و دو فایل bat موجود در آنرا اجرا کنید. اولی وابستگیها را بازیابی میکند و دومی برنامه را کامپایل کرده و سپس بر روی پورت SSL 5001 ارائه میدهد که بلافاصله در مرورگر قابل مشاهده خواهد بود.
برای اجرای این مراحل نیاز به IDE خاصی ندارید. همینقدر که SDK جدید را نصب کرده باشید، کافی است.
پروژهی DNTIdentity به ASP.NET Core 2.0 ارتقاء داده شد.
- مشاهدهی لیست کامل تغییرات
برای اجرای آن فقط کافی است
- ابتدا SDK جدید را نصب کنید.
- سپس به پوشهی DataLayer مراجعه کرده و ابتدا دستور dotnet restore را صادر کنید. بعد از آن دو فایل cmd موجود در آنرا اجرا کنید. فایل اول مهاجرتها را تولید میکند و فایل دوم، آنها را به بانک اطلاعاتی از نوع LocalDB اعمال خواهد کرد. بانک اطلاعاتی تولید شده را در پوشهی wwwroot/App_Data میتوانید مشاهده کنید.
- در آخر به پوشهی اصلی برنامه مراجعه کرده و دو فایل bat موجود در آنرا اجرا کنید. اولی وابستگیها را بازیابی میکند و دومی برنامه را کامپایل کرده و سپس بر روی پورت 5000 ارائه میدهد که بلافاصله در مرورگر قابل مشاهده خواهد بود.
برای اجرای این مراحل نیاز به IDE خاصی ندارید. همینقدر که SDK جدید را نصب کرده باشید، کافی است.
Unable to create an object of type 'ApplicationDbContext'. For the different patterns supported at design time, see https://go.microsoft.com/fwlink/?linkid=851728
dotnet ef migrations add InitDb -s ../ProjectName.Web
public void ConfigureServices(IServiceCollection services) { var connectionString = Configuration["ConnectionStrings:ApplicationDbContextConnection"]; services.AddDbContext<ApplicationDbContext>(options => { options.UseSqlServer(connectionString); }); // ... }
بیشتر زمانی کاربرد دارد که میخواهید اپلیکیشن خود را روی ماشینی میزبانی نمایید که فاقد dot Net Runtime میباشد.
Publishing your app as native AOT produces an app that is self-contained and that has been ahead-of-time (AOT) compiled to native code. Native AOT apps start up very quickly and use less memory. Users of the application can run it on a machine that doesn't have the .NET runtime installed.
dotnet tool install -g upgrade-assistant
dotnet tool update -g upgrade-assistant
- Back up project
- Convert project file to SDK style
- Clean up NuGet package references
upgrade-assistant upgrade MyProject.csproj
- اگر پروژه از جنس Library باشد، فایل csproj را به شکل زیر درآورید:
<Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <TargetFramework>net472</TargetFramework> <OutputType>Library</OutputType> </PropertyGroup> . . . </Project>
- اگر پروژه از جنس Console باشد، فایل csproj را به شکل زیر درآورید:
<Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <TargetFramework>net472</TargetFramework> <OutputType>Exe</OutputType> <ApplicationIcon>logo.ico</ApplicationIcon> <AppConfig>App.config</AppConfig> </PropertyGroup> . . . </Project>
- اگر پروژه از جنس Web باشد، فایل csproj را به شکل زیر درآورید. احتمالاً پیچیدهترین و سختترین فایلها، متعلق به پروژههای وب باشد. اگر دقت کنید نوع SDK از نوع MSBuild.SDK.SystemWeb میباشد. نسخه این SDK ممکن است در زمانیکه شما در حال خواندن این مطلب میباشد آپدیت شده باشد و بهتر است قبل از استفاده، آخرین نسخه را از نیوگت برداشت کنید. (باید ذکر کنم که این hack کوچک را از یک comment در issueهای گیتهاب پیدا کردم.)
<Project Sdk="MSBuild.SDK.SystemWeb/4.0.54"> <PropertyGroup> <OutputType>Library</OutputType> <TargetFramework>net472</TargetFramework> <AppConfig>Web.config</AppConfig> </PropertyGroup> . . . </Project>