Adobe AIR Development

[Paratheo]

Hey guys,

Imma playbook developer looking to get into BB10 development with air. Hopefully port over my existing apps. However, I write Flex mobile apps as opposed to Actionscript mobile apps, which are what Blackberry dev docs recommend you use.

I would really like to emulate the native, default look of BB10. By that I mean having the tab navigator and actionbar styled to how the screenshots show in the BB docs. But I cant seem to find a way to get those components in my app. All i can get is a sort of unatural, mini-playbook-esque look that doesnt look anything like a BB10 app that is shown in the docs. Am I missing something here? and has someone figure out how to manage with Flex mobile apps while still getting the BB10 look?

Here is a good example of what I am trying to emulate. The UI guidelines docs seem to indicate that such a UI is out of the box, by simply selecting that layout.

 http://docs.blackberry.com/en/developers/deliverables/41577/tabs.jsp

Also the actionbar. By default flex has it at the top and has the usual default flex looking skin. But how is such an actionbar atainable by using the sdk? Please bear with me, as I am not an extremely advanced developer and am still limited in knowledge regarding these things.

http://docs.blackberry.com/en/developers/deliverables/41577/action_bars.jsp

I may not have explained my issue so well, so if you are confused at all, do let me know and I will try to clarify.

Thanks,

Theodore M

[Innovatology]

There are four ways the look & feel of a Flex Spark component can be adjusted:

1. by setting attributes on the component in XML, or setting properties in ActionScript
2. by setting CSS properties ("styles")
3. by choosing or creating an application-wide theme
4. by changing the component skin

Which of these you need to choose requires a bit of research, and will vary from component to component. I'll assume you've already looked at the attributes and CSS properties.

A theme is application-wide, and is mostly used for choosing a color scheme, font face, sizes etc, but it can also contain skins. Skins are actually classes that take care of measuring and drawing the component, making use of resources or styles  defined in the theme or in your app.

The way this works has changed somewhat over the various versions of Flex. When googling for examples, make sure you look for Flex 4 Spark components. Also note that mobile Flex components are different to their desktop counterparts, so you can't just take a desktop theme or skin and apply it to a mobile app.

Here are some resources that may help you:

http://help.adobe.com/en_US/flex/using/WS37cb61f8f3397d8622053538120890f3207-8000.html

check out at least the chapters "Styles and themes" and "Spark skinning".

http://help.adobe.com/en_US/flex/mobileapps/WS19f279b149e7481c698e85712b3011fe73-8000.html

with tthe specifics for mobile skins

I don't know whether anyone has already done any work in this area. It would be great if we could get an open-source project up and running for this.

[Paratheo]

Thanks for the reply!

I am aware of these options, however my question was geared more towards using the actual native components and not mimicking them.

For example implementing the qnx.fuse.ui.actionBar component into the application.

Any ideas on this? Skinning is sort of my last resort here. If at all possible I would like to make use of the components that have been provided by the sdk, but in a Flex mobile project rather than an Actionscript Mobile project. Your idea of an open sourced project does interest me however. I have already had to create a replica qnx  SegmentedControl with a skin.

Thanks!

[Paratheo]

In fact, I went right ahead and put out a Repo. Ill upload my stuff shortly! Hopefully this can be somewhat of a success

https://github.com/flaminSaganaki/QNX-Component-Project

[Innovatology]

QNX components don't descend from the Flex UIComponent base class, so they can't be added directly to a view or declared in MXML. As with any Sprite, you'll need to wrap the QNX components in instances of UIComponent.

You could create wrappers for each QNX component, exposing the relevant properties and implementing some housekeeping methods for things like measurement... Not extremely complicated, but a fair amount of repetitive work. Also, when new versions of the QNX components are released the wrapper components may need updating.