Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Windows 8 Live Tiles JavaScript (Arabic)

leave a comment »

تحدثنا فى المقالات السابقة عن ال 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 الموجود مع المثال الذى حملتة فى بداية هذا المقال ليكون المشروع مشابة لهذا
1

3)قم بالاشارة على المشروع المضاف من المشروع الاساسى كما مبين فى الصور
234

4)الان بعد ان تم الاشارة الى مشروع ال #C . يجب ان نستخدم المكاتب الموجودة فى ال #C فى تطبيق ال JavaScript و بأمكانك المنادى على ال Code عن طريق كتابة

NotificationsExtensions.TileContent.TileContentFactory

5) اختر ال Tile الذى تريد استخدامة و قم بكتابة ال Code الخاص بة  فى بداية التطبيق مثل

  var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWideText03();
                tileContent.textHeadingWrap.text = "Hello World! My very own tile notification";

                // Users can resize tiles to square or wide.
                // Apps can choose to include only square assets (meaning the app's tile can never be wide), or
                // include both wide and square assets (the user can resize the tile to square or wide).
                // Apps cannot include only wide assets.

                // Apps that support being wide should include square tile notifications since users
                // determine the size of the tile.

                // create the square template and attach it to the wide template
                var squareTileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquareText04();
                squareTileContent.textBodyWrap.text = "مرحبا بك ابراهيم اسامة محمد";
                squareTileContent.textBodyWrap.lang = "ar"
                tileContent.squareContent = squareTileContent;

                // send the notification
                Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileContent.createNotification());

الان اذهب الى ال Tile الخاصة بالتطبيق لترى
5

6)اخر شئ اذكرة لك هو ان الكلام فى هذا ال Tile من اليمين الى اليسار و لفعل هذا توجب علينا كتابة هذا ال Code

                squareTileContent.textBodyWrap.lang = "ar"

شكرا للقرائة و ان كان لك اى سؤال او نقض فلا تترد فى السؤال او النقد و شكرا

2056910448_thanks_xlarge

Ibraheem Osama Mohamed
IbraheemOM@

Advertisements

Written by Ibraheem Osama Mohamed

June 17, 2013 at 9:24 pm

Posted in Windows 8

Tagged with

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: