شرح طريقة الانتقال والعودة بين الصفحات ونقل البيانات فيما بينهم – ( Segue, Unwind Segue )


مستوى المقال: متوسط

رغم انه المفترض في هذا الموضوع اتحدث عن طرق الاستخدام الخاطئ للـ Segue وتركيزه ينصب في شرح الـ Unwind Segue الا اني سوف أقوم بشرح الامرين لجعل الموضوع اشمل

 

 

ما هو الـ Segue ؟

الـ Segue هو عملية الانتقال بين صفحة (View Controller) الى اخر ويتم عن طريق ربط زر او Action موجود في الصفحة الاولى الى الصفحة الأخرى

 

اهم قاعده هنا الانتقال يكون من صفحة 1 الى صفحة 2 ولا يحصل انتقال بشكل عكسي أيضا !

هذا من اكثر الاخطاء شيوعاً عند المطورين الجدد !

لفهم الـ Segue بشكل صحيح سوف اشرحه على مراحل او طرق بالتدرج

 

الطريقة الاولى :

في هذه الطريقة فقط نقوم بالربط بين صفحة وأخرى وتستخدم الطريقة هذه بشكل نادر فقط لغرض عرض صفحة أخرى دون الحاجة لاستخدام اكواد او نقل معلومات من صفحة الاولى الى الثانية

 

والطريقة تكمن في التالي :

segue1.thumb.gif.d92528a9bdeb620f1babf3280c8791d3.gif

 

أولا : نقوم اول بإضافة 2 من View Controller

 

ثانيا : نقوم بإضافة Button في صفحة 1

 

ثالثا : نقوم بالضغط الـ Button + زر control ونسحب الـ Button الى الـ View Controller الاخر

 

رابعا : نختار Show

 

من امثله استخدام الطريقة هذه اذا اردت أن تعرض صفحة اتصل بنا او عن التطبيق, في هذه الصفحات فقط تعرض معلومات ولا تحتاج الا نقل معلومة من صفحة الى أخرى او تحتاج أن تقوم ببعض الامور قبل عملية الانتقال, لذا استخدام الطريقة هذه طريقة نادره

 

الطريقة الثانية :

 

الطريقة هذه تعتمد على موضوع الانتقال للصفحة الثانية بعد تنفيذ امر معين وبدون الحاجة الى نقل معلومات من الصفحه 1  الى الصفحة 2

 

لكي تفهم الفكرة بشكل صحيح ، لنفترض بأنك تعمل على صفحة "التسجيل حساب جديد" راح تحتاج تكتب التالي في Function الـ Button

  • تتأكد بأن المستخدم كتب جميع الحقول من اسم المستخدم والايميل والباسورد وإعادة كتابة الباسورد
  • تتأكد بأن هناك تطابق في حقل باسورد مع حقل إعادة كتابة الباسورد
  • تتأكد من تلبية شروط كتابة الباسورد على سبيل المثال بأن تم كتابة ٨ احرف
  • تتصل بالسيرفر
  • في حال تم الاتصال وحفظ بيانات المستخدم بنجاح هنا يتم الانتقال الي الصفحة الثانية !

 

هل لاحظت الفرق ؟

 

في الطريقة الاولى الانتقال مباشرة الى الصفحة الثانية ولكن في هذه الطريقة هناك أمور كثيره تحدث بمجرد ضغط المستخدم على الـ Button وتتم الانتقال اثناء حدوث امراُ معيناً وليس بشكل مباشر !

والطريقة تكمن في التالي :

 

نفس خطوات الطريقة الاولى بالضبط ولكن هنا يتم إضافة مُعرف (Identifier)

 

لاحظ الصورة التالية :

segue2.thumb.gif.f7d7739227f4c736d4470bdd57da0332.gif

 

وفي داخل Function الـ Button

نكتب التالي :


 

        performSegue(withIdentifier: "toView2", sender: nil)

 

لاحظ في السطر السابق كتبنا نفس المُعرف بالضبط الذي كتبناه في حقل الـ Identifier في الـ Storyboard

 

وأقصد هنا بالضبط  ، المسافة تفرق ، الحرف الكبتل والسمول أيضا يفرق ! بما يعني الأفضل أن تقوم بنسخه ومن ثم لصقه بدلاً من كتابته .

 

قد تتسأل ما الفائده من المُعرف ؟

 

المُعرف هو المسؤول عن توجهيه الـ View Controller الى  الـ View Controller  الصحيح.

 

في تطوير التطبيقات سوف تحتاج الي عملية انتقال مختلفة من نفس الـ View Controller قد يحتوي تطبيقك مثلا على زرين كل زر يوجه الى صفحه مختلفة فهنا المُعرف يجعل الـ Xcode يوجهك الى الصفحة الصحيحة.

 

الطريقة الثالثة :

في هذه الطريقة اذا اردت بأن تقوم بنقل معلومات من الصفحة 1 الى صفحة 2

الطريقة هذه أيضا نفس الطريقة السابقة من حيث انك تعطي مُعرف (Identifier) الفرق بأنه سوف تحتاج الى استخدام Function معين يقوم بوظيفة نقل المعلومات اثناء عملية الـ Segue.

هذا هو الـ Functionn الذي سوف تحتاج الى استخدامه:

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {         }

 

اين تضعه ؟

تضعه في الصفحة الحالية, فانت تريد نقل معلومة من صفحة 1 الى صفحة 2 فتضعه في صفحة 1

هنا تحتاج تعرف معلومة :

 

لنقل بيانات من صفحة الى اخرى سوف تحتاج الي متغير في الصفحة الأخرى لكن تحفظها به ولكي تتضح الصورة الان في صفحة تريد نقل معلومة معينه الى صفحة 2.

 

المعلومة هذه عباره عن String اذا سوف تقوم بإنشاء متغير من نوع String في صفحة 2 ومن ثم في داخل الـ Function السابق تستدعي المتغير وتحفظ القيمة الموجودة في صفحة1  الي المتغير في صفحة 2.

 

نعود للشرح

 

الان في الـ View Controller الاول نضيف Textfield فوق الـ Button ونربطه بملف الأكواد.

 

 

ومن ثم في الـ View Controller الثاني نضيف Lable لكن قبل ذلك نضيف Class من نوع View Controller ومن ثم نحدد الـ View controller  الثاني في الـ Stroryboard

ونختار الـ Class الذي أنشأناه بعدها نربط الـ Label بملف الاكواد

 

 

اصبح لدينا في الـ View Controller الاول فقط Button و Textfield وفي الـ View Controller الثاني لدينا Label

 

قبل العودة الى Function الذي اضفناه في ملف اكواد الـ View Controller الاول يتوجب علينا إضافة متغير من نوع String لذا نقوم باضافته

 

فيصبح شكل الـ StroyBoard بالشكل التالي :

Screen-Shot-2017-08-09-at-11_08.22-AM.thumb.png.c5281662dc9e5e0117e0dced3b05213b.png

 

ملف اكواد الـ View Controller الاول بالشكل التالي :


 

import UIKit 

class ViewController: UIViewController {  

@IBOutlet weak var textField: UITextField!   

override func viewDidLoad() {    
}            

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {      
}

}

 

ملف اكواد الـ View Controller الثاني بالشكل التالي :

 


 

import UIKit

class ViewController2: UIViewController {

var  text:String?  

@IBOutlet weak var label: UILabel!  

override func viewDidLoad() { 

super.viewDidLoad()    

label.text = text            
}

}

 

كما تلاحظ في الـ viewDidLoad اضفت السطر التالي

label.text = text

لجعل النص الذي سوف نجلبه من View Controller الاول يتم طباعته في View Controller الثاني

نعودة الان الى Function

 

الان نعود لملف اكواد الـ View Controller الاول

 

ونقوم بكتابة التالي

    override func prepare(for segue: UIStoryboardSegue, sender: Any?){
      if segue.identifier == "toView2" { 
       if let vc = segue.destination as? ViewController2 {  
         vc.text = textField.text!     
       }      
      }   
    }

 

لاحظ التالي اول سطر

segue.identifier

 

نكتب فيه مُعرف الـ segue كما قمنا بكتابته في الـ Stroyboard

 

السطر الثاني نقوم بكتابة اسمك الكلاس الـ View Controller الثاني في حالتي اسمه ViewController2

السطر الثالث نستدعي المتغير الذي أنشأناه في الـ View Controller الثاني ونربطه بمحتوى الـ Textfield لذا اثناء عملية الـ Segue سوف ينتقل النص الذي سوف نكتبه في حقل الـ Textfield الى الـ String الموجود في الصفحة الثانية ومن ثم في الـ View Controller الثاني سوف يتم طباعة الـ String في الـ Label

 

نقوم بتشغيل التطبيق ونرى النتيجة :

segue3.gif.41eab2caa619f7725e70d59d51edbf82.gif

 

هذه الطريقة الصحيحة لنقل البيانات من View Controller الى اخر وهيا الطريقة الأكثر استخداماً

 

الطريقة الرابعة :

 

الطريقة هذه هيا عباره عن دمج طريقة الثانية مع الثالثة

هناك أوقات تحتاج الى الانتقال الي View Controller اخر بعد حدث معين وفي نفس الوقت تريد فيها نقل البيانات الى الـ View Controller اخر

 

في هذه اللحظة سوف تحتاج الى الطرقتين بحيث تستخدم

        performSegue(withIdentifier: "", sender: nil)

 

وفي نفس الوقت تستخدم

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {    }

 

الـ Xcode ذكي بما فيه الكفايه

 

اثناء تنفيذ سطر

        performSegue(withIdentifier: "", sender: nil)

 

سوف يلاحظ وجود Function

override func prepare(for segue: UIStoryboardSegue, sender: Any?)

 

وبالتالي سوف ينتقل اليه أولا قبل تنفيذ الـ Segue وفقط للمعلومية prepare تعني تجهيز وبالتالي الـ Function يستعد لعملية الـ segue فيتم تنفيذ ما بداخله أولا !

الان انتهينا من جزء الـ Segue


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 

 

حان الوقت الانتقال الي موضوع الـ Unwind Segue وهو الموضوع الذي اردت التحدث عنه !

كل شخص جديد يتعلم برمجة تطبيقات الـ iOS وتحديدا عند تعلمه الـ Segue وطريقة نقل البيانات من صفحة الى أخرى يخطئه هذا الخطأ !!

اغلبية المبرمجين الجدد يخطئوا نفس الخطأ !

 

ماهو الخطأ الذي يقع به الكثيرون ؟

 

استخدام الـ Segue عند الرغبة في الرجوع الى الصفحة السابقة !

في هذه النقطة سوف أوضح لك الخطأ ولماذا يعتبر مصيبه عند عمله !!

افتراضاً نملك 4 صفحات و ٣ Button كل Button متصل بـ Segue ينقلك الى الصفحه الأخرى

 

كما في الصورة التالية :

 

Screen-Shot-2017-08-09-at-1_01.38-PM.thumb.png.46099b7d85b9d3d8621a5a78af5d105b.png

 

قد تتسأل ماهي المشكلة في الصورة السابقة ؟

 

الحقيقة هيا لحد الان لا توجد مشكلة !

لكن في الصورة التالية تكمن المشكلة !

المشكلة تكمن هنا عندما ينشأ المبرمج زر للرجوع الى الصفحة الرئيسية

 

كما في الصورة التالية :

 

Screen-Shot-2017-08-09-at-1_14.07-PM.thumb.png.d110d7d0c1bfe86571b44671ae1f489b.png

 

 

ماذا فعل هنا ؟

 

قام بربط زر الرجوع الى صفحة رقم 0 عن طريق الـ Segue !!

هذا هو الخطأ الذي اردت التحدث عنه !

 

هناك 3 مشاكل تسببه هذه المشكلة!

 

أولا : كثرة الـ Segue ذهابا وعوده تسبب مشكله لذا المطور في انه لا يعلم هذا الـ Segue مرتبط بأي View Controller ؟

ثانيا : مشاكل في الأداء واستهلاك موارد الجهاز بما يسبب بطئه عند استخدام التطبيق !!

ثالثا : مشاكل في Auto Layout ! ، من ضمن المشاكل التي تسببها ، مشاكل في الـ Auto Layout من الامور التي سوف تلاحظها رغم وضعك القيود بشكل صحيح الا انه لايزال يظهر خطأ في القيود !

 

 

لستُ مقتنعاً ؟

 

سوف أقوم الان بتشغيل التطبيق واستخدامه ذهاباً وعودة

 

شاهد الصورة التالية :

unwindsegue0.gif.b167001f39ddb272c12e5706b052abe2.gif

 

الان قم بالتالي ، لا تقوم بإيقاف تشغيل المشروع

 

واذهب لهذه الخانة :

Screen-Shot-2017-08-09-at-1_08.57-PM.png.e3d6326bac15cd927cde5254f7c7874a.png

 

وحرك باستخدام الماوس لملاحظة هيكل المشروع

 

لاحظ الصورة التالية :

Screen-Shot-2017-08-09-at-1_27.14-PM.thumb.png.37cf11cc45c1b58639bc9870554252af.png

 

نقوم الان بعمل Debug لهيكل المشروع من ناحية واجهة المستخدم

 

هل لاحظت كثرت الطبقات ؟

 

المفترض أن تظهر فقط 5 صفحات 4 صفحات خاصة بالـ View Controller والصفحه 5 للزر الموجود في اخر صفحة بحكم اني قمت بالتوقف عندها ! ولكن الذي يظهر هو 13 طبقة !

 

ما السبب ؟؟

 

السبب هنا بسبب طريقة ربط الـ Segue

 

ذكرت في بداية الموضوع الـ Segue يذهب من الصفحة 1 الى الصفحة 2 وليس العكس !

عند عمل العكس هذا ما سوف يحدث !

 

السبب عند عمل هذا الخطأ يقوم النظام على انشاء الصفحة مره أخرى وأخرى وأخرى كل مره يتم الضغط على زر الرجوع يتم انشاء الصفحة مره أخرى والنتيجة هي استهلاك موارد الجهاز !!

الان قبل أن اشرح الطريقة سوف انفذ الطريقة الصحيحة ومن ثم سوف اشرحها بعد تغير الطريقة الى الطريقة الصحيحة

 

لاحظ الصورة التالية في الـ Stroyboard:

Screen-Shot-2017-08-09-at-1_48.54-PM.thumb.png.04a7c3bcfe7c2564f7798398fee564bd.png

 

هل لاحظت ؟

لايوجد Segue ، للعودة لصفحة الرئيسية !

 

الان لاحظ الصورة التالية :

unwindsegue1.gif.20ac9810de0f2f9af05f5de00be98e61.gif

 

ومن ثم لاحظ هيكل المشروع :

 

Screen-Shot-2017-08-09-at-1_43.13-PM.thumb.png.911f86e2df16437d5347cfbeb918b930.png

 

اذا عملت مقارنه بين الصورتين هذه والصورتين السابقة

 

سوف تلاحظ امرين

 

أولاً : عند الضغط على زر العودة الصفحة الحالية تنزل الى الأسفل وتظهر الصفحة الرئيسية ! ، في حين عند عمل الطريقة الخاطئة تظهر الصفحة الرئيسية من الأسفل الى الأعلى !!

 

ثانياً : هيكل المشروع اصبح 5 فقط ! لم يتغير ولم يزداد عدده !

 

لماذا ؟

 

عند عمل الطريقة الخاطئة ، تقوم على انشاء الصفحة من جديد في كل مره فكل ما زاد وقت استخدامك التطبيق زادت عدد الصفحات وزاد استهلاك موارد الجهاز في حين عند عمل الطريقة الصحيحة ، تقوم على اغلاق الصفحة الحالية والعودة للصفحة التي تريدها ، وبالتالي لا يوجد أي زياده !

 

بعد فهم الفكرة واتضاح الفرق

 

نعود الى شرح الطريقة الصحيحة :

 

لكن قبلها اريد توضيح نقطه معينه اذا اردا الرجوع الصفحة السابقة السابقة هناك 3 طرق

 

الطريقة الاولى : استخدم هذا السطر بداخل اقواس الـ Button

dismiss(animated: true, completion: nil)

 

الزر ذا سوف يرجعك الى الصفحة السابقة فقط بما يعني اذا كنت في صفحة 3 سوف يرجعك الى صفحة 2 لا يمكنك العودة الى صفحة 0 او أي صفحة أخرى

 

الطريقة الثانية : عند استخدام الـ Navigation Bar

سوف يظهر زر العودة للصفحة السابقة بشكل تلقائي وأيضا مثل الطريقة الاولى سوف تعود فقط الى صفحة السابقة يمكن ملاحظتها في جميع تطبيقات النظام مثال تطبيق الاعدادات عندما تذهب لقسم عام او General سوف تلاحظ وجود زر في الأعلى يرجعك الى صفحة الرئيسية للإعدادات ، هذه تتم بشكل تلقائي بدون تدخل منك

 

معلومة :

 

لاحظ الصورة التالي :

 

unwindsegue2.gif.b09304411721b33e92aa87620d7ae511.gif
 

 

سوف تلاحظ عند استخدام الـ Navigation Bar واختيار نوع Show سوف تكون عملية الانتقال الـ Segue من اليمين الى اليسار والعوده سوف تكون العكس في حين اذا اخترت Present Modally سوف يظهر من الأسفل الى الأعلى والعكس عندها يعود للصفحة السابقة ! كما الحال في تطبيقنا

 

لكن بدون استخدام الـ Navigation Bar الـ Show يظهر كالـ Present Modally

 

الطريقة الثالثة :

 

الطريقة هذه تدعى Unwind Segue

 

ما الذي يميزها ؟

الذي يميزها هو التالي :

 

أولا : يمكنك العودة الى أي صفحة تريدها وليس ملزماً بالعودة الى الصفحة السابقة فقط !

بما يعني كما هو حال مثالنا سوف يمكنك العودة من صفحة 3 الى صفحة 0 بشكل مباشر

 

ثانيا:

يمكنك ارجاع بيانات من الصفحة الحالي الى الصفحة السابقة !

بما يعني سوف تستطيع ارجاع بيانات موجوده في صفحة 3 الى صفحة 0 او أي صفحة تريدها !!

معلومة :


الـ Unwind Segue تعني فك الـ Segue وبالتالي يجب أن يكون هناك Segue لتستخدم هذه الطريقة !

اذا استخدمتها بدون عمل Segue مسبقاً بين 2 من الـ View Controller او اكثر ، سوف يسبب Crash للتطبيق

 

الان نبدأ في شرح الطريقة:

 

كما شرحت الـ Segue سوف اقسم الـ Unwind Segue الى عدة طرق

 

طريقة الأولى :

ترغب فقط بالعوده الى صفحة معينه بدون ارجاع أي بيانات

وبالتالي تحتاج تفهم هذه النقطة :

اذا رغبت بالرجوع الى صفحة معينه سوف تحتاج الى كتابة كود في صفحة التي تريد الرجوع لها هنا نحن نريد العوده من أي صفحة الى الصفحة الرئيسية View Controller 0

فسوف نقوم بكتابة الكود التالي :

@IBAction func unwindToHome(segue:UIStoryboardSegue) {     }

 

في ملف اكواد  View Controller 0

 

ملاحظة :

-لا تحتاج الى كتابة أي اكواد في الداخل الاقواس ! على الأقل في الوقت الحالي !

- تستطيع تسمية الـFunction بأي اسم تريده ، انا قمت بتسميته unwindToHome

 

ومن ثم ننتقل الى الـ Storyboard ونفعل التالي مع صفحات 1 و  2و 3

شاهد الصورة :

unwindsegue3.thumb.gif.061b40138177d6bdeecc507f0a061561.gif

 

فقط هذا كل ما نحتاج الى فعله !

قم بتشغيل التطبيق وسوف تجده يعمل بمجرد الضغط على زر Return to Home سوف تجده يعود الى الصفحة الرئيسية وهيا View Controller 0

 

الطريقة الثانية :

ماذا اذا اردت تنفيذ امراً معيناً قبل ان يحدث الـ Unwind Segue ؟

تحتاج الطريقة دي في بعض الحالات ، مثلا صفحة Login المستخدم بعد ما يكتب اسم المستخدم وكلمة السر ويضغط زر Login سوف تحتاج الى الاتصال بالسيرفر وتتأكد انه المستخدم موجود في قاعدة بياناته وبعد التأكد ، تغلق الصفحة باستخدام  Unwind Segue وتحوله الى الصفحة الرئيسية

معلومة :
ما سبق ذكره مجرد مثال ، لأنه تستطيع أيضا استخدام سطر

dismiss(animated: true, completion: nil)

 

لأغلاق الصفحة فالمثال السابق يعتبر كطريقة أخرى لتنفيذ نفس الأمر, على أي حال الطريقة مشابه لطريقة الـ Segue من حيث تحتاج الى إعطاء مُعرف.

نعود للشرح :

 

اهم نقطه هنا هو فصل الربط الذي عملته في الطريقة الاولى بين الـ Button و Exit ولكن لا تحذف الـ  Function الذي كتبناه في View Controller 0
 

@IBAction func unwindToHome(segue:UIStoryboardSegue) {}

 

في هذه الطريقة سوف نربط الـ Viewcontroller نفسه مع الـ Exit

 

شاهد الصورة التالية :

 

unwindsegue4.gif.47d88df967a9912b085d44b467684bfb.gif

 

 

ومن ثم سوف نعطي للـ Unwind Segue مُعرف

شاهد الصورة التالية :

 

unwindsegue5.thumb.gif.eb2a7e6f98849b660e9bc368fb670d5b.gif

 

قمت باعطاء مُعرف home الان قم بربط الـ button مع ملف الاكواد ومن ثم استخدم نفس السطر الذي استخدمناه في الـ Segue

performSegue(withIdentifier: "home", sender: nil)

 

بالطريقة هذه تستطيع عمل أي امر تريده قبل حدوث الـ Unwind Segue

 

الطريقة الثالثة :

 

في هذه الطريقة الامر عائد اليك ، يمكنك عمل الطريقة الاولى وتنفذ الطريقة هذه معها او استخدام الطريقة الثانية مع هذه الطريقة.

فالطريقة الثالثة تشرح طريقة نقل البيانات من الصفحة 3 الى صفحة 1

 

بنفس درجة حاجتك الى استخدام الى الـ Segue لنقل البيانات أيضا سوف تحتاج استخدام Unwind Segue لنقل البيانات

 

من امثله استخدام الـ Unwind Segue لنقل البيانات, تطبيقات المحادثه مثل الـ Whatsapp عند استخدامك للتطبيق لأول مره يطلب منك اختيار رمز دولتك فعند الضغط عليه يوجهك لصفحة تختار فيها دولتك ومن ثم عند اختيار دولتك يعود الى صفحة كتابة رقم جوالك هنا حدث Unwind Segue بحيث تم نقل رمز الدولة من صفحة أخرى الى صفحة السابقة

 

نعود للشرح :

 

هل تذكر ماذا فعلنا عند نقل معلومات او بيانات من صفحة 1 الى الصفحة 2 باستخدام الـ Segue ؟ الطريقة مشابهه لحد ما ! نحن نريد نقل بيانات من صفحة 3 الى صفحة 0 لذا قبل أنا نبدأ سوف نفعل التالي:

سوف نضيف Textfield في الصفحة 3 ونضيف Label في صفحة 0 الي هيا الصفحة الرئيسية الذي نريد الرجوع اليها ونقوم بربطهم بملف الاكواد

شاهد الصورة التالية :

Screen-Shot-2017-08-10-at-1_24.21-PM.thumb.png.8a9a657d1a64689253fbd15b9d83123e.png

 

الان حان الوقت للكتابة في Function

@IBAction func unwindToHome(segue:UIStoryboardSegue) { }

 

الان كما قلنا سابقا نريد نقل النص من الـ Textfield الموجود في View Controller 3 الى الـ Label الموجود في View Controller 0 لذا نقوم بكتابة التالي :
 

 @IBAction func unwindToHome(segue:UIStoryboardSegue) { 
if segue.identifier == "home" {       
let vc = segue.source as! ViewController3 
label1.text = vc.text1.text      
}     
}

 

اول شيء نقوم بالتأكد من اسم المُعرف في حال كنت تتبع الطريقة الاولى لن يكون هناك اسم معرف الا اذا وضعته باختيارك لذا يمكنك حذف هذا السطر

if segue.identifier == "home" {}

 

وحتى أيضا اذا اتبعت الطريقة الثانية لن تحتاج هذا السطر! الا اذا كنت تريد ارجاع بيانات من صفحتين فأكثر فهنا يتوجب عليك التمييز بينهم عن طريق التأكد من اسم المُعرف على أي حال اذا لاحظت فالكود مشابه جدا من طريقة الـ Segue .

في الـ Segue نقوم بكتابته بداخل Function يسمى prepare وهنا بداخل Function الـ Unwind وأيضا في الـ Segue نكتب

segue.destination

as اسم الكلاس الذي نريد الانتقال اليه وفي الـ Unwind Segue نكتب

segue.source

as اسم الكلاس الذي سوف نعود منه لذا تقريبا نفس الفكرة الاختلاف في كلمة destination و source

اخيراً قم بتشغيل التطبيق

 

وشاهد النتيجة في الصورة التالية :

unwindsegue6.gif.a431d3e9e06e2677620f91b1d5a8a783.gif

 

وبكذا انتهينا من هذا الموضوع

 

في هذا الموضوع فهمت الطريقة الصحيحة لنقل البيانات بين الـ View Controllers وماهي الاستخدامات الخاطئة والفريق بين Segue و Unwind Segue.

قد تتسأل هل هذه هيا الطرق الوحيدة لنقل البيانات ؟

الاجابه هيا لا ، ما تم شرحه في الموضوع هو طرقتين لنقل البيانات Segue و Unwind Segue وهما اشهر واكثر طرقتين لنقل البيانات بين الـ View Controllers استخداماً

لكن هناك طرق أخرى أيضا !

 

باسل العمودي
  • تم تعديل بواسطه باسل العمودي


3


اراء المستخدمين


لاتوجد تعليقات لعرضها .



انشئ حساب جديد او قم بتسجيل دخولك لتتمكن من اضافه تعليق جديد

يجب ان تكون عضوا لدينا لتتمكن من التعليق

انشئ حساب جديد

سجل حسابك الجديد لدينا في الموقع بمنتهي السهولة .


سجل حساب جديد

تسجيل الدخول

هل تمتلك حساب بالفعل ؟ سجل دخولك من هنا.


سجل دخولك الان

Ads Belongs To باسل العمودي

  • ماهي قاعدة بيانات الـMongoDB؟
    في السابق كان الحديث حول قواعدة البيانات المعروفه و المتوارد بين اقطاب المبرمجين من مختلف الأصعدة ابتدا من web developers إلى الـsoftware developers على مختلف المنصات windows, OSX, Linux و جل الحديث كان يدور حول نوع واحد فقط وهو RDBMS Relational database management system مثل  MS SQL Server, IBM DB2, Oracle, MySQL, and Microsoft Access  التي تعتمد في حفظ البيانات داخل جداول ولكن في الآونة الأخيرة و بعد صدور عدد من JS Frameworks  و ارتفاع عدد مستخدمي لغة الجافاسكربت بدأت شركة 10GEN في العمل على قاعدة بيانات من نوع مختلف تماما عما سبق ذكرة وهي NoSQL تحت اسم MongoDB اي قاعدة بيانات لا توجد بها علاقة بين الجداول وتعتمد في حفظ البيانات كمستندات BOSN ويعد هذا النوع الأشهر بين عائلة الـNoSQL وهنا ننوه بأن جميع ما تعرفه عن الـSQL Databases قد يتغير فبالتاكيد لن يكون هناك كوريز بالطريقة التي اعتدت العمل عليها.
     
    1- أمثله
    وبما ان الكثير من المبرمجين لديه خلفية في الـMySQL سأقوم بمقارنة سريعة حول الأختلافات السطحية بين المونجو والـMySQL:
    اسم الـTable في الـMongoDB هو Collection اسم الـRow في الـMongoDB هو Document تعتمد قواعد بيانات الـRDBMS على الجداول كالنحو التالي:
     

     
    بينما قاعدة بيانات الـMongoDB تعتمد على BSON وهذا يعني Binary Encoding Of JSON Objects وتكون كالنحو التالي:
    { "_id" : ObjectId("57fe832b13e6a51130a23d2a"), "ID" : 1, "username" : "abdulla", "email" : "[email protected]" } { "_id" : ObjectId("57fe832b13e6a51130a23d2b"), "ID" : 2, "username" : "omar", "email" : "[email protected]" } { "_id" : ObjectId("57fe832b13e6a51130a23d2c"), "ID" : 3, "username" : "mohammed", "email" : "[email protected]" }  
    امثلة حول الفروقات في عمليات الـQueries مابين الـMongoDB و الـMySQL OR RDBMS ولنفترض بأن لدينا جدول و كولكشن يحتويان على عدد من الصفوف والدوكيومنتس فيهم معلومات حول مستخدمين
    عرض جميع المستخدمين من هم دون السن الـ24 SELECT * FROM users WHERE age < 24 db.users.find({"age": { $lt: 24 }}) // $lt = less than  
    عرض جميع المستخدمين الذين  اعمارهم مابين الـ20 والـ30 SELECT * FROM `users` WHERE `age` BETWEEN 20 AND 30 db.users.find({ age: { $gt: 20, $lt: 30 }}) // $gt = greater than  
    عرض المستخدمين الذين اسمائهم تحتوي على حرف A في الاول او الاخير او المنتصف لايهم SELECT * FROM `users` WHERE username LIKE %A% db.users.find({username: /A/})  
    و في حالة الإضافة INSERT INTO `users` (username,age,status) VALUES ('abdulla',25,'active') db.users.insertOne({username: "abdulla", age: 25, status: "active"})  
    ولكن هناك فارق كبير في هذه الكويري و بما ان قاعدة بيانات الـMongoDB ليست Relational بالتالي ليس هناك Schema محدده عند الإضافه فتستطيع مثلا إضافة document بمتغير col,field ليس موجود في الـdocument السابق او التالي في نفس الـCollection وبهذا يقال للـMongoDB بأن اهم مميزات هذا النوع من قواعد البيانات بأنه Flexible او Dynamic Schema  ومثال على ذلك:
    db.users.insert([ { username: { fname: "abdulla", lname: "bahraini" }, age: 25, status: "active" }, { username: "mohammed", age: 19, status: "not active" } ])  
    2- لماذا التحول الى MongoDB ( وجهة نظر )

     
    كما اسلفنا سابقا ومع صدور عدد من js frameworks وبالاخص Meanjs المعني ب expressjs , angularjs & nodejs بالاضافه الmongodb و توسع هذه الفريموركس بشكل ضخم و رهيب جدا ومنها النود التي اصبحت خطر داهم على لغة الphp مقارنة بالسرعة, الاداء الرهيب وتناغم المونجو مع هذه الفريموركس بشكل افضل سبب في توجه الكثير من المطورين الى المونجو.
     
    ليس عند هذا الحد وحسب بل نظرا الى سرعة المونجو حسب الاحصائيات تبين اهمه الانتقال من قواعد البيانات الاعتيادية الى المونجو.
    تجربة اضافه 10000 صف و دوكيومنت في MySQL و MongoDB .. نلاحظ الفرق في سرعة الاداء احتاج المونجو الى ثانتين لتنفيذ المهمه بينما الMySQL احتاج الى 3 دقائق تقريبا.
     


     
    3-التثبيت
    لتثبيت الـMongoDB قم بالدخول على الرابط واختر ما يناسب نظام جهازك
     
    بعد التثبيت إن كنت  من متسخدمي الوندوز انشأ مجلد في داخل الـC (في حال تم تثبيت المونجو في السي)
     
    أضف المتغير التالي في PATH Environment وتجده في المسار التالي
    this pc >> proprieties >> Advanced System Settings >>  Advanced tab >> Environment Variables >> in System Variables find PATH then Click Edit
     
    افتح الـCMD واكتب الكوماند التالي لتفعيل خدمه الـMongoDB في جهازك وستعمل على بورت 27017 بشكل افتراضي
     
    ثم افتح CMD أخر واكتب الكوماند التالي للدخول على MongoDB SHELL
     

     
    بالتالي ستكون داخل الـMongoDB SHELL وتستطيع التعامل معه من خلال الاوامر المباشرة وللإطلاع اكثر اكتب help
     
    مستوى المقال: مبتدئ

    بواسطه AbdullaScript , في

  • المستوى: مُبتدأ/متوسّط
     
    يُمكن الاستفادة من مكتبة Multer في nodejs لرفع الصور والملفّات إلى السيرفر، فبأسطر برمجية بسيطة يُمكن رفع الملفات التي قام المُستخدم بتحديدها
    let app = require("express")() let multer = require("multer") let upload = multer({ dest: 'uploads/' }).any() app.get("/", (req,res)=>{ res.send("Teting...") }) app.post("/upload", (req, res)=>{ upload(req,res, (err)=>{ if (err) throw err }) res.send(req.files) }) app.listen(3000, ()=>{ console.log("Let's Upload....") }) الكود السابق يقوم باستلام الملفّات التي يُرسلها المستخدم إلى المسار /upload ليقوم برفعها ثم طباعة اسم الملف المُستلم. لكن وبعد تنفيذه قد تتفاجئ بأن عملية الرفع تجري بنجاح، إلا أن الاسم لا يظهر ويتم إرسال مصفوفة فارغة على الرغم من أن عملية الرفع تمّت دون مشاكل.
    السبب في ذلك هو طبيعة Nodejs، والتي سبق وأن تحدّثت عنها في مقال سابق بعنوان "تنفيذ الطلبات بتسلسل وترتيب في Nodejs باستخدام Async/Await". انصحك بقرائته لفهم آلية عمل إطار العمل بشكل كامل.
    ما يحدث على أرض الواقع هو أن النظام يبدأ بالرفع، ولأن تنفيذ المهام في nodejs يتم بشكل متوازي لتجنّب تأخير الرد على طلب المستخدم، سيقوم النظام فورًا بطباعة محتويات مصفوفة الملفّات req.files، التي ستكون فارغة بالفعل لأن النظام لم ينتهي بالأصل من عملية الرفع. والحل في هذه الحالة هو استخدام async/await ليُصبح الكود من الشكل:
    let app = require("express")() let multer = require("multer") let upload = multer({ dest: 'uploads/' }).any() app.get("/", (req,res)=>{ res.send("Testing Routes.....") }) let uploadPromise = (req, res)=>{ return new Promise((Resolve, Reject)=>{ upload(req,res, (err)=>{ if (err) Reject(err) Resolve() }) }) } app.post("/upload", async(req, res)=>{ try{ await uploadPromise(req, res) res.send(req.files) }catch(uploadErr){ throw uploadErr } upload(req,res, (err)=>{ if (err) throw err }) }) app.listen(3000, ()=>{ console.log("Let's Upload....") }) حاول تنفيذ الكود السابق وسترى أن اسم الملف سيظهر دون مشاكل لأن النظام قام أولًا برفع الملف ثم قام بطباعة الاسم، وهذا يعني أن المصفوفة لم تعد فارغة بشكل كامل. الفيديو التالي يشرح الفرق بشكل عملي:
    أما الراغبين بتحديد لاحقة الملف أو قبول نوع مُحدّد من الملفات فهم بحاجة لتعديل بعض جزئيات الكود، ولتجنّب تعقيد الأفكار ما بين Async/Await، سأقوم باستخدا مثال بسيط عن Multer.
    let app = require("express")() let multer = require("multer") let upload = multer({dest: "uploads"}) app.post("/", upload.single("photos"), (req,res)=>{ res.send("OK...") }) app.listen(3000, ()=>{ console.log("Ready to upload...") }) الكود السابق يشرح طريقة رفع ملف إلى مُجلّد uploads باستخدام multer، فعند طلب الرابط domain.com/ باستخدام POST فإن النظام سيأخذ الملف الموجود في الحقل photos وسيقوم برفعه. لكن ماذا لو أردنا تغيير الاسم أو اختيار اللاحقة؟ الأمر يتم من خلال ميثود موجودة داخل multer تُعرف بـ diskStorage ليُصبح الكود من الشكل
    let app = require("express")() let multer = require("multer") let storage = multer.diskStorage({ destination: function(req, file, cb){ cb(null, "uploads") }, filename: function(req, file, cb){ let ext = file.mimetype.split("/") ext = ext[ext.length-1] cb(null, file.originalname + "-"+Date.now()+"."+ext) } }) let upload = multer({storage:storage}) app.get("/", (req, res)=>{ console.log(Date.now()) }) app.post("/", upload.single("photos"), (req,res)=>{ res.send("OK...") }) app.listen(3000, ()=>{ console.log("Ready to upload...") }) قُمنا في الميثود بتعريف خاصيّتين الأولى هي destination الخاصّة بتحديد مكان الرفع، والثانية هي اسم الملف. الشرط الوحيد في الخصائص داخل multer هو استخدام دالة cb، وهي اختصار لـ Call Back لتمرير النتيجة التي نرغب بها.
    في مثالي في الأعلى قُمت بفحص نوع الملف باستخدام الـ mimeType الخاص به، فلو كان صورة سيظهر بالشكل image/jpeg أو image/png وهكذا. بعدها قمت بإضافة تلك اللاحقة للاسم الذي يُمكنك تسميته كيفما تشاء. أما بخصوص رفع نوع واحد من الملفات دونًا عن الغير فهذا مُمكن عبر تعديل السطر الخاص بتعريف upload ليُصبح من الشكل 
    let upload = multer({storage:storage, fileFilter: function(req, file, cb){ if (file.mimetype != "image/jpeg"){ return cb(null, false) } cb(null, true) }}) قُمنا بإضافة ما يُعرف بالـ fileFilter، وهي خاصيّة موجودة في multer قُمنا فيها بفحص نوع الملف مرّة أُخرى عبر mimeType وفي حالة عدم مُطابقة الشروط نقوم برفض الملف من خلال استخدام إعادة الـ callback فارغ مع false. بهذه الحالة سيقفز النظام عن الملف وسيتجاوزه.
    الفيديو التالي يشرح كل شيء
     
    في حالة وجود أي استفسار يُمكن تركه في التعليقات أو مُراسلتي عبر حسابي في تويتر @FerasAllaou
    مستوى المقال: مبتدئ

    بواسطه feras , في

  • السلام عليكم ورحمة الله وبركاته 
    طرحنا مسابقة عالم البرمجة للنقاش الهادف ، و هدفنا إثراء المحتوى العربي في مجال البرمجة ، فاز معنا الطرح المتميز و المفيد حيث قام بتقييم المقالات وترقيتها فريق عالم البرمجة سنذكر بهذه المقالة الفائزين معنا ، و مقالاتهم ، و نشكرهم على ماقدموا من فائدة للجميع ، و إثراء المحتوى العربي في البرمجة.
     
    الفائزون في شهر January 2018
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
    المقال الفائز:
     
     
    في الختام:
    هدفنا في موقع عالم البرمجة إثراء المحتوى العربي في مجال البرمجة ، و تعزيز حب المساعدة بين المبرمجين تستطيع كتابة ماتحب في ساحات النقاش ، و يمكن تكون احد الفائزين معنا  بمسابقة عالم البرمجة للنقاش الهادف فهي مازالت مستمره ايضا تستطيع مساعدة المبرمجين بالإجابة عن أسئلتهم ، و حل المشاكل التي تواجههم بقسم سؤال وجواب ؛ لتكون مرجع لبقية المبرمجين شعارنا في عالم البرمجة "إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة." -ابن القيم-  وممكن تستفيد من
    حبيبي القارئ اعلم ان فريق عالم البرمجة يصب كل جهودة لمساعدة المبرمجين الذين يخصصون من وقتهم لنشر العلم المفيد ويساعدون الغير ويارب يقدرنا نوقف معكم ونساعدكم قد مانقدر.
    مستوى المقال: مبتدئ

    بواسطه Ali Majrashi , في

  • بسم الله الرحمن الرحيم
    السلام عليكم ورحمة الله، كيف حال الجميع؟ عساكم بألف خير و عافية.
    سأحاول باذن الله البدأ في سلسلة جديدة حول تعلم أساسيات رياكت (React) و (RN = React Native) كما تعلمون هي مكتبة عرض (View) أطلقتها شركة الفيسبوك لبناء واجهاتك البرمجية (User Interfaces)  بطريقة سلسة و سهلة مبنية على نظام (Virtual DOM). و أول نسخة رسمية منها بتاريخ مارس 2013. و لما نقول أنها مكتبة عرض ليست اطار عمل (MVC) ركّز هنا جيّداً أخي القارئ؛ حيث تمثل هي حرف (V) فقط لا تقدم خدمة المتحكم (Controller) و لا (Model).
    بداية تعلمك React يصادفك شئ جديد عند كتابة أول مكوّن (Component's) حيث أنها تعود (returning) بصيغة تشبه صيغة HTML! ربما لم تلاحظها في مكتبات أو أطر عمل أخرى. تسمى بالـ JSX
    فما هي يا ترى JSX ؟ 
    JSX عبارة عن صيغة (syntax) أقول أُخترعت لمكتبة React التي تبدو مشابهة جداً لـ xHTML التي تمكنك من انشاء عناصر واجهتك البرمجية (Create Elements) بسهولة و يسر عن طريقها بدلاً من استعمال وضائف (functions) تستدعيها يدوياً لتنفذ مهمة معيّنة. ربما هذه نقطة مبهمة للبعض لكن ستفهمها بعد قليل باذن الله.
    من المهم أن تعلم أن جميع مكونات React المبنية بصيغة JSX تترجم من شفرة لشفرة (transpiler) الى تعليمات جافاسكربت حقيقية (Real JavaScript) باستخدام مكتبة تدعى بابل (Babel) تقوم بتحويل الرياكت الى شفرة ES5 القديمة لتشتغل على جميع المتصفحات (حتى القديمة منها).
    لنكتب مثالا بسيطاً بالـ JSX : 
    return <span> أهلا بعالم البرمجة! </span>; هل لاحظت سهولة كتابة جملة، و ارجاعها للظهور في المصتفح بكل سهولة مرفقة بكلمة (Return). تخيّل لو كتبناها بصيغة ES5 القديمة؟! 
    return React.createElement( 'span', {}, 'أهلا بعالم البرمجة!'); كم سطراً كتبناه لنعيد الجملة للظهور باستخدام جافاسكربت طبيعية! في هذا المثال استعملنا وظيفة (function) تسمى بـ React.createElement صيغتها كالتالي: 
    React.createElement( string|element, [propsObject], [children...]) ماذا لو أردنا كتابة عدة جمل متفرقة بداخل الشفرة البرمجية! ستكون هكذا بلا شك!
    React.createElement('div', {}, React.createElement('div', {}, 'text1'), React.createElement('div', {}, 'text2', ) ); لكن لسهولة JSX و هذا ما تميّزت به شركة الفيسبوك صراحة في مكتباتها البرمجية، الشفرة السابقة مثلاً باستخدام JSX : 
    function text1() { return <span>text1</span>; } function text2() { return <span>text2</span>; } هنا نستنتج مرة أخرى، أن JSX رائعة جدا و اختزال (shorthand) لكثرة الشفرات البرمجية التي تؤدي نفس الوظيفة. مما يكلفك وقتا اضافيا و كثرة المشاكل (bug's) عند تنقيح برمجياتك و تطبيقاتك؛ هذا كود شامل و أوسع، تلاحظ أنه يمكنك من تقسيم واجهاتك البرمجية عبر مكونات مختلفة و التحكم بها كلٌ على حِدة.
    من الثلاث خصائص المتوفرة في JSX هي : 
    العناصر المتداخلة (Nested elements): حيث يمكنك الجمع بين عدة عناصر (Multiple elements)  في حاوية واحدة (container element) كـ <div> مثل المثال الذي بالأسفل.
    السمات (Attributes): داخل كل عصنر div لك أن تضيف وظائف متعددة كـ (className، selected، style) ..الخ. 
    تعبيرات الجافاسكربت (JavaScript expressions): يمكنك اضافة تعابير (ليست شرطية statements)  داخل JSX كعمليات الحساب و المهم أن تكون ضمن قوسين {} .
    import React from 'react'; class App extends React.Component { render() { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> <div> <h1>{10+1}</h1> </div> <div style={{ height: 10 }}> Hello World! </div> ); } } export default App; في التعبيرات ذكرنا أنه لا يمكن استخدام التعابير الشرطية كـ if و else باستثناء التعبير الشرطي الثلاثي: { i === 1 ? 'true' : 'false' }  مثال : 
    import React from 'react'; class App extends React.Component { render() { const i = 1; return ( <div> <h1>{ i === 1 ? 'true' : 'false' }</h1> </div> ); } } export default App; من النصائح التي أقدمها و لا يجب عليك نسيانها: جميع أسماء المكونات (components) تكتب بحروف صغيرة (lowercase) التي تكون مدمجة بـعناصر HTML أو SVG كـ (div, ul, rect, etc.) و لا تنسى اغلاق العناصر بأوسمتها (Close Every Element) مثال مبسط: 
    // DO THIS: return <br/>; return <input type='password' .../>; return <li>text</li>; // NOT THIS: return <br>; return <input type='password' ...>; return <li>text; هذه أهم أساسيات JSX التي يجب على كل شخص معرفتها لمحبي تعلم ReactJS و RN عموماً. أتمنى تكون مفهومة للجميع. 
    و السلام عليكم.
    مستوى المقال: مبتدئ

    بواسطه عبدالهادي , في

  • بسم الله الرحمن الرحيم
    السلام عليكم ورحمة الله وبركاته
    تعرفنا في بداية سلسلة مواضيعنا على طريقة من طرق تخزين البيانات وهي القوائم سواء الأحادية أو الثنائية، كما ونعلم بأن هناك
    طريقة أخرى احفظ مجموعة البيانات وهي أبسط طريقة والتي تتمثل في المصفوفات سواء المصفوفات العادية أو مصفوفات القوائم.
    في هذا الدرس سنتعرف على أحد أفضل الطرق في حفظ البيانات والتي تعتبر من الأفضل من ناحية العرض أو البحث وغيرها
    من الأمور المتعلقة بهذه المجموعة من البيانات. كما هو الحال في القوائم فإن الأشجار لديها أكثر من نوع وكل واحد منهم له خواصة واستخداماته.
    في هذا الدرس سنتعرف على أحد أنواع الأشجار وهو الأشجار الثنائية.
     
    ماذا نقصد بالأشجار الثنائية (Binary Trees):
    هو نوع من أنواع تمثيل البيانات ويتكون من مكونين أساسيين هما العقد (Nodes) و الأقصان (Arcs). 
    عندما نقوم بتمثيل هذه الشجرة فإننا نقلب مفهومها فيكون الجذر (Root) في الأعلى والأقصان في الأسفل.
    سميت بالأشجار الثنائية لأنه كل عقد لديه عقيدين يرتبط فيهم وهما أبنائه ولديه والد واحد.
    هناك بعض المصطلحات التي يجب أن نتعرف عليها قبل الشروع الى صلب الموضوع:
    - العقد (Node): وهو كل عنصر موجود في الشجرة، وهو المكان الذي يتم حفظ البيانات داخله.
    أنواع خاصة من العقد (Nodes):
                   - الجذر (Root): وهو العنصر الذي ليس لديه والد أي أنه أعلى عنصر في الشجرة. وكل شجرة تحتوي على جذر واحد فقط.
                   - الأوراق (Leaves): وهذه هي مجموعة العقد التي ليس لديها أي أولاد. أي أنها في طرف الشجرة.
    - القصن (Arc): هو الرابط الذي يربط العقد بين بعضها وهو ذي اتجاه واحد من الأعلى الى الأسفل.

     
    يختلف مفهوم الشجرة الثنائية Binary Tree  حيث أن بعضها لا تحقق بعض الشروط مما يؤدي بها الى أن تكون عبارة عن قائمة عادية
    لكن الأنواع الأخرى تحتوي على شروط التي تجعلها شجرة فعالة بأكبر قدر ممكن و تسمى بـ Binary Search Tree وهذا اساس جميع ما يلي.
     
    تمثيل الشجرة الثنائية (Binayr Tree):
    ١. عن طريق المصفوفات (ArrayLists): وهذه الطريقة لديها مشاكلها كما ذكراناها سابقاً.
    ٢. عن طريق القوائم الثنائية (Linked lists): وهذه هي الطريق الأمثل لتمثيل الشجر.
     
    أكواد الشجرة الثنائية (Binary Tree):
    أ- إنشاء كلاس خاص بالعقد (Nodes) :
    هذا الكلاس يسمى بـ BSTNode وهو كالتالي:
    public class BSTNode { protected int key; protected BSTNode right, left; public BSTNode(){ this(0); } public BSTNode(int k){ this(k, null, null); } public BSTNode(int k, BSTNode r, BSTNode l){ this.key = k; this.right = r; this.left = l; } public void addRight(BSTNode r){ this.right = r; } public void addLeft(BSTNode l){ this.left = l; } } هذا الكلاس يحتوي على المتغيرات التالية:
    - Key: وهو من نوع و int وهو المكان الذي يتم حفظ البيانات داخله.
     - right & left: وهما القصنان (Arcs) والذان يربطان العقد بأبنيه اليمين والشمال.
    كما نرى فإننا نستطيع إنشاء عنصر من هذا الكلاس سواء كان في بيانات أو لا. لديه أولاد أولا.
    كما وأنه لدينا ميثودين نستخدمها لإضافة ابن لليمين أو لليسار.
     
    ب- انشاء كلاس الشجرة الثنائية (Binary Search Tree):
    public class BST { private BSTNode root = null; public BST(){ } public void clear(){ this.root =null; } public boolean isEmpty(){ return root == null; } public void visit(BSTNode n){ System.out.println(n.key + " "); } } هنا نقوم بانشاء الهيكلة الأساسية للشجرة ويحتوي على التالي:
    - root: الجذر وهو رأس الشجرة والوحيد الذي يربطنا بكامل عناصر الشكرة. وفي بداية انشاء الشجرة يكون الجذر فاضي.
    لدينا الكثير من الميثود لكن سنذكر هنا الأشياء الأساسية ونترك الباقي للدرس القادم بحيث أنها تحتوي على الكثير من التفاصيل:
    * clear(): تستخدم لتفريغ الشجرة من البيانات؛ وبما أن الجذر هو الرابط الوحيد لعناصر الشجرة فإن حذف الجذر سيؤدي الى حذف الشجرة كلها.
    *isEmpty(): وستخدم للاستعمال اذا ما كانت الشجرة خالية أو لا. ترسل true في حال كانت الشجرة خالية.
    *visit(): تستخدم لطباعة قيمة القيمة داخل العقد المرسل.
     
    خلال الشرح القادم إن شاء الله سنتطرق لاضافة وحذف عناصر من الشجرة، كذلك كيف نقوم بطباعة جميع عناصر الشجرة.
     
    اسأل الله العلي العظيم بأني وفقت لاصال المعلومة بابسط طريقة
     
    في حفظ الله
    مستوى المقال: متوسط

    بواسطه Abather , في

  • Ads Belongs To باسل العمودي

    عالم البرمجة

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