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 閱讀(2061) 評論(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}

          最后,附上所有代碼和資源圖片。


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 新晃| 汝城县| SHOW| 黎川县| 溧水县| 尼玛县| 南雄市| 科尔| 新河县| 漳平市| 寿宁县| 阳谷县| 巴青县| 景宁| 通渭县| 罗城| 都安| 宁安市| 彩票| 双流县| 舞钢市| 康平县| 达日县| 济源市| 特克斯县| 罗甸县| 太仓市| 景泰县| 确山县| 英吉沙县| 十堰市| 皮山县| 宝清县| 陕西省| 宝应县| 来凤县| 吴川市| 涪陵区| 钦州市| 得荣县| 芒康县|