تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات

اذهب الى الأسفل

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Empty تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات

مُساهمة من طرف أحمد مناع في الجمعة سبتمبر 20, 2013 6:50 pm

بسم الله الرحمن الرحيم



أهلا وسهلا بكم إخوانى الكرام فى درس جديد من دروس منتدى مصر التقنى ....درس اليوم عن كيفية استخدام المكتبة 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 وهذا عبارة عن محرر لانشاء الاشكال و الثيمات التى تود استخدامها فى التطبيق كما فى الصورة التالية :

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Lwuit-resource-editor

سوف نفرد درس خاص عن كيفية استخدام هذا المحرر لانشاء افضل الثيمات 
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Theme-starتعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Theme-java

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

يمكنك انشاء اول نافذة باستخدام المكتبة باستخدام الشفرة التالية :
الكود:
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 لتطبيقة على النافذة و النتيجة على النحو التالى

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Hello_world

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

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

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Hierarchy

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  لاضافة اوامر تحكم للتطبيق أو النافذة و بالتالى يظهر لنا شريط ادوات للنافذة ....ونظام وضع اوامر فى تلك المكتبة على النحو التالى :

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

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

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

Label textLabel = new Label("I am a Label");
إنشاء عنصر التسمية بصورة فقط
الكود:
Image icon = Image.createImage("/images/duke.png");
Label imageLabel = new Label(icon);  
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Labels
ويمكنك محاذاه عنصر التسمية باستخدام الاتجاهات التالية CENTER, LEFT, RIGHT. LEFT  وبالإضافة إلى ذلك يمكن أن يكون النص محاذاة نسبة إلى موضع الصورة بأستخدام TOP, BOTTOM, LEFT, RIGHT وذلك با ستخدام الاسلوب :

الكود:
setTextPosition(int alignment);
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Label_text_pos

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 هى النافذة التى سيتم وضع زر الامر عليها ....و كما تلاحظ فى الشفرة أعلاه يمكنك أنشاء زر بدون صورة أو مع صورة أو صورة فقط
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Buttons

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");
      }
   }
});
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Morebuttons


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);

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Listandcombobox


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 لذلك يمكنك تحديد الاتجاه الذى ترغب فيه

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات TabbedPane

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

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

الكود:
TextArea textArea = new TextArea(5, 20, TextArea.NUMERIC);

textArea.setEditable(false);


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

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

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

الكود:
TextField f = new TextField();
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Textfield

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

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

الكود:
Calendar cal = new Calendar();
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Calendar

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

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

الكود:
VKBImplementationFactory.init();
وذلك قبل أستخدام الامر
الكود:
Display.init(this);
وهذا وسوف يؤدي تلقائيا لوحة المفاتيح الافتراضية على أي حيز النص عند لمس الحقل النصي.كما فى الصورة التالية :

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Vkb_search

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;
}
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Tabletree

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

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

ALARM
CONFIRMATION
ERROR
INFO
WARNING
ويمكنك اظهار مربعات الحوار تلك بطريقتين على النحو التالى :

_طريقة العرض الثابت
الكود:
dialog.show();
_طريقة انشاء مثيل
الكود:

 d=new Dialog();
 d.show();
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Dialogs


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

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

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

الكود:
addComponent(BorderLayout.CENTER, component)
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات BorderLayout

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

الكود:
BoxLayout boxLayout = new BoxLayout(BoxLayout.X_AXIS);
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Boxlayout_x
الكود:
BoxLayout boxLayout = new BoxLayout(BoxLayout.Y_AXIS);
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Boxlayout_y


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"));
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات FlowLayout_left
أو
الكود:
FlowLayout exampleLayout = new FlowLayout(Component.RIGHT);
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات FlowLayout_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"));
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Grid_layout

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);
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات PainterDiagonal

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

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

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Htmlcomp-screen
ويتم أستخدامه لقراءه نص 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();
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Simple-example-screen
ويتم استخدامه لفتح موقع ويب على النحو التالى :

الكود:
HttpRequestHandler handler = new HttpRequestHandler();
HTMLComponent htmlC = new HTMLComponent(handler);
htmlC.setPage("http://m.facebook.com");
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Fb

تاسعا : أستخدام الحركة و التنقل 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));
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Slide

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

الكود:
CommonTransitions.createFade(int speed)
مثال توضيحى :
الكود:
Form.setTransitionInAnimator(CommonTransitions.createFade(400)
);
تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Fade

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

ـــــــــــــــــــ التوقيع ــــــــــــــــــــ
سبحان الله وبحمدة .....سبحان الله العظيم
أحمد مناع
أحمد مناع
.
.

تاريخ التسجيل : 15/02/2011
المساهمات : 954
النقاط : 201722
التقيم : 116
الدولة : مصر
الجنس : ذكر

http://egy-tech.forumegypt.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Empty رد: تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات

مُساهمة من طرف أيمن الإبراهيم في الجمعة سبتمبر 20, 2013 9:37 pm

مشكور جدا على مجهود العظيم  رائع جدا
أيمن الإبراهيم
أيمن الإبراهيم
........
........

تاريخ التسجيل : 19/03/2013
المساهمات : 251
النقاط : 397
التقيم : 0
الدولة : سوريا
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Empty رد: تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات

مُساهمة من طرف ذوكا في الأحد سبتمبر 29, 2013 7:01 pm


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

تاريخ التسجيل : 26/05/2013
المساهمات : 92
النقاط : 156
التقيم : 12
الدولة : مصر
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Empty رد: تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات

مُساهمة من طرف سامر الشرفا في الإثنين سبتمبر 30, 2013 11:01 am


مشكور وبارك الله فيك والى الامام دائما


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

تاريخ التسجيل : 01/09/2013
المساهمات : 19
النقاط : 25
التقيم : 0
الدولة : فلسطين
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Empty رد: تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات

مُساهمة من طرف أحمد مناع في الإثنين سبتمبر 30, 2013 2:00 pm

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

ـــــــــــــــــــ التوقيع ــــــــــــــــــــ
سبحان الله وبحمدة .....سبحان الله العظيم
أحمد مناع
أحمد مناع
.
.

تاريخ التسجيل : 15/02/2011
المساهمات : 954
النقاط : 201722
التقيم : 116
الدولة : مصر
الجنس : ذكر

http://egy-tech.forumegypt.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Empty رد: تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات

مُساهمة من طرف VB.NET في الجمعة يناير 10, 2014 8:40 pm

الله يبارك فيك أخى احمد على كل هذا المجهود
VB.NET
VB.NET
المراقبين
المراقبين

تاريخ التسجيل : 18/02/2011
المساهمات : 121
النقاط : 189
التقيم : 6
الدولة : مصر
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات Empty رد: تعلم كيفية التعامل مع المكتبة Lightweight لانشاء تطبيقات ذات واجهة مستخدم رسومية جذابة للجوالات

مُساهمة من طرف المبرمج الطموح في الإثنين يناير 20, 2014 11:56 am


الله عليك يا معلم  Very Happy Very Happy 
المبرمج الطموح
المبرمج الطموح
الاشراف
الاشراف

تاريخ التسجيل : 18/02/2011
المساهمات : 192
النقاط : 345
التقيم : 13
الدولة : مصر
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

ََ

مواضيع ذات صلة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى