أهلا وسهلا بكم إخوانى الكرام فى درس جديد من دروس منتدى مصر التقنى ....درس اليوم عن كيفية استخدام المكتبة Lightweight UI Toolkit Library و التى تختصر الى LWUIT و هى أحد المكتبات التى تستخدم لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات و الاجهزة الاخرى التى تدعم MIDP 2.0 ....فى هذا الدرس إن شاء الله تعالى كيفية استخدام الادوات و العناصر الرسومية التى توفرها تلك المكتبة فى تطبيقات الجوال  

أولا : مقدمة

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

• توفر مجموعة غنية من واجهة المستخدم الرسومية الجذابة
• مرنة وقوية مدير التخطيطات 
• تدعم أحداث الشاشات التي تعمل باللمس 
• الخطوط النقطية وهى أداة تسمح لك لإنشاء الخطوط 
• يوفر الدعم من الرسوم المتحركة والتحولات 
• 3D والرسومات SVG التكامل 
• تدعم ثنائية الاتجاه للنصوص من اليمين لليسار و العكس صحيح
•  تدعم تنسيق html , XHTML  

ثانيا :كيف تبدأ

_ قم بتحميل المكتبة من على الرابط التالى


_ قم بفك الضغط ستجد ملف يسمى LWUIT_MIDP.jar وهذا الملف هى المكتبة التى سيتم استخدامها فى التطبيق من خلال ادراج النقر يمين على Resources ثم أختيار الامر Add Jar/Zip كما فى الصورة التالية :



_ ستجد مجلد أخرى يسمى resource_editor ويحتوى على الملف resource editor.jar وهذا عبارة عن محرر لانشاء الاشكال و الثيمات التى تود استخدامها فى التطبيق كما فى الصورة التالية :


سوف نفرد درس خاص عن كيفية استخدام هذا المحرر لانشاء افضل الثيمات 

ثالثا : أنشاء أول تطبيق باستخدام المكتبة

يمكنك انشاء اول نافذة باستخدام المكتبة باستخدام الشفرة التالية :

الكود:

import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Label;
import com.sun.lwuit.layouts.BorderLayout;
import com.sun.lwuit.plaf.UIManager;
import com.sun.lwuit.util.Resources;
 
public class HelloMidlet extends javax.microedition.midlet.MIDlet {
 
   public void startApp() {
      
       Display.init(this);
 
       try {
             Resources r = Resources.open("/myresources.res");
             UIManager.getInstance().setThemeProps(
               r.getTheme(r.getThemeResourceNames()[0])
              );
            } catch (java.io.IOException e) {
   }
       Form f = new Form();
       f.setTitle("Hello World");
       f.setLayout(new BorderLayout());
       f.addComponent("Center", new Label("I am a Label"));
       f.show();
   }
 
   public void pauseApp() {
   }
 

كما ترون فى الكود أعلاه تم استيراد الفئات من المكتبة اللازمة لانشاء اول نافذة مع عنصر تسمية ....ويمكنك ملاحظة أن myresources.res هو ملف الشكل أو الثيمن الذى تم إنشائه من خلال المحرر resource editor لتطبيقة على النافذة و النتيجة على النحو التالى


رابعا:التعامل مع فئات المكتبة

تحتوى المكتبة على العديد من الفئات و الشكل الهرمى التالى يوضح تلك الفئات


1_ التعامل مع العنصر Form
 
تعتبر الفئة Form أو النافذة عنصرا المستوى الأعلى التي هي بمثابة الجذر لمكتبة وتستخدم كحاوية للعناصر الاخرى مثل مربعات التسمية و القوائم وخلافة وذلك من خلال المنطقة التى تسمى (جزء المحتوى ) ContentPane ...ويتم اضافة للنافذة شريط عنوان و شرايط أدوات   Title bar, MenuBar

مثال / سنقوم بانشاء نافذة مع شريط عنوان و شريط أدوات مع ادراج عنصر تسمية label بداخل جزء المحتوى ....على النحو التالى :

الكود:


Form mainForm = new Form("Form Title");
mainForm.setLayout(new BorderLayout());
mainForm.addComponent(BorderLayout.CENTER, new Label(“Hello World”));
mainForm.setTransitionOutAnimator(CommonTransitions.createFade(400));
mainForm.addCommand(new Command("Run", 2));
mainForm.show();


_ فى السطر الاول قمنا بإنشاء النافذة mainForm وقمنا بتعيين عنوان للنافذة Form Title فأصبحت النافذة تحتوى على شريط عنوان Title bar
_ فى السطر الثانى أستخدمنا مدير تخطيط النموذج BorderLayout و الذى سيتم استخدامة فى تحديد مكان وضع عنصر التسمية  label
_فى السطر الثالث يضيف التسمية إلى جزء محتوى النموذج ContentPane . إضافة مكونات إلى نموذج (الذي هو وعاء) ويتم ذلك مع addComponent (مكون CMP) أو addComponent (القيود كائن، مكون CMP)، حيث القيود هي المواقع في إدارة التخطيط، BorderLayout.
_ السطر الرابع يستخدم لعمل تأثير الحركة التي تحدث عند التبديل بين النوافذ وهى من مميزات المكتبة
_قمنا باستخدام الاسلوب  addCommand  لاضافة اوامر تحكم للتطبيق أو النافذة و بالتالى يظهر لنا شريط ادوات للنافذة ....ونظام وضع اوامر فى تلك المكتبة على النحو التالى :

إذا كان النموذج لديه أمر واحد يتم وضعها على اليمين. إذا كان النموذج يحتوي الأمرين يتم وضع أول واحدة أضيفت في اليسار ويوضع ثانية واحدة على اليمين. إذا كان النموذج لديها اكثر من الأمرين أول إقامة واحد على اليسار والقائمة يضاف مع كافة الأوامر المتبقية.

2_ التعامل مع العنصر Label
 
استخدمنا عنصر التسمية فى التعليمات البرمجية أعلاه ...لكن تعالوا الان نقوم بتنسيق هذا العنصر بطريقة أكثر أحترافية على النافذة ....حيث يمكنك أستخدام نص فى عنصر التسمية أو استخدام صورة أو أستخدام نص بالاضافة الى صورة فيجب علنا  تمديد تسمية. يتم إنشاء عنصر التسمية على النحو التالى :

انشاء عنصر تسمية بالنص فقط

الكود:


Label textLabel = new Label("I am a Label");

إنشاء عنصر التسمية بصورة فقط

الكود:

Image icon = Image.createImage("/images/duke.png");
Label imageLabel = new Label(icon);  

ويمكنك محاذاه عنصر التسمية باستخدام الاتجاهات التالية CENTER, LEFT, RIGHT. LEFT  وبالإضافة إلى ذلك يمكن أن يكون النص محاذاة نسبة إلى موضع الصورة بأستخدام TOP, BOTTOM, LEFT, RIGHT وذلك با ستخدام الاسلوب :

الكود:

setTextPosition(int alignment);

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

الكود:

Button button = new Button("Baldy");
f.addComponent(button);

Image image = Image.createImage("/res/baldy.png");
Button pictureButton = new Button(image);
f.addComponent(pictureButton);

Button combined = new Button("Baldassare", image);
combined.setTextPosition(Component.BOTTOM);
f.addComponent(combined);

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

4_ التعامل مع العنصر RadioButton
 
العنصر RadioButton وهو عبارة عن خانة أختيار لاحد العناصر و لا يسمح الا باختيار عنصر واحد فقط فى مجموعة الاختيار ButtonGroup و التعليمات البرمجية التالية توضح كيفية أنشاء مجموعة اختيار ومن ثم انشاء خانة اختيار على النحو التالى :

الكود:

Form f = new Form("More Buttons");
f.setLayout(new BoxLayout(BoxLayout.Y_AXIS));

RadioButton rb;
ButtonGroup group = new ButtonGroup();

rb = new RadioButton("Grilled chicken");
group.add(rb);
f.addComponent(rb);

rb = new RadioButton("Filet mignon");
group.add(rb);
f.addComponent(rb);

rb = new RadioButton("Mahi mahi");
group.add(rb);
f.addComponent(rb);

rb = new RadioButton("Chili");
group.add(rb);
f.addComponent(rb);

ويمكنك الحصول على قيمة أختيار خانة الاختيار من خلال الاسلوب التالى :

الكود:

getRadioButton(int index)

5_التعامل مع مربع الاختيار CheckBox
 
العنصر CheckBox هو عبارة عن مربع اختيار ولكنة يسمح بأختيار أكثر من عنصر و يتم انشائه على النحو التالى :

الكود:

cb = new CheckBox("Guacamole");
f.addComponent(cb);

cb = new CheckBox("Tabasco sauce");
f.addComponent(cb);

cb = new CheckBox("Mango salsa");
f.addComponent(cb);

cb = new CheckBox("Mayonnaise");
f.addComponent(cb);

cb = new CheckBox("Whipped cream");
f.addComponent(cb);

وحتى يمكنك معرفة ما تم أختيارة من مربع الاختيار يجب تنفيذ addActionListener و ذلك على النحو التالى :

الكود:

checkBox.addActionListener(new ActionListener() {
   public void actionPerformed(ActionEvent evt) {
      if(checkBox.isSelected()) {
         System.out.println("CheckBox got selected");
      } else {
         System.out.println("CheckBox got unselected");
      }
   }
});

6_ التعامل مع العنصرين List and ComboBox

تحتوى المكتبة LWUIT على قائمة السرد و التحرير combobox وقائمة السرد list وكلاهما يستخدمان ListModel لاحتواء البيانات التي يتم عرضها فى شكل قائمة منسدلة و يتم انشائهما على النحو التالى :

الكود:

List list = new List();
list.addItem("uno");
list.addItem("due");
list.addItem("tre");
list.addItem("quattro");
list.addItem("cinque");
list.addItem("sei");
f.addComponent(list);

ComboBox comboBox = new ComboBox(list.getModel());
f.addComponent(comboBox);

7_ التعامل مع العنصر TabbedPane

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

الكود:

TabbedPane tabbedPane = new TabbedPane(TabbedPane.TOP);
tabbedPane.addTab("Tab 1", new Label("I am a TabbedPane!"));
tabbedPane.addTab("Tab 2", new Label("Tab number 2"));

وكما تلاحظون أننا اردنا أن يكون علامة التويب فى الاعلى لذلك أستخدمنا الامر TabbedPane.TOP لكن لها اتجاهات اخرى  LEFT, RIGHT, TOP or BOTTOM لذلك يمكنك تحديد الاتجاه الذى ترغب فيه


8_ التعامل مع العنصر TextArea

العنصر عبارة عن منطقة لعرض و لتحرير النص ...ويتم انشائه على النحو التالى :

الكود:

TextArea textArea = new TextArea(5, 20, TextArea.NUMERIC);

textArea.setEditable(false);

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

9_ التعامل مع العنصر TextField

توفر المكتبة LWUIT المكون الحقل النصي الذى يوفر الدعم المباشر لمدخلات الهاتف المحمول من داخل LWUIT....ويتم إنشائه على النحو التالى :

الكود:

TextField f = new TextField();

10_ التعامل مع العنصر Calendar

توفر المكتبة LWUIT عنصر التقويم الذى يسمح للمستخدمين لاختيار التاريخ باستخدام واجهة مستخدم رسومية ويمكنك استخدام عنصر التقويم في التنقل واختيار تاريخ، كما هو موضح في التعليمات البرمجية التالية:

الكود:

Calendar cal = new Calendar();

11_ التعامل مع العنصر Virtual Keyboard

توفر المكتبة LWUIT لوحة مفاتيح أفتراضية يمكنك استخدامها فى تطبيقاتك و يمكنك استخدامها من خلال الشفرة التالية :

الكود:

VKBImplementationFactory.init();

وذلك قبل أستخدام الامر

الكود:

Display.init(this);

وهذا وسوف يؤدي تلقائيا لوحة المفاتيح الافتراضية على أي حيز النص عند لمس الحقل النصي.كما فى الصورة التالية :


12_ التعامل مع العنصر Table

عبارة عن جدول بيانات و يظهر كمخطط شبكى يحتوى على خلايا و أعمده و صفوف ....ويتم انشائه على النحو التالى :

الكود:

TableModel model = new DefaultTableModel(new String[] {
   "Col 1", "Col 2", "Col 3"}, new Object[][] {
  {"Row 1", "Row A", "Row X"},  {"Row 2", "Row B", "Row Y"},
  {"Row 3", "Row C", "Row Z"},
  {"Row 4", "Row D", "Row K"},
});
Table table = new Table(model);

ويمكن إجراء خلية للتحرير بواسطة تجاوز أسلوب isCellEditable من النموذج كما يلي:

الكود:

public boolean isCellEditable(int row, int col) {
    return col != 0;
}

خامسا : أستخدام مربعات الحوار فى المكتبة LWUIT

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

_طريقة العرض الثابت

الكود:

dialog.show();

_طريقة انشاء مثيل

الكود:


 d=new Dialog();
 d.show();


سادسا :أستخدام مدير التخطيط Layout Managers

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

1_ BorderLayout ....كائن BorderLayout ديه خمسة مجالات. يتم تحديد هذه المناطق من قبل الثوابت BorderLayout:Center
ويستخدم لتحديد موضع العنصر من خلال الاتجاهات السابقة على النحو التالى :

الكود:

addComponent(BorderLayout.CENTER, component)

2_ BoxLayout.......ويقوم هذا الكائن بترتيب المكونات في صف واحد أو عمود.....ويستخدم على النحو التالى :

الكود:

BoxLayout boxLayout = new BoxLayout(BoxLayout.X_AXIS);

الكود:

BoxLayout boxLayout = new BoxLayout(BoxLayout.Y_AXIS);

3_FlowLayout .....ويقوم هذا الكائن بتحديد المكونات من اليسار إلى اليمين في الصفوف، تماما مثل النص الانكليزي ....ويتم أستخدامه على النحو التالى :

الكود:

FlowLayout exampleLayout = new FlowLayout();
 
container.setLayout(exampleLayout);
 
container.addComponent(new Button("Button 1"));
container.addComponent(new Button("Button 2"));
container.addComponent(new Button("Button 3"));
container.addComponent(new Button("Button 4"));

أو

الكود:

FlowLayout exampleLayout = new FlowLayout(Component.RIGHT);

4_GridLayout ....يضع المكونات في شبكة....ويتم أستخدامة على النحو التالى :

الكود:

GridLayout exampleLayout = new GridLayout(0,2);
 
container.setLayout(exampleLayout);
 
container.addComponent(new Button("Button 1"));
container.addComponent(new Button("Button 2"));
container.addComponent(new Button("Button 3"));
container.addComponent(new Button("Button 4"));

5_والاخير تخطيطات أكثر تعقيدا يمكن إنجازه باستخدام GroupLayout

سابعا :أستخدام الرسم Painters

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

الكود:

Painter diagonalPainter = new Painter() {
 
   public void paint(Graphics g, Rectangle rect) {
      g.drawLine(rect.getX(),
                 rect.getY(),
                 rect.getX() + rect.getSize().getWidth(),
                 rect.getY() + rect.getSize().getHeight());
   }
};

ويمكنك بعد ذلك أستخدام الكائن diagonalPainter الذى قمت بانشائه فى الكود أعلاه للرسم خط مائل على خلفية أحد العناصر و ذلك باستخدام الكود التالى :

الكود:

myComponent.getStyle().setBgPainter(diagonalPainter);

فمثلا سنقوم باستخدامه لرسم خط مائل على خلفية عنصر التسمية و زر أمر و مربع اختيار على النحو التالى :

الكود:

Label myLabel  = new Label(Image.createImage("/images/duke.png"));
myLabel.setAlignment(Component.CENTER);
myLabel.getStyle().setBgTransparency(100);            
myLabel.getStyle().setBgPainter(diagonalPainter);
 
....
Button myButton  = new Button("Image and Text Button");
myButton.setIcon(Image.createImage("/images/duke.png"));
myButton.setAlignment(Component.CENTER);
myButton.getStyle().setBgTransparency(100);            
myButton.getStyle().setBgPainter(diagonalPainter);
 
....
RadioButton myRadioButton = new RadioButton("RadioButton");
myRadioButton.getStyle().setBgTransparency(100);            
myRadioButton.getStyle().setBgPainter(diagonalPainter);

ثامناً: أستخدام المكون HTML

الطبقة HTMLComponent يسمح بأستخدام وثائق HTML التي تتوافق مع XHTML الشخصي المحمول 1.0 (XHTML-MP 1.0) القياسية.....وتدعم معيار معظم العناصر الأساسية مثل الصور والخطوط، والقوائم، الجداول والنماذج، وحتى WCSS (مجموعة فرعية من CSS2 لاسلكي).

ويتم أستخدامه لقراءه نص html على النحو التالى :

الكود:

HTMLComponent htmlC = new HTMLComponent(null);
htmlC.setBodyText("Hello <b>bold text</b>");
Form form = new Form("HTML Test");
form.setLayout(new BorderLayout());
form.addComponent(BorderLayout.CENTER,htmlC);
form.show();


ويتم استخدامه لفتح موقع ويب على النحو التالى :

الكود:

HttpRequestHandler handler = new HttpRequestHandler();
HTMLComponent htmlC = new HTMLComponent(handler);
htmlC.setPage("http://m.facebook.com");

تاسعا : أستخدام الحركة و التنقل Transitions and Animations

تحتوى المكتبة LWUIT على اساليب لوضع تأثير الحركة و الانتقال بين النوافذ ومنها ما يلى :

1_Slide تأثير حركة الانزلاق للنوافذ ....و يتم أستخدامه على النحو التالى :

الكود:

CommonTransitions.createSlide(int type, boolean forward, int speed)

و كما ترى الشفرة تحتاج الى ثلاث حجج :

_ type ........وهو نوع الانزلاق و له قيمتان  أفقى أو رأسى SLIDE_HORIZONTAL و  SLIDE_VERTICAL
_ forward ...هو قيمة منطقية تمثل الاتجاهات من أشكال التحرك ...فمثلا لو كان النوع type تساوى horizontal و القيمة تساوى true تعنى أن الحركة الافقية تكون نحو المين ....و لو كان النوع type تساوى vertical و القيمة تساوى true معنى ذلك أن الحركة تكون نحو الاسفل ...وهكذا
_speed ....وهى التى تحدد السرعة للحركة

مثال توضيحى : نفترض تحريك النافذة الى اليمين سيكون الكود على النحو التالى :

الكود:

myForm.setTransitionOutAnimator(CommonTransitions.createSlide(
   CommonTransitions.SLIDE_HORIZONTAL, true, 1000));

2_ Fade تأثير ظهور التلاشى للنافذة و يستخدم على النحو التالى :

الكود:

CommonTransitions.createFade(int speed)

مثال توضيحى :

الكود:

Form.setTransitionInAnimator(CommonTransitions.createFade(400)
);

الى هنا نكون قد انتهيا من هذا الدرس الى اللقاء ان شاء الله تعالى فى درس جديد

مشكور جدا على مجهود العظيم  رائع جدا

مشكور جدا اخى أحمد على الموضوع و أحيك على طرحك للموضوع

نعم يوجد أخى سامر ....و قريبا جدا ستجد شرح لعمل هذا ....فقط أنتظرنى

الله يبارك فيك أخى احمد على كل هذا المجهود

الله عليك يا معلم