1.2النوافذ والحقول (واجهة المستخدم)
الأساسي في 30 ثانية
- النوافذ تُرسم بصريًا (سحب وإفلات) وتستقبل حقولًا: تسمية، إدخال، زر، جدول، قائمة منسدلة، تبويب…
- الارتساء يحدد السلوك عند تغيير الحجم: يمكن للحقل أن يتمدد أو يتحرك أو يبقى ثابتًا — وبدونه تبدو الواجهة مرتجلة.
- التسمية الواضحة وترتيب Tab الجيد: بالاسم نتعامل مع الحقل في WLangage، وترتيب Tab يحدد سرعة الإدخال.
حالة مصغّرة متسلسلة — ياسين يرسم نافذة «بطاقة الطلب»
ينشئ ياسين الآن واجهة تطبيق التجارة. يفتح نافذة فارغة بعنوان «بطاقة الطلب» ويسقط فيها حقولًا بالسحب والإفلات: تسمية «العميل»، وحقل إدخال، وجدولًا لسطور المقالات، وزرّي «تأكيد» و«إلغاء». ويعيد تسمية كل حقل فورًا بشكل واضح: SAI_NomClient بدل SAI_Sans_nom1. ثم يختبر بتكبير النافذة: يبقى الجدول متكدسًا في الأعلى يسارًا داخل فراغ كبير. فيضبط الارتساء: يتمدد الجدول عرضًا وارتفاعًا، وتنتقل الأزرار إلى الأسفل، وتبقى التسمية ثابتة. وأخيرًا يتحقق من ترتيب Tab: يجب أن ينتقل مفتاح Tab من الاسم إلى الهاتف ثم إلى المقالات، وفق الترتيب المنطقي للإدخال. يستخلص ياسين: حقول مسمّاة جيدًا، وارتساء صحيح، وTab متناسق تصنع واجهة مهنية.
حالة مستقلة لهذا القسم: تعود في الدرس والمخطّط والسكربت وتحدّي 48 ساعة للقسم 1.2.
1. النوافذ وحقولها
النوافذ تشكّل واجهة التطبيق: ما يراه المستخدم ويتعامل معه. في WinDev نرسمها بصريًا، دون كود لتحديد المواضع. ونسقط فيها حقولًا — وهو مصطلح WinDev لمكوّنات الواجهة.
أهمها: التسمية (نص ثابت)، وحقل الإدخال، والزر، والقائمة المنسدلة، والتبويب، وأهم من ذلك الجدول — حقل رئيسي في التسيير، يعرض عدة سجلات في صفوف وأعمدة. ولكل حقل اسم وخصائص (تبويبات الوصف).
2. الارتساء عند تغيير الحجم
الارتساء يحدد ما يصير إليه الحقل عند تغيير حجم النافذة: أن يتمدد أو يتحرك أو يبقى ثابتًا. وبدون ارتساء، يترك تكبير النافذة الحقول متجمدة في الأعلى يسارًا داخل فراغ كبير — وهو أكثر عيب ظاهر في تطبيق غير متقن.
ممارسة جيدة: تمديد الحقل الرئيسي (غالبًا الجدول، فيرى المستخدم سطورًا أكثر)، وتحريك أزرار الإجراء لتبقى ظاهرة، وترك التسميات الصغيرة ثابتة.
3. التسمية وترتيب Tab
سمِّ الحقول بشكل واضح، باصطلاح بادئات: SAI_NomClient، BTN_Valider، TABLE_Articles. بهذا الاسم ستتعامل معها في WLangage؛ والاسم المعبّر يجعل الكود مقروءًا وقابلًا للبحث.
واعتنِ أخيرًا بـترتيب Tab: الترتيب الذي ينقل به مفتاح Tab من حقل إلى التالي. في التسيير، الإدخال بلوحة المفاتيح هو القاعدة — وترتيب يتبع التسلسل المنطقي للإدخال يغيّر كل شيء في السرعة ويحدّ من الأخطاء.
🔎 مثال ملموس — 🔎 مثال ملموس — تسمية الحقول وارتساؤها
اصطلاح ياسين لنافذة «بطاقة الطلب»:
// Convention de nommage des champs
SAI_NomClient : champ de saisie (préfixe SAI_)
BTN_Valider : bouton (préfixe BTN_)
TABLE_Articles : table de données (préfixe TABLE_)
LIB_Titre : libellé (préfixe LIB_)
// Ancrage (redimensionnement)
TABLE_Articles → étirer (largeur + hauteur)
BTN_Valider → déplacer (bas / droite)
LIB_Titre → rester fixeالقراءة: الاسم يوضح أي حقل نتعامل معه، والارتساء يبيّن كيف تتفاعل الواجهة مع التكبير.
الانعكاس: التسمية الواضحة وتمديد الحقل الرئيسي (الجدول) منذ إنشاء النافذة.
مفردات القسم
- الحقل (WinDev)
- مكوّن واجهة يُسقط على نافذة: تسمية، إدخال، زر، مفتاح تبديل، قائمة منسدلة، جدول، صورة، تبويب… ولكل حقل اسم وخصائص.
مثال بسيط: يسقط ياسين حقل الإدخال SAI_NomClient على نافذة الطلب.
ما ليس كذلك: رسم كل شيء يدويًا دون استخدام مكوّنات واجهة.
رد فعل: مكوّن واجهة → حقل مسمّى.
- حقل الجدول
- حقل رئيسي في التسيير: يعرض عدة سجلات في صفوف وأعمدة؛ ويمكن ربطه بملف أو باستعلام.
مثال بسيط: يعرض ياسين سطور مقالات الطلب في جدول.
ما ليس كذلك: عرض كل سطر في حقل إدخال منفصل، دون جدول.
رد فعل: عدة سجلات → جدول.
- الارتساء
- سلوك الحقل عند تغيير حجم النافذة: يتمدد، يتحرك، يبقى ثابتًا.
مثال بسيط: يجعل ياسين TABLE_Articles يتمدد عرضًا وارتفاعًا.
ما ليس كذلك: تكبير النافذة وترك الحقول متجمدة في زاوية فارغة.
رد فعل: تغيير الحجم → ضبط الارتساء.
- التسمية الواضحة
- إعطاء الحقول أسماء معبّرة (SAI_NomClient) مع بادئة لكل نوع، لأننا نتعامل معها بهذا الاسم في WLangage.
مثال بسيط: يعيد ياسين تسمية SAI_Sans_nom1 إلى SAI_NomClient.
ما ليس كذلك: ترك أسماء عامة تجعل الكود غير مقروء.
رد فعل: حقل → اسم واضح.
- ترتيب Tab
- الترتيب الذي ينقل به مفتاح Tab من حقل إلى التالي؛ يجب أن يتبع التسلسل المنطقي للإدخال.
مثال بسيط: يضبط ياسين Tab: الاسم → الهاتف → المقالات → تأكيد.
ما ليس كذلك: Tab يقفز من الاسم إلى الرمز البريدي ثم يعود إلى الاسم الأول.
رد فعل: إدخال سلس → ترتيب Tab منطقي.
في التطبيق — عمليًا — رسم نافذة إدخال
- أنشئ نافذة وأسقط الحقول اللازمة من الكتالوج (تسميات، حقول إدخال، أزرار) بالسحب والإفلات.
- أعد تسمية كل حقل باسم واضح (اصطلاح البادئات) — هكذا ستتعامل معه في WLangage.
- اعتَنِ بالتخطيط: ترتيب الإدخال المنطقي، والمحاذاة، وتجميع المعلومات المترابطة، وتسميات واضحة.
- اضبط ارتساء الحقول (السلوك عند تغيير الحجم) وتحقق من ترتيب Tab لإدخال سلس بلوحة المفاتيح.
سكربت خطوة بخطوة — ارسم النافذة كما يفعل ياسين (4 دقائق)
1) أنشئ نافذة (مثل «بطاقة الطلب») وأسقط الحقول اللازمة بالسحب والإفلات. 2) أعد تسمية كل حقل ببادئة واضحة (SAI_، BTN_، TABLE_، LIB_). 3) نظّم التخطيط وفق ترتيب القراءة والإدخال المنطقي. 4) اضبط الارتساء: الحقل الرئيسي يتمدد، والأزرار تتحرك، والتسميات ثابتة. 5) تحقق من ترتيب Tab بالإدخال بلوحة المفاتيح.
النافذة تُحكم بالاستعمال: أسماء واضحة، وارتساء صحيح، وTab منطقي منذ النسخة الأولى.
نموذج للنسخ واللصق — قائمة تحقّق النافذة عند ياسين
[ ] Champs déposés par glisser-déposer (saisie, bouton, table…)
[ ] Nommage explicite avec préfixes (SAI_, BTN_, TABLE_, LIB_)
[ ] Disposition dans l'ordre logique de saisie
[ ] Champ principal ancré pour s'étirer (table)
[ ] Boutons d'action ancrés pour se déplacer
[ ] Libellés fixes ancrés pour ne pas bouger
[ ] Ordre de tabulation vérifié au clavierنافذة استعراض
يضع ياسين جدولًا كبيرًا للطلبات فقط، مُرتسًا ليتمدد، مع حقول إدخال قليلة.
نافذة إضافة
يرتّب ياسين حقول الإدخال في عمود، وفق ترتيب الإدخال، مع تأكيد/إلغاء مثبّتين في الأسفل.
التبويبات
لبطاقة عميل كاملة، يوزّع ياسين المعلومات على تبويبات (الهوية، بيانات الاتصال، السجل).
شاشة الورشة
على جهاز في الورشة، يكبّر ياسين الأزرار ويعتني بالتباعد لاستعمال مريح.
✓ ممارسات جيدة
- سمِّ الحقول بشكل واضح باصطلاح بادئات.
- اضبط الارتساء: تمديد الجدول، تحريك الأزرار، تثبيت التسميات.
- تحقق من ترتيب Tab لإدخال سلس بلوحة المفاتيح.
✗ أخطاء شائعة
- ترك أسماء عامة مثل SAI_Sans_nom1.
- نسيان الارتساء: واجهة متكدسة في زاوية عند التكبير.
- إهمال ترتيب Tab (Tab يقفز في كل الاتجاهات).
النقاط الأساسية
- النوافذ تُرسم بصريًا: نسقط فيها حقولًا (تسمية، إدخال، زر، جدول، قائمة منسدلة، تبويب).
- الارتساء يحدد سلوك الحقول عند تغيير الحجم: تمدد، تحرك، ثبات.
- تسمية الحقول بوضوح (SAI_NomClient): بهذا الاسم نتعامل معها في WLangage.
- ترتيب Tab منطقي يحدد سرعة الإدخال وموثوقيته بلوحة المفاتيح.
تحدي 48 ساعة — طبّقه غدًا
خذ نافذة موجودة واجعلها مهنية كما يفعل ياسين: أعد تسمية الحقول بـبادئات واضحة، واضبط الارتساء (جدول يتمدد، أزرار تتحرك، تسميات ثابتة)، وصحّح ترتيب Tab. اكتب في جملة واحدة ما الذي يتغير بفضل الارتساء عند تكبير النافذة.
- أعرف كيف أنشئ نافذة وأسقط فيها حقولًا بالسحب والإفلات.
- أفهم الارتساء وأستخدمه لواجهة متكيّفة.
- أسمّي حقولي بوضوح وأضبط ترتيب Tab.
أسئلة شائعة
ما هو الارتساء ولماذا هو ضروري؟
الارتساء يحدد كيف يتفاعل كل حقل مع تغيير حجم النافذة: يتمدد أو يتحرك أو يبقى ثابتًا. وبدونه، تعرض النافذة المكبّرة حقولًا متجمدة في الأعلى يسارًا مع فراغ كبير — عيب ظاهر جدًا. والحالة الأكثر فائدة: تمديد الجدول الرئيسي، لأن المستخدم يكسب سطورًا ظاهرة فعلًا. ثم نحرّك أزرار الإجراء لتبقى متاحة، ونترك التسميات ثابتة.
لماذا نعتني بتسمية الحقول وترتيب Tab؟
التسمية الواضحة تجعل كود WLangage مقروءًا وقابلًا للصيانة: بالاسم نتعامل مع الحقل، لذا «SAI_NomClient» يشرح نفسه بينما «SAI_Sans_nom1» بلا معنى بعد ستة أشهر. أما ترتيب Tab فيحدد سرعة الإدخال: في التسيير ننتقل بين الحقول بلوحة المفاتيح، وترتيب غير متناسق يضيّع الوقت ويسبب أخطاء. تفصيلان يميزان التطبيق المهني عن الهاوي.
ما وظيفة ارتساء حقل في نافذة WinDev؟