cancel
Showing results for 
Search instead for 
Did you mean: 

Changing the Header in a Hybrid Web Container app on BlackBerry

Former Member
0 Kudos

Hello Experts!

I am trying to add a custom header to Hybrid Web Container Apps on SUP 2.0. It would be nice to add branding or additional text - even the ability to center the text would be nice. I have tried various jQuery approaches and can see the changes working when I test via Chrome. However when deploying to my BlackBerry simulator the changes are not reflected. If I had to guess - it would appear the entire Header area is not modifiable. To add more context to the problem review the generated code below from workflow_jQueryMobileLookAndFeel.html


<div data-role="page" data-theme='a' id="ErrorDetailScreenDiv">       
      <div data-role="header" data-position="inline"> 
       <h1>ErrorDetail</h1> 
     </div> 

Recall that each screen is a div with the data-role attribute page; similarly the div with data-role header is the area in question that I am trying to modify.

Here is the jQuery I am using in the customBeforeWorkflowLoad method in the Custom.js file.


$('[data-role="header"]').each(function() {
		var dvHeader = $(this);	
		var elem = dvHeader.find('h1');
		var h1Str = elem.text();
		elem.empty();
		dvHeader.remove('h1');
                //function buildHeader returns html text of a div etc
		var txt = buildHeader(h1Str);
		dvNewHeader = $(txt);
		dvHeader.append(dvNewHeader);	
	});

Again when testing in chrome the text is removed and the new header is added.

If I had to guess - I would say the Workflow application which wraps around the Hybrid Web Container App is interfering; I assume the workflow (native) application reads the h1 tags and the header we see on the device is the workflow app and not the Hybrid Web Container. My other guess would be the Header area is somehow locked in the BlackBerry scenario.

Thanks.

Edited by: JUSTIN MCGREW on Sep 22, 2011 5:18 PM

Edited by: JUSTIN MCGREW on Sep 22, 2011 5:21 PM

Edited by: JUSTIN MCGREW on Sep 22, 2011 5:22 PM

Accepted Solutions (0)

Answers (2)

Answers (2)

Former Member
0 Kudos

Hello Justin,

Not very sure but may be you can try with adding a css with new css rule for header.

Former Member
0 Kudos

Justin, Is this for BB5 or BB6?

Former Member
0 Kudos

Hello,

Thanks for your response. I believe this is BlackBerry 6. I am using a 9800 simulator bundled with the BlackBerry JDE 6.0. Confirmed the version is 6.0 bundle 1563. Thanks.

Edited by: JUSTIN MCGREW on Sep 22, 2011 7:15 PM

Former Member
0 Kudos

Hi Justin,

In the generated customAfterWorkflowLoad() method, there should be some sample code which demonstrates how to add a header and footer to a page. Please give that try.

Thanks,

Andrew.

Former Member
0 Kudos

Justin, If you look into Custom.js, we recommend that if you want to do branding, do it in the div "TopOf" + ScreenKey + "Form"

and "bottomOf" + screenKey + "Form"

Header is an internal DIV. TopOf.. and BottomOf.. exist in the "Content" div for each screen and this is where all the real

stuff goes.

[Link to doc|http://infocenter.sybase.com/help/topic/com.sybase.infocenter.dc01218.0201/doc/html/vhu1296159762226.html]

Former Member
0 Kudos

Hello,

Yes I was aware of the customBeforeShowScreen method of adding a screen header. I believe in my testing I determined for ListView-based screens and credential screens the dynamic header is not shown and only works on pages with an HTMLView.

Doesnt it seem a little silly to have two headers?

Example:

Login Page

Logo \ Login Page \ Custom Text

Screen Body

I will accept that there is not a method to replace the header at the very top of the screen.

Thanks for your time and help!

-Justin

Former Member
0 Kudos

Hi Justin,

I think I see what you mean now. Looks like you are trying to set the native screen title. Take a look at setScreenTitle() in API.js. In your example:

Login Page <---- Native code on BB/WM/Android, can change this with setScreenTitle(), this is obviously text based only

Logo \ Login Page \ Custom Text <---- This is html, and can contain images, etc as you have shown

Screen Body

Hope that helps,

Andrew.

Former Member
0 Kudos

Hello,

The ability to empty out that top header looks to be the best solution. Much appreciation Andrew!

-Justin

Edited by: JUSTIN MCGREW on Sep 23, 2011 6:57 PM