Codename one how to design an inverted status badge

Question

I have one I have designed using CSS but it's in the normal text direction direction

Status-green{
    font-size: 2.1mm;
    font-style: italic;
    background-color: green;
    color: white;
    border-radius: 1mm;
    padding-left: 0.5mm;
    padding-right: 0.5mm;
}

that's what I want to do the "APPROVED" status budge, how can I make it , am using CSS

Answer 1

This should do that:

// this is the green label
Label green = new Label("Green Stuff") {
    private int actualHeight = 10;

    // we ask for more space so when we rotate the label it won't be clipped out
    @Override
    protected Dimension calcPreferredSize() {
        Dimension d = super.calcPreferredSize(); 

        // since we asked for more space the background will become a sqare
        // we don't want that so we save the "real" height here
        actualHeight = d.getHeight();
        d.setHeight(d.getWidth());
        return d;
    }

    @Override
    public void paint(Graphics g) {
        // we rotate by 45 degrees in radians around the pivot point
        // which is the center of the component
        g.rotateRadians((float)(-Math.PI / 4.0), 
                getX() + getWidth() / 2, 
                getY() + getHeight() / 2);

        // we save the old color and set a background color then 
        // draw the background manually
        int c = g.getColor();
        g.setColor(0xff00);

        // we take extra space so the banner will stretch further
        g.fillRect(getX() - 50, 
                getY() + getHeight() / 2 - actualHeight / 2, 
                getWidth() + 100, actualHeight);

        // we let the label draw its content
        super.paint(g); 

        // restoring the graphics context to the original value
        g.setColor(c);
        g.resetAffine();
    }    
};

// we're drawing the background manually so we must make it transparent
green.getUnselectedStyle().setBgTransparency(0);

// we're layering the component on top of one another. The green
// label is positioned in the top left coordinate.
Container cnt = LayeredLayout.encloseIn(base,
        FlowLayout.encloseIn(green));
hi.add(cnt);

hi.show();