Can we create GUI for standalone application using html and javascript?

Question

I have a Java program which until now used to get the input from command line and then proceed accordingly.

Now, I want to have a basic GUI for this. It will need a few buttons which will trigger the events. I am experienced in HTML and JavaScript. Is it possible to write in HTML (or similar syntax) to generate the GUI?

I don't want to go in Swing and awt solution, because I would rather concentrate on the main program than on the GUI.

Are you sure that goung into details of some tool that generates GUI given an HTML input will be easier than going into Swing details? :) Even if this tool exist, hardly will it be trivial. I suggest you to google for Swing hello world, it's quite simple when making trivial things like several buttons. Most likely that you will be ready to write simple GUI you need after an hour or two playing with Swing. — Alexey Berezkin
– Alexey Berezkin, Commented Apr 8, 2012 at 16:47
If you had read my answer you would see it is trivial and support by oracle. I also note that even though for most java/.NET developers (or anyone that ever tried WIN32API), swing can seem easy. But for newcomers in the area swing can be a daunting experience. — user1241335
– user1241335, Commented Apr 8, 2012 at 16:48
I don't know why I think I will have to invest much time in learning Swing, which I don't want. But even then +1 for the answer. :) — Rakesh Juyal
– Rakesh Juyal, Commented Apr 8, 2012 at 16:50
Possible duplicate of How to use HTML and CSS as a Java application GUI? — Suma
– Suma, Commented Mar 30, 2017 at 17:45

trashgod · Accepted Answer · 2012-04-08 23:00:43Z

Here's another alternative. See also How to Use HTML in Swing Components.

enter image description here

import java.awt.EventQueue;
import java.awt.FlowLayout;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.io.File;
import javax.swing.AbstractAction;
import javax.swing.JButton;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

/**
 * @see http://stackoverflow.com/a/10067256/230513
 * @see http://stackoverflow.com/a/7454691/230513
 */
public class Pathfinder extends JPanel {

    private static final int TEXT_SIZE = 32;
    private JTextField srcField = new JTextField(TEXT_SIZE);
    private JTextField dstField = new JTextField(TEXT_SIZE);
    private JTextField valueField1 = new JTextField(TEXT_SIZE);
    private JTextField valueField2 = new JTextField(TEXT_SIZE);
    private String srcPath, dstPath, value1, value2;

    public Pathfinder() {
        super(new GridLayout(0, 1));
        this.add(createPathPanel("Source Directory", srcField));
        this.add(createPathPanel("Target Directory", dstField));
        this.add(createFieldPanel("Some Value:", valueField1));
        this.add(createFieldPanel("Another Value:", valueField2));
        JPanel submitPanel = new JPanel();
        submitPanel.add(new JButton(new AbstractAction("Submit") {

            @Override
            public void actionPerformed(ActionEvent e) {
                srcPath = srcField.getText();
                dstPath = dstField.getText();
                value1 = valueField1.getText();
                value2 = valueField2.getText();
                process();
            }
        }));
        this.add(submitPanel);
    }

    private void process() {
        // see ProcessBuilder http://stackoverflow.com/questions/5740390
        System.out.println(srcPath);
        System.out.println(dstPath);
        System.out.println(value1);
        System.out.println(value2);
    }

    private JPanel createPathPanel(String name, final JTextField jtf) {
        JPanel panel = new JPanel(new FlowLayout(FlowLayout.TRAILING));
        panel.add(new JButton(new AbstractAction(name) {

            @Override
            public void actionPerformed(ActionEvent e) {
                JFileChooser jfc = new JFileChooser(
                    new File(System.getProperty("user.dir")));
                jfc.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
                int result = jfc.showOpenDialog(Pathfinder.this);
                if (result == JFileChooser.APPROVE_OPTION) {
                    jtf.setText(jfc.getSelectedFile().getPath());
                }
            }
        }));
        panel.add(jtf);
        return panel;
    }

    private JPanel createFieldPanel(String name, JTextField jtf) {
        JPanel panel = new JPanel(new FlowLayout(FlowLayout.TRAILING));
        panel.add(new JLabel(name));
        panel.add(jtf);
        return panel;
    }

    private void display() {
        JFrame f = new JFrame("Pathfinder");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.add(this);
        f.pack();
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }

    public static void main(final String[] args) {

        EventQueue.invokeLater(new Runnable() {

            @Override
            public void run() {
                Pathfinder pf = new Pathfinder();
                if (args.length > 0) {
                    pf.srcPath = args[0];
                    pf.dstPath = args[1];
                    pf.process();
                } else {
                    pf.display();
                }
            }
        });
    }
}

trashgod · Accepted Answer · 2012-04-08 22:51:19Z

4

I want to have a basic GUI for this. It will need a few buttons which will trigger the events.

This 'basic GUI' goes slightly beyond the spec. to add an output area.

Simple Event GUI

enter image description here

import java.awt.*;
import javax.swing.*;

class SimpleEventGUI {

    SimpleEventGUI() {
        JPanel gui = new JPanel(new BorderLayout());
        JToolBar toolBar = new JToolBar();
        for (int ii=1; ii<6; ii++) {
            toolBar.add(new JButton("Event " + ii));
            if (ii%2==0) {
                toolBar.addSeparator();
            }
        }
        gui.add(toolBar, BorderLayout.NORTH);
        gui.add( new JScrollPane(new JTextArea(5,30)), BorderLayout.CENTER );

        JOptionPane.showMessageDialog(null, gui);
    }

    public static void main(String[] args) {

        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                new SimpleEventGUI();
            }
        });
    }
}

edited Apr 8, 2012 at 22:51

trashgod

206k33 gold badges264 silver badges1.1k bronze badges

answered Apr 8, 2012 at 17:59

Andrew Thompson

169k42 gold badges224 silver badges441 bronze badges

2 Comments

Andrew Thompson Over a year ago

@trashgod +1 for the screenshot. Thanks. :)

Rakesh Juyal Over a year ago

That was, I must say, dead simple. :) +1

Momo · Accepted Answer · 2012-04-08 17:04:01Z

2

You may consider Google Web Toolkit with Window Builder which allow you to build a rich internet interface using Java and interact with the existing logic.

If you want something quick, you can build a Swing GUI using Window Builder

answered Apr 8, 2012 at 17:04

Momo

2,4915 gold badges33 silver badges53 bronze badges

2 Comments

Rakesh Juyal Over a year ago

Great, I think this is what I was expecting. Would you please tell me If I create the GUI using GWT + Window Builder, then what will be the prerequisite of my code to run on user system.

Momo Over a year ago

It's like any Java web application, you need to host your application on a web server with a Servlet container as Tomcat and the application should run on any Browser.

Collectives™ on Stack Overflow

Can we create GUI for standalone application using html and javascript?

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related