SlideShare a Scribd company logo

Creating an Uber Clone - Part IX.pdf

S
ShaiAlmog1

The document details the implementation of a destination UI for an Uber clone using Codename One. It describes how to create multibuttons for adding home, work, and saved places, along with historical navigation elements. Additionally, it includes code snippets for managing focus listeners and animations within the user interface.

Technology
1 of 28
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Creating an Uber Clone - Part IX
Destination UI © Codename One 2017 all rights reserved
Destination UI © Codename One 2017 all rights reserved
Destination UI © Codename One 2017 all rights reserved
private void showToNavigationBar(Container parentLayer) { MultiButton addHome = new MultiButton("Add Home"); addHome.setUIID("Container"); addHome.setUIIDLine1("WhereToButtonLine1"); addHome.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(addHome, FontImage.MATERIAL_HOME); MultiButton addWork = new MultiButton("Add Work"); addWork.setUIID("Container"); addWork.setUIIDLine1("WhereToButtonLine1"); addWork.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(addWork, FontImage.MATERIAL_WORK); MultiButton savedPlaces = new MultiButton("Saved Places"); savedPlaces.setUIID("Container"); savedPlaces.setUIIDLine1("WhereToButtonLineNoBorder"); savedPlaces.setEmblemUIID("WhereToButtonLineNoBorder"); savedPlaces.setIconUIID("WhereToButtonIcon"); savedPlaces.setEmblem(FontImage.createMaterial( FontImage.MATERIAL_NAVIGATE_NEXT, savedPlaces.getIconComponent().getUnselectedStyle())); FontImage.setMaterialIcon(savedPlaces, FontImage.MATERIAL_STAR_BORDER); Destination UI
savedPlaces.setEmblem(FontImage.createMaterial( FontImage.MATERIAL_NAVIGATE_NEXT, savedPlaces.getIconComponent().getUnselectedStyle())); FontImage.setMaterialIcon(savedPlaces, FontImage.MATERIAL_STAR_BORDER); Label whereSeparator = new Label("", "WhereSeparator"); whereSeparator.setShowEvenIfBlank(true); MultiButton history1 = new MultiButton("Mikve Yisrael Str..."); history1.setUIID("Container"); history1.setUIIDLine1("WhereToButtonLine1"); history1.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(history1, FontImage.MATERIAL_HISTORY); Container result = BoxLayout.encloseY(addHome, addWork, savedPlaces, whereSeparator, history1); result.setUIID("Form"); result.setScrollableY(true); result.setScrollVisible(false); result.setY(getDisplayHeight()); Destination UI
savedPlaces.setEmblem(FontImage.createMaterial( FontImage.MATERIAL_NAVIGATE_NEXT, savedPlaces.getIconComponent().getUnselectedStyle())); FontImage.setMaterialIcon(savedPlaces, FontImage.MATERIAL_STAR_BORDER); Label whereSeparator = new Label("", "WhereSeparator"); whereSeparator.setShowEvenIfBlank(true); MultiButton history1 = new MultiButton("Mikve Yisrael Str..."); history1.setUIID("Container"); history1.setUIIDLine1("WhereToButtonLine1"); history1.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(history1, FontImage.MATERIAL_HISTORY); Container result = BoxLayout.encloseY(addHome, addWork, savedPlaces, whereSeparator, history1); result.setUIID("Form"); result.setScrollableY(true); result.setScrollVisible(false); result.setY(getDisplayHeight()); Destination UI
savedPlaces.setEmblem(FontImage.createMaterial( FontImage.MATERIAL_NAVIGATE_NEXT, savedPlaces.getIconComponent().getUnselectedStyle())); FontImage.setMaterialIcon(savedPlaces, FontImage.MATERIAL_STAR_BORDER); Label whereSeparator = new Label("", "WhereSeparator"); whereSeparator.setShowEvenIfBlank(true); MultiButton history1 = new MultiButton("Mikve Yisrael Str..."); history1.setUIID("Container"); history1.setUIIDLine1("WhereToButtonLine1"); history1.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(history1, FontImage.MATERIAL_HISTORY); Container result = BoxLayout.encloseY(addHome, addWork, savedPlaces, whereSeparator, history1); result.setUIID("Form"); result.setScrollableY(true); result.setScrollVisible(false); result.setY(getDisplayHeight()); Destination UI
Label whereSeparator = new Label("", "WhereSeparator"); whereSeparator.setShowEvenIfBlank(true); MultiButton history1 = new MultiButton("Mikve Yisrael Str..."); history1.setUIID("Container"); history1.setUIIDLine1("WhereToButtonLine1"); history1.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(history1, FontImage.MATERIAL_HISTORY); Container result = BoxLayout.encloseY(addHome, addWork, savedPlaces, whereSeparator, history1); result.setUIID("Form"); result.setScrollableY(true); result.setScrollVisible(false); result.setY(getDisplayHeight()); result.setWidth(getDisplayWidth()); result.setHeight(result.getPreferredH()); parentLayer.add(CENTER, result); parentLayer.animateLayout(200); } Destination UI
WhereToButtonLine1 © Codename One 2017 all rights reserved
WhereToButtonLine1 © Codename One 2017 all rights reserved
WhereToButtonLine1 © Codename One 2017 all rights reserved
WhereToButtonLine1 © Codename One 2017 all rights reserved
WhereToButtonLine1 © Codename One 2017 all rights reserved
WhereToButtonIcon © Codename One 2017 all rights reserved
WhereToButtonIcon © Codename One 2017 all rights reserved
WhereToButtonNoBorder © Codename One 2017 all rights reserved
WhereToButtonNoBorder © Codename One 2017 all rights reserved
WhereSeparator © Codename One 2017 all rights reserved
WhereSeparator © Codename One 2017 all rights reserved
WhereSeparator © Codename One 2017 all rights reserved
from.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(square); if(layer.getComponentCount() > 1) { Component c = layer.getComponentAt(1); c.setY(getDisplayHeight()); layer.animateUnlayout(200, 150, () -> { c.remove(); revalidate(); }); } } public void focusLost(Component cmp) { fromSelected.setIcon(circle); } }); to.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(circle); toSelected.setIcon(square); showToNavigationBar(layer); } public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); Focus Listener
from.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(square); if(layer.getComponentCount() > 1) { Component c = layer.getComponentAt(1); c.setY(getDisplayHeight()); layer.animateUnlayout(200, 150, () -> { c.remove(); revalidate(); }); } } public void focusLost(Component cmp) { fromSelected.setIcon(circle); } }); to.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(circle); toSelected.setIcon(square); showToNavigationBar(layer); } public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); Focus Listener
from.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(square); if(layer.getComponentCount() > 1) { Component c = layer.getComponentAt(1); c.setY(getDisplayHeight()); layer.animateUnlayout(200, 150, () -> { c.remove(); revalidate(); }); } } public void focusLost(Component cmp) { fromSelected.setIcon(circle); } }); to.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(circle); toSelected.setIcon(square); showToNavigationBar(layer); } public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); Focus Listener
from.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(square); if(layer.getComponentCount() > 1) { Component c = layer.getComponentAt(1); c.setY(getDisplayHeight()); layer.animateUnlayout(200, 150, () -> { c.remove(); revalidate(); }); } } public void focusLost(Component cmp) { fromSelected.setIcon(circle); } }); to.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(circle); toSelected.setIcon(square); showToNavigationBar(layer); } public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); Focus Listener
from.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(square); if(layer.getComponentCount() > 1) { Component c = layer.getComponentAt(1); c.setY(getDisplayHeight()); layer.animateUnlayout(200, 150, () -> { c.remove(); revalidate(); }); } } public void focusLost(Component cmp) { fromSelected.setIcon(circle); } }); to.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(circle); toSelected.setIcon(square); showToNavigationBar(layer); } public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); Focus Listener
back.addActionListener(e -> { navigationToolbar.setY(-navigationToolbar.getHeight()); if(layer.getComponentCount() > 1) { layer.getComponentAt(1).setY(getDisplayHeight()); } navigationToolbar.getParent().animateUnlayout(200, 120, () -> { layer.removeAll(); revalidate(); }); }); Back
navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { if(layer.getComponentCount() > 1) { g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight()); } g1.drawImage(dropShadow, rect.getX(), rect.getY() + rect.getHeight() - dropShadow.getHeight(), rect.getWidth(), dropShadow.getHeight()); g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight() - dropShadow.getHeight() / 2); } else { g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight()); } g1.setColor(0xa4a4ac); g1.setAntiAliased(true); int x = fromSelected.getAbsoluteX() + fromSelected.getWidth() / 2 - 1; int y = fromSelected.getAbsoluteY() + fromSelected.getHeight() / 2 + circle.getHeight() / 2; g1.fillRect(x, y, 2, toSelected.getAbsoluteY() - y + toSelected.getHeight() / 2 - circle.getHeight() / 2); }); Background Painter

More Related Content

PDF
Creating an Uber Clone - Part VIII.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XXIII - Transcript.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part VIII - Transcript.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XXIII.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XIX.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part IX - Transcript.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XXI.pdf
ShaiAlmog1
 
PDF
Initial UI Mockup - Part 2.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part VIII.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XXIII - Transcript.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part VIII - Transcript.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XXIII.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XIX.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part IX - Transcript.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XXI.pdf
ShaiAlmog1
 
Initial UI Mockup - Part 2.pdf
ShaiAlmog1
 

Similar to Creating an Uber Clone - Part IX.pdf (15)

PDF
Creating an Uber Clone - Part XXI - Transcript.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XX - Transcript.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XXIV.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XX.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XXII.pdf
ShaiAlmog1
 
PDF
Adapting to Tablets and Desktops - Part 3 - Transcript.pdf
ShaiAlmog1
 
PDF
Miscellaneous Features - Part 3 - Transcript.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XIX - Transcript.pdf
ShaiAlmog1
 
PDF
Initial UI Mockup - Part 2 - Transcript.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XXX.pdf
ShaiAlmog1
 
KEY
Design Patterns for Tablets and Smartphones
Michael Galpin
 
PDF
Building iPad apps with Flex - 360Flex
danielwanja
 
PDF
Creating an Uber Clone - Part XXIV - Transcript.pdf
ShaiAlmog1
 
PPTX
Android 3
Robert Cooper
 
PDF
Creating an Uber Clone - Part XXXIX.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XXI - Transcript.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XX - Transcript.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XXIV.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XX.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XXII.pdf
ShaiAlmog1
 
Adapting to Tablets and Desktops - Part 3 - Transcript.pdf
ShaiAlmog1
 
Miscellaneous Features - Part 3 - Transcript.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XIX - Transcript.pdf
ShaiAlmog1
 
Initial UI Mockup - Part 2 - Transcript.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XXX.pdf
ShaiAlmog1
 
Design Patterns for Tablets and Smartphones
Michael Galpin
 
Building iPad apps with Flex - 360Flex
danielwanja
 
Creating an Uber Clone - Part XXIV - Transcript.pdf
ShaiAlmog1
 
Android 3
Robert Cooper
 
Creating an Uber Clone - Part XXXIX.pdf
ShaiAlmog1
 

More from ShaiAlmog1 (20)

PDF
The Duck Teaches Learn to debug from the masters. Local to production- kill ...
ShaiAlmog1
 
PDF
create-netflix-clone-06-client-ui.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-01-introduction_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-02-server_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-04-server-continued_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-01-introduction.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-06-client-ui_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-03-server.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-04-server-continued.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-05-client-model_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-03-server_transcript.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-02-server.pdf
ShaiAlmog1
 
PDF
create-netflix-clone-05-client-model.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part II.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part IX - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part II - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part V - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part IV - Transcript.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part IV.pdf
ShaiAlmog1
 
PDF
Creating a Whatsapp Clone - Part I - Transcript.pdf
ShaiAlmog1
 
The Duck Teaches Learn to debug from the masters. Local to production- kill ...
ShaiAlmog1
 
create-netflix-clone-06-client-ui.pdf
ShaiAlmog1
 
create-netflix-clone-01-introduction_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-02-server_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-04-server-continued_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-01-introduction.pdf
ShaiAlmog1
 
create-netflix-clone-06-client-ui_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-03-server.pdf
ShaiAlmog1
 
create-netflix-clone-04-server-continued.pdf
ShaiAlmog1
 
create-netflix-clone-05-client-model_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-03-server_transcript.pdf
ShaiAlmog1
 
create-netflix-clone-02-server.pdf
ShaiAlmog1
 
create-netflix-clone-05-client-model.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part II.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part IX - Transcript.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part II - Transcript.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part V - Transcript.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part IV - Transcript.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part IV.pdf
ShaiAlmog1
 
Creating a Whatsapp Clone - Part I - Transcript.pdf
ShaiAlmog1
 

Recently uploaded (20)

PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PPTX
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
PDF
KodekX | Application Modernization Development
KodekX
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
KodekX | Application Modernization Development
KodekX
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 

Creating an Uber Clone - Part IX.pdf

  • 1. Creating an Uber Clone - Part IX
  • 2. Destination UI © Codename One 2017 all rights reserved
  • 3. Destination UI © Codename One 2017 all rights reserved
  • 4. Destination UI © Codename One 2017 all rights reserved
  • 5. private void showToNavigationBar(Container parentLayer) { MultiButton addHome = new MultiButton("Add Home"); addHome.setUIID("Container"); addHome.setUIIDLine1("WhereToButtonLine1"); addHome.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(addHome, FontImage.MATERIAL_HOME); MultiButton addWork = new MultiButton("Add Work"); addWork.setUIID("Container"); addWork.setUIIDLine1("WhereToButtonLine1"); addWork.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(addWork, FontImage.MATERIAL_WORK); MultiButton savedPlaces = new MultiButton("Saved Places"); savedPlaces.setUIID("Container"); savedPlaces.setUIIDLine1("WhereToButtonLineNoBorder"); savedPlaces.setEmblemUIID("WhereToButtonLineNoBorder"); savedPlaces.setIconUIID("WhereToButtonIcon"); savedPlaces.setEmblem(FontImage.createMaterial( FontImage.MATERIAL_NAVIGATE_NEXT, savedPlaces.getIconComponent().getUnselectedStyle())); FontImage.setMaterialIcon(savedPlaces, FontImage.MATERIAL_STAR_BORDER); Destination UI
  • 6. savedPlaces.setEmblem(FontImage.createMaterial( FontImage.MATERIAL_NAVIGATE_NEXT, savedPlaces.getIconComponent().getUnselectedStyle())); FontImage.setMaterialIcon(savedPlaces, FontImage.MATERIAL_STAR_BORDER); Label whereSeparator = new Label("", "WhereSeparator"); whereSeparator.setShowEvenIfBlank(true); MultiButton history1 = new MultiButton("Mikve Yisrael Str..."); history1.setUIID("Container"); history1.setUIIDLine1("WhereToButtonLine1"); history1.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(history1, FontImage.MATERIAL_HISTORY); Container result = BoxLayout.encloseY(addHome, addWork, savedPlaces, whereSeparator, history1); result.setUIID("Form"); result.setScrollableY(true); result.setScrollVisible(false); result.setY(getDisplayHeight()); Destination UI
  • 7. savedPlaces.setEmblem(FontImage.createMaterial( FontImage.MATERIAL_NAVIGATE_NEXT, savedPlaces.getIconComponent().getUnselectedStyle())); FontImage.setMaterialIcon(savedPlaces, FontImage.MATERIAL_STAR_BORDER); Label whereSeparator = new Label("", "WhereSeparator"); whereSeparator.setShowEvenIfBlank(true); MultiButton history1 = new MultiButton("Mikve Yisrael Str..."); history1.setUIID("Container"); history1.setUIIDLine1("WhereToButtonLine1"); history1.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(history1, FontImage.MATERIAL_HISTORY); Container result = BoxLayout.encloseY(addHome, addWork, savedPlaces, whereSeparator, history1); result.setUIID("Form"); result.setScrollableY(true); result.setScrollVisible(false); result.setY(getDisplayHeight()); Destination UI
  • 8. savedPlaces.setEmblem(FontImage.createMaterial( FontImage.MATERIAL_NAVIGATE_NEXT, savedPlaces.getIconComponent().getUnselectedStyle())); FontImage.setMaterialIcon(savedPlaces, FontImage.MATERIAL_STAR_BORDER); Label whereSeparator = new Label("", "WhereSeparator"); whereSeparator.setShowEvenIfBlank(true); MultiButton history1 = new MultiButton("Mikve Yisrael Str..."); history1.setUIID("Container"); history1.setUIIDLine1("WhereToButtonLine1"); history1.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(history1, FontImage.MATERIAL_HISTORY); Container result = BoxLayout.encloseY(addHome, addWork, savedPlaces, whereSeparator, history1); result.setUIID("Form"); result.setScrollableY(true); result.setScrollVisible(false); result.setY(getDisplayHeight()); Destination UI
  • 9. Label whereSeparator = new Label("", "WhereSeparator"); whereSeparator.setShowEvenIfBlank(true); MultiButton history1 = new MultiButton("Mikve Yisrael Str..."); history1.setUIID("Container"); history1.setUIIDLine1("WhereToButtonLine1"); history1.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(history1, FontImage.MATERIAL_HISTORY); Container result = BoxLayout.encloseY(addHome, addWork, savedPlaces, whereSeparator, history1); result.setUIID("Form"); result.setScrollableY(true); result.setScrollVisible(false); result.setY(getDisplayHeight()); result.setWidth(getDisplayWidth()); result.setHeight(result.getPreferredH()); parentLayer.add(CENTER, result); parentLayer.animateLayout(200); } Destination UI
  • 10. WhereToButtonLine1 © Codename One 2017 all rights reserved
  • 11. WhereToButtonLine1 © Codename One 2017 all rights reserved
  • 12. WhereToButtonLine1 © Codename One 2017 all rights reserved
  • 13. WhereToButtonLine1 © Codename One 2017 all rights reserved
  • 14. WhereToButtonLine1 © Codename One 2017 all rights reserved
  • 15. WhereToButtonIcon © Codename One 2017 all rights reserved
  • 16. WhereToButtonIcon © Codename One 2017 all rights reserved
  • 17. WhereToButtonNoBorder © Codename One 2017 all rights reserved
  • 18. WhereToButtonNoBorder © Codename One 2017 all rights reserved
  • 19. WhereSeparator © Codename One 2017 all rights reserved
  • 20. WhereSeparator © Codename One 2017 all rights reserved
  • 21. WhereSeparator © Codename One 2017 all rights reserved
  • 22. from.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(square); if(layer.getComponentCount() > 1) { Component c = layer.getComponentAt(1); c.setY(getDisplayHeight()); layer.animateUnlayout(200, 150, () -> { c.remove(); revalidate(); }); } } public void focusLost(Component cmp) { fromSelected.setIcon(circle); } }); to.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(circle); toSelected.setIcon(square); showToNavigationBar(layer); } public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); Focus Listener
  • 23. from.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(square); if(layer.getComponentCount() > 1) { Component c = layer.getComponentAt(1); c.setY(getDisplayHeight()); layer.animateUnlayout(200, 150, () -> { c.remove(); revalidate(); }); } } public void focusLost(Component cmp) { fromSelected.setIcon(circle); } }); to.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(circle); toSelected.setIcon(square); showToNavigationBar(layer); } public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); Focus Listener
  • 24. from.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(square); if(layer.getComponentCount() > 1) { Component c = layer.getComponentAt(1); c.setY(getDisplayHeight()); layer.animateUnlayout(200, 150, () -> { c.remove(); revalidate(); }); } } public void focusLost(Component cmp) { fromSelected.setIcon(circle); } }); to.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(circle); toSelected.setIcon(square); showToNavigationBar(layer); } public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); Focus Listener
  • 25. from.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(square); if(layer.getComponentCount() > 1) { Component c = layer.getComponentAt(1); c.setY(getDisplayHeight()); layer.animateUnlayout(200, 150, () -> { c.remove(); revalidate(); }); } } public void focusLost(Component cmp) { fromSelected.setIcon(circle); } }); to.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(circle); toSelected.setIcon(square); showToNavigationBar(layer); } public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); Focus Listener
  • 26. from.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(square); if(layer.getComponentCount() > 1) { Component c = layer.getComponentAt(1); c.setY(getDisplayHeight()); layer.animateUnlayout(200, 150, () -> { c.remove(); revalidate(); }); } } public void focusLost(Component cmp) { fromSelected.setIcon(circle); } }); to.addFocusListener(new FocusListener() { public void focusGained(Component cmp) { fromSelected.setIcon(circle); toSelected.setIcon(square); showToNavigationBar(layer); } public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); Focus Listener
  • 27. back.addActionListener(e -> { navigationToolbar.setY(-navigationToolbar.getHeight()); if(layer.getComponentCount() > 1) { layer.getComponentAt(1).setY(getDisplayHeight()); } navigationToolbar.getParent().animateUnlayout(200, 120, () -> { layer.removeAll(); revalidate(); }); }); Back
  • 28. navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { if(layer.getComponentCount() > 1) { g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight()); } g1.drawImage(dropShadow, rect.getX(), rect.getY() + rect.getHeight() - dropShadow.getHeight(), rect.getWidth(), dropShadow.getHeight()); g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight() - dropShadow.getHeight() / 2); } else { g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight()); } g1.setColor(0xa4a4ac); g1.setAntiAliased(true); int x = fromSelected.getAbsoluteX() + fromSelected.getWidth() / 2 - 1; int y = fromSelected.getAbsoluteY() + fromSelected.getHeight() / 2 + circle.getHeight() / 2; g1.fillRect(x, y, 2, toSelected.getAbsoluteY() - y + toSelected.getHeight() / 2 - circle.getHeight() / 2); }); Background Painter