Working with Stylus Pop-up Menu API - S60 Touch UI

Comments

22 Sep
2009

Article Review by User:FireSwarog (20090922)

The article demonstrates how to use new API of S60 5th: Popup Menu API. This API contains several classes with the help of which you can activate popup menu for stilus.

A convenient and user-friendly approach is to display such menu as a result of long tapping on the screen. This article demonstrates such approach. The code snippets contain detailed comments, as a result sources become clearer. The author also provides demo project, which is useful for various experiments with new possibilities.

---

Log in or Join to leave comments.

Article Metadata

---

Code Example

Source file: Media:StylusPopup.zip

---

Article

Created: kiran10182 (02 Nov 2008)

Last edited: hamishwillee (08 Feb 2012)

Overview

Stylus Pop-up Menu is a new component introduced in S60 5th edition Touch UI concept. In this article we will learn how to play with Stylus Pop-up Menu API with different methods.

What is Stylus Pop-up Menu API

• It is a floating component.
• Generally it is used with the long tap detection event.
• It pops up near the tap position.
• When the Item within pop-up menu is tapped, it should be handled in the ProcessCommandL.

Preface of the example

• In this example we will use Stylus Pop-up Menu in conjunction with LongTapDetector API.
• We will inherit from MAknLongTapDetectorCallBack and implement HandleLongTapEventL()
• We will inherit from MEikMenuObserver and implement ProcessCommandL to handle Stylus Pop-up Menu item commands.

Creating Stylus Pop-up Menu resource

RESOURCE STYLUS_POPUP_MENU r_stylus_popup_menu
	{
		items =
		{
			STYLUS_POPUP_MENU_ITEM
				{
					txt = "Add menu item";
					command = ECommand1; // In this example we are using the same set of commands which are handled in AppUi::HandleCommandL
				},
			STYLUS_POPUP_MENU_ITEM
				{
					txt = "Remove menu item";
					command = ECommand2; // In this example we are using the same set of commands which are handled in AppUi::HandleCommandL
				},
			STYLUS_POPUP_MENU_ITEM
				{
					txt = "Exit Application";
					command = EAknSoftkeyExit;
				}
		};
	}

Implementing Stylus Pop-up Menu in the code

StylusPopupAppView.h

.....
#include <aknlongtapdetector.h>
#include <aknstyluspopupmenu.h>
#include <EIKMOBS.H>
 
// CLASS DECLARATION
class CStylusPopupAppView : public CCoeControl, public MAknLongTapDetectorCallBack, public MEikMenuObserver
{
	....
	....
	// From MAknLongTapDetectorCallBack
	virtual void HandleLongTapEventL( const TPoint& aPenEventLocation, const TPoint& aPenEventScreenLocation );
 
	//From MEikMenuObserver
	void ProcessCommandL(TInt aCommandId);
	void SetEmphasis(CCoeControl* /*aMenuControl*/,TBool /*aEmphasis*/)
	{
	}
 
	//Example logic helper function
	void AddMenuItemRuntime(TInt aId);
	void RemoveMenuItemRuntime(TInt aId);
	....
	....
private:
	CAknLongTapDetector* iLongTapDetector;
	CAknStylusPopUpMenu* iStylusPopupMenu;
	TInt iCount;
	.....
	.....
};

StylusPopupAppView.cpp

• Set "this" class to receive long tap detection events in the ConstructL() as shown below.

// -----------------------------------------------------------------------------
// CStylusPopupAppView::ConstructL()
// Symbian 2nd phase constructor can leave.
// -----------------------------------------------------------------------------
//
void CStylusPopupAppView::ConstructL(const TRect& aRect)
{
    // Create a window for this application view
    CreateWindowL();
 
    iLongTapDetector = CAknLongTapDetector::NewL(this);
    .....
}

• Handle pointer events in HandlePointerEventL as shown below.

// -----------------------------------------------------------------------------
// CStylusPopupAppView::HandlePointerEventL()
// Called by framework to handle pointer touch events.
// -----------------------------------------------------------------------------
//
void CStylusPopupAppView::HandlePointerEventL(const TPointerEvent& aPointerEvent)
{
    // Pass the pointer event to Long tap detector component
    iLongTapDetector->PointerEventL(aPointerEvent);
 
    // Call base class HandlePointerEventL()
    CCoeControl::HandlePointerEventL(aPointerEvent);
}

• Long tap events should be handled in the following callback function from MAknLongTapDetectorCallBack
• In this example we will create/show Stylus Pop-up Menu when the Long trap event is detected.
• Both the arguments in the HandleLongTapEventL will give points of the event occurrence with respect to the following points:
  • aPenEventLocation gives Long tap event location relative to parent control.
  • aPenEventScreenLocation gives Long tap event location relative to screen.

void CStylusPopupAppView::HandleLongTapEventL( const TPoint& aPenEventLocation, const TPoint& aPenEventScreenLocation )
{
    if(!iStylusPopupMenu)
    {
        iStylusPopupMenu = CAknStylusPopUpMenu::NewL( this , aPenEventLocation);
        TResourceReader reader;
        iCoeEnv->CreateResourceReaderLC(reader,R_STYLUS_POPUP_MENU);
        iStylusPopupMenu->ConstructFromResourceL(reader);
        CleanupStack::PopAndDestroy();
    }
    iStylusPopupMenu->ShowMenu();
    iStylusPopupMenu->SetPosition(aPenEventLocation);
}

• Application's logic helper functions which help in adding and removing items in the Stylus Pop-up Menu.
• AddMenuItemRuntime() will add item at runtime to the Stylus Pop-up Menu.
• RemoveMenuItemRuntime() will remove item at runtime from the Stylus Pop-up Menu.
• ProcessCommandL() will handle item selected from the Stylus Pop-up Menu. In this example we are using the same enumeration that is used in AppUi::HandleCommandL but with different implementation.

void CStylusPopupAppView::AddMenuItemRuntime(TInt aId)
{
    _LIT(KMenuItem,"Item %d");
    TBuf<20> buf;
    buf.Format(KMenuItem(), aId);
    iStylusPopupMenu->AddMenuItemL(buf,aId);
    iStylusPopupMenu->ShowMenu();
}
 
void CStylusPopupAppView::RemoveMenuItemRuntime(TInt aId)
{
    iStylusPopupMenu->RemoveMenuItem(aId);
    iStylusPopupMenu->ShowMenu();
}
 
void CStylusPopupAppView::ProcessCommandL(TInt aCommand)
{
    switch(aCommand)
    {
        case ECommand1:
            AddMenuItemRuntime(iCount++);
            break;
 
        case ECommand2:
            if(iCount>0)
                RemoveMenuItemRuntime(--iCount);
            break;
 
 
        case EAknSoftkeyExit:
            User::Exit(0);
            break;					
 
        default:
            CAknInformationNote* info = new (ELeave) CAknInformationNote;
            info->ExecuteLD(_L("Runtime added command pressed!"));
            break;
    }
}

• Make sure to delete iLongTapDetector in the destructor of the class.
• Make sure to delete iStylusPopupMenu in the destructor of the class.

 
// -----------------------------------------------------------------------------
// CStylusPopupAppView::~CStylusPopupAppView()
// Destructor.
// -----------------------------------------------------------------------------
//
CStylusPopupAppView::~CStylusPopupAppView()
{
    .....
    .....
    if(iLongTapDetector)
        delete iLongTapDetector, iLongTapDetector = NULL;
 
    if(iStylusPopupMenu)
        delete iStylusPopupMenu, iStylusPopupMenu = NULL;
    .....
}

Useful functions

CAknStylusPopUpMenu

• ShowMenu()
• AddMenuItemL()
• RemoveMenuItem()
• SetPosition()

MAknLongTapDetectorCallBack

• HandleLongTapEventL()

Keywords

Headers

• #include <AknToolbarObserver.h>
• #include <AknToolbar.h>
• #include <Aknstyluspopupmenu.h>

Classes

• CAknStylusPopUpMenu
• CAknToolbar
• MAknToolbarObserver

Libraries

• eikcoctl.lib

Example Application

• StylusPopup.zip

Related links

• A tour to the S60 Touch UI components
• Working with Toolbar API - S60 Touch UI
• Working with LongTapDetector API - S60 Touch UI
• Working with Tactile Feedback Client API - S60 Touch UI
• Working with Adaptive Search feature - S60 Touch UI
• Working with ChoiceList API - S60 Touch UI
• Working with Generic Button API - S60 Touch UI
• Working with SingleStyleTreeList with Hierarchical Lists API - S60 Touch UI
• Working with SingleColumnStyleTreeList with Hierarchical Lists API - S60 Touch UI

Reference list

• S60 5th edition SDK help
• S60 5th Edition C++ Developer's Library v1.0