Saturday, 31 August 2013

Developing With WebWorks For Blackberry 10 - Creating A Welcome Screen

Toby Clench  /  at  16:00  /  No comments

As you may have noticed, in our Shopping For eBay app, we have a welcome page - interested in finding out how it's created? Then follow these steps!

Today I am going to show you how to use a welcome page, that can be displayed every time your app is launched or an option to go to the menu screen instead. Of course we will be giving the user the option to do this.

The elements that I have put brackets around, for example C:\Users\(username)\, remove the brackets and just put in your information.

Firstly, we need to set up our environment. To do this, we need to create a folder called, RippleSites in your C drive which should be C:\Users\(username)\RippleSites For example, this is how mine looks C:\Users\Tobster\RippleSites. After you have created your RippleSites folder, create another folder inside of that called HelloWorld. Inside the HelloWorld folder create two more folders, one named CSS and the other named JS. Now that we have our folders set up, go ahead and download these five items:
  1. Notepad++
  2. Ripple Emulator
  3. BBUI.js
  4. BBUI.css
  5. Blackberry WebWorks SDK

Now that you have downloaded all of those, install Notepad++ to your program files folder, install the Ripple Emulator to your browser, add BBUI.js and BBUI.css to your HelloWorld folder and install the Blackberry WebWorks SDK. Whilst your WebWorks SDK is installing, sign up for your Signing Keys
You will have now been e-mailed two files, one will look like this client-RDK-XXXXXX.csj and the other like this client-PBDT-XXXXXX.csj. Now that you have those files, click the Windows icon and search for Command Prompt, open the command prompt and you will now install your keys. To install your keys, follow these steps:
  1. In your Blackberry program folder, create a new folder called Signing_Keys
  2. Type in the following to the command prompt C:\Users\(username)\programfiles\Blackberry\Blackberry_10_WebWorks_SDK_1.0.4.11\dependencies\tools\bin\blackberry-signer -csksetup -cskpass (use same as csj pin) -csjpin (your csj pin, specified when you signed up for your keys) -cskpass (use same as csj pin) C:\Users\(username)\programfiles\Blackberry\App_Making\Signing_Keys\client-RDK-XXXXXX.csj -csjpin (yourcsjpin) -cskpass (use same as csj pin) C:\Users\(username)\programfiles\\Blackberry\App_Making\Signing_Keys\client-PBDT-XXXXXX.csj
  3. Now, type in the following code to the command prompt C:\Users\(username)\programfiles\Blackberry\App_Making\Blackberry_10_WebWorks_SDK_1.0.4.11\dependencies\tools\bin\blackberry-signer -register -csjpin (yourcsjpin) -storepass (same as your csjpin) C:\Users\(username)\programfiles\Blackberry\App_Making\Signing_Keys\client-RDK-XXXXXX.csj C:\Users\(username)\programfiles\App_Making\Signing_Keys\client-PBDT-XXXXXX.csj
  4. Finally, type in the following code to the command prompt C:\Users\(username)\programfiles\Blackberry\App_Making\BlackBerry_10_WebWorks_SDK_1.0.4.11\dependencies\tools\bin\blackberry-keytool -genkeypair -keystore (same as csj pin) -storepass (same as csj pin) -dname "cn=(your company name)" -alias author
  5. In a few moments you will get two emails confirming that your keys have been registered, and to double check this, head over to C:\Users\(username)\AppData\Local\Research In Motion and you should see three files
    • author
    • barsigner.csk
    • barsigner
  6. Now that you have found these, copy them and create a new folder called Signing_Keys_Backup, which should be placed and look like the following - C:\Users\(username)\programfiles\Blackberry\App_Making\Signing_Keys_Backup finally paste your three files into this folder, so that you have a back up of them!

Great! All of our files, folders and signing keys are now set up, so now we can get onto the fun part!
Firstly, open Notepad++ and create a file called index.html. Save this file in your HelloWorld folder (C:\Users\(username)\RippleSites\HelloWorld)
Your index.html should look like the one beneath to get the welcome page to function correctly!
Secondly, you will need to create your javascript file. Open a new file in Notepad++ save it with the name javascript.js Now copy this code,
Finally, you will want to create two html files. One called welcome.html and the other menu.html - welcome.html will be our welcome screen and menu.html will be our home page.
Your welcome.html and menu.html files can look however you want them to, but to quickly learn how to do this quickly, you can just use my code.
To view your app, open Google Chrome, start Ripple Services - by clicking the blue icon next to the address bar. In the address bar type the following - localhost:9910/helloworld/index.html
That is it! To view your app on a device, simply click the settings and fill out the boxes,
  • SDK Path - C:\Users\(username)\Blackberry\BlackBerry_10_WebWorks_SDK_1.0.4.11
  • Project Root - C:\Users\Tobster\RippleSites\HelloWorld
  • Archive Name - HelloWorld
  • Output Folder - C:\Users\(username)\RippleSites\Packaged\HelloWorld
  • Leave web inspector unticked

  • Signing Password - (csjpin)
  • Bundle Number - 1.0

  • Target - Device
  • Device IP - (you will find this by going to Settings > Security and Privacy > Development Mode > Set the toggle to on and then underneath your Development IP Address will apear
  • Device Password - The password for your device

I hope you enjoyed this tutorial, leave your comments below and I look forward to doing more in the future!

About The Author

Toby Clench

Toby is the studio's webworks programmer who mainly focusses on apps but also likes to learn how to code games and help out with design.

Posted in: Posted on: Saturday, 31 August 2013


BBM Channel C00120C46
Copyright © 2013 Tundra Core Studios. WP Theme-junkie converted by BloggerTheme9
Blogger templates. Proudly Powered by Blogger.
Google+ Facebook Twitter