advanced ui large custom list with search

Advanced UI:
Large Custom List with
Search

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

Overview (Music App)

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

Contents
List
– List Basics
– CustomList Format & Item, the key to
customization
– SlidableList for handling a large list
Search UI
– EditField, Overlay keypad
Summary

*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


List Basics (1/3)

List CustomList/ GroupedList/
SlidableList 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
IItemEventListener
OnItemStateChanged(…, int index, int itemId,
ItemStatus status)

Click


List Basics (3/3)
Step 1: Create a List
pList = new List();
pList->Construct(Rectangle(0, 0, 480, 800),
/* ListStyle */, /* ListItemFormat */,…);

Step 2: Add an ItemEventListener
pList->AddItemEventListener(*pItemEventListener);

Step 3: Add items
pList->AddItem(L”Item title”, …, itemId);


List
1. List Basics
large list


Implementation Steps
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)
Custom
Element String Element (size:25)


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

Item’s event invoked Element’s event invoked

vs

Event status set to false Event status set to true

void SetElementEventEnabled(int elementId, bool enable)


Create Item Format: Code stub
Step 1: Create a CustomListItemFormat
// Create ItemFormat
CustomListItemFormat* pItemFormat =
new CustomListItemFormat();
pItemFormat->Construct();


Step 2: Define Elements’ format
pItemFormat->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);

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

Bound
(0,0,100,100)

Step 3: Enable Element Event Event status

pItemFormat->
SetElementEventEnabled(ID_FORMAT_CUSTOM, true);

Item’s event invoked Element’s event invoked

vs

Event status is false Event status is true


2. Custom Drawing


Custom Drawing
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

2. Custom Drawing


Set Elements (1/3)
Composed of one or more elements
– Bitmaps, Texts and Custom
Elements

CustomListItem
CustomListItemFormat
String (size:50)
Custom
Element String (size:25)

SetValue(percent value: 80)

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

Item height


Set Elements (3/3)
Step 2: Set Elements to CustomListItem
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)
Custom
Element String (size:25)


2. Custom Drawing
3. Set elements to a List Item


Interaction (1/2)
ICustomItemEventListener
When an Item is clicked,
void
OnItemStateChanged(…,int itemId,
ItemStatus status )
{
switch (itemId)
Click! {
- Item - case ID_ITEM1:
break;

case ID_ITEM2:
break;
}

Interaction (2/2)
ICustomItemEventListener
When an Element is clicked,
Event status is true void
OnItemStateChanged(…,int itemId,
int elementId, ItemStatus status )
{
switch (elementId)
Click! {
- Element - case ID_FORMAT_CUSTOM:
// ex. pItem->SetValue(percentage);
// ex. Play mp3
break;
…
}

List
1. List Basics
large list


SlidableList
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.

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


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
Step 1: Create a SlidableList
pSlidableList = new SlidableList();
pSlidableList->Construct(Rectangle(0, 0, 480, 600),
/* CustomListStyle */);

Step 2: Add the Listener
pSlidableList->
AddSlidableListEventListener(*pSlidableListEventListener);

Step 3: Set Properties
SetItemCountAndHeight(ITEM_COUNT, TOTAL_HEIGHT);


Implementation steps
1. Set property
– Item count, total height
2. Interaction


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


Interaction

OnLoadToTopRequested(… int itemIndex,
int numItems)

itemIndex: index of item to be loaded
numItems: requested number of items


Interaction

int numItems)

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

Item id for this item


Interaction

int numItems)

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


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

OnUnloadItemRequested(… int itemIndex)

/* unload related resources */

Unloaded


Demo [Music App: SlidableList]

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


Search UI
EditField, Overlay Keypad


ScrollPanel ScrollPanel

Overlay keypad works
together with a ScrollPanel
ScrollPanel
ScrollPanel
– 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

EditField ScrollPanel

v
Editing area EditField

– EditField
– EditArea
Overlay Keypad
Keypads available
– Overlay keypad
– Fullscreen keypad

Command Button


EditField
ScrollPanel

Create ScrollPanel & add
EditField
Overlay keypad scrolls up
from the bottom of the
ScrollPanel Overlay Keypad

Resize the list to fit the
resized client area


1. Create the UI with the UI Builder
2. Handle Events


Create the UI with the UI Builder
Create ScrollPanel, add EditField & List

ScrollPanel
SlidableList


Create the UI with the UI Builder
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 Events
ITextEventListener (EditField)
virtual void OnTextValueChangeCanceled(…){}
virtual void OnTextValueChanged(…) {
// ex. Set searched content to list
}

Command Button
– IActionEventListener (EditField)
void
OnActionPerformed(const Control& source, int actionId){
switch(actionId){
case ID_COMMAND_BUTTON_RIGHT:
pScroll->CloseOverlayWindow();
break;
}
}


Demo [Music App: Search]

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


Summary


What we’ve learned
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 loading
Text Input
– EditField, Overlay keypad


Find out more
Tutorial
– bada Tutorial.UI & Graphics.pdf
bada Application UI Guide
Samples
– UiControls
– AnimationApp


advanced ui large custom list with search

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

Similar to advanced ui large custom list with search

Similar to advanced ui large custom list with search (20)

More from Samsung

More from Samsung (6)

Recently uploaded

Recently uploaded (20)

advanced ui large custom list with search