Adobe AIR Development

[_salman_]

Hello,

I am trying out a Flex Mobile project with Burrito and want to use the QNX components like QNXStageWebView (or any other QNX component for that matter) but with MXML (I don't think there is any other way right now to embed a browser, please correct me if I'm wrong). Trying to use <media:QNXStageWebView> does not work... Is there any way to even do this?  

I think I've seen similar questions but I haven't found a solution.  Someone said that wrapping the QNX components in the UIComponet wrapper worked ( http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/QNX-controls-and-Spark-MX/td-p/62... ) for them, but I'm unsure as to how to do this?  Has anyone done this (and if so, could you please share an example)?  

Also, if this is possible, are there any drawbacks to doing this?

Thank you!

[jtegen]

QNX SDK does not supprt MXML, AS only.

If you created your own wrapper library, might offer MXML support, but with some amount of overhead.  But if that overhead is minimum vs. productivity offered by MXML, then give it a shot.

psedo code:

public class MyLabelButton extends UIComponent

{

  public var control : LabelButton = new LabelButton();

  public function MyLableButton()

  {

    super();

  }

}

Let us know if this works in MXML.

[renaun]

Like I mentioned in the webinar its not the best thing to do for the normal QNX UI components, but the QNXStageWebView might be an interesting use case. I'll post an example when i get a chance.

[_salman_]

Hi Renaun,

Thank for answering my question during the webcast.  I need to do this for the app I currently building - I've tried a few things (like what @jtegen mentioned) but could not get it to work....  It would be great to see an example of how you'd accomplish this.

Any and all help would be greatly appreciated.

Also, would you happen to know if the StageWebView component will be supported so that in the future, developers would not need to use this workaround?

Thanks!

[renaun]

I haven't tried it but I believe StageWebView should work. QNXStageWebView probablys more api's then just StageWebView. Again i haven't tested it and with the current simulator state I am not sure what will change by release.

[ectar]

I dont think it is practical wrap QNX in MXML, you wont be able to edit wrapped components visually anyways, it can be done just for some and just in case you need them and they are not available as UIComponents.

In general if you want to add non-UICompoents component as a child of UIComponent you have to extent UIComponents and inside it put QNX components on Sprite of UIComponent with all related hassle like overriding updateDisplayList(...) to handle resizing and so on....

[renaun · Accepted solution]

Ok the use case of using QNXStageWebView is easier then doing QNX UI components like has been said. To that end here is how you would do it:

Include the (0.9.0) qnx-air.swc to a Flex Mobile project (don't include the Flex Build Packaging -> BlackBerry Tabel -> include libraries checkbox as it has a compile error right now).

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="Home">
	
	<fx:Script>
		<![CDATA[
			import qnx.media.QNXStageWebView;
			
			private var webView2:QNXStageWebView;
			private var webView:QNXStageWebView;
			protected function button1_clickHandler(event:MouseEvent):void
			{
				lbl.text = "StageWebView.isSupported: " + StageWebView.isSupported;
				var url:String = "http://renaun.com";
				webView = new QNXStageWebView();
				webView.enableCookies = true;
				webView.enableJavascript = true;
				webView.enableScrolling = true;
				
				webView.addEventListener(Event.COMPLETE, loadWebView);
				
				webView.loadURL(url);
			}
			
			private function loadWebView(event:Event):void
			{
				var startY:int = localToGlobal(new Point(btnClick.x, btnClick.y+btnClick.height)).y;
				lbl.text = "Stage W/H: " + systemManager.stage.stageWidth+"/"+systemManager.stage.stageHeight+" - " + startY;
				var rect:Rectangle = new Rectangle(0, startY, systemManager.stage.stageWidth, systemManager.stage.stageHeight - startY);
				webView.viewPort = rect;
				webView.autoFit = true;
				
				webView.stage = systemManager.stage;
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Button id="btnClick" label="Click to View My Blog" click="button1_clickHandler(event)" />
	<s:Label id="lbl" text="Info" textAlign="right" width="60%" right="0" top="10" />
</s:View>

Full code and write up at my post here:

http://renaun.com/blog/2010/12/using-playbooks-qnxstagewebview-with-flex-hero-mobile/

[_salman_]

Hey Renaun,

You are DA man!! This worked beautifully - thanks again for the support and help.

Keep up the great work

[renaun]

I went a step further and created some Container classes that extend QNX's Container class that allows you to use MXML with QNX UI components. MXML is not necessarily Flex. With my library you can create MXML apps with QNX UI that has no Flex UI components. Or that you can create Flex MXML apps that have parts of it in QNX UI components. For more details and the source code check out my post:

http://renaun.com/blog/2010/12/using-mxml-with-qnx-ui-components-for-the-playbook/

[ectar]

Good stuff! I like the idea and simplicity of implementation, also SWC size is 6+ kb!