Képtelen képeskönyv

Az internet tele van érdekes szolgáltatásokkal. Az egyik ilyen a lorem pixel, amivel lorem-ipsum képeket lehet kérni tetszőleges méretben. Például, ha ide kattintasz: http://lorempixel.com/400/200 akkor kapsz egy 400x200 pixeles képet.

Próbáld ki más-más számokkal is!

Mi az a Lorem Ipsum?

Ez egy teljesen értelmetlen latin szöveg első két szava. A szöveg nem jelent semmit, de úgy néz ki, mintha igazi szavakból állna. Régen a nyomdászok ezzel a szöveggel tesztelték a nyomdagépeket, manapság meg a web designerek ilyen szövegekkel szokták feltölteni a weboldalt - hogy látszólag legyen rajta valami tartalom. A lorempixel pedig egy olyan szolgáltatás, ami hasonlóan a lorem ipsumhoz, értelmetlen, de képnek kinéző képeket ad. Ezt használva a tervezés során nem kell egy weboldalra kiírni, hogy "ide egy kép fog kerülni" hanem tényleg oda lehet tenni valami képet.

A lorem ipsum tesztszöveggel ki lehet próbálni egy-egy designt

Mi az az URL?

Az URL az Uniform Resource Locator kifejezés rövidítése, és egy olyan szöveget jelent, amivel az Internetre kötött bármely információ megtalálható. Az összes weboldal címe is URL.

Az URL-ek mutathatnak egy-egy fix dologra, például egy képre:

vagy éppen végződhetnek valami olyan programban, ami más-más adatot ad vissza, akár más-más képet minden esetben amikor az URL-t le akarjuk tölteni:

Az URL-eknek is lehetnek paraméterei - számok, szövegek akármi

Hogy lesz egy lorempixel kép az ablakunkban?

Mondjuk, itt a label: de ez ugye kiírja szó szerint az URL-t.

public class FirstWindow extends Form {

    public FirstWindow() {
        window()              
        .text("Hello")        
        .add(
            label("http://lorempixel.com/400/200")
        )
        .show();                    
    }
}

Ezzel nem vagyunk beljebb. Ahhoz hogy valamit megnézzünk, a view()-et kell használni:

public class FirstWindow extends Form {

    public FirstWindow() {
        window()              
        .text("Hello")        
        .add(
            view("http://lorempixel.com/400/200")
        )
        .show();                    
    }
}

őőő, ez se jobb így, mert ez egy kétes dolog így. A view nem tudja, hogy a beírt szövegre vagyunk kíváncsiak, vagy pedig esetleg ezt egy kép URL-jeként kellene értelmezni, és betölteni a képet! Mondjuk meg neki az asPicture()-el:

public class FirstWindow extends Form {

    public FirstWindow() {
        window()              
        .text("Hello")        
        .add(
            view("http://lorempixel.com/400/200").asPicture()
        )
        .show();                    
    }
}

Ez már döfi! Ilyet kaptam:

Tadaa!

Nyilván Te mást fogsz kapni, sőt, minden futtatáskor más-más képet kapunk, hiszen pont ezt csinálja a lorempixel: mindig más-más képet ad.

Töltsünk be valamit a gépünkről!

Bár nem annyira vicces, mint a lorempixel, de ha nem URL-t hanem helyi file-t adunk meg, akkor azt a képet is betölti. Nekem az f: meghajtón volt egy kép, és így lehet betölteni:

public class FirstWindow extends Form {

    public FirstWindow() {
        window()              
        .text("Hello")        
        .add(
            view("f:/lorem-ipsum.jpg").asPicture()
        )
        .show();                    
    }
}

Merre áll a törtvonal a file nevében?

Ez minden platformon másként van: Windowson visszafele törtvonal (backslash) van, Linuxon, Amigán, Mac-en pedig sima törtvonal. A Java mindkettőt megérti, de javaslom a sima törtvonal használatát. A visszafele törtvonal ugyanis speciális betűt jelöl, a \n például azt jelenti, hogy új sor. Emiatt ha igazi visszafele törtvonalat szeretnénk, azt duplán kell beírni, így windowsosan f:\\lorem-ipsum.jpg vagy univerzálisan f:/lorem-ipsum.jpg a két helyes írásmód.

Feladat: Te is próbálj meg valami képet betölteni a gépedről. Közben érdekes követni, ahogy a degu automatikusan beállítja az ablak méretét attól függően, hogy mi a tartalma.

Csináljunk képeskönyvet!

A képeskönyv... az olyan amiben sok kép van, és ha progiból csináljuk, akkor mondjuk magától váltanak! Egyelőre egy lájtos megoldást már tudunk: lorempixel képeket kell betölteni. Csak ezeket most újra és újra be kellene tölteni, mert minden betöltéskor más-más képet kapunk.

Ehhez egyetlen dolgot kell még hozzáírni a view-hez: a refresh()-t, ami a megadott időközönként újra betölti a képet. A refresh(2000) 2 másodpercet (2000 milliszekundum) jelent, és máris kész a képeskönyvünk - amihez egyetlen képet sem kellett gyűjteni. Tehát ez egy képtelen-képeskönyv!

public class FirstWindow extends Form {

    public FirstWindow() {
        window()              
        .text("Hello")        
        .add(
            view("http://lorempixel.com/400/400").asPicture().refresh(2000)
        )
        .show();                    
    }
}