الملحقات (Components): ListView و HtmlView و WebView

xlmnxpمنذ سنتين

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

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

مستعرض القائمة ( ListView ) هو قائمة تقوم بإستخراج البيانات مباشرة من المصفوفة الى الواجهة

اما مستعرض شفرة HTML  ( او HtmlView ) فهو لرسم اجزاء HTML في واجهة التطبيق ( لا تستطيع إستخدام JavaScript فيه بإختصار هو لايدعمها )

 

listview-image.png.b1ba6f76a27c5bb777ea1552d030c349.png

htmlview-image.png.1bb1e3f446db860138332ce8419fc048.png

 

 

خصائص الملحق 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);
}

الناتج

التجربة على Playground

 

59a87e06785f5_ListViewHtmlView.gif.67bcedc59d96541bc744ef6fe6218426.gif

الملحق 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>

الناتج

59ae20e5ba6c9_exampleinplayground.png.e2f46755a9b4f138571c62a9243c250f.png

 

webview.thumb.png.e74208cbba2efef11de971b1655210b0.pngScreenshot_1504777079.thumb.png.4e6e402a0ce3b950815563792b8344d3.png

 

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

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

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