on 09-22-2011 4:17 PM
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
Hello Justin,
Not very sure but may be you can try with adding a css with new css rule for header.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Justin, Is this for BB5 or BB6?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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]
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
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.
User | Count |
---|---|
83 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.