Chandrika: Created page with '[http://spoken-tutorial.org/wiki/images/6/6a/Designing_GUIs_in_Netbeans_-_Resources.zip Resources for "Designing GUIs in Netbeans"] {| style="border-spacing:0;" | style="border-…'

2012-11-27T12:36:26Z

Created page with '[http://spoken-tutorial.org/wiki/images/6/6a/Designing_GUIs_in_Netbeans_-_Resources.zip Resources for "Designing GUIs in Netbeans"] {| style="border-spacing:0;" | style="border-…'

New page

[http://spoken-tutorial.org/wiki/images/6/6a/Designing_GUIs_in_Netbeans_-_Resources.zip Resources for "Designing GUIs in Netbeans"]

{| style="border-spacing:0;"
| style="border-top:0.0007in solid #000000;border-bottom:0.0007in solid #000000;border-left:0.0007in solid #000000;border-right:none;padding:0.0382in;"| <center>'''Visual Cue'''</center>
| style="border:0.0007in solid #000000;padding:0.0382in;"| <center>'''Narration'''</center>

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 1
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| Hello everyone.

Welcome to the tutorial on Building GUIs using Netbeans.

In this tutorial, we will see one of the most attractive features of Netbeans, which is its GUI Builder.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 2
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''What does Netbeans provide for building GUI?'''

It gives you a What You See Is What You Get designer to create your GUI.

It gives you an easy interface to drag-and-drop components to create your layout.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 3
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| It comes with a Component Palette which has preinstalled AWT and Swing components.

We will be making use of this powerful visual editor to build a complete GUI application in just a few minutes.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 4

System Setup
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| For this demonstration I'm using a system that has

* Ubuntu 11.04 OS
* and has the Netbeans 7.0.1 IDE

For more details on the installation and requirements please refer to the previous tutorial.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 5, Slide 6

Lesson Outline
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''In this tutorial we will learn to'''

* use the Form Editor
* the Source Editor
* the Palette, Inspector, and Properties features
* Add event handlers
* and also Compile and run our application

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 7, Slide 8
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Let's get started and build a simple Account balance application.'''

Today we will build a simple Bank balance application,

to see how to create GUI using Netbeans.

'''What do we want?'''

For this (application) we want to be able to

# Input the amount credited to the account.
# Input the amount debited from the account.
# And compute the final balance.
# We will also add a picture to make our application look more attractive.
# Let's also have a menu bar on top for easy and quick navigation.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Move to Netbeans

'''File > New Project > Java Application'''
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Create a new netbeans project.'''

Let's now move to netbeans and start (by)creating a new project.

Go to '''File > New Project > '''and choose a '''Java Application.''' Say Next.

Give it the name Account Balance.

Don't create a main class but set it as the main project.

Say finish, that should create a new project.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Netbeans JframeForm

'''File > New File > Swing GUI forms > Jframe Form'''
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| In Netbeans,

Now go back to '''File > New File > '''

and choose '''Swing GUI forms >'''

and choose a''' Jframe Form.'''

Say Next.

I'm going to call this AccountBalance as well,

but you can give it any other name you wish to.

Once you say Finish, it takes you to the main design area.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Hover the mouse around the canvas, Palette, Properties and Inspector.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Getting familiar with the GUI builder.'''

# '''Design area'''
# '''Palette'''
# '''Properties window'''
# '''Inspector'''

'''Palette'''

Here on the right is the Palette.

This contains the pre-installed Swing and AWT components.

'''Properties '''

Down here is the Properties window.

This shows you the properties of the components as you choose them.

'''Inspector'''

Here on the left is the inspector.

The inspector shows you the components that have been added to the frame.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Switch to Source View Button.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Source/Design'''

On top here, is the Source button.

When you click on it, it takes you to the source code.

As you add components to the design,

it takes the corresponding source code and adds it to the source here.

Let's go back to design and see what components we'll use today.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 9

Components
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| (For this application, we are going to make use of some these components.)

We will be using:

* a tabbed pane
* panel
* few labels
* text field
* button
* and a menu

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Netbeans

'''Palette > TabbedPane'''
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| Now go to the the Palette and choose a tabbedPane.

Go to '''Palette > TabbedPane'''

Click on the TabbedPane in the palette

and then click on the form (JframeForm)

This should give you a tabbed frame. And now, you can re-size it using a mouse.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| '''Palette > Label'''

Switch between the two panels using the tabs.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| Go back to the Palette, choose a Panel.

Click on the Panel and (then) click here (on the pane in your jFrameForm).

That should give you a tab.

Go back and choose another panel.

Click (on Panel) and click back here(Pane).

That gives you 2 tabs.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Double click on the tab# title.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Rename tabs.'''

You can Rename it(tab) by double clicking on it

and give it the name you wish to.

I'm going to call this Image and let me call the other one (as) Balance.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Go to '''Palette > Swing controls > jLabel''' and click on the panel
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Adding Labels.'''

Let's go back to the Palette and add a label.

Choose label from the Swing Controls and add it here(JFrameForm).

We are going to need 6 labels for our(this) application.

You can position and align them as you click them.

And use the mouse to re-position or re-align them.

(I have now added 6 labels.)

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Double click on the text on the label to change the text displayed.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Changing text displayed.'''

To change the text on the label, just double-click it

and add the text, and the label name gets changed.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Type Initial Amount
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| I called the first one Initial Amount.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Type Credit Amount
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| And I'm going to call this Credit Amount.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Type Rs.5000.0 on Initial Amount.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Initial amount'''

We'll set the initial amount to be Rs.5000.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Type stars (*****) in label5.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| And after we compute the balance we have to put the balance here (next to balance label)

But initially, we'll set the balance to be just stars.

Once we compute the balance we can put them here.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Go to '''Palette > Swing Controls > TextField'''

Click on TextField and then click on panel.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Adding textboxes.'''

Now, go to Palette and choose '''TextField''' (textfield component), and drop it here.

That should give you the textfield.

(Click on it and click back into the panel.)

Choose another Textfield for the debit amount as well.

We should leave the textfield places also blank.

I am leaving this (textfield1) blank.

I'm also going to leave the other field(textfield2) blank.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Resize the textfield using the mouse.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Aligning, resizing and repositioning components on your panel.'''

You can re-size them using the mouse.

Once you have done that(re-sizing), you can now go back to palette and choose a button.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Go to '''Palette > Swing Controls > Button'''

Set Button text as 'Get Balance'
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Adding a button.'''

Let's add the button here(at the bottom of the frame).

You can change the label (text displayed on the label) in the button also, to read 'Get Balance'.

This is our GUI!

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Go to '''Palette > Swing Controls > Label'''

'''Properties -> icon -> external image'''
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Adding an image in your display.'''

Let's now go to the Image tab (tab1) and add an image.''' '''

To do that let's go back to Palette

and choose another Label, and drop it here(on the panel).

Now, go to '''Properties''' (button) and go to '''icon''' (property). Click on the 3 dots here (next to icon).

Choose External Image – and click on the 3 dots here (on the right).

Choose an image from your directory and say OK.

Click OK again here. This should give you an image.

You can remove the text on the label (here) by double clicking on it.

You can reposition and center your image using the mouse.

Now we have added an image.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| '''Palette > Swing Menus > Menu Bar'''

(Drop it on top of jFrame)

Change '''Edit '''to '''Help'''

Inspector, right-click jMenu1

'''Add from Palette > Menu Item'''

MenuItem Text to Exit
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Adding a Menu.'''

Let's now go to Palette and add a menubar.

# Choose '''Menu Bar '''from '''Swing Menus '''and click here (on top of panel). That should give you a menu bar.
# By default it already has 2 Menu labels (items): File and Edit. Double click on the Edit text and to rename it to Help.
# You can also add a submenu (item) under File. In the Inspector, right-click jMenu1 ,and choose Add From Palette > and choose Menu Item. That should add a MenuItem(jMenuItem). You can also rename that to say Exit.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| [[Image:]]

Click on
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Check your GUI.'''

[[Image:]]Now, our GUI is more or less complete.

Let's now look at a preview.

Click on the 'Preview Design' button on top

That shows a preview of what you have done so far.

Here, the buttons don't (yet) work.

But once you add in the code, you can have everything working.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Go to the '''Inspector''' window and right-click on jTextfiedl1

Choose “'''Change Variable Name ...'''”

Choose the final label to display nothing and change it's name to resultBalance.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Assigning names to some of the components.'''

Now, before adding the code,

let's give proper variable names to the input textfields.

Go to the '''Inspector''' window and right-click on jTextfiedl1,

and Choose “'''Change Variable Name ...'''” and type in the name you want for the box.

I am going to call this first field creditAmount.

You can also do that by directly right clicking on the component

and choosing Change Variable Name.

Let's call that (2ndtextfield) debitAmount.

I'm also going to call this final label (****) resultBalance. final output in resultBalance.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Code Block from gedit

| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Copy Code'''

Let's now see the code, to get the application working.

What I want is to getText() from the creditAmount;

getText() from the debitAmount,

compute the balance and place the amount in the final resultBalance.

I am going to copy the code here:

double creditMoney = Double.parseDouble(creditAmount.getText());

double debitMoney = Double.parseDouble(debitAmount.getText());

double initialBalance = 5000.0;

double balanceMoney = initialBalance + creditMoney - debitMoney;

resultBalance.setText("Rs. " + balanceMoney);

and Go back to 'Get Balance' button.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| '''Button (right click) > Events > Action > Action Performed'''
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Button press event.'''

Now right click on the Button.

Choose add an event., choose action, and choose''' Action Performed'''.

This will take you to the section of the code

where you will have to write the (copied) code for the action to be performed on the button press.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| '''Ctrl+S'''

Click '''Design '''button.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Save'''

Let's save this code (Ctrl+S) and go back to Design.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| '''File '''menu text (inspector)''' (right click) > Events > Action > Action Performed'''

Type in System.exit(1);

Ctrl+S (save)
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Exit action.'''

Let's add in the code to Exit the application.

Right click on the menuItem, Choose Events, Action and''' Action Performed'''.

Now, we need to write the code to exit successfully from the application.

That is going to be System.exit(1) and exit with value 1. Save the code and go back to design.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| File->Exit , next to it you can see shortcut, tripleclick on that. Type '''Ctrl+Q'''.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Adding a shortcut (for a menu item)'''

If you noticed, we can also add a shortcut here (next to Exit)

Double click on it, and use the keyboard to add in keys. I'm going to say (set) '''Ctrl+Q '''as the shortcut-key to quit from the application.

That's it, our application is complete.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Show Run button on top.

Switch between Image and Balance tabs moving the mouse over each item.

Type 300, 200 and click Get Balance button.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Build and Run.'''

Let's now run the application by choosing F6. Say OK (on pop up). and get the application running.

Well, here it is.

Now let's just a check and credit the amount with Rs.300/-.

Let's put the debit amount as Rs.200. And Say 'Get Balance'.

This gives us the correct amount in the balance. Let's now exit from the application.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Application '''File > Exit'''
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Exit.'''

(To exit) Go to File and say Exit. That closed the application successfully. (We could have also closed using '''Ctrl+Q'''.) )

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 9, Slide 10

Assignment

Run TemperatureConvertor application.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Assignment.'''

With the application complete, it's time for the assignment.

The task is to create a Temperature convertor application. I will show you how it should look.

# It should have 2 tabs, slike the previous on. 1 to convert from Centigrade to Fahrenheit and another for Fahrenheit to Celsius.
# It should also take the input (textfield) temperature.
# Display the converted temperature
# It should also have a menu bar on top that shows File and Help and Exit under file, and a short-cut key that says Ctrl +X to exit from the application.

Let's run the application.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Type -40 and click on Get Fahrenheit.

Move mouse away from Exit menu item.
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| '''Run Assignment Solution.'''

When you run the application, e.g -40 which is the same in Celsius and Fahrenheit,

it (the app) should give the correct output temperature.

Let me try the short-cut key, Ctrl+X, to Exit form the application.. The application has exited succesfully.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 11, Slide 12, Slide 13

About the Spoken Tutorial Project

| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| The video at [http://spoken-tutorial.org/What_is_a_Spoken_Tutorial http://spoken-tutorial.org/What_is_a_Spoken_Tutorial] summarizes the spoken tutorial project.

If you do not have good bandwidth, you can download and watch it.

We conduct workshops using spoken tutorials.

We also give certificates to those who pass an online test.

Please contact us for more details.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 14, Slide 15
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| I would like to acknowledge the spoken tutorial project

which is a part of the talk to a teacher project.

It is supported by the National Mission on Education through ICT, MHRD, government of India.

For more information please visit their website.

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| Slide 16
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| The contributors for tutorial are Subhashini Venugopalan and Sindhu Ghanti from IT for Change.

Thank you for joining us.

|}

Netbeans/C2/Designing-GUI-for-Sample-Java-Application/English - Revision history

Chandrika: Created page with '[http://spoken-tutorial.org/wiki/images/6/6a/Designing_GUIs_in_Netbeans_-_Resources.zip Resources for "Designing GUIs in Netbeans"] {| style="border-spacing:0;" | style="border-…'