پروژه EntityProfiler
CodeLite 6.1 منتشر شد
در پروژه هایی به صورت Smart UI کد نویسی شده اند و یا حتی قصد انجام پروژه با تکنولوژیهای WPF یا Windows Application را دارید و نیاز دارید که فرمهای خود را به صورت generic بسازید این مقاله به شما کمک خواهد کرد.
#Windows Application
یک پروژه از نوع Windows Application ایجاد میکنیم و یک فرم به نام FrmBase در آن خواهیم داشت. یک Label در فرم قرار دهید و مقدار Text آن را فرم اصلی قرار دهید.
در فرم مربوطه، فرم را به صورت generic تعریف کنید. به صورت زیر:
public partial class FrmBase<T> : Form where T : class { public FrmBase() { InitializeComponent(); } }
بعد باید همین تغییرات را در فایل FrmBase.designer.cs هم اعمال کنیم:
partial class FrmBase<T> where T : class { /// <summary> /// Required designer variable. /// </summary> private System.ComponentModel.IContainer components = null; /// <summary> /// Clean up any resources being used. /// </summary> /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param> protected override void Dispose( bool disposing ) { if ( disposing && ( components != null ) ) { components.Dispose(); } base.Dispose( disposing ); } #region Windows Form Designer generated code /// <summary> /// Required method for Designer support - do not modify /// the contents of this method with the code editor. /// </summary> private void InitializeComponent() { this.label1 = new System.Windows.Forms.Label(); this.SuspendLayout(); // // label1 // this.label1.AutoSize = true; this.label1.Location = new System.Drawing.Point(186, 22); this.label1.Name = "label1"; this.label1.Size = new System.Drawing.Size(51, 13); this.label1.TabIndex = 0; this.label1.Text = "فرم اصلی"; // // FrmBase // this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; this.ClientSize = new System.Drawing.Size(445, 262); this.Controls.Add(this.label1); this.Name = "FrmBase"; this.Text = "Form1"; this.ResumeLayout(false); this.PerformLayout(); } #endregion private System.Windows.Forms.Label label1; }
public partial class FrmTest : FrmBase<String> { public FrmTest() { InitializeComponent(); } }
با این که برنامه به راحتی اجرا میشود و خروجی آن قابل مشاهده است ولی امکان نمایش فرم در حالت design وجود ندارد. متاسفانه در Windows Appها برای تعریف فرمها به صورت generic یا این مشکل روبرور هستیم. تنها راه موجود برای حل این مشکل استفاده از یک کلاس کمکی است. به صورت زیر:
public partial class FrmTest : FrmTestHelp { public FrmTest() { InitializeComponent(); } } public class FrmTestHelp : FrmBase<String> { }
#WPF
در پروژههای WPF ، راه حلی برای این مشکل در نظر گرفته شده است. در WPF، برای Window یا UserControl پایه نمیتوان Designer داشت. ابتدا باید فرم پایه را به صورت زیر ایجاد کنیم:
public class WindowBase<T> : Window where T : class { }
public partial class MainWindow: WindowBase<String> { public MainWindow() { InitializeComponent(); } }
<local:WindowBase x:Class="GenericWindows.MainWindow"
x:TypeArguments="sys:String" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:GenericWindows" xmlns:sys="clr-namespace:System;assembly=mscorlib" Title="MainWindow" Height="350" Width="525"> <Grid> </Grid> </local:WindowBase>
کتابخانه scroll-out
ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects! Demo
Why should I use this?
- Animate or reveal elements as they scroll into view using CSS or JavaScript
- Super tiny JavaScript library at 1KB minified and gzipped.
- Free for commercial and non-commercial use under the MIT license.
مقدمه:
شروع را با نصب ویژوال استودیوی نسخه رایگان 2013 برای وب و یا نسخهی 2013 آغاز میکنیم. برای راهنمایی استفاده ازDropbox, GitHub, Linkedin, Instagram, buffer salesforce STEAM, Stack Exchange, Tripit, twitch, Twitter, Yahoo و بیشتر اینجا کلیک کنید.توجه:
برای استفاده از Google OAuth 2 و دیباگ به صورت لوکال بدون اخطار SSL، شما میبایستی نسخهی ویژوال استودیو 2013 آپدیت 3 و یا بالاتر را نصب کرده باشید.ساخت اولین پروژه:
ویژوال استودیو را اجرا نماید. در سمت چپ بر روی آیکن Web کلیک کنید تا آیتم ASP.NET Web Application در دات نت 4.5.1 نمایش داده شود. یک نام را برای پروژه انتخاب نموده و OK را انتخاب نماید.در دیالوگ بعدی آیتم MVC را انتخاب و اطمینان داشته باشید Individual User Accounts که با انتخاب Change Authentication به صورت دیالوگ برای شما نمایش داده میشود، انتخاب گردیده و در نهایت بر روی OK کلیک کنید.
فعال نمودن حساب کاربری گوگل و اعمال تنظیمات اولیه:
در این بخش در صورتیکه حساب کاربری گوگل ندارید، وارد سایت گوگل شده و یک حساب کاربری را ایجاد نماید. در غیر اینصورت اینجا کلیک کنید تا وارد بخش Google Developers Console شوید.در بخش منو بر روی ایجاد پروژه کلیک کنید تا پروژهای جدید ایجاد گردد.
در دیالوگ باز شده نام پروژه خودتان را وارد کنید و دکمهی Create را زده تا عملیات ایجاد پروژه انجام شود. در صورتیکه با موفقیت پیش رفته باشید، این صفحه برای شما بارگزاری میگردد.
فعال سازی Google+API
در سمت چپ تصویر بالا آیتمی با نام APIs & auth خواهید دید که بعد از کلیک بر روی آن، زیر مجموعهای برای این آیتم فعال میگردد که میبایستی بر روی APIs کلیک و در این قسمت به جستجوی آیتمی با نام Google+ API پرداخته و در نهایت این آیتم را برای پروژه فعال سازید.
ایجاد یک Client ID :
در بخش Credentials بر روی دکمهی Create new Client ID کلیک نماید.
در دیالوگ باز شده از شما درخواست میشود تا نوع اپلیکشن را انتخاب کنید که در اینجا میبایستی آیتم اول (Web application ) را برای گام بعدی انتخاب کنید و با کلیک بر روی Configure consent screen به صفحهی Consent screen هدایت خواهید شد. فیلدهای مربوطه را به درستی پر کنید (این بخش به عنوان توضیحات مجوز ورود بین سایت شما و گوگل است).
در نهایت بعد از کلیک بر روی Save به صفحهی Client ID بازگشت داده خواهید شد که در این صفحه با این دیالوگ برخورد خواهید کرد.
پروژهی MVC خودتان را اجرا و لینک و پورت مربوطه را کپی کنید ( http://localhost:5063 ).
در Authorized JavaScript Origins لینک را کپی نماید و در بخش Authorized redirect URls لینک را مجدد کپی نماید. با این تفاوت که بعد از پورت signin-google را هم قرار دهید. ( http://localhost:5063/signin-google )
حال بر روی دکمهی Create Client ID کلیک کنید.
پیکربندی فایل Startup.Auth :
فایل web.config را که در ریشهی پروژه قرار دارد باز کنید. در داخل تگ appSettings کد زیر را کپی کنید. توجه شود بجای دو مقدار value، مقداری را که گوگل برای شما ثبت کرده است، وارد کنید.
<appSettings> <!--Google--> <add key="GoogleClientId" value="555533955993-fgk9d4a9999ehvfpqrukjl7r0a4r5tus.apps.googleusercontent.com" /> <add key="GoogleClientSecretId" value="QGEF4zY4GEwQNXe8ETwnVHfz" /> </appSettings>
فایل Startup.Auth را باز کنید و دو پراپرتی و یک سازندهی بدون ورودی را تعریف نماید. توضیحات بیشتر به صورت کامنت در کد زیر قرار گرفته است.
//فضا نامهای استفاده شده در این کلاس using System; using System.Configuration; using Microsoft.AspNet.Identity; using Microsoft.AspNet.Identity.Owin; using Microsoft.Owin; using Microsoft.Owin.Security.Cookies; using Microsoft.Owin.Security.Google; using Owin; using Login.Models; //فضا نام جاری پروژه namespace Login { /// <summary> /// در ریشه سایت فایلی با نام استارت آپ که کلاسی هم نام این کلاس با یک تابع و یک ورودی از نوع اینترفیس تعریف شده است ///که این دو کلاس به صورت پارشال مهروموم شده اند /// </summary> public partial class Startup { /// <summary> /// این پراپرتی مقدار کلایت ای دی رو از وب دات کانفیگ در سازنده بدون ورودی در خودش ذخیره میکند /// </summary> public string GoogleClientId { get; set; } /// <summary> /// این پراپرتی مقدار کلایت سیکرت ای دی رو از وب دات کانفیگ در سازنده بدون ورودی در خودش ذخیره میکند /// </summary> public string GoogleClientSecretId { get; set; } /// <summary> /// سازنده بدون ورودی /// به ازای هر بار نمونه سازی از کلاس، سازندههای بدون ورودی کلاس هر بار اجرا خواهند شد، توجه شود که میتوان از /// سازندههای استاتیک هم استفاده کرد، این سازنده فقط یک بار، در صورتی که از کلاس نمونه سازی شود ایجاد میگردد /// </summary> public Startup() { //Get Client ID from Web.Config GoogleClientId = ConfigurationManager.AppSettings["GoogleClientId"]; //Get Client Secret ID from Web.Config GoogleClientSecretId = ConfigurationManager.AppSettings["GoogleClientSecretId"]; } ///// <summary> ///// سازنده استاتیک کلاس ///// </summary> //static Startup() //{ //در صورتی که از این سازنده استفاده شود میبایست پراپرتیهای تعریف شده در سطح کلاس به صورت استاتیک تعریف گردد تا //بتوان در این سازنده سطح دسترسی گرفت // GoogleClientId = ConfigurationManager.AppSettings["GoogleClientId"]; // GoogleClientSecretId = ConfigurationManager.AppSettings["GoogleClientSecretId"]; //} // For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864 public void ConfigureAuth(IAppBuilder app) { // Configure the db context, user manager and signin manager to use a single instance per request app.CreatePerOwinContext(ApplicationDbContext.Create); app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create); app.CreatePerOwinContext<ApplicationSignInManager>(ApplicationSignInManager.Create); // Enable the application to use a cookie to store information for the signed in user // and to use a cookie to temporarily store information about a user logging in with a third party login provider // Configure the sign in cookie app.UseCookieAuthentication(new CookieAuthenticationOptions { AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie, LoginPath = new PathString("/Account/Login"), Provider = new CookieAuthenticationProvider { // Enables the application to validate the security stamp when the user logs in. // This is a security feature which is used when you change a password or add an external login to your account. OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>( validateInterval: TimeSpan.FromMinutes(30), regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager)) } }); app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie); // Enables the application to temporarily store user information when they are verifying the second factor in the two-factor authentication process. app.UseTwoFactorSignInCookie(DefaultAuthenticationTypes.TwoFactorCookie, TimeSpan.FromMinutes(5)); // Enables the application to remember the second login verification factor such as phone or email. // Once you check this option, your second step of verification during the login process will be remembered on the device where you logged in from. // This is similar to the RememberMe option when you log in. app.UseTwoFactorRememberBrowserCookie(DefaultAuthenticationTypes.TwoFactorRememberBrowserCookie); //Initialize UseGoogleAuthentication app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() { ClientId = GoogleClientId, ClientSecret = GoogleClientSecretId }); } } }
حال پروژه را اجرا کرده و به صفحهی ورود کاربر رجوع نمائید. همانگونه که در تصوبر زیر مشاهده میکنید، دکمهای با مقدار نمایشی گوگل در سمت راست، در بخش Use another service to log in اضافه شده است که بعد از کلیک بر روی آن، به صفحهی هویت سنجی گوگل ریداریکت میشوید.
در اینجا از کاربر سوال پرسیده میشود که آیا به سایت پذیرنده اجازه داده شود که اطلاعات و ایمیل شما ارسال گردند که بعد از انتخاب دکمهی Accept، لاگین انجام گرفته و اطلاعات ارسال میگردد.
توجه: رمز عبور شما به هیچ عنوان برای سایت پذیرنده ارسال نمیگردد.
لاگین با موفقیت انجام شد.
در مطلب بعدی سایر سایتهای اجتماعی قرار خواهند گرفت.
- Day One Keynote (Slides)
- Day Two Keynote
- What's New for Microsoft Silverlight and Microsoft Windows Presentation
Foundation (WPF) Developers in Microsoft Visual Studio 2010 - Semantic HTML and Unobtrusive JavaScript
- Design Fundamentals for Developers
- Microsoft Silverlight and Windows Presentation Foundation (WPF): Sharing
Skills and Code - Going Inside Microsoft Silverlight: Exploring the Core CLR
- Delivering Media with Internet Information Services 7 (IIS) Media
Services and Microsoft Silverlight - Shio O Totte: Using What You Know
- Building Data-Driven Scalable AJAX Web Pages
- Microsoft ASP.NET: Taking AJAX to the Next Level
- A Shot of Windows Live Messenger and a Pint of Microsoft Silverlight
- Automated User Interface (UI) Testing with Microsoft Visual Studio
Team System 2010 - There's a Little Scripter in All of Us: Building a Web App for the
Masses - Microsoft ASP.NET 4.0 Data Access: Patterns for Success with Web Forms
- Cascading Stylesheets
- Creating a "Next Generation" E-Commerce Experience
- Cloud Computing: What's in It for Me?
- Developing for Experience with 3 Heads
- Developing and Deploying Applications on Internet Information Services
(IIS) - Hiking Mt. Avalon
- Advance Your Design with UX Design Patterns
- Love the New Windows Live Messenger Web Toolkit for Social Websites
- Ten Ways to Ensure RIA Failure
- Using Dynamic Languages to Develop Microsoft Silverlight Applications
- Miss March and Other Distractions
- Caching REST with Windows Communication Foundation
- Designing the Windows 7 Desktop Experience
- Microsoft Silverlight Media End-to-End
- Optimizing Performance for Microsoft Expression Encoder
- Scaling a Rich Client to Half a Billion Users
- User Experience Design for Non-Designers
- Build Applications on the Microsoft Platform Using Eclipse, Java,
Ruby and PHP! - Customized Live Search for Web and Client Applications
- Building Microsoft Silverlight Controls
- Working across the Client Continuum
- Building a Rich Social Network Application
- Adding Microsoft Silverlight to Your Company's Skill Set
- Principles of Microsoft Silverlight Animation
- Oomph: A Microformat Toolkit
- Introducing the Microsoft Virtual Earth Silverlight Map Control CTP
- Delivering Ads to a Silverlight Media Player Application
- High-Speed RIA Development with the Microsoft Silverlight Toolkit
- Deep Zoom++ : Build Dynamic Deep Zoom Applications with Open Source
- See through the Clouds: Introduction to the Azure Services Platform
- Modeling RESTful Data Services: Present and Future
- Escaping Flatland in Application Design: Rich User Experiences
- Building High Performance Web Applications and Sites
- Sketch Flow: From Concept to Production
- Design Prototyping: Bringing Wireframes to Life
- Overview of Windows Azure
- A Website Named Desire
- Protecting Online Identities
- Web Form Design
- Simplifying Distributed Access Control with Microsoft .NET Services
- Software Entrepreneurs: Go Big with BizSpark
- How I Learned to Stop Worrying and Love the Microsoft ADO.NET Entity
Framework - Copyright Laws for Web Designers and Developers
- Effective Infographics with Interactivity
- State of the Art in Web Site Design on Microsoft SharePoint
- The Way of the Whiteboard: Persuading with Pictures
- Interaction Techniques Using the Wii Remote (and Other HCI Projects)
- Touch and Gesture Computing, What You Haven't Heard
- Enhancing Large Windows Media Platforms with Microsoft Silverlight
- The Future of Microsoft Expression Blend
- Exposing Web Content to a Global Audience Using Machine Translation
- Building Microsoft Silverlight Applications with Eclipse
(Slides) - Going Inside Microsoft Silverlight: Exploring the Core CLR
(Slides) - Web Development Using Microsoft Visual Studio: Now and in the Future
(Slides) - Building Amazing Business Centric Applications with Microsoft Silverlight 3
- Creating Media Content for Microsoft Silverlight Using Microsoft Expression
Encoder (Slides) - Design Prototyping: Bringing Wireframes to Life (Slides)
- Measuring Social Media Marketing (Slides)
- Mesh-Enabled Web Applications (Slides)
- .NET RIA Services - Building Data-Driven Applications with Microsoft
Silverlight and Microsoft ASP.NET (Slides) - Making XML Really, Really Easy with Microsoft Visual Basic 9
(Slides) - Building Accessible RIAs in Microsoft Silverlight
(Slides) - Integrating Microsoft Expression Blend with Adobe Creative Suite
(Slides) - Principles of Microsoft Silverlight Animation (Slides)
- Windows Mobile 6.5 Overview (Slides)
- How'd they do it? Real App. Real Code. Two Weeks. Nothing but .NET
- Building Web Applications with Windows Azure (Slides)
- Live Framework and Mesh Services: Live Services for Developers
(Slides) - Software Entrepreneurs: Go Big with BizSpark (Slides)
- Microsoft ASP.NET 4.0 : What's Next? (Slides)
- Building Out of Browser Experiences with Microsoft Silverlight 3
- The Microsoft Web Sandbox: An Open Source Framework for Developing
Secure Standards-Based Web Applications (Slides) - Enhancing Large Windows Media Platforms with Microsoft Silverlight
(Slides) - Microsoft Silverlight Media End-to-End (Slides)
- Improving UX through Application Lifecycle Management
(Slides) - Go Beyond Best Practices: Evolving Next Practices to Prosper in the
21st Century (Slides) - Creating Interactivity with Microsoft Expression Blend
(Slides) - See through the Clouds: Introduction to the Azure Services Platform
(Slides) - Overview of Windows Azure (Slides)
- What's New in Microsoft Silverlight 3 (Slides)
- the New Windows Live Messenger Web Toolkit for Social Websites
- Extending Your Brand to the Desktop with Windows 7 (Slides)
- RESTful
Services for the Programmable Web with Windows Communication Foundation
(Slides) - Securing Web Applications (Slides)
- How Razorfish Lights Up Brand with Microsoft SharePoint (Slides)
- Copyright Laws for Web Designers and Developers
- Improving Mobile Experiences with the Microsoft Mobile Device Browser
File - A Shot of Windows Live Messenger and a Pint of Microsoft Silverlight
(Slides) - Microsoft Silverlight Is Ready for Business (Slides)
- Exposing Web Content to a Global Audience Using Machine Translation
(Slides) - Search Engine Optimization (SEO) for Web Developers
- Five Killer Scenarios for the Windows Live Messenger Web Toolkit
(Slides) - Lighting Up Web and Client Applications with Microsoft Live Services
(Slides) - Scaling a Rich Client to Half a Billion Users (Slides)
- Windows Internet Explorer 8 in the Real World: How Is Internet Explorer
8 Used (Slides) - When Errors Happen: Debugging Microsoft Silverlight
(Slides) - Introducing the Microsoft Web Platform (Slides)
- Protecting Against Internet Service Abuse (Slides)
- Connecting Applications across Networks with Microsoft .NET Services
(Slides) - Microsoft Xbox "Lips" and "Fable II": Multi Channel Experiences
(Slides) - Windows Azure Storage (Slides)
- Sketch Flow: From Concept to Production (Slides)
- Consuming Web Services in Microsoft Silverlight 3
- A Website Named Desire
- The Microsoft Web Platform: Starring Internet Information Services
(IIS) and Your Application (Slides) - Microsoft ASP.NET: Taking AJAX to the Next Level
(Slides) - Using Microsoft ASP.NET MVC to Easily Extend a Web Site into the Mobile
Space (Slides) - Using Total Experience Design to Transform the Digital Building
(Slides) - Wireframes That Work: Designing (Rich Internet) Applications
(Slides) - Interactive Prototyping with DHTML
- Working across the Client Continuum (Slides)
- ASP.NET MVC: America's Next Top Model View Controller Framework
(Slides) - Microsoft Expression Web: No Platform Left Behind
(Slides) - Choosing between ASP.NET Web Forms and MVC (Slides)
- Customized Live Search for Web and Client Applications
(Slides) - Creating a Great Experience on Digg with Windows Internet Explorer 8
- C# for Designers (Slides)
- A Lap around Microsoft .NET Services (Slides)
- Building Scalable and Available Web Applications with Microsoft Project
Code Name "Velocity" (Slides) - Building an Optimized, Graphics-Intensive Application for Microsoft Silverlight
(Slides) - What's New in Microsoft SQL Data Services (Slides)
- What's New in Windows Presentation Foundation (WPF) 4 (Slides)
- A Lap around Windows Internet Explorer 8 (Slides)
- The Future of Microsoft Expression Blend (Slides)
- Running PHP on Microsoft Servers and Services (Slides)
- Delivering Media with Internet Information Services 7 (IIS) Media
Services and Microsoft Silverlight (Slides) - Deep Dive into Microsoft Silverlight Graphics (Slides)
- Microsoft ASP.NET Model View Controller (MVC): Ninja on Fire Black
Belt Tips (Slides) - Developing
RESTful Services and Clients with "M" (Slides) - User Experience Design Patterns for Business Applications with Microsoft
Silverlight 3 (Slides) - Using the Windows Azure Tools for Microsoft Visual Studio to Build
Cloud Services (Slides) - Standards for Aggregating Activity Feeds and Social Aggregation Services
- Offline
Network Detection in Microsoft Silverlight 3 (Slides) - File|New Company: Creating NerdDinner.com with Microsoft ASP.NET
Model View Controller (MVC)
تهیه سرویس اطلاعات پویای برنامه
سرویس Web API ارائه شدهی توسط ASP.NET Core در این برنامه، لیست کاربران را به همراه یادداشتهای آنها به سمت کلاینت باز میگرداند و ساختار موجودیتهای آنها به صورت زیر است:
موجودیت کاربر که یک رابطهی one-to-many را با UserNotes دارد:
using System; using System.Collections.Generic; namespace MaterialAspNetCoreBackend.DomainClasses { public class User { public User() { UserNotes = new HashSet<UserNote>(); } public int Id { set; get; } public DateTimeOffset BirthDate { set; get; } public string Name { set; get; } public string Avatar { set; get; } public string Bio { set; get; } public ICollection<UserNote> UserNotes { set; get; } } }
using System; namespace MaterialAspNetCoreBackend.DomainClasses { public class UserNote { public int Id { set; get; } public DateTimeOffset Date { set; get; } public string Title { set; get; } public User User { set; get; } public int UserId { set; get; } } }
public interface IUsersService { Task<List<User>> GetAllUsersIncludeNotesAsync(); Task<User> GetUserIncludeNotesAsync(int id); }
namespace MaterialAspNetCoreBackend.WebApp.Controllers { [Route("api/[controller]")] public class UsersController : Controller { private readonly IUsersService _usersService; public UsersController(IUsersService usersService) { _usersService = usersService ?? throw new ArgumentNullException(nameof(usersService)); } [HttpGet] public async Task<IActionResult> Get() { return Ok(await _usersService.GetAllUsersIncludeNotesAsync()); } [HttpGet("{id:int}")] public async Task<IActionResult> Get(int id) { return Ok(await _usersService.GetUserIncludeNotesAsync(id)); } } }
در این حالت اگر برنامه را اجرا کنیم، در مسیر زیر
https://localhost:5001/api/users
و آدرس https://localhost:5001/api/users/1 صرفا مشخصات اولین کاربر را بازگشت میدهد.
تنظیم محل تولید خروجی Angular CLI
ساختار پوشه بندی پروژهی جاری به صورت زیر است:
همانطور که ملاحظه میکنید، کلاینت Angular در یک پوشهاست و برنامهی سمت سرور ASP.NET Core در پوشهای دیگر. برای اینکه خروجی نهایی Angular CLI را به پوشهی wwwroot پروژهی وب کپی کنیم، فایل angular.json کلاینت Angular را به صورت زیر ویرایش میکنیم:
"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "../MaterialAspNetCoreBackend/MaterialAspNetCoreBackend.WebApp/wwwroot",
ng build --no-delete-output-path --watch
dotnet watch run
بنابراین دو صفحهی کنسول مجزا را باز کنید. در اولی ng build (را با پارامترهای یاد شده در پوشهی MaterialAngularClient) و در دومی dotnet watch run را در پوشهی MaterialAspNetCoreBackend.WebApp اجرا نمائید.
هر دو دستور در حالت watch اجرا میشوند. مزیت مهم آن این است که اگر تغییر کوچکی را در هر کدام از پروژهها ایجاد کردید، صرفا همان قسمت کامپایل میشود و در نهایت سرعت کامپایل نهایی برنامه به شدت افزایش خواهد یافت.
تعریف معادلهای کلاسهای موجودیتهای سمت سرور، در برنامهی Angular
در ادامه پیش از تکمیل سرویس دریافت اطلاعات از سرور، نیاز است معادلهای کلاسهای موجودیتهای سمت سرور خود را به صورت اینترفیسهایی تایپاسکریپتی تعریف کنیم:
ng g i contact-manager/models/user ng g i contact-manager/models/user-note
محتویات فایل contact-manager\models\user-note.ts :
export interface UserNote { id: number; title: string; date: Date; userId: number; }
import { UserNote } from "./user-note"; export interface User { id: number; birthDate: Date; name: string; avatar: string; bio: string; userNotes: UserNote[]; }
ایجاد سرویس Angular دریافت اطلاعات از سرور
ساختار ابتدایی سرویس دریافت اطلاعات از سرور را توسط دستور زیر ایجاد میکنیم:
ng g s contact-manager/services/user --no-spec
import { Injectable } from "@angular/core"; @Injectable({ providedIn: "root" }) export class UserService { constructor() { } }
کدهای تکمیل شدهی UserService را در ذیل مشاهده میکنید:
import { HttpClient, HttpErrorResponse } from "@angular/common/http"; import { Injectable } from "@angular/core"; import { Observable, throwError } from "rxjs"; import { catchError, map } from "rxjs/operators"; import { User } from "../models/user"; @Injectable({ providedIn: "root" }) export class UserService { constructor(private http: HttpClient) { } getAllUsersIncludeNotes(): Observable<User[]> { return this.http .get<User[]>("/api/users").pipe( map(response => response || []), catchError((error: HttpErrorResponse) => throwError(error)) ); } getUserIncludeNotes(id: number): Observable<User> { return this.http .get<User>(`/api/users/${id}`).pipe( map(response => response || {} as User), catchError((error: HttpErrorResponse) => throwError(error)) ); } }
- متد getAllUsersIncludeNotes، لیست تمام کاربران را به همراه یادداشتهای آنها از سرور واکشی میکند.
- متد getUserIncludeNotes صرفا اطلاعات یک کاربر را به همراه یادداشتهای او از سرور دریافت میکند.
بارگذاری و معرفی فایل svg نمایش avatars کاربران به Angular Material
بستهی Angular Material و کامپوننت mat-icon آن به همراه یک MatIconRegistry نیز هست که قصد داریم از آن برای نمایش avatars کاربران استفاده کنیم.
در قسمت اول، نحوهی «افزودن آیکنهای متریال به برنامه» را بررسی کردیم که در آنجا آیکنهای مرتبط، از فایلهای قلم، دریافت و نمایش داده میشوند. این کامپوننت، علاوه بر قلم آیکنها، از فایلهای svg حاوی آیکنها نیز پشتیبانی میکند که یک نمونه از این فایلها در مسیر wwwroot\assets\avatars.svg فایل پیوستی انتهای مطلب کپی شدهاست (چون برنامهی وب ASP.NET Core، هاست برنامه است، این فایل را در آنجا کپی کردیم).
ساختار این فایل svg نیز به صورت زیر است:
<?xml version="1.0" encoding="utf-8"?> <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <svg viewBox="0 0 128 128" height="100%" width="100%" pointer-events="none" display="block" id="user1" >
ابتدا به فایل contact-manager-app.component.ts مراجعه و سپس این کامپوننت آغازین ماژول مدیریت تماسها را با صورت زیر تکمیل میکنیم:
import { Component } from "@angular/core"; import { MatIconRegistry } from "@angular/material"; import { DomSanitizer } from "@angular/platform-browser"; @Component() export class ContactManagerAppComponent { constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { iconRegistry.addSvgIconSet(sanitizer.bypassSecurityTrustResourceUrl("assets/avatars.svg")); } }
در اینجا در صورتیکه فایل svg شما دارای یک تک آیکن است، روش ثبت آن به صورت زیر است:
iconRegistry.addSvgIcon( "unicorn", this.domSanitizer.bypassSecurityTrustResourceUrl("assets/unicorn_icon.svg") );
<mat-icon svgIcon="unicorn"></mat-icon>
یک نکته: پوشهی node_modules\material-design-icons به همراه تعداد قابل ملاحظهای فایل svg نیز هست.
نمایش لیست کاربران در sidenav
در ادامه به فایل sidenav\sidenav.component.ts مراجعه کرده و سرویس فوق را به آن جهت دریافت لیست کاربران، تزریق میکنیم:
import { User } from "../../models/user"; import { UserService } from "../../services/user.service"; @Component() export class SidenavComponent implements OnInit { users: User[] = []; constructor(private userService: UserService) { } ngOnInit() { this.userService.getAllUsersIncludeNotes() .subscribe(data => this.users = data); } }
اکنون میخواهیم از این اطلاعات جهت نمایش پویای آنها در sidenav استفاده کنیم. در قسمت قبل، جای آنها را در منوی سمت چپ صفحه به صورت زیر با اطلاعات ایستا مشخص کردیم:
<mat-list> <mat-list-item>Item 1</mat-list-item> <mat-list-item>Item 2</mat-list-item> <mat-list-item>Item 3</mat-list-item> </mat-list>
<mat-nav-list> <mat-list-item *ngFor="let user of users"> <a matLine href="#"> <mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{ user.name }} </a> </mat-list-item> </mat-nav-list>
که در اینجا علاوه بر لیست کاربران که از سرویس Users دریافت شده، آیکن avatar آنها که از فایل assets/avatars.svg بارگذاری شده نیز قابل مشاهده است.
اتصال کاربران به صفحهی نمایش جزئیات آنها
در mat-nav-list فوق، فعلا هر کاربر به آدرس # لینک شدهاست. در ادامه میخواهیم با کمک سیستم مسیریابی، با کلیک بر روی نام هر کاربر، در سمت راست صفحه جزئیات او نیز نمایش داده شود:
<mat-nav-list> <mat-list-item *ngFor="let user of users"> <a matLine [routerLink]="['/contactmanager', user.id]"> <mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{ user.name }} </a> </mat-list-item> </mat-nav-list>
const routes: Routes = [ { path: "", component: ContactManagerAppComponent, children: [ { path: ":id", component: MainContentComponent }, { path: "", component: MainContentComponent } ] }, { path: "**", redirectTo: "" } ];
این مشکل دو علت دارد:
الف) چون ContactManagerModule را به صورت lazy load تعریف کردهایم، دیگر نباید در لیست imports فایل AppModule ظاهر شود. بنابراین فایل app.module.ts را گشوده و سپس تعریف ContactManagerModule را هم از قسمت imports بالای صفحه و هم از قسمت imports ماژول حذف کنید؛ چون نیازی به آن نیست.
ب) برای مدیریت خواندن id کاربر، فایل main-content\main-content.component.ts را گشوده و به صورت زیر تکمیل میکنیم:
import { Component, OnInit } from "@angular/core"; import { ActivatedRoute } from "@angular/router"; import { User } from "../../models/user"; import { UserService } from "../../services/user.service"; @Component({ selector: "app-main-content", templateUrl: "./main-content.component.html", styleUrls: ["./main-content.component.css"] }) export class MainContentComponent implements OnInit { user: User; constructor(private route: ActivatedRoute, private userService: UserService) { } ngOnInit() { this.route.params.subscribe(params => { this.user = null; const id = params["id"]; if (!id) { return; } this.userService.getUserIncludeNotes(id) .subscribe(data => this.user = data); }); } }
اکنون میتوان از اطلاعات این user دریافتی، در قالب این کامپوننت و یا همان فایل main-content.component.html استفاده کرد:
<div *ngIf="!user"> <mat-spinner></mat-spinner> </div> <div *ngIf="user"> <mat-card> <mat-card-header> <mat-icon mat-card-avatar svgIcon="{{user.avatar}}"></mat-icon> <mat-card-title> <h2>{{ user.name }}</h2> </mat-card-title> <mat-card-subtitle> Birthday {{ user.birthDate | date:'d LLLL' }} </mat-card-subtitle> </mat-card-header> <mat-card-content> <mat-tab-group> <mat-tab label="Bio"> <p> {{user.bio}} </p> </mat-tab> <!-- <mat-tab label="Notes"></mat-tab> --> </mat-tab-group> </mat-card-content> </mat-card> </div>
همچنین mat-card را هم بر اساس مثال مستندات آن، ابتدا کپی و سپس سفارشی سازی کردهایم (اگر دقت کنید، هر کامپوننت آن سه برگهی overview، سپس API و در آخر Example را به همراه دارد). این روشی است که همواره میتوان با کامپوننتهای این مجموعه انجام داد. ابتدا مثالی را در مستندات آن پیدا میکنیم که مناسب کار ما باشد. سپس سورس آنرا از همانجا کپی و در برنامه قرار میدهیم و در آخر آنرا بر اساس اطلاعات خود سفارشی سازی میکنیم.
نمایش جزئیات اولین کاربر در حین بارگذاری اولیهی برنامه
تا اینجای کار اگر برنامه را از ابتدا بارگذاری کنیم، mat-spinner قسمت نمایش جزئیات تماسها ظاهر میشود و همانطور باقی میماند، با اینکه هنوز موردی انتخاب نشدهاست. برای رفع آن به کامپوننت sidnav مراجعه کرده و در لحظهی بارگذاری اطلاعات، اولین مورد را به صورت دستی نمایش میدهیم:
import { Router } from "@angular/router"; @Component() export class SidenavComponent implements OnInit, OnDestroy { users: User[] = []; constructor(private userService: UserService, private router: Router) { } ngOnInit() { this.userService.getAllUsersIncludeNotes() .subscribe(data => { this.users = data; if (data && data.length > 0 && !this.router.navigated) { this.router.navigate(["/contactmanager", data[0].id]); } }); } }
البته روش دیگر مدیریت این حالت، حذف کدهای فوق و تبدیل کدهای کامپوننت main-content به صورت زیر است:
let id = params['id']; if (!id) id = 1;
بستن خودکار sidenav در حالت نمایش موبایل
اگر اندازهی صفحهی نمایشی را کوچکتر کنیم، قسمت sidenav در حالت over نمایان خواهد شد. در این حالت اگر آیتمهای آنرا انتخاب کنیم، هرچند آنها نمایش داده میشوند، اما زیر این sidenav مخفی باقی خواهند ماند:
بنابراین در جهت بهبود کاربری این قسمت بهتر است با کلیک کاربر بر روی sidenav و گزینههای آن، این قسمت بسته شده و ناحیهی زیر آن نمایش داده شود.
در کدهای قالب sidenav، یک template reference variable برای آن به نام sidenav درنظر گرفته شدهاست:
<mat-sidenav #sidenav
import { MatSidenav } from "@angular/material"; @Component() export class SidenavComponent implements OnInit, OnDestroy { @ViewChild(MatSidenav) sidenav: MatSidenav;
ngOnInit() { this.router.events.subscribe(() => { if (this.isScreenSmall) { this.sidenav.close(); } }); }
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: MaterialAngularClient-03.zip
برای اجرای آن:
الف) ابتدا به پوشهی src\MaterialAngularClient وارد شده و فایلهای restore.bat و ng-build-dev.bat را اجرا کنید.
ب) سپس به پوشهی src\MaterialAspNetCoreBackend\MaterialAspNetCoreBackend.WebApp وارد شده و فایلهای restore.bat و dotnet_run.bat را اجرا کنید.
اکنون برنامه در آدرس https://localhost:5001 قابل دسترسی است.