Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Retired
Posts: 249
Registered: ‎07-14-2008
My Device: Not Specified

How to create a custom free form title bar

Here is an example of how to create a free form and expandable title bar:

 

TitleBar { 
        id: titleBar 
        kind: TitleBarKind.FreeForm          
        kindProperties: FreeFormTitleBarKindProperties { 
            id: kindProperties 
            content: Container { 
                layout: StackLayout { 
                    orientation: LayoutOrientation.LeftToRight 
                } 
                leftPadding: 40.0 
                rightPadding: 20.0 
                ImageView { 
                    imageSource: "asset:///images/test/tv.png" 
                    verticalAlignment: VerticalAlignment.Center 
                } 
                Label { 
                    text: "My TV" 
                    textStyle.color: Color.White 
                    verticalAlignment: VerticalAlignment.Center 
                } 
            } 
            expandableArea { 
                content: Container { 
                    ...
                } 
            } 
        } 
    }

 

Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: How to create a custom free form title bar

Note that the FreeForm feature required to do this is available only since SDK 10.1. If you're targetting 10.0 you would still have to do this as a custom component, though thankfully we shouldn't have to deal with 10.0 for that much longer.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 144
Registered: ‎12-18-2010
My Device: Limited Edition Z10 & Blackberry Playbook
My Carrier: Rogers Wireless

Re: How to create a custom free form title bar

Excuse my ignorance, but what specifically is a FreeForm Title bar?  Could you provide an example of where one would be used or a description of what it does?

 

Thanks

Playbook Apps:
Touch Painter, LinkShrink

BB10 Apps:
NoteToSelf , LinkShrink
Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: How to create a custom free form title bar

Zymatic, it just means you can provide custom content. See the Calendar app's main title bar for an example.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 144
Registered: ‎12-18-2010
My Device: Limited Edition Z10 & Blackberry Playbook
My Carrier: Rogers Wireless

Re: How to create a custom free form title bar

Ok, thanks.

Playbook Apps:
Touch Painter, LinkShrink

BB10 Apps:
NoteToSelf , LinkShrink
Developer
Posts: 16
Registered: ‎09-17-2012
My Device: Developer

Re: How to create a custom free form title bar

I'm trying to create a free form titlebar and testing it on Q10 as per your sample code, but I get  

FreeFormTitleBarKindProperties is not a type, the qml file fails to be created and the app crashes.

 

I have a version mismatch between my device (10.1.0.699) and the SDK on my computer (10.1.0.1020), but they're both 10.1, so I don't think it likely to be the source of the problem. But thought I'd mention it, as that was the only other thing odd about this.

Developer
Posts: 285
Registered: ‎08-06-2010
My Device: Z10

Re: How to create a custom free form title bar

I have noticed that the IDE doesn't properly detect expandableArea (No default property defined for FreeFormTitleBarKindProperties).  It does work when deployed to a device/simulator though.

 

Here's a simple full working example:

 

  Page {
        titleBar: TitleBar {
            kind: TitleBarKind.FreeForm
            kindProperties: FreeFormTitleBarKindProperties {
                content: Container {
                    layout: StackLayout {
                        orientation: LayoutOrientation.LeftToRight
                    }
                    leftPadding: 10
                    rightPadding: 10
                    Label {
                        text: "Show expandable content"
                        textStyle {
                            color: Color.White
                        }
                        verticalAlignment: VerticalAlignment.Center
                        layoutProperties: StackLayoutProperties {
                            spaceQuota: 1
                        }
                    }
                    CheckBox {
                        id: toggleExpanded
                        verticalAlignment: VerticalAlignment.Center
                    }
                }
                expandableArea {
                    content: RadioGroup {
                        Option {
                            id: option1
                            text: "option 1"
                            selected: true
                        }
                        Option {
                            id: option2
                            text: "option 2"
                        }
                        Option {
                            id: option3
                            text: "option 3"
                        }
                    }
                    indicatorVisibility: TitleBarExpandableAreaIndicatorVisibility.Hidden
                    expanded: toggleExpanded.checked
                    onExpandedChanged: {
                        toggleExpanded.checked = expanded
                    }
                }

            }
        }
    }

 



Follow me on twitter @RileyGB - https://twitter.com/RileyGB
View my BB10 OpenSource projects - https://github.com/RileyGB/BlackBerry10-Samples
Developer
Posts: 47
Registered: ‎01-15-2013
My Device: Z10
My Carrier: N/A

Re: How to create a custom free form title bar

How can I implement this with a C++ UI?  Seems to me that the expandableArea is part of the kindProperties but I haven't been able to find where I'm able to "set expandableArea".  I have seen the read-only property but not sure where I can set the expandableArea.

 

	TitleBar* tb = TitleBar::create(TitleBarScrollBehavior::Default, TitleBarKind::FreeForm);
	FreeFormTitleBarKindProperties *properties = new FreeFormTitleBarKindProperties;
	properties->setContent(filterOptions);
	tb->setKindProperties(properties);

 

Ideally, I'd like to create the look to be very similiar to the Calendar app titlebar

BlackBerry Development Advisor
Posts: 57
Registered: ‎10-04-2012
My Device: developer
My Carrier: none

Re: How to create a custom free form title bar

Container * titleBarContent = Container::create();
Container * expandableContent = Container::create();

FreeFormTitleBarKindProperties *properties = FreeFormTitleBarKindProperties::create()
	.setContent(titleBarContent)
	.setExpandableContent(expandableContent);
TitleBar* tb = TitleBar::create(TitleBarScrollBehavior::Default, TitleBarKind::FreeForm)
	.kindProperties(properties);


Set the content:
    properties->setContent(myNewContent)
Set the expandableContent:
    properties->expandableArea()->setContent(myNewExpandableContent)

 

Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: How to create a custom free form title bar

[ Edited ]

I was just experimenting with this trying to get a multi-line title in a titlebar, I've achieved success however it's nothing like some of the stock app's title bars.

 

I discovered that i had to set a minimum height greater than 120 to get it to show my second line even though multiline is set to true.  I've found no way of centering the content and I cannot get it to get bigger than 110 pixels even though there are stock apps out there with title bars bigger than this (Help application topic pages are a good example)

 

titleBar: TitleBar {
        id: freeTitle
        kind: TitleBarKind.FreeForm
        kindProperties: FreeFormTitleBarKindProperties {
            Container {
                leftPadding: 10
                minHeight: 135
                Label {
                    id: titleLabel
                    multiline: true
                    text: "This Title Will Only Wrap One Line, Everything Else Gets Cut Off At Some Point Because It's Not Working Like Stock TitleBars"
                    textStyle.base: SystemDefaults.TextStyles.TitleText
                    textStyle {
                        color: Color.White
                    }
                }
            }
        }
    }

 Is it possible to get the title bar to wrap the text like it's done in the Help app without cutting it of at some point?

 

Another good example for a need to wrap this, if the display font settings are increased the stock apps title bars expand to fit the enlarged text, however with this method it does not do that and cuts off after 1-2 words