Creating User INTERFACE using Java Editor (NetBeans IDE)

I. Defining the PROJECT name

What we need to do first is defining the project’s name, e.g. “SMSeGov”

File > New Project > choose chategories ‘Java‘

‘Next’ will define the Project Location and the Project Folder name (you can modify the Project Folder name) …’Finish’ it will create the Folders and all the files in the folders as you defined before

Now in the Project location I have a folder names ‘SMSeGov’ –> inside this folder there are 3 folders (‘nbproject’, ‘src’, ‘test’) and 2 files (build.xml, manifest.mf). Inside ‘src’ folder (means Source Packages) there is another folder has same name with parent folder but use low case letter (‘smsegov’ it is automatically created by NetBeans) and inside this folder there is a file ‘Main.java‘. The folder ‘smsegov’ and the ‘Main.java’ file are created because we thicked the box/option of “Create Main Class”.

Alternatively we can unthick this option, so I don’t want to create another folder and main.java file in my Source Package folder (‘src’)..so inside ‘src’ folder will be empty. I did this for my project.

Now the project is ready for any new applications

————————————————————–

II. Defining the FILE

As a start, I want to create a GUI form (form with Graphical User Interface) so my application will be easy to use and interesting.

File > New File > ..then we need to choose the type of file…here I choose “JFrame Form” in ‘Swing GUI Forms’ (I want to use Frame as the user interface and Swing Application Framework (since it provides infrastructure that’s common to most desktop applications). …………’Next’ it will ask you to define the File’s name.

For this first applicatication I give name “SimpleNotification” (I let Netbeans create the file in Source Packages folder)…

then ‘finish’: it created 2 files: “SimpleNotification.java” (java application file) and “SimpleNotification.form” (form file) in ‘src’ folder

Now the interface (the frame) is ready to be modified

(there are 2 views/buttons: “Source” to see and to work with the code and “Design” to see the appearance and to work visually)

——————————————————————

III. Modifying the Interface

Open the file for interface *.java (here is “SimpleNotification.java”)

I wanna make an Interface for my SMS Gateway like below: How to make it??

Remember:

– This interface will be created in the JFrame-Form file (here is “SimpleNotification.java” in Src folder)

– To create this interface, we need to work through “Design” view and “Inspector” tab (‘Window’ menu > ‘Navigating’ > “Inspector”)

—— Now take a look at the interface:

* We can make this kind of interface using 3 JPanel:

1st JPanel is just for label for the main title of interface (“SMS Notification Without Database”)..so the ‘Direction‘ layout in this JPanel’s Properties is North (top)

2nd Jpanel is for all detail of interface (from ‘Connect’ button up to ‘Network Provider’)..so the ‘Direction‘ layout in this JPanel’s Properties is Center

3rd JPanel is just for label for status (“IT IS NOT CONNECTED     00:00:00:00 “)..so the ‘Direction‘ layout in this JPanel’s Properties is South (bottom)

—- Let’s create each component in each Jpanel (I will start from the easiest part: the 1st JPanel and the 3rd JPanel)

*** 1st JPanel

– here, I modify the layout: ‘FlowLayout’ (because the title text is like merging column) and the allignment (in properties):’center’

– then I create a JLabel (right click the 1st JPanel > ‘Add From Palette’ > ‘Swing Controls’ > “Label”)..then in the properties change the text with the title and choose the font type

——————

*** 3rd JPanel

– I modify the layout: ‘GridLayout’ (because the text positions are similar like column/grid)

– then I create two JPanel (right click the 1st JPanel > ‘Add From Palette’ > ‘Swing Containers’ > “Panel”): …both layout of the JPanel:’FlowLayout’ and the allignment (in properties) for the first JPanel is ‘left’ and the other is ‘right’

– Change the text for the first JPanel:’IT IS NOT CONNECTED’ and the other JPanel:’00:00:00:00′

——————

*** 2nd JPanel

This section is the content section

– I modify the layout: ‘BoxLayout‘ (because there will be groups of items in the boxes:) and the axis: ‘Y axis‘ (so the boxes will be arranged vertically)

– I create 5 JPanels:

— (2a) 1st JPanel is for group of button ‘Connect’ & ‘Disconnect’ (“FlowLayout‘, alignment ‘left‘),

In this JPanel, I just create  3 JButton (with text:”Connect” , “Disconnect”, “Download Messages”)

— (2b) 2nd JPanel is for group of ‘Sending SMS’ (‘BoxLayout‘, ‘Y axis‘) and in the ‘border‘: “TitledBorder” and put text ‘Sending SMS‘ (in JPanel Properties),

In this JPanel, there are 3 rows objects so I create another 3 JPanels: 1st for the JLabel ‘Receiver Number:’ and JTextField blank (FlowLayout, left); 2nd (BorderLayout) for JScrollPane and inside this create JTextArea; 3rd (GridLayout, 1 row) under this JPanel create another 2 JPanel more: 1st JPanel (FlowLayout) for 2 JButton ‘Send SMS’ & ‘Delete’ and 2nd JPanel (FlowLayout) for 4 JLabel ‘Number of Characters:’ ‘0’ ‘/’ ‘160’

— (2c) 3rd JPanel is for group of  ‘Inbox SMS’ (‘BorderLayout‘) and in the ‘border‘: “TitledBorder” and put text ‘Inbox SMS’ (in JPanel Properties),

under this JPanel I create a JScrollPanel, and inside it I create JTable

— (2d) 4th JPanel is for group of ‘Detail SMS’ (‘BoxLayout‘, ‘Y axis‘), and in the ‘border‘: “TitledBorder” and put text ‘Detail SMS’ (in JPanel Properties),

In this box, there are 4 rows objects –> I create 4 JPanel: 1st JPanel (FlowLayout) is JLabel ‘Sender Number’ and JTextField blank; 2nd (FlowLayout) is JLabel ‘Time of Receiving’ and JTextField blank; 3rd (BorderLayout) for JScrollPane and inside this create JTextArea; 4th (FlowLayout) is 2 JButton ‘Reply’ & ‘Delete’

— (2e) 5th JPanel is for group of ‘Device Configuration’ (‘GridLayout‘, Rows:2, Horisontal Gap: 5, Vertical Gap: 5) and in the ‘border‘: “TitledBorder” and put text ‘Device Configuration’ (in JPanel Properties),

There are 4 JPanel inside this section, and every JPanel (FlowLayout) there are 2 Label

done! ***