Java: Cách sử dụng Color Chooser

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Lớp JColorChooser cho phép người dùng có thể chọn màu từ bảng màu đã được xây dựng sẵn. Color chooser là một thành phần mà ta có thể đặt ở mọi nơi trong chương trình GUI của ta. API JColorChooser cũng giúp dễ dàng có thể thêm hộp thoại (dialog) để chứa color chooser.

Hìn ảnh dưới đây thể hiện một ứng dụng có tên ColorChooserDemo sử dụng color chooser để thiết lập màu cho text trong một banner:

A snapshot of ColorChooserDemo, which contains a standard color chooser.

Ở hình trên ta thấy color chooser bao gồm mọi thứ trong khối có nhãn "Choose Text Color", và đây cũng chính là khả năng của color chooser chuẩn trong Java Look and Feel. Từ hình ảnh trên ta cũng thấy nó chứa hai phần là tabbed pane và preview panel. Ba tab trong tabbed pane là HSV, HSL và RGB cho phép người dùng có những lựa chọn về hệ màu, còn preview panel bên dưới sẽ hiển thị màu đang được chọn.

Đoạn mã dưới đây trích từ ví dụ dùng để tạo một thể hiện của JColorChooser và thêm nó vào container:

public class ColorChooserDemo extends JPanel ... {
    public ColorChooserDemo() {
        super(new BorderLayout());
        banner = new JLabel("Welcome to the Tutorial Zone!",
                            JLabel.CENTER);
        banner.setForeground(Color.yellow);
        . . .
        tcc = new JColorChooser(banner.getForeground());
        . . .
        add(tcc, BorderLayout.PAGE_END);
    }

Hàm tạo JColorChooser trong đoạn mã trên có đối số kiểu Color, nó dùng để chỉ định màu khởi tạo cho color chooser. Nếu ta không khởi tạo màu ban đầu thì color chooser sẽ hiển thị màu Color.white.

Color chooser sử dụng thể hiện của ColorSelectionModel để chứa và quản lý các lựa chọn hiện thời. Mô hình lựa chọn màu sắc kích hoạt một sự kiện thay đổi bất cứ khi nào người dùng thay đổi màu sắc trong trình chọn màu sắc. Ví dụ thực hiện việc đăng ký một bộ lắng nghe thay đổi với mô hình lựa chọn màu sắc để có thể cập nhật banner ở trên cùng của cửa sổ. Đoạn mã sau đây đăng ký và thực hiện sự bộ lắng nghe sự thay đổi:

tcc.getSelectionModel().addChangeListener(this);
. . .
public void stateChanged(ChangeEvent e) {
    Color newColor = tcc.getColor();
    banner.setForeground(newColor);
}

Một color chooser cơ bản giống như là được sử dụng trong ví dụ, là đủ để có thể áp dụng cho nhiều chương trình. Tuy nhiên, API color chooser cho phép bạn tùy chỉnh một color chooser bằng cách cung cấp cho nó với một bảng điều khiển xem trước thiết kế của riêng bạn, bằng cách thêm các các bảng điều khiển chooser của riêng bạn với nó, hoặc bằng cách loại bỏ các tấm chooser hiện từ công cụ chọn màu sắc. Ngoài ra, lớp JColorChooser cung cấp hai phương thức để làm cho nó dễ dàng sử dụng một color chooser trong một hộp thoại.

Phần tiếp theo của phần này sẽ thảo luận về các chủ đề:

Tìm hiểu ví dụ ColorChooserDemo2

Bây giờ chúng ta hãy chuyển sự chú ý của chúng ta sang ví dụ ColorChooserDemo2, đây là một phiên bản sửa đổi của ví dụ giới thiệu trước đó có sử dụng nhiều hơn API JColorChooser.

A snapshot of ColorChooserDemo, which contains a custom color chooser.

 

Ví dụ này tùy chỉnh banner văn bản của color chooser theo các cách sau:

  • Loại bỏ bảng điều khiển preview
  • Loại bỏ tất cả các bảng điều khiển chooser mặc định
  • Thêm một bảng điều khiển chooser tùy chỉnh

Chương trình này cũng thêm một nút lệnh để thực hiện nhiệm vụ mang color chooser vào hộp thoại, và bạn có thể sử dụng nó để thiết lập màu nền của banner.

Hiển thị Color Chooser trong hộp thoại

Lớp JColorChooser class provides two class methods to make it easy to use a color chooser in a dialog. ColorChooserDemo2 uses one of these methods, showDialog, to display the background color chooser when the user clicks the Show Color Chooser...button. Here is the single line of code from the example that brings up the background color chooser in a dialog:

Lớp JColorChooser cung cấp hai phương thức lớp làm cho nó dễ dàng sử dụng hơn một color chooser trong một hộp thoại. ColorChooserDemo2 sử dụng một trong những phương thức này, đó là showDialog  để hiển thị màu nền color chooser khi người dùng nhấp chuột vào nút Show Color Chooser... Dưới đây là câu lệnh trích từ ví dụ mà sẽ trả vào chọn màu nền trong một hộp thoại:

Color newColor = JColorChooser.showDialog(
    ColorChooserDemo2.this,
    "Choose Background Color",
    banner.getBackground());

Đối số đầu tiên là cha của hộp thoại, đối số thứ hai là tiêu đề hộp thoại, và đối số thứ ba là màu lựa chọn ban đầu.

Các hộp thoại biến mất theo ba điều kiện: người dùng chọn một màu và nhấp chuột vào nút OK, người dùng hủy bỏ các hoạt động với nút Cancel, hoặc người sử dụng bỏ qua hộp thoại với một điều khiển frame. Nếu người dùng chọn một màu sắc, phương thức showDialog sẽ trả về màu sắc mới. Nếu người dùng hủy bỏ hoạt động hoặc bỏ qua cửa sổ, phương thức sẽ trả về null. Dưới đây là mã từ ví dụ mà cập nhật những màu sắc biểu ngữ nền theo giá trị trả về bởi showDialog:

if (newColor != null) {
    banner.setBackground(newColor);
}

Hộp thoại tạo ra bởi showDialog là dạng modal. Nếu bạn muốn có một hộp thoại non-modal thì bạn có thể sử dụng phương thức createDialog của JColorChooser để tạo hộp thoại. Phương thức này cũng cho phép bạn chỉ định các bộ lắng nghe hành động cho các nút OK và Cancel trong cửa sổ hộp thoại. Sử dụng phương thức show của JDialog để hiển thị hộp thoại được tạo bằng phương thức này.

Loại bỏ hoặc thay thế Preview Panel

Mặc định thì color chooser sẽ hiển thị preview panel. Ví dụ ColorChooserDemo2 sẽ loại bỏ preview panel của text color chooser bằng câu lệnh sau:

tcc.setPreviewPanel(new JPanel());

Câu lệnh trên sẽ loại bỏ preview panel vì một JPanel thông thường không có kích thước và không có khung nhìn mặc định. Để thiết lập preview panel thành mặc định thì ta sử dụng null như là đối số của setPreviewPanel.

Để cung cấp một bảng điều khiển xem trước tùy chỉnh, bạn cũng sử dụng phương thức setPreviewPanel. Chành phần bạn truyền vào phương thức nên kế thừa từ JComponent, chỉ định một kích thước hợp lý, và cung cấp một view tùy biến các màu hiện tại. Để nhận được thông báo khi người dùng thay đổi màu sắc trong color chooser, preview panel phải đăng ký dưới dạng bộ lắng nghe những thay đổi trên model lựa chọn màu sắc của color chooser được mô tả ở trên.

Tạo bảng Chooser tùy chỉnh

Color chooser mặc định cung cấp 5 bảng điều khiển chooser:

  • Swatches - dùng để chọn một màu từ một bộ sưu tập swatche.
  • HSV - cho việc lựa chọn một màu sắc bằng cách sử dụng màu đại diện Hue-Saturation-Value. Trước JDK 7, nó được gọi là HSB, viết tắt của Hue-Saturation-Brightness.
  • HSL - cho việc lựa chọn một màu sắc bằng cách sử dụng màu đại diện Hue-Saturation-Lightness, bảng điều khiển này mới có trong JDK 7.
  • RGB - cho việc lựa chọn một màu sắc bằng cách sử dụng mô hình màu Red-Green-Blue.
  • CMYK - cho việc lựa chọn một màu sắc bằng cách sử dụng màu xử lý hoặc bốn mô hình màu. panel này là mới trong JDK 7.

Bạn có thể mở rộng color chooser mặc định bằng cách thêm các bảng điều khiển chooser với thiết kế riêng của bạn thông qua phương thức addChooserPanel, hoặc bạn có thể giảm bớt bằng cách loại bỏ các bảng điều khiển chooser với phương thức removeChooserPanel.

Nếu bạn muốn loại bỏ tất cả các bảng điều khiển chooser mặc định và thêm một hoặc nhiều bảng điều khiển chooser của riêng bạn, bạn có thể làm điều này với một lời gọi duy nhất phương thức setChooserPanels. Ví dụ ColorChooserDemo2 sử dụng phương thức này để thay thế các bảng điều khiển chooser mặc định với một thể hiện của CrayonPanel, là một bảng điều khiển chooser tùy chỉnh. Dưới đây là lời gọi đến phương thức setChooserPanels trong ví dụ:

//Ghi đè các bảng điều khiển chooser.
AbstractColorChooserPanel panels[] = { new CrayonPanel() };
tcc.setChooserPanels(panels);

Đoạn mã trên tạo một mảng chứa các CrayonPanel, sau đó gọi phương thức setChooserPanels để thiết lập các nội dung của mảng là các bảng điều khiển chooser của color chooser.

CrayonPanel là lớp con của AbstractColorChooserPanel và ghi đè 5 phương thức trừu tượng dưới đây được định nghĩa trong lớp cha của nó:

void buildChooser()

Creates the GUI that comprises the chooser panel. The example creates four toggle buttons — one for each crayon — and adds them to the chooser panel.

void updateChooser()

This method is called whenever the chooser panel is displayed. The implementation of this method selects the toggle button that represents the currently selected color.

void buildChooser()

Tạo giao diện bao gồm bảng điều khiển chooser. Ví dụ tạo ra bốn nút bật tắt - mỗi nút cho một crayon - và thêm chúng vào bảng điều khiển chooser.

void updateChooser()

Phương thức này được gọi bất cứ khi nào bảng điều khiển chooser được hiển thị. Việc thực hiện phương thức này sẽ chọn nút bật tắt đại diện cho màu sắc hiện đang được chọn.

public void updateChooser() {
    Color color = getColorFromModel();
    if (Color.red.equals(color)) {
        redCrayon.setSelected(true);
    } else if (Color.yellow.equals(color)) {
        yellowCrayon.setSelected(true);
    } else if (Color.green.equals(color)) {
        greenCrayon.setSelected(true);
    } else if (Color.blue.equals(color)) {
        blueCrayon.setSelected(true);
    }
}

String getDisplayName()

Trả về tên hiển thị của bảng điều khiển chooser. Tên được sử dụng trên tab của chooser panel. Dưới đây là phương thức getDisplayName của ví dụ:

public String getDisplayName() {
    return "Crayons";
}

Icon getSmallDisplayIcon()

Trả về một biểu tượng nhỏ đại diện cho bảng điều khiển chooser. Hiện tại phương thức này không được sử dụng. Các phiên bản tương lai của color chooser có thể sử dụng biểu tượng này hoặc biểu tượng lớn để đại diện cho bảng điều khiển chooser này trong việc hiển thị. Việc thực hiện ví dụ của phương thức này trả về null.

Icon getLargeDisplayIcon()

Trả về một biểu tượng lớn đại diện cho bảng điều khiển chooser. Hiện tại phương thức này không được sử dụng. Các phiên bản tương lai của color chooser có thể sử dụng biểu tượng này hoặc biểu tượng nhỏ để đại diện cho bảng điều khiển chooser này trong việc hiển thị. Việc thực hiện ví dụ của phương thức này trả về null.

API Color Chooser

Tạo và hiển thị Color Chooser
Phương thức hoặc hàm tạo Mục đích
JColorChooser()
JColorChooser(Color)
JColorChooser(ColorSelectionModel)
Tạo một color chooser. Hàm tạo mặc định tạo ra một color chooser với màu sắc ban đầu là Color.white. Sử dụng hàm tạo thứ hai để xác định một màu khởi tạo khác. Đối số ColorSelectionModel cung cấp color chooser với model lựa chọn màu sắc.
Color showDialog(Component, String, Color) Create and show a color chooser in a modal dialog. The Component argument is the parent of the dialog, the String argument specifies the dialog title, and the Color argument specifies the chooser's initial color.Tạo và hiển thị color chooser trong hộp thoại modal. Đối số Component là cha của hộp thoại, đối số String xác định tiêu đề của hộp thoại, và đối số Color xác định màu sắc ban đầu của chooser.
JDialog createDialog(Component, String,
boolean, JColorChooser, ActionListener,
ActionListener)
Tạo một hộp thoại cho color chooser nhất định. Với showDialog, đối số Component là cha của hộp thoại và tham số String chỉ định tiêu đề hộp thoại. Các tham số khác là như sau: boolean chỉ định liệu hộp thoại là modal hay không, JColorChooser là color chooser để hiển thị trong hộp thoại, đối số ActionListener đầu tiên là nút cho OK, và thứ hai là nút Cancel.

 

Tùy chỉnh giao diện cho Color Chooser
Phương thức Mục đích
void setPreviewPanel(JComponent)
JComponent getPreviewPanel()
Thiết lập hoặc lấy thành phần dùng để xem trước màu lựa chọn. Để xóa preview panel thì ta sử dụng new JPanel() như là đối số. Để chỉ định preview panel mặc định thì ta sử dụng null.
void setChooserPanels(AbstractColorChooserPanel[])
AbstractColorChooserPanel[] getChooserPanels()
Thiết lập hoặc lấy các bảng điều khiển chooser trong color chooser.
void addChooserPanel(AbstractColorChooserPanel)
AbstractColorChooserPanel removeChooserPanel(AbstractColorChooserPanel)
Thêm hoặc xóa bảng điều khiển chooser vào color chooser.
void setDragEnabled(boolean)
boolean getDragEnabled()
Thiết lập hoặc lấy thuộc tính dragEnabled, thuộc tính này có giá trị true thì cho phép xử lý vẽ trên thành phần tương ứng. Giá trị mặc định là false.

 

Thiết lập hoặc lấy màu hiện thời
Phương thức Mục đích
void setColor(Color)
void setColor(int, int, int)
void setColor(int)
Color getColor()
Thiết lập hoặc lấy màu hiện thời. ban đối số kiểu int của phương thức setColor tương ứng với ba mức màu RGB. Đối với phương thức setColor có một đối số kiểu int thì nó có nhiệm vụ phân chia đối số nguyên thành 4 byte và diễn giải số nguyên như là một màu RGB như sau: How color chooser interprets an int as an RGB value.
void setSelectionModel(ColorSelectionModel)
ColorSelectionModel getSelectionModel()
Thiết lập hoặc lấy model lựa chọn cho color chooser. Đối tượng này chứa lựa chọn hiện thời và kích hoạt thay đổi các sự kiện đã được đăng ký với các bộ lắng nghe mỗi khi thay đổi lựa chọn.

Ví dụ có sử dụng Color Chooser

» Tiếp: Cách tạo hộp thoại (Dialog)
« Trước: Cách sử dụng ButtonGroup
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!