wiki:editpanel
Last modified 3 years ago Last modified on 2015-01-30 19:13:12

EditPanel - apukomponentti tekstin syöttöön

  • Aluksi kuva WindowBuilderistä kun komponentti on tehty:

  • tarkoitus on että yhdellä komponentilla saadaan laitettua ikkunaan sekä edit-kenttä että sille otsikko-label.

1. Komponentin tekeminen

  • tee ensin hyvä package komponentillesi (esim. guilib)
  • luo uusi komponentti: File/New/Other.../!WindowBuilder/Swing Designer/JPanel
  • anna nimeksi EditPanel ja Finish
  • kirjoita luokalle kommentit ja versionumero tyyliin:
    /**
     * Luokka otsikon ja edit-kentän yhdistämiseksi 
     * @author vesal
     * @version 4.1.2010
     */
    public class EditPanel extends JPanel {
    	private static final long serialVersionUID = 1L;
    
  • sitten siirry Desing-tilaan EditPanel.java -ikkunan alalaidasta
  • tee paneelista aluksi n 30 pikselin korkuinen ottamalla sen alareunasta kiinni
  • vaihda panelin layoutiksi BoxLayout
  • raahaa panelin päälle yksi JLabel ja anna sen nimeksi label ja tekstiksi vaikkapa nimi
  • laita properties ikkunasta olevasta "Show advanced properties" lisäominaisuudet päälle
  • laita labelin PreferredSize kohdasta leveydeksi 100
  • label on vielä kapea, älä huoli, se levenee, kun Edit laitetaan paikalleen.
  • mene kohtaan Alignment ja klikkaa kohdan alignmentX rivillä olevaa oikealle osoittavaa nuolinäppäintä (RIGHT_ALIGnMENT).
  • laita labelin teksti (HorizontalAlignment) oikeaan (TRAILING) tai vasempaan (LEADING) reunaan sen mukaan miten haluat tekstien olevan
  • pudota labelin oikealle puolelle toinen label, sen tekstiksi yksi välilyönti ja nimeksi fill1 (fill yksi).
  • pudota fill1 labelin oikealle puolelle JTextField ja sen nimeksi edit
  • pudota vielä editi:in oikealle puolelle JLabel, tekstiksi välilyönti ja nimeksi fill2
  • fill1 ja fill2 labelien ainoa tarkoitus on olla marginaaleina. Toinen tapa tehdä vastaavat marginaalit olisi:
    • varsinaiselle panelille laitetaan border-ominaisuudeksi EmptyBorder ja siihen erityisesti oikealle n. 5-10 pxl. Tarvittaessa muihinkin suuntiin
    • labelille laitetaan EmptyBorder jossa on n. 5-10 pxl oikealla. Näin saadaan labelin teksti hieman irti editistä.
    • toisaalta joku voi haluta tuon oikean reunan marginaalin aidosti 0:ksi ja sitten säätää marginaaleja (Bordereita) siinä ylemmän tason komponentissa, johon EditPanel aikanaan pudotetaan. Vaihtoehtoja on monia, kokeile joskus kun jää aikaa.
  • nyt kun katsot koodia Source-ikkunassa, niin sen pitäisi näyttää suurin piirtein seuraavalta:
    public class EditPanel extends JPanel {
    
        private static final long serialVersionUID = 1L;
        private final JLabel label = new JLabel("nimi");
        private final JLabel fill1 = new JLabel(" ");
        private final JTextField edit = new JTextField();
        private final JLabel fill2 = new JLabel(" ");
    
        /**
         * Create the panel.
         */
        public EditPanel() {
            edit.setColumns(10);
            setLayout(new BoxLayout(this, BoxLayout.X_AXIS));
            label.setHorizontalAlignment(SwingConstants.TRAILING);
            label.setAlignmentX(Component.RIGHT_ALIGNMENT);
            label.setPreferredSize(new Dimension(100, 14));
            
            add(label);
            add(fill1);
            add(edit);
            add(fill2);
        }
    }
    

Jos koodisi ei näytä tältä, tarkasta että koodin generointiasetukset ovat oikein.

2. Parempi pääsy komponentin omaisuuksiin

  • komponentti olisi jo valmis käytettäväksi, mutta sen sisällä ominaisuuksiin ei ei pääse kovin hyvin käsiksi, siksi lisätään vielä muutama metodi:
  • mene takaisin Design tilaan
  • mene labelin text sanan päälle Properties-ikkunassa (ja nimenomaan text, ei sen sisällön) ja ota hiiren oikealla Expose property
  • anna propertyn nimeksi caption
  • julkaise vielä vastaavasti näkyville propertyt seuraavasti:
      label.text    => caption // tämä siis tuli jo tehtyä
      edit.text     => text
      edit.columns  => columns
    
  • voisimme julkaista myös labelin preferredSize, mutta jos haluamme julkaista vain leveyden, niin se voidaan tehdä kirjoittamalla koodiin muiden set/get lisäksi:
        /**
         * Asetetaan labelin leveys
         * @param w asetettava leveys
         */
        public void setLabelWidth(int w) {
            int h = getPreferredSize().height;
            label.setPreferredSize(new Dimension(w, h));	
        }
    
  • muista tallettaa

3. Komponentin käyttäminen

  • nyt komponenttisi on valmis käytettäväksi.
  • parhaiten se toimii seuraavasti, jos haluat monta tällaista allekkain
  • pudota paneli sinne mihin haluat monta editPanelia
  • pistä tälle panelille layoutiksi BorderLayout
  • pudota toinen paneli tämän panelin NORTH
  • tälle toisella panelille (vaikkapa nimeksi box) laita BoxLayout ja vielä sen Constructor-kohdasta Y_AXIS
  • nyt voidaan alkaa pudottelemaan omaan EditPanelia box:in päälle
  • ensin omaa komponettia ei näy missään, ota Palette-ikkunasta Choose Component ja kirjoita siihen EditPanel
  • nyt komponenttisi hyppäsi Palette-ikkunan kohtaan Custom
  • sieltä voit raahailla komponenttia boxin päälle, ehkä helpointa pudottaa boxin päälle nimenomaan Structure-ikkunassa, koska box on surkean pieni olleessaan pohjoisessa (keskellä ollessaan se venyttäisi kaikki EditPanelit ylisuuriksi)
  • voit vedellä useita paikalleen
  • jos haluat muuttaa komponenttisi ominaisuuksia, ne ovat valitettavasti piilossa Advanced property-puolella. Voit ne julkaista sieltä näkyville ottamalla jonkin pudottamasi EditPanelin ja sitten menet Advanced property näkymässä ominaisuuden päälle ja valitse hiiren oikealla napilla aukeavasta menusta "Mark as preferred". Julkaise kaikki lisäämäsi ominaisuudet. Sitten voit sulkea Advanced property näkymän.
  • voi valita Ctrl-pohjassa pitämällä useita komponentteja kerralla ja vaikka siten laittaa kaikille samalla kertaa labelWidth=200
  • kun olet valinnut monta komponettia, voit nimetä ne kuvaavasti samalla kertaa: hiiren oikeata ja Rename
  • aseta haluamasi Caption ja tarvittaessa Text.
  • jos haluat että asettamasi komponentit ovat rullattavissa jos ikkunan muutetaan kovin matalaksi, niin silloin asettelu on karkeasti seuraava:
      panelJasenTiedot    - JPanel, BorderLayout
         labelJasenTiedot - JLabel, NORTH
         scrollJasen      - JScrollPane, Center
            panelJasen    - JPanel, BorderLayout
               boxJasen   - JPanel, NORTH, BoxLayout(Y_AXIS)
         labelVirhe       - JLabel, SOUTH
    

jolloin saat seuraavan kuvan

Attachments