About this group

The core value of this group is to bring developers up to speed with BB technology, concentrating on BB10.Exploring efficiency, beauty and power BlackBerry provides to its users by designing Apps that can be used globally and that improves developers life as it improves community life.

Contact Name: Michael Kimathi
E-mail:
  Contact the manager of this GroupSpaces group
Category: Other

News & Announcements

BlackBerry Developer Meet-up September (Built For BlackBerry Revitilized)

  • Saturday, 14th September 2013 at 3:30pm - 8:30pm
    Location: ihub Bishop Magua Building George Padmore Lane Nairobi, Nairobi KE

    Register Here

    • 12 people attended

Built For BlackBerry and Certification

  • Saturday, 3rd August 2013 (all day)
    Location: Ihub 4th Floor Bishop Magua Centre

    Now that everyone is looking forward to build application which qualifies for built for BB We…

    • 45 people attended

TAKE IT TO THE NEXT LEVEL

  • Saturday, 4th May 2013 at 10am - 5:30pm
    Location: IHub Nairobi

    It was amazing to get great ideas hit the floor as we get new developers started as well as…

    • 22 people attended

Previous items

RSS Feed

Developing Headless Applications with WebWorks

A Headless application is native code that can run without any UI, with minimal memory and CPU cycles. However, developing a WebWorks application that works together with a headless service is relatively easy. Using this approach means you can still leverage WebWorks for all the main application development, while augmenting the app with a small piece of code that responds to any of the headless triggers, or runs constantly in the background. For me this is really taking advantage of the best of each development approach.

Using the latest WebWorks 2.1 SDK, you can create a new project from a template which includes a headless portion. This will set up an application that you can easily edit to suit your needs. Run this command to do so:

webworks create-headless 

This command will create a WebWorks 2 application with some extra parts to the config.xml file, and a native application project in the HeadlessService folder. The compiled version of this code will be in the www/assets folder, where the config.xml file knows to launch it from.

If you look at the config.xml, you’ll see the definition of two entry points:

headless1

Another part of the config.xml sets up the headless application to run when the system starts:

headless2

There are lots of different triggers that you can use, and each one is configured through the Invocation API similar to the example. Visit this page on Triggers to see the other options.

I won’t get too much into the sample native code. The project created by the create-headless command can be imported into Momentics so you can edit it. Follow our guide for making headless applications to see what features you can take advantage of.

In this blog post, I’d like to focus on communication between your headless app, and the UI portion. There are really a lot of different ways you might come up with to do this, but a couple nice simple ways are provided for you to start with. The template project uses the Notification API – so it creates a notification in the hub which, when launched, invokes the UI portion.

Another approach is to use the file system. Both the headless and UI parts have access to the same sandbox, making it easy to have the headless app store data there, which can be read by the UI. Our other sample in GitHub uses this approach. The headless portion listens to the accounts on the device and logs message changes in a text file. The UI portion uses the standard HTML5 File API and the blackberry.io plugin to read that file and display the contents.

headless3

Headless applications are not able to invoke the UI portion directly, so how you connect the two parts depends on how you need to interact with the user. Notification will allow you to get their attention if you need it, while using the file system will allow you to have content ready for the user as soon as they open the application.

To learn more about creating WebWorks applications with headless components see the documentation on our developer site. Whole new categories of applications should be possible now.


4 hours ago
Got pixel pains? Try using design units

BetaSDK

While tech enthusiasts may be drooling over the specs of the BlackBerry Passport screen resolution, I’m sure more than one designer is panicked at the thought of building a UI for another resolution.  But fear not!  BlackBerry has you covered!

Back in May with the beta release of the 10.3 Native SDK, we introduced the concept of design units. And now that the 10.3 gold release of the Native SDK is available, we’d like to give you a quick refresher on how you can use design units to easily and efficiently work with different device screen sizes and resolutions, including the BlackBerry Passport’s awesome 1440 x 1440 resolution.

Design units are device-independent values that you use to assign dimensions to components in your UI.  A design unit corresponds to a whole number of pixels based on the DPI of the device.  At run-time the framework converts the design unit value to a pixel value that’s optimal for the screen density of the current device.

The following table describes how design units convert into pixel values for each device.

Device Pixels per design unit Width (du) Height (du)
BlackBerry Z30 and BlackBerry Z3 8 90 160
BlackBerry Q10 and BlackBerry Q5 9 80 80
BlackBerry Z10 10 76.8 128
BlackBerry Passport 12 120 120

 

We’ve added the object “ui” to the UIObject base class that can perform conversions from design units to pixels.  You can choose to specify your component dimensions using design units (du), or snapped design units (sdu).  Design units calculate an exact pixel value, while snapped design units round to the nearest whole pixel.

Design units may be specified in both C++ and QML.  To use design units in QML you need to import bb.cascades version 1.3
Here is an example of an interface in QML that uses snapped design units to specify the attributes of objects on a page.

 

import bb.cascades 1.3

Page {

Container {

topPadding: ui.sdu(2)

bottomPadding: ui.sdu(2)

rightPadding: ui.sdu(2)

leftPadding: ui.sdu(2)

TextField {

hintText: "To:"

bottomMargin: ui.sdu(6)

}

TextField {

hintText: "Subject:"

bottomMargin: ui.sdu(6)

}

TextArea {

layoutProperties: StackLayoutProperties {

spaceQuota: 1

}

}

}

}

 

For more tips on resolution independent design, check out our best practices guide:

https://developer.blackberry.com/native/documentation/cascades/best_practices/resolution/index.html


4 days ago
The Improved ActionBar in 10.3

The ActionBar has seen many upgrades in the most recent 10.3 gold release of the BlackBerry 10 native SDK. Here’s a list of all the improvements brought to you with the gold release of the ActionBar.

Light-Themed ActionBar

Previously, the ActionBar always displayed a dark theme (white images and text on a dark background) regardless of the global theme settings of your application in the Application tab of the bar-descriptor.xml file. Now in the 10.3 release, the ActionBar will follow your global application theme setting, i.e. for a bright-themed application the ActionBar will now have a white background with dark images and text.

Action Bar 1

Text Label Support for All Form Factors

Prior to the 10.3 release, for screen space optimization on a BlackBerry Q10, you could only specify an image for ActionItems on the ActionBar with no text labels. In other words, the platform would simply ignore the “title” property of the ActionItem (if specified) based the form factor. This is no longer the case with the 10.3 release. Now, you are given the control on whether or not to display a label on your ActionItems.

Persistent ActionBar with VKB

We have now added a new API for all touch devices, the ActionBarFollowKeyboardPolicy that allows you to choose either to keep showing or to hide the ActionBar when the virtual keyboard (VKB) is displayed for user input. Prior to this release, the VKB covered the ActionBar and the user had to finish inputting text before they could take any further actions on the current page. Now, with the newly added API, the control is given to you. You can either tell the ActionBar to hide, to keep showing (right on top of the VKB) or to only show in portrait mode when the VKB is called for user input. If not specified, the default is for the ActionBar to follow the VKB when it appears.
QML code:

Page {        
            id: page
            actionBarFollowKeyboardPolicy: ActionBarFollowKeyboardPolicy.Portrait
            …
 }  

Action Bar 2

TextInputActionItem</h2
In the 10.3 Gold release, we have also added a new subclass to the AbstractActionItem, the TextInputActionItem. This action item is a text input action item that you can use to collect input from the user input prior to performing an action. The most common use case for this class is for e.g. performing a user search.

Action Bar 3

Compact ActionBar

The ActionBar ChromeVisiblity API now offers you the option to display a compact version of your ActionBar through the new enum value “Compact”. If set to Compact, the ActionBar is reduced to show only the following items if on the ActionBar: 1) the tab menu icon, 2) the overflow action menu icon and 3) the signature action item.

Here’s the QML code that shows how to set the chrome visibility of the action bar on a given page:

        Page {        
            id: page
            actionBarVisibility:ChromeVisibility.Compact
            …
 } 

Action Bar 4

Signature ActionItems and ActionItem Colorization

Finally, we have added the new backgroundColor property to the AbstractActionItem API (and hence all ActionItems that inherit from it). This attribute works together with the also newly added Signature attribute of the ActionBarPlacement API. Together, the two attributes allow you to place emphasis on ActionItems that are most important to your user on a given screen.
Here’s how the ActionItem looks like, if you set the ActionBarPlacement to Signature (which also places it on the ActionBar) and give it a “Red” background color:

And here is the QML implementation:

   actions: [
        ActionItem {
            ActionBar.placement: ActionBarPlacement.Signature
            backgroundColor:Color.Red
        },
 …
    ]

Action Bar 5

I hope you will find the above newly added features of the ActionBar as useful and as easy to use as I do. Let me know if you have any questions in the comments’ section below. I’ll be happy to answer those…
@SamarAbdelsayed


on 15th July

Create a site like this for your own group.
Take a Tour or Sign Up

Members

Events

July 2014
 
« »
Mon Tue Wed Thu Fri Sat Sun
30 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 1 2 3

BlackBerry Devs Kenya

Powered by GroupSpaces · Terms · Privacy Policy · Cookie Use · Create Your Own Group