مقدمة في انشاء واجهة مستخدم منخفضة المستوى - الجزء الأول

مقدمة

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

تستخدم عاده هذه ال APIs في برمجيات الألعاب التي تعتمد على الرسم بشكل كبير كما أن كثيرا من المطورين يستخدمونها لأنشاء أدوات لا تحتويها واجهات المستخدم عاليه المستوى في JME.

Canvas

في مقدمه الواجهات عاليه المستوى ذكرنا أن هناك فئتان ترثان من الفئه Displayable وهما Screen و Canvas وقد تطرقنا الى ال Screen والفئات التي ترث منها بالتفصيل أما اليوم فسنتكلم عن الفئه Canvas.

الفئه Canvas هي Abstract Class لا يمكنك انشاء كائن منها وأحب أن أشبهها بورقه الرسم البيضاء الجاهزة للرسم. يتم العمل عليها عن طريق انشاء فئة جديدة ترث من الفئه Canvas ثم تقوم بكتابة ال paint method الموجودة بداخل ال Canvas والتي بها تتم عمليات الرسم كاملة.

public class MyCanvas extends Canvas {
 public void paint(Graphics g) {
  // Draw stuff using g.
 }
}

الرسم واعادة الرسم

يتم استدعاء ال paint method بمجرد وضع كائن من أي فئة ترث من فئة ال Canvas على شاشة الهاتف وعندها يتم رسم الشاشه لأول مرة، أما اذا أردت اعادة رسم الشاشه لتحديثها مثلا يمكنك ذلك عن طريق ال repaint method.

public void repaint()
public void repaint(int x, int y, int width, int height)

احداثيات الرسم

احداثيات الرسم في JME تطابق احداثيات الرسم التي تعلمناها في علوم الحاسوب فالمحور x الموجب ينطلق باتجاه اليمين والمحور y الموجب ينطلق بانجاة الأسفل.

رسم الأشكال

يمرر الى ال paint method كائن من الفئه Graphics وهو الكائن الذي يمثل حلق الوصل بينك وبين ال Canvas فهو يمثل القلم الذي سوف تستخدمة في الرسم على ال Canvas.

تحتوي هذة الفئة على جميع ال methods الرئيسة التي تمكنك من الرسم على ال Canvas ولنبدأ مع رسم الأشكال وهي كالتالي:

أولا: ال methods المسؤلة عن رسم الأشكال المفرغه من الألوان وهي:

• drawLine(int x1, int y1, int x2, int y2)
• drawRect (int x, int y, int width, int height) 
• drawRoundRect (int x, int y, int width, int height, int arcWidth, int arcHeight)
• drawArc (int x, int y, int width, int height, int startAngle, int arcAngle)

ثانيا: ال methods المسؤلة عن رسم الأشكال المعبئة بالألوان وهي:

• fillTriangle (int x1, int y1, int x2, int y2, int x3, int y3)
• fillRect (int x, int y, int width, int height) 
• fillRoundRect (int x, int y, int width, int height, int arcWidth, int arcHeight)
• fillArc (int x, int y, int width, int height, int startAngle, int arcAngle)

التعامل مع الألوان
يمكن تحديد لون الرسم عن طريق ال methods التالية:

public void setColor(int RGB)
public void setColor(int red, int green, int blue)

تمثل الألوان في JME عن طريق استخدام integer وهو يقسم الى 4 Bytes الأول من اليمين يمثل اللون الأزرق والثاني الأخضر والثالث الأحمر وأخر Byte غير مستخدم, بعض ال APIs الأخرى تستخدمه من أجل تحديد الشفافية.

كل مركب من هذة المركبات يأخذ القيمة ما بين 0-255 ودمج هذه المركبات بنتج لنا اللون المراد فمثلا:
اللون 0xFFFFFF هو اللون الأببيض واللون 0x0 هو اللون الأسود. يمكن أخذ هذه القيم باستخدام برنامج ال Photoshop أو أي برنامج رسم أخر واستخدامها في برنامجك.