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, Apr 08 '12 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. — , Apr 08 '12 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, Apr 08 '12 at 16:50
Possible duplicate of [How to use HTML and CSS as a Java application GUI?](http://stackoverflow.com/questions/7176981/how-to-use-html-and-css-as-a-java-application-gui) — Suma, Mar 30 '17 at 17:45

score 5 · Answer 1 · answered Apr 08 '12 at 23:00

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();
                }
            }
        });
    }
}

score 4 · Answer 2 · edited Apr 08 '12 at 22:51

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();
            }
        });
    }
}

@trashgod +1 for the screenshot. Thanks. :) – Andrew Thompson Apr 08 '12 at 22:53 — Andrew Thompson, Apr 08 '12 at 22:53
That was, I must say, dead simple. :) +1 – Rakesh Juyal Apr 09 '12 at 05:05 — Rakesh Juyal, Apr 09 '12 at 05:05

score 2 · Answer 3 · answered Apr 08 '12 at 17:04

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 08 '12 at 17:04

Momo

2,471
5
31
52

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. – Rakesh Juyal Apr 08 '12 at 17:12
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. – Momo Apr 08 '12 at 17:23

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

3 Answers3

Linked