TvQuran

Thursday, December 17, 2009

J2ME By Example, How to make simple GUI

In this lesson we will talk about

1. Form
2. Command – like button in j2se
3. Radiobutton
4. Checkbox
5. Combobox
6. TextField
7. passwordField
8. commandAction Function


now we will discuss each one in detail :-

1. Form

The form is the container that hold our component .

To create the form
  • Form frmMain = new Form("Title of the form ");
to display it
  • Display display = Display.getDisplay(this);
  • display.setCurrent(frmMain);
2. Command

The command is the button that hold the action we will do it
To create button
  • Command ok = new Command("ok", Command.OK, 1);
  1. First attribute : is the command label
  2. Seconed attribute : command type (ok – cancel – exit …..etc)
  3. Third attribute : is the priority of the button
To add the command to the form
  • frmMain.addCommand(ok);
to assign action to the button
  • we refer it to the form but first we must implements the class from CommandListener then override commandAction function to do the action inside it .
we implements the class like this
  • public class Welcome extends MIDlet implements CommandListener {
the header of the function
  • public void commandAction(Command c, Displayable d) {}

3. Radiobutton

Allow us to choose one and only one item from two or more items

To create it
  • Create array hold the items
  • String[] radio = {"Rock", "paper"};
Declare it
  • ChoiceGroup radiobutton = new ChoiceGroup("Your choice1:", ChoiceGroup.EXCLUSIVE, radio, null);
  1. Attribute 1 :- radio label
  2. Attribute 2 :- tell the radio to choose only on item .
  3. Attribute 3 :- assign the items using the array
  4. value instead of imageElements.
Add to form
  • frmMain.append(radiobutton);

4. CheckBox

Allow us to choose multiple items

To create it
  • Create array hold the items
  • String[] check = {"Python", "Symbian", "J2ME"};
Declare it
  • ChoiceGroup checkbox = new ChoiceGroup("Your choice2:", ChoiceGroup.MULTIPLE, check, null);
  1. Attribute 1 :- checkbox label
  2. Attribute 2 :- tell the checkbox to choose multiple item .
  3. Attribute 3 :- assign the items using the array
  4. Null value instead of imageElements.
Add to form
  • frmMain.append(checkbox);

5. ComboBox

Allow us to choose one item from compact lits

To create it
  • Create array hold the itemsString[] combo = {"Red", "Green", "blue"};
Declare it
  • ChoiceGroup combobox = new ChoiceGroup("choose color:", ChoiceGroup.POPUP, combo, null);
  1. Attribute 1 :- combox label
  2. Attribute 2 :- tell the combo to choose one item from compact list .
  3. Attribute 3 :- assign the items using the array
  4. Null value instead of imageElements.
Add to form
  • frmMain.append(combobox);

6. TextField

An area in which the user input data from the keyboard.the are can also display information

To Declare it
  • TextField txt = new TextField("Name", "", 15, TextField.ANY);
Add To The Form
  • • frmMain.append(txt);

7.PasswordField

like TextField put display information in encrypted form

To Declare it
  • password = new TextField("Pasword", "", 15, TextField.PASSWORD);
Add To The Form
  • frmMain.append(password);

8. CommandAction Function

the function that hold our action .
after declare it .

  • public void commandAction(Command c, Displayable d) {}
we check which command make this action like

if(c==ok)
{
//now we wil remove all form item
frmMain.deleteAll();
//now will remove ok command
frmMain.removeCommand(ok);

// now will set title to the form
frmMain.setTitle("your output");

//will display our name and password
frmMain.append("your ouput here \n");
frmMain.append(txt.getString() + "\n");
frmMain.append(password.getString() + "\n");
//then go to the source code to show more and more
}

The run of the code





Conclusion

We have learned how to make gui example in to Java 2 Micro Edition.
This example is very simple example. It can be executed using editors like NetBeans IDE or J2ME Wireless Toolkit(KToolBar). Using API's like JSR 135 etc.. try to create more programs and try them in these tools. I will get back to you with more articles on J2ME.

Project Source Code : Click Here
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

15 comments: on "J2ME By Example, How to make simple GUI"

Anonymous said...

مشكووووووووووووووووووووووووووووووووووووووووووووووووووووووووور

Islam El-Hosary said...

@Anonymous
Thanks for your support :)

Sherif Atef said...

really , very nice topic
It's a fantastic explain
keep forward

Ahmed Elsayed Shoeib said...

thanks alot sherif for you comment
hope to found what you want in this blog

Anonymous said...

Nader Mahmoud

nice work guys
keep updating ....

Ahmed Elsayed Shoeib said...

thanks Nader for your support

Anonymous said...

thanks alot
go forward

Islam El-Hosary said...

@Anonymous
you are welcome and thanks for your support

A7med Baraka said...

Great Post Ahmed
Go on :)

Islam El-Hosary said...

@A7med
Thanks man .. wait the next isA soon :)

Anonymous said...

ohh I need that , great work, keep forward

Islam El-Hosary said...

@Wessam
happy for that, and wait the next posts ;)

Farrukh Shahzad said...

Hi,

Big thanks for detailed and Image screen shot enabled demo article.

I got a lot of confusions cleared up bu your article.

Islam El-Hosary said...

So happy that you found what you need here,Farrukh.
Thanks for your comment :)

ubaid.pathan1 said...

Really nice code...but how to add combo and pop up menu in header of form.......

Post a Comment