wiki:vaadin
Last modified 4 years ago Last modified on 2014-05-11 23:51:43

Vaadin

1. Mikä Vaadin

Vaadin on suomalainen palvelinpohjainen Java-kehys rikkaiden WWW-sovellusten luomiseen. Vaatimen avulla saa tehtyä WWW-sovelluksia käyttämällä ainoastaan Javaa. Vaadin muuttaa Java-koodin Javascriptiksi Google Web Toolkitin avulla. Ohjelmoijan ei siis tarvitse osata kirjoittaa yhtään HTML:ää, CSS:ää tai Javascriptiä. Ulkoasua voi kuitenkin muokata lisäksi myös CSS:n avulla, mutta tämä ei ole välttämätöntä. Vaatimen Eclipse Plug-in sisältää myös visuaalisen Vaadin Editorin, jolla ulkoasun voi luoda ja muokata.

2. Asentaminen

3. Valuuttamuunnin Vaadin-kehittimellä

source:/esimerkit/web/vaadin/rahanvaihto/rahanvaihto.png

3.1 Projektin luominen

  • Luo uusi projekti: File/New/Other/Vaadin/Vaadin 7 Project
  • Anna projektille nimeksi "rahanvaihto".
  • Katso että Target runtime -kohdassa on palvelin jota aiot käyttää esim. Apache Tomcat v7.0.
  • Configuration kohtaan kannattaa varmaan valita mahdollisimman uusi Java- ja Servlet -versio esim. Vaadin, Java 6, Servlet 3.0. Jso sinulla on Java 1.7, käy vielä Modifyllä muuttamassa Java version 1.7:ksi.
  • Valitse Finish
  • Projektiin tulee yksi varoitus ja tästä pääsee eroon seuraavasti:
    • Project/properties/Validation/XML Syntax/Enable project specific settings/No grammar specified/Ignore

3.2 RahanvaihtoUI.java

  • Projektin luominen luo src kansioon automaattisesti paketin com.example.rahanvaihto ja sinne luokan RahanVaihtoUI.
  • Kannattaa kokeilla nyt ajaa projekti ennen muutoksia, jotta näkee toimiiko kaikki. Hiiren oikealla projektin nimen päällä ja Run As/Run on Server.
  • Jos tulee sivu jossa on yksi painike ja sitä voi painaa, niin voit jatkaa. Jos Urlissa on muuta kuin projektin nimi, pyyhi loput pois (kaikki WebContent ja siitä eteenpäin)
  • seuraavaksi lisätään oma komponentti, johon itse rahanvaihto kirjoitetaan. Siksi muuta init-metodi (jota kutsutaan kun sovellus käynnistyy) muotoon:
    public class RahanvaihtoUI extends UI {
        private static final long serialVersionUID = 1L;
    
        @Override
        protected void init(VaadinRequest request) {
            final VerticalLayout layout = new VerticalLayout();
            layout.setMargin(true);
            setContent(layout);
            RahanVaihto vaihto = new RahanVaihto(this);
            layout.addComponent(vaihto);
        }
    }
    

3.3 RahanVaihto.java

Seuraavaksi luodaan Vaadin Composite -komponentti RahanVaihto, jota voidaan sitten muokata Vaadin Editorilla.

  • com.example.rahanvaihto paketin päältä: New/Other/Vaadin/Vaadin Composite
  • Anna nimeksi RahanVaihto
  • Lisää ensin muodostajaan parametri, jolla voit tuoda tiedon "isä"-luokasta:
        public RahanVaihto(UI parent) {
            buildMainLayout();
            setCompositionRoot(mainLayout);
    
            // TODO add user code here
        }
    
  • sitten korjaa luokan kommentointi ja lisää sarjanumero-attribuutti.
  • Tätä komponenttia voidaan nyt muokata Vaadin Editorilla. Jos koodi-ikkunan alapuolella ei ole Source/Design-välilehtiä, niin klikkaa hiiren oikealla napilla ja valitse Open With/Vaadin Editor.
  • Nyt valitsemalla Design pääsee muokkaamaan visuaalisella editorilla.
  • Ensin lisää absoluteLayoutin päälle HorizontalLayout, vaikka vasempaan yläkulmaan. Editorin oikeanpuoleisen valikon Properties-kohdassa Layout-välilehdellä saa asetettua layoutille pituuden ja korkeuden. Laita myös ruksit kohtiin Margin ja Spacing. Margin lisää väliä layoutin ja muiden komponenttien väliin ja Spacing lisää väliä layoutin sisällä olevien komponenttien väliin.
  • horizontalLayout siis järjestää komponentit vierekkäin.
  • vaihda Properties kohdasta layoutin nimeksi vaikkapa rahaLayout
  • Nyt voit lisätä tuohon noita tekstilaatikoita (TextField), comboBoxin ja labeleita. Komponentteja voi lisätä (ja voi olla helmpompikin) myös oikeanpuoleisen valikon Hierarchy-kohtaan rahaLayout päälle.
  • Oikeanpuolen valikon Properties-kohdasta voi valitulle komponentille esim. asettaa pituuden ja korkeuden (Layout-välilehti) sekä nimen ja otsikon/arvon (Properties-välilehti).
  • Anna komponenteille seuraavat nimet:
     TextField ComboBox  Label   TextField Label 
     editRaha cbValuutat labelOn editTulos labelKantavaluutta
        12      EUROA       =      70.80      mk 
    
  • voit laatikoiden oikeasta reunasta vedellä kunkin kokoa hieman pienemmäksi
  • Layout-välilehdeltä voit muuttaa Labelien keskityksen esim MIDDLE_CENTER
  • muuta vielä muodostajan setCompositionRoot-metodin kutsu muotoon:
    setCompositionRoot(rahaLayout);
    
    muuten jostakin syystä mitään ei näy (???)
  • Kokeile ajaa, että kaikki toimii ennen toimintojen lisäämistä.
  • Koodin pitäisi nyt näyttää suurinpiirtein tältä
  • Jos haluat "suunnitelman" näyttävän aidommalta ja lisätä edit-kenttiin arvoja, voit tehdä sen lisäämällä koodiin vastaaviin paikkoihin:
            editRaha.setValue("1.0");
            editTulos.setValue("5.9");
    

3.4 Toimintojen lisääminen

Nyt kun komponentit on luotu ja ulkoasua muokattu, niin voidaan kirjoittaa itse koodi, joka hoitaa toiminnot.

  • Ensin, että voidaan käyttää jo olemassa olevaa koodia, lisää src kansioon paketti demo.d11 ja lisää sinne luokka ValuuttaMuunnos.java.
  • Lisää projektiin myös Ohjelmointi 2 -kurssilla käytetty Ali.jar
    • Project/Properties/Java Build Path/Libraries/Add External JARs...
  • Lisää sama myös julkaisemisen puolelle:
    • Project/Properties/Deployment Assembly/Add.../Archives from File System
  • Valitse Source-välilehti
  • Varsinainen oma koodi tulee nyt tuohon public RahanVaihto()-metodiin. Tuon metodin jälkeen oleva editorin luoma koodi on ulkoasukoodia, jonne ei itse tarvitse välttämättä tehdä mitään muutoksia.
  • Lisää aluksi attribuuteille saantimetodi ja valuuttojen alustaminen:
        /**
         * @return loota johon raha kirjoitetaan
         */
        protected TextField getEditRaha() { return editRaha; }
        
        /* static jotta kaikki käyttävät samaa valuuttataulukkoa */ 
        private static ValuuttaMuunnos.Valuutat valuutat;
        static {
            valuutat = new ValuuttaMuunnos.Valuutat();
            try {
                valuutat.lue("http://users.jyu.fi/~vesal/kurssit/ohj2/luennot/11/luentoW2/servlet/valuutat.dat");
            } catch (IOException e) {
                System.err.println("Valuuttoja ei saada luettua");
            }
        }
    
  • Lisää sitten muodostajan TODO-kohtaan koodi tietojen alustamiseksi sekä tapahtumien käsittelemiseksi:
        public RahanVaihto(UI parent) {
            buildMainLayout();
            // setCompositionRoot(mainLayout);
            setCompositionRoot(rahaLayout); // muuten ei näy mitään???
    
            // Täytä ComboBoxiin valuuttojen nimet
            String[] nimet = valuutat.getValuuttojenNimet();
            cbValuutat.removeAllItems();
            cbValuutat.setNullSelectionAllowed(false);
    
            for (String item:nimet) cbValuutat.addItem(item);
            cbValuutat.setValue(nimet[1]);
    
            labelKantavaluutta.setValue(nimet[0]);
            
            /* Asetetaan muutokset tekstilaatikossa välittymään nopeammin palvelimelle.
             * Näin saadaan tulos näkyviin välittömästi numeron syöttömisen jälkeen.
             * Oletusmoodi tälle on LAZY joka välittää muutoksen kun tekstin syötössä 
             * on tauko. 
             */
            editRaha.setTextChangeEventMode(TextChangeEventMode.EAGER);
            
            /* Asetetaan comboboxiin, että laukaisee eventin heti kun valintaa muutetaan */
            cbValuutat.setImmediate(true);
            
            
            editRaha.addTextChangeListener(new TextChangeListener() {
                private static final long serialVersionUID = 1L;
                @Override
                public void textChange(TextChangeEvent event) {
                    laskeTulos(event.getText());
                }
            });
            
            cbValuutat.addValueChangeListener(new ValueChangeListener() {
                private static final long serialVersionUID = 1L;
                @Override
                public void valueChange(ValueChangeEvent event) {
                    laskeTulos(getEditRaha().getValue());
                }
            });
            // Keyboard navigation - enter key is a shortcut to selectAll
            parent.addActionHandler(new Handler() {
                private static final long serialVersionUID = 1L;
                @Override
                public Action[] getActions(Object target, Object sender) {
                    return new Action[] { new ShortcutAction("Login", ShortcutAction.KeyCode.ENTER, null) };
                }
    
                @Override
                public void handleAction(Action action, Object sender, Object target) {
                    getEditRaha().selectAll();
                }
            });        
            laskeTulos(getEditRaha().getValue());
        }
    
  • Ja lopuksi vielä metodi joka laskee tuloksen, HUOM! muuta TEXT_TULOS kohtaan se nimi jonka annoit sille tekstilaatikolle johon tulos tulee:
        /**
         * Lasketaan rahanvaihdon tulos
         * @param rahaLuettu rahamäärä joka muutetaan
         */
        protected void laskeTulos(String rahaLuettu) {
            String nimi = (String)cbValuutta.getValue();
            if ( nimi == null ) return;
            double maara = Mjonot.erotaDouble(rahaLuettu,0);
            double tulos = valuutat.getVaihdettuMaara(nimi, maara);
            editTulos.setValue(Mjonot.fmt(tulos,4,2));
        }
    
  • HUOM! Jos Eclipse näyttää vielä punaista, niin saattaa valittaa importtien puuttumisesta, eli lisää tarvittavat importit.

3.5 Ohjelman ajaminen

  • Ohjelma kannattaa ajaa klikkaamalla projektin päällä hiiren oikeaa nappia ja valitsemalla Run as/Run on Server.
  • Näin Ohjelma aukeaa suoraan oikeassa osoitteessa. Esim.
    http://localhost:8080/RahanVaihto/
    

3.6 Tyylien lisääminen

  • Lisää uusi teema:
    • projektin nimen päällä hiiren oikealla ja New/Other.../Vaadin/Vaadin Theme
    • klikkaile hyväksymistä
    • syntyy tiedostot:
      • WebContent/VAADIN/themes/rahanvaihtotheme/styles.scss
      • WebContent/VAADIN/themes/rahanvaihtotheme/rahanvaihtotheme.scss
    • RahanvaihtoUI-luokkaan tulee uusi rivi:
      @Theme("rahanvaihtotheme")
      
  • muokkaa rahanvaihtotheme.scss kohtaan /* Insert your theme rules here */
    .iso {
       font-size:large; 
       font-weight:bold;
    }
    
    .tausta {
       background:cyan;
    }
    
  • lisää haluamiisi komponentteihin tyylien nimiä designerissa, koodissa näkyy esim:
          rahaLayout.setStyleName("tausta");
    

4. Kerho-ohjelma Vaadin kehittimellä

Koodi on käsinkirjoitettu, mutta voisi olla tehty designerillakin suureksi osaksi