SlideShare a Scribd company logo

Creating an Uber Clone - Part VIII.pdf

S
ShaiAlmog1

This document describes the creation of a navigation toolbar for entering pick-up and drop-off locations in an Uber clone app. It includes code for adding a back button, from and to text fields, and labels for selected locations. Styles are defined for the toolbar and text fields. Functionality is added to animate the toolbar onto the screen and hide it by sliding up when the back button is pressed.

Technology
1 of 25
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
Creating an Uber Clone - Part VIII
The “Where to?” UI © Codename One 2017 all rights reserved
The “Where to?” UI © Codename One 2017 all rights reserved
whereTo.addActionListener(e -> showNavigationToolbar()); Where to?
void showNavigationToolbar() { final Container layer = getLayeredPane(MapForm.class, true); Button back = new Button("", "TitleCommand"); FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK); TextField from = new TextField("", "From", 40, TextField.ANY); TextField to = new TextField("", "Where to?", 40, TextField.ANY); Image circle = Image.createImage(square.getWidth(),square.getHeight(),0); Graphics g = circle.getGraphics(); g.setColor(0xa4a4ac); g.setAntiAliased(true); g.fillArc(0, 0, circle.getWidth(), circle.getHeight(), 0, 360); final Label fromSelected = new Label(square); final Label toSelected = new Label(circle); from.getHintLabel().setUIID("FromToTextFieldHint"); from.setUIID("FromToTextField"); to.getHintLabel().setUIID("FromToTextFieldHint"); to.setUIID("FromToTextField"); Where to?
void showNavigationToolbar() { final Container layer = getLayeredPane(MapForm.class, true); Button back = new Button("", "TitleCommand"); FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK); TextField from = new TextField("", "From", 40, TextField.ANY); TextField to = new TextField("", "Where to?", 40, TextField.ANY); Image circle = Image.createImage(square.getWidth(),square.getHeight(),0); Graphics g = circle.getGraphics(); g.setColor(0xa4a4ac); g.setAntiAliased(true); g.fillArc(0, 0, circle.getWidth(), circle.getHeight(), 0, 360); final Label fromSelected = new Label(square); final Label toSelected = new Label(circle); from.getHintLabel().setUIID("FromToTextFieldHint"); from.setUIID("FromToTextField"); to.getHintLabel().setUIID("FromToTextFieldHint"); to.setUIID("FromToTextField"); Where to?
final Label fromSelected = new Label(square); final Label toSelected = new Label(circle); from.getHintLabel().setUIID("FromToTextFieldHint"); from.setUIID("FromToTextField"); to.getHintLabel().setUIID("FromToTextFieldHint"); to.setUIID("FromToTextField"); Container navigationToolbar = BoxLayout.encloseY(back, BorderLayout.centerCenterEastWest(from, null, fromSelected), BorderLayout.centerCenterEastWest(to, null, toSelected) ); navigationToolbar.setUIID("WhereToToolbar"); navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { g1.drawImage(dropShadow, rect.getX(), rect.getY() + rect.getHeight() - dropShadow.getHeight(), rect.getWidth(), dropShadow.getHeight()); g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), Where to?
final Label fromSelected = new Label(square); final Label toSelected = new Label(circle); from.getHintLabel().setUIID("FromToTextFieldHint"); from.setUIID("FromToTextField"); to.getHintLabel().setUIID("FromToTextFieldHint"); to.setUIID("FromToTextField"); Container navigationToolbar = BoxLayout.encloseY(back, BorderLayout.centerCenterEastWest(from, null, fromSelected), BorderLayout.centerCenterEastWest(to, null, toSelected) ); navigationToolbar.setUIID("WhereToToolbar"); navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { g1.drawImage(dropShadow, rect.getX(), rect.getY() + rect.getHeight() - dropShadow.getHeight(), rect.getWidth(), dropShadow.getHeight()); g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), Where to?
navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { 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); }); Where to?
navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { 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); }); Where to?
navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { 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); }); Where to?
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); }); back.addActionListener(e -> { navigationToolbar.setY(-navigationToolbar.getHeight()); navigationToolbar.getParent().animateUnlayout(200, 120, () -> { layer.removeAll(); revalidate(); }); }); layer.setLayout(new BorderLayout()); layer.add(NORTH, navigationToolbar); navigationToolbar.setWidth(getDisplayWidth()); navigationToolbar.setHeight(getPreferredH()); navigationToolbar.setY(-navigationToolbar.getHeight()); layer.animateLayout(200); } Where to?
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); }); back.addActionListener(e -> { navigationToolbar.setY(-navigationToolbar.getHeight()); navigationToolbar.getParent().animateUnlayout(200, 120, () -> { layer.removeAll(); revalidate(); }); }); layer.setLayout(new BorderLayout()); layer.add(NORTH, navigationToolbar); navigationToolbar.setWidth(getDisplayWidth()); navigationToolbar.setHeight(getPreferredH()); navigationToolbar.setY(-navigationToolbar.getHeight()); layer.animateLayout(200); } Where to?
WhereToToolbar © Codename One 2017 all rights reserved
WhereToToolbar © Codename One 2017 all rights reserved
WhereToToolbar © Codename One 2017 all rights reserved
FromToTextField © Codename One 2017 all rights reserved
FromToTextField © Codename One 2017 all rights reserved
FromToTextField © Codename One 2017 all rights reserved
FromToTextField © Codename One 2017 all rights reserved
FromToTextField © Codename One 2017 all rights reserved
FromToTextField © Codename One 2017 all rights reserved
FromToTextFieldHint © Codename One 2017 all rights reserved
FromToTextFieldHint © Codename One 2017 all rights reserved
FromToTextFieldHint © Codename One 2017 all rights reserved

More Related Content

PDF
Creating an Uber Clone - Part VIII - Transcript.pdf
ShaiAlmog1
 
PDF
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdf
apexcomputer54
 
PDF
Create a java project that - Draw a circle with three random init.pdf
arihantmobileselepun
 
PPT
Mobile Game and Application with J2ME - Collision Detection
Jenchoke Tachagomain
 
PPT
Mobile Game and Application with J2ME
Jenchoke Tachagomain
 
PDF
Sokoban Game Development Using Java ( Updated using Screenshots & Class Diagr...
British Council
 
PDF
package chapter15;import javafx.application.Application;import j.pdf
KARTIKINDIA
 
PDF
Mashup caravan android-talks
honjo2
 
Creating an Uber Clone - Part VIII - Transcript.pdf
ShaiAlmog1
 
Import java.awt.; Import acm.program.; Import acm.graphics.;.pdf
apexcomputer54
 
Create a java project that - Draw a circle with three random init.pdf
arihantmobileselepun
 
Mobile Game and Application with J2ME - Collision Detection
Jenchoke Tachagomain
 
Mobile Game and Application with J2ME
Jenchoke Tachagomain
 
Sokoban Game Development Using Java ( Updated using Screenshots & Class Diagr...
British Council
 
package chapter15;import javafx.application.Application;import j.pdf
KARTIKINDIA
 
Mashup caravan android-talks
honjo2
 

Similar to Creating an Uber Clone - Part VIII.pdf (20)

PDF
Creating an Uber Clone - Part IV.pdf
ShaiAlmog1
 
PDF
662305 LAB12
Nitigan Nakjuatong
 
PDF
UI Design From Scratch - Part 5 - transcript.pdf
ShaiAlmog1
 
PDF
The Ring programming language version 1.5.3 book - Part 70 of 184
Mahmoud Samir Fayed
 
PDF
662305 11
Nitigan Nakjuatong
 
PDF
Exploring Canvas
Kevin Hoyt
 
PDF
import java.awt.;import java.awt.event.MouseAdaptor;import java.pdf
anyacarpets
 
PDF
Creating an Uber Clone - Part VII.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XIX.pdf
ShaiAlmog1
 
PDF
662305 LAB13
Nitigan Nakjuatong
 
PDF
UI Design From Scratch - Part 5.pdf
ShaiAlmog1
 
PDF
Creating an Uber Clone - Part XXIV.pdf
ShaiAlmog1
 
PDF
I need to create a page looks like a picture. But it looks different.pdf
allurafashions98
 
DOCX
Applications
info_zybotech
 
PDF
662305 10
Nitigan Nakjuatong
 
PDF
Creating an Uber Clone - Part XXII.pdf
ShaiAlmog1
 
PPTX
google play service 7.8 & new tech in M
Ted Liang
 
PDF
Creating an Uber Clone - Part XXXIX.pdf
ShaiAlmog1
 
PDF
Initial UI Mockup - Part 3.pdf
ShaiAlmog1
 
PDF
The Ring programming language version 1.5.4 book - Part 60 of 185
Mahmoud Samir Fayed
 
Creating an Uber Clone - Part IV.pdf
ShaiAlmog1
 
662305 LAB12
Nitigan Nakjuatong
 
UI Design From Scratch - Part 5 - transcript.pdf
ShaiAlmog1
 
The Ring programming language version 1.5.3 book - Part 70 of 184
Mahmoud Samir Fayed
 
662305 11
Nitigan Nakjuatong
 
Exploring Canvas
Kevin Hoyt
 
import java.awt.;import java.awt.event.MouseAdaptor;import java.pdf
anyacarpets
 
Creating an Uber Clone - Part VII.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XIX.pdf
ShaiAlmog1
 
662305 LAB13
Nitigan Nakjuatong
 
UI Design From Scratch - Part 5.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XXIV.pdf
ShaiAlmog1
 
I need to create a page looks like a picture. But it looks different.pdf
allurafashions98
 
Applications
info_zybotech
 
662305 10
Nitigan Nakjuatong
 
Creating an Uber Clone - Part XXII.pdf
ShaiAlmog1
 
google play service 7.8 & new tech in M
Ted Liang
 
Creating an Uber Clone - Part XXXIX.pdf
ShaiAlmog1
 
Initial UI Mockup - Part 3.pdf
ShaiAlmog1
 
The Ring programming language version 1.5.4 book - Part 60 of 185
Mahmoud Samir Fayed
 

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
Encapsulation theory and applications.pdf
gurumoop
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PPTX
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
Encapsulation theory and applications.pdf
gurumoop
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
sap open course for s4hana steps from ECC to s4
sreeni2106invites
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
Approach and Philosophy of On baking technology
30anthuong17
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 

Creating an Uber Clone - Part VIII.pdf

  • 1. Creating an Uber Clone - Part VIII
  • 2. The “Where to?” UI © Codename One 2017 all rights reserved
  • 3. The “Where to?” UI © Codename One 2017 all rights reserved
  • 5. void showNavigationToolbar() { final Container layer = getLayeredPane(MapForm.class, true); Button back = new Button("", "TitleCommand"); FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK); TextField from = new TextField("", "From", 40, TextField.ANY); TextField to = new TextField("", "Where to?", 40, TextField.ANY); Image circle = Image.createImage(square.getWidth(),square.getHeight(),0); Graphics g = circle.getGraphics(); g.setColor(0xa4a4ac); g.setAntiAliased(true); g.fillArc(0, 0, circle.getWidth(), circle.getHeight(), 0, 360); final Label fromSelected = new Label(square); final Label toSelected = new Label(circle); from.getHintLabel().setUIID("FromToTextFieldHint"); from.setUIID("FromToTextField"); to.getHintLabel().setUIID("FromToTextFieldHint"); to.setUIID("FromToTextField"); Where to?
  • 6. void showNavigationToolbar() { final Container layer = getLayeredPane(MapForm.class, true); Button back = new Button("", "TitleCommand"); FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK); TextField from = new TextField("", "From", 40, TextField.ANY); TextField to = new TextField("", "Where to?", 40, TextField.ANY); Image circle = Image.createImage(square.getWidth(),square.getHeight(),0); Graphics g = circle.getGraphics(); g.setColor(0xa4a4ac); g.setAntiAliased(true); g.fillArc(0, 0, circle.getWidth(), circle.getHeight(), 0, 360); final Label fromSelected = new Label(square); final Label toSelected = new Label(circle); from.getHintLabel().setUIID("FromToTextFieldHint"); from.setUIID("FromToTextField"); to.getHintLabel().setUIID("FromToTextFieldHint"); to.setUIID("FromToTextField"); Where to?
  • 7. final Label fromSelected = new Label(square); final Label toSelected = new Label(circle); from.getHintLabel().setUIID("FromToTextFieldHint"); from.setUIID("FromToTextField"); to.getHintLabel().setUIID("FromToTextFieldHint"); to.setUIID("FromToTextField"); Container navigationToolbar = BoxLayout.encloseY(back, BorderLayout.centerCenterEastWest(from, null, fromSelected), BorderLayout.centerCenterEastWest(to, null, toSelected) ); navigationToolbar.setUIID("WhereToToolbar"); navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { g1.drawImage(dropShadow, rect.getX(), rect.getY() + rect.getHeight() - dropShadow.getHeight(), rect.getWidth(), dropShadow.getHeight()); g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), Where to?
  • 8. final Label fromSelected = new Label(square); final Label toSelected = new Label(circle); from.getHintLabel().setUIID("FromToTextFieldHint"); from.setUIID("FromToTextField"); to.getHintLabel().setUIID("FromToTextFieldHint"); to.setUIID("FromToTextField"); Container navigationToolbar = BoxLayout.encloseY(back, BorderLayout.centerCenterEastWest(from, null, fromSelected), BorderLayout.centerCenterEastWest(to, null, toSelected) ); navigationToolbar.setUIID("WhereToToolbar"); navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { g1.drawImage(dropShadow, rect.getX(), rect.getY() + rect.getHeight() - dropShadow.getHeight(), rect.getWidth(), dropShadow.getHeight()); g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), Where to?
  • 9. navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { 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); }); Where to?
  • 10. navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { 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); }); Where to?
  • 11. navigationToolbar.getUnselectedStyle().setBgPainter((g1, rect) -> { g1.setAlpha(255); g1.setColor(0xffffff); if(dropShadow != null) { 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); }); Where to?
  • 12. 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); }); back.addActionListener(e -> { navigationToolbar.setY(-navigationToolbar.getHeight()); navigationToolbar.getParent().animateUnlayout(200, 120, () -> { layer.removeAll(); revalidate(); }); }); layer.setLayout(new BorderLayout()); layer.add(NORTH, navigationToolbar); navigationToolbar.setWidth(getDisplayWidth()); navigationToolbar.setHeight(getPreferredH()); navigationToolbar.setY(-navigationToolbar.getHeight()); layer.animateLayout(200); } Where to?
  • 13. 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); }); back.addActionListener(e -> { navigationToolbar.setY(-navigationToolbar.getHeight()); navigationToolbar.getParent().animateUnlayout(200, 120, () -> { layer.removeAll(); revalidate(); }); }); layer.setLayout(new BorderLayout()); layer.add(NORTH, navigationToolbar); navigationToolbar.setWidth(getDisplayWidth()); navigationToolbar.setHeight(getPreferredH()); navigationToolbar.setY(-navigationToolbar.getHeight()); layer.animateLayout(200); } Where to?
  • 14. WhereToToolbar © Codename One 2017 all rights reserved
  • 15. WhereToToolbar © Codename One 2017 all rights reserved
  • 16. WhereToToolbar © Codename One 2017 all rights reserved
  • 17. FromToTextField © Codename One 2017 all rights reserved
  • 18. FromToTextField © Codename One 2017 all rights reserved
  • 19. FromToTextField © Codename One 2017 all rights reserved
  • 20. FromToTextField © Codename One 2017 all rights reserved
  • 21. FromToTextField © Codename One 2017 all rights reserved
  • 22. FromToTextField © Codename One 2017 all rights reserved
  • 23. FromToTextFieldHint © Codename One 2017 all rights reserved
  • 24. FromToTextFieldHint © Codename One 2017 all rights reserved
  • 25. FromToTextFieldHint © Codename One 2017 all rights reserved