- ساخت برنامههای دسکتاپ به صورت چندسکویی (ویندوز، لینوکس، مک)
- استفاده از HTML,CSS,JavaScript که طراحان وب در این زمینه با آن به آسانی ارتباط برقرار میکنند.
- قابلیت استفاده از کتابخانههای قدرتمند تحت وب چون Bootstrap,Jquery,Angular Js و ...
- متن باز و رایگان است.
D:\electron\test1>npm init
npm i electron-prebuilt --save-dev
لازم است در اینجا توضیحی کوتاه در مورد انواع وابستگیها داشته باشیم:
Dependencies این نوع از وابستگیها، بستههایی را نصب میکنند که شما از آنها در کدهایتان استفاده میکنید و در آینده به همراه پروژه کمپایل میشوند. به طور خودکار وقتی بستهای را به عنوان وابستگی معرفی میکنید، npm وابستههای آن بسته را به صورت درختی بررسی میکند و آنها را هم نصب میکند.
DevDependencies : این نوع از وابستگیهای برای کارهای دیباگینگ و ... است؛ مثل آزمون واحد و ... که نیازی نیست در کامپایل نهایی لحاظ گردند. اگر این نوع کتابخانهها را به جای devdependencies به dependencies ارسال کنید، اتفاق خاصی نمیافتد. ولی در حجم برنامهی نهایی شما تاثیرگذار خواهند بود.
PeerDependencies: این نوع وابستگیها برای معرفی بستههایی استفاده میشوند که در پلاگینهایی که استفاده میکنید تاثیر دارند. ممکن است پلاگینی نیاز به استفادهی از یک بسته را دارد، ولی آن را در کد، Require نکرده باشد (در مورد Require بعدا صحبت میکنیم). ولی برای اجرا نیاز به این بسته دارد. به همین دلیل از نسخهی 3 به بعد، به شما هشدار میدهد که این بستهها را نیز لحاظ کنید (تا نسخهی npm2 به طور خودکار نصب میشد). همچنین نسخه بندی این وابستگیها را نیز در نظر میگیرد. این حالت را میتوانید مانند پلاگینهای جیکوئری تصور کنید که نیاز است قبل از آنها، کتابخانهی جیکوئری صدا زده شود؛ در صورتی که در خود پلاگین، جی کوئری صدا زده نشده است.
ویرایشگر اتم
قبل از اینکه بخواهیم کدنویسی با هر زبانی را آغاز کنیم، عموما یک ادیتور مناسب را برای کارمان بر میگزینیم. الکترون نیازی به ادیتور خاصی ندارد و از Notepad گرفته تا هر ادیتور قدرتمند دیگری را میتوانید استفاده کنید. ولی ادیتور اتم Atom که توسط خود الکترون هم تولید شده است، برای استفاده رایج است. ویژوال استودیو هم در این زمینه بسیار خوب و قدرتمند ظاهر شده است و حاوی Intellisense هوشمندی است.
این ادیتور که با ظاهری جذاب، توسط تیم گیت هاب تولید شده است، یک ویرایشگر متن باز با قابلیت توسعه و تغییر پذیری بالاست و از بستههای Node.js پشتیانی میکند و به صورت داخلی مجهز به سیستم گیت میباشد. بیشتر فناوریهای استفاده شده در این ویرایشگر، رایگان بوده و دارای جامعهی بزرگ متن باز میباشند. از فناوریهای مورد استفادهی آن میتوان به الکترون، CoffeScript ، Node.js ,LESS و ... اشاره کرد. شعار سازندگان این ادیتور «یک ویرایشگر قابل هک برای قرن 21» میباشد.
برای پشتیبانی از زبانهای مختلف، حاوی تعدادی زیادی پلاگین پیش فرض است مانند روبی ، سی شارپ، PHP ,Git,Perl,C/C++, Go,Objective-C,YAML و ...
آغاز کدنویسی
بگذارید کدنویسی را شروع کنیم. اگر اتم را نصب کرده باشید، میتوانید با وارد کردن عبارت زیر، پروژه خود را در ادیتور باز کنید:
atom .
{ "name": "electron", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "electron ." }, "author": "", "license": "ISC" }
const electron = require('electron'); const {app} = electron; const {BrowserWindow} = electron;
let win; app.on('ready', function() { // Create the browser window. win = new BrowserWindow({ width: 800, height: 600 }); });
اکنون در کنسول مینویسیم:
npm start
برای اینکه اولین برنامه واقعا خالی نباشد و ظاهری به آن بدهیم، یک فایل html میسازیم و در callback رویداد ready، بعد از ساخت پنجره آن را صدا میزنیم:
win.loadURL(`file://${__dirname}/index.html`);
تنظیم مسیریابی ماژولها
در اینجا نیازی به تنظیم base path نیست و این تنظیم تنها یکبار به ازای کل برنامه انجام میشود. همانطور که در قسمت قبل نیز عنوان شد، ماژول مسیریابی Angular و یا همان RouterModule، به همراه سرویسی برای دسترسی به امکانات آن، تنظیمات مسیریابی و یک سری دایرکتیو مانند routerLink، جهت تعامل با آن است. از آنجائیکه سرویس ماژول مسیریابی در فایل src\app\app-routing.module.ts تعریف و تنظیم شدهاست، باید اطمینان حاصل کرد که این سرویس تنها یکبار در طول عمر برنامه وهله سازی میشود و از آنجائیکه هر ماژول تنظیمات مجزای مسیریابی خود را خواهد داشت، دیگر نمیتوان از متد RouterModule.forRoot سراسری استفاده کرد و در اینجا باید از متد forChild این ماژول، جهت تعریف تنظیمات مسیریابیهای ماژولهای مختلف کمک گرفت. متد forChild نیز شبیه به همان آرایهی تنظیمات مسیریابی متد forRoot را دریافت میکند.
یک مثال: در ادامهی مثالی که در قسمت قبل به کمک Angular CLI ایجاد کردیم، ماژول جدید محصولات را به همراه تنظیمات ابتدایی مسیریابی آن ایجاد میکنیم:
>ng g m product --routing
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ProductRoutingModule { }
سپس ProductRoutingModule به قسمت imports ماژول محصولات به صورت خودکار اضافه شدهاست:
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ProductRoutingModule } from './product-routing.module'; @NgModule({ imports: [ CommonModule, ProductRoutingModule ], declarations: [] }) export class ProductModule { }
در ادامه کامپوننت جدید لیست محصولات را به این ماژول اضافه میکنیم:
>ng g c product/ProductList
installing component create src\app\product\product-list\product-list.component.css create src\app\product\product-list\product-list.component.html create src\app\product\product-list\product-list.component.spec.ts create src\app\product\product-list\product-list.component.ts update src\app\product\product.module.ts
import { ProductListComponent } from './product-list/product-list.component'; @NgModule({ imports: [ ], declarations: [ProductListComponent] }) export class ProductModule { }
اکنون که این ماژول جدید را به همراه یک کامپوننت نمونه در آن تعریف کردیم، برای افزودن مسیریابی به آن، به فایل src\app\product\product-routing.module.ts مراجعه کرده و آرایهی Routes آنرا تکمیل میکنیم:
import { ProductListComponent } from './product-list/product-list.component'; const routes: Routes = [ { path: 'products', component: ProductListComponent } ];
در ادامه میخواهیم لینکی را به این مسیریابی جدید اضافه کنیم. در قسمت قبل منویی را به برنامه اضافه کردیم. به همین جهت به فایل src\app\app.component.html مراجعه کرده و routerLink جدیدی را به آن اضافه میکنیم:
<nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand">{{title}}</a> <ul class="nav navbar-nav"> <li> <a [routerLink]="['/home']">Home</a> </li> <li> <a [routerLink]="['/products']">Product List</a> </li> </ul> </div> </nav> <div class="container"> <router-outlet></router-outlet> </div>
در اینجا نیز نحوهی تعریف لینکها مانند قبل است و آرایهی تنظیمات پارامترهای لینک باید به مقدار خاصیت path تعریف شده اشاره کند.
اکنون دستور ng serve -o را صادر کنید تا برنامه در حافظه ساخته شده و در مرورگر نمایش داده شود. در ادامه اگر بر روی لینک لیست محصولات کلیک کنید، صفحهی ذیل را مشاهده خواهید کرد:
به این معنا که برنامه اطلاعی از این مسیریابی جدید نداشته و صفحهی یافت نشدن مسیریابی را که در قسمت قبل تنظیم کردیم، نمایش دادهاست. برای رفع این مشکل باید به فایل src\app\app.module.ts مراجعه کرده و این ماژول جدید را به آن معرفی کنیم:
import { ProductModule } from './product/product.module'; @NgModule({ declarations: [ ], imports: [ BrowserModule, FormsModule, HttpModule, ProductModule, AppRoutingModule ],
نکته 1: علت اینکه ProductModule را پیش از AppRoutingModule تعریف کردیم این است که AppRoutingModule دارای تعریف مسیریابی ** یا catch all است که در قسمت قبل آنرا جهت مدیریت مسیرهای یافت نشده به برنامه افزودیم. اگر ابتدا AppRoutingModule تعریف میشد و سپس ProductModule، هیچگاه فرصت به پردازش مسیریابیهای ماژول محصولات نمیرسید؛ چون مسیر ** پیشتر برنده شده بود.
نکته 2: میتوان در قسمت import متد RouterModule.forRoot را نیز مستقیما قرار داد (بجای AppRoutingModule). اگر این کار صورت گیرد، ابتدا مسیریابیهای موجود در ماژولها پردازش میشوند و در آخر مسیرهای موجود در RouterModule.forRoot صرفنظر از محل قرارگیری آن در این لیست بررسی خواهد شد (حتی اگر در ابتدای لیست قرار گیرد). هرچند جهت مدیریت بهتر برنامه، این متد به AppRoutingModule منتقل شدهاست. بنابراین اکنون «نکتهی 1» برقرار است.
انتخاب استراتژی مناسب نامگذاری مسیرها
هنگام کار کردن با تعدادی ویژگی مرتبط به هم قرار گرفتهی داخل یک ماژول، بهتر است روش نامگذاری مناسبی را برای تنظیمات مسیریابی آن درنظر گرفت تا مسیرهای تعیین شده علاوه بر زیبایی، وضوح بیشتری را نیز پیدا کنند. به علاوه این نامگذاری مناسب، گروه بندی مسیریابیها و lazy loading آنها را نیز سادهتر میکند.
استراتژی ابتدایی که به ذهن میرسد، نامگذاری هر مسیر بر اساس عملکرد آنها است مانند products برای نمایش لیست محصولات، product/:id برای نمایش جزئیات محصولی خاص که در اینجا id پارامتر مسیریابی است و productEdit/:id برای ویرایش جزئیات یک محصول مشخص. همانطور که مشاهده میکنید، هرچند این مسیرها متعلق به یک ماژول هستند، اما مسیرهای تعیین شدهی برای آنها اینگونه به نظر نمیرسد. بنابراین بهتر است تمام ویژگیهای قرار گرفتهی درون یک ماژول را با مسیر ریشهی یکسانی شروع کنیم. به این ترتیب نمایش لیست محصولات همان products باقی خواهد ماند اما برای نمایش جزئیات محصولی خاص از مسیر products/:id استفاده میکنیم (همان اسم جمع ریشهی مسیر؛ بجای اسم مفرد). اینبار مسیر ویرایش جزئیات یک محصول به صورت products/:id/edit تنظیم خواهد شد:
products products/:id products/:id/edit
فعالسازی یک مسیر با کدنویسی
تا اینجا نحوهی فعالسازی یک مسیر را با استفاده از دایرکتیو routerLink بررسی کردیم. اما گاهی از اوقات نیاز است تا بتوان با کدنویسی نیز کاربران را به مسیری خاص هدایت کرد. برای مثال پس از عملیات logout میخواهیم مجددا صفحهی اول سایت نمایش داده شود. برای اینکار از سرویس Router مسیریاب Angular کمک گرفته میشود. ابتدا آنرا در سازندهی یک کامپوننت تزریق کرده و سپس میتوان به قابلیتهای آن مانند استفادهی از متد navigate آن، در کدهای برنامه دسترسی یافت.
باید درنظر داشت که دایرکتیو routerLink نیز در پشت صحنه از همین متد navigate سرویس Router استفاده میکند. بنابراین تمام پارامترهای آن در متد navigate نیز قابل استفاده هستند. برای مثال زمانیکه تعداد پارامترهای routerLink یک مورد است، میتوان آرایهی آنرا به یک رشته خلاصه کرد. یک چنین قابلیتی با متد navigate نیز میسر است.
متد navigate تنها قسمتهایی از URL جاری را تغییر میدهد. اگر نیاز باشد تا کل آدرس تعویض شود، میتوان از متد دیگر سرویس Router به نام navigateByUrl استفاده کرد. این متد تمام URL segments موجود را با مسیر جدیدی جایگزین میکند. به علاوه برخلاف متد navigate، تنها یک رشته را به عنوان پارامتر میپذیرد.
در ادامه مثال جاری میخواهیم پیاده سازی ابتدایی login و logout را به برنامه اضافه کنیم. به همین منظور ابتدا ماژول جدید user را به همراه تنظیمات ابتدایی مسیریابی آن اضافه میکنیم:
>ng g m user --routing
همانند ماژول قبلی، نیاز است UserModule را به قسمت imports فایل src\app\app.module.ts نیز معرفی کنیم:
import { UserModule } from './user/user.module'; @NgModule({ declarations: [ ], imports: [ BrowserModule, FormsModule, HttpModule, ProductModule, UserModule, AppRoutingModule ],
سپس کامپوننت جدید لاگین را به ماژول user برنامه اضافه میکنیم:
>ng g c user/login
در ادامه به فایل src\app\user\user-routing.module.ts مراجعه کرده و مسیریابی جدیدی را به کامپوننت لاگین تعریف میکنیم:
import { LoginComponent } from './login/login.component'; const routes: Routes = [ { path: 'login', component: LoginComponent} ];
مرحلهی بعد، فعالسازی این مسیریابی است، با تعریف لینکی به آن. به همین جهت به فایل src\app\app.component.html مراجعه کرده و منوی برنامه را تکمیل میکنیم:
<nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand">{{title}}</a> <ul class="nav navbar-nav"> <li> <a [routerLink]="['/home']">Home</a> </li> <li> <a [routerLink]="['/products']">Product List</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a [routerLink]="['/login']">Log In</a> </li> </ul> </div> </nav> <div class="container"> <router-outlet></router-outlet> </div>
تکمیل کامپوننت login و افزودن لینک logout
در ادامه میخواهیم یک فرم لاگین مقدماتی را پس از کلیک بر روی لینک لاگین نمایش دهیم و هدایت به صفحهی لیست محصولات را پس از لاگین و مخفی کردن لینک لاگین و نمایش لینک خروج را در این حالت پیاده سازی کنیم. برای این منظور ابتدا اینترفیس خالی کاربر را ایجاد میکنیم:
>ng g i user/user
export interface IUser { id: number; userName: string; isAdmin: boolean; }
پس از آن یک سرویس ابتدایی اعتبارسنجی کاربران را نیز اضافه خواهیم کرد:
>ng g s user/auth -m user/user.module
installing service create src\app\user\auth.service.spec.ts create src\app\user\auth.service.ts update src\app\user\user.module.ts
پس از ایجاد قالب ابتدایی فایل auth.service.ts آنرا به نحو ذیل تکمیل کنید:
import { IUser } from './user'; import { Injectable } from '@angular/core'; @Injectable() export class AuthService { currentUser: IUser; constructor() { } isLoggedIn(): boolean { return !this.currentUser; } login(userName: string, password: string): boolean { if (!userName || !password) { return false; } if (userName === 'admin') { this.currentUser = { id: 1, userName: userName, isAdmin: true }; return true; } this.currentUser = { id: 2, userName: userName, isAdmin: false }; return true; } logout(): void { this.currentUser = null; } }
سپس کامپوننت لاگین واقع در فایل src\app\user\login\login.component.ts را به نحو ذیل تکمیل کنید:
import { Router } from '@angular/router'; import { AuthService } from './../auth.service'; import { Component, OnInit } from '@angular/core'; import { NgForm } from '@angular/forms'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { errorMessage: string; pageTitle = 'Log In'; constructor(private authService: AuthService, private router: Router) { } ngOnInit() { } login(loginForm: NgForm) { if (loginForm && loginForm.valid) { let userName = loginForm.form.value.userName; let password = loginForm.form.value.password; if (this.authService.login(userName, password)) { this.router.navigate(['/products']); } } else { this.errorMessage = 'Please enter a user name and password.'; }; } }
از AuthService برای اعتبارسنجی کاربر و لاگین او به سیستم استفاده میکنیم و از سرویس مسیریاب Angular جهت فراخوانی متد navigate آن به صفحهی مشاهدهی محصولات، پس از لاگین کاربر استفاده شدهاست.
اکنون میخواهیم قالب این کامپوننت را نیز تکمیل کنیم. پیش از آن به فایل src\app\user\user.module.ts مراجعه کرده و در قسمت imports آن FormsModule را نیز اضافه کنید:
import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ CommonModule, FormsModule, UserRoutingModule ],
سپس فایل src\app\user\login\login.component.html را به نحو ذیل تغییر دهید:
<div class="panel panel-default"> <div class="panel-heading"> {{pageTitle}} </div> <div class="panel-body"> <form class="form-horizontal" novalidate (ngSubmit)="login(loginForm)" #loginForm="ngForm" autocomplete="off"> <fieldset> <div class="form-group" [ngClass]="{'has-error': (userNameVar.touched || userNameVar.dirty) && !userNameVar.valid }"> <label class="col-md-2 control-label" for="userNameId">User Name</label> <div class="col-md-8"> <input class="form-control" id="userNameId" type="text" placeholder="User Name (required)" required (ngModel)="userName" name="userName" #userNameVar="ngModel" /> <span class="help-block" *ngIf="(userNameVar.touched || userNameVar.dirty) && userNameVar.errors"> <span *ngIf="userNameVar.errors.required"> User name is required. </span> </span> </div> </div> <div class="form-group" [ngClass]="{'has-error': (passwordVar.touched || passwordVar.dirty) && !passwordVar.valid }"> <label class="col-md-2 control-label" for="passwordId">Password</label> <div class="col-md-8"> <input class="form-control" id="passwordId" type="password" placeholder="Password (required)" required (ngModel)="password" name="password" #passwordVar="ngModel" /> <span class="help-block" *ngIf="(passwordVar.touched || passwordVar.dirty) && passwordVar.errors"> <span *ngIf="passwordVar.errors.required"> Password is required. </span> </span> </div> </div> <div class="form-group"> <div class="col-md-4 col-md-offset-2"> <span> <button class="btn btn-primary" type="submit" style="width:80px;margin-right:10px" [disabled]="!loginForm.valid"> Log In </button> </span> <span> <a class="btn btn-default" [routerLink]="['/welcome']"> Cancel </a> </span> </div> </div> </fieldset> </form> <div class="has-error" *ngIf="errorMessage">{{errorMessage}}</div> </div> </div>
اکنون میخواهیم پس از ورود او، نام او را نمایش داده و همچنین دکمهی logout را بجای login در منوی بالای سایت نمایش دهیم. به همین جهت در قالب کامپوننت App که منوی برنامه در آن تنظیم شدهاست، نیاز است بتوانیم به سرویس Auth سفارشی دسترسی یافته و خروجی متد isLoggedIn آنرا بررسی کنیم. به همین منظور به فایل src\app\app.component.ts مراجعه کرده و آنرا به صورت ذیل تکمیل کنید:
import { Router } from '@angular/router'; import { AuthService } from './user/auth.service'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { pageTitle: string = 'Routing Lab'; constructor(private authService: AuthService, private router: Router) { } logOut(): void { this.authService.logout(); this.router.navigateByUrl('/welcome'); } }
پس از این تغییرات، اکنون میتوان قالب src\app\app.component.html را به نحو ذیل تکمیل کرد:
<nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand">{{title}}</a> <ul class="nav navbar-nav"> <li> <a [routerLink]="['/home']">Home</a> </li> <li> <a [routerLink]="['/products']">Product List</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li *ngIf="authService.isLoggedIn()"> <a>Welcome {{ authService.currentUser.userName }}</a> </li> <li *ngIf="!authService.isLoggedIn()"> <a [routerLink]="['/login']">Log In</a> </li> <li *ngIf="authService.isLoggedIn()"> <a (click)="logOut()">Log Out</a> </li> </ul> </div> </nav> <div class="container"> <router-outlet></router-outlet> </div>
اکنون اگر برنامه را توسط دستور ng serve -o اجرا کنید، صفحهی لاگین و منوی بالای صفحه چنین شکلی را خواهد داشت:
پس از لاگین، لینک لاگین از منو حذف شده و سپس نام کاربری و لینک به logout نمایان میشوند.
اینبار اگر بر روی logout کلیک کنید، نام کاربری و لینک logout از صفحه حذف و مجددا لینک لاگین نمایش داده میشود.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: angular-routing-lab-01.zip
برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کردهاید. سپس از طریق خط فرمان به ریشهی پروژه وارد شده و دستور npm install را صادر کنید تا وابستگیهای آن دریافت و نصب شوند. در آخر با اجرای دستور ng serve -o برنامه ساخته شده و در مرورگر پیش فرض سیستم نمایش داده خواهد شد.
روش نصب NET SDK. بر روی لینوکس Ubuntu
برای نصب از طریق دانلود فایل های دات نت به صورت آفلاین بر روی سرور بدون اینترنت میتوانید از روش زیر هم استفاده کنید.
- ابتدا فایل های دات نت رو بسته به معماری سیستم دانلود کنید. (Arm32 | Arm32 Alpine | Arm64 | Arm64 Alpine | x64 | x64 Alpine)
- سپس فایل دات نت رو به سرور خود منتقل کنید و از طریق دستورات زیر، خط فرمان dotnet رو به ترمینال اضافه کنید:
export DOTNET_ROOT="$HOME/yourpath/dotnet" export PATH="$PATH:$HOME/yourpath/dotnet"
مشابه با Edit the system environment variables در ویندوز
و اکنون با نوشتن دستور dotnet --version میتوانید نگارش ورژن دات رو مشاهده کنید.
همچنین اگر نیاز به نصب tools هایی مانند ef core نیاز دارید میتوانید از دستور زیر استفاده کنید:
dotnet tool install --global dotnet-ef export PATH="$PATH:$HOME/.dotnet/tools"
این روش در خود مستندات مایکروسافت توضیح داده شده اما استفاده از پکیج های داخلی ابونتو و یا اجرای اسکریپت ها خیلی آسون تر هستش و این روش صرفا موقعی استفاده میشه که امکان اجرای دستورات بر روی یک سیستم آفلاین وجود ندارد.
مشکل در جمع کل
new PdfReport().DocumentPreferences(doc => { doc.RunDirection(PdfRunDirection.RightToLeft); doc.Orientation(PageOrientation.Portrait); doc.PageSize(PdfPageSize.A4); doc.DocumentMetadata(new DocumentMetadata { Author = _company, Application = "نرم افزار ", Keywords = "سود فاکتورها", Subject = "سود فاکتورها", Title = "سود فاکتورها" }); }) .DefaultFonts(fonts => { fonts.Path(Path.Combine(Environment.CurrentDirectory, @"fonts\irsans.ttf"), Path.Combine(Environment.CurrentDirectory, @"fonts\verdana.ttf")); fonts.Size(8); }) .PagesFooter(footer => { footer.DefaultFooter(DateTimeHelper.ToPersianShortDateString(DateTime.Now,true,true)); }) .PagesHeader(header => { header.HtmlHeader(rptHeader => { // Register fonts and styles var styleSheet = new iTextSharp.text.html.simpleparser.StyleSheet(); iTextSharp.text.FontFactory.Register(Path.Combine(Environment.CurrentDirectory, @"fonts\BFARNAZ.TTF"), "Farnaz"); styleSheet.LoadStyle("report-header", "size", "12pt"); styleSheet.LoadStyle("report-header", "font-family", "Farnaz"); iTextSharp.text.FontFactory.Register(Path.Combine(Environment.CurrentDirectory, @"fonts\BNAZANIN.TTF"), "Bnazanin"); styleSheet.LoadStyle("report-desc", "size", "12pt"); styleSheet.LoadStyle("report-desc", "font-family", "Bnazanin"); rptHeader.PageHeaderProperties(new HeaderBasicProperties { RunDirection = PdfRunDirection.RightToLeft, HorizontalAlignment = PdfRpt.Core.Contracts.HorizontalAlignment.Center, ShowBorder = false, PdfFont = header.PdfFont, StyleSheet = styleSheet }); rptHeader.AddPageHeader(pageHeader => { var title = "سود فاکتورها"; var companyName = string.Concat("شرکت / فروشگاه ", _company); var financialYear = string.Concat("سال مالی ", _financialPeriod.GetCurrentFinancialPeriodTitle()); return string.Format(@" <table cellpadding='0' cellspacing='0' class='report-header'> <tr> <td>{0}</td> </tr> <tr> <td>{1}</td> </tr> <tr> <td>{2}</td> </tr> </table> <table cellpadding='0' cellspacing='0' class='report-desc'> <tr> <td align='left' width='10%'>{3}</td><td align='left' width='10%'>از تاریخ:</td> <td align='left' width='65%'>{4}</td><td align='left' width='15%'>از شماره:</td> </tr> <tr> <td align='left' width='10%'>{5}</td> <td align='left' width='10%'>تا تاریخ:</td> <td align='left' width='65%'>{6}</td> <td align='left' width='15%'>تا شماره:</td> </tr> </table> " , title, companyName, financialYear, DateTimeHelper.ToPersianShortDateString(_fromDate), _fromNumber, DateTimeHelper.ToPersianShortDateString(_toDate), _toNumber ); }); }); }) .MainTableTemplate(template => { template.CustomTemplate(new GrayTemplate()); }) .MainTablePreferences(table => { table.ColumnsWidthsType(TableColumnWidthType.Relative); table.NumberOfDataRowsPerPage(0); }) .MainTableDataSource(dataSource => { var factorsProfitItems = FactorsProfitItems.Select(g => new { Number = g.Number, SaleDate = g.SaleDate, Customer = g.Customer, Description = g.Description, FactorProfit = g.FactorProfit, Discount = g.Discount, RealProfit = g.RealProfit }); dataSource.StronglyTypedList(factorsProfitItems); }) .MainTableColumns(columns => { columns.AddColumn(column => { column.PropertyName<FactorsProfitItemPrintViewModel>(x => x.Number); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Center); column.IsVisible(true); column.Order(0); column.Width(1); column.HeaderCell("ش فاکتور"); }); columns.AddColumn(column => { column.PropertyName<FactorsProfitItemPrintViewModel>(x => x.SaleDate); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(1); column.Width(1); column.ColumnItemsTemplate(template => { template.TextBlock(); template.DisplayFormatFormula(obj => DateTimeHelper.ToPersianShortDateString((DateTime)obj)); }); column.HeaderCell("تاریخ"); }); columns.AddColumn(column => { column.PropertyName<FactorsProfitItemPrintViewModel>(x => x.Customer); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(2); column.Width(1.5f); column.HeaderCell("مشتری"); }); columns.AddColumn(column => { column.PropertyName<FactorsProfitItemPrintViewModel>(x => x.Description); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Center); column.IsVisible(true); column.Order(3); column.Width(2); column.HeaderCell("شرح"); }); columns.AddColumn(column => { column.PropertyName<FactorsProfitItemPrintViewModel>(x => x.FactorProfit); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Right); column.IsVisible(true); column.Order(4); column.Width(1); column.ColumnItemsTemplate(template => { template.TextBlock(); template.DisplayFormatFormula(obj => string.Format("{0:n0}", obj)); }); column.AggregateFunction(aggregateFunction => { aggregateFunction.NumericAggregateFunction(AggregateFunction.Sum); aggregateFunction.DisplayFormatFormula(obj => obj == null ? string.Empty : string.Format("{0:n0}", obj)); }); column.HeaderCell("سود فاکتور"); }); columns.AddColumn(column => { column.PropertyName<FactorsProfitItemPrintViewModel>(x => x.Discount); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Right); column.IsVisible(true); column.Order(5); column.Width(1); column.ColumnItemsTemplate(template => { template.TextBlock(); template.DisplayFormatFormula(obj => string.Format("{0:n0}", obj)); }); column.AggregateFunction(aggregateFunction => { aggregateFunction.NumericAggregateFunction(AggregateFunction.Sum); aggregateFunction.DisplayFormatFormula(obj => obj == null ? string.Empty : string.Format("{0:n0}", obj)); }); column.HeaderCell("تخفیف"); }); columns.AddColumn(column => { column.PropertyName<FactorsProfitItemPrintViewModel>(x => x.RealProfit); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Right); column.IsVisible(true); column.Order(6); column.Width(1); column.ColumnItemsTemplate(template => { template.TextBlock(); template.DisplayFormatFormula(obj => string.Format("{0:n0}", obj)); }); column.AggregateFunction(aggregateFunction => { aggregateFunction.NumericAggregateFunction(AggregateFunction.Sum); aggregateFunction.DisplayFormatFormula(obj => obj == null ? string.Empty : string.Format("{0:n0}", obj)); }); column.HeaderCell("سود خالص"); }); }) .MainTableSummarySettings(summarySettings => { summarySettings.OverallSummarySettings("جمع کل"); summarySettings.PreviousPageSummarySettings("نقل از صفحه قبل"); summarySettings.PageSummarySettings("جمع کل صفحه"); }) .MainTableEvents(events => { events.DataSourceIsEmpty(message: "داده ای جهت نمایش وجود ندارد."); events.CellCreated(args => { args.Cell.BasicProperties.CellPadding = 4f; }); events.MainTableAdded(args => { var taxTable = new PdfGrid(3); // Create a clone of the MainTable's structure taxTable.RunDirection = 3; taxTable.SetWidths(new float[] { 3, 3, 3 }); taxTable.WidthPercentage = 100f; taxTable.SpacingBefore = 60f; taxTable.AddSimpleRow( (data, cellProperties) => { data.Value = "امضاء تنظیم کننده"; cellProperties.ShowBorder = false; cellProperties.PdfFont = args.PdfFont; }, (data, cellProperties) => { data.Value = "امضاء حسابدار"; cellProperties.ShowBorder = false; cellProperties.PdfFont = args.PdfFont; }, (data, cellProperties) => { data.Value = "امضاء مدیرعامل"; cellProperties.ShowBorder = false; cellProperties.PdfFont = args.PdfFont; }); args.PdfDoc.Add(taxTable); }); }) .Export(export => { export.ToExcel("خروجی اکسل"); export.ToCsv("خروجی CSV"); export.ToXml("خروجی XML"); }) .Generate(data => data.AsPdfFile(_documentSource));
در این مقاله با یکی از مهمترین ویژگیهای git یعنی بازیابی تغییرات فایلها، آشنا میشویم. اما در ابتدا نگاهی میکنیم به چگونگی ایجاد تغییر در آخرین commit:
تغییر آخرین commit:
در
git این امکان وجود دارد که آخرین فرمان commit با استفاده از اصلاحکننده
amend تغییر کند. علت تاکید بر روی آخرین دستور این است که git به دلیل
ساختاری که دارد نمیتواند commitهای قبل را تغییر دهد. اگر مقالات ابتدایی
آموزش git را مطالعه کرده باشید، به خاطر دارید که هر commit دارای یک کد
منحصر به فرد SHA-1 است، که این کد از هش کردن BLOBها به همراه خود مقادیر
commit یعنی مشخصات ایجاد کننده آن و از همه مهمتر SHA-1 پدر ایجاد میشود.
در نتیجه تغییر commitیی که نقش برگ را ندارد، یعنی در ساختار درختی git
دارای فرزند است، سبب میشود کد SHA-1 آن تغییر کند. این تغییر، commitهای فرزند را مجاب میکند برای حفظ صحت دادهها مقدار SHA-1 خود را تغییر دهند.
به این ترتیب این تغییرات در کل repository پخش خواهد شد. به همین دلیل git
جز آخرین commit امکان اصلاح دیگر commitها را نخواهد داد.
برای اصلاح آخرین commit کافی است دستور commit خود را با amend-- بیاورید
دستورات بازیابی فایل:
دستور checkout:
این فرمان یکی از مهمترین فرمانهای git است که دارای دو کاربرد است:
۱) بازیابی فایلی از repository و یا stage
۲) تغییر شاخه (این مورد را در مقالات مربوط به branch بررسی خواهیم کرد)
با
استفاده از این دستور میتوان فایلی را از repository به stage یا working
tree و یا هر دو بیاوریم. عملکرد این دستور با اصلاح کنندههای گوناگون
متفاوت خواهد بود. در ادامه روشهای مختلف فراخوانی این دستور و کاربرد هر
کدام آورده شده است:
در صورتی که بخواهیم فایلی را از محلی که head اکنون به آن اشاره میکند به working tree بیاوریم از دستور زیر استفاده میکنیم:
git checkout --[filename]
در حالت فوق فایل مستقیما به working tree آورده شده و در stage قرار نمیگیرد
تذکر:
-- در دستور بالا اختیاری بوده، اما استفاده از آن توصیه میشود. زیرا در
صورتیکه نام فایل به اشتباه وارد شود و یا فایل موجود نباشد، git اقدام به
تعویض شاخه میکند. زیرا همانطور که گفته شد، این دستور کاربرد دوگانه دارد.
در این حالت ممکن است به علت سهل انگاری مشکلاتی ایجاد شود علامت -- تاکید میکند که مقدار نوشته نام فایل است.
حال اگر بخواهیم فایلی را از commitهای قبل بازیابی کنیم، میتوانیم از دستور زیر استفاده کنیم:
git checkout [SHA-1] [filename]
در این حالت فایل هم در stage و هم در working tree قرار میگیرد.
دستور reset:
در
صورتیکه بخواهید تعداد زیادی فایل را به وضعیت مشخصی در زمان قبل
برگدانید، reset فرمان مناسبی خواهد بود. البته استفاده از این دستور باید با
احتیاط کامل صورت گیرد. زیرا در صورت اشتباه، این امکان وجود دارد که دیگر
نتوانید به بخشی از سوابق فایلهای خود دسترسی داشته باشید. بنابراین این
دستور همانقدر که کاربردی است، به همان اندازه نیز خطرناک است.
دستور reset را میتوان به ۳ صورت اجرا نمود:
۱) soft
۲) mixed (حالت پیشفرض)
۳) hard
۱)در
حالت soft تنها head به commit گفته شده منتقل میشود و working tree و
همچنین stage تغییری نمیکند. دقیقا مانند آنکه هد یک نوار خوان ویدئویی به
جای آنکه به آخرین محل ضبط اشاره کند، به عقب برگشته و به قسمتی در قبل
برود. در این حالت در صورتیکه دستور commit جدیدی ایجاد نشود که باعث پاک
شدن commitهای از آنجا به بعد شود، میتوان با اجرای مجدد دستور reset و اشاره
به آخرین commit، مجددا head را به سر جای اول برگرداند. البته توجه کنید در
صورتیکه در هنگام برگرداندن head به commitهای قبلی، فایلهایی تغییر کرده
باشند، آنها به صورت خودکار به stage اضافه میشوند.
۲) در حالت mixed
که پیش فرض این دستور نیز است، working tree بدون تغییر میماند. اما stage
تغییر کرده و دقیقا مانند وضعیت commit میشود.
۳) در این حالت هم
working tree و هم stage تغییر میکند و عینا وضعیت commitیی را میگیرند
که اکنون head به آن اشاره میکند. استفاده از این اصلاح کننده بسیار
خطرناکتر از موارد قبل است.
در هر یک از موارد فوق تا زمانیکه دستور
commit جدیدی را اجرا نکرده باشید، میتوانید به وضعیت قبل برگردید. اما اگر
commit جدید اجرا شود دیگر امکان بازگشت به commitهای صورت گرفته بعد از
آن وجود ندارد.
نکته مهم:
علیرغم
آنکه میتوان به commitهای گذشته در صورت عدم داشتن commit جدید مراجعه
کرد، اما یک اشکال فنی وجود دارد و آن این است که شما نمیتوانید SHA-1های آن commitها را با دستوراتی نظیر log ببینید. بنابراین بهتر است مقدار آنها
را قبل از اجرای دستور، ذخیره و تا اطمینان از وضعیت فعلی در محلی نگه دارید.
شکل زیر نمایانگر وضعیتهای مختلف دستور reset در هنگام بازگشت به سه commit قبل نسبت به وضعیت فعلی Head است:
var firstControllerObj = function ($scope) { // Initialize the model object $scope.firstModelObj = { firstName: "John" }; }; var secondControllerObj = function ($scope) { // Initialize the model object $scope.secondModelObj = { lastName: "Doe" }; // Define utility functions $scope.getFullName = function () { return $scope.firstModelObj.firstName + " " + $scope.secondModelObj.lastName; }; }; var thirdControllerObj = function ($scope) { // Initialize the model object $scope.thirdModelObj = { middleName: "Al", lastName: "Smith" }; // Define utility functions $scope.getFullName = function () { return $scope.firstModelObj.firstName + " " + $scope.thirdModelObj.middleName + " " + $scope.thirdModelObj.lastName; }; };
<div ng-controller="firstControllerObj"> <h3>First controller</h3> <strong>First name:</strong> {{firstModelObj.firstName}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName" /></label><br /> <br /> <div ng-controller="secondControllerObj"> <h3>Second controller (inside First)</h3> <strong>First name (from First):</strong> {{firstModelObj.firstName}}<br /> <strong>Last name (from Second):</strong> {{secondModelObj.lastName}}<br /> <strong>Full name:</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName" /></label><br /> <label>Set the last name: <input type="text" ng-model="secondModelObj.lastName" /></label><br /> <br /> <div ng-controller="thirdControllerObj"> <h3>Third controller (inside Second and First)</h3> <strong>First name (from First):</strong> {{firstModelObj.firstName}}<br /> <strong>Middle name (from Third):</strong> {{thirdModelObj.middleName}}<br /> <strong>Last name (from Second):</strong> {{secondModelObj.lastName}}<br /> <strong>Last name (from Third):</strong> {{thirdModelObj.lastName}}<br /> <strong>Full name (redefined in Third):</strong> {{getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="firstModelObj.firstName" /></label><br /> <label>Set the middle name: <input type="text" ng-model="thirdModelObj.middleName" /></label><br /> <label>Set the last name: <input type="text" ng-model="thirdModelObj.lastName" /></label> </div> </div> </div>
خطای آخری رو که ارسال کردید اینجا توضیح داده شده: http://support.microsoft.com/kb/2015129
خلاصهاش اینکه باید دستور aspnet_regiis.exe /iru رو در خط فرمان اجرا کنید. محل قرارگیری برنامه aspnet_regiis.exe در پوشه ویندوز هست (فایلها رو جستجو کنید تا یافت بشه).
نحوه ارتقاء برنامههای موجود MVC3 به MVC4
اولین کاری که باید پس از آغاز یک پروژه جدید MVC4 انجام داد:
خط فرمان پاورشل نیوگت را باز کنید و دستور Update-Package را صادر کنید. تقریبا تمام اجزای MVC4 مرتبا به روز میشوند:
PM> Update-Package
ObsoleteAttribute
ObsoleteAttribute بر روی تمامی عناصر یک برنامه بجز assemblies, modules، پارامترها و مقادیر بازگشتی قابل استفاده است. علامتگذاری یک عنصر به عنوان منسوخ شده، به کاربر استفاده کننده اطلاع میدهد که این عنصر در نسخههای آینده حذف خواهد شد.
با استفاده از پروپرتی Message آن پیامی را به کاربر استفاده کننده نشان خواهد داد و توصیه میشود در این پیام یک راه حل نیز ارائه شود.
پروپرتی IsError در صورتی که مقدار آن به true تعیین شده باشد و کامپایلر در صورتی که عنصری که این خصوصیت بر روی آن تعریف شده است، استفاده شده باشد، در پنجره Error List، پیام مربوط به Obsolete را نشان میدهد. برای مثال پس از استفاده از کلاس زیر، OrderDetailTotal به صورت warning و CalculateOrderDetailTotal به صورت Error در پنجره Error List نشان داده میشود.
public static class ObsoleteExample { // Mark OrderDetailTotal As Obsolete. [ObsoleteAttribute("This property (OrderDetailTotal) is obsolete. Use InvoiceTotal instead.", false)] public static decimal OrderDetailTotal { get { return 12m; } } public static decimal InvoiceTotal { get { return 25m; } } // Mark CalculateOrderDetailTotal As Obsolete. [ObsoleteAttribute("This method is obsolete. Call CalculateInvoiceTotal instead.", true)] public static decimal CalculateOrderDetailTotal() { return 0m; } public static decimal CalculateInvoiceTotal() { return 1m; } }
DefaultValueAttribute
DefaultValueAttribute جهت تعیین مقدار پیش فرض یک پروپرتی استفاده میشود. شما میتوانید یک DefaultValueAttribute را با هر مقداری ایجاد کنید. ایجاد مقدار پیش فرض برای یک پروپرتی باعث نمیشود که مقداردهی اولیهای به آن انجام گیرد؛ برای این کار نیاز به کدنویسی میباشد.
مثال زیر نحوه استفاده و مقداردهی اولیه پروپرتیها را نشان میدهد.
public class DefaultValueAttributeTest { public DefaultValueAttributeTest() { // Use the DefaultValue propety of each property to actually set it, via reflection. foreach (PropertyDescriptor prop in TypeDescriptor.GetProperties(this)) { var attr = prop.Attributes[typeof(DefaultValueAttribute)] as DefaultValueAttribute; if (attr != null) prop.SetValue(this, attr.Value); } } [DefaultValue(28)] public int Age { get; set; } [DefaultValue("Vahid")] public string FirstName { get; set; } [DefaultValue("Mohammad Taheri")] public string LastName { get; set; } public override string ToString() { return $"{this.FirstName} {this.LastName} is {this.Age}."; } }
DebuggerBrowsableAttribute
در صورت استفاده از DebuggerBrowsableAttribute ، شما میتوانید نحوه نمایش یک عضو را در پنجره متغیرها، در زمان دیباگ، تعیین کنید.public class DebuggerBrowsableTest { [DebuggerBrowsable(DebuggerBrowsableState.Never)] // عدم نمایش در زمان دیباگ در پنجره متغیرها public string FirstName { get; set; } [DebuggerBrowsable(DebuggerBrowsableState.Collapsed)] // مقدار پیش فرض public string LastName { get; set; } [DebuggerBrowsable( DebuggerBrowsableState.RootHidden )] // عدم نمایش در زمان دیباگ در پنجره متغیرها public string FullName => FirstName + " " + LastName; [DebuggerBrowsable( DebuggerBrowsableState.RootHidden )] // تنها در زمانی که یک آرایه یا لیست باشد نمایش داده میشود public string[] FullNameArray => new string[] { FirstName + " " + LastName }; }
اگر از کد مثال بالا استفاده کنید و با استفاده از کلید F11 به صورت خط به خط دستورات را اجرا کنید، مشاهده خواهید کرد متغیر FirstName و FullName در پنجره Autos نشان داده نخواهد شد.
Operator ??
عملگر ?? در صورتی که عملوند سمت چپ آن تهی (null) نباشد، مقدار آن را باز میگرداند و در غیر اینصورت مقدار عملوند سمت راست خود را باز میگرداند. نوعهای تهی پذیر (nullable) میتوانند دارای مقدار و یا به صورت تعریف نشده باشند. عملگر ?? وقتی که یک نوع تهی پذیر به یک نوع غیرتهی پذیر انتساب داده میشود، مقدار پیش فرض آن را باز میگرداند.
int? x = null; int y = x ?? -1; Console.WriteLine("y now equals -1 because x was null => {0}", y); int i = DefaultValueOperatorTest.GetNullableInt() ?? default(int); Console.WriteLine("i equals now 0 because GetNullableInt() returned null => {0}", i); string s = DefaultValueOperatorTest.GetStringValue(); Console.WriteLine("Returns 'Unspecified' because s is null => {0}", s ?? "Unspecified");