بسم الله والحمد لله والصلاة والسلام على رسول الله
طيب اليوم إن شاء الله بنات هنكمل في موضوع ال
graphical user interface و هنكمل شغلنا هو نعمل
review بسيطة للـ layout و ننتقل لـ three components
جداد و هم هيكونوا أول components من الـ graphical
user interface اللي هنستخدمهم بعد الـ frame و
البناء كنا اتفقنا المرة الماضية أن أنا في عندي للـ
frame والـ panel بما أن الـ Java ما بتحتويش بالأساس على
form designer فبقى راحوا أفرغوا لنا شغلة بيسموها
layout manager و الـ layout manager كان هدول على
ثلاث أشكال الـ layout الأول كان بيعتمد على الـ flow
مفهوم الـ flow أنه يتم تقسيم أو يتعامل مع العناصر
اللي بتوضع على الشاشة Element Sequentially واحد ورا
الثاني و أتعامل معاه نظام الأسطر أضفت الـ component
الأولى الثانية الثالثة الرابعة و هكذا لما ينتهي
السطر يتبقى اللي فيه متسع لـ new component ينزل على
الـ component اللي بعدها و اتفقنا بشكل عام أن الـ
layout managers هي اللي هتتحكم بالـ size و الـ
position control الـ size والـ position إيش
يعني؟ لحظة أنه لما رسمت الـ component رسمته بأحجام
مختلفة وتعمدت لأن شوفنا المرة الماضية لما كان الـ
text عفواً الـ text أو الـ label تبع الـ button كان هو
اللي بيتحكم في حجمه وبالتالي حجم الـ element ثابت
بالنسبة أو كان بتحكم فيه الـ flow layout و بالـ
border layout كان بتجسم ليه الـ frame اللي عندي
لخمس مناطق center,
north, south, east و west والإضافة طبعاً بهذه
المناطق مشكلة كمان مرة نرجع لـ Flow مشكلة الـ Flow
لو أنا غيرت الحجم هينعاد ترتيب العناصر بشكل جديد
لو غيرت حجم الـ frame أو الـ panel هيتغير الترتيب
العناصر أو يعاد ترتيب العناصر من جديد مش هي ..
يعني مش هلاقي التلاتة قبل اثنين لكن فعلياً هلاقيهم
ممكن تختلف عدد الأسطر حسب الحجم الجديد اللي أنا
أخدته في الـ border layout الـ add by default هتكون
على الـ center إذا أنا قلت له الـ frame أو الـ panel
.add و
حطيت الـ UI object و سكتت by default هينضاف لوين؟ للـ
center إذا أنا بدي أتحكم في الـ direction أو في الـ
position اللي أنا بدي أضيفه هروح أقوله border
layout
.وحدد المكان اللي أنا بديه على سبيل المثال East
وبهيك أصبحت أنا بأضيفه لوين؟ بأضيفه على المنطقة
المحددة اللي موجودة عندها بالإضافة لمشكلة الخمس
مناطق اللي عندي كل منطقة مهيئة أن تستخدم تستقبل
one element أو تعمل view لـ one element لو أنا ضفت
عليها أكثر من element بيظهروا عندي as a stack وفي
التالي بشوف آخر واحد فيهم بيكون عندي as a stack
وبشوف آخر واحد فيهم الشغل الثاني أو الملاحظة على
الـ border layout عفواً أنه بيروح بعمل stretch للـ
object بحيث أنه يغطي المساحة المحددة بالكامل الـ
grid layout بنروح
نعمل بروح بجسم الـ panel اللي عندي أو الـ frame اللي
عنديشبكة مجموعة من الصفوف والأعمدة مجموعة من
الصفوف والأعمدة كلها بتكون متساوية الحجم و
بالإضافة برضه فيها sequential مثلها مثل الـ flow
أحجام الخلايا متساوية والإضافة فيها sequentially
مثلها مثل الـ flow الفرق اللي بينها وبين الـ flow
أنه أنا عارف أن الحجم هذا فقط على مثلاً بالرسم اللي
أنا عملته هنا خمس خلايا في الصف الواحد مش أكثر
بتظهر عندي المشاكل في حالة إذا أنا بدي أضيف عنصر و
أسبب وأسيب عنصر فلازم أشوف حلّة مشكلة يعني ما أقدرش
أسيب خلية فاضية أنا في طرق التفافية أبسطها أني
أروح أضيف label فاضيLabel بياخد نفس الحجم وبالتالي
بس ما فيش عليه Text مش هيبين وبالتالي مش هيكون له
تأثير هذه أحسن الطرق أني ألتف على العناصر الموجودة
عندي هن الشيء الثاني هن هتبدأ مشكلة عندي لو بدأت
يعني أضيف عنصر خارج حجم الـ grid حجم الـ grid معروف
عدد الصفوف في الأعمدة نفترض أنهي أربع صفوف في ثلاث
أعمدة معناه 12 element إذا أنا فكرت أضيف عنصر بعد
الـ 12 على ال .. على الـ panel الهادي أو الـ frame هذا
معناه هتختلف الـ layout اللي عندي و غالباً إيش هروح
يساوي؟ هيروح الـ action يضيف لي كمان column لإنه
هيتبت عدد الصفوف ومش هيتغير أو مش هيغير فيه الـ
spaces
من ضمن خصائص الـ grid في horizontal gap و في
vertical gap بحيث إن أنا أترك space بسيط هنا على
كل خلية بتقدر تتحكم فيها ما فيش فيها مشكلة تمام وبهيك
احنا شفنا الـ three layouts اللي ممكن يكونوا
موجودات عندي وقلنا بالإضافة لها دول ممكن أنا اروح
ألغي الـ layout manager وأخلي قيمته none ما أستخدمش
layout وهذا بيدفعني أن اروح باتجاه الـ method أو
أستخدم الـ method اسمها set bound
وهذه بتاخد منها قولنا الـ position X وY وبتاخد
منها الـ size, height, width و height وهذه بدأ
أتعامل معاها مع كل element عندي على الشاشة بمعنى
آخر أنه لازم أفهم الشاشة تبعتي بالتفصيل ولما أبدأ
أرسم بدي أتخيلها as مثل البياني، رسم البياني عشان
أعرف كل position شكل دقيق وين بدي يكون موجود تمام
الأمور؟ اليوم هنتقل بعد الكلام هذا لأول العناصر A
في شغلة أخرى حابيت أن أتذكرها وأرجعها مع بعض في
الموضوع ال .. ال .. الـ flow layout بالـ flow layout
by default وين الـ element موجود؟ الـ center يعني
بين جسين لو ما كانش في عندي عناصر في داخل ال .. في
داخل الـ layout و روحت أضفت أول عنصر بروح بضيف ليها
في الـ center بضيف كمان عنصر بضيفه على يمينه بعده
يعني وبصيره التانين في الوسط مصبوط
هكذا وهكذا طب لو أنا بدي أغير الـ alignment بدخليه
على اليمين أو اليسار ما فيش مشكلة عندي أثناء الـ run
-time أو أثناء إنشاء الـ flow الـ constructor تبعت
الـ flow طبعاً اللي أنت سألتيني على الـ gap هيهم
horizontal gap في عندي الـ alignment مباشرة بحددها
بحيث أن أقوله أنا بدي اروح يمين أو يسار أو أن الـ
code اللي موجود عندها set
layout flow layout و بديه as parameter الـ
constructor flow layout .left عشان أخلي الـ
alignment للعنصر اللي موجود عندها وبهيك عملنا review
سريعة لـ layout managers الثلاثة اللي بيكونوا
موجودات مع الـ panel و مع الـ frame اليوم هنبدأ
نتكلم على أول العناصر اللي
لها علاقة بالـ input كـ text ولما أنا بتكلم على الـ
input بتكلم الـ input تبعتي إما هتكون text field أو
text area أو password field و هدول الثلاثة لما أنا
بتكلم text لأنه فعلياً أنا هستخدم الـ keyboard من
أجل إدخال الـ data للعناصر الثلاثة و الـ output و الـ
input تبعتي عبارة عن text بأدخل وممكن أعمل edit
للنص اللي موجود حسب الممكنية والحاجة الثلاثة
عناصر الـ three classes هدول مبنية على class اسمه
JTextComponent من أهم الـ method اللي موجودات في
الـ JTextComponent المفروض اللي لهم علاقة بإضافة واسترجاع
النص المدخل وفحص إمكانية هل هو قابل
للتعديل أو لأ اللي أنا فيه عندي مثلاً user name و
high text field هنا لما أنا بدي النص اللي موجود
هنا user atmail.com هاي الـ user name لما أنا بدي
أرجع بالقيمة وأفحصها لازم عبر الـ method get ولو
أنا بدي أجيب من البرنامج وأعرض قيمة بدي أستخدم الـ
set text تمام الآن أحياناً أنا بقى أستخدم الـ Text
Field هذا وبدي أمنع أي حد يعدل عليه يعني مثلًا أنا
بقدر أروح أعرض له المستخدم رقمه الوظيفي بس مش
هسمح له يروح يعدل في رقمه الوظيفي أو مش هسمح له يعدل
في الـPosition تبعه أو مش هسمح له يعدل في الـName
تبعه لأ هذه الشغلات ممنوع يعدل عليها لأنه مش هو
صاحب السلطة على تعديلها فإيش بيروح بسوي أنا بيروح
بحدد إمكانية التعديل على الـ element هذا هل هو
editable ولا لأ is editable عشان أفحص هل هو قابل
للتعديل قابل للتعديل يعني بقدر أحط الـ cursor في
الداخل مؤشر الكتابة بقدر أمسح وأكتب على النص اللي
موجود بقدر أعمله select ولا لأ set editable عشان
أتحكم بالـ editability property تبعتها من خلال
الـ parameter المُعَبّق اللي موجود عندها يعني أهم two
components أو three methods أو four methods
الموجودات مع الـ Jtext component اللي هم get to
set text وفحص وتحديد خاصية التعديل على النص
اللي موجود نبدأ مع الـ text field الأول أو الـ
element الأول اللي هو الـ text field الآن الـ text
field أنا بستخدمه عشان أضيف نص على الـ window اللي
موجودة عندها والـ constructor تبعه بسيط زي ما هو
قدامي على الشاشة جاهزة جاهزة جاهزة جاهزة جاهزة جاهزة
جاهزة جاهزة جاهزة جاهزة جاهزة جاهزة جاهزة جاهزة جاهزة
جاهزة جاهزة جاهزة جاهزة جاهزة جاهزة جاهزة جاهزة جاهزة جاهزة
جاهز
والتالت بياخد الـ Default Text مع number مع الـ
Size إيش؟ أيوة الآن العشرين هذه هي عبارة عن
الـ View Size إيش يعني View Size؟ مش حجم الـ Text
المسموح إدخاله كـ maximum يعني احنا متعرفين، متعرف
عليه لما بقوله هاي عشرين يعني الـ maximum عشرين
character، لأ الـ maximum هذه أو الـ view هذه
العشرين هي عبارة عن حجم النص اللي أنا ممكن أشوفه
من خلال الـ text field يعني تخيلي الـ text field هي
عبارة هاي الـ window هذه وأنا بديت النص hello my
name is iad الآن إيش أنا شايف لو أنا بتطلع الآن
بتطلع من خلال الـ text field هذافقط بس أنا شايف my
name is IY وباقي الـ character hello وإيه دي اللي
في الآخر هدولة موجودات من ضمن الـ text لكنهم مش
ظاهرين إليه فالعشرين هذه مفهومها هي حجم الـ column
أو احنا نسميها عدد الـ columns في الـ view نعم الـ
width تبقى بالضبط الـ width تبعت الـ text field
تبعته هي العشرين بس مش الـ maximum size مش الـ
maximum size الآن لما أنا باجي بكتب وببدأ بأصل
آخر character هنا في الـ space في العشرين إيش بصير
الـ behavior؟ إنه بصير يعمل scroll للـ text باتجاه
اليسار عشان يسمحلي أشوف النص اللي أنا باكتبه ولما
أنا بدي أرجع النص اللي في الأول لازم أروحله بالـ
mouse للبداية عفوا بالـ keyboard للبداية باستخدام
الأسهم وبالتالي ضروري جداً أفهم إن العشرين هذه بتحدد
الـView Width أو الـWidth تبع الـText Field اللي
موجود عندها هذا
الكلام مهم جداً لإن كثير من الناس بتخربط ويقولك يا
عم هاي وكتبلي حجم عشرين بس ليش بسمحلي أن أكتب أو
ياخد أكتر من العشرين اللي موجودة
لو أنا بدي أتحكم أثناء الـ runtime بعدد الأعمدة
هدولة في الـ constructor كانوا، أصبحت؟ لو أنا بدي
أتحكم بعدد الأعمدة الـ method اللي اسمها set
columns بتسمح لي أن أتحكم بعدد الأعمدة لكن بما أنه
أنا قاعد بتكلم على الـ graphical user interface
والـ system راح عمل render للـ code ويرسم لي الـ
text field زي ما أنا بدي على الشاشة وبدي أروح
أعدّل عليه الآن لازم أروح أعمل Revalidate للـ
panel اللي موجود عليها من الـ text field اللي
غيرته كمان مرة في الـ runtime أنا هيو خلاص أصبح
موجود بالحجم هذا أنت قاعد بتقول لي لأ اعمله view
أصغر معناته أنت بتعيد تخطيط الـ panel اللي أنت
موجود عليها وبالتالي أنا بروح أستخدم revalidate
method اللي هتروح تعمل recomputation للـ size عشان
تتحكم بالـ layout اللي موجود عنده مع العناصر اللي
موجودة عنده واضحة الأمور لحد اللحظة يا بنات؟
revalidate؟ طيب، الآن مش احنا اتفقنا كل panel اللي
لها layout manager
مظبوط؟ الـ Manager عشان مهمته يتحكم في الـ Size والـ
Position طيب، أنت عملت شو بتروح تسوي وتتغير
بالشكل اللي على الـ Text Field؟ بتغيري حجمه، صح؟
يعني أنت بناءً على حاجتك قررت تغيري حجم الـ Text
Field اللي موجود عندك هنا في الـ View بناءً على
تغيير الحجم هذا الـ Layout Manager سيذهب ويحسب باقي
الأحجام تخيل إن كان هذه السطر هكذا كان هذا الـ
Text Field هنا موجود هكذا وكان في عندي Text Field
آخر هنا مع الـ Flow Layout وأنت روحتي وقلت له غير
الـ Size هذا لهكذا الـ Reaction تبع الـ Layout
Manager بناءً على الـ Size صار في عندي space وين في
الـ line فهيروح يعمل shift للعناصر ويعبّي فيها الـ
space اللي موجود عندها فلازم أنت تروح تعملي
revalidate وغالباً إذا أنت ما عملتيش revalidate مش
هتقدر تشوفي الـ action تبع العناصر اللي موجود عندك
مش هيتغير بشكل مباشر لازم تقولي له revalidate لأ
عشان هي عبارة عن إشارة لـ Layout Manager لعيد توزيع
العناصر أو لعيد رسم العناصر على الـ panel الموجودة
عندها لو
أنا بدأت أسأل السؤال التالي لو أنا أتيت ورسمت لك
form بسيطة بالشكل هذا
عفواً هي a login
form وحطيتك
text field وكمان text field وحطيت فيه هنا two
buttons كإشارة
إن هذا button في الوضع اللي هنا هي login وهي هنا
exit أو cancel
ماذا رأيك بالـ Form هذه؟ من اسمها Login Form
معناته بدي أدخل username و password وهاي two text
field وين الـ username والـ password؟ مين الـ
username ومين الـ password؟ العادة بالـ user
experience بنقول احنا بطلب username في الأول وبعدين
بدخل الـ password لكن هذا الكلام مش صحيح طبعاً
مش صحيح من ناحية design كـ UX فأنا فيه عندي مشكلة في
تصميم الـDesign لازم يكون في عندي إشارات إرشادية
أو Text إرشادي يحدد للـUser أيش الـElement المطلوب
عنه طيب، وهنا بنلجأ لمن؟ للـLabel، للحاجة للـLabel
طيب، قبل ما ألجأ للحاجة للـLabel في الـConstructor
الـDefault Text متى أنا بستخدمه؟ لما بتكون عندي ..
لما بتكون في عندي نموذج وعندي مثلاً الـ place،
العنوان أو الـ place، المنطقة برنامج بيشتغل في غزة،
تمام؟ أو برنامج للشركة في غزة، معظم الموظفين تعود
تميله وابنهم يكونوا؟ من غزة وبالتالي هنا بتكلم على
default value بتكلم على default value في الـ action
مع الـ default value لازم يكون كالتالي بمجرد إنه
يجي الكيرسر في داخل الـ text field يجي ينعمل
layout أو عفواً للنص اللي موجود في الـ value
ينعمله تضليل عشان ينمسح لو بده الـ user يدخل أي
value جديدة كثير من الأحيان بنشوف بقول مثلاً دخل الـ
email وبروح مكتوب له text بسيط في داخله example
مثلاً email at كده بمجرد إن بحط الكيرسر في داخل الـ
text field بيختفي النص اللي موجود وهذا الكلام لازم
أقراه عند الـ design عشان أسهل على المستخدم استخدام
الـ form اللي موجود عندها برولنا بس كشف الحضور
تمام الآن معناته احنا بحاجة للـ label
by default هيأخذ الـ text الموجود اللي هي Gaza 100
% by default لو كمان مرة زميلاتكم الآن أنا فيه عندي
نص موجود default text والـ user ما دخلش نص جديد by
default هياخد الـ text ده بس بدي أتفكر بدي أتفكر
خليكي معايا لسؤالي عن فيه النص بدي أتفكر ما بين
الـ default value وبين الـ hint الـ hint اللي هي
النص الرمادي تمام الـ placeholder اللي لما أنا بعمل
click بيختفي أنا بتكلم لأ default text لما أنا
بعمل place بيكون موجود وبيتظلل بالكامل عشان يمكنهم
أن يمسحوه حسب حاجته طيب الآن معناته احنا متفقين أن
الـ text field هذا بدون بدون الـ label هيكون بيعتمد
على الـ user experience ومحتمل الخطأ في التعامل
مع الـ elements عالي جداً الحل أني ألجأ للـ label الـ
label هي عبارة عن component بتحتوي على text ما فيش
عليها أي formatting والـ user ما له أي action عليها
يعني الأصل الـ label الـ user لا بيقدر يعملها select
ولا يعملها edit ولا أي شيء هي مجرد عبارة عن نص
إرشادي عشان يقول إن الـ text field أو اللي بعدي
صفته كذا وتستخدم من أجل تعريف الـ component تستخدم
من أجل تعريف الـ component الآن الـ label الـ
constructor تبعته أو الـ component تبعتنا اسمها الـ
J label
ولاَزم تكون قريبة جداً قريبة جداً من مين؟ من الـ
component اللي بتتوصفها حسب الناس اللي بتشتغل في
الـ HCI وبتتكلم في الـ design بتقول لازم تكون الـ
label قريب من الـ component بشكل كبير عشان تفعلين
يحصل التعريف المناسب الـ identification المناسب
الصحيحة للـ component اللي عندي by default عشان
نشوف الـ sequence أو السيناريو التالي تخيلي
Okay بلاش يعني
أنا بدي أضيف label الـ user name هاي
كولون وورا الـ text field حسب الـ flow أو الـ layout
اللي أنا بدي أضيفه password أقل
character أو اتنين وهي الـ password هذا الـ
interface فيه مشكلة ما ده الـ interface؟ فيه مشكلة
المشكلة سببها إن الـ label الـ size تبعه بحجم الـ
text المدخل تماما وبالتالي إذا أنا بدي أضيف label
وأضيف وراه text field معناته هيكون ملاظق له تماما
لو اختلف الـ two label في الـ size معناته بداية الـ
text field اللي عندي مش هتكون مرتبة تحت بعضها و
طبعا هندخل مشكلة في الـ UI في ترتيبها ولا لا؟ طيب
الحل إيش هساوي؟ واحد قال والله أنا روح أضيف
spaces هنا يا أستاذ white space ممتاز هذا الحل اسمه
ترجيع والترجيع بينفع في مرحلنا لكن لما أنا بدي
أشتغل صح أو بدي أي تغيير بدي أهد الترجيع كله ياته
أبدأ ارجع من تاني وهذا الكلام مش صحيح الحل ..
الحل بيكمن في فهمنا لعناصر أو لـ label اللي موجود
عندنا ولكل الـ components مع بعضها الـ label اتفقنا
حجمه بحجم الـ text المدخل هذه واحدة إتنين لو كبر حجم
الـ label أكبر من حجم النص كيف بدو يصير؟ أروح أحطه
في الـ center على سبيل المثال تبع الـ border layout
يعني أنا كاتب كلمة password و روحت أضفتها على الـ
center تبع الـ frame أو بلاش على الـ north تبع الـ
frame اللي عرضه 300 pixel إيش بدو يصير في وضع
النص؟ وين بدو ينضاف؟ كلمة الـ label أو الـ username
اللي أنا كتبتها وين بدها تروح؟ الآن هيها، هي الـ
space تبع الـ North ودي أضافت فيه كلمة user name as
a label هان المنطق بيقول إنه هيعمل stretch هيكبر
من؟ الـ label بس مش هيكبر النص لأنه قبل شوية قولنا
إن النص غير قابل للتعديل أو الـ formatting أو
التنسيق كبر الـ label بين جثين صار فيه إمكانية إن
النص يتحرك في داخل الـ label by default هتلاقيه
موجود في اليسار الـ username lift alignment طب أنا
بدي أتحكم في الـ alignment تبعته لو أنا بدي أتحكم
في الـ alignment تبعته مباشرة أثناء الـ constructor
أثناء الـ constructor ممكن أحدد وبشكل واضح أنا بدي
أعمل alignment لوين؟ بدي أعمل alignment لليمين؟
هاي الـ alignment لليمين إما بروح بستخدم وبقول له
swing constant dot right أو باستخدم jlabel.write في
كل الحالتين أنا هعمل alignment للـ text باتجاه
اليمين لو كان حجم الـ label أكبر من حجم النص المدخل
متى هذا الكلام بيصير؟ في حالات كتيرة لما أنا باضيف
الـ label هذا على بنيل تعالى أورجيكي مثال تاني لحل
أفضل لهان الآن تخيلي أنا روحت عملت panel أو في عندي
panel جسمتها لـ grid من أربع خلايا إيش grid يعني
خلت الـ layout manager تبعتها grid layout هيها
بتقولها بتجسمه بنفس الحجم user name هتيجي هنا
password
هيها
هنا وهنا الـ text field تبعنا بالكامل
تمام؟ برضه في مشكلة في الـ interface اللي صار عندي
أنه الـ label بعيد عن الـ element والناس اللي شغلت
علي HCI جالت المشكلة أنه أحيانا مع كتر الـ elements
ممكن البعض يظن أن هذا الـ label للعنصر اللي تحته أو
للي فجوه للي فجيه مش للعنصر المناسب وبالتالي قبل
شوية احنا قلنا لازم تكون too closed
to component no decoration component used to
identify close enough لازم تكون قريبة جدا طب هذا
مش قريبة جدا الحل بتجه على الـ alignment تبعت من؟
تبعت الـ label لأن هذا الـ label هيحجمه بالكامل في
الفريق في الـ cell وهم نفس الحجم التنتين فبروح
بعملهم alignment لمن؟ للـ right من خلال constructor
تبعت الـ label اللي موجود عندهم واضحة الأمور يا
بنات؟ 100
% حالة الـ flow layout هيكون نفس الحجم معناته الـ
flow layout مش هو المناسب عشان أعمل design للحالة
هذه هورجيكي مان عشانك سألتي بس خلينا نشوف لو قلتلك
هذه لو طلبت منك تصميم الواجهة هذه إيش الـ layout
اللي هتستخدمين flow
أيوة، الآن بدي كل واحدة فيكوا على السريع تفكر هي
.. هي في عندي two labels و two text field و text
area عشان أكتب text بأكثر من سطر وهي في عندي
button هان إيش الـ flow .. أو إيش الـ layout المناسب
من أجل تصميم هيك نموذج؟ اصمتكوا قالت هان الـ flow
غيره؟
border بس الـ border مش هيسمحلك اللي هيرضي في one
element هانفح؟ وهنا الأصل أن المفتاح يتمدد بالحجم
بالكامل غيره border لحاله غلط و flow لحاله غلط و
grid لحاله غلط فأنا ممكن أنا أشتغل combination
بينهم كلهم أو بين اتنين منهم على الأقل تعالى
أورجيكي شغلة لو أنا جيت وقلت هاي border east
و west ما بيلزمونش ولا لا فبسيبهم في الـ north في الـ
north بروح بعمل panel بعمل panel والـ panel بخليها
grid layout بحيث إن أنا بضيف panel هان والـ
panel ها دي بتكون عبارة عن grid layout صار بإمكاني
أضيف الأربع عناصر الموجودة دول بالترتيب على الـ
center بضيف الـ text area المطلوبة الـ j text area
وعلى
الـ south أنا في عندي one button و إين جاي في
المنتصف يعني بروح بضيف هنا panel flow
layout
وبضيف عليها button عشان الـ button يدي وين في
المنتصف لاحظي layout واحد لحاله ما كفنش بس التلاتة
مع بعض أنا قدرت أشتغل فيهم يعني هان استخدمت frame
الأساس واستخدمت two panels البانل الأولى عملتها
grid layout وأضفتها على الـ north والبانل التاني
عملت الـ layout تبعتها flow layout وأضفتها وين؟ على
الـ south وبالتالي حصلت على العنصر اللي أنا بديه
وفي الوسط ضفت الـ text area حسب حاجتي الـ scroll له
علاقة بالـ text area هلأ كنت بقولك هي كيف كومبونم
تبعته بسيط تمام؟ وبالتالي ما تفكريش دائما أن والله
layout حاله ما يظبطش الـ Flow لأرطل حاله بيظبطش، الـ
grid بيظبطش ما بعش ممكن أساوي، اعمل combination ما
بينهم باعتمادك على الـ panels باعتمادك على الـ
panels طيب خلصنا من الـ label في عندي method مهمة
جدا في الـ label أو الـ constructor تبع الـ label
ممكن ياخد مني icon بياخد icon والفكرة أنه ممكن أنا
أعرض صورة من خلال الـ label أعرض صورة أو icon من
خلال الـ label بعض المبرمجين بيلجأ لعرض الصور بالـ
Java باعتماده على label بيعتماده على الـ label طبعا
في constructor بياخد كل حاجة بياخد العنصر بياخد الـ
text وبياخد الـ icon وبياخد الـ alignment لهم كذلك
وأن يكونوا موجودات Anyway خلصنا من الـ J label لو
أنا بدي أسترجع النص اللي موجود في الـ label أو بدي
أغيره في الـ runtime ممكن؟ أه ممكن طب أنت قبل شوية
قلت يا دكتور أن هذا .. uneditable مش موجود .. okay
لما نتكلم uneditable مش إليك ك programmer للـ end
user أنت ك programmer أنت أساسا أنت اللي قاعدة
بتوجديه وبالتالي أنت اللي بتقدر تتحكمي بالعناصر
اللي موجودة فيه وبالتالي لما أي شغل إلها علاقة بالـ
editability أو بتحرير النص أو بتحرير الـ data
المدخلة للـ user للـ end user مش إليك ك developer أو
ك programmer Set Icon و Get Icon من الـ methods
المهمة اللي ممكن تستفيدي منهم طيب نجي للـ password
field الـ password field هو عبارة عن special field
من الـ text field لكنه بيستبدل النص المدخل بـ echo
character وهنا
اللي هو النجمة الـ asterix أو الـ asterix الآن ليش
أنا باستفيد؟ احنا قاعدين بنقول ليش الـ field فيه
password الأصل .. الأصل لما أنا باطبع على الـ
keyboard الحرف ما ينظهرش على الشاشة أنا عارف هو
حطيت أصبعي بس مديش الـ user أو الجيراني الناس اللي
قاعدة جنبي أصدقائي جرايبي إلى آخره يقرأ الـ
password اللي موجودة لأنه أساسيات الخصوصية اللي
لها علاقة بالـ password الـ JPassword field عمل
implementation للـ text field مع استبدال كل حرف
بيتم طبعته بـ star أو بيسميها احنا echo character
لأنه ممكن احنا إيش نغير الـ echo character طباعة
تمام، والحرف المطبوع عندها by default أنا بتكلم
على الـ star إيش الـ methods الموجودة عندي ال
constructor مثلها مثل الـ text field ممكن ياخد text
وأحدد length أو width للـ element اللي عندي set
echo character أستخدم character جديدة غير الـ star
إذا أنا بدي أتحكم فيها أحط مثلاً واحد بدي أحط حرف
الـ A بدي أحط فراغ بدي .. أي شغل الأمر متروك إليك
مش مشكلة من أهم الـ methods اللي بتلزمك get
password أن الباسوورد تم إدخالها تمام؟ بدي أعمل
عليها validation بينفعش أروح أقوله get text ليش؟
لأن الـ text المدخل أصبح إيش الموجود في داخل ال
text اللي هو الـ echo character ولو أنا أجيت ظللتة
وعملت copy ورحت على الـ notepad وعملت paste بدي
أطبع الـ echo characters الـ star تبعتيها فلازم
يكون في عندي method اسمها getarray أو get عفوًا
password اللي هي هرجعلي بـ array of character عشان
أعمل validation على الـ password اللي موجودة عندك
طيب طيب وين الـ array هذه بتتخزن؟ وين الـ array
بتتخزن؟ في داخل الـ object اللي هو الـ get الـ J
password طيب هل هي private؟ لأ واضح أنها مش
private عفواً، هل هي public؟ لأ مش public هي private
attribute والدليل إن بس متاح قدامي إن أسترجع
القيمة من خلال الـ get password لأ
لأ، بتحولش من الـ echo character أنت هان تخيل إيه؟
أنا بدي أدخل الـ password تبعتي hello، كمان؟ أنا
بأقوم أجي على هذا الـ cursor موجود بمجرد أدوس أو أعمل
press على حرف الـ H
الـ system بطبع نجمة وفي الـ background بخزن H
على الـ array of characters اللي عندي الـ password
الحرف الثاني E نجمة وغالباً .. غالباً ما بينحول
اللي كأنه الـ character management تمام فيه delay
بسيط جداً عشان تقدر تلمح إشارة الحرف اللي أنت
بتكتبه لو دققت وأنت بتكتب password هتلاقي فعلياً
آخر character بينكتب دائماً بينعمله delay وكل ما
كنت سريع في كتابة الـ password مش هتمسكي .. مش هتحس
بالـ delay اللي موجود anyway في الآخر هو عماله
بيعمل replacement بيستبدل كل حرف بس والحرف الأصلي
وين بيروح بتخزن في الـ array الـ private array of
characters اللي موجودة عندها طيب نيجي للـ element
الثالث اللي هو الـ text area الـ text area أنا قاعد
بقى أتكلم مازلت على text لكنه مش هتكلم على one
field مش هتكلم على حق البسيط هتكلم على multi line
الـ action مع الـ text field لما أنا بروح وأضغط enter
الـ enter بتعني نهاية السطر أو نهاية الـ text
وغالباً مع الـ text field هتلاقي المؤشر بينتقل من ال
text field هذا للـ text field اللي بعده أو للـ next
input element يعني لما أنت بتروح وبتكتب ال
username والـ password وبتضغط enter بيحسبش الـ
enter هذا character في الـ password بيروح كأنك بتضغط
على مفتاح الـ login لأنه عبارة عن next input
element تمام طب لو أنا بدي أكتب comment بحيث أنه
لما أضغط enter أخد الـ new line أو بين جوسين لأن أنا
بحتاج multiline text
عندما أحتاج Multilines كيف أعيش الحل؟ الحل في الـ
Text Area اللي موجودة عندها الـ Text Area الـ
constructor تبعها بياخد
rows اللي بتمثل عدد الأسطر
اللي أنا بدي أكتبها والـ columns بتحدد الـ width أو
الـ view الـ view columns تبعت مين؟ تبعت الـ text
area اللي موجودة عندها وكأنه .. أنا قاعد بقى أقوله
حجم الـ text area تبعتها هي عبارة عن ثمان أسطر و
أربعين character في السطر الواحد حجم الـ view
تبعتها مش حجم الـ data المدخلة نفس الكلام المطبق
اللي يطبق على الـ text field هو نفسه بيطبق .. طبق
وين؟ على الـ text area اللي موجودة عندها
متى بيكون بنعد سطر؟ لما أنا بضغط enter مش الشغل
بيخلص لما أنا بضغط enter الـ carriage retire هي سطر
جديد الـ new line تمام يعني في الـ text area أنا
أجيت هيها أنشأتها وبدأت أكتب لأن إذا أنا بأكتب
هيستمر معاه في كتابة لحد ما أضغط enter هينزل لمين
للسطر next line هذا واحد تمام؟ طيب كتبت لحد اللي
هانو روحت ضغطت enter هيظهر
كله خلاص لهانو ضغطت enter هيكمل هيصار أربعة وها
كذا ضغطت enter هي نهاية السطر تمام؟ وبالتالي بقدر
أعمل scroll يمين ويسار حسب حاجتي أعمل كل سطر زي ما
شوفنا في الـ text field باعتمادي على الأسهم
الموجودة على الـ keyboard عشان أتنقل لبداية ونهاية
السطر هذا كل واحد فيهم بنعد فيه سطر لحد ما كمل
ثمانية الآن بما أن السطر طويل وصار أكبر من حجم ال
text field أو عرض الـ text field في عندي خاصية ال
set line wrap التفاف السطر إيش يعني التفاف السطر؟
إن هذا السطر بدل ما هو موجود غاد يصير يهتزم بالحجم
تبعت الـ view بينجوسينت السطر الواحد يصير على أكثر
من الـ view تبعته على أكثر من السطر تبع الحجم ال
editor اللي موجود عنده يعني اللي الـ text area يعني
بينجوسينت لو أنا كنت هذا السطر اللي كتبته كان
بيحتوي على خمسة وثمانين character وعملت
six line rabbit row للـ text area هذه السطر هذا
سينعرض على سطرين ونص والـ tape سيأخذ خمس
character يعني سيتكلم على ثلاثة أسطر سيتكلم على
ثلاثة أسطر على حساب الـ view طبعاً لأن الـ height
تبع الـ view فقط ثمان أسطر طيب واللي بعده ما فيش
مشكلة اللي بعده ما فيش مشكلة اللي بعده هiaخد سطرين
وهكذا وبالتالي أنا صرت قلت له خلي إن عندي التفاق
في النص أو بين جوسين قاعد بقوله التزم بحجم .. بحجم
أو بعرض ال .. بالعرض .. بالعرض تبع الـ text area اللي
عندي لعرض النص المناسب
بنزيد ما فيش مشكلة نفس ما بزيد عدد الـ columns كان
في الـ text ممكن أزيد عدد الـ raw اللي موجودة عندي
بدون مشكلة طيب الآن بما أنه أنا اتكلمت على نهاية
السطر طبعاً الـ Enterhead يا بنات هو عبارة عن
special character slash N في البرمجة ولا لا؟ طيب
تمام بما أنه أنا قلت له wrap line N يعني التزم
بالحجم اللي موجود الـ wrap line هذا هيفتح قدامي
style جديد اللي له علاقة بالـ word wrap style الآن
الكلمة لما .. لما الكلمة أو الـ character الرقم 40
هنا اللي طبعه هل هو ضروري أن يكون نهاية كلمة؟ لأ،
ما هو ممكن يكون بداية كلمة أو منتصف كلمة سابقة
بالنسبة إليه إذا أنا قلت له set line wrap true سكتت
فخلاص هو بيصير كل سطر بعرض فيه أربعين character
أربعين character وبكمل حسب الحاجة هذا في خمسة
خلاص بنتهي من الخمسة وناخد new line الآن إذا أنا
قلت له الخاصية أو غير الخاصية تبعتنا اللي هي set
wrap style word مفهومها إنه ما تقطعش الكلمة وتحطها
في سطرين الكلمة دائماً تكون في سطر واحد يعني ما
تقطعش الكلمات وتكون موجودة عندي في السطرين طيب
فيما يتعلق موضوع الـ scroll عشان أريحك منه تظهري في
عبد الحلجة لـ object جديد اسمه scroll pane عشان
أعرض الـ text area بشكلها الصحيح مع الـ scroll bars
اللي ممكن تلزمني بتروح باستخدام object أو آخد object
اسمه scroll pane والـ constructor تبع الـ scroll
pane بده ياخد منه الـ object تبع مين؟ تبع الـ text
area بده ياخد منه الـ object تبع الـ text area يعني
هيك وكأن أنشأت الـ text area وحطيتها في داخل
scroll bar أو في داخل scroll panel والـ scroll
panel هي اللي بدي أضيفها على مين؟ على الـ frame هي
اللي بدي أضيفها على الـ frame يعني إياك تروح تضيف
الـ text area لحالها إذا ضفت الـ text area مش هتبين
معاكي الـ scroll bar فأنت لازم تروح تضيفيه الـ text
أو اللي عفواً الـ scroll bar اللي موجود عندك ال
methods اللي موجودة عندك مع الـ text area عشان إن
شاء الله ما أتأخرش عليكم
Text Area Constructor Set Columns Set Rows إذا أنا
بدي أتحكم بعدد الـ Columns وعدد الـ Rows وهذا
بيقتضي مني أعمل الـ panel.revalidate إذا أنا بدي
أغير عليهم append إذا أنا بدي أضيف نص من خلال code
البرامج تبعي بس الـ append هأضيف وين؟ على نهاية
السطر set line wrap اللي احنا شفناها قبل شوية set
rap style word عشان كل كلمة تكون كل كلمة في سطر
جديدو6 Tab Size لما أنا بدي اضغط الـ Tab بما أنه
مسموح لي اضغط Enter فمسموح لي اضغط الـ Tab
تبعتي كام character بدها تكون وفي الآخر عندي الـ J
Scroll Pin اللي هي الـ scroll bars اللي أضفتها لل
component الكبيرة ضروري نطبق هدول اليوم عملي عشان
ما تنسوهمش أنه ما فيش رجل في المحاضرة أن احنا إيش
نروح باتجاههم نغطيهم عملي وبهيك بنكون خلصنا الجزء
الأول من موضوع محاضرتنا في الـ Graphical User
Interface أخذنا الـ Panels اللي هي الـ J
Frame والـ Panel وأخذنا هنا three components مع الـ
layout managers اللي موجودة الله يعطيكم العافية