GUI Components Continued EECS 448
Lab Assignment In this lab you will create a simple text editor application in order to learn new GUI design concepts This text editor will be able to load and save text files with file selection dialogs. It will have a static sized tool box on the left and a dynamically sized multi-lined text field on the right. It will have menus, tooltips, tabbed panes, scroll panes, custom components, and other GUI doodads. Implement the features incrementally by following the slides and pay special attention to the "Requirement" bullet points
Relative Layouts So far, we have used only the 'Absolute Layout' in lab The absolute layout gives the most precision and control, but does not easily allow for resizing of the form Relative layouts allow for intelligent resizing For this lab, you will need to try out one of the relative layouts. Requirement: Your form needs to resize such that the tool pane on the left does not change but the text area does. Static Dynamic Resize!
Relative Layouts Experiment with the Form or Grid layout These layouts allow you to add components to cells in a grid/table You can then make some cells sizes dynamic and others static Check the 'grow' property Requirement: You will also need to set a minimum size to the main frame so that components aren't clipped off Static Dynamic Resize!
Tabbed Panes Panes are sections of a GUI that can house components Like the frame, a pane must define it's own layout for its components The JTabbedPane is a special container that can hold an array of panes Add a JTabbedPane in the correct spot in your relative layout and then add the desired number of JPanes to it to create tabs JTabbedPane Possessed JPanes
Tabbed Panes With the JTabbedPane, only one of its possessed panes are visible at a time This is selected with the tabs Requirement: The tool box for this editor groups its tools with a tabbed pane. You need a 'Display' tab and an 'Insert' tab. The JPane 'Display' is the current visible JPane in the possessing JTabbedPane
Scroll Panes Scroll panes are designed such that vertical and/or horizontal scroll bars appear when the pane's contents become to large to be viewed Requirement: Your JTextArea must be a component of a JScrollPane to allow scrolling of the text area JScrollPane
Radio buttons and button groups Radio buttons are essentially mutually exclusive checkboxes Requirement: A group of radio buttons must control the text color of your editor (this is the foreground property of the JTextArea). There must be at least four colors. You may pick whatever colors you want. RadioButtons
Radio buttons and button groups Add a JPane to house the radio buttons within your 'Display' pane Add a border to this radio button pane Add at least four buttons, each corresponding to a color Right click on one of them and navigate to 'Set ButtonGroup' Radio buttons are only mutually exclusive within their own button group Create a new button group with 'Standard' settings Add all of the other buttons to this same group If you run the program now, you should only be able to select one of these at a time
Radio buttons and button groups Now, create an event handler that will be called on the 'actionperformed' event of all of the radio buttons Right click each button, 'Add event handler'->action- >actionperformed Each button should call the same method The event handler should use conditionals to figure out which of the buttons is selected and then it should update the JTextArea's foreground with the new color Look into JTextArea.setForeground() and JRadioButton.isSelected()
Comboboxes A combobox is a drop down list box Requirement - Add a JComboBox to control the background color of the JTextArea. This must include at least four colors of your choosing. The event handler here can also be its 'actionperformed' JComboBox
Custom components, JDateChooser The ability to pick a date is often an important feature for GUI applications, but you will notice that Swing does not already implement a component to do so This means that will need to either define your own or import an already existing component Defining something as common as a date picker in most cases is way out of scope of a project's initiative No need to reinvent any wheels here
Custom components, JDateChooser For this lab, we will use toedter's JCalendar version 1.4 Pull up your favorite search engine and find a download for JCalendar 1.4 In the event that this is an archive, look for 'jcalendar-1.4.jar' Once you've gotten this file, we want to add the components it defines to our WindowBuilder's palette Components are defined as classes The palette is the region that lets us select and add components to our design Right click the palette and navigate to 'Import Jar...' Click on the folder icon and select 'File System' Navigate to where you downloaded jcalendar-1.4.jar and select it You should now see a list of classes: JCalendar, JSpinField, JYearChooser, etc Select all of these and hit Ok It will prompt you to add each to the classpath, say yes Refresh the palette and you should now see the new components
Custom components, JDateChooser Requirement: You will need to add a JDateChooser and then a insert button. When the insert button is clicked, it will add a string representation of the selected date to the text editor at caret position. For example, if the date you selected was September 1st, 2012, hitting insert would then add "1 Sep 2012 05:00:00 GMT" to the JTextArea at the cursor position.
Menu bars, menus, and menu items Menus are the drop downs that occur upon right clicks and clicking of menu bar entries like 'File' in most programs Requirement: You will need a menu bar of the following structure... File Edit -> Open -> Select All -> Save -> Exit File->Open will open a text file. (explained later) File->Save will save a text file. (explained later) File->Exit will call System.Exit() Edit->'Select All' will select all the text in the JTextArea
Menu bars, menus, and menu items Menus are expandable, MenuItems are simply buttons You will need to add a JMenuBar to your frame You will need to add JMenus to your JMenuBar one for 'File', one for 'Edit' You will need to add JMenuItems to your JMenuBars
File dialogs File->Open should show an open file dialog and then read all the text in the selected file to the JTextArea File->Save should show a save file dialog and then write all of the text in the JTextArea to the selected file Show file dialogs as follows: final JFileChooser fc = new JFileChooser(); int result = fc.showsavedialog(null); //or try showopenfiledialog() if (result == JFileChooser.APPROVE_OPTION) { //if user hit 'ok' File savefile = fc.getselectedfile(); //this is the selected file //do stuff with the file... } else //if user hit 'cancel' { //cancelled }
File IO in Java Reading and writing to files in Java is pretty trivial This should be very similar to C++ programs you have written //Reading a file - infile is of type File BufferedReader in = new BufferedReader(new FileReader(infile)); while (in.ready()) { //not end of file String line = in.readline(); } in.close(); //Writing a file - outfile is of type File PrintWriter out = new PrintWriter(new FileWriter(outfile)); out.print("some text..."); out.println("some text..."); out.close();
Tool tips Tool tips are the suggestion boxes that appear when you hover the cursor over a component of a form Requirement: All clickable components need to have a tool tip that gives a short description of what the action will do. Most GUI components have a tooltiptext property that accept a string value Tool tip for the insert button
That is all If you have implemented all the aforementioned requirements, you should be ready to present Keep in mind that there are still many other useful components, both defined by Swing and not, that may come in handy to you in your project Refer to this visual guide for a quick easy reference: http://docs.oracle.com/javase/tutorial/ui/features/components.html JTables and JTrees are very powerful gui components that can be used in conjunction with databases