ASCII-Animal-Art

A simple web application that displays ASCII art based on the input text.

This is my first web application built using Vaadin and Java Spring Boot. I built this in high school for my Advanced Placement (AP) Computer Science A class.

Files Overview

• DemoApplication.java - Contains main() and routes to MainView.java
• MainView.java - Contains function definitions to generate the UI components and display the art.

MainView.java

Variables

  // First part of the web page that controls the Instructions, Text Field, and Button
  private VerticalLayout vl;
  // Second part of the web page that controls image displayed
  private VerticalLayout vl2;
  // Used to dynamically generate the image based on user input
  private StreamResource imgResource;
  // Text Field component for getting user input
  private TextField textField;

Methods

  // Returns a text box with placeholder text and Instructions for User around the text box
  public TextField createText()
  // Returns a button that is styled and contains a listener to call printAnimal() if Enter pressed
  public Button createButton()
  // Returns a vertical layout containing image component. Uses 'request' parameter to choose animal art image.
  public VerticalLayout printAnimal(String request)

Summary

When main() runs, the @Route("") in MainView.java defines the MainView class as the default route target. This means that the MainView component is the default page displayed. Similar to how the Home page of a website is displayed first.

The class' public constructor will then separate the webpage into two sections using two Vertical Layouts.

• The first section contains: Instructions, Text box, Helper Text, and Submit Button.
• The second section is initially empty and will be filled with an image once the user provides a valid animal name (via text box).

The text box uses a regex expression to ensure entered characters are alphabets only. Once the user clicks the Submit button or presses the Enter key, the Button's listener is triggered and calls the printAnimal() method. Finally, printAnimal() replaces the second section of the webpage with the new animal image. It uses StreamResource's getResourceAsStream() to retrieve the image via file path. Now you can see the animal built from ASCII characters!

DemoApplication's main() -> MainView() public constructor -> User types text -> User presses Enter key or hit Submit Button -> Submit Button's Listener is triggered and calls PrintAnimal() -> PrintAnimal() uses switch case to return appropriate image -> Button() receives returned image and replaces second section of webpage with returned image

Steps

Development Environment Used: IntelliJ IDEA

Default Page

Generated by MainView() public constructor + methods

ASCII art image Added

Image Added after Submit Button's Listener triggered by Enter key or Button Click. PrintAnimal() called and Cat image added.

Incorrect input

If input text is not one of the animals from the options provided then default image displayed is red X.

Here are some websites if you are interested to learn more about the Spring Boot framework.

• https://www.ibm.com/topics/java-spring-boot
• https://azure.microsoft.com/en-us/resources/cloud-computing-dictionary/what-is-java-spring-boot

Documentation

• Vertical Layouts: https://vaadin.com/docs/latest/components/vertical-layout
• Stream Resource: https://vaadin.com/docs/v14/flow/advanced/tutorial-dynamic-content
• Navigation & Routing: https://vaadin.com/docs/latest/flow/routing/route

If you are interested in using Vaadin: https://vaadin.com/

Thank you!