advanced ui large custom list with search

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved.Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved.

Advanced UI: Large Custom List with Search

Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved.

Overview (Music App)

2


Contents

3

List– List Basics– CustomList Format & Item, the key to

customization– SlidableList for handling a large list

Search UI– EditField, Overlay keypad

Summary

3*This material is based on bada SDK 1.0.0b3


List

1. List Basics

2. CustomList Format & Item, the key to customization

3. SlidableList for handling a large list

4


List Basics (1/3)

5

List CustomList/SlidableList

GroupedList/SlidableGroupedList

ExpandableList IconList


List Basics (2/3)

UI control that displays a sequential list of items

When an item is clicked, the OnItemStateChanged() is invoked

OnItemStateChanged(…, int index, int itemId, ItemStatus status)

6

Click

IItemEventListener


List Basics (3/3)

Step 1: Create a List

Step 2: Add an ItemEventListener

Step 3: Add items

pList = new List();pList->Construct(Rectangle(0, 0, 480, 800),

/* ListStyle */, /* ListItemFormat */,…);

pList->AddItem(L”Item title”, …, itemId);

7

pList->AddItemEventListener(*pItemEventListener);


List

8

1. List Basics




Implementation Steps

9

1. Create Item Format

2. Custom Drawing

3. Set Elements to a List Item

4. Handle Interaction


Create Item Format: Elements

Property of Elements– Mandatory: Element ID, bounds– Optional: Text size, text color, focused text

color

String Element (size:50)String Element (size:25)

Custom Element

10


Enable event handling for each Element– Event status (default: disable)

Create Item Format: Event

Event status set to false Event status set to true

Item’s event invoked Element’s event invoked

vs

11

void SetElementEventEnabled(int elementId, bool enable)


Create Item Format: Code stubStep 1: Create a CustomListItemFormat// Create ItemFormatCustomListItemFormat* pItemFormat =

new CustomListItemFormat();pItemFormat->Construct();

12


Create Item Format: Code stubStep 2: Define Elements’ formatpItemFormat->AddElement(ID_FORMAT_CUSTOM,

Rectangle(0, 0, 100, 100));pItemFormat->AddElement(ID_FORMAT_TITLE,

Rectangle(120, 10, 310, 60), 50, Color::COLOR_WHITE, Color::COLOR_BLUE);

pItemFormat->AddElement(ID_FORMAT_ARTIST_NAME, Rectangle(120, 65, 310, 90), 25, Color:COLOR_WHITE, Color::COLOR_BLUE);

Bound(0,0,100,100)

13

String Element (size:50)String Element (size:25)

Custom Element


Create Item Format: Code stubStep 3: Enable Element Event

14

pItemFormat->SetElementEventEnabled(ID_FORMAT_CUSTOM, true);

Event status

Event status is false Event status is true

Item’s event invoked Element’s event invoked

vs



15


2. Custom Drawing




Custom Drawing

16

class CustomListElement: public ICustomListElement{result DrawElement(const Osp::Graphics::Canvas& canvas,

const Osp::Graphics::Rectangle& rect, CustomListItemStatus itemStatus)

{Canvas* pCanvas = const_cast<Canvas*>(&canvas);/* Drawing Custom element with Canvas(2D graphics) */

return r;}

};

Reminder: Canvas is a rectangular area where all the graphics rendering takes place. Ex) 2D primitive drawing, texts and bitmaps



17


2. Custom Drawing



Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved.SetValue(percent value: 80)

Composed of one or more elements– Bitmaps, Texts and Custom

Set Elements (1/3)

18

String (size:50)String (size:25)

Custom Element

Elements

CustomListItemFormatCustomListItem


Set Elements (2/3)Step 1: Create a CustomListItemCustomListItem* pItem = new CustomListItem();pItem->Construct(100);pItem->SetItemFormat(*pItemFormat);

19

Item height


Set Elements (3/3)Step 2: Set Elements to CustomListItem

20

pItem->SetElement(ID_FORMAT_CUSTOM, *pCustomListElement);pItem->SetElement(ID_FORMAT_TTILE, L“Ac");pItem->SetElement(ID_FORMAT_ARTIST_NAME, L“Artist Name");

String (size:50)String (size:25)

Custom Element



21


2. Custom Drawing

3. Set elements to a List Item



Interaction (1/2)

ICustomItemEventListener

When an Item is clicked, OnItemStateChanged() is invoked

22

void OnItemStateChanged(…,int itemId, ItemStatus status ){switch (itemId)

{case ID_ITEM1:break;

case ID_ITEM2:break;

}

Click!- Item -


ICustomItemEventListener

When an Element is clicked, OnItemStateChanged() is invoked

Interaction (2/2)

void OnItemStateChanged(…,int itemId, int elementId, ItemStatus status ){switch (elementId)

{case ID_FORMAT_CUSTOM:

// ex. pItem->SetValue(percentage);// ex. Play mp3

break;…

}

23

Click!- Element -

Event status is true


List

24

1. List Basics




SlidableList

25

CustomList

Loads items when needed

Unloads unused items to save memory

* For best performance, the number of items to be loaded is decided by the platform at runtime.



26

1. Set SlidableList Properties– Item count, total height of list

2. Interaction



27

1. Set SlidableList Properties– Item count, total height

2. Interaction

* When the number of items or total height of the items change, properties need to be updated


Set SlidableList Properties

28

Step 1: Create a SlidableList

Step 2: Add the Listener

Step 3: Set Properties

pSlidableList = new SlidableList();pSlidableList->Construct(Rectangle(0, 0, 480, 600), /* CustomListStyle */);

pSlidableList->AddSlidableListEventListener(*pSlidableListEventListener);

SetItemCountAndHeight(ITEM_COUNT, TOTAL_HEIGHT);


Implementation steps

29

1. Set property– Item count, total height

2. Interaction


Interaction

30

When the list is scrolled down, the list starts requesting loading of items into memory


InteractionWhen the list is scrolled down, the list starts requesting loading of items into memory

itemIndex: index of item to be loadednumItems: requested number of items

31

OnLoadToTopRequested(… int itemIndex, int numItems)


Interaction

32



for(int i = itemIndex; i < numItems; i--){/* load related resources */pSlidableList->LoadItemToTop(*pItem, itemId);

}

Item id for this item


Interaction

33



for(int i = itemIndex; i < numItems; i--){/* load related resources */ pSlidableList->LoadItemToTop(*pItem, itemId);

}


Interaction

34

When the items in memory are not required they are unloaded and application is given notice

/* unload related resources */

OnUnloadItemRequested(… int itemIndex)

Unloaded


Demo [Music App: SlidableList]

Demo Sequence:– Show SlidableList– Scroll down/up SlidableList– Interact with Custom Element

35


Search UI

EditField, Overlay Keypad

36


ScrollPanel

ScrollPanel

37

Overlay keypad works together with a ScrollPanelScrollPanel– Panel where the actual

dimension is larger than the visible area

– Provides vertical scrolling and scroll bar

– Can handle overlay windows such as Overlay keypad

ScrollPanel


EditField

38

Editing area– EditField– EditArea

Keypads available– Overlay keypad– Fullscreen keypad

Command Button

vEditField

Overlay Keypad

ScrollPanel


EditField

Create ScrollPanel & add EditField

Overlay keypad scrolls up from the bottom of the ScrollPanel

Resize the list to fit the resized client area

ScrollPanel

Overlay Keypad

39



40

1. Create the UI with the UI Builder

2. Handle Events


Create the UI with the UI Builder

41

ScrollPanel

Create ScrollPanel, add EditField & List

SlidableList


Create the UI with the UI Builder

42

Set Overlay keypad properties– Command Buttons

pEdit->SetOverlayKeypadCommandButton(COMMAND_BUTTON_POSITION_LEFT,

L“Done", ID_COMMAND_BUTTON_LEFT);pEdit->SetOverlayKeypadCommandButton(COMMAND_BUTTON_POSITION_RIGHT,

L“Cancel", ID_COMMAND_BUTTON_RIGHT);


Handle EventsITextEventListener (EditField)

Command Button – IActionEventListener (EditField)

virtual void OnTextValueChangeCanceled(…){}virtual void OnTextValueChanged(…) {

// ex. Set searched content to list}

voidOnActionPerformed(const Control& source, int actionId){switch(actionId){

case ID_COMMAND_BUTTON_RIGHT:pScroll->CloseOverlayWindow();

break;}

}

43


Demo [Music App: Search]

Demo Sequence:– Show EditField and Overlay keypad– Enter text and perform search

44


Summary

45


What we’ve learned

46

List Basics

CustomList Format & Item– Key for customizing list UI

SlidableList– Understanding memory saving property of this

list as well as how to handle memory loadingText Input– EditField, Overlay keypad


Find out more

Tutorial– bada Tutorial.UI & Graphics.pdf

bada Application UI Guide

Samples – UiControls– AnimationApp

47

advanced ui large custom list with search

Education

samsung electronics

item format

list item

drawing custom element

custom element string

elements event

large custom list

bitmaps copyright