TooltipDemo

TootipDemo demonstrates how to create a tooltip using LWUIT components.

Design

The MIDlet displays options to select transition style, speed and time out (i.e. after what time the tooltip should disappear from the screen) for the tooltip. The Show Tooltip button displays message on the screen based on the transition style, speed and time out selected. The message on the screen can be shown in one of the following transition styles — Slide Left, Slide Right, Slide Top, Slide Bottom, Zoom In and Zoom Out.

The MIDlet can be used in both portrait and landscape modes, and is tested on Nokia Asha SDK 1.0.

Implementation

Initialisng LWUIT Display:

Display.init(this); // initialise LWUIT Display

Initialising Form:

mainForm = new Form("Tooltip Demo");
mainForm.setLayout(new BorderLayout()); 
mainForm.setScrollable(false);

Initialising Button:

private void createActionButtonContainer(){
    buttonContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));        
    buttonContainer.setScrollable(false);

    show = new Button("Show Tooltip");        
    show.getUnselectedStyle().setMargin(10, 0, 25, 25);
    show.getSelectedStyle().setMargin(10, 0, 25, 25);
    show.getPressedStyle().setMargin(10, 0, 25, 25);             
    show.addActionListener(this);
    buttonContainer.addComponent(show);
}

Initialising Views:

private void createViewsContainer(){
    viewContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));
    viewContainer.setScrollableY(true);
    transitionTimeOutValues = new String[500];
    transitionSpeedValues = new String[500];

    for(int i = 0; i < transitionTimeOutValues.length; i++){
        transitionTimeOutValues[i] = String.valueOf( ((i+1) * 100) );
        transitionSpeedValues[i] = String.valueOf( ((i+1) * 10) );
    }

    transition = new ComboBox(TRANSITION_TEXT);
    speedCombo = new ComboBox(transitionSpeedValues);
    timeOutCombo = new ComboBox(transitionTimeOutValues);       

    Container largest = createPair("Transition", transition, 30);
    int largestW = largest.getComponentAt(0).getPreferredW();
    viewContainer.addComponent(largest);
    viewContainer.addComponent(createPair("Speed", speedCombo, largestW));
    viewContainer.addComponent(createPair("TimeOut", timeOutCombo, largestW));      
}

Displaying Tooltip on Show Tooltip button:

public void actionPerformed(ActionEvent evt) {
    if(evt.getComponent() instanceof Button){
        if(evt.getComponent().equals(show)){
            /*show the tooltip*/
            toolTip = new ToolTip("You are seeing \"" + TRANSITION_TEXT[transition.getSelectedIndex()] + "\" transtion of Tooltip", mainForm, TRANSITION_CODES[transition.getSelectedIndex()]);
            toolTip.setTimeOut(Long.parseLong(String.valueOf(timeOutCombo.getSelectedItem())));
            toolTip.setTransitionSpeed(Long.parseLong(String.valueOf(speedCombo.getSelectedItem())));
            toolTip.showToolTip();                          
        }         
    }

    if (evt.getSource() == backCommand) {
        notifyDestroyed();
        return;
    }
}

Drawing Tooltip using createToolTipImage() and CreateToolTipShadowImage() methods:

private Image createToolTipImage(){
    Image image = Image.createImage(toolTipDimension.getWidth(), toolTipDimension.getHeight());
    Graphics g = image.getGraphics();

    g.setColor(0x29A7CC);
    g.fillRect(0, 0, toolTipDimension.getWidth(), toolTipDimension.getHeight());
    g.fillLinearGradient(0x29A7CC, 0x5EC2DF, 2, 2, toolTipDimension.getWidth()-3, toolTipDimension.getHeight()-3, false);

    g.setFont(toolTipFont);
    g.setColor(0xffffff);     
 
    int yCoordinate = 5;
    int strCount = stringsArray.size();
    for (int i = 0; i < strCount; i++) {
        String tempString = (String) stringsArray.elementAt(i);
        g.drawString(tempString, 5, yCoordinate);
        yCoordinate += toolTipFont.getHeight() + LINE_GAP;
    }
    return image;
}
                        
private Image createToolTipShadowImage(){
    Image image = Image.createImage(toolTipDimension.getWidth(), toolTipDimension.getHeight());
    Graphics g = image.getGraphics();
    g.fillLinearGradient(0xD1D1D1, 0xD1D1D1, 0, 0, toolTipDimension.getWidth(), toolTipDimension.getHeight(), false);
    return image;
}

Drawing images using paint() method:

public void paint(Graphics g, Rectangle rect) {
    if(this.transition == TRANSITION_ZOOM_OUT || this.transition == TRANSITION_ZOOM_IN){
        g.drawImage(zoomShadowImage, xPosition+3, yPosition+3);
        g.drawImage(zoomImage, xPosition, yPosition);
    }else{
        g.drawImage(toolTipShadowImage, xPosition+3, yPosition+3);
        g.drawImage(toolTipImage, xPosition, yPosition); 
    }             
}

Displaying Tooltip as per the transition type:

public void showToolTip() {
    if( (this.transition == TRANSITION_NONE)){
        doTransitionNone();
    }else{
        Thread thread = new Thread(this);
        thread.start();
    }       
}

Displaying tooltip on Main screen. The timer is scheduled to dismiss the Tooltip after the transition time out.

private void doTransitionNone(){
    if (internalTimerTask != null) {
        internalTimerTask.cancel();
        internalTimerTask = null;
    }
    form.setGlassPane(null);
    form.setGlassPane(ToolTip.this);
    internalTimerTask = new ToolTip.InternalTimerTask();
    timer.schedule(internalTimerTask, timeOut);
}

Displaying other transition types with a separate thread. The timer is scheduled to dismiss the Tooltip after other transitions are completed:

public void run() {
    isPainting = true;        
    while(isPainting){            
        switch(transition){
            case TRANSITION_SLIDE_LEFT:
                doSlideLeftTransition();
                break;

            case TRANSITION_SLIDE_RIGHT:
                doSlideRightTransition();
                break;

            case TRANSITION_SLIDE_TOP:
                doSlideTopTransition();
                break;

            case TRANSITION_SLIDE_BOTTOM:
                doSlideBottomTransition();
                break;

            case TRANSITION_ZOOM_OUT:
                doZoomOutTransition();                                        
                break;

            case TRANSITION_ZOOM_IN:
                doZoomInTransition();                                        
                break;
        }
        try {
            Thread.sleep(speed);
        } catch (InterruptedException ex) {
            ex.printStackTrace();
        }
    }
    if(!isPainting){
        if (internalTimerTask != null) {
            internalTimerTask.cancel();
            internalTimerTask = null;
        }
        internalTimerTask = new ToolTip.InternalTimerTask();
        timer.schedule(internalTimerTask, timeOut);
    }
}

Dismissing Tooltip from the Screen:

class InternalTimerTask extends TimerTask {
    public void run() {
        form.setGlassPane(null);
        cancelToolTip();
    }
}
               
public void cancelToolTip() {
    if (internalTimerTask != null) {
        internalTimerTask.cancel();
        internalTimerTask = null;
    }
}

Last updated 24 June 2013

Back to top

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×