ابدأ التطبيق الشامل لتطوير تطبيقات ويندوز 8 و ويندوز فون 8 فى نفس الوقت

مرحبا بك 🙂
منذ حوالى ما يقرب من الشهرين كشفت مايكروسوفت عن ويندوز فون 8.1 و عن مدا تقاربة مع ويندوز 8 فى استخدام WinRT و كشفت ايضا عن ما يسمى بالتطبيق الشامل (Universal App) و الذى يتيح لك ان تكتب نفس الكود لتطبيقان ويندوز فون و ويندوز 8 فى نفس الوقت مع وجود بعض الاختلافات البسيطة جدا فى استخدام خصائص الهاتف مثل الكاميرا.

هيا بنا نبدأ باستخدام هذا النوع من التطبيق لكن للبدأ يجب ان يكون عندك

1) Visual Studio 2013
2)Windows 8.1
3) Windows Phone 8.1 SDK

و الان جاء وقت التعلم

1)افتح Visual Studio و أختار #C ثم Store App ثم Universal App ثم Black App

يتضح ايضا انه يوجد نوع اخر من القوالب و هو Hub App (يجب عليك تجربتة لانة يتيح لك الكثير من الامكانتيات الجاهزة)

2) سمى التطبيق كما تريد و اضغط على OK فيتم اظهار ال Solution لك

و التركيز فى الناتج نستنتج التالى

1) هناك مشروع ل ويندوز 8.1
2) هناك مشروع لويندوز 8.1
3) هناك ما بسمى بالمشروع المشترك و به ال app.xaml . و هذا المشروع فائدتة ان تكتب فية كود مشترك بين التطبيقين و مثال على ذلك الكود الذى يتواصل مع ال Database او ال Web Services . فتكمن اهمية هذا المشروع فى انك تكتب الكود مرة واحده فقط بين المشروعين. و بهذا المشروع ايضا ال App.xaml و هو نقطة انطلاق كل من التطبيقين و بة ال OnLaunched Event و ايضا Event لم يكن يوجد قبل فى تطبيقات ويندوز فون 8 من قبل و هو OnSuspending

و هذا ال Event كان يوجد فى ويندوز 8 و الان اضيف لويندوز فون 8.1 لان مراحل تشغيل و ايقاف وغلق التطبيقات فى الاتنين اصبحو واحد

4) ولكن هل يوجد هناك أختلافات فى الصور و ال Tiles فى التطبيقين ؟؟ بالطبع لان تطبيقات ويندوز فون 8.1 تستهدف الهواتف المحمولة و تطبيقات ويندوز 8.1 تستهدف الكمبيوتر اللوحى

فهيا بنا نفتح ال Package.Appmanifest لكلن من المشروعين

و الان جاء وقت البدا فى الكود. كما ترا فانى اضفت ملف اسمة Model فى المشروع المشترك و بة 2 Classes و احد لالوحدة المستخدمة فى التطبيق و الاخر ك مصدر للوحدات

class DataEntity

{

public string ImgURI { set; get; }

public string Name { set; get; }

}

class DataSource

{

private static List<DataEntity> _dataEntityList = null;

internal static List<DataEntity> DataEntityList

{

get

{

if (_dataEntityList == null)

{

_dataEntityList = GetAllEntities();

}

return _dataEntityList;

}

private set { _dataEntityList = value; }

}

private static List<DataEntity> GetAllEntities()

{

List<DataEntity> list = newList<DataEntity>();

list.Add(newDataEntity() { Name = “الاسمالاول“, ImgURI = “Assets/blueball.png” });

list.Add(newDataEntity() { Name = “الثانى“, ImgURI = “Assets/blueball.png” });

list.Add(newDataEntity() { Name = “الثالث“, ImgURI = “Assets/blueball.png” });

list.Add(newDataEntity() { Name = “الرابع“, ImgURI = “Assets/blueball.png” });

return list;

}

}

بعد ان كتبنا الكود اللازم لاحتواء التطبيق على بيانات هبا بنا لنرسم شكل التطبيق

1) افتح مشروع ويندوز8 ثم ال MainPage.Xaml

ثم اضف

و فى ال MainPage.xaml.cs اضف

public MainPage()

{

this.InitializeComponent();

Loaded += (a, b) => {

itemGridView.ItemsSource = UniversalGridViewApp.Model.DataSource.DataEntityList;

};

}

و بالطبع ال DataEntityList قادمة من المشروع المشترك 🙂

و الان قم بتشغيل التطبيق

هيا بنا لنفعل نفس الخطوات فى تطبيق ويندوز فون 8.1
1) قم بنسخ ال MainPage.xaml من مشروع ويندوز 8 ل مشروع ويندوز فون لكن هل يجب ان تترك ال Controls بنفس المساحة ؟؟ فى هذا التطبيق يمكنك لاكن هناك الكثير من الخلات التى تضطر الى ان تغيير بعض المسحات فى صفحات ويندوز فون مثل

2) ايضا قم بنسخ ال MainPage.xaml.cs من مشروع ويندوز 8 ال ويندوز فون و شغل التطبيق لكن لاختيار ويندوز فون كالتطبيق الاساسى للتشفيل كل ما عليك فعلة هو :

و الان شغل التطبيق 🙂

نعم لقد بنينا معا تطبيقين لويندوز 8 و اخر لويندوز فون 8 و وقت قليل جدا بأستخدام التطبيق الشامل 🙂

شكرا لك لحسن الاستماع و ارجوا ان اكون اضفت معلومات قيمة و بالطبع اذا كنت تريد السؤال عن اية تفصيلة ارجوج لا تتردد فى سؤالى 🙂

إبراهيم أسامة محمد

Windows 8 Live Tiles JavaScript (Arabic)

تحدثنا فى المقالات السابقة عن ال Live Tiles فى ويندوز 8 و اهميتها و علمنا كيفية استخدام ال Live Tiles فى C# Application  و الان لقد حان الوقت لتعلم ال Live Tiles بأستخدام ال JavaScript فى تطبيقات ويندوز 8.

لو القينا نظرة سريعة على المقالات السابقة و رأينا كيفية استخدام ال Live Tiles فى ال #C سنعلم انة يوجد طريقتان. هنا فى ال JavaScript سوف نستخدم الطريقة الاسهل و الاعم و هى ان نستخدم ال Classes الموجودة مع ال SDK Samples و بأمكانك تحميل ال Sample من هنا

بعد تحميل مثال ال JavaScript جربة و تفاعل معه. يجب ان تكون لاحظت الاتى
ان هناك مشروع #C فى التطبيق بجانب مشروع ال JavaScript الاساسى , هذا المشروع كتب فى لغة ال #C لتسهيل على المستخدم استخدام ال Live Tiles و لان استخدام ال Live Tiles فى ال #C اسهل من ال JavaScript.
ولكن كيف فعل هذا ؟؟؟!!! باستخدام ال Windows Runtime Component  و هى جزء من ال Code كتب ب ال #C او ال ++C او ال VB و يتخدم فى اى من المشاريع السابقة او فى مشاريع ال JavaScript و يجب ان تكون على علم بانك لا تستطيع كتابة ال Windows Runtime Component فى ال JavaScript.
و الان جاء وقت العمل
1) انشئ مشروع JavaScript جديد على ويندوز 8
2)قم باضافة مشروع موجود Existing Project و اضف مشروع ال NotificationExtension الموجود مع المثال الذى حملتة فى بداية هذا المقال ليكون المشروع مشابة لهذا