Android: Wie fange ich an?

Ein kleines Tutorial für alle die sich mit Android noch nicht zu sehr auseinander gesetzt haben und einen einfachen Einstig suchen. Wie gehe ich mit einem Button um und wie kann ich die Seite wechseln um neuen Content aufzurufen.

Bevor ich alles in einer Seite reinpack und immer nur gegen neuen Content austausche baue ich lieber neue komplette Seiten auf, inkludiere fertige Elemente und binnen ein paar Minuten läuft die Anwendung super stabil.

Meine alten Tutorials und HowTos haben sich alle auf Android 1.6 – 2.3 bezogen. Jetzt werde ich versuchen euch kleine Starthilfe Tipps für die Versionen 3.0 – 4.1 zu geben. Im Grunde genommen hat sich nicht viel verändert. Es sind nur jede Menge neue Funktionen und Gadget dazu gekommen. Siling Tabviews z.B. ist doch mal richtig cool! Aber back to Basics.

Wir erstellen eine kleine Andorid Applikation, nachdem Bilder mehr sagen als 1000 Worte werde ich versuchen viele Bilder zu verwenden.

Gebt eurer Android App einen guten Namen, den ihr auch weiter verwenden wollt 😉 Ich bin mittlerweile richtig begeistert von dem Werkzeug Version 2.3 zu 4.1 ist ein Meilenstein der sich sehen lässt. Es wird so viel Unterstützung geboten was wir früher umständlich implementieren mussten.

Die Screenshot’s 4 und 5 Zeigen euch den gleichen Step, lediglich die Auswahl ist unterschiedlich. Wollt ihr  vorgefertigtes Layout nutzen um direkt die Kompatibilität mit Tablets zu gewährleisten oder wollt ihr euch frei entfalten und ein blankes Layout verwenden. Ich werde für unser kleines Beispiel das blanke Layout wählen.

Anschließend muss lediglich noch die MainActivity erstellt werden. das geht fix wenn ihr none wählt. Wenn ihr jedoch für Android Versionen jenseits der 11 entwickelt könnt ihr euch sehr schöne Vorlagen, mal wieder zusammen bauen lassen. Da kann man immer etwas experimentieren.

Anschließend läd Android alle notwendigen Daten und fügt sich euch schon zusammen. Es werden alle Ordner erstellt die fürs vernünftige und flotte Entwickeln benötigt werden. Seid froh, das war in den Vorgängerversionen auch nicht so. Da dürfte man stundenlang Dokumentationen wälzen bevor man den richtigen Ordner gefunden hat.

Auf der Linken Seite seht ihr jetzt eure Ordnerstruktur. Hierbei werden im Ordner: r

es/values alle Standardwerte gepflegt. z.b. in der strings.xml alle Werte die später per ID auf Buttons, Texte und alle anderen möglichen Elemente übergeben werden.

Der mittlere Contentbereich in eurer IDE zeigt den ganz normalen Designbereich. Hierbei hat sich auch einiges geändert. Erstellen von Dialogen ist um ein vielfaches erleichtert worden und auch übersichtlicher gestaltet. In meinem kleinen Beispiel habe ich bereits das HelloWorld gegen einen kleinen Standardbutton getauscht. Diesen werde ich in meinem nächsten Kurztutorial mit leben füllen und eine andere Aktivität – setOnClickListener – damit aufrufen.

Primefaces Charts

Kleines HowTo für alle die Chartes von Primefaces benützen möchten. Um es vorweg zu nehmen. Es ist leider nicht möglich eine DateTime X Achse zu nutzen. Wir benützen hierzu um dem ganzen Abhilfe zu schaffen KW/Jahr (Kalenderwoche/Jahr). Es ist natürlich auch möglich Monat/Jahr oder ähnliches zu verwenden.

Primefaces arbeitet hierbei im Backend mit jQuery und einer eigens angefertigten charts.js … Leider hatte ich bisher noch keine Zeit mich genauer mit dieser File auseinander setzen zu können.

Auf der JSF Seite ist es ein Einzeiler. Super von den Primefaces Jungs umgesetzt.

<p:lineChart id="linear" value="#{chartBean.linearModel}" legendPosition="e"  
     title="Linear Chart" minY="0" maxY="10" style="height:300px"/>

Die Java Seite ist etwas umständlicher aber auch hier ist es sehr schlank gehalten.

package org.primefaces.examples.view;  
  
import java.io.Serializable;  
  
import org.primefaces.model.chart.CartesianChartModel;  
import org.primefaces.model.chart.ChartSeries;  
import org.primefaces.model.chart.LineChartSeries;  
  
public class ChartBean implements Serializable {  
  
    private CartesianChartModel categoryModel;  
  
    private CartesianChartModel linearModel;  
  
    public ChartBean() {  
        createCategoryModel();  
        createLinearModel();  
    }  
  
    public CartesianChartModel getCategoryModel() {  
        return categoryModel;  
    }  
  
    public CartesianChartModel getLinearModel() {  
        return linearModel;  
    } 
    private void createLinearModel() {  
        linearModel = new CartesianChartModel();  
  
        LineChartSeries series1 = new LineChartSeries();  
        series1.setLabel("Series 1");  
  
        series1.set(1, 2);  
        series1.set(2, 1);  
        series1.set(3, 3);  
        series1.set(4, 6);  
        series1.set(5, 8);  
  
        LineChartSeries series2 = new LineChartSeries();  
        series2.setLabel("Series 2");  
        series2.setMarkerStyle("diamond");  
  
        series2.set(1, 6);  
        series2.set(2, 3);  
        series2.set(3, 2);  
        series2.set(4, 7);  
        series2.set(5, 9);  
  
        linearModel.addSeries(series1);  
        linearModel.addSeries(series2);  
    }  
}

Ich habe hier zu großen Teilen das Tutorial von Primefaces benützt weil es super einfach beschrieben ist und übersichtlich. Hier gehts zum Orginalbeitrag.

PrimeFaces GZip Error

Ein häufig auftretender und nicht erklärbarer Fehler in Primefaces ist der GZIP Error. Es gibt unterschiedliche Möglichkeiten bei Aktionen die definiert werden und eventuell falsch ausgeführt werden.

Wir suchen seit nunmehr – sporatisch – 1 Monat nach den Fehler und immer ist es lediglich ein kleines Quäntchen Glück das uns gefehlt hat. Es dreht sich um den wunderbaren Parameter ajax den man in den meisten Komponenten von Primefaces angeben kann und dieser dann entscheidet ob ein ajax Befehl ausgeführt wird oder nicht.

Jetzt kommt das große Ding und zugleich die Erklärung. Wenn man über outcomes gesteuerte Navigation- Elements anlegt in seiner faces-config.xml werden anhand eines String die Elmente gerootet. z.B.

<p:commandButton value="Step1" action="to-step-1" />

In der faces-config.xml werde ihr so etwas ähnliches vorfinden:

<navigation-rule>
		<display-name>Step 0</display-name>
		<from-view-id>/step0.xhtml</from-view-id>
		<navigation-case>
		 	<from-outcome>to-step-1</from-outcome>
			<to-view-id>/step1.xhtml</to-view-id>
		</navigation-case>
</navigation-rule>

Wenn ihr dieses Beispiel jetzt ausführen würdet, lauft ihr in eine Falle die nicht schön ist und aus der mann nur ganz schwer wieder heraus kommt weil es keine konkreten Hinweise dazu gibt. Wenn man in die Browserconsole oder die Entwicklertools von z.B. google Chrome schaut werdet ihr sehen das nach dem laden von step1.xhtml euer jQuery abstürzt und somit die Seite jegliche Funktionalität verliert die euch Primefaces bietet.

Einfacher Lösungsansatz:

<p:commandButton value="Step1" action="to-step-1" ajax="false" />

Der kleine Parameter ajax=“false“ verwandelt den Javascript Aufruf für den Button in einen Standardaufruf um und „refreshed“ die Seite somit korrekt und alle Funktionen werden korrekt ausgeführt!