Programming challenge: Create a GUI window - Page 4

RupertPupkin · #46 25th July 2012, 11:15 PM

Here's an example in Guile, using the GTK+ bindings available through guile-gnome. To get guile-gnome to compile in F17, I had to modify one of the source files (changed glib/gnome/gobject/guile-support.h to include <glib.h> instead of <glib/gmacros.h>). You'll need to install the g-wrap-devel, guile-cairo-devel, and guile-devel packages via yum at the bare minimum (along with gtk2-devel and glib2-devel).

Here's the code, which can be run directly as a script:

Code:

#!/bin/sh
exec guile -s $0 2>/dev/null
!#

(use-modules (gnome-2))
(use-modules (oop goops))
(use-modules (gnome gtk))

(define win (make <gtk-window> #:type 'toplevel #:title "Guile-Gnome Window Example"
   #:default-width 400 #:default-height 150 #:border-width 15))
(connect win 'delete-event (lambda (win event) (gtk-main-quit) #f))
(gtk-widget-modify-bg win "GTK_STATE_NORMAL" "darkslateblue")
(define vbox (gtk-vbox-new #f 40))
(gtk-container-add win vbox)
(define msg (make <gtk-label> #:use-markup #t
   #:label "<span font=\"Sans 32\" foreground=\"white\">Welcome!</span>"))
(gtk-container-add vbox msg)
(define hbbox (gtk-hbutton-box-new))
(define ok (gtk-button-new-with-label "OK"))
(connect ok 'clicked (lambda (event) (gtk-main-quit) #f))
(gtk-container-add hbbox ok)
(gtk-container-add vbox hbbox)
(gtk-widget-show-all win)
(gtk-main)

Screenshot:

RupertPupkin · #47 26th July 2012, 03:11 AM

Here's an example in BeanShell -- a Java-based scripting language -- using the Swing toolkit:

Code:

#!/usr/java/bin/java bsh.Interpreter
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
JFrame f = new JFrame("BeanShell Window Example");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setLayout(new BorderLayout());
JLabel msg = new JLabel("Welcome!", JLabel.CENTER);
msg.setFont(new Font(Font.SANS_SERIF, Font.PLAIN, 32));
msg.setOpaque(true);
msg.setBackground(new Color(72,61,139));
msg.setForeground(Color.WHITE);
f.add(msg, BorderLayout.CENTER);
JPanel bottom = new JPanel();
bottom.setBackground(new Color(72,61,139));
JButton ok = new JButton("OK");
ok.addActionListener(new ActionListener() {
   public void actionPerformed(ActionEvent event) {
      System.exit(0);
   }
});
bottom.add(ok);
f.add(bottom, BorderLayout.SOUTH);
f.getContentPane().setPreferredSize(new Dimension(400,150));
f.pack();
f.setVisible(true);

That can be run directly as a script, provided you have the bsh-2.0b4.jar file in your CLASSPATH (e.g. ${JAVA_HOME}/jre/lib/ext). If your java executable is at /usr/bin/java then change the first line to "#!/usr/bin/java bsh.Interpreter".

Screenshot:

RupertPupkin · #48 26th July 2012, 04:55 PM

Here's an example in Groovy -- another dynamic JVM-based language -- using its built-in access to the Swing library. Groovy is in the Fedora repos (yum install groovy).

Code:

import groovy.swing.SwingBuilder
import java.awt.*

def bg = new Color(72,61,139)
new SwingBuilder().edt {
   def win = frame(title: "Groovy Window Example", defaultCloseOperation: 3, show: true) {
      borderLayout()
      label(text: "Welcome!", foreground: Color.white, background: bg, horizontalAlignment: 0,
            font: new Font("SansSerif",0,32), opaque: true, constraints: "Center")
      panel(background: bg, constraints: "South") {
         button("OK", actionPerformed: {System.exit(0)})
      }
   }
   win.getContentPane().setPreferredSize(new Dimension(400,150))
   win.pack()
}

Save that in a file called groovywindow.groovy and run it like this:

Code:

groovy -Dawt.useSystemAAFontSettings=on -Dswing.aatext=true groovywindow.groovy

Screenshot:

RupertPupkin · #49 26th July 2012, 08:34 PM

Here's an example in Clojure -- a Lisp dialect that runs on the JVM -- using its built-in access to Swing. Clojure is in the Fedora repos (yum install clojure).

Code:

(ns user (:import (java.awt BorderLayout Font Color Dimension)
                  (java.awt.event ActionListener)
                  (javax.swing JFrame JLabel JPanel JButton)))
(let [win (JFrame. "Clojure Window Example")
      msg (JLabel. "Welcome!" JLabel/CENTER)
      bottom (JPanel.)
      ok (JButton. "OK")]
   (doto win
      (.setDefaultCloseOperation JFrame/EXIT_ON_CLOSE)
      (.setLayout (BorderLayout.)))
   (doto msg
      (.setFont (Font. "SansSerif", Font/PLAIN, 32))
      (.setOpaque true)
      (.setBackground (Color. 72 61 139))
      (.setForeground (Color/WHITE)))
   (doto bottom
      (.setBackground (Color. 72 61 139)))
   (.addActionListener ok (proxy [ActionListener] []
      (actionPerformed [e] (System/exit 0))))
   (.add win msg BorderLayout/CENTER)
   (.add bottom ok)
   (.add win bottom BorderLayout/SOUTH)
   (.setPreferredSize (.getContentPane win) (Dimension. 400 150))
   (.pack win)
   (.setVisible win true)
)

Save that in a file called clojurewindow.clj and run it like this:

Code:

java -Dawt.useSystemAAFontSettings=on -Dswing.aatext=true clojure.main clojurewindow.clj

Screenshot:

RupertPupkin · #50 27th July 2012, 03:22 AM

Here's an example in JavaScript, using Rhino -- a JavaScript implementation that runs on the JVM -- to access the Swing library. Rhino is in the Fedora repos (yum install rhino).

Code:

importPackage(Packages.java.awt);
importPackage(Packages.java.awt.event);
importPackage(Packages.javax.swing);

function clicked() {
   win.dispose();
}

var win = new JFrame("JavaScript/Swing Window Example");
win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
win.setLayout(new BorderLayout());
var msg = new JLabel("Welcome!", JLabel.CENTER);
msg.setFont(new Font(Font.SANS_SERIF, Font.PLAIN, 32));
msg.setOpaque(true);
msg.setBackground(new Color(0.282,0.239,0.545));
msg.setForeground(Color.WHITE);
win.add(msg, BorderLayout.CENTER);
var bottom = new JPanel();
bottom.setBackground(new Color(0.282,0.239,0.545));
var ok = new JButton("OK");
ok.addActionListener(clicked);
bottom.add(ok);
win.add(bottom, BorderLayout.SOUTH);
win.getContentPane().setPreferredSize(new Dimension(400,150));
win.pack();
win.show();

Save that in a file called jswindow.js and run it like this (assuming the js.jar file is in your classpath):

Code:

java -Dawt.useSystemAAFontSettings=on -Dswing.aatext=true org.mozilla.javascript.tools.shell.Main jswindow.js

Screenshot:

RupertPupkin · #51 28th July 2012, 07:27 AM

Here's another example in Guile (a Scheme implementation), using the Tk bindings available through PS/TK. Download the pstk.scm file here and uncomment the Guile portion. You could use a different Scheme implementation (e.g. Kawa) by uncommenting the appropriate portion of the pstk.scm file.

Here's the code, which can be run directly as an executable script:

Code:

#!/usr/bin/guile -s
!#
(load "pstk.scm")
(tk-start)
(let* ((msg (tk 'create-widget 'label 'text: "Welcome!" 'font: "Sans 32"
                'bg: "darkslateblue" 'fg: "white"))
       (ok (tk 'create-widget 'button 'text: "OK" 'command: (lambda () (tk-end)))))
      (tk/wm 'title tk "Guile/Tk Window Example")
      (tk/wm 'geometry tk "400x150")
      (tk 'configure 'bg: "darkslateblue")
      (tk/pack msg 'pady: 10)
      (tk/pack ok 'pady: 20)
      (tk-event-loop))

Screenshot:

RupertPupkin · #52 28th July 2012, 04:29 PM

Here's another example in Haskell, this time using the Tk bindings from HTk. To compile the HTk modules you'll need to install the ghc-network-devel and ghc-parsec-devel packages form the Fedora repos.

Code:

import HTk.Toplevel.HTk

main :: IO ()
main = 
   do main <- initHTk [text "Haskell/Tk Window Example", geometry (400,150,500,500)]
      win <- newFrame main [background "darkslateblue"]
      msg <- newLabel win [text "Welcome!", bg "darkslateblue", fg "white", font "Sans 32"]
      ok <- newButton win [text "OK"]
      pack win [Fill Both, Expand On]
      pack msg [PadY 10]
      pack ok [PadY 20]
      click <- clicked ok
      _ <- spawnEvent (forever (click >>> destroy main))
      finishHTk

Save that code in a file called htkwindow.hs and compile it like this:

Code:

ghc --make htkwindow.hs -o htkwindow

Screenshot:

RupertPupkin · #53 9th August 2012, 02:25 AM

Here's an example in Matlab, using its built-in access to Java's Swing classes:

Code:

function matlabwindow()
   win = javax.swing.JFrame('Matlab/Swing Window Example');
   win.setDefaultCloseOperation(javax.swing.JFrame.DISPOSE_ON_CLOSE);
   msg = javax.swing.JLabel('Welcome!', javax.swing.JLabel.CENTER);
   msg.setFont(java.awt.Font(java.awt.Font.SANS_SERIF, java.awt.Font.PLAIN, 32));
   msg.setOpaque(true);
   msg.setBackground(java.awt.Color(0.282, 0.239, 0.545, 1.0));
   msg.setForeground(java.awt.Color.WHITE);
   win.add(msg, java.awt.BorderLayout.CENTER);
   bottom = javax.swing.JPanel();
   bottom.setBackground(java.awt.Color(0.282, 0.239, 0.545, 1.0));
   ok = javax.swing.JButton('OK');
   bottom.add(ok);
   ok = handle(ok, 'callbackproperties');
   set(ok, 'ActionPerformedCallback', {@quit});
   win.add(bottom, java.awt.BorderLayout.SOUTH);
   win.getContentPane().setPreferredSize(java.awt.Dimension(400, 150));
   win.pack();
   win.setVisible(true);
   function quit(srcObj, evd)
      win.dispose();
   end
end

Screenshot:

RupertPupkin · #54 18th August 2012, 11:08 PM

Here's an example using JavaFX, which is now included in the Oracle JDK 7u6 for Linux.

Save this code in a file called javafxwindow.java:

Code:

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.text.*;
import javafx.scene.control.*;
import javafx.event.*;

public class javafxwindow extends Application {
 @Override public void start(Stage stage) {
   Group root = new Group();
   Scene scene = new Scene(root, 400, 150, Color.web("rgb(72,61,139)"));
   Text msg = new Text(120, 60, "Welcome!");
   msg.setFont(new Font(32));
   msg.setFill(Color.WHITE);
   Button ok = new Button("OK");
   ok.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent e) {
         System.exit(0);
      }
   });
   ok.setLayoutX(175.0); ok.setLayoutY(120.0);
   root.getChildren().add(msg); root.getChildren().add(ok);
   stage.setTitle("JavaFX Window Example");
   stage.setScene(scene);
   stage.show();
 }
 public static void main(String[] args) {
   launch(args);
 }
}

For some reason the JavaFX classes are not yet in the default classpath

. So if you install the JDK under /usr/java, then you'd compile and run the application like this:

Code:

javac -cp /usr/java/jre/lib/jfxrt.jar javafxwindow.java
java -cp .:/usr/java/jre/lib/jfxrt.jar javafxwindow

Screenshot:

RupertPupkin · #55 19th August 2012, 07:02 AM

Latest update: we now have 50 examples.

Here's a summary of what we have right now, first organized by programming language with the corresponding toolkit:

C: XForms, Motif, MGUI, EZWGL, GTK+, Tk, XView
Java: Swing, Qt, SWT, AWT, JavaFX
Perl: Tk, wxWidgets, Prima, GTK+, Qt
C++: Qt, FOX, FLTK, GTK+
Python: Tk, Qt, GTK+, Swing
Ruby: Tk, Swing, Qt
Tcl: Tk, GTK+, Qt
Guile: GTK+, Tk
Haskell: GTK+, Tk
Objective-C: GNUstep
Icon: Icon
Vala: GTK+
Genie: GTK+
R: Tk
OCaml: Tk
Pure: Tk
SNOBOL: Tk
Lua: Tk
Scala: Swing
BeanShell: Swing
Groovy: Swing
Clojure: Swing
JavaScript: Swing
Matlab: Swing

Here's the list organized by toolkit with the corresponding language bindings:

Tk: Tcl, Perl, Python, Ruby, R, OCaml, Pure, SNOBOL, C, Lua, Guile, Haskell
Swing: Java, Python, Ruby, Scala, BeanShell, Groovy, Clojure, JavaScript, Matlab
GTK+: Haskell, Python, Perl, C++, Vala, Genie, C, Tcl, Guile
Qt: Python, C++, Java, Perl, Ruby, Tcl
XForms: C
GNUstep: Objective-C
Motif: C
wxWidgets: Perl
Icon: Icon
Prima: Perl
FOX: C++
FLTK: C++
MGUI: C
EZWGL: C
SWT: Java
AWT: Java
XView: C
JavaFX: Java

cyborg · #56 25th September 2012, 08:19 PM

Seeing as I never got round to the Python GTK one, I've thown a wildcard entry in:

jQuery (pure, no external CSS or HTML):

Live demo: http://jsfiddle.net/jdb1991/7EVYG/12/

Code:

$(function () {
    $("body").append("<div></div>");
    $("div").attr("id","window")
        .css("width","400px")
        .css("height","150px")
        .css("background-color","#483D8B")
        .css("border","1px solid black")
        .css("z-index","0")
        .append("<div id='bar'></div>");
    $("#bar").css("width","400px")
        .css("height","20px")
        .css("background-color","black")
        .css("z-index","1")
        .append("<span id='title'>jQuery Window Example</span>")
        .append("<span id='quit'>X</span>")
        .append("<span id='welcome'>Welcome!</span>")
        .append("<input id='ok' type='submit'></input>");
    $("#title").css("color","white")
        .css("font-family","Tahoma, Geneva, sans-serif")
        .css("font-size","10px")
        .css("padding-left", "150px");
    $("#quit").css("color","white")
        .css("font-family","Tahoma, Geneva, sans-serif")
        .css("padding-left","120px")
        .click(function() {
            $("#window").fadeOut();
        });
    $("#welcome").css("color","white")
        .css("font-family","Tahoma, Geneva, sans-serif")
        .css("font-size","32pt")
        .css("position","absolute")
        .css("left","110px")
        .css("top","40px");
    $("#ok").val("OK")
        .css("position","absolute")
        .css("left","190px")
        .css("top","110px")
        .click(function() {
            $("#window").fadeOut();
        });
});

Could be done using a lot less lines, but would have needed CSS, JS and HTML files.

RupertPupkin · #57 26th October 2012, 05:00 AM

That's pretty slick! I'm sure there's a way of running that jQuery example as a standalone application outside of a web browser, since there are JavaScript interpreters that can be run in terminals (e.g. v8, js). I'll try to get it working using v8.

cyborg · #58 31st October 2012, 06:55 PM

Quote:

Originally Posted by RupertPupkin

That's pretty slick! I'm sure there's a way of running that jQuery example as a standalone application outside of a web browser, since there are JavaScript interpreters that can be run in terminals (e.g. v8, js). I'll try to get it working using v8.

Yeah, would love to see that. Would make writing GUIs very easy (for me anyway!).

brunson · #59 31st October 2012, 09:35 PM

Great thread Rupert! Plus it gave me a great reason to dive into Kivy.

Framework: Kivy
Language: Python
Markup: Kivy
Tool: Emacs ;-)

The layout manager and object heirarchy are pretty intuitive once you get a couple of key concepts down. I've mainly been interested in using it for Android development, but it's cross platform. It'd be double great if it would compile into HTML 5 canvas.

Edit: Rupert, I saw your Jython/Swing example (very nice) and noticed you refer to jython as "java bindings for python". Actually, Jython is a Python interpreter written in Java. Python is a language definition, not an interpreter, so there are several implementations of it with Jython having the added functionality of importing Java libraries as well as being able to compile into Java byte code. (Not trying to correct you for the sake of pedantry, I just think it's pretty cool and wanted to share) :-)

Code:

from kivy.lang import Builder
from kivy.uix.widget import Widget
from kivy.app import App

from kivy.config import Config
Config.set('graphics', 'width', '400')
Config.set('graphics', 'height', '150')

Builder.load_string('''#:kivy 1.0.9
<KivyWindow>:    
    canvas:
        Color:
            rgb: (.28, .24, .55)
        Rectangle:
            size: self.size
            pos: self.pos

    Label:
        font_size: 32  
        center_x: root.width / 2
        top: root.top - 10
        text: "Welcome!"
        canvas:
            Color:
                rgb: ( 0, 0, 0 )

    Button:
        text: "OK"
        height: 25
        pos: 0, 20
        center_x: root.width / 2        
        on_release: raise SystemExit()
        
''' )

class KivyWindow(Widget):
    pass

class KivyWindowApp(App):
    title = 'Kivy Window Example'
    
    def build(self):
        return KivyWindow()

if __name__ == '__main__':
    KivyWindowApp().run()