Java >> Java tutoriál >  >> Java

Výukový program pro návrháře grafického uživatelského rozhraní IntelliJ IDEA

Java

V tomto příspěvku uvádíme komplexní výukový program pro IntelliJ IDEA GUI Designer. Provedeme vás procesem vytvoření aplikace ‚Display Image‘ pomocí GUI.

V následující tabulce je přehled celého článku:

1. Úvod

Grafické uživatelské rozhraní (GUI) poskytuje vylepšené uživatelské prostředí. Naštěstí Java poskytuje sadu komponent „Swing components“, které umožňují vytvoření uživatelského rozhraní.

IntelliJ poskytuje 2 typy komponent GUI:

  • Formulář GUI
  • Dialogové okno GUI

K návrhu komponenty GUI používá speciální formát XML s příponou .form.

Obsah

1. Úvod
2. Příklad zobrazení obrázku
2.1 Vytvořit nový projekt
2.2 Struktura balíčků
2.3 Konfigurace komponent formuláře GUI
2.4 Nastavení omezené třídy Java
2.5 Spusťte projekt
3. Stáhněte si úplný zdrojový kód

2. Vytvořit nový projekt

Začněte vytvořením nového projektu Java v IntelliJ.

Ujistěte se, že nekontrolujete vytváření projektu ze šablony:

Nyní vyberte název projektu:

3. Struktura balíčků

Jak můžete vidět, bude zde balíček s názvem src . Nyní pod ním vytvoříme nový balíček:

Nyní zvolíme název pro náš balíček, například:com.java.codegeek

Vytvoření nového formuláře GUI nebo dialogu lze provést kliknutím pravým tlačítkem na src → Nový → Formulář nebo dialogové okno GUI

Pro komponenty GUI form a Dialog budou vytvořeny dva soubory:

  • soubor formuláře (extension.form)
  • vázaná třída (přípona .java)

Zde zvolíme GUI Form.

Pojmenujte formulář „DisplayImage“ a nakonfigurujte jej, jak je znázorněno na obrázku níže.

Ve výchozím nastavení IntelliJ IDEA automaticky vytvoří třídu Java a zároveň vytvoří nový formulář GUI. Nový formulář se automaticky připojí k nové třídě. Když jsou komponenty přidány do formuláře návrhu, pole pro každou komponentu se automaticky vloží do zdrojového souboru třídy formuláře (s některými výjimkami, jako jsou JPanels a JLabels, které po umístění do formuláře automaticky nezískají názvy polí). (https://www.jetbrains.com/help/idea/bound-class.html)

Návrhář GUI se skládá z následujících hlavních komponent:

  • Stromový přehled komponent
  • Inspektor vlastností
  • Paleta komponent
  • Pracovní prostor formulářů

4. Konfigurace komponent formuláře GUI

4.1 Strom komponent

Ve stromu komponent můžete vidět JPanel. Tento stromový náhled zobrazuje součásti obsažené ve formuláři návrhu a umožňuje vám navigaci a výběr jedné nebo více součástí.

Když vytvoříte nový formulář, komponenta JPanel se automaticky přidá do pracovního prostoru formuláře a objeví se jako podřízený formulář ve stromovém zobrazení komponent. Tento JPanel je vrcholem hierarchie komponent uživatelského rozhraní (ve smyslu Java) pro aktuální formulář.

4.2 Inspektor vlastností

Okno Inspektor vlastností zobrazuje vlastnosti pro komponentu aktuálně vybranou v pracovním prostoru formuláře nebo pro samotný formulář, pokud neexistují žádné komponenty nebo nejsou vybrány žádné. https://www.jetbrains.com/help/idea/inspector.html

Ve sloupci Hodnota v inspektoru se zobrazí několik typů editorů vlastností:

Ve sloupci Hodnota v inspektoru se zobrazuje několik typů editorů vlastností:

  • Textové pole:Zadejte hodnotu.
  • Seznam výběru:Vyberte hodnotu z rozbalovacího seznamu platných možností.
  • Zaškrtávací políčko:Nastavte hodnotu pro vlastnosti typu Boolean.
  • Dialogové okno:Představuje tlačítko se třemi tečkami, které otevře dialogové okno.

Pokud přepnete na DisplayImage.java nyní můžete vidět jPanel jako proměnnou ve třídě DisplayImage:DisplayImage.java 

package com.java.codegeek;

import javax.swing.*;
import java.awt.*;

public class DisplayImage extends JFrame {
    private JPanel panel;
}

Paleta komponent 4.3

Paleta komponent poskytuje rychlý přístup k běžně používaným komponentám (JavaBeans) dostupným pro přidávání do formulářů. Ve výchozím nastavení se zobrazuje na pravé straně rámu vedle pracovního prostoru formuláře.

Novou komponentu uživatelského rozhraní můžete do formuláře přidat následujícím způsobem:

Vyberte komponentu v paletě, přesuňte kurzor na pracovní plochu formuláře a klepněte na místo, kam chcete komponentu přidat.

Ve výchozím nastavení jsou přítomny dvě skupiny komponent:

  • Houpačka :obsahuje komponenty z knihovny komponent Swing.
  • Paleta :obsahuje jednu komponentu označenou Nepaletová komponenta . Když vyberete tuto komponentu a přidejte jej do formuláře, zobrazí se dialogové okno, ve kterém můžete vybrat libovolnou třídu komponent přístupnou pro váš projekt nebo jakýkoli jiný existující formulář. To je užitečné v případech, kdy chcete použít komponentu, aniž byste ji přidali do palety komponent.
  • (https://www.jetbrains.com/help/idea/palette.html)

4.4 Pracovní prostor formuláře

Pracovní plocha formuláře zabírá střední část rámu. Je to šedý obdélník, který se objeví, když vytvoříte nový formulář.

Zpět do souboru .form přetáhněte JLabel na panel.

Můžete změnit název pole JLable ve stromu komponent (stejně jako u JPanelu) a nastavit jej na ‚lable01‘.

Přidejte na panel další JLable a pojmenujte jej „lable02“. Jak vidíte, všechny tyto štítky jsou obsaženy v panelu.

Na těchto štítcích chceme zobrazit 2 obrázky. Nejprve byste tedy měli zkopírovat soubory obrázků do složky projektu:

Nyní bychom měli tyto obrázky nastavit jako hodnotu vlastnosti „ikony“ pro JLables.

Opakujte stejný postup pro přiřazení image02 vlastnosti icon lable02.

5. Nastavte omezenou třídu Java

Přidejte proměnné ‘ImageIcon’ do ‘DisplayImage.java’:DisplayImage.java 

package com.java.codegeek;

import javax.swing.*;
import java.awt.*;

public class DisplayImage extends JFrame {
    private JPanel panel;
    private JLabel lable01;
    private JLabel lable02;
    private ImageIcon icon01;
    private ImageIcon icon02;
}

Nyní bychom měli nastavit rozložení ve třídě Java, přiřadit obrázky k štítkům a přidat panel :DisplayImage.java 

 public DisplayImage() {

        setLayout(new FlowLayout());
        setSize(50,50);

        //label01        
        icon01 = new ImageIcon(getClass().getResource("image01.jpg"));

        lable01.setIcon(icon01);
        panel.add(lable01);

        //label02
        icon02 = new ImageIcon(getClass().getResource("image02.jpg"));

        lable02.setIcon(icon02);
        panel.add(lable02);

        add(panel);
        validate();
}

Měli bychom také nastavit hodnotu vlastnosti Layout Manager pro panel, zde jsme vybrali ‘FlowLayout’:

6. Spusťte projekt

Ke spuštění aplikace potřebujeme main() metoda pro naši třídu:DisplayImage.java 

 public static void main(String[] args) {
        DisplayImage gui = new DisplayImage();
        gui.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        gui.setSize(50, 50);
        gui.setVisible(true);
        gui.pack();
        gui.setTitle("Image");
    }

Nyní z nabídky Spustit -> Spustit „DisplayImage“ :

7. Stáhněte si úplný zdrojový kód

Toto byl výukový program IntelliJ IDEA GUI Designer pro zobrazování obrázků.

Java Tag