الملحقات (Components): SearchBar و Switch

بسم الله رحمن الرحيم

السلام عليكم ورحمة الله وبركاته

الملحق SearchBar

شريط البحث ( SearchBar ) كما يوحي اسمه هو شريط مخصص للبحث

خصائص الملحق

مثال على الملحق SearchBar

ملف main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <ActionBar title="عالم البرمجة - شريط البحث"></ActionBar>
    <StackLayout>
        <!-- وسم searchbar لشريط البحث -->
        <!-- ربط الدالو onClear و onSubmit بالصفحة لتعمل عند الحدث -->
        <SearchBar id="searchBar" hint="بحث" clear="onClear" submit="onSubmit" />

        <!-- وسم label ليظهر ناتج results -->
        <Label text="{{ results }}" textWrap="true" />
    </StackLayout>
</Page>

ملف main-page.js

var Observable = require("data/observable").Observable;
var page;
// إنشاء الـ Observable
var viewModel = new Observable(); 
function onNavigatingTo(args) {
    page = args.object;
    // تعريف الـ Observable ـ results واسناد له قيمة
    viewModel.results = "الناتج";

    // ربط الـ Observable بالصفحة
    page.bindingContext = viewModel;
}

function Search(args){
    // جلب الـ SearchBar من نقس حدث البحث والحذف
    var searchbar = args.object;

    // اسناد النص الذي بداخل الـ SearchBar بالـ results
    viewModel.set('results', searchbar.text);
}

// عمل export للدوال لإستخدامها داخل الصفحة
exports.onSubmit = Search;
exports.onClear = Search;

exports.onNavigatingTo = onNavigatingTo;

الناتج

الملحق Switch

الـمفتاح التبديل ( Switch ) هو مفتاح تبديل يرجع يقيمتين false و true ويستخدم عادتًا في اعدادات التطبيق.

خصائص الملحق Switch

مثال على الملحق Switch

ملف main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <ActionBar title="عالم البرمجة - مفتاح التبديل"></ActionBar>
    <StackLayout>
        <Switch checked="{{ checked }}" />
        <Button isEnabled="{{ checked }}" text="الولوج الى عالم البرمجة" />
    </StackLayout>
</Page>

ملف main-page.js

var Observable = require("data/observable").Observable;
var page;
// إنشاء الـ Observable
var viewModel = new Observable(); 
function onNavigatingTo(args) {
    page = args.object;
    // تعريف الـ Observable ـ checked واسناد له قيمة
    viewModel.checked = false;

    // ربط الـ Observable بالصفحة
    page.bindingContext = viewModel;
}

exports.onNavigatingTo = onNavigatingTo;

الناتج