صندوق ادخال في علبة حوار _ Sketchware

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

في هذه التدوينة اقدم لك فيها كيف تقوم بصنع تطبيق هذا التطبيق يوجد به زر عند الضغط على الزر يظهر لك علبة حوار وهذه العلبة حوار تحتوي على صندوق ادخال وبأمكانك اظهار النص الذي الذي كتبته في صندوق الادخال في التطبيق الان نبدأ الشرح على بركة الله .  
                                                           
الشرح 
اولا : نضيف (Linear"H) في صفحة التصميم وهي (VIEW) ومن خلال خصائصها نضغط على خاصيةGravity ونختار (right) .
ثانيا : نضيف textview ونغير النص بداخله وذلك بالضغط على خاصية text من texview1 الى مثلا اسمك للملاحظة اضفنا هذه الحاجة لتُظهر النص الذي كُتب بعد الكتابة والضغط على زر موافق الموجود في علبة الحوار  .
ثالثا : نقوم باضافة زر (Button) ومن خلال الخصائص نضغط على خاصية text نغير النص من button1الى تعديل للملاحظة اضفنا هذا الزر ليقوم باظهار صندوق الادخال في علبة الحوار .
رابعا : نتوجه الى الصفحة الخاصة باضافة المكونات وهي (COMPONENT) ونضيف علبة حوار (Dialog)  ونقوم بتسميتها (dialog) .

* نبذة مختصرة عن المكون (Dialog) في نهاية الشرح .

خامساندخل الى الحدث الخاص بالزر (Button) ونقوم باضافة البلوكات :
باللون الازرق توجد في (component) .
باللون الاخضر عن طريق operator اخر بلوك وهو (add source directly) ونضيف الاوامر الموضحة ادناه في الصورة .


سادسا : هذا الكود الاول يضاف بعد بلوك  (set title)

* نبذة مختصرة عن (set title) في نهاية الشرح . 


final EditText edittext1= new EditText(MainActivity.this);
LinearLayout.LayoutParams lpar = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
edittext1.setLayoutParams(lpar);
dialog.setView(edittext1);


ما الكود اعلاه ؟
هذا الكود يقوم بانشاء صندوق ادخال وايضا يقوم بعرض في صندوق الادخال في علبة الحوار والدليل انه في نهاية الكود اعلاه يحتوي على الامر dialog.setView(edittext1); فمثلما تلاحظون ان الكود يحتوي على dialog وهو الاسم الخاص بمكون Dialog  .

لماذا قمنا بأضافة علبة حوار في صفحة اضافة المكونات ؟
لأنه الكود السابق ذكرنا ونذّكر انه يقوم بانشاء صندوق ادخال وبنفس الوقت يعرضه في علبة حوار لانها في نهاية الكود تحوي على الاوامر dialog.setView(edittext1); فهنا dialog هو الاسم الخاص بالمكون Dialog اما edittext1 فهو الايدي الخاص بعلبة الحوار التي انشأناها .

سابعا : هذا الكود الثاني يضاف داخل بلوك ( تم )


textview2.setText(edittext1.getText ());

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

* نبذة مختصرة عن المكون (Dialog) 
يستخدم هذا المكون في استخدامات عديدة  في التطبيقات فمنها من تستخدمه كعلبة حوار للخروج من التطبيق بعد الضغط على زر ما موجود في التطبيق او عند الضغط على زر الرجوع الموجود في التطبيق وايضا بعض التطبيقات تحتوي على زر حول فاحيانا زر حول عند االضغط عليه يظهر علبة حوار ومكتوب فيها اما حول التطبيق او الخ ...
* نبذة مختصرة عن لاينر H 
يستخدم هذا التخطيط لترتيب الحاجيات او التخطيطات بشكل افقي فعند اضافتك لتخطيط او حاجة ما سيتم ترتيبها بشكل افقي تلقائياً فهذا هو عمل اللاينر H .
* نبذة مختصرة عن الزر (Button) 
يستخدم هذا الزر لتنفيذ اوامر معينة حسب ضغطة المستخدم فاذا قام بالضغط على الزر فيقوم بتنفيذ الاوامر الموجودة في الحدث عند الضغط اما اذا قام المستخدم بالضغط المطول على الزر فيقوم بتنفيذ الاوامر الموجودة في الحدث عند الضغط المطول فهذا احداث الزر ويوجد اخر حدث وهو عند اللمس .
* نبذة مختصرة عن البلوك ASD
هذا البلوك المستخدم في اضافة الاكواد لمشروعك ASD وهو المختصر لـ add source directly يعوض استخدامه عن البلوكات المفقودة في التطبيق فنريد مثلا تكبير حجم الخط فلا يوجد بلوك لتغيير حجم الخط فهنا يحل هذ البلوك بدلاً من البلوكات المفقودة والمطلوبة .
* نبذة مختصرة عن (set title) في نهاية الشرح . 
هذا البلوك لا يظهر الا عندما تضيف المكون Dialog وهو يختص بالعنوان لعلبة الحوار فمثلا بعض التطبيقات عند الضغط على زر لرجوع الخاص بالهاتف تظهر علبة حوار وهي كالتالي :
عنوانها > خروج
النص > هل انت متأكد من الخروج من التطبيق .
الازرار نعم للخروج ولا لعدم الخروج .

> اتمنى الشرح مفهوم السلام عليكم ورحمة الله 
المقالة التالية المقالة السابقة
لا توجد تعليقات
اضـف تعليق
comment url