الملحقات (Components): ListView و HtmlView و WebView
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
مستعرض القائمة ( ListView ) هو قائمة تقوم بإستخراج البيانات مباشرة من المصفوفة الى الواجهة
اما مستعرض شفرة HTML ( او HtmlView ) فهو لرسم اجزاء HTML في واجهة التطبيق ( لا تستطيع إستخدام JavaScript فيه بإختصار هو لايدعمها )
خصائص الملحق ListView
items تحدد فيه المصفوفة المستهدف إستخارج البيانات منها
itemTap يفوم بتشغيل دالة عند النقر على احد عناصر ملحق ListView
itemLoading تشغيل دالة عند تحميل جميع العناصر
loadMoreItems يقوم بتشغيل دالة عند وصول منزلق الصفحة الى أخر عنصر بالأسفل في ListView
خصائص الملحق HtmlView
html تقوم بإلحاق كود الـHTML بداخلة
مثال على الملحقات
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
<ActionBar title="عالم البرمجة - مستعرض الـHTML و مستعرض المصفوفات"></ActionBar>
<StackLayout>
<ListView items="{{ List }}" itemTap="onItemTap">
<ListView.itemTemplate>
<Label text="{{ name }}" textWrap="true" style="margin: 20px;" />
</ListView.itemTemplate>
</ListView>
<HtmlView html="<h1><font color='red'>عالم البرمجة</font> دورة nativescript</h1>"/>
</StackLayout>
</Page>
main-page.js
import { fromObject } from "tns-core-modules/data/observable/observable";
var page, vm;
// هذه الدالة سوف تعمل عند الإنتقال للصفحة حسب ماتم تعيين في وسم page
export function onPageLoaded(args) {
page = args.object;
// انشاء Observable من كائن
vm = fromObject({
list: [
{ name: "Salem" },
{ name: "Saleh" },
{ name: "Ahmed" },
{ name: "Saeed" },
{ name: "Eid" },
{ name: "Mubarak" }
]
});
page.bindingContext = vm;
};
// هذه الدالة يتم استدعائها عند النقر على اي عنصر في ListView حسب ماعين في الوسم
export function onItemTap(args) {
// يرجع لك الـindex للعنصر الذي تم النقر عليه
// args.index
alert(vm.list[args.index].name);
}
الناتج
الملحق WebView
مستعرض الويب ( WebView ) كما يوحي اسمه هو ملحق لإستعراض صفحات الويب وشفرات الـHTML وهو يدعم الجافاسكربت
وتستطيع استخدامة لإستعراض رابط معين او شفرات HTML & CSS & JavaScript
خصائص الملحق
src رابط الموقع او شفرة الـ HTML
مثال على الملحق WebView
<Page loaded="pageLoaded" class="page" xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar title="مستعرض الويب" class="action-bar"></ActionBar>
<GridLayout rows="*,*">
<WebView src="http://www.3alampro.com" row="0"></WebView>
<WebView src="<html><head><title>عالم البرمجة</title></head><body style='background-color: gray;'> <script>alert('مرحبًا بالعالم')</script> </body></html>" row="1"></WebView>
</GridLayout>
</Page>
الناتج
محتوى الدورة
عن الدرس
| 2 إعجاب |
| 0 متابع |
| 0 مشاركة |
| 2505 مشاهدات |
| منذ 6 سنوات |
التعليقات (0)
عرض المزيد.. جديد مقالاتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !