Strategies for Landing an Oracle DBA Job as a Fresher
Native look and feel bbui & alicejs
1. How to get that native look & feel
using bbUI.js and Alice.js
@n_adam_stanley
May 25, 2012
2. Welcome
Adam Stanley
Mobile web specialist
BlackBerry Developer Relations
Follow me on Twitter:
@n_adam_stanley
Likes:
HTML5
Bacon
Ninjas 2
3. BlackBerry Web Platform
Driven by strong Web
standards support
Powered by WebKit http://html5test.com http://acid3.acidtests.org
HTML5 and CSS3
Flash 11 and WebGL
http://www.craftymind.com/guimark3/
4. BlackBerry 10
Next generation platform
HTML5 / WebWorks
Native NDK
Android
Adobe AIR
BlackBerry 10 Jam World Tour
Moscow: June 26, 2012
http://www.blackberryjamworldtour.com/
6. Framework Goals
BlackBerry Look and Feel
Common UI
Inline with BlackBerry UX guidelines
Screen Management
Performance and Memory optimization
Open and collaborative
6
7. Philosophy
Scales with the platform
Both capabilities and resolution/pixel density
Dynamic based on capabilities
Custom HTML “data-” attributes
Control based layout
Off-DOM manipulation
Performance Memory Usage
7
8. Current State
Now version 0.9.1 BETA
Supports BlackBerry OS v.5, 6, 7, PlayBook and BB10
BlackBerry OS 5 support needs a bit of work…
Open Source:
http://www.github.com/blackberry/bbUI.js
Still in the “incubating” phase
8
10. Configuration document
Config.xml:
<rim:navigation mode=“focus”/>
<feature id=“blackberry.system.event” />
<feature id=“blackbery.app” />
If using dropdowns on BlackBerry 5/6/7:
<feature id=“blackberry.ui.dialog” />
If using menus
<feature id=“blackberry.ui.menu”/>
<feature id=“blackberry.app.event”/>
10
11. Toolkit Initialization
Mandatory initialization using bb.init(myoptions)
Should be the first code you run on your main page
myoptions = {
onbackkey: null, // Custom handler for back key on BlackBerry 5/6/7 smartphones
onscreenready: null, // Manipulate your screen before it's inserted into the DOM
ondomready: null, // Manipulate your screen after it's inserted into the DOM
bb10ActionBarDark: false, // If set to true, the action bar will use the dark theme
bb10ControlsDark: false, // If set to true, the controls and screen will use the dark theme
bb10ForPlayBook: false, // If set to true, PlayBook will be considered a BB10 device
bb10AccentColor: '#2D566F', // An accent color to be used for title bars and other areas
bb10HighlightColor: '#00A8DF„ // A highlight color to use when a user selects an item
}
11
12. Screens
Each screen is an individual HTML fragment file
data-bb-type=“screen”
Transition effects
Title bar
Back button on PlayBook
Appears as an action bar back button on BlackBerry 10
12
13. Screen Code
<div data-bb-type="screen" data-bb-title="My Screen">
<div data-bb-type="title"
data-bb-caption="Title bar caption"
data-bb-back-caption="Back">
</div>
<p> Hello World ! </p>
</div>
14. Screen Management
App = Single page
bbui-0.9.1.js/css files loaded once into this single page
Screen = HTML fragment
Screens loaded via AJAX
Screen stack
bb.pushscreen(…), bb.popscreen()
bbUI.js traps HW “back” key to auto-close screens on BB5/6/7
bbUI.js automatically handles “back” if you specify a back button
on PlayBook or BlackBerry 10
14
17. Styling & Scripting
Screen specific CSS
Inline OR linked (relative to app root)
Dynamic resolution handling
Fonts
Images
Screen specific JS
Unload event fired if you need to do some clean-up
17
19. BlackBerry 10 Grid Lists
Current
Image data layouts
Items declared in groups and rows
Optional group headers
16:9 format
Images sized based on # items / row
Next
Allow “square” images
Allow removal of titles
19
20. BlackBerry 10 Action Bar
Current
Buttons and tabs
Actions are for everything
viewed on the screen
Built in “Back” button
>5 actions create slide in
action overflow menu
Next
Tab overflow menu
20
21. BlackBerry 10 Context Menu
Current
Press and hold context menu
Actions to perform on a
selection
peek() or Show()
Peek and then swipe gesture
Get selected menu item
Image list integration
Next
Integrate into Grid List
21
22. Image Lists
Seen in:
Options screens
Inbox
Contacts
Image, Title, Description,
Accent Text
Auto scaled
Headers
onclick events for items
22
23. Image List
<div data-bb-type="image-list">
<div data-bb-type="item”
data-bb-img="icon1.png”
data-bb-title="Input Controls">
Use native looking input controls
</div>
...
</div>
23
24. Buttons
Can be used anywhere
Buttons size to text
Can stretch
Onclick
Enable/Disable
24
28. Dropdowns
<select>
Can be used anywhere
size to largest item
Can stretch
onchange
setSelectedItem
28
29. Arrow Lists
Variation on the Image list
data-bb-type=
“text-arrow-list”
• Items are:
data-bb-type=“item”
29
30. BBM Bubbles
Great for BBM-
connected WebWorks
apps
Bubbles contain item(s)
Bubbles left/right justified
Items:
Image
Text description
30
31. Future
Goals:
Stabilize BlackBerry 5 support
Add more PlayBook elements
More core controls for BlackBerry 10
More transition effects
How can you help?
Become a contributor!
http://www.github.com/blackberry/bbUI.js
31
33. Framework Goals
Visual effects library
Hardware accelerated for fast animations and transitions
Adds randomization to effects so they never go stale
One line of code
Apply an effect to any HTML element
Open and collaborative
http://blackberry.github.com/Alice
Apache 2 license
33
34. AliceJS Philosophy
Simplicity
One line of code for any effect
CSS likeness
Easy to one day perhaps integrate in the standard
DOM-level animations
Not just for image galleries
Rich
Collection of effects
Organics
effects are always mysteriously slightly different