Fluent Essays

1: Basic component architecture. The basic idea of this assignment is that we want to create a custom widget to display our photos and to handle displaying and adding annotations. Think back to what we saw in class: in Swing, the main class for the widget is its controller. It will also have a view and a model. That means that you will need to create three classes: the main class (controller), a model (abstraction), and a view (presentation). To create a new widget in Swing, we typically create a subclass of JComponent. Well call ours PhotoComponent (or some such).  2: Photo display. Your component will display a single photo, and so your component should render this image in its paintComponent() method whenever it is requested to draw itself. But be sure to realize that the component may be larger or smaller than the photo it displays (because the user may resize the window, for example). Your component should have a size and a preferredSize that are the size of the photo itself, but you probably dont want any minimumSize or maximumSize. When your PhotoComponent is initialized, and before any photo is loaded, you probably want to use some default value for its size and preferred size. So that the component looks good in cases where the window is larger than the photo itself, you should render some nice-looking background behind the photo, which will be visible when the photo doesnt cover the entire extent of the component. This can be as simple as a solid color, or some pattern such as graph paper. Youd create this effect by simply doing some drawing in your drawing method before rendering the image. If the user shrinks the window so that the component cannot display the entire photograph, it should be scrollable so that the user can pan around the image. The easiest way to do this is to simply insert your PhotoComponent into a JScrollPane, and then insert that JScrollPane into the container area in your application. There are settings on JScrollPane that determine whether the scrollbars are always displayed, or just when they are needed (its fine if the scrollbars are always displayed). The way JScrollPane works is that it allows its child to be any size it wants, but clips and positions it so that the correct part is shown under the visible region. This is why you want to make sure your component has a size and preferred size. If you reload a photo and change the size, you will probably want to call revalidate() on your PhotoComponent so that the scroll pane “notices” that its size has been updated. If you want, you might also like to display some graphical frame around the picture, such as a white border or scrapbook corners, although this is not required.  3: Flipping to annotate. With physical paper photos (do people still use those?), people often flip them over to write notes and other annotations on the back. Your PhotoComponent should support some similar kind of interaction. Double-clicking on the photo should cause it to be replaced by a plain white surface of the same size as the photo for annotation. The background of your component should stay the same—only the photo should be replaced. When in this mode, you can annotate the photos back via drawn strokes and typed text (see #4 and #5 below). Double-click on the photo back again to flip it over and see the photo again. The current flip state of a given photo should be stored in a boolean.  4: Support for drawn strokes. When in the flipped state, you should be able to draw onto the photo back using the mouse (if youre using a pen tablet, the pen also produces mouse events and so this sort of implementation will also work nicely on a pen-based computer). What this means is that the user should be able to draw freehand strokes by dragging the mouse on the back of the photo with the button pressed. The component should show the stroke while it is in the process of being drawn, to give appropriate feedback to the user. Drawing should only occur in the white back-of-photo area, not the background.  5: Support for typed text. When in the flipped state you should also allow the user to enter typed text on the back of the photo. The way this should work is that the user clicks on the photo back to set an insertion point for the text. Then, any typing will begin to fill the photo back starting at that insertion point. Clicking again will reset the insertion point to another position. While you dont have to do any especially fancy text processing (no ligatures or custom fonts or anything like that), you should make the basics work correctly. The basics are: You should implement word wrap. This means that when your typing hits the end of the photo back you should find the rightmost whitespace in the line, break the line there, and put the remaining word on a new line. If there is no whitespace in the line then you can just break the line at the last character that will fit on the line. Use reasonable line spacing. Remember: ascent + descent + leading. Please do not implement this feature by trying to insert a JTextComponent into your photo back. Wed like you to get experience with the low-level Java text APIs, plus reusing a photo component in this way is probably more work than just doing it by hand. You do not have to implement more complicated features (although youre welcome to for extra credit). For example, you do not have to implement: Backspacing over already entered characters. The ability to put the insertion point into already-entered text and edit it. The ability to select a span of text, or do copy-and-paste, etc.  6: Integration with the rest of the application Once youve implemented and debugged your PhotoComponent, its time to integrate it into the application you wrote for Homework #1. Lab 2: Custom Swing Components Up to now, weve been using existing Swing components. Now, well go ahead and add a new kind of interaction that requires us to create our own. You have some flexibility in how to achieve this, but we want a component that displays a photo and that lets the user add annotations to photos. It will need to be able to display the photo and respond to keyboard and mouse events. You will thus get experience with the Swing drawing pipeline, using input listeners, and with the Swing component architecture. Description Try not to be intimidated by the length of this homework description! Although long, most of this writeup is here just to provide detail about what we expect from this assignment, as well as some hints about how best to do the implementation. In this homework, well create a custom Swing component that serves as the content area of the photo album application. The basic idea is that this component displays a single photo, and also provides a way to store and render annotations including text and drawn strokes. You can flip the photo over to annotate it using either mouse strokes or text. There are a number of specific requirements for this assignment: 1: Basic component architecture. The basic idea of this assignment is that we want to create a custom widget to display our photos and to handle displaying and adding annotations. Think back to what we saw in class: in Swing, the main class for the widget is its controller. It will also have a view and a model. That means that you will need to create three classes: the main class (controller), a model (abstraction), and a view (presentation). To create a new widget in Swing, we typically create a subclass of JComponent. We’ll call ours PhotoComponent (or some such). How will you model this widget? What goes into the abstract concept of this annotated photo widget? What sort of state will it have? Where should all that go? You will probably need to keep at least a reference to the image on disk, a boolean indicating whether it is in its “flipped” state or not, plus a representation of any annotations on the photo (described later). How should the photo widget be drawn? How should it react to mouse and keyboard events? Where should these go? 2: Photo display. Your component will display a single photo, and so your component should render this image in its paintComponent() method whenever it is requested to draw itself. But be sure to realize that the component may be larger or smaller than the photo it displays (because the user may resize the window, for example). Your component should have a size and a preferredSize that are the size of the photo itself, but you probably dont want any minimumSize or maximumSize. When your PhotoComponent is initialized, and before any photo is loaded, you probably want to use some default value for its size and preferred size. So that the component looks good in cases where the window is larger than the photo itself, you should render some nice-looking background behind the photo, which will be visible when the photo doesnt cover the entire extent of the component. This can be as simple as a solid color, or some pattern such as graph paper. Youd create this effect by simply doing some drawing in your drawing method before rendering the image. If the user shrinks the window so that the component cannot display the entire photograph, it should be scrollable so that the user can pan around the image. The easiest way to do this is to simply insert your PhotoComponent into a JScrollPane, and then insert that JScrollPane into the container area in your application. There are settings on JScrollPane that determine whether the scrollbars are always displayed, or just when they are needed (its fine if the scrollbars are always displayed). The way JScrollPane works is that it allows its child to be any size it wants, but clips and positions it so that the correct part is shown under the visible region. This is why you want to make sure your component has a size and preferred size. If you reload a photo and change the size, you will probably want to call revalidate() on your PhotoComponent so that the scroll pane “notices” that its size has been updated. If you want, you might also like to display some graphical frame around the picture, such as a white border or scrapbook corners, although this is not required. 3: Flipping to annotate. With physical paper photos (do people still use those?), people often flip them over to write notes and other annotations on the back. Your PhotoComponent should support some similar kind of interaction. Double-clicking on the photo should cause it to be replaced by a plain white surface of the same size as the photo for annotation. The background of your component should stay the same—only the photo should be replaced. When in this mode, you can annotate the photos back via drawn strokes and typed text (see #4 and #5 below). Double-click on the photo back again to flip it over and see the photo again. The current flip state of a given photo should be stored in a boolean. Hint: Your paintComponent method will have two paths through it, depending on the setting of this boolean. In the default path, it will draw the background and then the image. In the flipped path, it will draw the background, draw the white surface, and then draw the annotations (see below). 4: Support for drawn strokes. When in the flipped state, you should be able to draw onto the photo back using the mouse (if youre using a pen tablet, the pen also produces mouse events and so this sort of implementation will also work nicely on a pen-based computer). What this means is that the user should be able to draw freehand strokes by dragging the mouse on the back of the photo with the button pressed. The component should show the stroke while it is in the process of being drawn, to give appropriate feedback to the user. Drawing should only occur in the white back-of-photo area, not the background. Hint: Remember that youll need to redraw all of these same strokes anytime the Swing repaint pipeline tells you that you need to paint your component. The classic way to do this is to add strokes to a display list that contains the things to be rendered, and then in your paint code you simply iterate through the items to be painted, rendering them to the screen. Hint: Painted strokes will look much better if you use Java2Ds anti-aliasing mechanism. Look at the setRenderingHints() method on Graphics2D. 5: Support for typed text. When in the flipped state you should also allow the user to enter typed text on the back of the photo. The way this should work is that the user clicks on the photo back to set an insertion point for the text. Then, any typing will begin to fill the photo back starting at that insertion point. Clicking again will reset the insertion point to another position. While you dont have to do any especially fancy text processing (no ligatures or custom fonts or anything like that), you should make the basics work correctly. The basics are: You should implement word wrap. This means that when your typing hits the end of the photo back you should find the rightmost whitespace in the line, break the line there, and put the remaining word on a new line. If there is no whitespace in the line then you can just break the line at the last character that will fit on the line. Use reasonable line spacing. Remember: ascent + descent + leading. Please do not implement this feature by trying to insert a JTextComponent into your photo back. Wed like you to get experience with the low-level Java text APIs, plus reusing a photo component in this way is probably more work than just doing it by hand. You do not have to implement more complicated features (although youre welcome to for extra credit). For example, you do not have to implement: · Backspacing over already entered characters. · The ability to put the insertion point into already-entered text and edit it. · The ability to select a span of text, or do copy-and-paste, etc. Hint: While all the word wrapping stuff is tricky, its actually pretty straightforward to implement. The key is to remember that, as with strokes above, youll need to keep a data structure for the text that will be rendered by your component. One way to architect things is to simply create a new object to hold a text block whenever the insertion point is set; this object only needs to remember the insertion point and the set of characters entered at that point. Whenever characters are typed they are simply added to the current text block object. The job of your paint code, then, is simply to iterate over the list of text blocks and draw them to the screen, wrapping as you draw based on the size of the photo back. Hint: Telling the difference between text mode and draw mode should be easy: If you see a mouse down followed by movement, you can assume youre drawing. If you see a mouse click (press followed by release), you can assume youve set the text insertion point for keyboard entry. Hint: If you find yourself needing to do fancy FocusManager stuff, youre probably working too hard. You should just be able to add KeyListeners to your component, and call setFocusable(true) on it. 6: Integration with the rest of the application Once youve implemented and debugged your PhotoComponent, its time to integrate it into the application you wrote for Homework #1. Important Note: my recommendation is to not use full-size digital images when testing your application. Images take a lot of memory, and without additional configuration settings when you run Java, your Java Virtual Machine may run out of memory (this will especially be a problem when we start handling multiple photos in the next assignment.) So, to make your life easier, you may want to scale down your photos to fit within 2048×1536 or so pixels. When your application starts up, it should contain no photos, and hence no PhotoComponents. Selecting Import should prompt the user for a photo file (via the JFileChooser), and create a new PhotoComponent containing the selected photo and display it in the content area. Note that for this assignment, well only be dealing with a single photo. You dont need to worry about being able to select a folder and importing a bunch of photos... its ok if your program just pops up an error message or ignores any selection thats not a single file. The currently displayed PhotoComponent should be used in the central content area of your application and should resize properly when the window is resized, etc., as described above. (You dont have to worry about doing fancy stuff like scaling photos.) Selecting Delete Photo should delete the current PhotoComponent, meaning that the application should just show an empty content area. Selecting Previous and Next will do nothing, since theres only ever zero or one photos in this version of the homework. Changing any of the View Modes will do nothing, since were currently only ever displaying zero or one photos. Extra Credit There are a lot of ways to augment this assignment, should you choose to. Some obvious ways are: · More text and graphics processing · Allow editing of already-entered text, such as insertion or backspace. Up to +4 points, depending on features implemented · Customizable fonts. Either on a photo-wide basis (+1 point), or for individual spans of text (+3 points). · Pen sizes and ink color: +2 points. · Additional drawing tools, such as ellipses or rectangles: Up to +4 points, depending on whats implemented. Fancy features · Saving and loading of data. PhotoComponents should remember what picture theyre displaying as well as the strokes or text on them, between runs of the application. Itd be cool if this happened automatically as strokes or characters are entered, or photos are loaded, so you never have to remember to hit save. Up to +4 points. · Scaling photos. Provide a control to let the user scale the displayed photo up or down. +2 points · Other stuff. If you build in some particularly neat feature, make sure you let us know about it when you turn it in and well consider it for possible extra credit. PhotoBrowser/.idea/misc.xml PhotoBrowser/.idea/modules.xml PhotoBrowser/.idea/uiDesigner.xml PhotoBrowser/.idea/workspace.xml 1631621781254 1631621781254 PhotoBrowser/PhotoBrowser.iml PhotoBrowser/src/Main.java PhotoBrowser/src/Main.java public   class   Main   {      public   static   void  main ( String []  args )   {          PhotoFrame  frame  =   new   PhotoFrame ();         frame . setVisible ( true );      } } PhotoBrowser/src/PhotoFrame.java PhotoBrowser/src/PhotoFrame.java import  javax . swing . * ; import  javax . swing . border . Border ; import  javax . swing . filechooser . FileNameExtensionFilter ; import  java . awt . * ; import  java . awt . event . MouseAdapter ; import  java . awt . event . MouseEvent ; import  java . awt . event . MouseListener ; import  java . awt . image . BufferedImage ; import  java . io . File ; import  java . io . IOException ; public   class   PhotoFrame   extends   JFrame {      private   JLabel  statusBar  =   new   JLabel   ( Status );      //private PhotoComponent photoComponent = new PhotoComponent();          public   PhotoFrame ()   {              super ( Photothèque );             setupUI ();      }      private   void  setupUI ()   {         setPreferredSize ( new   Dimension ( 600 ,   400 ));         add ( createMenuBar (),   BorderLayout . NORTH );         add ( createToolbar (),   BorderLayout . WEST );         add ( statusBar ,   BorderLayout . SOUTH );          //add(photoComponent, BorderLayout.CENTER);         pack ();      }      private   JToggleButton  createCategory ( String  category ){          JToggleButton  b  =   new   JToggleButton ( category );         b . setBackground ( new   Color ( 99 ,   170 ,   166 ));         b . setForeground ( Color . WHITE );         b . setBorderPainted ( false );         b . setPreferredSize ( new   Dimension ( 80 ,   20 ));         b . setFont ( Font . getFont ( Font . MONOSPACED ));         b . addMouseListener ( new   MouseAdapter ()   {              public   void  mouseEntered ( MouseEvent  e )   {                 b . setBackground ( new   Color ( 62 ,   148 ,   144 ));                  }              public   void  mouseExited ( MouseEvent  e )   {                 b . setBackground ( new   Color ( 99 ,   170 ,   166 ));              }          });          return  b ;      }      private   JScrollPane  createToolbar (){          JToolBar  tb  =   new   JToolBar ( JToolBar . VERTICAL );          JLabel  label  =   new   JLabel ( Categories );         tb . add ( label );          String   []  categories  =   { People ,   Places ,   Food ,   Fashion ,   Fun ,   Animals ,   Sport ,   School };          for ( int  i  =   0 ;  i  < categories . length ;  i ++ ){             tb . add ( createCategory ( categories [ i ]));          }         tb . setBackground ( new   Color ( 99 ,   170 ,   166 ));         label . setForeground ( Color . black );         tb . setFloatable ( false );         tb . setRollover ( true );          JScrollPane  scroll  =   new   JScrollPane ( tb );          return  scroll ;      }      private   JMenuBar  createMenuBar (){              JMenuBar  mb  =   new   JMenuBar ();             mb . add ( createFile ());             mb . add ( createView ());              return  mb ;      }      private   JMenu  createView (){          JMenu  menu  =   new   JMenu ( View );          ButtonGroup  group  =   new   ButtonGroup ();          JRadioButtonMenuItem  browser  =   new   JRadioButtonMenuItem ( Browser );         browser . setSelected ( true );         browser . addActionListener ( e  ->  statusBar . setText ( Displays browser view ));         group . add ( browser );         menu . add ( browser );          JRadioButtonMenuItem  photo  =   new   JRadioButtonMenuItem ( Photo viewer );         photo . addActionListener ( e  ->  statusBar . setText ( Displays photo view ));         group . add ( photo );         menu . add ( photo );          return  menu ;      }      private   JMenu  createFile ()   {          JMenu  menu  =   new   JMenu ( File );         menu . add ( importation ());         menu . add ( delete ());         menu . add ( quit ());          return  menu ;      }      private   JMenuItem  quit (){          JMenuItem  quit  =   new   JMenuItem ( Quit );         quit . addActionListener ( e  ->   System . exit ( 0 ));          return  quit ;      }      private   JMenuItem  delete (){          JMenuItem  delete  =   new   JMenuItem ( Delete );         delete . addActionListener ( e  ->  statusBar . setText ( Deletes photo ));          return  delete ;      }      private   JMenuItem  importation ()   {          JMenuItem  importation  =   new   JMenuItem ( Import );         addPhoto ();          return  importation ;      }      private   void  addPhoto ()   {          JFileChooser  fileChooser  =   new   JFileChooser ();         fileChooser . setDialogTitle ( Choose  picture );         importation (). addActionListener ( e  ->  fileChooser . showOpenDialog ( new   JFrame ()));         fileChooser . setFileSelectionMode ( JFileChooser . FILES_ONLY );         fileChooser . setFileFilter ( new   FileNameExtensionFilter ( Picture files , jpg ,   png ,   jpeg ));          String  file  =  fileChooser . getSelectedFile (). getPath ();          //try {            //  photoComponent.getModel().loadImage(new File(file));          //}          //catch (IOException exception) {            //  exception.printStackTrace();          }      }