I'm currently working on a chat GUI with java and I'm trying to use the html css option with JTextPane.
I'm not familiar with html / css so it was a bit hard but I managed to get the result I wanted except from 1 thing.
The thing is, I want the blue chat to be on the right side of the screen, like 30% of the screen is empty and then there is the blue part.
Here is a photoshop of what I'm trying to obtain :
Here is my java code :
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.border.*;
public class FenetreRenduHtml extends JFrame
{
private JPanel p_content;
private JTextArea ta_css;
private JTextArea ta_html_body;
private JTextPane tp_html;
private void renderHtml(String html)
{
tp_html.setContentType("text/plain");
tp_html.putClientProperty(JEditorPane.HONOR_DISPLAY_PROPERTIES, true);
tp_html.setContentType("text/html");
tp_html.setText("<html>"+html+"</html>");
}
private void renderHtml(String html_body, String style)
{
if (style==null) renderHtml(html_body);
else renderHtml("<head><style>\n"+style+"\n</style></head><body>"+html_body+"</body>");
}
private void doHtmlRender()
{
String
t_html_body = ta_html_body.getText(),
t_css = ta_css.getText();
renderHtml(t_html_body, t_css);
}
public FenetreRenduHtml()
{
setTitle("Test d'affichage en HTML");
Dimension d = new Dimension(800, 600);
setSize(d);
setMinimumSize(d);
setLocation(new Point(200, 100));
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
p_content = new JPanel();
p_content.setBorder(new EmptyBorder(5, 5, 5, 5));
setContentPane(p_content);
GridBagLayout gbl = new GridBagLayout();
gbl.columnWidths = new int[]{0, 0, 0};
gbl.rowHeights = new int[]{0, 0, 0, 0, 0, 0};
gbl.columnWeights = new double[]{1.0, 1.0, Double.MIN_VALUE};
gbl.rowWeights = new double[]{0.0, 1.0, 0.0, 1.0, 0.0, Double.MIN_VALUE};
p_content.setLayout(gbl);
Font f_mono = new Font("monospaced", Font.PLAIN, 14);
Border text_border = BorderFactory.createEmptyBorder(4, 4, 4, 4);
JLabel l_css = new JLabel("Contenu CSS");
{
GridBagConstraints gbc = new GridBagConstraints();
gbc.insets = new Insets(0, 0, 5, 5);
gbc.gridx = 0;
gbc.gridy = 0;
p_content.add(l_css, gbc);
}
JScrollPane sp_css = new JScrollPane();
{
GridBagConstraints gbc = new GridBagConstraints();
gbc.insets = new Insets(0, 0, 0, 5);
gbc.fill = GridBagConstraints.BOTH;
gbc.gridx = 0;
gbc.gridy = 1;
p_content.add(sp_css, gbc);
}
ta_css = new JTextArea();
ta_css.setFont(f_mono);
ta_css.setBorder(text_border);
ta_css.setText("/* Style CSS ici */");
sp_css.setViewportView(ta_css);
JLabel l_html = new JLabel("HTML source");
{
GridBagConstraints gbc = new GridBagConstraints();
gbc.insets = new Insets(0, 0, 5, 5);
gbc.gridx = 0;
gbc.gridy = 2;
p_content.add(l_html, gbc);
}
JScrollPane sp_html_body = new JScrollPane();
{
GridBagConstraints gbc = new GridBagConstraints();
gbc.insets = new Insets(0, 0, 0, 5);
gbc.fill = GridBagConstraints.BOTH;
gbc.gridx = 0;
gbc.gridy = 3;
p_content.add(sp_html_body, gbc);
}
ta_html_body = new JTextArea();
ta_html_body.setFont(f_mono);
ta_html_body.setBorder(text_border);
sp_html_body.setViewportView(ta_html_body);
JButton b_disp_html = new JButton("Afficher \u2192"); // "Afficher ->"
b_disp_html.addActionListener(new ActionListener()
{
public void actionPerformed(ActionEvent e)
{ doHtmlRender(); }
});
{
GridBagConstraints gbc = new GridBagConstraints();
gbc.insets = new Insets(0, 0, 5, 5);
gbc.gridx = 0;
gbc.gridy = 4;
p_content.add(b_disp_html, gbc);
}
JLabel l_disp_html = new JLabel("HTML affiché");
{
GridBagConstraints gbc = new GridBagConstraints();
gbc.insets = new Insets(0, 0, 5, 0);
gbc.gridx = 1;
gbc.gridy = 0;
p_content.add(l_disp_html, gbc);
}
JScrollPane sp_html = new JScrollPane();
{
GridBagConstraints gbc = new GridBagConstraints();
gbc.fill = GridBagConstraints.BOTH;
gbc.gridx = 1;
gbc.gridy = 1;
gbc.gridheight = 3;
p_content.add(sp_html, gbc);
}
tp_html = new JTextPane();
sp_html.setViewportView(tp_html);
}
public static void main(String[] args)
{
EventQueue.invokeLater(new Runnable()
{
public void run()
{
FenetreRenduHtml frame = new FenetreRenduHtml();
frame.setVisible(true);
}
});
}
}
Here is the css code I put in the GUI :
h1 {
background : solid #3b82f7;
font-size : 15 ;
font-weight : normal;
color : #FFFFFF;
padding : 2px;
}
h2 {
background : solid #3c3c3c;
font-size : 15 ;
font-weight : normal;
color : #FFFFFF;
padding : 2px;
}
And here is the html code I put in the GUI :
<html>
<div>
<div align = right width=70%>
<h1>
Hello, i'm trying to put this on the right side of the screen but i can't manage to do it
</h1>
</div>
</div>
<div align=left width=70%>
<h2>
And this is supposed to stay here so it's okay
</h2>
</div>
</html>
@hfontanez here is what I got with your code :
I have totally changed my answer. This will be my last try.
HTML with Styling
Result
If this doesn't work, then it is definitely an issue with Swing.