Couldn’t Stump Me… - REDUX!
**NOTICE: Coding for this tutorial was from Cascades Beta2 (R6), I am in the process of updating the tutorials to match the new APIs for Beta3 (R9)***
When I first created this blog, I figured only a handful people would read it and it would be awhile before anyone even found it. But apparently word got out much wider and faster than expected. Which is awesome, and hope everyone has enjoyed my postings so far.
So when I made the “Couldn’t Stump Me” UI it was just a little challenge for myself and I didn’t put much thought into making it the best it could be. Well, now that I have an audience I figured I’d give it some more bells and whistles.
First things first, those colors were awful. Honestly I just wanted something that had a high contrast so I could easily see while I was creating it. So that was a simple fix of changing “background: Color.create(X, X, X)”
Next, by popular request switch the diagonal list to a ListView. I had to create custom components for each list call because the defaults were too big and resulted in the titles/descriptions being cut off, ex. “Bold 9…”
Third, I made the app orientation aware (as illustrated in the picture above). As you can see the text changes from saying “Orientation: portrait” to “Orientation: landscape”. As well as the main container (which houses two sub containers: blamobox and bottombox) switches from “LayoutDirection.TopToBottom” to “LayoutDirection.LeftToRight”. I know this isn’t much of an explanation, I will do a full Orientation Awareness blog soon!
Enjoy.
-Brian
P.S. And the image is true… I’m GOING TO BB JAM AMERICAS and Sept 25th is my B-day so double awesome for me!!
main.qml
import bb.cascades 1.0
Page {
content: Container {
id: rootcontainerlayout
background: Color.create(0.2, 0.2, 0.2)
onCreationCompleted: {
OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
}
attachedObjects: [
OrientationHandler {
onUiOrientationChanging: {
if (uiOrientation == UiOrientation.Landscape) {
orientationtext.text = " Orientation: landscape"
layouts.layoutDirection = LayoutDirection.LeftToRight
} else {
orientationtext.text = " Orientation: portrait"
layouts.layoutDirection = LayoutDirection.TopToBottom
}
}
} // End of OrientationHandler
] // End of attachedObjects
layout: StackLayout {
id: layouts
layoutDirection: LayoutDirection.TopToBottom
}
Container {
id: blamobox
background: Color.create(0.2, 0.2, 0.2)
preferredWidth: 768.0
preferredHeight: 800.0
layout: DockLayout {
}
Label {
text: "MAKE"
rotationZ: -90.0
translationY: 85.0
translationX: -20.0
textStyle {
size: 40
fontWeight: FontWeight.Bold
color: Color.White
}
}
Label {
text: "THIS!"
translationX: 65.0
translationY: 5.0
textStyle {
size: 40
fontWeight: FontWeight.Bold
color: Color.White
}
}
Container {
background: Color.create(0.7, 0.1, 0.1)
preferredWidth: 650.0
preferredHeight: 700.0
translationY: 50.0
layout: DockLayout {
}
layoutProperties: DockLayoutProperties {
horizontalAlignment: HorizontalAlignment.Center
}
Container {
rotationZ: -45.0
translationY: 80.0
translationX: 20.0
Button {
id: buttonID
text: "Blamo!"
onClicked: {
}
preferredWidth: 250.0
}
}
Container {
rotationZ: -45.0
preferredWidth: 300.0
translationY: 465.0
translationX: 425.0
Label {
text: "New Design:"
textStyle {
color: Color.White
size: 25
}
}
Label {
text: "Diagonal ListView"
textStyle {
color: Color.White
size: 25
}
}
Label {
text: "Orientation Aware!"
textStyle {
color: Color.White
size: 25
}
}
}
Container {
background: Color.White
preferredWidth: 400.0
preferredHeight: 700.0
layoutProperties: DockLayoutProperties {
horizontalAlignment: HorizontalAlignment.Center
}
translationY: -350.0
translationX: 350.0
rotationZ: 45.0
}
Container {
background: Color.White
preferredWidth: 400.0
preferredHeight: 700.0
layoutProperties: DockLayoutProperties {
horizontalAlignment: HorizontalAlignment.Center
}
translationY: 350.0
rotationZ: 45.0
translationX: -350.0
}
Container {
background: Color.White
preferredWidth: 400.0
layoutProperties: DockLayoutProperties {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
}
rotationZ: 45.0
ListView {
dataModel: XmlDataModel {
source: "models/phones.xml"
}
layout: StackListLayout {
// layoutDirection: LayoutDirection.ToptoBottom
}
listItemComponents: [
ListItemComponent {
type: "header"
Container {
background: Color.White
preferredWidth: maxWidth
rotationZ: -45.0
topMargin: 50.0
Label {
text: ""
// text: ListItemData.title
textStyle {
base: SystemDefaults.TextStyles.BodyText
size: 20
fontWeight: FontWeight.Bold
color: Color.Black
}
}
}
},
ListItemComponent {
type: "item"
Container {
background: Color.White
preferredWidth: maxWidth
rotationZ: -45.0
layout: StackLayout {
layoutDirection: LayoutDirection.LeftToRight
topPadding: 50.0
}
Container {
ImageView {
id: imageViewID
imageSource: ListItemData.thumbURL
preferredWidth: 100
preferredHeight: 100
scalingMethod: ScalingMethod.AspectFill
}
}
Container {
Label {
text: ListItemData.title
textStyle {
base: SystemDefaults.TextStyles.BodyText
size: 40
fontWeight: FontWeight.Bold
color: Color.Black
}
}
Label {
text: ListItemData.description
textStyle {
base: SystemDefaults.TextStyles.BodyText
size: 20
fontWeight: FontWeight.Regular
color: Color.Black
}
}
Divider {
}
}
}
}
]
onSelectionChanged: {
}
rotationZ: 0.0
}
}
}
}
Container {
id: bottombox
Label {
id: orientationtext
text: ""
textStyle {
size: 40
fontWeight: FontWeight.Bold
color: Color.White
}
}
ImageView {
id: imageBBJam
imageSource: "asset:///images/banner-americas-300x100.jpg"
preferredWidth: width
preferredHeight: height
}
}
}
}
phones.xml (phone list repeated twice on purpose so the list would be longer while testing scrolling):
<root>
<header title="Phones">
<item title=" Dev Alpha" thumbURL="images/devalpha.jpg" description=" Touch"/>
<item title=" Bold 9900" thumbURL="images/9900.jpg" description=" Touch+QWERTY"/>
<item title=" Torch 9810" thumbURL="images/9810.jpg" description=" Touch+QWERTY (Slider)"/>
<item title=" Style 9670" thumbURL="images/9670.jpg" description=" QWERTY"/>
<item title=" Pearl 9100" thumbURL="images/9100.jpg" description=" SureType"/>
<item title=" Curve 8900" thumbURL="images/8900.jpg" description=" QWERTY"/>
<item title=" Dev Alpha" thumbURL="images/devalpha.jpg" description=" Touch"/>
<item title=" Bold 9900" thumbURL="images/9900.jpg" description=" Touch+QWERTY"/>
<item title=" Torch 9810" thumbURL="images/9810.jpg" description=" Touch+QWERTY (Slider)"/>
<item title=" Style 9670" thumbURL="images/9670.jpg" description=" QWERTY"/>
<item title=" Pearl 9100" thumbURL="images/9100.jpg" description=" SureType"/>
<item title=" Curve 8900" thumbURL="images/8900.jpg" description=" QWERTY"/>
</header>
</root>