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

xlmnxpمنذ سنتين

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

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

الملحق SearchBar

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

search-bar-image.png.2351b4c591ed7a0a69e249327ca55228.png

 

خصائص الملحق

text للحصول على النص أو تعيينه
hint نص للتوضيح
textChange تشغيل دالة عندما يتم ادخال نص
submit تشغيل دالة عند النقر على زر بحث
clear تشغيل دالة عند افراغ الحقل او الضغط على زر حذف النص


مثال على الملحق 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;

الناتج

59ae20e5ba6c9_exampleinplayground.png.e2f46755a9b4f138571c62a9243c250f.png

 

searchbar.gif.101a754f3d7389154889b1ef8e8461c2.gif

 

الملحق Switch

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

switch-image.png.0b583b9a7a7edf885937a8f56fe5eeb2.png


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

color لون الزر
checked يحتوي قيمتين هما true و false 
true عندما يكون المفتاح مفعل
false عندما يكون المفتاح غير مفعل
isEnabled حالة تفعيل المفتاح 


مثال على الملحق 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;

الناتج

59ae20e5ba6c9_exampleinplayground.png.e2f46755a9b4f138571c62a9243c250f.png

 

switch.gif.bb1cd8c1f75459733ca33f320f518338.gif

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !