Tuesday, May 6, 2014

How to create simple Notepad application - Create GUI




This is the first post of GUI application developing in this blog. However we almost covered big theories but we need to understand how to use these theories in practical programs. In this post I am going to create the GUI for Simple Notepad Application. I cannot complete this whole app in one blog post, so this is the beginning of a series of posts.

How to begin a Project ?



I know you  are very familiar with Windows Notepad application. This is very simple, fast and less GUI modifications. And it has no any connection with databases. So we need not to worry about databases. But If you are going to create Enterprise Java Application, first of all you need to think about databases and create them. Then you can think about the GUI of the application. But in this application there is no database so, we can create GUI.


How to create a GUI using NetBeans ?


In this post I note you how to create GUI for Notepad application using NetBeans. I am using Netbeans IDE 8.0 version.

How to create a new Project


  • Go to File then click on New Project. ( or CTRL+SHIFT+N )



  • Then select Java in Categories and then select Java Application in projects and click next.
  • Then type your project name and remove the tick on Create Main class and then click Finish.



  • Then you can see the project that you have created in Projects tab. ( If you cannot see this tab, go to Window on menu and then click on Projects or CTRL+1 )


How to create a new Package

  • Now we have to think about Package for our application. 
  • You can see Source Packages under your project.
  • Right click on New -> Java package. Then you can type a Package name and click Finish.



  • Then you will able to see the package that you have created under Source Packages.


How to create a JFrame

  • Lets move on JFrame now. This is the main frame that we create our application.
  • Right click on your Package and then click on New and then click on JFrame Form.



  • Then you can type a class name for JFrame and click Finish.



  • Now you will be able to see following window. This is called Design view of your project. For coding, you have to move to the Source view.





How to add elements  into JFrame

  • Now we need to add element one by one. Use following steps.
    1. Add JScrollPane
    2. Add MenuBar
    3. Add TextArea

  • In the right side of design view, you can see Palette window. In this window, there are Swing Containers, Swing Controls, Swing Windows, Swing Menus, Swing Filters, AWT...etc. 



  • You can drag and drop any element into your JFrame.
  • First I need to add JScrollPane. You can see this in Swing Containers section as Scroll Pane. Then you can drag and drop into your JFrame.
  • Then resize it to fix with JFrame( Scroll Pane size = JFrame size ).
  • In right-hand side you can see something called Navigator. In this tab you can see each and every elements that you have dropped into JFrame. You can navigate through them.



  • If you want to rename any element, you can do it now on Navigator tab. I renamed my jScrollPane1 to scroll ( Or right click on the element and select Change variable name ). 





  • According to above steps, you can add Menu bar from Swing Menus and then add Text Area from Swing controls.


How to change Menu bar items

  • In this step I am gonna add Menu bar items. First of all it is better if you can go to default Notepad application in Windows to understand about Menu bar and Menu items.



  • In my program I am going to add few of these Menu items for my application. 
  • Your default menu bar has only two JMenus( File and Edit ).



  • Right click on the File -> Add from Palette -> Menu item.



  • Likewise add all elements into your notepad application. Look at the following pictures. This is what I am going to create.




  • Then you can change its appeared name and variable name as you wish. But may be very understandable if you can use following variable names to each item.
      • Scroll Pane - scrollPane
      • Menu Bar - menuBar
      • File Menu - file
      • Edit Menu - edit
      • Help Menu - help
      • New Menu Item - newPage
      • Open Menu Item - openFile
      • Save Menu Item - saveFile
      • Exit Menu Item - exitFile
      • Copy Menu Item - copy
      • Cut Menu Item - cut
      • Paste Menu Item - paste
      • Delete Menu Item - delete
      • Select all Menu Item - selectAll
      • Version Menu Item - version
      • About Menu Item - about
      • Contact us Menu Item - contact
      • Text Area - textArea
Final Navigator should be like this.



How to add key shortcuts to JMenu Items

  • You know about Windows key short-cuts. ( CTRL + c for copy, CTRL + v for paste and so on. ).
  • We have to add them to our application also.
  • It is very simple with NetBeans. Just you have to select relevant Menu item.
  • Click on shortcut.


  • Type the Key Stroke ( You can follow common shortcut keys. More details ).



  • Then select CTRL, ALT or SHIFT then click ok.
Now your final GUI should be like this. In next post lets move with coding.





Here is the Coding part