advanced ui large custom list with search

Advanced UI: Large Custom List with Search

Overview (Music App)

Contents

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

1. List Basics

2. CustomList Format & Item, the key to customization

3. SlidableList for handling a large list

List Basics (1/3)

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)

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

pList->AddItemEventListener(*pItemEventListener);

1. List Basics

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

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

Custom Element

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

void SetElementEventEnabled(int elementId, bool enable)

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

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

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)

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

Custom Element

Create Item Format: Code stubStep 3: Enable Element Event

pItemFormat->SetElementEventEnabled(ID_FORMAT_CUSTOM, true);

Event status

Event status is false Event status is true

Item’s event invoked Element’s event invoked

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

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

Set Elements (1/3)

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

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)String (size:25)

Custom Element

2. Custom Drawing

3. Set elements to a List Item

Interaction (1/2)

ICustomItemEventListener

When an Item is clicked, OnItemStateChanged() is invoked

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

Click!- Element -

Event status is true

1. List Basics

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

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

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

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

OnLoadToTopRequested(… int itemIndex, int numItems)

Interaction

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

Item id for this item

Interaction

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

/* unload related resources */

OnUnloadItemRequested(… int itemIndex)

Unloaded

Demo [Music App: SlidableList]

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

Search UI

EditField, Overlay Keypad

ScrollPanel

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

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

1. Create the UI with the UI Builder

2. Handle Events

Create the UI with the UI Builder

ScrollPanel

Create ScrollPanel, add EditField & List

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

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 loadingText 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

samsung electronics

item format

list item

drawing custom element

custom element string

elements event

large custom list

bitmaps copyright

Education

search is the ui

search is the new ui

abap_creating custom search help for transaction mm03

interoperability.blob.core.windows.netinteroperability.blob.core.windows.net/files/ms-custom… ·...

opensearch-geo -...

brain word search - ui health care

how to build ui custom components - sap · how to... build...

custom search 85x11

the ribbon ui and custom actions in sharepoint 2010

microsoft word - enhance the crm webclient ui with custom...

agility erp custom desktop + mobile ui examples with the...

add ecc custom fields in web ui using lord

custom & native ui frameworks for android · custom &...

ux/ui features & benefits - daxtra · ux/ui features &...

vcenter operations manager 5.8.5 administration guide...

search hubs and custom search engines (ili2007)

grantsgov overview agenda grantsgov overview environments...

vcops 57 custom ui admin guide

hacking lucene for custom search results

building a custom ui control with d3 - 2015 esri devoloper...