Written by Larry Gray on . Posted in CSS

CSS Explained

What is CSS?

CSS stands for Cascading Style Sheets. CSS is a style sheet language which is used to enhance or describe how a document written using a markup language is presented on a web browser. Basically HTML or any other markup language should contain the content for the web page and CSS would do all the formatting and layout control. So all the fonts, positioning and decorating of all the elements on a web page is done using Cascading Style Sheets.

border:1px solid #000;
float: left;
width: 33%;
float: left;
width: 34%;
width: 33%;

Even though CSS is used more commonly with markup languages such as HTML and XHTML, it can  be used with XML documents as well. CSS is also applied in rendering of speech and certain other types of media.

CSS is mainly used to bring webpages, web applications and web user interfaces from the state of a basic content page to something visually engaging for the users by maintaining the look and feel of the page. In addition to the common use of CSS on the web, it's used in designing mobile user interfaces as well.

History of CSS

The invention of CSS took place in the recent past. To be precise, it was proposed or invented on the 10th of October, 1994 by Hakon Wium Lie who was working at CERN at the time. Although number of other style sheet languages were also proposed during this time, the W3C (World Wide Web Consortium) recommended and released a recommendation for CSS as CSS1 in 1996.

Note: CSS is currently maintained by the W3C CSS Working Group. This group is responsible for releasing recommendations after agreeing on a CSS specification.

Versions of CSS

The first version of CSS, CSS1 (Cascading Style Sheets Level 1)as mentioned earlier, was released in 1996. By 1998, the second CSS specification was released by W3C as CSS2 which was developed based on CSS and had improved features such as the support for media-specific style sheets.


The version of CSS in use at the present is CSS3 which was released in June, 1999. CSS3 is also built on the previous versions of the language. The specialization in CSS3 was its division into documentations known as Modules.

CSS Modules

  • Box Model
  • Background and Borders
  • Text Effects
  • Selectors
  • Image Values and Replaced Contet
  • 2D/3D Transformations
  • User Interface
  • Multiple Column Layout
  • Animations

Syntax and Usage

HTML formatting can be controlled by other types of style sheets rather than CSS. But since CSS is the W3C recommended standard style sheet language, it's best to give priority to CSS as the style sheet language for all your web sites and applications.

Applying CSS to your webpage can be done in several ways. CSS can be,
  • located in a separate CSS file for the entire web site.
  • located in multiple CSS files for specific pages.
  • located within a web page itself as a CSS section or within the html tags.
The 3 basic methods of CSS application is as follows.
  1. External
  2. Internal
  3. Inline
Note: It's not the best practice to use inline CSS. In this way you will only need to edit one or two css files in order to change the format and layout for a web site with hundreds of pages. You can see the efficiency in editing and maintenance of this vs using any formatting and layout control within the HTML. There is a CSS Level 3 but CSS Level 3 as of this writing is beginning to be implemented in all browsers except IE. There are web sites with tables to show each major browser vendors and the CSS features supported for various levels of CSS. For more info see w3c.org

Meaning of Cascading

Cascading in CSS means that it is defined in a parent child type relationship. Inner portions of web pages inherit CSS sytling from their containing parent portions. Html elements inherit from parent elements and so on. Children can add to or override parent formatting. 'div' tags 'id' and 'class' attibutes play inportant roles in all of this. There are varying way to enhance your web site with menu like features. I have found that using CSS for the menu is the best way to go. This web site uses CSS for its menu. No Javascript is necessary. Using CSS you may also do other interesting things such as fancy tool tips on mouse hover.


Written by Larry Gray on . Posted in HTML

HTML Explained

Hyper Text Markup Language

When we say HTML, the first thought that comes to our heads is "what does HTML stand for?". So let's start at the beginning. HTML stands for Hyper Text Markup Language. In fact, it's the markup language which is used to create web pages and applications which you view every day on the internet. Its pretty much what began the internet as most people know it.

HTML facilitates a web designer to specify what content is needed to be displayed on a web page to be accessed later by us using a web browser. The current standard version of HTML is HTML 5.0 though HTML 4 is also still in wide use.

But, before we go into more details about HTML, let's find out what Hyper Text and Markup Language means.

Hyper Text

<!DOCTYPE html>
   <title>My First HTML</title>
   <meta charset="UTF-8">

   <h1>My First Heading</h1>

   <p>The current standard version of HTML is 

    <a href="https://www.w3.org/TR/html5/">HTML 5.0</a> 


    <a href="https://www.w3.org/TR/html4/"> HTML 4 </a> 

    is also still in wide use.</p>
     <li>List Item 1</li>
     <li>List Item 2</li>
     <li>List ITem 3</li>

Hyper Text means text that is not linear. Or in other words, it's text that contains links to other text. The best example you can take is hyperlinks which links you to other pages, paragraphs or even webpages. Hyper Text can be used to move around the web to any place with the use of links.

HTML HyperLink example.
<a href="http://www.somelink.com/somefolder/index.html">
Example Link

Markup Languages

Markup Language (acronym: ML) is a language which is used to annotate text and mark them for manipulation using a computer. Markup languages help the computer to distinguish the text to be manipulated and is therefore human readable. Some well known markup languages include HTML, XML (Extendable Markup Language) and XHTML (XML and HTML combined later to become HTML5).

XML Example
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="xmlseedsstyle.css"?>
   <TITLE>Seeds On Hand</TITLE>
      <SUPPLIER>Fred Brown</SUPPLIER>
      <AMOUNT>1 lb</AMOUNT>
      <SUPPLIER>Judy Green</SUPPLIER>
      <AMOUNT>1/2 lb</AMOUNT>
      <SUPPLIER>Fred Brown</SUPPLIER>
      <AMOUNT>1/4 lb</AMOUNT>
      <SUPPLIER>James Gardner</SUPPLIER>
      <AMOUNT>5 lbs</AMOUNT>

While HTML contains predefined markup tags to present the data in a structured manner, some languages such as XML doesn't contained predefined presentation semantics. You can make your own xml tags up at will. Java makes heavy use of xml files for configuration files. Java has superb API's for reading and writing xml.

HTML Elements

HTML documents are made by a collection of nested elements. The elements are predefined, each having a specific function to give the final result we see in a web page.


A single HTML element is comprised of a single tag or a pair of tags. The HTML tag is denoted by enclosing the name of the element in angle brackets.

Ex: <head>

In the general case of having a pair of tags, the first tag is the opening tag and the last tag is the closing tag of the element. The closing tag is specified by adding a forward slash in front of the element name in the tag. Together the two tags define the scope of the element and its effect to the content.

<h1> Content to be affected </h1>

Basic HTML elements

HTML element- The opening and closing HTML tags, <html> and </html> indicates the HTML content which finally makes up the web page. This usually comes first in the file or after the DTD (Doc Type Declaration).

The next two important elements are the Head and the Body elements which are found nested in the same level, in the given order within the HTML element.

Head element- The text between <head> and </head> tags include the title element, metadata and other scripts and links to CSS stylesheets.

Body element- The body element denoted by <body> </body> tags contain the elements and content that makes up the visible content on the final output of the web page.

Title element- This element nested within the head tags are used to give the title for the web page to be displayed on the browser tab.

Doc Type Declaration- The DTD or the Doc Type Declaration varies with the version of HTML you want to use for your web pages. For HTML5, the DTD is <!DOCTYPE html>. And this is specified at the beginning of your HTML file.

Hello World in HTML

Given below is the simplest 'Hello World!' program for HTML with its output.

<!DOCTYPE html>
     <title> This is a title </title>

     Hello World!


While an opening and closing tag can define basic scopes, there are attributes of elements that can enhance the functionality of a tag or give the declaration a more specified definition. An element can have one to many attributes.

These attributes are given values to specify the required end result. While some attributes have fixed values like 'true/false', there are other attributes which can have a numerical range. If the values of attributes are not specified by the designer, they are assigned with their default value.

 <body align="center">
    Some text to be center justified.


Comments can be added in HTML to facilitate the reader to understand the function of each element's usage or the markup in an HTML file. A comment doesn't appear on the end result of the web page but can be refereed from the HTML file.

<!-- This is a comment -->

Parentage and history 


HTML was born as a subset of SGML (Standard Generalized Markup Language), based on SGML principles. Therefore HTML is a SGML application alongside XML and XHTML which are also SGML applications.

SGML was based on older generalized markup languages originated at IBM such as GML and ISIL.  But there's nothing more to note about SGML except to say when searched you can find out that there are other SGML applications in use as well. Learning a bit about SGML and its history will give you a better understanding of the complete technology surrounding its applications.

DTD (Document Type Definition) is also an important keyword to learn and get an understanding of when talking about HTML. This is because HTML as well as XML and XHTML all have their own DTDs. All SGML applications should have their own DTDs.


The beginning of HTML is marked in 1989 when a physicist named Tim Berners-Lee working as a contractor at CERN proposed an internet based hypertext system. Even though he wrote the browser and server software for HTML in 1990, the specification for HTML was released to the public in late 1991, in a document by the name of 'HTML Tags'. This first version comprised of 18 HTML elements of which 11 are still available in HTML 4.


HTML 5 is a combination of HTML 4 with enhancements, XHTML and HTML DOM. It is best practice now days to use HTML only for the content of the web page and not for formatting. Instead CSS level 3 is now used for Formatting your web site. As a matter of fact HTML comes with standard basic formatting which is usually completely replaced with CSS formatting. Though it doesn't have to be, CSS may merely alter or add to the basic HTML formatting. I say more about CSS in the article about CSS.

HTML constantly goes through revisions and additions to cater the demands of the growing population of internet users. These changes are overlooked by the W3C (World Wide Web Consortium) which designs and maintains the HTML language and its standards. Therefore, if you require more information on HTML, the best place to visit is w3c.org.

Important changes in HTML standard best practice.

  1. Tables should no longer be used for layout, use CSS instead.
  2. Tables should only be used for displaying tabular data.
  3. HTML frames are no longer recommended and should not be used, use div tag and CSS instead.
  4. Though iframe (internal frame) might have limited usefulness in certain applications.

Java Ant

Written by Larry Gray on . Posted in Ant

Java Ant

While DOS and Unix shell scripting can automate developer task, in the Java world there is a problem with this. Both DOS and Unix shell scripts are system dependent solutions. A single developer one day decided to sit down and write Ant and it was an immediate success. Ant is a system independent solution. Ant uses XML files called build files or build.xml to describe task to be performed by Ant. Below I list some common task that ant can perform for you. To run the script you simply go to the folder with the build.xml file and run the command 'ant'. Ant will then report if it was a successful build or not.

  • compile sources
  • delete folders and files
  • move folders and files
  • archive files in jar and war files
  • build javadocs (java documentation)
  • upload files using ftp or scp to servers(for deployment)
  • run commands on the local development machine
  • run commands on remote servers
I'm sure that there is much more that ant can do for you. And you can make up custom task at will. I will update this article as I use ant and learn more.


I must at least mention Maven. Maven is another project management and building tool that works in conjunction with Ant. Maven manages the building and production of multiple projects.

Unix Bash Shell Scripts

Written by Larry Gray on . Posted in Bash

Unix Bash Shell Scripts

There are whole books written on how to code unix shells scripts. Unix shell scripts are as powerful as any programming language. I think the famous C/C++ 'make' utility is one such example. Unix usually starts up it's users with the Bash shell and I'll provide some simple examples here later. C Shell is another popular Unix alternative. Born shell is yet another.

Note that If you provide shell scripts in your distribution you will probably be providing DOS batch scripts as well. Ant is the better solution in the Java world. And uses XML for its scripting language. Ant and xml are system independent making Ant the better solution.

Windows Shell

Written by Larry Gray on . Posted in Windows Shell

Batch Scripts (MS Windows Users)

There is much on the web to teach you to code DOS batch scripts. DOS is indeed not dead. Windows 95 had its own version of DOS which has been carried into the latest versions up to Windows 7. I will provide some examples from some projects here for using DOS to automate some deployment task.

DOS can be enhanced with added commands. You may even get enhanced DOS command terminals. There used to be a color DOS which would color your terminal similar to Unix terminals. If you want to work with a unix like command terminal on windows you may use CYGWin. Though I won't talk more about CYGWin.

This kind of thing was tried in the GUI with macros but I never found that to be useful. It was difficult to setup Windows macros to work properly. And you may click on any .bat file within the windows GUI to run it. This means that you may have a .bat file or shortcut to a .bat file on your desktop or as a menu item. If you want to try out a batch file now simply make a file with .bat file extension. Put some DOS commands in it and then type its name at the command line. Stand back and watch as multiple commands run.

You may also get some support for DOS on IRC networks in #DOS channel. There were different versions of DOS at one time. PC DOS(IBM) and Dr. DOS. Today you will probably only work with MS Windows XP shell. This is the version of DOS used from XP up to Win10

If you are familiar with DOS and you want to use DOS instead of Ant then I say go for it. I mean if its quick and easy and will save you some time, then its not wrong. Though Ant is the standard for this type of thing because Ant is (made using Java) and uses XML for the scripting. Which means it is system independent. This goes well with Java since it is also system independent. If you are not familiar with DOS I recommend you read my article on Ant and install and use that instead. If you are familiar with DOS you should convert to Ant as soon as you can.

Shell Scripts

Written by Larry Gray on . Posted in Shell Scripts

Scripts come in about two kinds for me, DOS batch files and Bash Shell Scripts on Linux and Ant scripts which are in XML format. What are scripts good for? Automation. A developer finds himself doing certain time consuming task repeatedly. This is a good sign that a script is needed. A programmer spends his life trying to turn 1,000,000,000 instructions into 1,000,000. And 1,000,000 into 100,000. And 100,000 into 1,000, and 1,000 into 100, and 100 into 10, and 10 into 1. Finally this ends up as a single mousce click. This is programming. This is scripting. I don't have much to say here so I'll refer you to the articles on Windows Shell(used to be DOS), Bash and Ant.

Arksoft Podcast Episode 6- Open Source Projects and Arksoft Updates

Written by Larry Gray on . Posted in podcast

On this one I tell you about my open source projects..

Java Reference
Java White Board
Java Cave Maps
Java Games and Graphics
Java Quiz
Java Ledger
Java Heat Wave
Open Text Reader
I talk about my experience thus far with open source and open source developers. I tell you about what has been accomplished thus far. Decisions I've made good or bad and upcoming changes. I tell you about the new feature on Arksoft.org broadcasting my coding sessions or giving live classes.

Arksoft Demo 2 Applets Part 1

Written by Larry Gray on . Posted in Videos

I show you how to find the dox console, or windows shell, or command line. I show you how to find and use the Java Control Panel. I show you how to add a trusted site. I show you how to write and applet and view it with both applet viewer and Windows Internet Explorer from the local hard drive or localhost. I also show  you a little about a Java game Free Colonization. http://freecol.org

Arksoft Podcast Episode 5 – Java Standard Libraries Part1 Core java packages

Written by Larry Gray on . Posted in podcast

  • Other types of classes, Error
  • assert keyword and AssertionError can turn off with compiler option
  • debugging using System.out.println();
  • serializable keyword
  • Also need to explain that you do not have to extend an abstract class to use its static members.
  • Also its a compile time error to try to have a abstract static method or member.
  • explain java arrays, no 2 dimentioned arrays, only arrays of arrays
java, javax, and org
  • java
    • applet
      • applet is a java.awt.Panel
      • start, stop, init, destroy
      • methods to play sound
      • methods for loading images
      • other utility type methods
    • awt
      • Canvas,Panel, Frame, Button, Menu, Edit Box etc.
      • Layout management classes
      • Image processing classes
      • Color classes
      • Windows event handling classes for mouse and key events and window events.
      • Graphics drawing and shapes
      • Clipboard
      • Drag and Drop
      • Fonts and printing
    • beans
    • io
      • Streams and Buffered Streams
      • Readers and Writers
      • File IO
      • Object Streams serialization
      • Input and output streams
      • standard out, in and error
      • Piped Streams
      • Ramdon Access File
      • Sequential Input and Output
      • Stream Tokenizer
      • String Reader and Writer
    • lang
      • Interfaces
        • Cloneable
        • Comparable
        • Iterable
        • Runnable
      • Classes
        • Object
        • Byte, Boolean, Character, Double, Fload, Integer, Long, Short, String
        • Class, Pacakge  java reflections  introspection  java.lang.reflect package
        • ClassLoader
        • Math
        • Number
        • String Buffer
        • System
        • Tread and Thread related
        • Throwable
          • All Errors and Exceptions
      • Exceptions
        • ClassCast, ArrayIndexOutOfBounds, NullPointerException
        • Exception, RuntimeException, checked and unchecked exceptions
        • NumberFormatException
        • SecurityException
      • Error
        • Error  could or should try to catch java.lang.Error to provide more debug info. But typically these are not thrown or caught by a developer.
        • Errors are more related to the system and are fatal in nature.
        • Errors cause the program to crash. Errors are unchecked by compiler.
        • NoClassDefFoundError, OutOfMemoryError
    • math
      • BigDecimal
      • BigInteger
    • net
      • sockets, cookies, urlstreams,
      • Inet4, Inet6 andInet address
      • InetSocketAddress can be hostename+port or ip+port
      • unicast, multicast, tcp an udp
      • ServerSocket and Socket(client socket)
      • Well known ports 0 to 1023 and IANA maintains the official list of well-known and registered ranges, registered ports 1024 through 49151, dynamic or private ports 49152 through 65535
      • javax.websockets note
      • SocketIpml is an example of an abstract class in the api, which All socket classes must extend.
      • Password Authentication, network permissions, JarURLConnection, HTTPURLConnection
      • URLConnections
      • SocketException, SocketTimeOutException, MalformedURLExcption, ConnectException, UnknownHostExcpetion
    • nio
      • nio.file gives you some tools for working with folders and files on a system.
    • rmi
      • remote method invocation
      • allows you to setup and create an rmi client server. the client may call or invoke methods on the server and get return values back.
    • security
      • deals with certificates, public and private key encryption,
      • policy files,  and permissions
    • sql
      • and javax.sql are powerful set of classes for accessing databases
      • its called java database connectivity and is database independent, any database with a driver can be accessed with java. standard sql can be used to manipulate the database.
      • you bassically connect to a database and if that goes well you can use direct execution of sql or prepared statments. You will get back a resultset which is like a table of data.
      • you will see a lot of interfaces that have no implementation. This is because DriverManager gives you an implementation of Connection which gives  you an implmementation of ResultSet etc.
      • And this is a perfect example of the power of Interfaces.
      • So basically using Java you program the "front end to a database".
      • By the way let me mention right now HSQLDB a database written in Java and new rewrite of it called H2. I've used both and they work well.
      • SQLException and other SQLException sublcasses
    • text
      • classes for handling numbers and dates time in text and conversion to actual number or date objects.
      • Also for other text formatting problems.
    • time
      • classes for handling clock and callender type problems.
    • util
      • Arrays, ArrayList, ArrayDequeue
      • Collections such as, Collection, Set, Map, List, HashMap, HashSet, EnumMap, EnumSet, Hashtable, LinkedHashMap, LinkedHashSet, LinkedList, Stack, TreeMap, TreeSet, PriorityQUeue, Queue, Dictionary(Hashtable), Vector
      • Calender, Date, Time, Gregorian Calender, Locale, Simple Time Zone, TimeZone
      • Observable Class, Observer Interface
      • Properties files class
      • DoubleStatisticsSummary, LongStatisticsSummary and IntStatisticsSummary  give count, min, max, sum, and average.
      • Formatter interprets printf style strings
      • Random Class gives a stream of Int, Long or Double Random numbers
      • Scanner, scans Files, Streams or Sources and Strings, will split based on delimiters or whitespace.
        • Also finds tokens, search strings, and next data of various types such as int, double, and others.  Its a  handy way to process text data.
      • Currency class
      • StringJoiner and StringTokenizer  for joining and spliltting strings
      • Timer
      • UUID universal unique immutible identifier.
      • Objects has methods for opearting on Objects.
        • deepEquals() similar in concopt to deepClone()
Java Lang Object
  • clone
  • equals
  • finalize
  • getClass
  • toString
  • hashCode
  • notify, notify all and wait
Java Lang String
  • You can build strings from byte arrays, char arrays, Strings, StringBuffers.
  • Searching and matching
  • splitting, substring, joining strings, replace operations
  • converting primitives to strings
  • comparing strings
  • ends and starts with
  • is empty or length = 0 and length
  • to upper and lower case
  • makes char arrays from whole or part of string
  • makes byte arrays from whole or part of string
  • formatter for working with printf style strings
Java Util Arrays
  • make an array a List
  • binary searching of arrays
  • copying arrays and parts of arrays
  • deep equals, deep hashcode and deep toString
  • comparing equality
  • filling an array
  • hashcodes for types of arrays
  • parallel operations on arrays using functions
  • setting all elements using functions
  • sorting arrays
  • iterating methods called spliterators
  • turns the array into a stream for use in IO operations
  • and toString for types of arrays
Java Awt Graphics class A graphics object is an object that wraps up a piece of screen real estate. Your application based on the size of your frame is given some space on the screen. The graphics image underlying of course can be larger than that space and positioned at the top left corner of that space as 0,0  with + Y going downward and +X going across to right. Upside down Cartesian coordinates or algebra coordinates.  You usually work with BuffedImages and cast to Image and use that with Graphics or Graphics2D classes. Graphics and Graphics2D are interfaces so you would get one from the paint or paintComponent methods in Canvas, Panel or JPanel classes
  • clearing and filling rectangles
  • drawing boxes, rectangles, ovals, circles, arcs
  • drawing Strings, char arrays, and byte arrays as text
  • drawing lines and polygons
  • filling shapes
  • drawing images and textures
  • drawing in clipped regions
  • drawing in xor mode (reverse image)
  • Graphics 2D has more than this.. I will cover in next podcast
  • get and set pen color for drawing or text.
  • has methods for working with fonts
  • If you want to get a sub image from the main image you have to use BufferedImage class By making a BufferedImage with an Image object
  next podcast will be java extended libraries
  • javax
    • accessability
    • activation
    • activity
    • annotation
    • crypto
    • imageio
    • jws
    • lang
    • management
    • naming
    • net
    • print
    • rmi
    • script
    • security
    • sound
    • sql
    • swing
    • tools
    • transaction
    • xml
  • org
    • w3c.dom
    • xml.sax

Arksoft Podcast Episode 4 – The Software Development Process

Written by Larry Gray on . Posted in podcast

  • I talk about beginning and growing your application
  • I talk about errors and debugging your application
  • I talk testing and unit testing your application
  • I talk about code repositories
  • I talk about ant build tool
  • I talk about commenting your application
  • I talk about rewriting and refactoring
  • I talk about agile methodology
  • I talk about managing productivity
  • And more.

Arksoft Podcast Episode 3 – Behavior, Code Blocks, Modules, Program Logic

Written by Larry Gray on . Posted in podcast

  • I talk about code blocks, which are statements between the {   } curly braces.
  • I talk about code indent and nested or nesting code blocks.
  • I talk about statements.
  • I talk about assignment statements.
  • I talk about methods used as functions.
  • I talk about methods run as commands.
  • I talk about local variables and visibility or scope.
  • I talk about branching logic or decision making such as if else or switch case
  • I talk about for loops, while loops.
  • I talk about break, continue and how they are not the evil goto commands you want to use.
  • I talk about anonymous classes
  • I talk about try catch exception handling
  • I talk about throwing exceptions

Arksoft Podcast Episode 2, What is a Java Application, Class and Object

Written by Larry Gray on . Posted in podcast

In this episode I give you a lot of meat to digest.
  • What is a Java Application
    • I explain how the JVM starts up and loads classes
    • I explain how classes are unloaded.
  • What is a Java Class and how are they Defined
    • I talk about the Class Header and Body and Types of Classes
    • I talk about fields and data types.
    • I talk about Method Header and Body and Types of Methods
    • I talk about constructor Methods and the main method.
    • I talk about Inheritance and Interfaces
    • I talk about Encapsulation and information hiding.
  • What is a Java Object
    • I talk about how to instantiate an Object
    • I forgot to talk about Garbage Collection so that will be in the beginning of the next episode.
    • I talk about casting objects to any of its parent types.
    • I talk about is-a and has-a relationships
    • I talk about pass by value vs pass by reference.
  • What is OOP(Object Oriented Programming) and OOP Design
    • I talk about design patterns
    • I talk about MVC (Model View Controller) design pattern.
    • I talk abut  Singleton design pattern.
    • I talk about good vs bad design
    • I talk about how to begin your app and when you should be concerned about design.
    • I talk about granularity, monolithic vs fine grained approaches.
    • I talk about over designing and how to avoid it.

Javascript and Google Web Toolkit

Written by Larry Gray on . Posted in Google Web Toolkit

Javascript and Google Web Toolkit

Google web toolkit is a set of tools which allows the Java programmer to write an interface using Java swing api. Google web toolkit then converts this Swing app to Javascript so that it can be run on a webpage.