CodeGym /Courses /Java Multithreading /Big task: HTML editor in Java

Big task: HTML editor in Java

Java Multithreading
Level 8 , Lesson 15
Available

"Hi, Amigo!"

"Hello, Captain Squirrels, sir!"

"Soldier, we have a secret mission for you. You will develop a tool for creating web pages."

"Cool, web pages. But why do we need our own editor?"

"What do you mean 'why'? Soldier, orders aren't for discussion. They're for execution."

"Yes, sir! Write a tool for creating web pages."

"Don't shout, soldier. Didn't they tell you this is a top secret mission."

"Contact Agent IntelliJ IDEA to begin. He'll bring you up to speed."

"He'll also provide all further instructions."

"May I proceed, sir?"

"Proceed."

16
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 1)
Today we'll write an HTML editor with a graphical user interface. We'll use Swing to create the GUI. And we'll use the MVC pattern as the architectural framework for our application. 1.1. Declare a Controller class and a View class.
9
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 2)
2.1. Add init() methods, empty for now, to the controller and view. They will be responsible for initializing the controller and view. 2.2. Now we will write a main method in the Controller class. It must: 2.2.1. Create a view object. 2.2.2. Use the view to create a controller.
9
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 3)
The graphical interface will be a window with a menu and a pane with two tabs. The first tab will be a text pane that will render an HTML page. Here it will be possible to format and edit the text of the page. The second tab will have an editor that will display the page's HTML code.
16
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 4)
4.1. Declare initMenuBar() and initEditor() methods in the View class. They will be responsible for initializing the menus and editor panes. 4.2. Declare an initGui() method in the view. It will initialize the graphical interface.
9
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 5)
5.1. In the listeners package, declare a TabbedPaneChangeListener class that implements the ChangeListener interface. This class will listen for and handle changes to the state of the tabbed pane.
32
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 6)
Implement the initEditor() method, which initializes the editor panes. It must: 6.1. Set "text/html" as the content type for the htmlTextPane component. Find and use the appropriate method. 6.2. Create a new local JScrollPane component based on htmlTextPane.
32
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 7)
Add a MenuHelper class. This will be a helper class for initializing and configuring the menu. The menu will have the following structure — File: New, Open, Save, Save as..., Exit; Edit: Undo, Redo, Cut, Copy, Paste.
32
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 8)
It's time to add all the necessary menu items and write classes for the actions that are performed when the menu items are selected. This is quite time-consuming, routine work. You're a great student and we wouldn't want to upset you. So, as a bonus, you're getting a ready-made MenuHelper class!
32
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 9)
9.1. Implement the initMenuBar() method. It must: 9.1.1. Create a new JMenuBar object. This will be our menu bar. 9.1.2. Use MenuHelper to initialize the menu in the following order: File, Edit, Style, Align, Color, Font, and Help.
16
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 10)
Our editor will support undo/redo of actions performed in the editor. Implement the UndoMenuListener class. This listener will listen to the menu, or more accurately, it will listen for the moment when the edit menu is selected by the user.
16
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 11)
11.1. Add an UndoManager undoManager field to the view. Figure out what this class is used for. Initialize the field with a new object. 11.2. In the listeners package, add an UndoListener class that implements the UndoableEditListener interface.
16
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 12)
12.1. Implement the RedoAction class: 12.1.1. Add a View field to the class. Add its initialization in the constructor. 12.1.2. Implement the actionPerformed(ActionEvent actionEvent) method. It should call the redo() method on the view.
16
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 13)
Let's implement the TextEditMenuListener class in the listeners package. This class will work like the UndoMenuListener class, but for other menu items. The menu items responsible for style, font, color, etc. should only be available when the first tab is selected in our editor.
16
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 14)
14.1. Add a selectHtmlTab() method to the view class. It must: 14.1.1. Select the HTML tab (switch to it). 14.1.2. Reset all edits using the method you previously implemented. 14.2. Add a getter for the model to the controller class. In our case, this is the document field.
16
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 15)
Add a resetDocument() method to the controller. It should reset the current document. It must: 15.1. Remove the undo/redo edit listener from the current document (find the appropriate method inherited from AbstractDocument). You need to ask the view for the listener (getUndoListener() method).
9
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 16)
Add a setPlainText(String text) method to the controller. It will write the passed text with HTML tags to document. Implement it as follows: 16.1. Reset the document. 16.2. Create a new StringReader based on the passed text.
9
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 17)
Add a String getPlainText() method to the controller. It should get text from the document with all the HTML tags. 17.1. Create a StringWriter object. 17.2. Copy all of the document's contents to the created object using the HTMLEditorKit class's write method.
9
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 18)
Implement the view's selectedTabChanged() method. This method is called when the selected tab changes. Let's begin: 18.1. The method should check which tab is currently selected.
9
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 19)
Implement the actionPerformed(ActionEvent actionEvent) method on the view. This method is inherited from the ActionListener interface and will be called upon selection of menu items that our view has been added to as an event listener.
9
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 20)
20.1. Implement the createNewDocument() method in the controller. It must: 20.1.1. Select the HTML tab on the view. 20.1.2. Reset the current document. 20.1.3. Set a new window title, e.g. "HTML editor". Use the setTitle() method, which is inherited by our view.
9
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 21)
To open and save the file, we'll use JFileChooser from the swing library. Objects of this type support filters that inherit FileFilter. Now we'll write our own filter: 21.1. Create a public HTMLFileFilter class that inherits FileFilter.
16
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 22)
In the controller, let's implement the saveDocumentAs() method for saving the file under a new name. The implementation should: 22.1. Switch the view to the HTML tab. 22.2. Create a new JFileChooser object. 22.3. Set an HTMLFileFilter object as its filter.
16
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 23)
23.1. Let's write the saveDocument() method for saving the current file. The method should work the same as saveDocumentAs(), but not ask the user for a file. Instead, it should use currentFile. If currentFile is null, then call the saveDocumentAs() method.
9
Task
Java Multithreading, level 8, lesson 15
Locked
HTML Editor (part 24)
Your HTML editor is ready! You learned how to: - Create applications with a graphical interface. - Work with dialog boxes. - Use classes from the Swing library. - Implement interaction between program components with the help of events, listeners, and actions.
Comments (13)
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION
Максим Василенко Level 44, Kiev, Ukraine
21 February 2023
why we need to learn swing in 2023???
TomL Level 30, Prague, Czech Republic
25 January 2023
I am sorry, but for me it was really unclear what the model actually is. Ok, it is object of class HTMLDocument referenced by document. But as Model in MVC pattern represents login of the application, the part of the “model”, are also actions (in package of the same name) and listeners logical parts of the model? Or this is just some additional logic? Also, could someone please help me with understanding of relation between objects? Is the relation between controller and view aggregation? (objects can exist independently and can be changed)
Максим Василенко Level 44, Kiev, Ukraine
25 February 2023
I lost the logic at the beginning. This task is very strange. P.s. Did you find a job after this course?
Justin Smith Level 41, Greenfield, USA, United States
16 June 2022
It's a good overview of working with Java's built-in menu system. Most of the things that seem like they will be extremely difficult at the beginning to the project (changing fonts, opening/closing files, parsing HTML code) are actually really simple because Java can do it for you. I'm hoping there's still more to come on working with the other parts of Swing, mainly drawing shapes, displaying images, and animation.
Fadi Alsaidi Level 34, Carrollton, TX, USA
25 December 2021
I really liked this task. It could be my inexperience or short sight, but it seemed to muddy my simple understanding of MVC models. the view & controller are clearly defined in one class, yet the model is spread out through the many actions and listeners classes. I personally would have put all of them in a package called Model. Also, the view implemented some actions, for example undo(), that would have been better implemented in the Model Package if such a thing existed, or in a class of it's on. This way the View would have only user interface/UI/GUI which calls out actions from the many classes in the Model package, and the Controller handles the file source.
Naughtless Level 41, Olympus Mons, Mars
7 October 2021
Maybe a slower introduction to Swing? 😒
TheLordJackMC Level 39, Princeton, idk somewhere
5 August 2021
speedran it using the incomplete tasks and switching as soon as i verified
Andrei Level 41
20 May 2021
Wow, this task was actually fun!
MaGaby2280 Level 41, Guatemala City, Guatemala
3 March 2021
Exhausting task, but surprisingly well explained, every step has a great explanation! It took almost a week to complete, but was a great experience!!!
fzw Level 41, West University Place, United States
21 May 2020
Have no idea what is going on when doing this task. :(
Seb Level 41, Crefeld, Germany
7 February 2020
Excellent task! Very clear instructions. A nice repetition of the MVC pattern and a good introduction to Swing. Enjoy! ;-) :-)
Satya Vath Level 31, Vijayawada, India
25 March 2020
Can You Please Check The Help Section of HTML Editor (part 2) Help Me