Kategorien
Phonegap/Cordova

Phonegap bessere native Performance mit Steroids

Phonegap hat die große Schwachstelle, dass die Peerformance der UIs sehr langsam ist, dagegen gibt es ein Projekt namens Steroids welches es ermöglicht z.B. native Listviews zu benutzen und so die Performance merklich zu steigern, absolut empfehlenswert.

Meiner Meinung nach sollte Phonegap nicht ohne Steorids verwendet werden!

Kategorien
JavaScript jQuery jQuery Mobile Phonegap/Cordova

Javascript ersetzen aller css background-images durch Retina-Bilder

Wenn man vor dem Problem steht, dass dynamisch generierte CSS background-images verwendet werden, um Bilder auf einer Webseite darzustellen und diese dann auch für Retina Displays gut aussehen sollen, kann man folgendes Skript verwenden. Es überprüft zusätzlich mittels eines Ajax Requests, ob die Bilder vorhanden sind/existieren.

Voraussetzung ist, dass eine Namenskonvention für nicht-Retina Bilder und Retina verwendet wird wie z.B.:

bild1@1x.jpg für nicht-Retina Bilder

und

bild1@2x.jpg für Retina Bilder

<!--Retina Fix for dynamic background images-->
        <script type="text/javascript">
            function isRetinaDisplay()
            {
                var dpr = 1;
                if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
                return dpr >= 2;
            }

            var notRetinaString = "@1x";
            var retinaString = "@2x";

            $(document).ready(function() {
                //if we have a retina display
                if(isRetinaDisplay())
                {
                    //select all elements having background images
                    var $elementsWithBackground = $('*').filter(function() {
                        if (this.currentStyle)
                            return this.currentStyle['backgroundImage'] !== 'none';
                        else if (window.getComputedStyle)
                            return document.defaultView.getComputedStyle(this,null)
                                .getPropertyValue('background-image') !== 'none';
                    });
                    //replace their background-image with retina images
                    $elementsWithBackground.each(function( index ) {
                        $backGroundImage = $(this).css('backgroundImage');
                        /*console.log($backGroundImage);*/
                        //when it is no retina image
                        if($backGroundImage.indexOf(notRetinaString) !== -1)
                        {
                            //replace with retina image
                            $newBackgroundRetinaImage = $backGroundImage.replace(notRetinaString,retinaString);
                            $newBackgroundRetinaImageUrl = $newBackgroundRetinaImage.replace('url("','').replace('")','');
                            //check if retina file exists
                            var $myThis = this;
                            $.ajax({
                                url:$newBackgroundRetinaImageUrl,
                                type:'HEAD',
                                cache: true,
                                success:function() {
                                    console.log($newBackgroundRetinaImage);
                                    $($myThis).css('backgroundImage', $newBackgroundRetinaImage);
                                },
                                error:function() {
                                    console.log("no retina image found for: " + $backGroundImage);
                                }
                            });

                        }
                    });
                }
            });
        </script>
Kategorien
Phonegap/Cordova

Phonegap Präsentation

Eine Präsentation zu Phonegap mit Schwerpunkt auf die Programmierung unter Android.

Download: Phonegap Präsentation

Kategorien
jQuery Mobile Phonegap/Cordova

Mobile Multi Share Implementation mit jQuery Mobile

Mit dem passendem HTML lässt sich so sehr komfortabel ein Share-Alternative aufbauen für mobile Anwendungen um Platz zu sparen (mit jQuery Mobile).

Dabei werden die Share Dienste in ein <select> Tag eigetragen und per Javascript einzeln gehandelt. Das Ergebnis sieht auf Android-Phones so aus:

Kategorien
Android Phonegap/Cordova

Vergleich von Augmented Reality Frameworks für Android

[table id=1 /]

Fazit:

Ich habe mich für Mixare entschieden, welches  sehr gut gecodet, aber weniger gut dokumentiert ist. Ist ist sehr einfach möglich seine eigenen Daten oder Wikipedia Daten über die Kamera zu legen und gleichzeitig dieselben Daten auf Google Maps als Marker anzuzeigen.

Vuforia erscheint für die Entwicklung von Android/iPhone Lösungen der geeignete Kanditat zu sein, jedoch wird in der Lizenz verlangt, dass Benutzerdaten an den Qualcomm Server gesendet werden und der User darüber informiert werden muss:

Auszug aus der Lizenz von Vuforia

„You must inform end-users of your application that certain types of anonymous usage data is collected by the Vuforia SDK and sent back to Qualcomm servers.“

„(i) the collection by QUALCOMM and/or its affiliates of Statistics from the Software (including but not limited to: (a) information about the end users‘ devices such as device unique identifier, make, model, operating system name and version and kernel version, (b) information about our Software used to create your software or augmented reality end user application such as the SDK version and device profile, and (c) information about your software or augmented reality application and its use such as settings (e.g., camera resolution settings, configuration settings), start and stop dates and times, camera on/off events, target image obtained/lost events, and other general usage information (collectively „Statistics“)).“

Kategorien
Mobil Phonegap/Cordova

Phonegap natives Android Plugin erstellen Tutorial

Mit Phonegap lässt sich nativer Code triggern aus Javascript heraus mit folgendem Code:

//onDeviceReady          

cordova.exec( success, fail, "UploadImage", "nativeAction", ["success"]);    

            function success (result) {    
                alert("SUCCESS: \r\n"+result );
                }
            function fail (error) {    
                alert("ERROR: \r\n"+error );
                }

Dieser Code ruft die Klasse UploadImage die Funktion execute mit Parameter action=’nativeAction‘ und einem JsonString(!) data = „[’success‘]“ auf. Data kann dafür verwendet werden Daten nach Java zu übergeben:

import org.apache.cordova.api.Plugin;
import org.apache.cordova.api.PluginResult;

public class UploadImage extends Plugin {
    public static final String NATIVE_ACTION_STRING="nativeAction";       
    public static final String SUCCESS_PARAMETER="success";
    @Override
    public PluginResult execute(String action, JSONArray data, String callbackId) {
        Log.d("HelloPlugin", "Hello, this is a native function called from PhoneGap/Cordova!");             
        //only perform the action if it is the one that should be invoked              
        if (NATIVE_ACTION_STRING.equals(action)) {                    
            String resultType = null;                    
        try {                          
            resultType = data.getString(0);                    }                    
        catch (Exception ex) {                          
            Log.d("HelloPlugin", ex.toString());                    }                    
        if (resultType.equals(SUCCESS_PARAMETER)) {                          
            return new PluginResult(PluginResult.Status.OK, "Yay, Success!!!");                    
            }                    
        else {                          
            return new PluginResult(PluginResult.Status.ERROR, "Oops, Error :(");                    
            }              
        }                
        return null;
    }
}

Außerdem muss das Plugin in die res/xml/config.xml eingetragen werden:

<plugin name="UploadImage" value="de.sv.foo.plugin.UploadImage"/>

 

Die Ausgabe sollte sein:

"SUCCESS: Yay, Success!!!"

 

Kategorien
Android Mobil Phonegap/Cordova

Huawei Ideos X3 USB Debugging Tutorial


Das Huawei Ideos X3 (U8510 Blaze) ist das sehr günstige Einsteiger Handy für Android Programmierer und Studenten (< 100€).

Zu Beginn müssen die USB-Treiber installiert werden werden. Diese sind auf dem Handy gespeichert. Eine sehr gute Anleitung findet man hier. Alternativ kann man die Treiber auch sehr einfach downloaden und installieren: Download.

Um das USB Debugging beim Huwaei Ideos X3 zu aktivieren, muss folgende Nummer gewählt werden um in das versteckte Menü zu kommen:

*#*#2846579#*#*

20120430-220205.jpgDanach ins ProjectMenu->3. Background setting->2. Log setting

->Log level setting, verbose auswählen.

->Log switch, Log on auswählen

Danach ins ProjectMenu->3. Background setting->6. Dump & Log auswählen

  • Open Dump & Log
  • Changing log switch
  • Open Sleep Log

Ihr Huawei Ideos X3 ist jetzt bereit Debug-Informationen und detailierte Fehlermeldungen an ihre IDE (Eclipse) zu senden.

Zum Testen auf High-End Android Geräten: Lesen Sie: Samsung Galayx S2 Debugging.

Entwickler Handy Empfehlung: Samsung Galaxy Nexus mit Android 4.0

Entwickler Tablet Empfehlung: Samsung Galaxy Tab 2 mit Android 4.0

Kategorien
Phonegap/Cordova

Phonegap Teil3: Basics und das erste Programm

Die Programmierung mit Phonegap erfolgt zum größten Teilin HTML(5) Javascript und CSS(3). Es wrd kein nativer Code benötigt, es kann aber per Plugin nativer Code benutzt werden.

Testen von mobilen Anwendungen

iOS: Safari, Develop->User Agent->Mobile Safari (iPhone, iPad)

Android: Firefox Addon: User Agent Switcher und fertige Listen mit User Agents.

Es wird empfohlen einen Webkit Browser (Safari oder Chrome) zum normalen Entwickeln zu benutzen, aufgrund der häufigen Verwendung auf den Zielsystemen.

Kategorien
Phonegap/Cordova

Phonegap Teil2: Installation für Android unter Eclipse Windows 7

Die Installation unter Eclipse für Android ist sehr einfach, es kann das Testprojekt verwendet werden aus dem Phonegap-Package oder selber ein Projekt angelegt werden.

Wichtig ist, dass das Tutorial zum jetztigen Zeitpunkt noch nicht auf den neuen Namen von Phonegap umgeschrieben war – Cordova – als die Dateien von bspw. phonegap-1.50.js in cordova-1.50.js umbenannt worden sind. Ich empfehle das Test-Projekt zu nehmen.

Das Test-Projekt für Android befindet sich unter lib\android und kann über Eclipse: new Project, with existing sources importiert werden. Die cordova-1.50.jar muss noch zum Build Path hinzugefügt werden (Project Properties/Java Build Path/Libraries/Add JARs) und das Test Projekt kann gestartet werden.

In der Demo kann man alle Phonegap Funktionen wie GPS, Accelerometer, Nummern wählen, vibrieren, Bildergalerie, Kontakte, Netzwerkstatus und Kompass ausprobieren auf dem Testhandy/Simulator.

20120322-113921.jpg

zurück zu Phonegap Teil1: Features und Möglichkeiten

Nach dem Buch:

Kategorien
Phonegap/Cordova

Phonegap Teil1: Features und Möglichkeiten

Mit Phonegap kann man Webanwendungen mit HTML5, CSS und Javascript bauen als mobile Webanwendung und gleichzeitig eine native App für den App-Store und den Androide Market. Phonegap ist Open Source und wird von der Apache Cooperation und Adobe unterstützt. Auch eine Mischung aus mobiler Anwendung als Webseite und nativer App im Store ist möglich. Die große Frage ist, wo sind die Grenzen von Phonegap, was ist nicht möglich? Welche Features und Möglichkeiten bietet Phonegap im Vergleich zu einer nativen App.

Systemvorraussetzung nach Zielplattform

iOS: MAC ab OS X 10.6

Android und HP WebOS: alle 3 (=Windows, Mac, Linux)

Symbian: alle 3, aber der Simulator läuft nur unter Windows

Blackberry: Windows, Mac, aber der Simulator läuft nur unter Windows

Windows 7 Phone: Mac ab OS X 10.5 🙂