Can I use CSS for Java Swing?

Java swing generally isn’t built to separate its controls from its presentation, but there is an open-source framework called Jaxx that has been written that might help you. With Jaxx you can do something like this:

<Application title="Calculator">
  <style source="Calculator.css"/> //your style goes here...
  <script source="Calculator.script"/>
  <Table fill="both" id='table'>
<row>
  <cell columns="4"><JLabel id='display' text="0"/></cell>
</row>

<row>
  <cell columns="2"><JButton id='c' label="C" onActionPerformed='clear()' styleClass="clear"/></cell>      
  <cell><JButton id='ce'     label="CE" onActionPerformed='clearEntry()' styleClass="clear"/></cell>
  <cell><JButton id='equals' label="=" onActionPerformed='equal()' styleClass="operator"/></cell>
</row>

<row>
  <cell><JButton id='d7'   label="7" onActionPerformed='digit(7)' styleClass="digit"/></cell>
  <cell><JButton id='d8'   label="8" onActionPerformed='digit(8)' styleClass="digit"/></cell>
  <cell><JButton id='d9'   label="9" onActionPerformed='digit(9)' styleClass="digit"/></cell>
  <cell><JButton id='plus' label="+" onActionPerformed='add()' styleClass="operator"/></cell>
</row>

<row> 
  <cell><JButton id='d4'       label="4" onActionPerformed='digit(4)'   styleClass="digit"/></cell>
  <cell><JButton id='d5'       label="5" onActionPerformed='digit(5)'   styleClass="digit"/></cell>
  <cell><JButton id='d6'       label="6" onActionPerformed='digit(6)'   styleClass="digit"/></cell>
  <cell><JButton id='subtract' label="-" onActionPerformed='subtract()' styleClass="operator"/></cell>
</row>

<row>
  <cell><JButton id='d1'       label="1" onActionPerformed='digit(1)' styleClass="digit"/></cell>
  <cell><JButton id='d2'       label="2" onActionPerformed='digit(2)' styleClass="digit"/></cell>
  <cell><JButton id='d3'       label="3" onActionPerformed='digit(3)' styleClass="digit"/></cell>
  <cell><JButton id='multiply' label="x" onActionPerformed='multiply()' styleClass="operator"/></cell>
</row>

<row>
  <cell><JButton id='d0'     label="0" onActionPerformed='digit(0)' styleClass="digit"/></cell>
  <cell><JButton id='sign'   label="+/-" onActionPerformed='toggleSign()' styleClass="operator"/></cell>
  <cell><JButton id='dot'    label="." onActionPerformed='dot()' styleClass="digit"/></cell>
  <cell><JButton id='divide' label="&#x00F7;" onActionPerformed='divide()' styleClass="operator"/></cell>
</row>

and then include a css file to style your components:

Application {
    lookAndFeel: system;
}
#display {
    background: #BCE5AD;
    opaque: true;
    horizontalAlignment: right;
    border: {BorderFactory.createBevelBorder(BevelBorder.LOWERED)};
    font-size: 22;
    font-weight: bold;
}

Leave a Comment