Their Gui Layouts Example 1 example essay topic

Deciding Layouts Deciding the layout is a very important step in Java GUI programming, just like solving an algorithm in normal programming. Layout decides how the components like labels, buttons, text fields etc are going to be displayed on a frame or window. Some GUI can be designed using single panel with a single simple layout. Some GUI need to be broken down into smaller panels which have to be added to an outer panel. Each smaller panel can have its own layout. The simplest layout is the flow layout.

Flow layout produces output as a single row. So go for flow layout if you have only 3 or lesser components or if you want all the components in a single row. Next is grid layout. As long as you can determine the rows and columns, you can use this layout. It is possible to use grid layout for most of the applications which you want to develop with a single panel.

You can always use filler labels to occupy the empty spaces. So grid layout works fine in such cases. But if you want to have a very neat GUI with very good layout, you need to go for more than 1 panel. In that case, grid, flow, and border are all used together. The development of a GUI depends on the type of problem. There are 2 types of GUI problems: 1.

Problems which just specify that you need to do certain things. In this case, the layout of GUI is totally in your hands. 2. Problems where you are given a rough drawing on how GUI needs to look. Type 1: In case 1, you need to start with a paper and pencil. - Read the problem and identify what needs to be displayed to the user- Depending on that, draw a simple diagram on how you want your GUI to look- Then start deciding on the layout For example, consider the problem below: Write a GUI java program that takes 2 numbers from the user, adds them, and displays the sum.

Solution: 1. For this, you need 2 text fields to read 2 inputs. 2 labels to tell what to enter in the text fields. 2.1 button to initiate calculation.

3.1 text field to display result, and 1 label to address the text field. 4. The rough diagram will be 5. For the above diagram, if you are going to use a single panel, then grid layout is the best choice.

To decide the layout, dissect the diagram as shown below. As long as you can divide it into rows and columns, you can use grid layout. Otherwise, you need to go for more than 1 panel. Since I am able to dissect the above diagram into 3 rows and 3 columns, I can use grid layout. In places where there are no components, I can use invisible filler labels. Type 2: - In this case, the developer need not draw a diagram because it is already provided.

- Print the diagram, take a pencil, and dissect the diagram. - Decide the layout. For example, consider the problem below: Develop the following GUI: The GUI must allow the user to enter her name and when she clicks the display button, it must display a welcome message in the text area below. Solution: 1. Dissect the diagram. 2.

Analyze the dissection. The above dissection yields a picture like: 3. Comparing the dissection and border layout, we find that - There is no component in the north. - Name label is in the west. - Name text field is in the center. - Display button is in the east.

- Text area is in the south. 4. So border layout is best for the problem. Some day to day applications and guessing of their GUI layouts Example 1: Consider the following save window. For now, ignore the images in the GUI and only focus on the GUI components. Lets guess what layout would have been used.

Dissecting the window: Analyzing the dissection: 1. This can have 3 panels. 2. The top panel just has save in label and the combo box. 3.

So the top panel can have flow layout. 4. Considering that there are no images, the middle panel just has text area. 5.

So middle panel also can have flow layout. 6. The bottom panel has 3 rows and 3 columns, so grid layout would be necessary. 7. The outer panel which consists of top, middle, and bottom can be border layout or grid layout. 8.

If it is border layout, then top panel is added to north, middle to center, and bottom to south. 9. If grid layout, it will have 3 rows and 1 column, first add top, then middle, and then bottom.