niedziela, 15 marca 2009

Przykładowa aplikacja Java ME w NetBeans IDE z wtyczką Mobility

Dostałem już kilka maili od osób które zaczynają swoją przygodę z Java ME a mają problem ze zbudowaniem działającej prostej aplikacji. Dlatego chciałbym dziś zaprezentować mały tutorial jak stworzyć taką prostą aplikację za pomocą NetBeans IDE z wtyczką Mobility. Który wg mnie jest najlepszym środowiskiem do mobilnej Javy z jakim się spotkałem - a wiele już przeszło przez moje macki ^^
Zacznijmy od pobrania środowiska ze strony Download. Wybieramy wersje z pełnym wsparciem Java lub minimalna a po uruchomieniu w oknie Tools -> plugins pobieramy wtyczki:
  • Mobility

  • Visual Mobile Designer

  • Po instalacji potrzebny będzie restart IDE.
    Gdy już jesteśmy przygotowani możemy przystąpić do utworzenia nowego projeku Java ME.
    Wybieramy File -> New Project, na liście kategorii klikamy Java ME a następnie po prawej stronie Mobile Application.

    Na następnym ekranie wybieramy nazwę projektu (u mnie SampleJ2MEApp) oraz odznaczamy opcję Create Hello MIDlet (przecieć mamy go sami stworzyć ;)
    . Następne co musimy skonfigurować to emulator oraz platforma docelowa naszej aplikacji. Emulator powinniśmy mieć do wyboru jeden Sun Java(TM) Wireless Toolkit 2.5.2 for CLDC . Aby większość komórek mogła uruchomić nasz MIDlet wybieramy konfigurację CLDC 1.1 oraz profil MIDP 2.0.
    To wszystko. Klikamy finish.
    Ok, dodajemy nowy Midlet: File -> New File -> MIDP -> Visual MIDletI nadajemy mu nazwę np. SampleApp.
    Po wybraniu finish powinien wyświetlić się nam ekran Flow Design w którym to możemy przedstawić cały przepływ sterowania między ekranami aplikacji a wtyczka Mobility wygeneruje za nas kod Javy do tego (klepanie tego ręcznie jest strasznie denerwujące:/).

    Możemy przystąpić do tworzenia! Zróbmy aplikację która po uruchomieniu wyświetli nam ekran powitalny z jakimś obrazkiem a następnie przejdzie do ekranu z tekstem np "Hello, world!".
    Jedynym obiektem który istnieje na diagramie jest Mobile Device który reprezentuje urządzenie. Ma przypisane dwie akcje - started do którego przypisujemy ekran który ma się wyświetlić po uruchomieniu oraz Resumed do którego przypisujemy ekran który ma się pojawić po wznowieniu działania aplikacji.
    Do diagramu będziemy musieli dodać dwa nowe elementy z panelu bocznego (palety). Mianowicie Splash Screen oraz Form. Pierwszy z nich reprezentuje ekran powitalny i jest specjalna klasą dostępną tylko w NetBeans, więc jeśli będzie konieczność przeniesienia projektu np. do Eclipse potrzebne będzie dodanie bibliotek w classpath. Form jest standardową klasą MIDP i reprezentuje standardowy ekran na którym będziemy wyświetlać jakieś kontrolki.
    Teraz dodamy jeden przycisk akcji do Form który będzie odpowiadać za zamykanie aplikacji. Z kategorii Commands wybieramy Exit Command i 'przenosimy' go na form.
    Następnie dodajmy działania do tych akcji. Aby tego dokonać należy połączyć akcje z ekranem docelowym klikając na akcję źródłową i próbować 'przenieść' ją (pojawi się strzałka) na ekran docelowy. W taki sposób łączymy
    - Started z splashScreen (po uruchomieniu to on się właśnie pojawi)
    - DISMISS_COMMAND z form (po upływie 5s zostanie wyświetlony form)
    - exitCommand1 z Mobile Device (wyłączenie aplikacji).
    Ostatecznie diagram przepływu powinien wyglądać następująco:

    Teraz możemy się zabrać za wygląd ekranów.
    Na ekranie powitalnym możemy wyświetlić naszego wiernego Javowego towarzysza Dukea !

    Klikamy prawym przyciskiem na splashScreen następnie Properties i z listy Image wybieramy <New Image Resource>. Pojawi się nowy element na liście, wybieramy go i klkamy trzy kropki obok. Odnajdujemy obrazek z naszym Dukiem.

    I klikamy OK. W oknie properties możemy zmienić jeszcze wartość title na "Przykładowa aplikacja Java ME !".
    No to został nam jeszcze form. Klikamy na niego i na nad widokiem diagramy przepływu wybieramy Screen. Wyświetli się designer ekranu form. Klikamy prawym przyciskiem na ekranik i wybieramy New/Add -> String Item. Po dodaniu edytujemy pogrubiony tekst na "Hello, world!". Następnie nagłówek 'form' zmieniamy na "Przykładowa aplikacja Java ME !".

    I to wszystko! Możemy teraz uruchomić aplikację i przetestować jej działanie na emulatorze (prawy przycisk myszy na nazwę projektu na liście a następnie run) a później wgrać na telefon i przekonać się, że wszystko ok:)


    Za pomocą kilku kliknięć udało nam się stworzyć prostą aplikację bez pisania nawet linijki kodu. Oczywiście tworząc normalne aplikacje koniecznie będzie pokodowanie trochę ale takie operacje jak sterowanie przepływem ekranów czy prosty design okna może zostać bardzo łatwo zrealizowany za pomocą środowiska:)

    Zapraszam do komentowania!

    2 komentarze:

    1. No a jak wygląda "pokodowanie trochę"? :)
      Zbudowanie aplikacji, która wygląda, a nic nie robi jest zaiste banalnie proste.
      Zrobienie czegoś wiecej, już nieco trudniejsze, a dostępne, fajne tutoriale nie pasują do NetBeans we współczesnych wersjach ;/
      -- vide http://www.developer.com/java/ejb/article.php/10931_3526721_1 ;/

      OdpowiedzUsuń
    2. jak stworzyc podstawowa aplikacje znajdziesz na moim blogu: www.smako.eu/j2me

      OdpowiedzUsuń