Composite Pattern w UI Komponenty

Dlaczego Composite Pattern to podstawa nowoczesnych UI

Wyobraź sobie interfejs aplikacji – każde okno składa się z paneli, panele z przycisków i etykiet, a te mogą zawierać inne elementy. To klasyczne drzewo komponentów, które idealnie rozwiązuje wzorzec Composite.

Ten wzorzec rozwiązuje fundamentalny problem: jak w jednolity sposób obsługiwać zarówno pojedyncze elementy UI (liść) jak i złożone kontenery zawierające inne komponenty (kompozyt)?

Co się nauczysz

Wymagania wstępne

Czym jest wzorzec Composite

W kontekście interfejsów użytkownika oznacza to, że możesz:
– Traktować pojedynczy przycisk tak samo jak cały panel z przyciskami
– Dodawać komponenty do kontenerów bez sprawdzania ich typu
– Wywoływać te same operacje na liściach i kompozytach

Struktura wzorca w UI

// Wspólny interfejs dla wszystkich komponentów UI
public interface UIComponent {
    void render();
    void handleEvent(Event event);
    void setVisible(boolean visible);
    int getWidth();
    int getHeight();
}

Implementacja podstawowych komponentów

Zacznijmy od implementacji prostego komponentu-liścia:

// Komponent-liść - nie może zawierać innych komponentów
public class Button implements UIComponent {
    private String text;
    private int x, y, width, height;
    private boolean visible = true;
    
    public Button(String text, int x, int y, int width, int height) {
        this.text = text;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
    
    @Override
    public void render() {
        if (visible) {
            System.out.println("Rendering button: " + text + 
                " at (" + x + ", " + y + ")");
            // Tutaj byłaby rzeczywista logika renderowania
        }
    }
    
    @Override
    public void handleEvent(Event event) {
        if (event.isMouseClick() && isPointInside(event.getX(), event.getY())) {
            System.out.println("Button '" + text + "' clicked!");
            // Obsługa kliknięcia
        }
    }
    
    @Override
    public void setVisible(boolean visible) {
        this.visible = visible;
    }
    
    @Override
    public int getWidth() { return width; }
    
    @Override 
    public int getHeight() { return height; }
    
    private boolean isPointInside(int px, int py) {
        return px >= x && px <= x + width && py >= y && py <= y + height;
    }
}

Teraz komponent-kompozyt, który może zawierać inne komponenty:

// Komponent-kompozyt - może zawierać inne komponenty
public class Panel implements UIComponent {
    private List children = new ArrayList<>();
    private int x, y, width, height;
    private boolean visible = true;
    private String title;
    
    public Panel(String title, int x, int y, int width, int height) {
        this.title = title;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
    
    // Metody do zarządzania komponentami potomnymi
    public void addComponent(UIComponent component) {
        children.add(component);
    }
    
    public void removeComponent(UIComponent component) {
        children.remove(component);
    }
    
    public List getChildren() {
        return new ArrayList<>(children); // Defensive copy
    }
    
    @Override
    public void render() {
        if (visible) {
            System.out.println("Rendering panel: " + title);
            // Renderowanie tła panelu
            
            // Automatyczne renderowanie wszystkich dzieci
            for (UIComponent child : children) {
                child.render();
            }
        }
    }
    
    @Override
    public void handleEvent(Event event) {
        if (!visible) return;
        
        // Przekaż event do wszystkich dzieci
        for (UIComponent child : children) {
            child.handleEvent(event);
        }
    }
    
    @Override
    public void setVisible(boolean visible) {
        this.visible = visible;
        // Propaguj widoczność do dzieci
        for (UIComponent child : children) {
            child.setVisible(visible);
        }
    }
    
    @Override
    public int getWidth() { return width; }
    
    @Override
    public int getHeight() { return height; }
}

Praktyczny przykład - budowanie menu

Zobaczmy jak wzorzec Composite sprawdza się w tworzeniu zagnieżdżonych menu:

public class MenuItem implements UIComponent {
    private String label;
    private boolean visible = true;
    
    public MenuItem(String label) {
        this.label = label;
    }
    
    @Override
    public void render() {
        if (visible) {
            System.out.println("  MenuItem: " + label);
        }
    }
    
    @Override
    public void handleEvent(Event event) {
        if (event.isMenuSelection(label)) {
            System.out.println("Selected: " + label);
            // Wykonaj akcję przypisaną do menu item
        }
    }
    
    @Override
    public void setVisible(boolean visible) {
        this.visible = visible;
    }
    
    @Override
    public int getWidth() { return label.length() * 8; } // Przybliżona szerokość
    
    @Override
    public int getHeight() { return 20; }
}

public class Menu implements UIComponent {
    private String title;
    private List items = new ArrayList<>();
    private boolean visible = true;
    
    public Menu(String title) {
        this.title = title;
    }
    
    public void addItem(UIComponent item) {
        items.add(item);
    }
    
    @Override
    public void render() {
        if (visible) {
            System.out.println("Menu: " + title);
            for (UIComponent item : items) {
                item.render();
            }
        }
    }
    
    @Override
    public void handleEvent(Event event) {
        if (!visible) return;
        
        for (UIComponent item : items) {
            item.handleEvent(event);
        }
    }
    
    @Override
    public void setVisible(boolean visible) {
        this.visible = visible;
        for (UIComponent item : items) {
            item.setVisible(visible);
        }
    }
    
    @Override
    public int getWidth() {
        return items.stream()
                   .mapToInt(UIComponent::getWidth)
                   .max()
                   .orElse(0);
    }
    
    @Override
    public int getHeight() {
        return items.stream()
                   .mapToInt(UIComponent::getHeight)
                   .sum();
    }
}

Teraz możemy budować złożone struktury menu:

public class MenuExample {
    public static void main(String[] args) {
        // Tworzymy główne menu
        Menu mainMenu = new Menu("Main Menu");
        
        // Dodajemy proste elementy
        mainMenu.addItem(new MenuItem("New File"));
        mainMenu.addItem(new MenuItem("Open File"));
        
        // Tworzymy submenu - również jest UIComponent!
        Menu editMenu = new Menu("Edit");
        editMenu.addItem(new MenuItem("Cut"));
        editMenu.addItem(new MenuItem("Copy"));
        editMenu.addItem(new MenuItem("Paste"));
        
        // Dodajemy submenu do głównego menu
        mainMenu.addItem(editMenu);
        
        // Możemy dodać więcej elementów
        mainMenu.addItem(new MenuItem("Exit"));
        
        // I render całej struktury jednym wywołaniem!
        mainMenu.render();
        
        // Lub obsłużyć event dla całego drzewa
        Event clickEvent = new MenuSelectionEvent("Copy");
        mainMenu.handleEvent(clickEvent);
    }
}

Zalety wzorca w aplikacjach UI

1. Jednolite traktowanie komponentów

2. Łatwe dodawanie nowych typów komponentów

// Nowy typ komponentu - automatycznie współpracuje z istniejącym kodem
public class Image implements UIComponent {
    private String imagePath;
    private boolean visible = true;
    
    public Image(String imagePath) {
        this.imagePath = imagePath;
    }
    
    @Override
    public void render() {
        if (visible) {
            System.out.println("Rendering image: " + imagePath);
            // Tutaj logika ładowania i wyświetlania obrazu
        }
    }
    
    // Implementacja pozostałych metod...
}

// Można od razu użyć w istniejącej strukturze
panel.addComponent(new Image("logo.png"));

3. Automatyczna propagacja operacji

Gdy ukryjesz panel, wszystkie jego komponenty także zostają ukryte. Gdy przeniesiesz kontener, całą zawartość się przenosi. To wszystko dzieje się automatycznie dzięki rekurencyjnemu wywołaniu metod.

Typowe pułapki i jak ich unikać

// ŹLE - Button nie może zawierać innych komponentów
Button button = new Button("OK", 10, 10, 80, 30);
// button.addComponent(new Label("text")); // To się nie skompiluje

// DOBRZE - sprawdź typ przed dodaniem
public void addComponentSafely(UIComponent parent, UIComponent child) {
    if (parent instanceof Panel) {
        ((Panel) parent).addComponent(child);
    } else {
        throw new UnsupportedOperationException(
            "Component " + parent.getClass().getSimpleName() + 
            " cannot contain child components");
    }
}

Wzorzec w praktyce - formularz rejestracji

Zobaczmy bardziej złożony przykład - formularz rejestracji z grupowaniem pól:

public class RegistrationForm {
    public static UIComponent createForm() {
        // Główny panel formularza
        Panel mainPanel = new Panel("Registration Form", 0, 0, 400, 300);
        
        // Sekcja danych osobowych
        Panel personalDataPanel = new Panel("Personal Data", 10, 10, 380, 120);
        personalDataPanel.addComponent(new Label("First Name:", 20, 20));
        personalDataPanel.addComponent(new TextInput("firstName", 120, 20, 200, 25));
        personalDataPanel.addComponent(new Label("Last Name:", 20, 50));
        personalDataPanel.addComponent(new TextInput("lastName", 120, 50, 200, 25));
        personalDataPanel.addComponent(new Label("Email:", 20, 80));
        personalDataPanel.addComponent(new TextInput("email", 120, 80, 200, 25));
        
        // Sekcja preferencji
        Panel preferencesPanel = new Panel("Preferences", 10, 140, 380, 80);
        preferencesPanel.addComponent(new Checkbox("Newsletter", 20, 20));
        preferencesPanel.addComponent(new Checkbox("SMS notifications", 20, 45));
        
        // Panel przycisków
        Panel buttonPanel = new Panel("Actions", 10, 230, 380, 50);
        buttonPanel.addComponent(new Button("Register", 250, 10, 80, 30));
        buttonPanel.addComponent(new Button("Cancel", 340, 10, 50, 30));
        
        // Składamy wszystko razem
        mainPanel.addComponent(personalDataPanel);
        mainPanel.addComponent(preferencesPanel);
        mainPanel.addComponent(buttonPanel);
        
        return mainPanel;
    }
    
    public static void main(String[] args) {
        UIComponent form = createForm();
        
        // Jeden wywołanie renderuje cały formularz
        form.render();
        
        // Można łatwo ukryć całą sekcję
        // ((Panel) form).getChildren().get(1).setVisible(false); // Ukryj preferencje
    }
}

Przydatne zasoby:

• Oracle Java Swing Tutorial
• JavaFX 11 Documentation
• Composite Pattern - Refactoring Guru
• Composite Pattern Examples

Wzorzec Composite to fundamental building block nowoczesnych interfejsów użytkownika. Dzięki niemu tworzysz kod który jest łatwy w utrzymaniu, rozszerzaniu i testowaniu. W 2019 roku każdy framework UI używa tej koncepcji - od Reacta po native aplikacje mobilne.

Co Cię najbardziej zaskočyło w wzorcu Composite? Jakie widzisz zastosowania w swoich projektach? Podziel się w komentarzach!