×

Discussion Board

Results 1 to 15 of 15
  1. #1
    Registered User
    Join Date
    Jul 2012
    Posts
    25

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

    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.

  2. #2
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

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

    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.

  3. #3
    Registered User
    Join Date
    Jul 2012
    Posts
    25

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

    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.

  4. #4
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

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

    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:
    Code:
        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

  5. #5
    Registered User
    Join Date
    Jul 2012
    Posts
    25

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

    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.

  6. #6
    Nokia Developer Expert
    Join Date
    May 2012
    Location
    Espoo
    Posts
    224

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

    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);

  7. #7
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Oslo, Norway
    Posts
    28,691

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

    Quote Originally Posted by ChinLoong View Post
    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.

  8. #8
    Registered User
    Join Date
    Jul 2012
    Posts
    25

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

    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()
    Last edited by ChinLoong; 2012-09-12 at 13:02.

  9. #9
    Nokia Developer Expert
    Join Date
    May 2012
    Location
    Espoo
    Posts
    224

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

    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.

  10. #10
    Registered User
    Join Date
    Jul 2012
    Posts
    25

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

    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?

  11. #11
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

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

    Hi ChinLoong

    That screenshot you have posted definitely shows LCDUI Form and button made like that way:
    Code:
    StringItem loginBtn = new StringItem(null, "Login", Item.BUTTON);
    loginBtn.setDefaultCommand(Commands.OK);
    Check more LCDUI possibilities in that project

    Regards,
    Igor
    Last edited by izinin; 2012-09-13 at 08:03.

  12. #12
    Nokia Developer Expert
    Join Date
    May 2012
    Location
    Espoo
    Posts
    224

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

    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

  13. #13
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

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

    hi bandarap

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

  14. #14
    Registered User
    Join Date
    Dec 2012
    Posts
    4

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

    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?

  15. #15
    Nokia Developer Moderator
    Join Date
    Feb 2006
    Location
    Oslo, Norway
    Posts
    28,691

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

    Quote Originally Posted by xtr143 View Post
    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".

Similar Threads

  1. How to add button action event On GUI application with UI design
    By mhbmhbmhb in forum Symbian User Interface
    Replies: 2
    Last Post: 2012-04-12, 12:09
  2. green call button action for textField in S40
    By Ahmed_Mohsen in forum Mobile Java General
    Replies: 2
    Last Post: 2010-09-20, 21:56
  3. Replies: 4
    Last Post: 2010-06-02, 14:06
  4. Capturing button press (touch) and do action
    By ramanandag in forum Symbian
    Replies: 1
    Last Post: 2010-04-05, 16:06
  5. Action button in N97
    By chandran.biju007 in forum Symbian
    Replies: 6
    Last Post: 2010-04-01, 11:51

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×