تصميم الواجهات الرسوميه بواسطة jdevloper

sara الثلاثاء أكتوبر 30, 2007 11:55 pm

تصميم الواجهات الرسومية بواسطة برنامج JDeveloper

من الصعب جداً الإحاطة بجميع الإمكانيات المتاحة في البرنامج عن طريق متابعة درس بسيط مثل هذا ولكنها محاولة لإزالة الحاجز والشعور بالصعوبة والرهبة اتجاهه .
لن التفت لشرح كل صغيرة وكبيرة لكن سأركز على تقليل التعليقات والحصول على نتيجة سريعة قدر الامكان .

لفهم البنية الخاصة بتطوير التطبيقات بواسطة Jdeveloper
هناك ثلاثة مستويات ..
المستوى الاول هو الـWorkSpace ويمكن تخيله كمجلد كبير يحتوي المشاريع
المستوى الثاني هو الـProjects وهو عبارة عن حاوية للتطبيقات ويمكن ان يكون هناك اكثر من تطبيق في نفس المشروع كما انه يمكن ان يكون هناك اكثر من مشروع في مساحة العمل الواحدة Workspace

إنشاء مساحة عمل ومشروع Workspace & Project
• عند تشغيل برنامج JDeveloper ستظهر لك الشاشة التالية قم بالضغط بزر الفارة الأيمن على Applicaions واختر New

ستظهر لك هذه الشاشة قم بالاختيار كما هو موضح بالرسم .. تحت General اختر Workspaces ومن ثم Workspace
واضغط على OK

ستظهر لك نافذة لتسمية مساحة العمل الذي تريدها ولنسميها مثلاً araboracle كالتالي :

لاحظ انه يقوم بتسمية المجلد تبعاً للاسم الذي اخترته للـworkspace
عادة تأخذ مساحات العمل الامتداد ws
بعد الضغط على OK سيقوم Jdev بإنشاء مشروع فارغ بنفسه بشرط ان لا تزيل العلامة من المربع السابق والخاصة بـ
Add a New Empty Project كما في الشاشة السابقة .

بعد ذلك ستظهر لك نافذة اخرى لتسمية مشروعك ولنسميه مثلاً tutorials كما في الشاشة التالية

اضغط على OK عندها ستختفي هذه الشاشة و ستلاحظ انه في قسم Applicatons Navigator
قام Jdeveloper بتنفيذ ماطلبت كما في الشكل ادناه .

الان علينا إنشاء تطبيق جافا
اضغط بزر الفأرة الايمن على كلمة tutorials واختر New
ثم في قسم Cateogries انتقل الى Client Tier واختر Swing/AWT
ومن الجهة المقابلة Items اختر Java Application

يعرف مبرمجي الجافا ما المقصود بـ Swing و AWT و سأتحدث عنها في حينها
بعد الاختيار قم بالضغط على OK

ستظهر لك النافذة الخاصة بـ إنشاء برنامج جافا كالتالي قم بتسمية التطبيق وليكن Login مثلاً يجب ان تكون النافذة كالتالي
ولاحظ انه يجب عليك اختيار اسما ذات معنى وفي نفس الوقت تخضع لشروط التسمية في Java فهي في الاخير اسماء ملفات و Classes فلا تبدأ برقم او بحروف غريبة مثل العربية وكذلك لا تستخدم المسافات .

بعد ذلك اضغط OK

سيأتي بعدها تباعاً شاشة إنشاء Frame ( إطار ) وهو يعني شاشة او نافذة فالتطبيق يحتوي نافذة او اكثر
قم بتسمية النافذة LoginWindow. وقم بعمل عنوان لهذه النافذة ولو بالعربية كالمثال التالي :

واضغط بعدها OK

ستلاحظ في نافذة Application Navigator وجود ملفين ذات امتداد جافا

احدهم للتطبيق وهو Login.java والاخر LoginWindow.java الخاص بالـFrame

في الاخير ستظهر لك شاشة مشابهه لهذه
تاكد انك ضغطت على LoingWindow.java في الاعلى وعلى UI في الاسفل .

أنت الآن في وضع التصميم
في حالة عدم ظهور أياً من النوافذ وبالخصوص Property Inspector أو Component Palette
اذهب الى قائمة View في الأعلى واختر اسم القائمة فستظهر لك حينها .
اعرف أناسا كثيرين يقومون بمتابعة درس معين ويحاولون تطبيقه وعندما يواجههم اختلاف ولو بسيط بين الكتاب و بيئة العمل يتوقفون
عن متابعة الدرس لذا ننبه انه من المستحيل ان تتطابق إعدادات الأجهزة وخصوصاً ان الخبراء في مجال معين تكون لهم احتياجات
و إعدادات خاصة وهم يفترضونها في اكثر الأحيان لكن من الأجدر بك كمتعلم أن تبحث عن كيفية إظهار تلك الأداة أو هذه النافذة .

نتابع درسنا
سنقوم الآن بإضافة Lable و Text Fields و Buttons لهذا الـFrame الذي أنشأناه .
اذهب الى Component Palette الموجودة في اسفل يسار الصفحة وتأكد ان Swing هو المختار حالياً .

من تلك القائمة ابحث عن Jlable وقم بالضغط عليه كما في الشاشة التالية وبعدها اضغط على الـFrame الخاص بالتصميم

ستكون الشاشة لديك كالاتي

سيكون هذا الـLable كعنوان ترحيبي لهذا الـFrame فعلى سبيل المثال قد يحتوي جملة اهلا وسهلاً او اسم البرنامج مثلاً
يمكنك تغيير النص الموجود حالياً والذي هو jLable عن طريق نافذة Property Inspector ابحث عن الخاصية Text واكتب النص الذي تريده ان يظهر كالتالي ولا تنسى ان تعيد تسمية من خلال الخاصية name

بعدها اضغط على الـFrame في الوسط ، سترى ان النص تغير ولكن قد لايظهر بشكل كامل
اضغط على الـLable الذي وضعناه وقم بمحاولة تكبير حدوده عن طريق اركانه بواسطة الفأرة .
يمكنك تكبير حجم الخط بعدها عن طريق الخاصية font في نافذة Property Inspector ، قم باختيار خطوط معروفة وافتراضية الوجود في الاجهزة مثل خط Arial وTahoma وغيرها الا اذا كنت ستصدر تلك الخطوط مع برنامجك .
كذلك حاول عمل محاذاة الى اليمين وذلك عن طريق الخاصة horizontalAlignment قم باكتشاف بقية الخصاص بنفسك .
بعد ذلك قم بإضافة Jlable خاص باسم المستخدم واخر خاص بكلمة المرور بنفس الطريقة
والان علينا اضافة مربع نص TextBox لادخال اسم المستخدم فيه بنفس الطريق السابقة الان اضغط على JtextField وقم رسمه على الـFrame من النقطة اليسرى العلوية الى النقطة اليمني السفلية لكي يتحدد لك حجمه وضعه تحت الـJlable الخاص باسم المستخدم .

واما مربع النص الخاص بكلمة المرور والذي يختلف عن سابقه بأنه لايظهر كلمة المرور وانما بدلا منها علامة * .
قم بحذف القيم الموجودة في خاصية text لازالة ماهو موجود داخل مربع النص .
وقم بتغيير اسم مربع النص وهو هنا عبارة عن Object وذلك بتغيير قيمة خاصية name الى userNameTextField
وكذلك بالنسبة لمربع النص الخاص بكلمة المرور قم بتغيير قيمة خاصية Name
الى passwordField

بقي في الاخير اضافة زر Jbutton لعملية الدخول و يتم اختيارة من نفس المكان الذي سبق ان اخذنا منه مربع النص الخاص باسم المستخدم وكلمة المرور قم بتغيير خاصية text للـJbutton الى كلمة "دخول" وكذلك قم بتغيير قيمة خاصية name الى LoginButton

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

كما رأيت لم نضف حتى الان أي كود جافا ولكنك في الحقيقة اضفت .. اضغط على Code في اسفل الـframe الذي صممته
وسترى ماقام Jdeveloper بكتابته نيابة عنك عد الى وضع التصميم عن طريق ضغط UI في الاسفل .

بقي شيء صغير وهو اضافة Jlable اخر في اسفل الـframe لإظهار نتيجة الدخول ، قم باضافته بنفسك وقم بتسميته بـ infoLabel ولا تنسى بمسح أي قيمة موجود في خاصية text

تأكد من اسماء الكائنات ويجب مراعاة حالة الاحرف من حيث كونها كبيرة او صغيرة فجافا حساسة لها جداً .
حان الان ان نقوم ببعض التطوير بدلا من الرسم .

سنقوم الآن بإضافة حدث ( Evnet ) عند الضغط على الزر الخاص بالدخول
قم بالنقر على زر دخول مرتين متتالين ستجد ان Jdeveloper قام باضافة هذا الكود

private void LoginButton_actionPerformed(ActionEvent e)
{
}

قم باضافة هذا الكود بين القوسين ليصبح في الاخير كالتالي
private void LoginButton_actionPerformed(ActionEvent e)
{
String username = userNameTextField.getText();
char[] password = passwordField.getPassword();
String pw = new String(password);

if(username.trim().length() == 0 || pw.trim().length() == 0)
{
infoLabel.setText("Login Message: username and password should not be empty");

}
else
{
infoLabel.setText("Login Message: customer is logging in ...");
if (username.equals("a") && pw.equals("b"))
{
infoLabel.setText("Login Message: customer has logged in");
}
else
infoLabel.setText("Login Message: invalid username or password, login failed");
}
}

الان قم بتشغيل البرنامج
وذلك عن طريق الضغط على F11

قد تظهر لك رسالة تسألك عن الملف الرئيسي لتطبيقك اختر Login.java ثم OK

والان هذا هو الكود الكامل للملف LoginWindow.java

package mypackage1;
import javax.swing.JFrame;
import java.awt.Dimension;
import javax.swing.JLabel;
import java.awt.Rectangle;
import java.awt.Font;
import javax.swing.SwingConstants;
import javax.swing.JTextField;
import javax.swing.JPasswordField;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;

public class LoginWindow extends JFrame
{
private JLabel jLabel1 = new JLabel();
private JLabel jLabel2 = new JLabel();
private JLabel jLabel3 = new JLabel();
private JTextField userNameTextField = new JTextField();
private JPasswordField passwordField = new JPasswordField();
private JButton LoginButton = new JButton();
private JLabel infoLabel = new JLabel();

public LoginWindow()
{
try
{
jbInit();
}
catch(Exception e)
{
e.printStackTrace();
}

}

private void jbInit() throws Exception
{
this.getContentPane().setLayout(null);
this.setSize(new Dimension(400, 307));
this.setTitle("شاشة الدخول");
jLabel1.setText("منتديات عرب اوراكل");
jLabel1.setBounds(new Rectangle(15, 5, 370, 55));
jLabel1.setFont(new Font("alkesaa - nawal", 0, 30));
jLabel1.setHorizontalAlignment(SwingConstants.RIGHT);
jLabel2.setText("اسم المستخدم");
jLabel2.setBounds(new Rectangle(155, 60, 220, 25));
jLabel2.setHorizontalAlignment(SwingConstants.RIGHT);
jLabel3.setText("كلمة المرور");
jLabel3.setBounds(new Rectangle(155, 115, 225, 30));
jLabel3.setHorizontalAlignment(SwingConstants.RIGHT);
userNameTextField.setBounds(new Rectangle(240, 85, 145, 25));
passwordField.setBounds(new Rectangle(240, 145, 145, 25));
LoginButton.setText("دخول");
LoginButton.setBounds(new Rectangle(295, 190, 85, 30));
LoginButton.addActionListener(new ActionListener()
{
public void actionPerformed(ActionEvent e)
{
LoginButton_actionPerformed(e);
}
});
infoLabel.setText("jLabel4");
infoLabel.setBounds(new Rectangle(10, 235, 380, 25));
this.getContentPane().add(infoLabel, null);
this.getContentPane().add(LoginButton, null);
this.getContentPane().add(passwordField, null);
this.getContentPane().add(userNameTextField, null);
this.getContentPane().add(jLabel3, null);
this.getContentPane().add(jLabel2, null);
this.getContentPane().add(jLabel1, null);
}

private void LoginButton_actionPerformed(ActionEvent e)
{
String username = userNameTextField.getText();
char[] password = passwordField.getPassword();
String pw = new String(password);

if(username.trim().length() == 0 || pw.trim().length() == 0)
{
infoLabel.setText("Login Message: username and password should not be empty");

}
else
{
infoLabel.setText("Login Message: customer is logging in ...");
if (username.equals("a") && pw.equals("b"))
{
infoLabel.setText("Login Message: customer has logged in");
}
else
infoLabel.setText("Login Message: invalid username or password, login failed");
}

}

}

الجبالي الإثنين نوفمبر 05, 2007 5:03 am

اختي الكريمة سارة موضوع ممتاز يا ريت تزويدنا بما تعلمينه عن Jdeveloper ويا ريت لو تتأكدي من الصور لانها لا لا تظهر .

Semsem Basha الإثنين نوفمبر 19, 2007 12:09 pm

موضوع جميل ساره
بس الصور مش ظاهره ياريت تعملى الموضوع الجميل ده فى ملف PDF وترفعيه علشان الشرح يكتمل وبارك الله فيكى
وشكرا

تصميم الواجهات الرسوميه بواسطة jdevloper

تصميم الواجهات الرسوميه بواسطة jdevloper

رد: تصميم الواجهات الرسوميه بواسطة jdevloper

رد: تصميم الواجهات الرسوميه بواسطة jdevloper