برنامه‌نویسی ویندوز 8 - بخش دوم

ساخت نخستین برنامه برای محیط مدرن ویندوز 8
ماهنامه شبکه - ارديبهشت 1392 شماره 144

حمید رضا تائبی

اشاره:

ماهنامه شبکه - در این مقاله بر آن شدیم، تا نحوه ساخت برنامه‌های سبک ویندوز را به همراه تشریح ساختمان به‌کار رفته در آن‌ها به شما نشان دهیم. مفاهیمی که در این مقاله آن‌ها را مورد بررسی قرار خواهیم داد، عبارتند از: توصیف کوتاهی از ویندوز 8 و بعضی قابلیت‌های ارائه شده در آن، نگاهی اجمالی به جدیدترین نسخه ارائه شده از ابزار برنامه‌نویسی Visual Studio 2012 و در‌نهایت، ساخت برنامه‌های محیط مترو بر مبنای الگوی Blank App(XAML) و نحوه وارد‌کردن کنترل‌ها روی صفحه و پیکربندی آن‌ها.

انواع برنامه‌های Windows Store
یک برنامه ویندوز استور برنامه‌ای است که توانایی اجرا روی دستگاه‌های مجهز به سیستم‌عامل ویندوز 8 را دارد می‌باشد. برنامه‌های ویندوز استور بر‌خلاف برنامه‌های سنتی دسکتاپ از تمامی موجودیت صفحه نمایش برای ارائه اطلاعات استفاده می‌کند. برنامه‌های ویندوز استور بر‌اساس سبک‌های مختلفی پیاده‌سازی می‌شوند، اما همه آن‌ها از رابط کاربری و مجموعه‌ای از کنترل‌های جدید پشتیبانی می‌کنند. به‌عنوان مثال، برنامه‌های سبک مترو می‌توانند charm مخصوص به خود را داشته باشند. این charm خارج از محدوده پنجره یک برنامه قرار گرفته و به‌طور پیش فرض نمایش داده نمی‌شود، یعنی به‌اصطلاح auto-hide بوده و با کلیک راست در مکانی از صفحه ظاهر می‌شوند. صرف‌نظر از زبان انتخابی و الگوی انتخاب شده برای پیاده‌سازی آن‌ها و این‌که آیا به‌عنوان یک طراح دسکتاپ یا وب تصمیم به یادگیری برنامه‌نویسی ویندوز استور کرده‌اید، سازمان‌دهی فناوری‌های در ویندوز 8 به‌گونه‌ای که در شکل10  آن‌را نشان داده شده است. هما‌ن‌گونه که در شکل 10 می‌بینید‌، برنامه‌نویسان زبان‌های مختلف مشکلی در ساخت این‌گونه برنامه‌ها بر‌مبنای زبانی که با آن آشنا هستند، نخواهند داشت. 

شکل 10

پیاده‌سازی برنامه‌های ویندوز استور می‌تواند با استفاده از زبان‌های برنامه‌نویسی مختلفی که از سبک ویندوز 8 پشتیبانی می‌کنند، انجام شود. جاوااسکریپت،HTML/ سی‌شارپ، سی‌پلاس پلاس، ویژوال بیسیک نمونه‌ای از این زبان‌ها هستند. زمانی‌که در حال نوشتن برنامه‌های ویندوز استور هستید، این توانایی را دارید که از کتابخانه Windows Runtime استفاده کنید. این API  مختص ویندوز‌8 بوده و توسط زبان‌هایی که به آن‌ها اشاره شد، می‌تواند استفاده شود. حال که با اصول مقدماتی آشنا شدید، اجازه دهید به الگوهایی که برای ساخت پروژه‌های ویندوز استور 8 در ویژوال استودیو قرار دارند، نگاهی بیاندازیم. این الگوها در دیالوگ New Project در مسیر Installed->Template->Visual C# یا زبان‌های دیگر این مجموعه قرار دارند.

(Blank App(XAML:م Blank App برای ساخت یک الگوی پایه مورد استفاده قرار می‌گیرد. انتخاب این گزینه به معنای الگویی است ساده که حداقل عناصر لازم را مانند مجموعه تصاویر لوگوی برنامه و Splash Screen و یک سبک استاندارد که شامل یک صفحه خالی برای ساخت یک برنامه سبک ویندوز است، در‌اختیارتان قرار می‌دهد. این گزینه برای زمانی‌که برنامه شما فقط از یک صفحه تشکیل شده است گزینه ایده‌آلی به‌شمار می‌رود. (شکل11)

شکل 11

 (Grid App (XAML: الگوی Grid App هر آن چیزی را که در الگوی Blank App قرار دارد، در خود جای داده است؛ به‌علاوه مجموعه‌ای از اجزای اضافی‌تر که برای پیاده‌سازی یک برنامه سبک MVVM (سرنام ModelView-ViewModel) لازم است. (شکل12)

شکل 12

برنامه‌ای که بر پایه این الگو ساخته می‌شود از سه صفحه تشکیل می‌شود: نمای سطح بالا که همه گروه‌ها به همراه یک خلاصه وضعیت از عناصر قرار گرفته در هر گروه را نشان می‌دهد؛ صفحه جزئیات گروه، اطلاعات اضافی‌تر درباره گروه و فهرستی از عناصر که در آن شامل می‌شود را در بر می‌گیرند و در‌نهایت صفحه جزئیات عنصر که جزئیات مرتبط به هر عنصر مجزای قرار گرفته در یک گروه را نشان می‌دهد. اگر برنامه‌ای را مبتنی‌بر این الگو ایجاد کنید، الگوی ساخته شده از شش گروه تشکیل می‌شود.

شکل 13

کدهای لازم برای حرکت بین این گروه‌ها و عناصر قرار گرفته در آن‌ها توسط ویژوال استودیو به‌طور خودکار در برنامه اضافه شده و فعال هستند، به‌عنوان مثال، اگر روی گزینه Item Tile1 قرار گرفته در شکل 13کلیک کنید، وارد صفحه مربوط به جزئیات عنصر انتخاب شده می‌شوید. (شکل14)

شکل 14

(Split App (XAML: این الگو نیز همانند الگوی Grid App بوده و یک اسکلت از پیش طراحی شده که بر‌مبنای سلسله مراتب داده‌ها است را در‌اختیارتان قرار می‌دهد(شکل15). تفاوتی گه این الگو را از الگوی قبل متمایز می‌کند، نمایی است که Split App در‌اختیارتان قرار می‌دهد.

شکل 15

 Split App فقط از دو نما برای نشان دادن اطلاعات استفاده می‌کند. نمای نخست یک فهرست از گروه‌هایی را نشان می‌دهد که عناصر در آن‌ها سازمان‌دهی شده‌اند.  برخلاف Grip App این نما فقط اطلاعات مرتبط با گروه‌ها را نشان می‌دهد و اطلاعاتی در‌خصوص عناصر را به کاربر نمایش نمی‌دهد. انتخاب‌کردن هر گروه باعث می‌شود، به صفحه عنصر گروه انتخاب شده بروید که شامل فهرستی از عناصر قرار گرفته در یک گروه در طرف چپ صفحه نمایش و نشان دادن جزئیات عنصر انتخاب شده در طرف راست صفحه نمایش ظاهر شود (شکل16).

شکل 16

گزینه‌های دیگر قرار گرفته در این گروه شامل ساخت یک پروژه کلاس کتابخانه(Class Library (windows Store apps مورد استفاده در برنامه‌های ویندوز استور، ساخت یک کنترل پیشرفته با استفاده از گزینه Runtime Component که می‌تواند در برنامه‌های مختلف ویندوز استور صرف‌نظر از زبان برنامه‌نویسی که برای نوشتن آن‌ها کار شده است، استفاده شود و در‌نهایت گزینه unit test library که برای آزمایش پروژه‌های ویندوز استور از آن می‌توان استفاده کرد، هستند.

ساخت یک برنامه ساده  (Blank App (XAML
برنامه‌نویسی به سبک ویندوز 8 قاعده خاصی دارد؛ شیوه کار با برنامه‌هایی که به‌طور معمول با استفاده از ویژوال استودیو و زبان‌هایی مانند سی‌شارپ یا سی‌پلاس پلاس آن‌ها را طراحی‌کرده و در‌نهایت با کامپایل برنامه خروجی برنامه را دریافت می‌کردید، تفاوت دارد. پروژه‌های ویندوز 8 در نخستین مرحله به یک مجوز معتبرنیاز دارند که از سایت مایکروسافت دریافت می‌شوند. مجوز دریافتی به مدت یک ماه معتبر خواهد بود و قبل از اتمام این مدت زمان باید دوباره آن‌را تمدید کرد. برای دریافت مجوز نیازمند یک حساب‌کاربری مایکروسافت هستید. بعد از Sign in به حساب‌کاربری این مجوز به شرطی در‌اختیارتان قرار می‌گیرد که سرور مایکروسافت ویندوز شما را به‌صورت غیرقانونی تشخیص ندهد. در صورت معتبر نبودن ویندوز، سرور این موضوع را تشخیص داده و اعتبار‌نامه را در‌اختیارتان قرار نخواهید داد. ما در ادامه نشان خواهیم داد که دریافت یا دریافت نکردن این اعتبارنامه به چه صورتی خواهد بود.
1- ویژوال استودیو را اجرا کرده و از منوی File گزینه New و سپس Project را انتخاب کرده تا پنجره New Project ظاهر شود. پنجره  New Project دارای یکسری تغییرات است. نخستین تغییر و قابلیت اضافه شده در این پنجره اضافه‌شدن چارچوب جدید دات‌نت 4.5 است. از گزینه‌های جدید این پنجره می‌توان به Windows Store و Windows Phone  اشاره کرد که در زیر مجموعه زبان‌های برنامه‌نویسی این قسمت اضافه شده‌اند. زمانی‌که الگویی را انتخاب می‌کنید، پیش نمایش گزینه انتخاب شده در سمت راست پنجره نمایش داده می‌شود.(شکل17)

شکل 17

2- از زیرمجموعه الگوهای نصب شده، زبان برنامه‌نویسی سی‌شارپ را انتخاب کرده آن‌را باز کنید و گزینه Windows Store را انتخاب کنید. در پانل وسط از میان الگوهای قرار گرفته گزینه (Blank App(XAML  را انتخاب کنید. با این‌کار پیش نمایش الگوی انتخاب شده نشان داده می‌شود. در فیلد Name نام پروژه خود را وارد کرده و کلید Ok را فشار دهید. الگوی Blank یک الگوی ساده بوده و فاقد هرگونه کنترل رابط‌کاربری و داده خواهد بود و باید داده‌ها و کنترل‌ها را به‌طور دستی در برنامه اضافه کرد.
3-  زمانی ‌که روی دکمه ok کلیک می‌کنید، در پنجره ظاهر شده باید توافق‌نامه ارائه شده توسط مایکروسافت را خوانده و در صورت قبول آن روی دکمه  I Agree کلیک کنید تا یک اعتبارنامه برایتان ثبت شود. برای دریافت این اعتبارنامه نیازمند دسترسی به اینترنت هستید. مراحلی که برای دریافت این اعتبارنامه سپری می‌کنید، فقط یک‌بار اجرا می‌شوند. (شکل18)

شکل 18

با کلیک روی دکمه I Agree پیغام امنیتی زیر ظاهر می‌شود روی دکمه Yes کلیک کنید(شکل19).

شکل 19

در صفحه بعد لازم است تا به حساب‌کاربری مایکروسافت log in کنید. برای این منظور فیلدهای مورد نیاز را پر کرده و روی دکمه Sign in کلیک کنید. در صورت وجود نداشتن حساب‌کاربری یک مرحله اضافی‌تر را پیش رو دارید که با کلیک روی دکمه Sign Up Now طی می‌شود(شکل20).

شکل 20

بعد از ورود به حساب‌کاربری، اکنون زمانی است که اعتبارنامه باید به شما اختصاص داده شود. این‌گونه به‌نظر می‌رسد که این اعتبارنامه بر‌مبنای بررسی ویندوز 8 در‌اختیار کاربر قرار می‌گیرد در صورتی‌که ارائه این اعتبارنامه بر این مبنا صورت گیرد، در صورت تشخیص سرور مبنی‌بر نامعتبر بودن ویندوز 8 این موضوع با نمایش پیغام شکل21 همراه خواهد بود. کاربری که این پیغام را دریافت کند، توانایی ساخت برنامه‌های ویندوز استور را نخواهد داشت و پروژه او در همین مرحله به پایان خواهد رسید.

شکل 21

در‌صورتی‌که موفق به دریافت این مجوز شده باشید، این اعتبارنامه به مدت یک ماه معتبر بوده و با استفاده از آن می‌توانید برنامه‌های ویندوز استور را طراحی کنید. شکل 22  نشان می‌دهد که ما این اعتبارنامه را در تاریخ 2013.22.1 دریافت کرده‌‌ایم و تا تاریخ 2013.22.2 معتبر خواهد بود و قبل از اتمام این تاریخ باید آن‌را به‌روز رسانی کرد. در‌صورتی‌که بعد از اتمام مدت اعتبار به کامپایل یک برنامه مترو یا ساخت یک برنامه مترو جدید اقدام کنید، پیغامی نشان داده می‌شود که در خصوص به روزرسانی اعتبارنامه سؤال می‌کند و مراحلی را که در بالا بر شمردیم، تکرار می‌کند. همچنین برای به‌روزرسانی اعتبار‌نامه خود در محیط ویژوال استودیو زمانی‌که یک پروژه ویندوز استور باز شده است، از منوی Project گزینه Store و سپس گزینه Acquire Develop licence را انتخاب کنید. روی دکمه Close کلیک کرده تا پنجره  شکل22 بسته شود.

شکل 22

ویژوال استودیو پروژه شما را بر‌مبنای الگوی انتخاب شده ایجاد کرده و فایل app. xaml. cs را به‌طور خودکار باز می‌کند. همان‌گونه که در شکل 23 مشاهده می‌کنید، نمای ظاهری ویژوال استودیو متأثر از سبک مترو بوده و عناوین قرار گرفته در منوها همگی با حروف بزرگ درج شده‌اند. اما تغییراتی که در ویژوال استودیو اتفاق افتاده به مفاهیم سطحی و ظاهری محدود نشده است. از قابلیت‌های جدیدی که همراه با ویژوال استودیو ارائه شده است، قابلیتی به‌نام شبیه‌ساز Simulator ویندوز 8 است. این شبیه‌ساز امکان آزمایش برنامه‌های نوشته شده برای ویندوز 8 را در یک محیط مجازی فراهم می‌آورد. آیکون مربوط به این گزینه در نوار ابزار برنامه به‌نام  Local Machine قرار دارد. ما با این قابلیت قدرتمند در قسمت دوم مقاله آشنا خواهیم شد. سمت چپ ویژوال استودیو همانند گذشته تب‌های مختلفی مانند  Server Explorer،ToolBox قرار گرفته‌اند. با استفاده از Toolbox توانایی قرار دادن کنترل‌ها روی صفحات را به‌صورت ویژوال در‌اختیار خواهید داشت. سمت راست ویژوال استودیو به‌طور سنتی دیالوگ‌های  Properties/Solution Explorer/Team Explorer/Class View را شامل می‌شود. وظیفه دیالوگ Solution Explorer نمایش عناصر قرار گرفته در یک پروژه است.

شکل 23

همان‌گونه که در شکل 24 و پنجره Solution مشاهده می‌کنید‌، این پروژه انواع مختلفی از عناصر را در خود جای داده است. هر چند تعداد عناصر به‌کار رفته در این پروژه در مقایسه با پروژه‌هایی نظیر  Grid App (XAML) به‌مراتب کمتر است، اما هنوز هم نکات بسیاری دارد. فایل appxmanifest قرار گرفته در پروژه توصیف کننده اجزای قرار گرفته در برنامه مانند نام‌، عنوان صفحه شروع، لیستی از فایل‌های قرار گرفته در برنامه‌، تصاویر و لوگوی برنامه است. اگر روی این فایل کلیک کنید، اطلاعات یاد شده به‌همراه اطلاعات اضافی‌تر در چهار زبانه Application UI/Capabilites/Declarations/Packaging قابل مشاهده هستند.(شکل25) 

شکل 24

اما اصلی‌ترین فایل‌های این برنامه App. xaml و MainPage. xaml هستند. فایل MainPage. xaml شامل یک الگوی خالی از یک صفحه است، که حداقل کدهای XAML برای معرفی یک صفحه را در خود جای داده است و محتوای آن چیزی بیش از یک کنترل Grid قرار گرفته در صفحه نیست. حال می‌خواهیم این صفحه MainPage. xaml که در واقع یک Blank Page است را پاک کرده و یک صفحه Basic Page را جایگزین آن کنیم. با این‌کار حداقل کدهای لازم برای یک صفحه را که توسط ویژوال استودیو به‌طور خودکار در برنامه‌تان قرار می‌گیرند را در‌اختیار خواهید داشت.

شکل 25

جایگزین کردن یک صفحه جدید
1- در Solution Explorer روی فایل MainPage. xaml کلیک راست کرده و آن‌را Delete کنید‌. در پنجره ظاهر شده دکمه ok را برای تأیید کار فشار دهید.
2- در مرحله بعد باید صفحه جدید را اضافه کنید. به این دلیل یک صفحه جدید را اضافه می‌کنیم که حداقل گزینه‌های مرتبط با صفحه را در‌اختیارمان قرار می‌دهد. روی پروژه کلیک راست کرده گزینه  Add New Item را انتخاب کرده و از دیالوگ ظاهر شده گزینه  Basic Page را انتخاب کنید. سپس نام آن‌را MainPage. xaml وارد کرده و کلید Add را فشار دهید. (شکل26)

شکل 26

 از منویBuild گزینه Build Solution را انتخاب‌ کنید. همان‌گونه که درشکل 27 مشاهده می‌کنید BasicPage. xaml به پروژه اضافه شده است.

شکل 27

از منوی Debug گزینه Start Debugging را انتخاب کرده یا کلید F5 را فشار دهید تا برنامه اجرا شود. اجرای برنامه بعد از چند ثانیه صورت می‌گیرد. صفحه MainPage که آن‌را ساخته‌اید، فقط عبارت  My Application را همانند شکل 28 نشان می‌دهد.

شکل 28

حال به اصلی‌ترین سؤالی که ممکن است، ذهن بعضی از کاربران را به خود مشغول کرده باشد، می‌رسیم: مکان قرار‌گیری دکمه Close در کجای صفحه قرار دارد؟ در جواب باید گفت چنین دکمه‌ای در برنامه‌های محیط مترو ویندوز 8 وجود ندارد. برای برگشت به ویژوال استودیو می‌توانید از ترکیب کلیدهای alt+tab استفاده کنید و در ادامه روی آیکون
 debugging Stop در ویژوال استودیو برای متوقف‌کردن عملیات دیباگ کلیک کنید. برای بستن یک برنامه سبک ویندوز 8 از ترکیب کلیدهای Alt+F4 می‌توان استفاده کرد. زمانی‌که از این ترکیب استفاده می‌کنید، برنامه به مدت 10 ثانیه در وضعیت suspend قرار گرفته و بعد از سپری شدن زمان مربوطه بسته خواهد شد. البته، برنامه‌های مترو نیازی به بسته شدن ندارند. یک برنامه مترو زمانی‌که لازم است، بارگذاری می‌شود و زمانی‌که احتیاج نیست Suspend می‌شود. نمونه بارز این برنامه‌ها کاشی Desktop در صفحه شروع است. این کاشی زمانی بازگذاری می‌شود که وجود آن لازم است.
تا این مرحله موفق شده‌اید یک برنامه ویندوز استور را با حداقل کار ممکن ایجاد کنید‌. تبریک می‌گوییم!