JavaSE_Vibatalk專案開發_part2_如何添加組裝組件X改字體顏色X設置位置X添加Button事件

- 5月 31, 2016

調適完位置和修正視窗的Resizable屬性

Code部分

package com.viba.ui;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
public class Client_Login_UI extends JFrame{
    
    private ImageIcon loginLogo = null;//定義圖片組件(還未實體化)
    private JLabel showLogoLabel = null;//定義Label組件
    private int width = 515 , height = 350;
    
    
    private Client_Login_UI()
    {
        init();
        addComponent();
        addListener();
        showFrame();
    }    
    //Step1.首先有各種組件要做初始化    
    private void init()
    {
        loginLogo = new ImageIcon("images/pic_top.jpg");//圖片初始化
        //showLogoLabel = new JLabel(loginLogo);//初始化JLabel ，並把圖片放入JLabel
        showLogoLabel = new JLabel(loginLogo,JLabel.CENTER);//初始化JLabel ，並把圖片放入JLabel
    }
    //Step2.把各種組件在該方法中進行組裝
    private void addComponent()
    {   //窗口的默認布局為邊框布局
        this.setLayout(null);//設置容器布局為null
        this.add(showLogoLabel);//把showLogoLabel這個JLabel組件放入JFrame容器中
        showLogoLabel.setBounds(0 , 0 , width-5 , 100);//相對於this這個窗口的x座標,y座標,長,寬
        
    }
    //Step3.加事件功能
    private void addListener()
    {
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
    //Step4.顯示窗口組件
    private void showFrame()
    {
        //讓窗口在螢幕正中間彈出
        int screenWidth = (int) this.getToolkit().getScreenSize().getWidth();
        int screenHeight = (int) this.getToolkit().getScreenSize().getHeight();
        int x = (screenWidth - width) / 2;
        int y = (screenHeight -height) / 2;
        this.setLocation(x,y);//窗口在屏幕中顯示的座標
        //this.setLocation(250,200);
        
        //第一步彈出一個空窗口配置寬、高
        this.setResizable(false);//不讓窗口大小變化
        this.setSize( width , height );
        //(setSize(width ,height );
        this.setVisible(true);
    }
    public static void main(String[] args)
    {
        new Client_Login_UI();
    }
}

之後加入

JLabel(顯示輸入框旁邊的文字)
JButton(按鈕)
JTextField(輸入框)
JPasswordField(密碼輸入框)

概念圖(這邊參考)

原創聯合科技他們公司做過的「指紋機差勤管理系統」

(link: http://www.iatech.com.tw/portfolio/portfolio4.html)

耕莘醫院數位學園系統

(link : http://www.status.com.tw/news20100115.asp)

並活用 .setBounds(x座標 , y座標 , 寬 , 高 )

設置布局排版

Step1. 先建立各個組件

Step2.初始化剛才添加的六個組件

Step3.針對六個組件進行組裝和位置的設定
活用 .setBounds(x座標 , y座標 , 寬 , 高 )

效果圖

Code部分

package com.viba.ui;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPasswordField;
import javax.swing.JTextField;
public class Client_Login_UI extends JFrame{
    
    private ImageIcon loginLogo = null;//定義圖片組件(還未實體化)
    private JLabel showLogoLabel = null;//定義Label組件
    private int width = 515 , height = 350;
    
    private JLabel userLabel = null , pwdLabel = null;
    private JTextField userNameTextBox = null;//使用者名稱輸入框
    private JPasswordField pwdTextBox = null;//密碼輸入框
    private JButton loginBtn = null , resetBtn = null ;//兩個Button 一個登入 一個重置
    
    
    
    private Client_Login_UI()
    {
        init();
        addComponent();
        addListener();
        showFrame();
    }    
    //Step1.首先有各種組件要做初始化    
    private void init()
    {
        loginLogo = new ImageIcon("images/pic_top.jpg");//圖片初始化
        //showLogoLabel = new JLabel(loginLogo);//初始化JLabel ，並把圖片放入JLabel
        showLogoLabel = new JLabel(loginLogo,JLabel.CENTER);//初始化JLabel ，並把圖片放入JLabel
        //初始化剛建立的JLabel
        userLabel = new JLabel("用戶名:");
        pwdLabel = new JLabel("密   碼:");
        //初始化剛建立的JTextField , JPasswordField 
        userNameTextBox = new JTextField();
        pwdTextBox = new JPasswordField();    
        loginBtn = new JButton("登 入");
        resetBtn = new JButton("重 置");
    }
    //Step2.把各種組件在該方法中進行組裝
    private void addComponent()
    {   //窗口的默認布局為邊框布局
        this.setLayout(null);//設置容器布局為null
        this.add(showLogoLabel);//把showLogoLabel這個JLabel組件放入JFrame容器中
        showLogoLabel.setBounds(0 , 0 , width-5 , 100);//相對於this這個窗口的x座標,y座標,寬,高
        
        this.add(userLabel);
        userLabel.setBounds(50 , 100 , 180 , 30);//相對於this這個窗口的x座標,y座標,寬,高
        this.add(userNameTextBox);
        userNameTextBox.setBounds(120 , 100 , 200 , 30);//相對於this這個窗口的x座標,y座標,寬,高
        this.add(pwdLabel);
        pwdLabel.setBounds(50 , 150 , 180 , 30);//相對於this這個窗口的x座標,y座標,寬,高
        this.add(pwdTextBox);
        pwdTextBox.setBounds(120 , 150 , 200 , 30);//相對於this這個窗口的x座標,y座標,寬,高
        this.add(loginBtn);
        loginBtn.setBounds(100 , 190 , 100 , 30);//相對於this這個窗口的x座標,y座標,寬,高
        this.add(resetBtn);
        resetBtn.setBounds(200 , 190 , 100 , 30);//相對於this這個窗口的x座標,y座標,寬,高
    }
    //Step3.加事件功能
    private void addListener()
    {
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
    //Step4.顯示窗口組件
    private void showFrame()
    {
        //讓窗口在螢幕正中間彈出
        int screenWidth = (int) this.getToolkit().getScreenSize().getWidth();
        int screenHeight = (int) this.getToolkit().getScreenSize().getHeight();
        int x = (screenWidth - width) / 2;
        int y = (screenHeight -height) / 2;
        this.setLocation(x,y);//窗口在屏幕中顯示的座標
        //this.setLocation(250,200);
        
        //第一步彈出一個空窗口配置寬、高
        this.setResizable(false);//不讓窗口大小變化
        this.setSize( width , height );
        //(setSize(width ,height );
        this.setVisible(true);
    }
    public static void main(String[] args)
    {
        new Client_Login_UI();
    }
}

我們接下來討論一下如何更改字體顏色吧!!!!!

這裡我們拆成 Label的顏色 和 Button的顏色

首先 Label的顏色

我們可以使用 .setForeground() --->設置字體顏色

方法一.使用 Color類別的靜態屬性常數

.setForeground(Color.red); //設置為紅色

方法二. 以RGB值宣告Color物件

.setForeground(new Color(0,255,0)); //設置為綠色

效果圖

以此類推
我們當然也可以針對Button上的顏色做修改

程式碼

package com.viba.ui;
import java.awt.Color;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPasswordField;
import javax.swing.JTextField;
public class Client_Login_UI extends JFrame{
    
    private ImageIcon loginLogo = null;//定義圖片組件(還未實體化)
    private JLabel showLogoLabel = null;//定義Label組件
    private int width = 515 , height = 350;
    
    private JLabel userLabel = null , pwdLabel = null;
    private JTextField userNameTextBox = null;//使用者名稱輸入框
    private JPasswordField pwdTextBox = null;//密碼輸入框
    private JButton loginBtn = null , resetBtn = null ;//兩個Button 一個登入 一個重置
    
    
    
    private Client_Login_UI()
    {
        init();
        addComponent();
        addListener();
        showFrame();
    }    
    //Step1.首先有各種組件要做初始化    
    private void init()
    {
        loginLogo = new ImageIcon("images/pic_top.jpg");//圖片初始化
        //showLogoLabel = new JLabel(loginLogo);//初始化JLabel ，並把圖片放入JLabel
        showLogoLabel = new JLabel(loginLogo,JLabel.CENTER);//初始化JLabel ，並把圖片放入JLabel
        //初始化剛建立的JLabel
        userLabel = new JLabel("用戶名:");
        userLabel.setForeground(Color.red); //設置為紅色
        pwdLabel = new JLabel("密   碼:");
        pwdLabel.setForeground(new Color(0,255,0)); //設置為綠色
        //初始化剛建立的JTextField , JPasswordField 
        userNameTextBox = new JTextField();
        pwdTextBox = new JPasswordField();    
        loginBtn = new JButton("登 入");
        loginBtn.setForeground(new Color(125,125,0));
        resetBtn = new JButton("重 置");
        resetBtn.setForeground(Color.orange);
    }
    //Step2.把各種組件在該方法中進行組裝
    private void addComponent()
    {   //窗口的默認布局為邊框布局
        this.setLayout(null);//設置容器布局為null
        this.add(showLogoLabel);//把showLogoLabel這個JLabel組件放入JFrame容器中
        showLogoLabel.setBounds(0 , 0 , width-5 , 100);//相對於this這個窗口的x座標,y座標,寬,高
        
        this.add(userLabel);
        userLabel.setBounds(50 , 100 , 180 , 30);//相對於this這個窗口的x座標,y座標,寬,高
        this.add(userNameTextBox);
        userNameTextBox.setBounds(120 , 100 , 200 , 30);//相對於this這個窗口的x座標,y座標,寬,高
        this.add(pwdLabel);
        pwdLabel.setBounds(50 , 150 , 180 , 30);//相對於this這個窗口的x座標,y座標,寬,高
        this.add(pwdTextBox);
        pwdTextBox.setBounds(120 , 150 , 200 , 30);//相對於this這個窗口的x座標,y座標,寬,高
        this.add(loginBtn);
        loginBtn.setBounds(100 , 190 , 100 , 30);//相對於this這個窗口的x座標,y座標,寬,高
        this.add(resetBtn);
        resetBtn.setBounds(200 , 190 , 100 , 30);//相對於this這個窗口的x座標,y座標,寬,高
    }
    //Step3.加事件功能
    private void addListener()
    {
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
    //Step4.顯示窗口組件
    private void showFrame()
    {
        //讓窗口在螢幕正中間彈出
        int screenWidth = (int) this.getToolkit().getScreenSize().getWidth();
        int screenHeight = (int) this.getToolkit().getScreenSize().getHeight();
        int x = (screenWidth - width) / 2;
        int y = (screenHeight -height) / 2;
        this.setLocation(x,y);//窗口在屏幕中顯示的座標
        //this.setLocation(250,200);
        
        //第一步彈出一個空窗口配置寬、高
        this.setResizable(false);//不讓窗口大小變化
        this.setSize( width , height );
        //(setSize(width ,height );
        this.setVisible(true);
    }
    public static void main(String[] args)
    {
        new Client_Login_UI();
    }
}

添加按鈕事件

這裡我們要針對登入的Button 和重置的Button做事件偵聽

登入的Button

這裡我們做的是當使用者按下就先印出完成登入的訊息

重置的Button

這裡我們做的是當使用者按下
就將兩個輸入框清除

以上是本次分享

搜尋此網誌

第25個冬天