AddingComponentListenerToProcessingWindow

[vsquared]

I am unable to add a componentListener to a ProcessingWindow. Java code that I am trying to convert is shown at the end of the demo. Problem: the textArea does not enlarge with the window when it is resized.

from javax.swing import *
from java.awt import *
from javax.swing.event import *
from java.awt.event import ComponentAdapter
from java.awt.event import ComponentListener

_wndW = 400
_wndH = 400
 
def setup():
    global frame
    global canvas
    global txtScrlPane
    
    size(_wndW,_wndH)
    wnd = get_surface()
    wnd.set_resizable(True)
    wnd.set_location(100,100)
    wnd.set_title("Resize the Window")
    canvas = wnd.get_native()
    frame = canvas.getFrame()
    frame.remove(canvas)
    
    txtArea = JTextArea()
    txtScrlPane = JScrollPane(txtArea)
    txtScrlPane.setBounds(10,10,_wndW-20,_wndH-20)
    frame.add(txtScrlPane)
    frame.setVisible(True)

    print(ComponentAdapter)
    print(ComponentListener)
#   TypeError: Cannot create Java interface instances   
#    print(ComponentListener())
    frame.addComponentListener(ComponentListener)

"""
frame.addComponentListener(new ComponentAdapter() {
    public void componentResized(ComponentEvent componentEvent) {
        // do something
    }
});
"""

It looks like the componentListener requires an instance of ComponentAdapter or ComponentListener. When I try to do this by adding a set of parentheses to ComponentAdapter or ComponentListener the error message tells me that it cannot create Java interface instances. If I try to use a callback function it says it requires a java.awt.event.ComponentListener but I don't know how I'm supposed to do that:

I want the textArea to follow the window when it is resized, not what is shown below, which is the problem.

The print() requests indicate that it knows about the classes; I just am unable to instantiate either of them. Any insight would be greatly appreciated. This code was run in the Thonny editor with py5 plugin and uses the Imported Mode.

[villares]

Cheers @vsquared, I think you have a hint on the error message! You should start studying the jpype docs on how to instantiate the ComponentListener class from Python maybe? Maybe hit the jpype forums?

Free ideas (maybe not great, but, hey, free!):

• Can you make a non-py5 based window work on swing using Python? That would be easier to show people at the jpype forums as a minimal example when asking for help, I suppose (no need for them to install py5).
• Then when using py5, why not reduce the complexity of the "imported mode code transformations" and use module mode and settings() + setup()? This would be the less indirect way of running things, after that you can re-introduce the imported mode layer of magic/complexity.

[vsquared]

Thanks for the suggestion to try module mode. If we accept the default layout manager for JFrame and give up setting the bounds for components, whatever we place in that JFrame will automatically resize when the window is resized. I've added a few components to the original demo and created a pretty nice editor with functional 'File/open'.

import py5

from javax.swing import *
from java.awt import *
from javax.swing.event import *

_wndW = 700
_wndH = 700

def menuAction(event):
    if(event.getSource() == mItemOpen):
        fileChooser = JFileChooser()
        result = fileChooser.showOpenDialog(fileChooser)
        if(result == JFileChooser.APPROVE_OPTION):
            file_select = fileChooser.getSelectedFile()
            file_path = file_select.getPath()
            with open(str(file_path), 'r') as file:
                data = file.read()
                txtArea_1.setText(data)
                file.close()
                
def setup():
    global frame
   
    py5.get_surface().set_visible(False) 
    frame = JFrame()
    frame.setBounds(100,100,_wndW,_wndH)

    global mItemOpen
    menuBar = JMenuBar()
    menu = JMenu("File")
    mItemOpen = JMenuItem("Open...")
    mItemOpen.addActionListener(menuAction)
    menu.add(mItemOpen)
    menuBar.add(menu)
    frame.setJMenuBar(menuBar)
    menuBar.repaint()
    
    global txtScrlPane_1
    global txtArea_1
    txtArea_1 = JTextArea()
    txtScrlPane_1 = JScrollPane(txtArea_1)
    txtArea_1.setEditable(True)
    font = Font("Menlo",0,14)
    txtArea_1.setFont(font)
    txtArea_1.setLineWrap(False)
    txtArea_1.setWrapStyleWord(True)
    txtArea_1.repaint()

    global txtScrlPane_2
    global txtArea_2
    txtArea_2 = JTextArea()
    txtScrlPane_2 = JScrollPane(txtArea_2)
    txtArea_2.setEditable(True)
    txtArea_2.setLineWrap(False)
    txtArea_2.setWrapStyleWord(True)
    txtArea_2.repaint()
    
    splitPane = JSplitPane(JSplitPane.VERTICAL_SPLIT, txtScrlPane_1, txtScrlPane_2)
    splitPane.setDividerLocation(550)
    frame.add(splitPane)
    splitPane.repaint()
    frame.setVisible(True)

py5.run_sketch()    

Output:

[vsquared]

Can you make a non-py5 based window work on swing using Python?
I tried to do your first suggestion, but I'm unable to use Swing without using py5 (error shown below code)

from javax.swing import JFrame

f = JFrame('Hello, World!')
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
f.setSize(300, 300)
f.setLocationRelativeTo(None)
f.setVisible(True)

Error:

In summary, on my system no py5, no swing

This works from command line if you use the format shown below:

import py5

from javax.swing import JFrame

def setup():
    
    py5.get_surface().set_visible(False)
    f = JFrame('Hello, World!')
    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
    f.setBounds(100, 100, 300, 300)
    f.setVisible(True)

py5.run_sketch()

cmd-line code for mac:
python3 myFileName.py

[vsquared]

do you think you could encapsulate these wonderful GUI creating codes you've shown us in beginner-friendly capsules?
I'm always interested in teaching and spent over 30 years in education, but I worked with older students and the subject was not computer programming. I would be interested in seeing what you have in mind and for what age group. I'm getting ready to release a multiplication table exercise for younger students soon and will be anxious to see what you think.

[villares]

I've worked with children (with Scratch), and teenagers (with Processing Python mode), but now I teach mostly adults that won't become professional developers (with py5).

Something that sometimes comes up is how to add GUI elements for a project. On Processing Python mode we had quite a few options, pre-packaged and easy to install libraries on the Processing IDE, like https://tabreturn.github.io/code/processing/python/2019/03/19/processing.py_in_ten_lessons-7.5-_controlp5.html

Sometimes I try to build stuff from scratch, but it is hard (https://abav.lugaralgum.com/material-aulas/Processing-Python-py5/slider_com_OO.html)

So I have been looking around... I used to use PySimpleGUI (mostly without py5) for my personal tools, but they changed the licensing model and I gave up that a bit. TkInter is always there, it's on Python's standard library but has a steep learning curve... so I think an easy to use GUI library that integrated well with py5 would be something nice for the py5 community to have. I wonder if you could build some kind of wrapper with a sensible interface and defaults for javax...

[vsquared]

There are several ways to go about this:
A) Palette method where components are drag 'n dropped on a window and the accompanying text is automatically inserted into the source code. All that remains to be done is write a little code to hook up the control to whatever the app is doing. I've seen this done a long time ago with an object Pascal app and it worked pretty slick. ... But it's a lot of work to write something like this (I tried in FutureBASIC) and then maintain it over the years. It was not easy to do.
B) Use a 'Controls' menu on the menubar of an editor. When the user selects a certain control boilerplate code is inserted into the source code at the cursor position. An example from my objc editor is shown below. It works pretty well and is not too difficult to do.

If you look back at the Swing demo I posted here you will note that each control is in its own function. It could be easily modified so that when you want that control you just call the function something like this myBtn(x,y,w,h). I didn't have any parameters in the demo that I posted, but in order to make the controls re-usable the parameters are necessary to place them in different locations. I keep all those files in a repository and then just copy/paste them when I want to create a new GUI. I used that technique for Android widgets and it works pretty well.

Personally, I use the copy/paste method a lot and can construct a complex GUI in a short amount of time without writing any 'new' code except for that required to hook it up so it can be used in the application that I am working on. The downside to all of these techniques is that the controls are not resizable; if placed in a resizable window they stay in the original position unless coded to the window width and height, eg x =_wndW - 50, y = _wndH - 100, nonetheless, the control's width, height will not change. That's one of the advantages of layout managers.

Objc Editor:

[vsquared]

Here's an example of the menu technique in a new py5 editor demo:

import py5

from javax.swing import *
from java.awt import *
from javax.swing.event import *

_wndW = 700
_wndH = 700

lines = []

def mItemOpenAction(event):
    if(event.getSource() == mItemOpen):
        fileChooser = JFileChooser()
        result = fileChooser.showOpenDialog(fileChooser)
        if(result == JFileChooser.APPROVE_OPTION):
            file_select = fileChooser.getSelectedFile()
            file_path = file_select.getPath()
            with open(str(file_path), 'r') as file:
                data = file.read()
                txtArea.setText(data)
                file.close()

def mItemBtnAction(event):
    caretPosition = txtArea.getCaretPosition()
    with open("/Users/xxxx/Python/btn.txt", 'r') as file:
                data = file.read()
                txtArea.insert(data,caretPosition)
                file.close()    
                        
def setup():
    global frame
   
    py5.get_surface().set_visible(False) 
    frame = JFrame()
    frame.setBounds(100,100,_wndW,_wndH)

    global mItemOpen
    menuBar = JMenuBar()
    fileMenu = JMenu("File")
    mItemOpen = JMenuItem("Open...")
    mItemOpen.addActionListener(mItemOpenAction)
    fileMenu.add(mItemOpen)
    ctrlMenu = JMenu("Controls")
    mItemBtn = JMenuItem("Button")
    mItemBtn.addActionListener(mItemBtnAction)
    ctrlMenu.add(mItemBtn)
    menuBar.add(fileMenu)
    menuBar.add(ctrlMenu)
    frame.setJMenuBar(menuBar)
    menuBar.repaint()
    
    global txtScrlPane
    global txtArea
    txtArea = JTextArea()
    txtScrlPane = JScrollPane(txtArea)
    txtArea.setEditable(True)
    font = Font("Menlo",0,14)
    txtArea.setFont(font)
    txtArea.setLineWrap(False)
    txtArea.setWrapStyleWord(True)
    txtArea.repaint()

    global logScrlPane
    global logArea
    logArea = JTextArea()
    logScrlPane = JScrollPane(logArea)
    logArea.setEditable(True)
    logArea.setLineWrap(False)
    logArea.setWrapStyleWord(True)
    logArea.repaint()
    
    splitPane = JSplitPane(JSplitPane.VERTICAL_SPLIT, txtScrlPane, logScrlPane)
    splitPane.setDividerLocation(550)
    frame.add(splitPane)
    splitPane.repaint()
    frame.setVisible(True)

py5.run_sketch()    

pushBtn code in a separate file called 'btn.txt'
Change code above to reflect path to this file:

def pushBtnAction(event):
    print("PushBtn hit.")

def pushBtn():
    btn = JButton("Press me.")
    btn.setBounds(30, 90, 100, 24)
    btn.addActionListener(pushBtnAction)
    frame.add(btn)
    btn.repaint()

[villares]

One could make a Thonny plug-in to help people install the txt assets to get the snippets... I'm sorry I don't have the time/energy to work on this, maybe later :D

[vsquared]

py5 editor is a little crude, but it does work as long as source code is formatted as shown. Newly created app shows up as multicolor cube on dock for some reason. Btn created by menuItem is functional.

Addendum:
Will also run straight Python with tkinter controls. Doesn't appear to like java.awt .