اشتراکها
در قسمت قبل، ساختار فرم ثبت اطلاعات کارمندان را تکمیل کردیم. در این قسمت قصد داریم این اطلاعات را در کامپوننت آن توسط data binding دریافت کنیم.
نقش ngModel در data binding
ngModel دایرکتیوی است که وجود آن سبب میشود تا Angular آن المان ورودی خاص را تحت نظر قرار دهد:
در حالت تعریفی فوق، هیچگونه عملیات data binding ایی صورت نمیگیرد؛ اما Angular به علت وجود ngModel، از وجود این فیلد مطلع شدهاست. اما کامپوننت برنامه اطلاعات خاصی را دریافت نخواهد کرد.
برای رفع این مشکل میتوان با data binding یک طرفه شروع کرد:
در اینجا از syntax ویژهی property binding استفاده شده و ngModel داخل [] قرار گرفتهاست و به firstName تنظیم شدهاست. در این حالت Angular در کامپوننت متناظر با این قالب HTML ایی، به دنبال یک خاصیت عمومی به نام firstName میگردد و مقدار اولیهی این فیلد را از آن دریافت میکند.
در حالت data binding یک طرفه، اگر کاربر اطلاعات فیلد firstname را در فرم برنامه تغییر دهد، این اطلاعات به خاصیت عمومی firstName منعکس نخواهد شد.
برای رفع این مشکل (در صورت نیاز)، میتوان از data binding دو طرفه استفاده کرد:
این حالت شبیه به حالت data binding یک طرفه است؛ با این تفاوت که رویدادگردانی ngModelChange نیز به آن اضافه شدهاست. در اینجا event$ به مقدار فیلد تغییر یافته اشاره میکند و آنرا به firstName انتساب میدهد.
البته این حالت دو طرفه، syntax ساده شدهی زیر را که به banana in the box نیز معروف شدهاست (موز همان () است و جعبه به [] اشاره میکند)، نیز میتواند داشته باشد که بیشتر مورد استفاده قرار میگیرد:
تعریف مدل فرم ثبت اطلاعات کارمندان
برای نگهداری اطلاعات فرم کارمندان، کلاس Employee را به ماژول Employee اضافه میکنیم:
با این خروجی:
سپس ساختار این کلاس را به نحو ذیل تکمیل خواهیم کرد که هر کدام از خواص آن، معادل یکی از المانهای فرم است:
TypeScript این امکان را میدهد تا بتوان خواص عمومی را مستقیما در سازندهی کلاس تعریف کرد. بنابراین در اینجا برای نمونه firstName هم یکی از آرگومانهای سازندهی کلاس کارمند است و هم یک خاصیت عمومی تعریف شدهی در آن. به علاوه در اینجا میتوان به این خواص، مقادیر پیش فرضی را نیز انتساب داد تا در حین وهله سازی آن بتوان از تعریف اجباری یک سری از پارامترها صرفنظر کرد.
پس از آن، به فایل employee-register.component.ts مراجعه کرده و وهلهای از کلاس را به صورت یک خاصیت عمومی در اختیار قالب HTML ایی آن که فرم جاری را تشکیل میدهد، قرار میدهیم:
ابتدا کلاس کارمند import شده و سپس وهلهای از آن به نام model، به صورت یک خاصیت عمومی در اختیار قالب آن قرار گرفتهاست.
تغییر قالب فرم ثبت اطلاعات کارمندان برای اتصال به model
در ادامه، مرحله به مرحله قالب فرم جاری را جهت اتصال به شیء model فوق تغییر خواهیم داد:
اتصال به Text boxes
همانطور که مشاهده میکنید، اینبار ngModel خالی قسمت قبل را توسط syntax تکمیلی banana in the box به data binding دو طرفه تغییر دادهایم. به این ترتیب در ابتدای نمایش فرم، این دو فیلد، مقادیر اولیه نام و نام خانوادگی را از شیء model دریافت کرده و نمایش میدهند. به علاوه اگر فرم نیز تغییر کند، این اطلاعات به شیء model و خواص آن نیز منعکس میشوند.
برای بررسی این مورد، در پایان فرم جهت دیباگ data binding، اطلاعاتی را که در مدل داریم و همچنین اطلاعاتی را که Angular در حال نظارت بر آنها است، به صورت json در صفحه درج میکنیم:
برای مثال یکبار [()] را به [] تبدیل کنید و سپس سعی در تغییر مقادیر فرم نمائید. مشاهده میکنید هرچند این اطلاعات تحت نظارت Angular هستند، اما چون data binding به حالت یک طرفه تغییر کردهاست، دیگر انعکاس آنها، در Model مشاهده نمیشوند.
اتصال به Check boxes
روش کار در اینجا نیز همانند قبل است. با استفاده از data binding دو طرفه، مقدار checkbox را به یک خاصیت عمومی boolean انتساب دادهایم و برعکس (زمانیکه فرم برای بار اول نمایش داده میشود، مقدار اولیهی خود را از شیء model دریافت میکند).
اتصال به Radio buttons
روش اتصال به radio buttons نیز بر اساس data binding دو طرفهاست. فقط در اینجا دقیقا یک خاصیت مشخص، به چندین radio button متصل شدهاست و در نهایت در این گروه که بر اساس name هایی یکسان تشکیل شدهاست، یک مقدار انتخاب میشود و مقدار آن از ویژگی value المان متناظر دریافت میگردد.
اتصال به Drop downs
در اینجا نیز ابتدا نامی به این المان انتساب داده شدهاست و سپس توسط data binding دو طرفه، خاصیت متناظری از مدل را به این المان متصل کردهایم یا برعکس؛ زمانیکه این فرم برای اولین بار نمایش داده میشود، مقدار اولیهی این فیلد بر اساس مقدار آن در شیء model تعیین میشود:
نحوهی فراخوانی یک متد در حین data binding دو طرفه
همانطور که در ابتدای بحث نیز عنوان شد، data binding دو طرفه را به نحو دیگری نیز میتوان تعریف کرد:
در اینجا بجای استفادهی از syntax معروف banana in the box، از روش اتصال یک طرفه و سپس دریافت تغییرات از طریق یک رخدادگردان استفاده شدهاست. مزیت این روش امکان دسترسی همزمان به مقدار وارد شدهی توسط کاربر، در کامپوننت متناظر میباشد:
برای مثال در اینجا اگر کاربر حرف اول یک نام را با حروف کوچک وارد کند، توسط این متد به حرف بزرگ تبدیل شده و جایگزین میشود. این جایگزینی نیز بلافاصله در فرم منعکس خواهد شد.
در قسمت بعد مباحث اعتبارسنجی فرمهای مبتنی بر قالبها را بررسی میکنیم.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: angular-template-driven-forms-lab-03.zip
برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کردهاید. سپس از طریق خط فرمان به ریشهی پروژه وارد شده و دستور npm install را صادر کنید تا وابستگیهای آن دریافت و نصب شوند. در آخر با اجرای دستور ng serve -o برنامه ساخته شده و در مرورگر پیش فرض سیستم نمایش داده خواهد شد.
نقش ngModel در data binding
ngModel دایرکتیوی است که وجود آن سبب میشود تا Angular آن المان ورودی خاص را تحت نظر قرار دهد:
<!--no binding --> <input name="firstname" ngModel>
برای رفع این مشکل میتوان با data binding یک طرفه شروع کرد:
<!--one way binding --> <input name="firstname" [ngModel]="firstName">
در حالت data binding یک طرفه، اگر کاربر اطلاعات فیلد firstname را در فرم برنامه تغییر دهد، این اطلاعات به خاصیت عمومی firstName منعکس نخواهد شد.
برای رفع این مشکل (در صورت نیاز)، میتوان از data binding دو طرفه استفاده کرد:
<!--two way binding --> <input name="firstname" [ngModel]="firstName" (ngModelChange)="firstName=$event">
البته این حالت دو طرفه، syntax ساده شدهی زیر را که به banana in the box نیز معروف شدهاست (موز همان () است و جعبه به [] اشاره میکند)، نیز میتواند داشته باشد که بیشتر مورد استفاده قرار میگیرد:
<!--two way binding --> <input name="firstname" [(ngModel)]="firstName">
تعریف مدل فرم ثبت اطلاعات کارمندان
برای نگهداری اطلاعات فرم کارمندان، کلاس Employee را به ماژول Employee اضافه میکنیم:
> ng g cl Employee/Employee
installing class create src\app\Employee\employee.ts
export class Employee { constructor( public firstName: string, public lastName: string, public isFullTime: boolean, public paymentType: string, public primaryLanguage: string ) {} }
پس از آن، به فایل employee-register.component.ts مراجعه کرده و وهلهای از کلاس را به صورت یک خاصیت عمومی در اختیار قالب HTML ایی آن که فرم جاری را تشکیل میدهد، قرار میدهیم:
import { Employee } from "app/employee/employee"; export class EmployeeRegisterComponent implements OnInit { languages = ["Persian", "English", "Spanish", "Other"]; model = new Employee("Vahid", "N", true, "FullTime", "Persian");
تغییر قالب فرم ثبت اطلاعات کارمندان برای اتصال به model
در ادامه، مرحله به مرحله قالب فرم جاری را جهت اتصال به شیء model فوق تغییر خواهیم داد:
اتصال به Text boxes
<form #form="ngForm" novalidate> <div class="form-group"> <label>First Name</label> <input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName"> </div> <div class="form-group"> <label>Last Name</label> <input type="text" class="form-control" name="lastName" [(ngModel)]="model.lastName"> </div>
برای بررسی این مورد، در پایان فرم جهت دیباگ data binding، اطلاعاتی را که در مدل داریم و همچنین اطلاعاتی را که Angular در حال نظارت بر آنها است، به صورت json در صفحه درج میکنیم:
<button class="btn btn-primary" type="submit">Ok</button> </form> Model: {{ model | json }} <br> Angular: {{ form.value | json }} <br> form.pristine: {{ form.pristine }}
اتصال به Check boxes
<div class="checkbox"> <label> <input type="checkbox" name="is-full-time" [(ngModel)]="model.isFullTime"> Full Time Employee </label> </div>
اتصال به Radio buttons
<label>Payment Type</label> <div class="radio"> <label> <input type="radio" name="paymentType" value="FullTime" checked [(ngModel)]="model.paymentType"> Full Time </label> </div> <div class="radio"> <label> <input type="radio" name="paymentType" value="PartTime" [(ngModel)]="model.paymentType"> Part Time </label> </div>
اتصال به Drop downs
<div class="form-group"> <label>Primary Language</label> <select class="form-control" name="primaryLanguage" [(ngModel)]="model.primaryLanguage"> <option *ngFor="let lang of languages"> {{ lang }} </option> </select> </div>
نحوهی فراخوانی یک متد در حین data binding دو طرفه
همانطور که در ابتدای بحث نیز عنوان شد، data binding دو طرفه را به نحو دیگری نیز میتوان تعریف کرد:
<div class="form-group"> <label>First Name</label> <input type="text" class="form-control" name="firstName" [ngModel]="model.firstName" (ngModelChange)="firstNameToUpperCase($event)"> </div>
firstNameToUpperCase(value: string) { if (value.length > 0) this.model.firstName = value.charAt(0).toUpperCase() + value.slice(1); else this.model.firstName = value; }
در قسمت بعد مباحث اعتبارسنجی فرمهای مبتنی بر قالبها را بررسی میکنیم.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: angular-template-driven-forms-lab-03.zip
برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کردهاید. سپس از طریق خط فرمان به ریشهی پروژه وارد شده و دستور npm install را صادر کنید تا وابستگیهای آن دریافت و نصب شوند. در آخر با اجرای دستور ng serve -o برنامه ساخته شده و در مرورگر پیش فرض سیستم نمایش داده خواهد شد.
بله، تفاوت هست. راه به شما نشان داده شد؛ نه راه حل کامل. اگر دقت کنید، این Analyzer، غیرحساس به «ی» و «ک» فارسی و عربی است. همچنین اعراب حروف را هم حذف کردهاست. یعنی اگر از این PersianAnalyzer استفاده کنید، هم ایندکس کردن (محتوای متون) و هم جستجوهای شما (ورودیهای کاربر) حساس به نوع ی و ک و همچنین اعراب حروف نخواهند بود. مابقی را هم خودتان به کلاس PersianNormalizer آن اضافه کنید؛ یک Analyzer غیرحساس به انواع و اقسام «الف» فارسی را برای اولین بار با اضافه کردن چند سطر به همین فایل، ابداع کنید.
نظرات مطالب
روش یکی کردن پروژههای React و ASP.NET Core
رابط کاربری مطلب «اعتبارسنجی مبتنی بر کوکیها در ASP.NET Core 2.0 بدون استفاده از سیستم Identity» یک صفحهی HTML خالص است که نکات آن برای برنامههای تک صفحهای وب هم صادق است.
به صورت خلاصه اگر نیاز به جستجوی سریع و پیشرفتهای بر روی حجم عظیمی از اطلاعات دارید، روش متداول select * from table where field like something توصیه نمیشود. بسیار کند است؛ مصرف CPU بالایی دارد. از ایندکس استفاده نمیکند.
راه حل توصیه شده جهت برخورد با این نوع مسایل استفاده از full text search است. نگارش کامل SQL Server حاوی یک موتور FTS توکار هست . اگر از بانک اطلاعاتی خاصی استفاده میکنید که دارای موتور FTS نیست یا ... FTS مخصوص SQL Server به درد کار شما نمیخورد یا نیاز به سفارشی سازی دارد (مثلا امکان تعریف stop words فارسی (کلماتی مانند به، از، تا و امثال آن))، از موتور FTS جانبی دیگری به نام لوسین نیز میتوان استفاده کرد.
در کنار اینها ابزاری برای آنالیز و کوئری گرفتن از فایلهای ایندکس تهیه شده توسط لوسین نیز وجود دارد به نام Luke. برای نمونه اگر بانک اطلاعاتی سایت جاری را با لوسین به نحو متداولی ایندکس کنیم، در صفحه اول این برنامه، top ranking terms آن به شکل زیر ظاهر میشود:
در اینجا چون متون تهیه شده از نوع HTML هستند، تگ br در آنها زیاد است و یا یک سری حروف و کلمات فارسی هم در صدر قرار دارند که بهتر است از لیست ایندکس حذف شوند. برای اینکار تنها کافی است یک hash table را به نحو زیر تعریف و به StandardAnalyzer لوسین ارسال کنیم:
یا آقای عرب عامری برای حروف و کلمات فارسی که نباید ایندکس شوند، یک لیست نسبتا جامع را در اینجا تهیه کردهاند.
اینبار اگر stop words یاد شده را اعمال و مجددا ایندکسها را تهیه کنیم به خروجی بهتری خواهیم رسید.
در کل حداقل از این لحاظ، لوسین نسبت به FTS توکار SQL Server مناسبتر به نظر میرسد.
راه حل توصیه شده جهت برخورد با این نوع مسایل استفاده از full text search است. نگارش کامل SQL Server حاوی یک موتور FTS توکار هست . اگر از بانک اطلاعاتی خاصی استفاده میکنید که دارای موتور FTS نیست یا ... FTS مخصوص SQL Server به درد کار شما نمیخورد یا نیاز به سفارشی سازی دارد (مثلا امکان تعریف stop words فارسی (کلماتی مانند به، از، تا و امثال آن))، از موتور FTS جانبی دیگری به نام لوسین نیز میتوان استفاده کرد.
در کنار اینها ابزاری برای آنالیز و کوئری گرفتن از فایلهای ایندکس تهیه شده توسط لوسین نیز وجود دارد به نام Luke. برای نمونه اگر بانک اطلاعاتی سایت جاری را با لوسین به نحو متداولی ایندکس کنیم، در صفحه اول این برنامه، top ranking terms آن به شکل زیر ظاهر میشود:
در اینجا چون متون تهیه شده از نوع HTML هستند، تگ br در آنها زیاد است و یا یک سری حروف و کلمات فارسی هم در صدر قرار دارند که بهتر است از لیست ایندکس حذف شوند. برای اینکار تنها کافی است یک hash table را به نحو زیر تعریف و به StandardAnalyzer لوسین ارسال کنیم:
var stopWords = new Hashtable(); stopWords.Add("br","br"); // ... var analyzer = new StandardAnalyzer(Version.LUCENE_29, stopWords);
یا آقای عرب عامری برای حروف و کلمات فارسی که نباید ایندکس شوند، یک لیست نسبتا جامع را در اینجا تهیه کردهاند.
اینبار اگر stop words یاد شده را اعمال و مجددا ایندکسها را تهیه کنیم به خروجی بهتری خواهیم رسید.
در کل حداقل از این لحاظ، لوسین نسبت به FTS توکار SQL Server مناسبتر به نظر میرسد.
مطالب
تگ گذاری در کامنتها
در محیطهای برنامه نویسی مدرن و امروزی، استفاده از تگها در کامنتها (CommentTag) رواج
بسیاری دارد که یکی از معروفترین این تگها، تگ TODO است. این نوع تگها که عموما به همراه یک توضیح کوتاه یا عنوان به کار میروند، برای این است که
بتوانیم از طریق ابزارهایی که ادیتورها در اختیارمان قرار میدهند، آنها را پیدا کنیم. حتی
در سیستمهای لینوکسی میتوان با دستور Grep به جست و جوی آنها پرداخت. عموما تگها با حروف بزرگ نوشته میشوند؛ ولی اجباری در آن نیست ولی رعایت آن بهتر است. نامهای دیگری که برای این تگها به کار میرود Token و Codetag میباشد. از
معروفترین تگ ها، میتوان به تگهای زیر اشاره کرد:
TODO : معروفترین تگ شناخته شدهاست و میتوان گفت در اکثر اوقات به جای بقیه هم استفاده میشود. چون معنای دیگر کامنتها را نیز در بر میگیرد. این نوع کامنت به شما میگویند که این کد نیاز دارد در یک زمان معین و سر فرصت به آن رسیدگی شود. به عنوان مثال بهتر است ویژگی خاصی را به کدی اضافه کرد، یا مورد خاصی بهتر است در آن پیاده سازی شود و یا نیاز به ویرایش خاصی دارد که پیاده سازی آن منفعتی دارد و این کامنت برای این است که به برنامه نویس یادآوری کند تا در دفعات آتی به این کد رسیدگی کند. سپس در دفعات آتی برنامه نویس میتواند با استفاده از ابزاری که ادیتور در اختیار وی قرار میدهد، این نوع کامنتها را پیدا کند.
FIXME : این نوع تگ همانند بالاست، ولی اجبار بیشتری در اصلاح از خود نشان میدهد و ترتیب و اهمیت بالاتری دارد. عموما کدهایی که با این نوع کامنتها مزین میشوند، دارای طراحی بد یا موقتی هستند که باید در آینده آنها را اصلاح کرد.
UNDONE : این تگ برای اصلاح یا تغییر نیست. ولی به شما میگوید که قبلا این کد چگونه بوده است و چه تغییراتی کرده است. قبلا چه چیزهایی در کد پیاده سازی شده بوده است که الان در کد وجود ندارد و چرا حذف شده است.
HACK : گاهی اوقات در کدها، باگ هایی رخ میدهند که مجبور به استفاده از راههای غیرعادی برای رفع آن میشوید. این نوع روشهای رفع مشکل، روشها و راه حلهای مناسبی نیستند؛ ولی میتوانند به طور موقت و در زمان سریعتری پاسخگوی ما باشند. برنامه نویس بعد از رفع مشکل، با درج این نوع کامنت، در آینده به خود یادآوری میکند که این کد نیاز به راه حل مناسبتری دارد.
BUGBUG : این کامنت توسط برنامه نویس کد مربوطه درج میشود و مربوط به زمانی است که برنامه نویس کد را نوشته است، ولی اطمینانی از صحت آن ندارد. پس برنامه نویس نیاز دارد اطلاعات بیشتری را در مورد این مسئله بیابد.
XXX : به برنامه نویس هشدار میدهد که این کد راه حلهای نادرستی دارد و احتمالا بر اساس اطلاعات نادرستی این کد شکل گرفته است، ولی در حال حاضر کار میکند.
در ویژوال استادیو، پنل taskList برای نمایش این تگها به کار میرود و از تگهای HACK,UNDONE و TODO به طور پیش فرض پشتیبانی میکند. در صورتی که تمایل دارید تگهای اضافهتری داشته باشید یا ترتیب اولویت نمایش تگها در پنل taskList را تغییر دهید، مسیر زیر را طی کنید:
در اندروید استادیو هم دو تگ اول لیست پشتیبانی میشوند. در اندروید استادیو شما میتوانید برای todo هایتان الگو و فیلتر تعریف کنید. برای اینکار ابتدای ادیتور را باز کرده و در بخش Editor گزینه Todo را انتخاب کنید. در لیست بالا میتوانید یک نمونه الگو برای todo خاص خود اضافه کنید. به عنوان مثال تگهای نامبرده در بالا را اضافه کنید و برای آن آیکن و نحوه رنگبندی و قلم و ... را برای نمایش آن انتخاب کنید.
بعد از ذکر نام تگ، تاریخ را بر اساس سال، ماه و روز وارد کرده و سپس نام شخصی که این کامنت را قرار داده است و در ادامه عنوان مناسبی را که گویای مطلب باشد، انتخاب کنید. در خطهای بعدی هم توضیح کوتاهی که مدنظر شماست. در این حالت با استفاده از ابزار unix grep میتوانید گزارش گیری مناسبی هم داشته باشید.
TODO : معروفترین تگ شناخته شدهاست و میتوان گفت در اکثر اوقات به جای بقیه هم استفاده میشود. چون معنای دیگر کامنتها را نیز در بر میگیرد. این نوع کامنت به شما میگویند که این کد نیاز دارد در یک زمان معین و سر فرصت به آن رسیدگی شود. به عنوان مثال بهتر است ویژگی خاصی را به کدی اضافه کرد، یا مورد خاصی بهتر است در آن پیاده سازی شود و یا نیاز به ویرایش خاصی دارد که پیاده سازی آن منفعتی دارد و این کامنت برای این است که به برنامه نویس یادآوری کند تا در دفعات آتی به این کد رسیدگی کند. سپس در دفعات آتی برنامه نویس میتواند با استفاده از ابزاری که ادیتور در اختیار وی قرار میدهد، این نوع کامنتها را پیدا کند.
FIXME : این نوع تگ همانند بالاست، ولی اجبار بیشتری در اصلاح از خود نشان میدهد و ترتیب و اهمیت بالاتری دارد. عموما کدهایی که با این نوع کامنتها مزین میشوند، دارای طراحی بد یا موقتی هستند که باید در آینده آنها را اصلاح کرد.
UNDONE : این تگ برای اصلاح یا تغییر نیست. ولی به شما میگوید که قبلا این کد چگونه بوده است و چه تغییراتی کرده است. قبلا چه چیزهایی در کد پیاده سازی شده بوده است که الان در کد وجود ندارد و چرا حذف شده است.
HACK : گاهی اوقات در کدها، باگ هایی رخ میدهند که مجبور به استفاده از راههای غیرعادی برای رفع آن میشوید. این نوع روشهای رفع مشکل، روشها و راه حلهای مناسبی نیستند؛ ولی میتوانند به طور موقت و در زمان سریعتری پاسخگوی ما باشند. برنامه نویس بعد از رفع مشکل، با درج این نوع کامنت، در آینده به خود یادآوری میکند که این کد نیاز به راه حل مناسبتری دارد.
BUGBUG : این کامنت توسط برنامه نویس کد مربوطه درج میشود و مربوط به زمانی است که برنامه نویس کد را نوشته است، ولی اطمینانی از صحت آن ندارد. پس برنامه نویس نیاز دارد اطلاعات بیشتری را در مورد این مسئله بیابد.
// BUGBUG: I'm sure these GUIDs are defined somewhere but I'm not sure which library contains them, so defining them here. DEFINE_GUID(IID_IFoo, 0x12345678,0x1234,0x1234,0x12,0x12,0x12,0x12,0x12,0x12,0x12,0x12);
XXX : به برنامه نویس هشدار میدهد که این کد راه حلهای نادرستی دارد و احتمالا بر اساس اطلاعات نادرستی این کد شکل گرفته است، ولی در حال حاضر کار میکند.
در ویژوال استادیو، پنل taskList برای نمایش این تگها به کار میرود و از تگهای HACK,UNDONE و TODO به طور پیش فرض پشتیبانی میکند. در صورتی که تمایل دارید تگهای اضافهتری داشته باشید یا ترتیب اولویت نمایش تگها در پنل taskList را تغییر دهید، مسیر زیر را طی کنید:
Tools>Options>Environment>Task List
در اندروید استادیو هم دو تگ اول لیست پشتیبانی میشوند. در اندروید استادیو شما میتوانید برای todo هایتان الگو و فیلتر تعریف کنید. برای اینکار ابتدای ادیتور را باز کرده و در بخش Editor گزینه Todo را انتخاب کنید. در لیست بالا میتوانید یک نمونه الگو برای todo خاص خود اضافه کنید. به عنوان مثال تگهای نامبرده در بالا را اضافه کنید و برای آن آیکن و نحوه رنگبندی و قلم و ... را برای نمایش آن انتخاب کنید.
در لیست پایینی که بخش فیلترهاست، میتوانید یک فیلتر را تعریف کنید تا بر اساس این فیلتر مشخص کنید که چه todo هایی نمایش یابند. برای فیلتر کردن در در پنل todo، در نوار ابزار، آیکن قیفی شکل را کلیک کند تا لیست فیلترها نمایش یابند.
نحوه صحیح قرار دادن یک todo به شکل زیر است:
// TODO:2008-12-06:johnc:Add support for negative offsets. // While it is unlikely that we get a negative offset, it can // occur if the garbage collector runs out of space.
راه حلهای زیادی برای محاسبه و نمایش تعداد کاربران آنلاین یک برنامه وب وجود دارند و عموما مبتنی بر کار با متغیرهای سشن یا Application و امثال آن هستند. این روشها عموما دقیق نبوده و خصوصا قسمت قطع اتصال کاربر را نمیتوانند دقیقا تشخیص دهند. به همین جهت نیاز به یک تایمر دارند که مثلا اگر در 5 دقیقه قبل، کاربری درخواست مشاهده آدرسی را به سرور ارسال نکرده بود، از لیست کاربران آنلاین حذف شود.
در ادامه بجای این روشها، از SignalR برای محاسبه تعداد کاربران آنلاین و همچنین به روز رسانی بلادرنگ این عدد در سمت کاربر، استفاده خواهیم کرد.
تشخیص اتصال و قطع اتصال کاربران در SignalR
زیر ساختهای کلاس Hub موجود در SignalR، دارای متدهای ردیابی اتصال (OnConnected)، قطع اتصال (OnDisconnected) و یا برقراری مجدد اتصال کاربران (OnReconnected) هستند. با بازنویسی این متدها میتوان به تخمین بسیار دقیقی از تعداد کاربران آنلاین یک سایت رسید.
پیشنیازهای بحث
پیشنیازهای این بحث با مطلب «مثال - نمایش درصد پیشرفت عملیات توسط SignalR» یکی است. برای مثال نحوه دریافت وابستگیها، تنظیمات فایل global.asax و افزودن اسکریپتها، تفاوتی با مثال یاد شده ندارند.
تعریف هاب کاربران آنلاین برنامه
کدهای کامل هاب شمارش کاربران آنلاین را در اینجا ملاحظه میکنید؛ به همراه نکتهی نحوهی دریافت IP کاربر متصل شده به سایت، در یک هاب. کار افزودن یا حذف این کاربران به ConcurrentDictionary تعریف شده، در روالهای بازنویسی شده اتصال، قطع اتصال و اتصال مجدد یک کاربر، انجام شده است.
در اینجا، هم به IP کاربر و هم به ConnectionId او نیاز است. از این جهت که هر ConnectionId، معرف یک برگه جدید باز شده در مرورگر کاربر است. اگر صرفا IPها را پردازش کنیم، با بسته شدن یکی از چندین برگه مرورگر او که اکنون به سایت متصل هستند، آمار او را از دست خواهیم داد. این کاربر هنوز چندین برگه باز دیگر را دارد که با سایت در ارتباط هستند، اما چون IP او را از لیست حذف کردهایم (در نتیجه بسته شدن یکی از برگهها)، آمار کلی شخص را نیز از دست خواهیم داد. بنابراین هر دوی IP و ConnectionIdها باید پردازش شوند.
اگر برنامه شما دارای اعتبارسنجی است (یک صفحه لاگین دارد)، بهتر است بجای IP از this.Context.User.Identity.Name استفاده کنید.
کدهای سمت کلاینت نمایش آمار کاربران
با توجه به اینکه در هاب تعریف شده، متد پویای updateUsersOnlineCount، آمار تعداد کاربران متصل را (تعداد آی پیهای منحصربفرد متصل را) به کلاینتها ارسال میکند، بنابراین در سمت کلاینت نیز با تعریف callback ایی به همین نام، میتوان این آمار دریافتی را به کاربران سایت نمایش داد. آماری که به صورت خودکار با کم و زیاد شدن کاربران به روز شده و نیازی نیست کاربر به صورت دستی، صفحه را به روز کند.
کدهای کامل این مثال را از اینجا نیز میتوانید دریافت کنید:
SignalR05.zip
در ادامه بجای این روشها، از SignalR برای محاسبه تعداد کاربران آنلاین و همچنین به روز رسانی بلادرنگ این عدد در سمت کاربر، استفاده خواهیم کرد.
تشخیص اتصال و قطع اتصال کاربران در SignalR
زیر ساختهای کلاس Hub موجود در SignalR، دارای متدهای ردیابی اتصال (OnConnected)، قطع اتصال (OnDisconnected) و یا برقراری مجدد اتصال کاربران (OnReconnected) هستند. با بازنویسی این متدها میتوان به تخمین بسیار دقیقی از تعداد کاربران آنلاین یک سایت رسید.
پیشنیازهای بحث
پیشنیازهای این بحث با مطلب «مثال - نمایش درصد پیشرفت عملیات توسط SignalR» یکی است. برای مثال نحوه دریافت وابستگیها، تنظیمات فایل global.asax و افزودن اسکریپتها، تفاوتی با مثال یاد شده ندارند.
تعریف هاب کاربران آنلاین برنامه
using System.Collections.Concurrent; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNet.SignalR; namespace SignalR05.Common { public class OnlineUsersHub : Hub { public static readonly ConcurrentDictionary<string, string> OnlineUsers = new ConcurrentDictionary<string, string>(); public void UpdateUsersOnlineCount() { // آی پی معرف یک کاربر است // اما کانکشن آی دی معرف یک برگه جدید در مرورگر او است // هر کاربر میتواند چندین برگه را به یک سایت گشوده یا ببندد var ipsCount = OnlineUsers.Select(x => x.Value).Distinct().Count(); this.Clients.All.updateUsersOnlineCount(ipsCount); } /// <summary> /// اگر کاربران اعتبار سنجی شدهاند بهتر است از /// this.Context.User.Identity.Name /// بجای آی پی استفاده شود /// </summary> protected string GetUserIpAddress() { object environment; if (!Context.Request.Items.TryGetValue("owin.environment", out environment)) return null; object serverRemoteIpAddress; if (!((IDictionary<string, object>)environment).TryGetValue("server.RemoteIpAddress", out serverRemoteIpAddress)) return null; return serverRemoteIpAddress.ToString(); } public override Task OnConnected() { var ip = GetUserIpAddress(); OnlineUsers.TryAdd(this.Context.ConnectionId, ip); UpdateUsersOnlineCount(); return base.OnConnected(); } public override Task OnReconnected() { var ip = GetUserIpAddress(); OnlineUsers.TryAdd(this.Context.ConnectionId, ip); UpdateUsersOnlineCount(); return base.OnReconnected(); } public override Task OnDisconnected() { // در این حالت ممکن است مرورگر کاملا بسته شده باشد // یا حتی صرفا یک برگه مرورگر از چندین برگه متصل به سایت بسته شده باشند string ip; OnlineUsers.TryRemove(this.Context.ConnectionId, out ip); UpdateUsersOnlineCount(); return base.OnDisconnected(); } } }
در اینجا، هم به IP کاربر و هم به ConnectionId او نیاز است. از این جهت که هر ConnectionId، معرف یک برگه جدید باز شده در مرورگر کاربر است. اگر صرفا IPها را پردازش کنیم، با بسته شدن یکی از چندین برگه مرورگر او که اکنون به سایت متصل هستند، آمار او را از دست خواهیم داد. این کاربر هنوز چندین برگه باز دیگر را دارد که با سایت در ارتباط هستند، اما چون IP او را از لیست حذف کردهایم (در نتیجه بسته شدن یکی از برگهها)، آمار کلی شخص را نیز از دست خواهیم داد. بنابراین هر دوی IP و ConnectionIdها باید پردازش شوند.
اگر برنامه شما دارای اعتبارسنجی است (یک صفحه لاگین دارد)، بهتر است بجای IP از this.Context.User.Identity.Name استفاده کنید.
کدهای سمت کلاینت نمایش آمار کاربران
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR-1.1.3.min.js" type="text/javascript"></script> <script type="text/javascript" src='<%= ResolveClientUrl("~/signalr/hubs") %>'></script> </head> <body> <form id="form1" runat="server"> online users count: <span id="usersCount"></span> </form> <script type="text/javascript"> $(function () { $.connection.hub.logging = true; var onlineUsersHub = $.connection.onlineUsersHub; onlineUsersHub.client.updateUsersOnlineCount = function (count) { $('#usersCount').text(count); }; $.connection.hub.start(); }); </script> </body> </html>
کدهای کامل این مثال را از اینجا نیز میتوانید دریافت کنید:
SignalR05.zip
اشتراکها
افزونهی Version Lens برای VSCode
اشتراکها
انتشار سورس #Unity C
اشتراکها