Category Archives: Widget

Ehta modaalidialogi iOS:lla


Muista kehitysympäristöistä iOS-maailmaan tulevasta voi tuntua oudolta Cocoa Touchin modaalidialogien puute. Vaikkakin on mahdollista rakentaa kaiken muun päälle piirtyvä dialogi joka oletukselta (ja tämä on ohitettavissa) saa kaiken syötteen, dialogin näyttävä kutsu ei blokkaa vaan palaa välittömästi ja dialogin sulkeutuminen on otettava kiinni asynkronisella callbackilla (‘delegate’). Edes perustyökalu UIAlertView ei käyttäydy kuin muiden alustojen – vaikkapa MFC, Javascript, Symbian Series60/Series80, Java AWT/Swing, Qt, Android, GTK, jne.. – stock komponentit MessageBoxit ja InputDialogit.

Tämänkaltaista UI paradigmaa voi kuitenkin paitsi kaivata, myös tarvita; oletetaan etta ollaan rakentamassa iOS -toteutusta cross-platform sovellukseen jossa täytyy toteuttaa metodi vaikkapa seuraavasti:

std::string AskUserInput()
{
  // Semantiikka: kysy käyttäjältä syöte popup dialogilla 
  //   ja palauta annettu teksti
}

Miten tämä toteutetaan iOS:lla? Nostetaan kädet pystyyn, otetaan projektin arkkitehti Skypen päähän ja anotaan API:in muutosta joka mahdollistaisi syötteen kyselyn asynkronisen käsittelyn? Miksei, mutta jos yo. mekanismi on jo toteutettu viidelle muulle alustalle, on edessa iso muutostyö ja paljon hampaita kiristeleviä ihmisiä. Turha asynkronia näin yksinkertaisessa asiassa hankaloittaa sekä pirstaloittaa arkkitehtuuria.

Ongelman ratkaisu lähtee UI frameworkin toiminnan ymmärtämisestä. Käytännössä kaikissa moderneissa käyttöliittymäkirjastoissa on 1-N UI säiettä jotka palvelevat käyttöliittymää ns. event loopin [tapahtumakieriö?! -toim.] kautta. Event loop ottaa inputteja komponenteilta, timereilta tai vaikkapa muilta säikeiltä alustakohtaisten viestinvälitysmekanismien välityksellä ja tarjoilee niitä kiinnostuneille kuuntelijoille. Käytännössä jokaisella säikeellä on tasan yksi (tai nolla, jos kyseessä ei ole UI:ta palveleva säie) event loop, ja yleisesti mobiilikäyttöjärjestelmissä UI:ta palvelee vain yksi säie kerrallaan. Käyttöliittymä kumminkin toimii jouhevasti niin kauan kuin tätä säiettä ei varata kerralla liian pitkäksi aikaa; pitkäkestoinen laskenta täytyy joka jakaa pieniin osiin tai tehdä muissa säikeissä.

Event loopiin perustuvat järjestelmät sallivat yleensä event looppien sisäkkäisen ajamisen (nesting); tällöin vanha event loop aktivaatio pysähtyy eikä jatka ennenkuin sisempi loop aktivaatio loppuu. Tätä voidaan hyväksikäyttää asynkronian poistamiseksi; API-metodin sisällä ajetaan uusi aktivaatio, kuunnellaan asynkronista vastausta ja lopetataan aktivaatio kun vastaus on saatu. Tällöin APIa kutsuva metodi blokkaa koko suorituksen ajan. On kuitenkin erotettava tämä semaforin odottamisesta; säiehän ei ole idlena vaan suorittaa sisempää event loop aktivaatiota.

Rakennetaan esimerkkitoteutus iOS:lle. Halutaan tehda seuraavanlainen kutsu:

-(void) requestAndLogInput {
  InputDialog* dlg = [InputDialog dialog];
  [dlg showModal];
  NSLog(@"Dialog input was = %@", [dlg getInput]);
}

Aloitetaan dialogin luomisesta. Tähän käytetään normaalia Cocoa Touch boilerplatea:

+(InputDialog*) dialog {
    NSArray* nibViews = [[NSBundle mainBundle] loadNibNamed:@"InputDialog"
                                                      owner:nil
                                                    options:nil];
    InputDialog* dlg = [[[nibViews objectAtIndex:0] retain] autorelease];

    return dlg;
}

Määritellään metodi jolla dialogi näytetään modaalisti – se asettuu päällimmäiseksi ja blokkaa kunnes dialog on suljettu. iOS:lla event loop tunnetaan nimellä Run loop, ja sitä vastaavat APIt ovat NSRunLoop sekä Core Foundationin CFRunLoop*:

-(void) showModal {
    // Lisätään dialogimme keywindow'n ylimmän lapsen ylimmäksi lapseksi,
    // jolloin dialogi päätyy päällimmäiseksi view stackiin
    UIWindow* keyWindow = [[UIApplication sharedApplication] keyWindow];
    UIView* topmostView = [keyWindow.subviews objectAtIndex:0];
    [topmostView addSubview:self];

    // Sijoitetaan dialogi suunnilleen keskelle ruutua    
    CGSize s = topmostView.bounds.size;
    self.center = CGPointMake(s.width / 2, (s.height / 2) - 70);

    // Ajetaan nested run loop aktivaatio jolloin showModal kutsu blokkaa
    CFRunLoopRun();
}

Lopuksi määritellään dialogin sulkeva IBAction:

-(IBAction) okPressed {
    // Poistetaan dialogi näkyvistä
    [self removeFromSuperview];

    // Pysäytetään sisempi run loop aktivaatio; kontrolli palaa 
    // ulommalle ja showModal -kutsu palaa
    CFRunLoopStop(CFRunLoopGetCurrent());
}

Valmista! Ja koska kyseessä  ovat erilliset run loop aktivaatiot eivätkä erilliset run loopit, esimerkiksi timerit jatkavat eloaan ja autorelease pool on jaettu aktivaatioiden välillä.

 Esimerkkiprojekti Xcode 4.5 -projektina. 40kB zip

 

Widgetit Androidissa

Widgetit näyttävät applikaation kaikkein oleellisimman tiedon nopeasti ja yksinkertaisesti työpöydällä. Widgettejä voi myös käyttää käynnistämään applikaatioita tai taustaprosesseja, kuten mediasoittimen.

Tässä artikkelissa toteutamme mahdollisimman yksinkertaisen widgetin, jotta saamme idean mitä kaikkea sen toimintaan saamiseen tarvitaan. Toteutamme widgetin, jossa on tekstikenttä ja nappula, nappulaa painamalla kasvatamme tekstikentässä olevaa numeroa yhdellä. Erityisesti kiinnitämme huomiota widgetin tilan päivittämiseen sekä manuaalisesti, että automaattisesti.

Esimerkki koodi: https://github.com/Androidkehitys/Androidkehitys-Widget

Widget layout

Widgetin layout toteutetaan samalla tavalla, kuin minkä tahansa aktiviteetin layout. On kuitenkin otettava huomioon, että widgetti luodaan RemoteViews-luokan ilmentymänä ja layoutissa voi näin ollen käyttää vain seuraavia layout-elementtejä:

Layoutit

Widgetit

AppWidgetProviderInfo Metadata

Tämä XML-tiedosto määrittää widgetille tarpeelliset tiedot, kuten korkeuden ja leveyden, päivitysvälin, esikatselun, layoutin, asetukset-aktiviteetin sekä widgetin koon muuttamisen vaaka ja/tai pystysuunnassa (Android 3.1).

Androidin kotinäkymä koostuu ruudukosta, jossa jokainen ruutu on kooltaan 74dp * 74dp. Widgetin tulee jättää 2dp:tä tilaa leveydessä ja korkeudessa, jotta vältetään mahdolliset virheet ajonaikaisessa koon määrityksessä kun dp:t muutetaan pikseleiksi. Käytä kaavaa (solujen määrä * 74) – 2 widgetin koon määrittelemiseen.

Päivitysväli määrittää ajan, jonka välein Android päivittää widgetin tiedot. Tämä päivitys herättää laitteen lepotilasta ja suorittaa onUpdate()-metodin AppWidgetProvider-luokassa. Ei myöskään ole takuita tapahtuuko päivitys ajallaan. Suositeltavampaa on toteuttaa widgetti niin että se päivittää vain silloin, kun sen on pakko, eikä useammin.

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
  android:minWidth="146dp"
  android:minHeight="72dp"
  android:updatePeriodMillis="86400000"
  android:initialLayout="@layout/widget_layout"
  >
  </appwidget-provider>

Widget Manifestissä ja painallukseen reagointi

Manifestissä widget määritellään <receiver> elementin sisälle. Tässä elementissä määrittelet oman toteutuksesi AppWidgetProvider luokan ilmentymästä ja määrittelet ne Intent lähetykset (broadcast), jotka AppWidgetProvider hyväksyy. Nämä lähetykset suoritetaan onReceive() -metodissa.

<receiver android:name=".ExampleWidgetProvider">
  <intent-filter>
    <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
  </intent-filter>
  <meta-data android:name="android.appwidget.provider"
   android:resource="@xml/appwidget_provider" />
</receiver>

AppWidgetProvideria voi myös kutsua PendingIntent:llä, kuten tässä esimerkissä napin painalluksiin reagointi on toteutettu:

Intent intent = new Intent(context, ExampleWidgetProvider.class);
PendingIntent pendingIntent = PendingIntent.getBroadcast(context, 0, intent, 0);

RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.widget_layout);
views.setOnClickPendingIntent(R.id.start_button, pendingIntent);
appWidgetManager.updateAppWidget(appWidgetId, views);

AppWidgetProvider

Kokonaisuudessaan omaan toteutukseesi AppWidgetProvideristä tarvitset vain onUpdate()- ja onReceive()-metodit. Voit myös tehdä tämän esimerkin mukaisesti paketin sisällä näkyvän staattisen metodin, joka päivittää widgetin grafiikat esimerkiksi konfiguraatioaktiviteetistä.