advanced ui large custom list with search

  • 1,656 views
Uploaded on

advanced ui large custom list with search

advanced ui large custom list with search

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,656
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
44
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Advanced UI: Large Custom List with Search Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved.
  • 2. Overview (Music App) Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 2
  • 3. 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 Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 3
  • 4. List 1. List Basics 2. CustomList Format & Item, the key to customization 3. SlidableList for handling a large list Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 4
  • 5. List Basics (1/3) List CustomList/ GroupedList/ SlidableList SlidableGroupedList ExpandableList IconList Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 5
  • 6. 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 Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 6
  • 7. 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); Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 7
  • 8. List 1. List Basics 2. CustomList Format & Item, the key to customization 3. SlidableList for handling a large list Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 8
  • 9. Implementation Steps 1. Create Item Format 2. Custom Drawing 3. Set Elements to a List Item 4. Handle Interaction Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 9
  • 10. 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) Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 10
  • 11. 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) Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 11
  • 12. Create Item Format: Code stub Step 1: Create a CustomListItemFormat // Create ItemFormat CustomListItemFormat* pItemFormat = new CustomListItemFormat(); pItemFormat->Construct(); Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 12
  • 13. Create Item Format: Code stub 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) Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 13
  • 14. Create Item Format: Code stub 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 Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 14
  • 15. Implementation Steps 1. Create Item Format 2. Custom Drawing 3. Set Elements to a List Item 4. Handle Interaction Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 15
  • 16. 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 Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 16
  • 17. Implementation Steps 1. Create Item Format 2. Custom Drawing 3. Set Elements to a List Item 4. Handle Interaction Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 17
  • 18. 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) Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 18
  • 19. Set Elements (2/3) Step 1: Create a CustomListItem CustomListItem* pItem = new CustomListItem(); pItem->Construct(100); pItem->SetItemFormat(*pItemFormat); Item height Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 19
  • 20. 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) Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 20
  • 21. Implementation Steps 1. Create Item Format 2. Custom Drawing 3. Set elements to a List Item 4. Handle Interaction Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 21
  • 22. Interaction (1/2) ICustomItemEventListener When an Item is clicked, OnItemStateChanged() is invoked void OnItemStateChanged(…,int itemId, ItemStatus status ) { switch (itemId) Click! { - Item - case ID_ITEM1: break; case ID_ITEM2: break; } Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 22
  • 23. Interaction (2/2) ICustomItemEventListener When an Element is clicked, OnItemStateChanged() is invoked 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; … } Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 23
  • 24. List 1. List Basics 2. CustomList Format & Item, the key to customization 3. SlidableList for handling a large list Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 24
  • 25. 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. Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 25
  • 26. Implementation Steps 1. Set SlidableList Properties – Item count, total height of list 2. Interaction Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 26
  • 27. Implementation Steps 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 Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 27
  • 28. 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); Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 28
  • 29. Implementation steps 1. Set property – Item count, total height 2. Interaction Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 29
  • 30. Interaction When the list is scrolled down, the list starts requesting loading of items into memory Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 30
  • 31. Interaction When the list is scrolled down, the list starts requesting loading of items into memory OnLoadToTopRequested(… int itemIndex, int numItems) itemIndex: index of item to be loaded numItems: requested number of items Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 31
  • 32. Interaction When the list is scrolled down, the list starts requesting loading of items into memory OnLoadToTopRequested(… int itemIndex, int numItems) for(int i = itemIndex; i < numItems; i--){ /* load related resources */ pSlidableList-> LoadItemToTop(*pItem, itemId); } Item id for this item Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 32
  • 33. Interaction When the list is scrolled down, the list starts requesting loading of items into memory OnLoadToTopRequested(… int itemIndex, int numItems) for(int i = itemIndex; i < numItems; i--){ /* load related resources */ pSlidableList-> LoadItemToTop(*pItem, itemId); } Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 33
  • 34. Interaction When the items in memory are not required they are unloaded and application is given notice OnUnloadItemRequested(… int itemIndex) /* unload related resources */ Unloaded Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 34
  • 35. Demo [Music App: SlidableList] Demo Sequence: – Show SlidableList – Scroll down/up SlidableList – Interact with Custom Element Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 35
  • 36. Search UI EditField, Overlay Keypad Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 36
  • 37. 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 Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 37
  • 38. EditField ScrollPanel v Editing area EditField – EditField – EditArea Overlay Keypad Keypads available – Overlay keypad – Fullscreen keypad Command Button Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 38
  • 39. 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 Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 39
  • 40. Implementation Steps 1. Create the UI with the UI Builder 2. Handle Events Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 40
  • 41. Create the UI with the UI Builder Create ScrollPanel, add EditField & List ScrollPanel SlidableList Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 41
  • 42. 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); Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 42
  • 43. 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; } } Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 43
  • 44. Demo [Music App: Search] Demo Sequence: – Show EditField and Overlay keypad – Enter text and perform search Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 44
  • 45. Summary Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 45
  • 46. 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 Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 46
  • 47. Find out more Tutorial – bada Tutorial.UI & Graphics.pdf bada Application UI Guide Samples – UiControls – AnimationApp Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved. 47
  • 48. Dive into Copyright © 2010 Samsung Electronics Co., Ltd. All rights reserved.