Creating TitledPanel Border Object

We are moving our styles to shared scripts to ensure everyone is designing with the same style.

I want to be able to define a border with a drop shadow like the “Titled Panel” however, I can’t find any shadow options in javax.swing… Anyone can provide some tips of how to re-create the shadow border in swing? I can’t figure out how Ignition is creating it.

I have my line borders created fine:

from java.awt import Color
from javax.swing import BorderFactory

# Colors
color = Color(0,0,0)

# Borders
#border_window = 'paneltitled; ; 4; 0,0,0,80; 0,0,0,0; 3; 1; 0; 0,0,0,0; Dialog,bold,12'
border_color = Color(0,0,0)
border_input = BorderFactory.createLineBorder(border_color, 1, False)
border_button = BorderFactory.createLineBorder(border_color, 1, True)

The specific class used is the PanelTitledBorder (technically, wrapped into a TranslatablePanelTitledBorder, but you don’t need to worry about this)

From the Javadoc you can see the default constructor takes a mainColor, backgroundColor, and a label.

from com.inductiveautomation.ignition.common.gui.border import PanelTitledBorder
from java.awt import Color
newBorder = PanelTitledBorder(Color(114, 125, 130), Color(238, 236, 232), "Script")
event.source.parent.getComponent('Text Field').border = newBorder

Awesome!! Thanks, exactly how I want it.

How did you get rid of the top border. I tried placing a blank string as the title label, but there is still a thicker border on the top.

Here is the shared function I wrote that I used in a expression runScript binding for the border property.

from java.awt import Color
from java.awt import Font
from javax.swing import BorderFactory
from com.inductiveautomation.ignition.common.gui.border import PanelTitledBorder
from com.inductiveautomation.ignition.common.gui.border import ButtonBorder

def window(title='', border_color='shared.ui.color.primary_lighter', background_color='shared.ui.color.background'):
	border_color = eval(border_color)
	background_color = eval(background_color)
	
	border = PanelTitledBorder(border_color, background_color, title)
	border.setStyle(PanelTitledBorder.STYLE_PLAIN)
	border.setHGap(8)
	border.setShadowSize(2)
	
	if len(title) == 0:
		border.setVGap(0)
	else:
		border.setVGap(3)
		
	return border

You would need to pass in colors, these should be java.awt.Color objects. Ex:

from java.awt import Color

# Colors
background = Color(238,238,238)
content = Color(255,255,255)
primary = Color(97,97,97)
primary_darker = Color(55,55,55)
primary_lighter = Color(142,142,142)

In your expression binding…

runScript('shared.ui.border.window',0)

I was looking at ways of doing this for a more consistent, but not out of the box look-and-feel for our deployment. How has the scripted approach worked out for you so far, and is that a common approach? Any thing to watch out for?

I believe I saw there was something on the roadmap for easier style customization going forward so partly my inner monologue was debating building something now vs waiting on something official.

1 Like

The scripted approach has served us well so far, its just the discipline of using it. But even then, it only adds a few minutes to set the style of the objects with the expression bindings once you get used to it.

We had thought about waiting things out for Perspective module, but that is a ways away and wanted to do something with out current apps. Our IT folks are pushing modern web style design and this was at least something to meet them 1/2 way before we can go full web based.

3 Likes