Понимание основ построения пользовательского интерфейса на Java Swing

До того, как я начал писать на Java и делать интерфейсы приложений при помощи Java Swing я писал на C++ и использовал C++Builder. Все интерфейсы создавались не руками, а при помощи редактора форм. Я брал компоненты, кидал их на форму, передвигал куда надо и всё. Далее оставалось написать только обработчики событий. Вуаля и приложение готово. Я не задумывался над тем, что происходит за кадром. Однако, как только я перешел на Java, мне сразу же стало не по себе – интерфейс пришлось делать руками самому. Где это видано такое? Но спустя некоторое время я понял, что делать всё руками не так уж и плохо. Сразу пришло понимание общей структуры компонентов, контейнеров и лейаутов. Кто кого зачем и почему?

Условно из компонентов можно выделить две категории компонентов. Первая категория — компоненты, которые отображают необходимые данные и служат для взаимодействия с пользователем. К таким компонентам можно отнести лейблы, кнопки, чекбоксы и так далее. Вторая категория – контейнеры, которые могут содержать внутри себя другие контейнеры и компоненты из первой категории. Компоненты из второй категории это панели JPanel, панели прокрутки JScrollPane и так далее.

Для того, чтобы контейнер мог понять, как ему отобразить компоненты, которые на нем располагаются, необходимо задать лейаут (Layout). Именно лейаут говорит, как отобразить дочерние комопненты, какие размеры они должны иметь, как реагировать на изменение размера родительского контейнера.

Деление комопнентов Swing на две категории условное. Если посмотреть иерархию, то даже самый простой казалось бы комопнент JLabel наследует от Container. Сначала такое кажется непонятным, но при более детальном просмотре оказывается, что лейбл может иметь иконку, то есть выступать в роли контейнера. Другой пример кнопка JButton, которая содержит JLabel для отображения текстовой надписи – тоже получается контейнер. Но сравнивая JPanel и JButton понятно, что JButton содержит только один лейбл, а JPanel может содержать произвольное количество таких же JPanel да еще и JButton кнопок. К тому же JPanel предоставляет разработчику методы для таких манипуляций – добавления, удаления и выставления лейаутов, а у JButton такого нет.

Думаю не лишним будет простой пример.

example2

import java.awt.Dimension;
import java.awt.FlowLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class Test {
     
     public static void createGUI() {
          JFrame.setDefaultLookAndFeelDecorated(true);
          JFrame frame = new JFrame(«Test frame»);
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
     
          JPanel panel = new JPanel();
          panel.setLayout(new FlowLayout());
          
          JLabel label = new JLabel(«Test label»);
          panel.add(label);
          
          JButton button = new JButton(«Text button»);
          panel.add(button);
          
          
          frame.getContentPane().add(panel);          
          frame.setPreferredSize(new Dimension(200, 100));
          
          frame.pack();
          frame.setVisible(true);          
     }
     
     public static void main(String[] args) {
          javax.swing.SwingUtilities.invokeLater(new Runnable() {
               public void run() {
                    createGUI();
               }
          });
     }
}

Исходный код приложения очень похож на пример кода из предыдущего поста. Здесь добавляется панель JPanel. Далее мы устанавливаем ему лейаут FlowLayout. Как видно из рисунка все компоненты располагаются в линию. Далее создаем текстовую надпись и кнопку и добавляем их на панель. Затем панель помещаем на JFrame.

Иногда история создания интернета интересна к прочтению. Можно много узнать о том, как создавали интернет.

Advertisements

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: