xlmnxp

Members
  • عدد منشوراتي

    24
  • تاريخ الإنضمام

  • تاريخ اخر زياره

السمعه بالموقع

4 Neutral

عن العضو xlmnxp

  • الرتبه
    مبدع مثابر

معلومات عامة

  • الجنس
    ذكر
  • السكن
    المملكة العربية السعودية
  • هواياتي
    اهوى اطار العمل nativescript و node.js وتطوير الويب

اخر الزوار

173 زياره للملف الشخصي
  1. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته من العايدين جميعًا وكل عام وانت بخير بمناسبة عيد الاضحى المبارك ندخل مباشرة في الدرس ListView هو قائمة تقوم بإستخراج البيانات مباشرة من المصفوفة الى الواجهة اما 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 var Observable = require("data/observable").Observable; var page; // إنشاء الـ Observable var viewModel = new Observable(); // هذه الدالة سوف تعمل عند الإنتقال للصفحة function onNavigatingTo(args) { page = args.object; // إضافة مصفوفة للـ Observable viewModel.List = [ { name: "Salem"}, { name: "Saleh"}, { name: "Ahmed"}, { name: "Saeed"}, { name: "Eid"}, { name: "Mubarak"} ]; // ربط الـ Observable بالصفحة page.bindingContext = viewModel; } function onItemTap(args){ // يرجع لك الـindex للعنصر الذي تم النقر عليه // args.index alert(viewModel.List[args.index].name); } exports.onNavigatingTo = onNavigatingTo; // إستخراج الدالة لإستخدامها داخل main-page exports.onItemTap = onItemTap; الناتج من هنا الملحق 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. بسم الله الرحمن الرحيم السلام عليكم ورحمة اللة وبركاته بكل اختصار مهمة call و apply و bind هي استبدال this الى Object اخر تستخدم عادة لحل مشكلة الـ Global Variable او لتغيير خاصية في عنصر معين مثال بسيط وسوف اشرح الفرق بينهم var animal = function animal(name){ this.name = name; } animal.prototype.getName = function(good){ return this.name + " " + good; } var sheep = new animal('خروف'); var getName = sheep.getName; // undefined جميل alert(getName('جميل')) // خروف جميل alert(getName.call(sheep, 'جميل')); alert(getName.apply(sheep, ['جميل'])); alert(getName.bind(sheep)('جميل')); كما لاحظت قام بحل مشكلة الـ Global Variable الفرق بين call و apply call ( العنصر this, عنصر, عنصر, الخ.. ) يقبل العنصر الاول الذي يستبدل به العنصر this ومن ثم العناصر التي يطلب بها استدعاء الدالة المستهدفة مثال var animal = function animal(name){ this.name = name; } animal.prototype.getName = function(good){ return this.name + " " + good; } var sheep = new animal('خروف'); var getName = sheep.getName; // undefined جميل alert(getName('جميل')) // خروف جميل alert(getName.call(sheep, 'جميل')); apply (العنصر this, عناصر [عنصر, عنصر, عنصر, الخ... ] ) يقبل العنصر الاول الذي يستبدل به العنصر this ومن ثم العناصر التي يطلب بها استدعاء الدالة المستهدفة على شكل مصفوفة مثال var animal = function animal(name){ this.name = name; } animal.prototype.getName = function(good){ return this.name + " " + good; } var sheep = new animal('خروف'); var getName = sheep.getName; // undefined جميل alert(getName('جميل')) // خروف جميل alert(getName.apply(sheep, ['جميل'])); الفرق بين bind و call bind هو مشابه لـ call جدًا فرق بينهم ان bind يرجع دالة نفسها عكس call الذي يرجع ماداخل الدالة بعد تنفيذها مثال function alertFullName(lastname){ alert(this.firstname + ' ' + lastname); } var fullname = { firstname: "Salem" } alertFullName.bind(fullname)("Yaslim")
  3. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته ما هو موضح مسبقًا في الدرس العاشر Image هو وسم لإستعراض الصور بداخلة ( يدعم استعمال صور من رابط خارجي ) وActivityIndicator هو عبارة عن علامة Loading ( مؤشر انتظار ) خصائص الملحق ActivityIndicator busy اظهار مؤشر التحميل يقبل قيمتين true | false busyChange تشغل دالة عند تغيير قيمة busy color لون المؤشر خصائص الملحق Image src مصدر الصورة اما برابط محلي مثل "~/3alampro/logo.png" او برابط من مجلد resources مثل "res://3alampro/logo" او رابط خارجي مثل "http://www.3alampro.com/logo.png" width لعرض الصورة height لطول الصورة مثال على الملحقات ملف main-page.xml <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo"> <Page.actionBar> <ActionBar title="عالم البرمجة - الصورة ومؤشر الإنتظار"></ActionBar> </Page.actionBar> <StackLayout style="padding: 20px"> <Image src="http://www.3alampro.com/uploads/monthly_2016_03/stamp.png.2809a48c070e3d284c9dc2d6d8b46b60.png" width="240" height="120" /> <ActivityIndicator busy="true" color="gray" /> </StackLayout> </Page> الناتج من هنا
  4. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته المنزلق Slider و شريط التقدم Progress الخصائص المشتركة بين الملحقين maxValue اعلى قيمة في المنزلق و شريط التقدم value للحصول على القيمة ( موقع شريط التقدم او المنزلق ) او تعينها valueChange تشغيل دالة عند تغيير قيمة المنزلق او شريط التقدم color لون المزلق و شريط التقدم backgroundColor لون خلفية شريط المنزلق ولون خلفية شريط التقدم خصائص الملحق Slider minValue اقل قيمة في المنزلق مثال على الملحقات ملف main-page.xml <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo"> <Page.actionBar> <ActionBar title="عالم البرمجة - مفتاح التبديل"></ActionBar> </Page.actionBar> <StackLayout style="padding: 20px"> <Progress maxValue="100" color="orange" backgroundColor="red" value="{{ Value }}" /> <Progress maxValue="100" value="{{ Value }}" /> <Slider minValue="0" color="green" backgroundColor="black" maxValue="100" value="{{ Value }}" /> <Slider minValue="50" maxValue="150" value="{{ Value }}" /> </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 ـ Value واسناد له قيمة viewModel.Value = 0; // ربط الـ Observable بالصفحة page.bindingContext = viewModel; } exports.onNavigatingTo = onNavigatingTo; الناتج من هنا
  5. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته ماهو ejs ؟ هو لغة قوالب صمم ليعمل من جهة الخادم تم بناءة من قبل Matthew Eernisse يتيح لك إستخدام لغة javascript داخل ملفات html بشكل شبيه جدًا بالـ PHP استخدامة مع إطار Express اول يجب ان تقوم بإضافة ejs لمشروعك بكتابة الأمر التالي npm install ejs من ثم تضيف الشفرة التالية لتطبيق express الخاص بك app.set('view engine', 'ejs'); من ثم إضافة الملفات الى مجلد views ويجب ان ينتهي الملف بالأمتداد ejs ولعمل رسم للملف بإستخدام الشفرة أستخدم .render(اسم الملف نص, المدخلات عنصر) مثال app.get('/', function(req, res) { // مع إستبدال index بإسم الملف res.render('index', {name:"عالم البرمجة"}); }); مثال لمشروع Express ملفات المشروع . ├── app.js ├── package.json ├── package-lock.json ├── node_modules ├── public │ └── images │ ├── normal.png │ └── transparent.png └── views ├── footer.ejs ├── header.ejs └── index.ejs ملف app.js var express = require('express'); var app = express(); app.set('view engine', 'ejs'); app.use(express.static("public")); app.get('/', function(req, res){ var images = [ 'transparent.png','normal.png' ]; res.render('index', { imgs: images, name:"عالم البرمجة" }); }); app.listen(80,function(){ console.log('[info] متصل على المنفذ 80'); }); ملف view/header.ejs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%= title %></title> </head> <body> <p>مرحبًا بالعالم</p> <ul> <li><%= name %></li> </ul> ملف view/index.ejs <%- include('header', {title: "مثال عالم البرمجة"}) %> <ul> <% for(var i=0; i< 5; i++) {%> <li><%= i + 1 %></li> <% } %> </ul> <h1><%= name %></h1> <% imgs.forEach( (img) => { %> <img src="images/<%= img %>"/><br/> <% }); %> <%- include('footer') %> ملف footer.ejs <h5>&copy; عالم البرمجة</h5> </body> </html> بعد تشغيل التطبيق الناتج الأوسمة المخصصة لـ Ejs والدوال <% %> يقوم بتنفيذ شفرة الجافاسكربت التي بداخلة <%= %> يطبع النص الذي بداخلة ( يقوم بعمل html entities encode للأوسمة html ) <%- %> يقوم بطباعة النص الذي بداخلة كا HTML <%% يطبع '<%' بالنص الذي بداخلة متخطي عملية المعالجة %%> يطبع '%>' بالنص الذي بداخلة متخطي عملية المعالجة <%_ يقوم بحذف جميع المسافات الفارغة التي قبلة مع تنفيذ شفرة الجافاسكربت التي بداخلة _%> يقوم بحذف جميع المسافات الفارغة التي بعدة مع تنفيذ شفرة الجافاسكربت التي بداخلة include(اسم الملف نص, المدخلات عنصر) يقوم بجلب ملف ejs بعد عملية المعالجة له باقي الدوال تجدها في ViewHelpers صورة الغلاف منقولة من coligo.io
  6. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته هذا الدرس سوف يشرح لك كيفية بناء مشروع في nativescript وايضًا اضافة المنصة المستهدفة android او ios وكذلك إستعراض التطبيق في الـEmulator والتعديل على تصميم التطبيق بناء مشروع nativescript core بعد الدخول للمجلد المراد اضافة ملفات المشروع اليه بواسطة الطرفية ( للينكس والماك تسمى terminal وللويندوز تسمى cmd ) تكتب الامر التالي tns create HelloWorld ماذا يقصد بهذا الامر ؟ tns هو اختصار لـ nativescript اما t فهو للتفريق بينه وبين NS الخاص بنظام IOS اما Create فاتعني "بناء" او "انشاء" و HelloWorld هو اسم التطبيق اما اذا كنت تريد ان تستخدم nativescript core مع typescript فابإمكانك بان تضيف العلم --tsc للقيام بإستخدام القالب الافتراضي بواسطة typescript tns create HelloWorld --tsc بناء مشروع nativescript with angular لبناء مشروع nativescript مع اطار العمل angular يكفي بان تظيف العلم --ng للأمر وسوف تجده قام ببناء مشروع angular tns create HelloWorld --ng سوف اكمل الشرح بمشروع nativescript core ما الملفات اللتي سوف يقوم بإضافتها المشروع ؟ ├── app // مجلد التطبيق الاساسي │ ├── app.css // ملف css خاص بالتصميم يعمل في كافة صفحات التطبيق │ ├── app.js // ملف app المتحكم بكامل التطبيق ( n تحديد الصفحة الرائيسية للتطبيق وما الى ذلك n) │ ├── bundle-config.js │ ├── main-page.js // ملف جافاسكربت المتحكم بالصفحة main-page │ ├── main-page.xml // ملف xml المخصص لتصميم الواجهه للصفحة main-page │ ├── main-view-model.js │ ├── references.d.ts │ ├── package.json │ ├── App_Resources // سوف تجد هنا الملفات شعار التطبيق و splashscreen وملفات strings والكثير الخاصة بنظام android و ios │ │ ├── Android │ │ │ ├── AndroidManifest.xml │ │ │ ├── app.gradle │ │ │ ├── drawable-hdpi │ │ │ │ ├── background.png │ │ │ │ ├── icon.png │ │ │ │ └── logo.png │ │ │ ├── drawable-ldpi │ │ │ │ ├── background.png │ │ │ │ ├── icon.png │ │ │ │ └── logo.png │ │ │ ├── drawable-mdpi │ │ │ │ ├── background.png │ │ │ │ ├── icon.png │ │ │ │ └── logo.png │ │ │ ├── drawable-nodpi │ │ │ │ └── splash_screen.xml │ │ │ ├── drawable-xhdpi │ │ │ │ ├── background.png │ │ │ │ ├── icon.png │ │ │ │ └── logo.png │ │ │ ├── drawable-xxhdpi │ │ │ │ ├── background.png │ │ │ │ ├── icon.png │ │ │ │ └── logo.png │ │ │ ├── drawable-xxxhdpi │ │ │ │ ├── background.png │ │ │ │ ├── icon.png │ │ │ │ └── logo.png │ │ │ ├── values │ │ │ │ ├── colors.xml │ │ │ │ └── styles.xml │ │ │ └── values-v21 │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ └── iOS │ │ ├── Assets.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ ├── Contents.json │ │ │ │ ├── [email protected] │ │ │ │ ├── [email protected] │ │ │ │ ├── icon-29.png │ │ │ │ ├── [email protected] │ │ │ │ ├── [email protected] │ │ │ │ ├── icon-40.png │ │ │ │ ├── [email protected] │ │ │ │ ├── [email protected] │ │ │ │ ├── [email protected] │ │ │ │ ├── icon-76.png │ │ │ │ └── [email protected] │ │ │ ├── Contents.json │ │ │ ├── LaunchImage.launchimage │ │ │ │ ├── Contents.json │ │ │ │ ├── [email protected] │ │ │ │ ├── [email protected] │ │ │ │ ├── [email protected] │ │ │ │ ├── [email protected] │ │ │ │ ├── [email protected] │ │ │ │ ├── [email protected] │ │ │ │ ├── Default-Landscape.png │ │ │ │ ├── Default.png │ │ │ │ ├── [email protected] │ │ │ │ └── Default-Portrait.png │ │ │ ├── LaunchScreen.AspectFill.imageset │ │ │ │ ├── Contents.json │ │ │ │ ├── [email protected] │ │ │ │ └── LaunchScreen-AspectFill.png │ │ │ └── LaunchScreen.Center.imageset │ │ │ ├── Contents.json │ │ │ ├── [email protected] │ │ │ └── LaunchScreen-Center.png │ │ ├── build.xcconfig │ │ ├── Info.plist │ └ └── LaunchScreen.storyboard ├── platforms // هنا المنصات ├── package.json └── package-lock.json اضافة منصة للمشروع لإضافة منصة للمشروع كل ماعليك هو الدخول لمجلد المشورع cd HelloWorld من ثم كتابة الامر التالي لإضافة منصة android tns platfrom add android او التالي لإضافة منصة ios tns platform add ios بناء المشروع لبناء المشروع لـ android اكتب tns build android او للبناء للـ ios اكتب tns build ios وسوف يبدا بعملية البناء مباشرة تعديل الصفحة الرائيسية لتعديل الصفحة الرائيسية تقوم بالتعديل على الملف main-page.xml و main-page.js المتواجدة في المجلد app <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page"> <Page.actionBar> <ActionBar title="تطبيقي" icon="" class="action-bar"> <!-- تعديل هنا --> </ActionBar> </Page.actionBar> <StackLayout class="p-20"> <Label text="اضغط على الزر" class="h1 text-center"/> <!-- تعديل هنا --> <Button text="أضعط" tap="{{ onTap }}" class="btn btn-primary btn-active"/> <!-- تعديل هنا --> <Label text="{{ message }}" class="h2 text-center" textWrap="true"/> </StackLayout> </Page> var createViewModel = require("./main-view-model").createViewModel; // يستخدم الملف main-view-model للتحكم في binding الصفحة function onNavigatingTo(args) { var page = args.object; page.bindingContext = createViewModel(); // الأدراج هنا } exports.onNavigatingTo = onNavigatingTo; كما تلاحظ فهو يتسخدم الملف main-view-model للتحكم في binding الصفحة اذًا لنعدل عليه var Observable = require("data/observable").Observable; function getMessage(counter) { if (counter <= 0) { return "رائع! لقد حصلة على ميدالية الضاغط لـ nativescript!"; } else { return counter + " ضغطه متبقية"; } } function createViewModel() { var viewModel = new Observable(); viewModel.counter = 42; viewModel.message = getMessage(viewModel.counter); viewModel.onTap = function() { this.counter--; this.set("message", getMessage(this.counter)); } return viewModel; } exports.createViewModel = createViewModel; التطبيق بعد التعديل استعراض التطبيق في الـ Emulator او في هاتفك للأستعراض في جهاز قم فقط بتوصيل هاتفك بالحاسوب من ثم اكتب الامر التالي للأستعراض للـ android tns run android ونفس الامر من دون توصيل هاتفك بالجهاز للأستعراض في الـ Emulator ونفس الأمر للـ IOS فقط استبدل android بـ IOS سوف اقوم بشرح الامر tns run بالتفاصيل لاحقًا ان شاء الله
  7. بسم الله رحمن الرحيم السلام عليكم ورحمة الله وبركاته الملحق SearchBar SearchBar او شريط البحث كما يوحي اسمه هو شريط مخصص للبحث خصائص الملحق 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; الناتج من هنا الملحق Switch الـ Switch او مفتاح التبديل هو مفتاح تبديل يرجع يقيمتين هما false و true ويستخدم عادتًا في اعدادات التطبيق الخاص بك خصائص الملحق Switch color لون الزر checked يحتوي قيمتين هما true و false true عندما يكون المفتاح مفعل false عندما يكون المفتاح غير مفعل style لتعيين خصائص CSS مخصصة له وحدة id لتعيين تعريف للملحق 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; الناتج من هنا
  8. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته شرح الملحقات الأربعة التالية Label, Button, TextView, TextField الخصائص المشتركة بينهم text للحصول على النص أو تعيينه. style لتعيين خصائص CSS مخصصة له وحدة id لتعيين تعريف للملحق textAlignment لمحاذات النص "initial" | "left" | "center" | "right" textDecoration الخط الذي تحت النص "none" | "underline" | "line-through" | "underline line-through" textTransform لتحول النص ( جميع الحروف صغيرة او كبيرة ) "initial" | "none" | "capitalize" | "uppercase" | "lowercase" whiteSpace المسافات البيضاء بين الحروف "initial" | "normal" | "nowrap" | رقم لتحديد المسافة isEnabled حالة تفعيل للملحق ( الكل ما عدا Label ) خصائص الملحق Label textWrap السماح للنص بالألتفاف على السطور ( الصفوف ) خصائص الملحق Button tap تشغيل دالة عند النقر على الزر خصائص الملحقان TextView و TextField المشتركة hint نص للتوضيح editable قابلية الحقل لتعديل النص الذي بداخلة true | false keyboardType نوع لوحة المفاتيح datetime | phone | number | url | email returnKeyType نوع زر الرجوع ( مثل "ارسال" , "رجوع" , "اذهب" ) done | next | go | search | send returnPress تشغيل دالة عند الضغط على زر الرجوع في لوحة المفاتيح secure حماية الحقل ( حقل مشفر ) true | false textChange تشغيل دالة عندما يتغير النص autocorrect التصحيح التلقائي للنص true | false مثال على الملحقات <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo"> <StackLayout> <Button text="مرحبًا" tap="{{ hello }}"/> <TextView text="مرحبًا بالعالم" editable="false" /> <TextView hint="عالم البرمجة" editable="true" /> <TextView hint="عالم البرمجة" text="دورة nativescript" editable="true" /> <TextField text="السلام عليكم ورحمة الله وبركاته"></TextField> <TextField hint="ادخل رقم الجوال الخاص بك" keyboardType="phone"></TextField> <TextField hint="ادخل كلمة السر" secure="true"></TextField> <Label text="الدرس الحادي عشر 11"></Label> </StackLayout> </Page> الناتج من هنا
  9. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته ملحقات واجهة المستخدم او UI Component ( كلمة UI هي اختصار لـ user interface ( واجهة المستخم ) ) هي ملحقات اصلي للجهاز مثل الازرار ومستعراض النصوص والحقل النصي تساعد للأدخال والاخراج من والى المستخدم الملحقات في nativescript Button زر Label مستعرض نص TextField حقل نصي للأدخال TextView حقل نصي متعدد الاسطر قابل للتمدد للأدخال SearchBar شريط البحث Switch محول ( مشابه للمفتاح الكهربائي ) للتفعيل او الغاء التفعيل ميزة مثلًا Slider منزلق لتحديد بين عدة قيم Progress شريط التقدم شريط يعرض ما بين قيمتين 0% و 100% ActivityIndicator مؤشر انتظار Image مستعرض صور ListView مستعرض لمصفوفة او لعدة حقول HtmlView مستعرض يعرض ناتج اكواد HTML WebView متصفح لصفحات الانترنت TabView مستعرض علامات تبويب SegmentedBar شريط ازرار متقسمة DatePicker لتحديد تاريخ معين من شريط التاريخ TimePicker لتحديد وقت معين من شريط الوقت ListPicker للتحديد نص من مصفوفة نصوص Dialogs نوافذ منبثقة مثل التنبيهات سوف اقوم بشرحها على دفعات ان شاء الله تقريبًا كل درس سوف يشمل من ملحقين الى 4 ملحقات كا حد اقصى
  10. او استخدام خاصية async و await في ES6 اسهل بكثر من الطريقة السابقة ولكن تحتاج لشرح منفصل ليستوعبها المتعلم
  11. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته التخطيط المرن او flex layout كما يوحي اسمه فهو تخطيط يعطيك مرونة اكثر في تخطيط الواجهه فهو يستخدم نفس الـ flex في CSS لتخطيط الواجهه خصائص التخطيط flexDirection لتحديد اتجاه المرونة للتخطيط يقبل القيم التالية row ( افتراضيًا ) تخطيط صفوف row-reverse تخطيط صفوف معكوس ( من اخر عنصر الى اول عنصر ) column تخطيط اعمدة column-reverse تخطيط اعمدة معكوس ( من اخر عنصر الى اول عنصر ) flexWrap التفاف العناصر على السطور nowrap (افتراضيًا) جميع العناصر تكون في سطر واحد wrap التفاف العناصر على عدة اسطر ( مماثل لتخطيط WrapLayout ) عندما يمتلى السطر ولا توجد مساحة للعنصر التالي فاينزل العنصر تلقائيًا من الاعلى الى الاسفل wrap-reverse مماثل لـ Wrap , الاختلاف : عندما يمتلئ السطر ولاتجود مساحة للعنصر التالي فايرتفع العنصر تلقائيًا للأعلى من الاسفل الى الأعلى justifyContent للتحكم بمحاذات العناصر داخل التخطيط flex-start (افتراضيًا) في بداية التخطيط flex-end في نهاية التخطيط center في منتصف التخطيط space-between اول عنصر يكون في بداية التخطيط واخر عنصر يكون في نهاية التخطيط وباقي العناصر يتم تقسم المساحة عليها بالتساوي space-around يتم توزيع المساحة بالتساوي على جميع العناصر مع مساحة على الأطراف ( المسافة التي بينهم غير متساوية ) space-evenly يتم توزيع المساحة بحيث يتباعد كل عنصرين (مع المساحة على الأطراف) بالتساوي ( المسافة الفاصلة بينهم متساوية ) alignItems محاذات العناصر على المحور flex-start ببداية المحور flex-end بنهاية المحور center بمنتصف المحور baseline محاذات بالنصوص العنصر ( للأسف لا تستطيع إستخدامها في nativescript ) stretch ( افتراضيًا ) كامل ارتفاع التخطيط alignContent لمحاذات الاسطر داخل التخطيط flex-start جميع الاطر تكون في بداية التخطيط flex-end جميع الأسطر تكون في نهاية التخطيط center جميع الأسطر تكون في منتصف التخطيط space-between اول سطر يكون في بداية التخطيط واخر سطر يكون في منتصف التخطيط وباقي المسافات الفارغة في التخطيط بين الأسطر يتم تقسيمها بالتساوي space-around يتم تقسيم المسافة الفارغة في التخطيط بالتساوي على جميع الاسطر والحواف stretch ( افتراضيًا ) الأسطر تمتد لتاخذ كامل المساحة الفارغة خصائص عناصر التخطيط order اولوية ترتيب العنصر في التخطيط ( افتراضيًا يتم توزيع العناصر بترتيبها في التخطيط ) flexGrow ( افتراضيًا هو 1 ) يعرف التخطيط بان العنصر ينموا flexShrink ( افتراضيًا هو 1 ) يعرف التخطيط بان العنصر يتقلص alignSelf ( افتراضيًا هي تتبع align-items المعرف في التخطيط ) تقوم بإضافة محاذاه للعنصر نفسه في التخطيط ( للتنويه استخدامها محدود مع نظام IOS ) flexWrapBefore تقبل true و false ( افتراضيًا هي false ) تقوم بالسماح للعنصر بالألتفاف داخل التخطيط مثال على التخطيط <Page xmlns="http://schemas.nativescript.org/tns.xsd"> <FlexboxLayout flexDirection="column"> <!-- Reverse the natural flow of items --> <FlexboxLayout height="22" flexDirection="row-reverse"> <!-- Use even flexGrow to achieve uniform grid --> <Label text="1" backgroundColor="#EEEEEE" flexGrow="1" /> <Label text="2" backgroundColor="#DDDDDD" flexGrow="1" /> <Label text="3" backgroundColor="#CCCCCC" flexGrow="1" /> <Label text="4" backgroundColor="#BBBBBB" flexGrow="1" /> <Label text="5" backgroundColor="#AAAAAA" flexGrow="1" /> <Label text="6" backgroundColor="#999999" flexGrow="1" /> </FlexboxLayout> <!-- Set flexGrow to accomodate into any extra space --> <ScrollView flexGrow="1"> <!-- Wrap excessive items on new lines --> <FlexboxLayout flexWrap="wrap" alignContent="flex-start"> <Label textWrap="true" text="أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ." /> <!-- Use flexWrapBefore to control explicit line wrapping --> <Label text="Gihub issue labels:" flexWrapBefore="true" fontSize="11" /> <Label text="S: High" flexWrapBefore="true" borderRadius="5" backgroundColor="red" margin="2" /> <Label text="T: Feature" borderRadius="5" backgroundColor="green" margin="2"/> <Label text="3 - In Progress" borderRadius="5" backgroundColor="gray" margin="2"/> <Label text="S: Ullamcorper" borderRadius="5" backgroundColor="red" margin="2" /> <Label text="T: Vulputate" borderRadius="5" backgroundColor="green" margin="2"/> <Label text="2 - Egestas magna" borderRadius="5" backgroundColor="gray" margin="2"/> <Label text="S: High" borderRadius="5" backgroundColor="red" margin="2" /> <Label text="T: Phasellus" borderRadius="5" backgroundColor="green" margin="2"/> <Label text="عالم البرمجة" borderRadius="5" backgroundColor="gray" margin="2" order="2"/> <Label flexWrapBefore="true" textWrap="true" text="أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ." id="description" /> </FlexboxLayout> </ScrollView> <FlexboxLayout> <Button text="&lt;" width="50" backgroundColor="gray" /> <!-- Set flexGrow to 1 accomodate into any extra space --> <Button text="إعادة النشاط" flexGrow="1" backgroundColor="darkgray" /> <Button text="&gt;" width="50" backgroundColor="gray" /> </FlexboxLayout> </FlexboxLayout> </Page> مصدر A Complete Guide to Flexbox
  12. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته بعد المقدمة عن nativescript شرح اليوم لطريقة تثبيته تحتاج تثبيت nativescript على جهازك لتتمكن من إنشاء المشاريع الجديدة وإستعراض وبناء تطبيق للمنصات الثلاث android و ios و windows phone المتطلبات android studio للبناء للـ android XCode ( يتطلب نظام ماك ) للبناء لنظام IOS محلي ليس بالضروره تحتاج XCode بإمكانك إستخدام Nativescript Sidekick للبناء لنظام IOS ( لكن يلزمك حساب مطور لعمل ذلك ) بإستخدام cloud build واستعراضة على جهازك بإستخادم QR Code https://www.nativescript.org/nativescript-sidekick npm و node.js لتثبيت nativescript خطوات التثبيت تثبيت node.js على جهازك وكذلك npm تثبيت nativescript وبعلم global لتستطيع إستخدامها عن طريق الطرفية تثبيت npm & node.js لأصحاب الويندوز والماك الطريقة سهلة جدًا كل ماعليك هو الولوج لموقع node.js وتحميلة البرنامج لنظامك nodejs.org/en/download ثم تضغط Download بعد تحميل الملف تتبع الخطوات التقليدية للتثبيت next > accept > next > install > close وتلقائيًا سوف يتثبت لديك npm مع node.js اما اذا كنت تملك لينكس فيمكنك تثبيت node.js و npm عن طريق الطرفية sudo apt-get install -y nodejs sudo apt-get install -y npm تثبيت nativescript بواسطة الطرفية ( terminal في ماك ولينكس او cmd في ويندوز ) قم بكتابة الامر التالي ( بصلاحية root في ماك ولينكس او الأداري في ويندوز ) npm install -g nativescript الان انت جاهز للتقدم في الدورة
  13. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته مقدمة عن إطار العلم nativescript ماهو nativescipt ؟ nativescript مكتبة عمل مفتوحة المصدر لبناء تطبيقات الهواتف المحمولة بإستخدام native UI للجهاز المستهدف بكود واحد لجميع المنصات nativescript تم بناء من قبل شركة telerik المملوكة لشركة Progress ( الغنيتان عن التعريف ) ماهي المنصات التي تستطيع البناء لها بواسطة nativescript ؟ nativescript يستطيع البناء للمنصات التالية IOS و ANDROID و WINDOWS UWP بكود واحد ماهي اللغات التي يستخدمها nativescript ؟ هناك مشروعان في nativescript الاول هو nativescript core ويستخدم XML و JavaScript أو Typescript و css أو sass والثاني المفضل لي هو nativescript with angular ويستخدم angular و typescript و css أو sass مالذي يميز nativescript عن المنصات الأخرى مثل react native و cordova و ionic ؟ يختلف nativescript عن ionic و cordova و phonegap بإنها تكنلوجيا مختلفة جدًا فهي تعمل في الوقت الحقيقي runtime وهي ليست تقنية web ولا تعمل داخل اطار ويب webview مثل تطبيقات cordova وايضًا nativescript و react native تستخدم native UI هذا سوف يعطيك اداء افضل وتمتاز nativescript عن react native بالوصول الكامل native apis اي بإمكانك كتابة كود java او objective c بإستخدام javascript فقط دون الحاجة الى بناء ملف jar وإضافته الى مشروعك مثال لكود objective c @interface NSObject + (instancetype)alloc; - (instancetype)init; @end @interface BaseClass : NSObject + (void)baseStaticMethod; - (void)baseInstanceMethod; @end @interface DerivedClass : BaseClass + (void)derivedStaticMethod; - (void)derivedInstanceMethod; @end تحويلة الى javascript function NSObject() { /* native call */ }; // Object.getPrototypeOf(NSObject) === Function.prototype NSObject.alloc = function () { /* native call */ }; // Object.getPrototypeOf(NSObject.prototype) === Object.prototype NSObject.prototype.init = function () { /* native call */ }; function BaseClass() { /* native call */ }; Object.setPrototypeOf(BaseClass, NSObject); BaseClass.baseStaticMethod = function () { /* native call */ }; BaseClass.prototype = Object.create(NSObject.prototype, { constructor: BaseClass }); BaseClass.prototype.baseInstanceMethod = function () { /* native call */ }; function DerivedClass() { /* native call */ }; Object.setPrototypeOf(DerivedClass, BaseClass); DerivedClass.derivedStaticMethod = function () { /* native call */ }; DerivedClass.prototype = Object.create(NSObject.prototype, { constructor: DerivedClass }); DerivedClass.prototype.derivedInstanceMethod = function () { /* native call */ }; هذا سوف يحل لك الكثير من المشاكل مثل إضافة لم تجدها ويريحك من بعض الإضافات الغير ضرورية ان شاء الله سوف احاول شرح طريقة التحويل من كود java او objective c الى javascript ما ميزات nativescript ؟ * nativescript من الاصدار 3 واعلى تستطيع إستخدام جميع الـ packages في npm داخل تطبيقك * يستخدم javascript و css و xml ( لغات هيكله وتصميم وبرمجة مالوفة لمطوري الويب ) * الوصول الكامل APIs للنظام المستهدف * بناء المشروع لثلاث منصات بكود واحد * يتوفر لديه مكتبة إضافات ضخمة plugins.nativescript.org * يتوفر لديه توثيق سهل ومبسط جدًا مع الامثلة بالصور والHكواد docs.nativescript.org مع API Reference * التحديث التلقائي للتطبيق في المستعرض بعد التعديل على الكود والحفظ دون الحاجة الى إعادة بناء التطبيق من جديد روابط خارجية: موقع nativescript: www.nativescript.org showcase لتطبقات تم إنشائها بواسطة nativescript: www.nativescript.org/showcases
  14. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته هذا التخطيط يقوم بترتيب العناصر حسب المساحة المتوفرة ويبدًا صف جديد عندما تكون المساحة غير كافية للعنصر خصائص التخطيط orientation التوجية وتقبل قيمتين هما horizontally أفقيا و vertically رأسيا افتراضيًا هو horizontally وitemWidth يستخدم لتحديد عرض العنصر في التخطيط وitemHeight يستخدم لتحديد ارتفاع العنصر في التخطيط مثال على التخطيط <Page xmlns="http://schemas.nativescript.org/tns.xsd"> <WrapLayout orientation="horizontal" width="210" height="210" style.backgroundColor="lightgray"> <Button text="تخطيط" width="70" height="70" backgroundColor="red"/> <Button text="الدوران" width="70" height="70" backgroundColor="green"/> <Button text="عالم" width="70" height="70" backgroundColor="blue"/> <Button text="البرمجة" width="70" height="70" backgroundColor="yellow"/> </WrapLayout> </Page> بإستخدام خاصية orientation راسي vertical <Page xmlns="http://schemas.nativescript.org/tns.xsd"> <WrapLayout orientation="vertical" width="210" height="210" style.backgroundColor="lightgray"> <Button text="تخطيط" width="70" height="70" backgroundColor="red"/> <Button text="الدوران" width="70" height="70" backgroundColor="green"/> <Button text="عالم" width="70" height="70" backgroundColor="blue"/> <Button text="البرمجة" width="70" height="70" backgroundColor="yellow"/> </WrapLayout> </Page> بإستخدام itemWidth و itemHeight <Page xmlns="http://schemas.nativescript.org/tns.xsd"> <WrapLayout orientation="vertical" itemWidth="50" itemHeight="50" width="210" height="210" style.backgroundColor="lightgray"> <Button text="تخطيط" width="70" height="70" backgroundColor="red"/> <Button text="الدوران" width="70" height="70" backgroundColor="green"/> <Button text="عالم" width="70" height="70" backgroundColor="blue"/> <Button text="البرمجة" width="70" height="70" backgroundColor="yellow"/> </WrapLayout> </Page>
  15. للتصحيح WrapLayout يتطلب بعض الخصائص شرحتها في الدرس الـ 8

عالم البرمجة

عالم البرمجة مقالات برمجة و دورات مجانية لإحتراف البرمجة هدفنا تبسيط البرمجة ونشرها بيد الكل بشكل ممتع ومتطور ومحدث بإستمرار لمواكبة جديد تطورات البرمجة الحديثة و المتقدمة بدون مقابل