Webbrowser mit QNXStageWebView

Wenn man den BlackBerry Playbook-Simulator installiert, fällt direkt auf, dass es sogar an den wichtigsten Tools fehlt. Da muss man selbst Hand anlegen und sich z.B. seinen eigenen Webbrowser basteln. Wie man dies sogar mit dem OS-Werkzeug FlashDevelop schafft, zeig ich euch hier.

Los geht’s

Bevor ihr startet, solltet ihr euch das wirklich hervorragende Tutorial von studio|chris anschauen.

Das Script

Hier haben wir das Script für unser Tool. Eigentlich nichts spektakuläres. Aber der Teufel liegt im Detail.

package
{
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;
    import flash.text.TextField;
    import qnx.ui.buttons.IconButton;

    import qnx.media.QNXStageWebView;
    import qnx.ui.buttons.LabelButton;
    import qnx.ui.text.TextInput;
    import qnx.ui.core.*;

    /**
    * ...
    * @author Siron
    */


    // The following metadata specifies the size and properties of the canvas that
    // this application should occupy on the BlackBerry PlayBook screen.
    [SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]

    public class Main extends Sprite
    {

        private var url:TextInput;
        private var ok:LabelButton
        private var webView:QNXStageWebView;
        private var mainCon:Container;
        private var topCon:Container;
        private var searchButton:IconButton;
        private var draftCon:Container;

        [Embed(source = '../applications-internet.png')]
        public var appInet : Class;

        public function Main()
        {
            // sets main container
            mainCon = new Container();
            mainCon.flow = ContainerFlow.HORIZONTAL;
            addChild(mainCon);

            // top bar
            topCon = new Container();
            topCon.size = 36;
            topCon.sizeUnit = SizeUnit.PIXELS;
            topCon.flow = ContainerFlow.HORIZONTAL;
            topCon.align = ContainerAlign.FAR;
            topCon.containment = Containment.DOCK_TOP;

            url = new TextInput();
            url.setSize(180, 36);
            url.width = 500;
            url.text = "http://devbar.de";
            topCon.addChild(url);

            searchButton = new IconButton();
            searchButton.setIcon(new appInet());
            searchButton.setSize(36, 36);
            searchButton.addEventListener(MouseEvent.CLICK, navigate);
            topCon.addChild(searchButton);

            mainCon.addChild(topCon);

            // draft
            draftCon = new Container();
            draftCon.size = 100;
            draftCon.sizeUnit = SizeUnit.PERCENT;
            draftCon.flow = ContainerFlow.VERTICAL;
            draftCon.align = ContainerAlign.NEAR;
            draftCon.padding = 10;

            mainCon.addChild(draftCon);

            webView = new QNXStageWebView();
            webView.stage= stage;
            webView.autoFit=true;
            webView.viewPort = new Rectangle(1,40,stage.stageWidth,stage.stageHeight-40);
            webView.enableCookies = true;
            webView.enableJavascript = true;
            webView.enableScrolling = true;
            webView.loadURL("http://devbar.de");

            mainCon.setSize(stage.stageWidth, stage.stageHeight);
        }

        private function navigate(event:MouseEvent):void {
            webView.loadURL(url.text);
        }

    }

}

Woher kommt QNXStageWebView?

QNXStageWebView steckt in qnx-air.swc. Die Library ist im SDK-Pfad im Unterorder frameworks\libs\air. Die Datei müsst ihr eurem Projekt hinzufügen, wie ihr das auch schon von der qnx-screen.swc und spark.swc kennt. Auch hier müsst ihr den Menüeintrag “Add to Library” ausführen. Allerdings gibt es hier die Besonderheit, dass ihr über die Optionen der Library festlegen müsst, dass es sich um eine “External library” handelt. Der Grund dafür ist, dass die qnx-air.swc zur Laufzeit angebunden werden muss, da Playbook-spezifische Aufrufe enthalten sind.

Class qnx.media::QNXStageWebView could not be found

Diese Meldung werdet ihr immer bekommen, wenn ihr versucht die Anwendung direkt aus FlashDevelop und nicht über den Simulator zu starten. Der Grund ist, wie gesagt, dass die Libraries erst auf dem Playbook zur Laufzeit dynamisch eingehängt werden. Leider lässt sich daher unsere Anwendung nur im Simulator testen.

Ergebnis

Links:

Download

package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.text.TextField;
import qnx.ui.buttons.IconButton;import qnx.media.QNXStageWebView;
import qnx.ui.buttons.LabelButton;
import qnx.ui.text.TextInput;
import qnx.ui.core.*;

/**
* …
* @author Siron
*/

// The following metadata specifies the size and properties of the canvas that
// this application should occupy on the BlackBerry PlayBook screen.
[SWF(width=”1024″, height=”600″, backgroundColor=”#cccccc”, frameRate=”30″)]

public class Main extends Sprite
{

private var url:TextInput;
private var ok:LabelButton
private var webView:QNXStageWebView;
private var mainCon:Container;
private var topCon:Container;
private var searchButton:IconButton;
private var draftCon:Container;

[Embed(source = ‘../applications-internet.png’)]
public var appInet : Class;

public function Main()
{
// sets main container
mainCon = new Container();
mainCon.flow = ContainerFlow.HORIZONTAL;
addChild(mainCon);

// top bar
topCon = new Container();
topCon.size = 36;
topCon.sizeUnit = SizeUnit.PIXELS;
topCon.flow = ContainerFlow.HORIZONTAL;
topCon.align = ContainerAlign.FAR;
topCon.containment = Containment.DOCK_TOP;

url = new TextInput();
url.setSize(180, 36);
url.width = 500;
url.text = “http://devbar.de”;
topCon.addChild(url);

searchButton = new IconButton();
searchButton.setIcon(new appInet());
searchButton.setSize(36, 36);
searchButton.addEventListener(MouseEvent.CLICK, navigate);
topCon.addChild(searchButton);

mainCon.addChild(topCon);

// draft
draftCon = new Container();
draftCon.size = 100;
draftCon.sizeUnit = SizeUnit.PERCENT;
draftCon.flow = ContainerFlow.VERTICAL;
draftCon.align = ContainerAlign.NEAR;
draftCon.padding = 10;

mainCon.addChild(draftCon);

webView = new QNXStageWebView();
webView.stage= stage;
webView.autoFit=true;
webView.viewPort = new Rectangle(1,40,stage.stageWidth,stage.stageHeight-40);
webView.enableCookies = true;
webView.enableJavascript = true;
webView.enableScrolling = true;
webView.loadURL(“http://devbar.de”);

mainCon.setSize(stage.stageWidth, stage.stageHeight);
}

private function navigate(event:MouseEvent):void {
webView.loadURL(url.text);
}

}

}

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>