TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

5分钟做一个Dashboard

Posted on 2010-09-13 10:37 TWaver 阅读(2047) 评论(0)  编辑  收藏

一大堆图表放一起,综合呈现各种数据统计,估计所有的程序都有这种需求。老外喜欢叫它Dashboard,中文还真没太有合适的对应的词,有人干脆翻译为“仪表盘”,挺怪异的。

有了TWaver的一大堆Chart,做Dashboard就不难了。用GridLayout把一大堆Chart放在一个JPanel中,再做一个Border,放上一些操控的按钮,例如最小化、最大化之类,就有模有样了。

先看这个效果图。

实在没什么技术含量,就废话不多说了,直接上代码。先做一个例子Chart。你可以多用一些TWaver提供的其他各种Chart来丰富视觉效果:

 1public class MyBarChart extends BarChart {
 2
 3    private Element data1 = new Node();
 4    private Element data2 = new Node();
 5
 6    public MyBarChart() {
 7        this.setBarType(TWaverConst.BAR_TYPE_GROUP);
 8        this.setShadowOffset(10);
 9        this.setYScaleTextVisible(true);
10        this.setYScaleMinTextVisible(true);
11        this.setUpperLimit(60);
12        this.setYScaleValueGap(10);
13
14        this.addXScaleText("Jan");
15        this.addXScaleText("Feb");
16        this.addXScaleText("Mar");
17
18        this.addElement(data1, "USD", TWaverUtil.getRandomColor());
19        this.addElement(data2, "RMB", TWaverUtil.getRandomColor());
20
21        this.addValue(data1, getRandomData(), getRandomData(), getRandomData());
22        this.addValue(data2, getRandomData(), getRandomData(), getRandomData());
23    }

24
25    private int getRandomData() {
26        return TWaverUtil.getRandomInt(60);
27    }

28
29    private void addElement(Element element, String name, Color color) {
30        element.setName(name);
31        element.putChartColor(color);
32        box.addElement(element);
33    }

34
35    private void addValue(Element element, double value1, double value2, double value3) {
36        element.addChartValue(value1);
37        element.addChartValue(value2);
38        element.addChartValue(value3);
39    }

40}
再做主程序。一个GridLayout的Panel加上一个Border,放在窗口中显示即可:
  1public class Test extends JComponent {
  2    public Test() {
  3        this.setBorder(BorderFactory.createLineBorder(Color.lightGray, 1));
  4        this.setLayout(new BorderLayout());
  5        this.add(createHeaderPane(), BorderLayout.NORTH);
  6        this.add(createChart(), BorderLayout.CENTER);
  7    }

  8
  9    private JComponent createChart() {
 10        return new MyBarChart();
 11    }

 12
 13    private JPanel createHeaderPane() {
 14        JPanel headerPane = new JPanel(new BorderLayout());
 15        headerPane.setOpaque(false);
 16        headerPane.setBorder(BorderFactory.createEmptyBorder(5555));
 17        headerPane.add(createNorthPane(), BorderLayout.NORTH);
 18
 19        JTextArea txtDescription = new JTextArea("Here is the description for this portlet.");
 20        txtDescription.setEditable(false);
 21        txtDescription.setEnabled(false);
 22        txtDescription.setOpaque(false);
 23        txtDescription.setFont(new Font("Dialog", Font.ITALIC, 12));
 24        txtDescription.setDisabledTextColor(Color.gray);
 25        txtDescription.setLineWrap(true);
 26        txtDescription.setBorder(createUnderlineBorder());
 27        headerPane.add(txtDescription, BorderLayout.CENTER);
 28
 29        return headerPane;
 30    }

 31
 32    private JPanel createNorthPane() {
 33        JPanel northPane = new JPanel(new BorderLayout());
 34        northPane.setOpaque(false);
 35        JLabel lbTitle = new JLabel("Month Sales");
 36        lbTitle.setFont(new Font("Dialog", Font.BOLD, 12));
 37        lbTitle.setForeground(new Color(00255100));
 38        northPane.add(lbTitle, BorderLayout.CENTER);
 39        JPanel buttonPane = createButtonPane();
 40        northPane.add(buttonPane, BorderLayout.EAST);
 41        return northPane;
 42    }

 43
 44    private JPanel createButtonPane() {
 45        JPanel buttonPane = new JPanel(new FlowLayout(FlowLayout.RIGHT, 50));
 46        buttonPane.setOpaque(false);
 47        JButton btnDropDown = new JButton();
 48        btnDropDown.setOpaque(false);
 49        btnDropDown.setMargin(new Insets(0000));
 50        btnDropDown.setIcon(TWaverUtil.getIcon("/dashboard/dropdown.png"));
 51        btnDropDown.setBorder(null);
 52        buttonPane.add(btnDropDown);
 53        JButton btnClose = new JButton();
 54        btnClose.setMargin(new Insets(0000));
 55        btnClose.setIcon(TWaverUtil.getIcon("/dashboard/close.png"));
 56        btnClose.setBorder(null);
 57        btnClose.setOpaque(false);
 58        btnClose.addActionListener(new ActionListener() {
 59            public void actionPerformed(ActionEvent e) {
 60                Test.this.setVisible(false);
 61            }

 62        }
);
 63        buttonPane.add(btnClose);
 64        return buttonPane;
 65    }

 66
 67    private static Border createUnderlineBorder() {
 68        return new Border() {
 69            public void paintBorder(Component c,
 70                                    Graphics g,
 71                                    int x,
 72                                    int y,
 73                                    int width,
 74                                    int height) {
 75                g.setColor(Color.lightGray);
 76                g.drawLine(x,
 77                           y + height - 2,
 78                           x + width,
 79                           y + height - 2);
 80            }

 81
 82            public Insets getBorderInsets(Component c) {
 83                return new Insets(0020);
 84            }

 85
 86            public boolean isBorderOpaque() {
 87                return true;
 88            }

 89        }
;
 90    }

 91
 92    public static void main(String[] args) {
 93        JFrame frame = new JFrame();
 94        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 95        JPanel pane = new JPanel(new GridLayout(331010));
 96        pane.setBorder(BorderFactory.createEmptyBorder(10101010));
 97        pane.setBackground(Color.white);
 98        frame.add(pane);
 99        for (int i = 0; i < 9; i++{
100            pane.add(new Test());
101        }

102        frame.setSize(1000700);
103        TWaverUtil.centerWindow(frame);
104        frame.setTitle("TWaver Dashboard");
105        frame.setVisible(true);
106    }

107}

最后,附上所有代码和资源图片。


只有注册用户登录后才能发表评论。


网站导航: