zoukankan      html  css  js  c++  java
  • 仿QQ大战—界面篇

    之前在《仿QQ大战—服务器的搭建(ServerSocket)》中实现了服务器的搭建,以及一个简单地传递数据的实现,现在就是来实现类似与QQ聊天通信的功能。首先是界面的实现;

    首先:服务器和客户端的界面的实现,来看一下界面:

      • 在输入端口输入框中输入端口号,然后点击Start!按钮开始,服务器并开启。
      • 在开启服务器之后,当客户端实现连接到服务器之后,就会显示在服务器的下面的表格上。

    界面的实现

    JTable的使用

    这里主要介绍的是JTable来显示链接到了服务器的客户端的ID,姓名和IP地址;

    JTable:一共包括了三个方面:数据模型 、列模型和选择模型。在实例化时可以使用它默认模式也可以自己自己来构造;

    JTable的构造函数一共有7个,这里介绍2个:

    一: 构造一个 JTable 来显示二维数组 rowData 中的值,其列名称为 columnNames。

    JTable(Object[][] rowData, Object[] columnNames)

    String[] columnNames = { "用户名", "密码", "IP地址" };
    String[][] data = null;
    DefaultTableModel defaultTableModel = new DefaultTableModel(data, columnNames);
    JTable jtable = new JTable(data, columnNames);

    二: 构造一个 JTable,使用数据模型 、默认的列模型和默认的选择模型对其进行初始化。

    JTable(TableModel dm)

     String[] columnNames ={"用户名", "密码","IP地址"};
            String[][] data = null;
            DefaultTableModel defaultTableModel=new DefaultTableModel(data,columnNames);
       
            JTable jtable=new JTable(defaultTableModel);

    也可以自己来创建一个类然后实现接口TableModel ,重写里面的方法:

    ClientTableModel clientTableModel=new ClientTableModel(threadarray);
    //ClientTableModel实现了接口TableMode
    JTable jtable = new JTable(clientTableModel);// 表格

    需要重写的几个方法:

    1.getRowCount(),获得JTable中要显示的行数;

    @Override
    	public int getRowCount() {//得到行数;
    		return threadarray.size();
    	}
    	

    2.getColumnCount() ,获得JTable中要显示的列数

    @Override
    	public int getColumnCount() {//放回列数
    		return 3;
    	}

    3.getColumnName(int columnIndex),列表通过该方法来

    @Override
    	public String getColumnName(int columnIndex) {
    		if(columnIndex==0)
    			return "账号";
    		else if(columnIndex==1)
    			return "姓名";
    		else  if(columnIndex==2)
    			return "IP地址";
    		else 
    			return null;
    	}

    4.getColumnClass(int columnIndex)这个方法很重要,返回的是每一列的类型,如果没有写的话,就不能够往JTable中添加数据,他会报一个java.lang.NullPointerException,空指针异常;

    @Override
    	public Class<?> getColumnClass(int columnIndex) {//返回各列的类型
    		if(columnIndex==0)
    			return int.class;
    		else if(columnIndex==1)
    			return String.class;
    		else if(columnIndex==2)
    			return String.class;	
    		else 
    			return null;	
    	}

    5.getValueAt(int rowIndex, int columnIndex),返回第rowIndex行第columnIndex列的值。

    @Override
    	public Object getValueAt(int rowIndex, int columnIndex) {
    		if(columnIndex==0)
    			return clientarray.get(rowIndex).ID;
    		else if(columnIndex==1)
    			return clientarray.get(rowIndex).name;
    		else if(columnIndex==2)
    			return clientarray.get(rowIndex).getIP();	
    		else 
    			return null;		
    	}

    6.isCellEditable(int rowIndex, int columnIndex),类表是否可以编辑,返回true,可以对JTable进行编辑。

    @Override
    	public boolean isCellEditable(int rowIndex, int columnIndex) {
    		return true;
    	}

    JTable中的几个方法

      • 设置行高:
        jtable.setRowHeight(30); 
      • 设置是否选中行:
        jtable.setRowSelectionAllowed(true);// 设置可以选中行;
      • 设置选中行时,选中行变色:
        jtable.setSelectionBackground(new Color(111, 255, 255));
        

        JTable绑定JScrollPane 滚动条

    // 绑定滚动条
    JScrollPane scrollPane = new JScrollPane(jtable);// 滚动窗口
    scrollPane.setPreferredSize(new Dimension(500, 320));
    centerpanel.add(scrollPane);

    这样界面就做好了。

    当我们客户端连接上我们的服务器,然后把他添加到我们的TJable的数组里面。再在调用界面的repaint方法,界面上TJabel组件就可以显示上连接到服务器的客户。

          JTextPane(客户端聊天界面)

          方法

    • .设置是否可以编辑:
    • setEditable(false);//设置为不可以编辑;
      
    • 设置显示的字体: 
    setFont(new Font(Font.SERIF, Font.PLAIN, 18));
    /*
     *new Font(name, style, size) 
     *风格:三个常量 lFont.PLAIN, Font.BOLD,
     Font.ITALIC
     *字号:字的大小(磅数)
     */
  • 相关阅读:
    [图解]在输入框和文本框中获取和设置光标位置,以及选中文本和获取选中文本值的方法 --- 详解,兼容所有浏览器。
    关于鼠标事件的screenY,pageY,clientY,layerY,offsetY属性 (详细图解)
    get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。
    jQuery源码 Ajax模块分析
    jQuery 1.9 Ajax代码带注释
    html5 自定义数据属性 ,也就是 data-* 自定义属性---笔记。
    client/scroll/offset width/height/top/left ---记第一篇博客
    JSON对象长度和遍历方法
    如何组织css,写出高质量的css代码
    css中文本框与按钮对不齐解决方案
  • 原文地址:https://www.cnblogs.com/hesi/p/6114069.html
Copyright © 2011-2022 走看看