Customise style of Title, action button 1 and action button 2 on Nokia Asha 311

[ChinLoong]

Hello All,

I'm building an app using Nokia SDK2.0 and LWUIT for Asha 311.

How can I customise the syle for the Title,action button 1 and action button 2 in terms of

- background color (action button 1, and action button 2)
- background color, font, font color for (Title)

I noticed the facebook app that came installed with Asha 311 was able to customise them to blue and facebook's font.
Thus, I would like to do the same for my app.

[izinin]

Hi

you are referring to LWUIT Form element components : form Title bar and form Menu bar. You can obtain them from Form by using
com.sun.lwuit.Label Form.getTitleComponent()
com.sun.lwuit.MenuBar Form.getMenuBar()
Then you can use Style Object to alter their appearance, check also Theming article referenced from the Style Object guide.

[ChinLoong]

Thanks for your response.

Below are the commands I used,

f.getMenuBar().getStyle().setBgColor(0xba0303);
f.getTitleComponent().getStyle().setBgColor(0xba0303);

However, the both commands did not take effect and the background color of the menu bar and title component did not change.

FYI, I am using S40-no-themes.jar for compilation.

May I know, if I should be using other ways to change background color? Thanks in advance.

[izinin]

Hi ChinLoong

That is working but not for all devices : it works for Nokia 205 (201) -- these are keypad-only devices and does not work for full-touch devices as Nokia 309. My code is as the following:

    public void startApp() {
        //init the LWUIT Display
        Display.init(this);
        Form f = new Form("Form Title");
        f.setLayout(new BorderLayout());
        f.addComponent(BorderLayout.CENTER, new Label("I am a Label"));
        f.addCommand(new Command("Fake1", 1));
        f.addCommand(new Command("Fake1", 2));
        f.addCommand(new Command("Fake2", 3));
        f.addCommand(new Command("Fake3", 4));
        f.getTitleComponent().getStyle().setBgColor(0xba0303);
        f.getMenuBar().getStyle().setBgColor(0xba0303);
        f.show();
    }

on keypad-only device i see colored title and menu bars.

As for Facebook app you refer to -- it is unlikelly such UI is made with LWUIT. On full-touch device there is no left button and right button softkeys but they are presented in Facebook. I guess that UI is made totally with graphics on Canvas --- please check example here how push-buttons are just drawn on canvas. class Button.

Regards,
Igor

[ChinLoong]

Thanks for your response, Izinin.

However, I'm not sure we are talking about the same app.

Here is the facebook app I am talking about and I think it is built by nokia( as there is nokia copyright).

http://www.flickr.com/photos/8413043...n/photostream/

http://www.flickr.com/photos/8413043...n/photostream/

The UI really looks very similar to a normal Series 40 SDK2.0 app, where is an action button 1, and a drop down menu after you press the action button 1.
Thus, I suspect it is not implemented using Canvas.

[bandarap]

Hi ChinLoong,

yes, me too suspect that this app is written with LCDUI Canvas.

you can also achieve that same thing(only status zone visible) using Nokia UI APIs
LCDUIUtil.setObjectTrait() and full screen canvas as below:



public class CustomCanvas extends Canvas
{
public customCanvas()
{

setFullScreenMode(true);

LCDUIUtil.setObjectTrait(this,
"nokia.ui.canvas.status_zone",
Boolean.TRUE);
}
}

you need to draw everything(title, header and etc) on your own.

see the documention for LCDUIUtils in Nokia UI API here:
http://www.developer.nokia.com/Resou...LCDUIUtil.html


and in current S40 LWUIT, Form is not supported fullscreen (without status bar and title bar) mode, but in the next future release it will be fixed to available fullscreen mode.

note also that there is workaround for fullscreen form, but you might experience some other side effects. you need to test it before using it.

((GameCanvas) (javax.microedition.lcdui.Display.getDisplay(this)).getCurrent()).setFullScreenMode(true);

[wizard_hu_]

The UI really looks very similar to a normal Series 40 SDK2.0 app, where is an action button 1, and a drop down menu after you press the action button 1.
Thus, I suspect it is not implemented using Canvas.

Programming and mysticism are two very different things. A full-screen Canvas can display anything.

[ChinLoong]

Thanks for your response, wizard_hu & bandarap.

I agree that with a full-screen Canvas, a developer can display anything in the app.

However, since the facebook app is built by nokia, is there anyway, we can check with the nokia team how it was implemented?

http://www.flickr.com/photos/8413043...n/photostream/

http://www.flickr.com/photos/8413043...n/photostream/

My additional comment is that as developer for series 40 sdk2.0, I would really prefer to use the provided
LWUIT forms, buttons and etc instead of using the Canvas(LWUIT/LCDUI) which would consume more development time.
Using the provided forms and buttons will also result in an app consistent with the Series 40 SDK2.0 general look and feel which I think is well laid out.

For example:
http://www.developer.nokia.com/Resou...se-layout.html

The only extra bit, that I am looking for is to customize the background color and font of "header title" of my app which the LWUIT api already supports(I think by using the apis below).

com.sun.lwuit.Label Form.getTitleComponent()
com.sun.lwuit.MenuBar Form.getMenuBar()

[bandarap]

I think those APIs are not really useful in S40 version of LWUIT because underline platform doesn't allow to change Title area. if you want to decorate title area, use full screen LWUIT Form and draw your own title.

[ChinLoong]

Thanks for your response, Bandarap.

With a full screen LWUIT form, will the "action button 1" and "drop down menu" still be present in the form?

[izinin]

Hi ChinLoong

That screenshot you have posted definitely shows LCDUI Form and button made like that way:

StringItem loginBtn = new StringItem(null, "Login", Item.BUTTON);
loginBtn.setDefaultCommand(Commands.OK);

Check more LCDUI possibilities in that project

Regards,
Igor

[bandarap]

With a full screen LWUIT form, will the "action button 1" and "drop down menu" still be present in the form?

"action button 1" and "drop down menu" not present in the form. but you can implement the same look in the LWUIT form using fulltouch icons available here http://www.developer.nokia.com/Resou...on-basics.html

[izinin]

hi bandarap

have you seen LCDUI possibilities in that project ? --- that can be done without LWUIT --- with default minimal toolset

[xtr143]

Like in this photo:http://www.flickr.com/photos/8413043...n/photostream/
Can i display the title text in that pink color, or this is canvas form?

[wizard_hu_]

Like in this photo:http://www.flickr.com/photos/8413043...n/photostream/
Can i display the title text in that pink color, or this is canvas form?

This particular screen is not a standard Java ME form (based on the content, it is unlikely a Java code at all), but you can certainly reproduce its style with manual "drawing".