Enviar pesquisa
Carregar
advanced ui large custom list with search
•
0 gostou
•
582 visualizações
Samsung
Seguir
advanced ui large custom list with search
Leia menos
Leia mais
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 48
Baixar agora
Baixar para ler offline
Recomendados
Sfe time robbers
Sfe time robbers
Arif Mahmood
How Edmodo Uses Splunk For Real-Time Tag-Based Reporting of AWS Billing and U...
How Edmodo Uses Splunk For Real-Time Tag-Based Reporting of AWS Billing and U...
cloudcontroller
Hd dto dvd
Hd dto dvd
Thomas Klose
For nada
For nada
OMNIE
How energy visualisation can work for you
How energy visualisation can work for you
Nottingham Trent University
Leadership
Leadership
Arif Mahmood
Web. 2.0 Why Should I Care
Web. 2.0 Why Should I Care
Tom Finan
Oh no! My website has been hacked and why that was a good thing
Oh no! My website has been hacked and why that was a good thing
Valentin Vesa
Recomendados
Sfe time robbers
Sfe time robbers
Arif Mahmood
How Edmodo Uses Splunk For Real-Time Tag-Based Reporting of AWS Billing and U...
How Edmodo Uses Splunk For Real-Time Tag-Based Reporting of AWS Billing and U...
cloudcontroller
Hd dto dvd
Hd dto dvd
Thomas Klose
For nada
For nada
OMNIE
How energy visualisation can work for you
How energy visualisation can work for you
Nottingham Trent University
Leadership
Leadership
Arif Mahmood
Web. 2.0 Why Should I Care
Web. 2.0 Why Should I Care
Tom Finan
Oh no! My website has been hacked and why that was a good thing
Oh no! My website has been hacked and why that was a good thing
Valentin Vesa
2011 How to Prepare for the First Avenue Career & Grad School Fair
2011 How to Prepare for the First Avenue Career & Grad School Fair
Mary Beth Snell
자바스터디 3 2
자바스터디 3 2
jangpd007
Innovate or die
Innovate or die
Erna Winters
Educatieve spelen voor upload naar moodle
Educatieve spelen voor upload naar moodle
CVO-SSH
Adventures with Raspberry Pi and Twitter API
Adventures with Raspberry Pi and Twitter API
Luis Cipriani
G5 Nuttal group2
G5 Nuttal group2
vduvieusart
Deeper understanding through Google Earth
Deeper understanding through Google Earth
Kevin Amboe
GLOBALIZING TORTURE: CIA SECRET DETENTION AND EXTRAORDINARY RENDITION
GLOBALIZING TORTURE: CIA SECRET DETENTION AND EXTRAORDINARY RENDITION
Valentin Vesa
안드로이드스터디 7
안드로이드스터디 7
jangpd007
Usb may coi truong
Usb may coi truong
Nguyen Trung
Pictures of students in sw 475
Pictures of students in sw 475
pegart
Press release world memory championship 2013
Press release world memory championship 2013
Yudi Lesmana
Ppt podcast
Ppt podcast
JessWalker1
Document Management Met Share Point2010
Document Management Met Share Point2010
Raymond
The Deep Roots of the Oak Regeneration Problem
The Deep Roots of the Oak Regeneration Problem
Cary Institute of Ecosystem Studies
managing your content
managing your content
Samsung
Android Architecture Components with Kotlin
Android Architecture Components with Kotlin
Adit Lal
iOS Einstieg und Ausblick
iOS Einstieg und Ausblick
Stefan Scheidt
Session4 J2ME Mobile Information Device Profile(MIDP) Events
Session4 J2ME Mobile Information Device Profile(MIDP) Events
muthusvm
12 High Level UI Event Handling
12 High Level UI Event Handling
corneliuskoo
ioS Einstieg und Ausblick - Mobile DevCon Hamburg 2011 - OPITZ CONSULTING - S...
ioS Einstieg und Ausblick - Mobile DevCon Hamburg 2011 - OPITZ CONSULTING - S...
OPITZ CONSULTING Deutschland
Component interface
Component interface
JAYAARC
Mais conteúdo relacionado
Destaque
2011 How to Prepare for the First Avenue Career & Grad School Fair
2011 How to Prepare for the First Avenue Career & Grad School Fair
Mary Beth Snell
자바스터디 3 2
자바스터디 3 2
jangpd007
Innovate or die
Innovate or die
Erna Winters
Educatieve spelen voor upload naar moodle
Educatieve spelen voor upload naar moodle
CVO-SSH
Adventures with Raspberry Pi and Twitter API
Adventures with Raspberry Pi and Twitter API
Luis Cipriani
G5 Nuttal group2
G5 Nuttal group2
vduvieusart
Deeper understanding through Google Earth
Deeper understanding through Google Earth
Kevin Amboe
GLOBALIZING TORTURE: CIA SECRET DETENTION AND EXTRAORDINARY RENDITION
GLOBALIZING TORTURE: CIA SECRET DETENTION AND EXTRAORDINARY RENDITION
Valentin Vesa
안드로이드스터디 7
안드로이드스터디 7
jangpd007
Usb may coi truong
Usb may coi truong
Nguyen Trung
Pictures of students in sw 475
Pictures of students in sw 475
pegart
Press release world memory championship 2013
Press release world memory championship 2013
Yudi Lesmana
Ppt podcast
Ppt podcast
JessWalker1
Document Management Met Share Point2010
Document Management Met Share Point2010
Raymond
The Deep Roots of the Oak Regeneration Problem
The Deep Roots of the Oak Regeneration Problem
Cary Institute of Ecosystem Studies
Destaque
(15)
2011 How to Prepare for the First Avenue Career & Grad School Fair
2011 How to Prepare for the First Avenue Career & Grad School Fair
자바스터디 3 2
자바스터디 3 2
Innovate or die
Innovate or die
Educatieve spelen voor upload naar moodle
Educatieve spelen voor upload naar moodle
Adventures with Raspberry Pi and Twitter API
Adventures with Raspberry Pi and Twitter API
G5 Nuttal group2
G5 Nuttal group2
Deeper understanding through Google Earth
Deeper understanding through Google Earth
GLOBALIZING TORTURE: CIA SECRET DETENTION AND EXTRAORDINARY RENDITION
GLOBALIZING TORTURE: CIA SECRET DETENTION AND EXTRAORDINARY RENDITION
안드로이드스터디 7
안드로이드스터디 7
Usb may coi truong
Usb may coi truong
Pictures of students in sw 475
Pictures of students in sw 475
Press release world memory championship 2013
Press release world memory championship 2013
Ppt podcast
Ppt podcast
Document Management Met Share Point2010
Document Management Met Share Point2010
The Deep Roots of the Oak Regeneration Problem
The Deep Roots of the Oak Regeneration Problem
Semelhante a advanced ui large custom list with search
managing your content
managing your content
Samsung
Android Architecture Components with Kotlin
Android Architecture Components with Kotlin
Adit Lal
iOS Einstieg und Ausblick
iOS Einstieg und Ausblick
Stefan Scheidt
Session4 J2ME Mobile Information Device Profile(MIDP) Events
Session4 J2ME Mobile Information Device Profile(MIDP) Events
muthusvm
12 High Level UI Event Handling
12 High Level UI Event Handling
corneliuskoo
ioS Einstieg und Ausblick - Mobile DevCon Hamburg 2011 - OPITZ CONSULTING - S...
ioS Einstieg und Ausblick - Mobile DevCon Hamburg 2011 - OPITZ CONSULTING - S...
OPITZ CONSULTING Deutschland
Component interface
Component interface
JAYAARC
Android101 : Introduksjon til Android
Android101 : Introduksjon til Android
Truls Jørgensen
Flex3 Deep Dive Final
Flex3 Deep Dive Final
RJ Owen
Session 3 J2ME Mobile Information Device Profile(MIDP) API
Session 3 J2ME Mobile Information Device Profile(MIDP) API
muthusvm
iOS Einstieg und Ausblick - Mobile DevCon 2011 - OPITZ CONSULTING -Stefan Sch...
iOS Einstieg und Ausblick - Mobile DevCon 2011 - OPITZ CONSULTING -Stefan Sch...
OPITZ CONSULTING Deutschland
Android User Interface: Basic Form Widgets
Android User Interface: Basic Form Widgets
Ahsanul Karim
Wicket KT part 2
Wicket KT part 2
stuq
Creating an Uber Clone - Part XXXX - Transcript.pdf
Creating an Uber Clone - Part XXXX - Transcript.pdf
ShaiAlmog1
"R & Text Analytics" (15 January 2013)
"R & Text Analytics" (15 January 2013)
Portland R User Group
AndroidLab_IT.pptx
AndroidLab_IT.pptx
AhmedKedir9
Cross Platform Mobile App Development - An Introduction to Sencha Touch
Cross Platform Mobile App Development - An Introduction to Sencha Touch
Folio3 Software
Android Bootcamp Tanzania:understanding ui in_android
Android Bootcamp Tanzania:understanding ui in_android
Denis Minja
Android introduction by vidya topa
Android introduction by vidya topa
Vidya Topa Institute of Professional Studies
Introduction to XAML and its features
Introduction to XAML and its features
Abhishek Sur
Semelhante a advanced ui large custom list with search
(20)
managing your content
managing your content
Android Architecture Components with Kotlin
Android Architecture Components with Kotlin
iOS Einstieg und Ausblick
iOS Einstieg und Ausblick
Session4 J2ME Mobile Information Device Profile(MIDP) Events
Session4 J2ME Mobile Information Device Profile(MIDP) Events
12 High Level UI Event Handling
12 High Level UI Event Handling
ioS Einstieg und Ausblick - Mobile DevCon Hamburg 2011 - OPITZ CONSULTING - S...
ioS Einstieg und Ausblick - Mobile DevCon Hamburg 2011 - OPITZ CONSULTING - S...
Component interface
Component interface
Android101 : Introduksjon til Android
Android101 : Introduksjon til Android
Flex3 Deep Dive Final
Flex3 Deep Dive Final
Session 3 J2ME Mobile Information Device Profile(MIDP) API
Session 3 J2ME Mobile Information Device Profile(MIDP) API
iOS Einstieg und Ausblick - Mobile DevCon 2011 - OPITZ CONSULTING -Stefan Sch...
iOS Einstieg und Ausblick - Mobile DevCon 2011 - OPITZ CONSULTING -Stefan Sch...
Android User Interface: Basic Form Widgets
Android User Interface: Basic Form Widgets
Wicket KT part 2
Wicket KT part 2
Creating an Uber Clone - Part XXXX - Transcript.pdf
Creating an Uber Clone - Part XXXX - Transcript.pdf
"R & Text Analytics" (15 January 2013)
"R & Text Analytics" (15 January 2013)
AndroidLab_IT.pptx
AndroidLab_IT.pptx
Cross Platform Mobile App Development - An Introduction to Sencha Touch
Cross Platform Mobile App Development - An Introduction to Sencha Touch
Android Bootcamp Tanzania:understanding ui in_android
Android Bootcamp Tanzania:understanding ui in_android
Android introduction by vidya topa
Android introduction by vidya topa
Introduction to XAML and its features
Introduction to XAML and its features
Mais de Samsung
Making Your Apps More Sociable
Making Your Apps More Sociable
Samsung
introduction of application certification
introduction of application certification
Samsung
samsung apps for bada
samsung apps for bada
Samsung
embedding web browser in your app
embedding web browser in your app
Samsung
sounds in bada
sounds in bada
Samsung
bada basics fundamentals & ui
bada basics fundamentals & ui
Samsung
Mais de Samsung
(6)
Making Your Apps More Sociable
Making Your Apps More Sociable
introduction of application certification
introduction of application certification
samsung apps for bada
samsung apps for bada
embedding web browser in your app
embedding web browser in your app
sounds in bada
sounds in bada
bada basics fundamentals & ui
bada basics fundamentals & ui
Último
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
Poonam Aher Patil
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
Dr. Sarita Anand
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
MaryamAhmad92
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
marlenawright1
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Pooja Bhuva
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
MaritesTamaniVerdade
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University of Engineering & Technology, Jamshoro
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
Jisc
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
Jisc
Understanding Accommodations and Modifications
Understanding Accommodations and Modifications
MJDuyan
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Denish Jangid
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
Mebane Rash
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
Nguyen Thanh Tu Collection
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
Esquimalt MFRC
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
Nirmal Dwivedi
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
Celine George
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
christianmathematics
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
pradhanghanshyam7136
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
AreebaZafar22
Último
(20)
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
Understanding Accommodations and Modifications
Understanding Accommodations and Modifications
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
advanced ui large custom list with search
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.
Baixar agora