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

Welcome to my blog :)

JavaScript فى برمجه ويندوز 8 فى ListView استخدام

leave a comment »

begin لقد تحدثا مؤخرا عن اهميه ال JavaScript لاستخدامها المتعدد فى اكثر من برمجه تطبيقات مثل Web , Windows 8 ,Mobile Gap , IOS و العديد و العديد . مقالنا هذا اليوم عن استخدام واحده من اهم المتحكمات (Controls) فى نظام ويندوز 8 و هى ال ListView هذه الصوره مثال على ال ListView

IC5733692

هيا بنا نبدأ
اضف تطبيق جديد باستخدام بغه ال JavaScript فى ويندوز 8 ثم افتح ال default.html و فكر ماذا نريد تحديدا ؟؟
1) نريد استخدام متحكم (control) فى ال HTML و هو متحكم معمول خصيصا لويندوز 8 و ليس له وجود فى باقى متحكمات ال HTML5 المتعارف عليها
2)كيف ؟؟ باستخدام WinJS ولكن كيف الاستخدام ؟ قم باضافه div و اضف اليها خاصيه data-win-control و انظر ماذا يحدث

3
ستظهر لك كل متحكمات ويندوز 8 الغير موجود فى ال HTML العادى و بالطبع سوف نختار ListView
3)هناك طريقتين  لاستخدام ال ListView الاولى هى اضافه ListViewItem و هى غير موجوده فى تطبيقات ال JavaScript و الاخرى استخدام ال DataBinding يفضل القرائه عن ال Databinding قبل تكمله هذا المقال لانها الطريقه الوحيده الموجوده و المستخدما ايضا هنا 🙂
4)بعد اضافه ال Div يجب ان نتخيل الشكل الذى نريده و هو فى  اول صوره  فى المقال. الان فهمنا مما يتكون كل item فى ال ListView و هو صوره ثم سطر من الكلام ثم سطر اخر فالان سوف نضيف هذا التخيل ولاكن يجب قبل الاضافه ان نعرف ان هذا الوصف سوف يستخدم كوصف او عارض (Template) لذلك استخدمنا Winjs.binding.template و بداخله الوصف و فى كل متحكم داخل الوصف اضفنا data-win-bind لنعرف ان هذا المتحكم سوف يستخدم الرابط المعين ذو الاسم المعين فى الخاصيه المعينه و فى هذا المثال لنأخذ الصوره سوف يكون ال src اسمه picture فى الريط

<div id=”mediumListIconTextTemplate” data-win-control=”WinJS.Binding.Template”>

        <div>

            <img data-win-bind=”alt: title; src: picture” />

            <div>

                <h4 data-win-bind=”innerText: title”></h4>

                <h6 data-win-bind=”innerText: text”></h6>

            </div>

        </div>

    </div>   

و الان نعرف ان هذا الوصف سوف يستخدم فى ال ListView الخاصه بنا هن طريق ال id فى ال data-win-option فى خاصيه ال itemTemplate

<div data-win-control="WinJS.UI.ListView"
        data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}">
    </div>

 و الان جاء وقت وضع البيانات افتح default.js داخل ماف ال js  و قم باضافه البيانات التى تريدها من صور و كلمات و بعد ذلك يجب ريط البيانات ب ال ListView عن طريق ال ItemDataSource و فى هذا الثال لقد عرفنا البيانات داخل DataExample

var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
                ];
                var dataList = new WinJS.Binding.List(dataArray);
                var publicMembers =
                    {
                        itemList: dataList
                    };
                WinJS.Namespace.define("DataExample", publicMembers);

11 و الان جرب المثال و سوف تحصل عى النتيجه التى تريدها و ان كنت فى الاحتياج لاى مساعده فتواصل معى و لن اتأخر ان شاء الله 🙂 شكرا

2056910448_thanks_xlarge

إبراهيم اسامه محمد
@IbraheemOsamaMo

end

Advertisements

Written by Ibraheem Osama Mohamed

February 15, 2013 at 2:01 pm

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: