Suche senden
Hochladen
advanced ui large custom list with search
•
0 gefällt mir
•
582 views
Samsung
Folgen
advanced ui large custom list with search
Weniger lesen
Mehr lesen
Bildung
Melden
Teilen
Melden
Teilen
1 von 48
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
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
Empfohlen
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
Weitere ähnliche Inhalte
Andere mochten auch
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
Andere mochten auch
(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
Ähnlich wie 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
Ähnlich wie 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
Mehr von 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
Mehr von 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
Kürzlich hochgeladen
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
iammrhaywood
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
Sabitha Banu
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17
Celine George
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
Sarwono Sutikno, Dr.Eng.,CISA,CISSP,CISM,CSX-F
Roles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in Pharmacovigilance
SamikshaHamane
Grade 9 Q4-MELC1-Active and Passive Voice.pptx
Grade 9 Q4-MELC1-Active and Passive Voice.pptx
ChelloAnnAsuncion2
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
phamnguyenenglishnb
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
thorishapillay1
Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...
Jisc
Judging the Relevance and worth of ideas part 2.pptx
Judging the Relevance and worth of ideas part 2.pptx
SherlyMaeNeri
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
9953056974 Low Rate Call Girls In Saket, Delhi NCR
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
Conquiztadors- the Quiz Society of Sri Venkateswara College
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
navabharathschool99
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Celine George
OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...
Dr. Mazin Mohamed alkathiri
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
mary850239
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
MiaBumagat1
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
Dr.Ibrahim Hassaan
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
Conquiztadors- the Quiz Society of Sri Venkateswara College
Kürzlich hochgeladen
(20)
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
Roles & Responsibilities in Pharmacovigilance
Roles & Responsibilities in Pharmacovigilance
Grade 9 Q4-MELC1-Active and Passive Voice.pptx
Grade 9 Q4-MELC1-Active and Passive Voice.pptx
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...
Judging the Relevance and worth of ideas part 2.pptx
Judging the Relevance and worth of ideas part 2.pptx
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.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.
Jetzt herunterladen