SlideShare a Scribd company logo
Creating an Uber Clone - Part XXI
private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
private MapContainer mc;
private AutoCompleteAddressInput lastFocused;
private MapListener lastMapListener;
private UITimer lastTimer;
private Button whereTo;
private Container mapLayer;
private boolean inNavigationMode;
MapForm
void showNavigationToolbar() {
final Container layer = getLayeredPane(MapForm.class, true);
layer.setName("MapFormLayer");
layer.setLayout(new BorderLayout());
final Container pinLayer = getLayeredPane(AutoCompleteAddressInput.class, false);
pinLayer.setName("PinLayer");
pinLayer.setLayout(new BorderLayout(CENTER_BEHAVIOR_CENTER_ABSOLUTE));
Image pin = Resources.getGlobalResources().getImage("Pin.png");
Label pinLabel = new Label(pin);
MapLayout.setHorizontalAlignment(pinLabel, MapLayout.HALIGN.CENTER);
MapLayout.setVerticalAlignment(pinLabel, MapLayout.VALIGN.BOTTOM);
pinLayer.add(CENTER, pinLabel);
Button back = new Button("", "TitleCommand");
FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK);
CompletionContainer cc = new CompletionContainer();
AutoCompleteAddressInput from =
new AutoCompleteAddressInput("Current Location", "From",layer,cc);
AutoCompleteAddressInput to =
new AutoCompleteAddressInput("", "Where To?", layer, cc);
from.setCurrentLocation(LocationService.getCurrentLocation());
Image circle = Image.createImage(square.getWidth(),square.getHeight(),0);
Graphics g = circle.getGraphics();
showNavigationToolbar
void showNavigationToolbar() {
final Container layer = getLayeredPane(MapForm.class, true);
layer.setName("MapFormLayer");
layer.setLayout(new BorderLayout());
final Container pinLayer = getLayeredPane(AutoCompleteAddressInput.class, false);
pinLayer.setName("PinLayer");
pinLayer.setLayout(new BorderLayout(CENTER_BEHAVIOR_CENTER_ABSOLUTE));
Image pin = Resources.getGlobalResources().getImage("Pin.png");
Label pinLabel = new Label(pin);
MapLayout.setHorizontalAlignment(pinLabel, MapLayout.HALIGN.CENTER);
MapLayout.setVerticalAlignment(pinLabel, MapLayout.VALIGN.BOTTOM);
pinLayer.add(CENTER, pinLabel);
Button back = new Button("", "TitleCommand");
FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK);
CompletionContainer cc = new CompletionContainer();
AutoCompleteAddressInput from =
new AutoCompleteAddressInput("Current Location", "From",layer,cc);
AutoCompleteAddressInput to =
new AutoCompleteAddressInput("", "Where To?", layer, cc);
from.setCurrentLocation(LocationService.getCurrentLocation());
Image circle = Image.createImage(square.getWidth(),square.getHeight(),0);
Graphics g = circle.getGraphics();
showNavigationToolbar
from.setCurrentLocation(LocationService.getCurrentLocation());
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(circle);
final Label toSelected = new Label(square);
SearchService.nameMyCurrentLocation(
LocationService.getCurrentLocation(), name -> from.setTextNoEvent(name));
to.requestFocus();
lastFocused = to;
from.addFocusListener(new FocusListener() {
@Override
public void focusGained(Component cmp) {
fromSelected.setIcon(square);
lastFocused = from;
}
@Override
public void focusLost(Component cmp) {
fromSelected.setIcon(circle);
}
showNavigationToolbar
@Override
public void focusLost(Component cmp) {
toSelected.setIcon(circle);
}
});
addMapListener((source, zoom, center) -> {
if(lastTimer != null) {
lastTimer.cancel();
}
lastTimer = UITimer.timer(500, false, () -> {
lastTimer = null;
SearchService.nameMyCurrentLocation(
new Location(center.getLatitude(), center.getLongitude()),
name -> {
lastFocused.setTextNoEvent(name);
lastFocused.setCurrentLocation(
new Location(center.getLatitude(), center.getLongitude()));
});
});
});
Container navigationToolbar = BoxLayout.encloseY(back,
showNavigationToolbar
lastFocused.setCurrentLocation(
new Location(center.getLatitude(), center.getLongitude()));
});
});
});
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) {
if(((BorderLayout)layer.getLayout()).getCenter() != null) {
g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight());
}
g1.drawImage(dropShadow, rect.getX() - shadowHeight, rect.getY() +
rect.getHeight() - dropShadow.getHeight() / 4 * 3);
g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getY() +
rect.getHeight() - shadowHeight);
} else {
showNavigationToolbar
g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getY() +
rect.getHeight() - shadowHeight);
} 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);
});
cc.addCompletionListener(e -> {
if(to.getCurrentLocation() != null) {
SearchService.directions(from.getCurrentLocation(), to.getCurrentLocation(),
(path, duration, distance) -> {
enterNavigationMode(pinLayer, navigationToolbar, layer, path,
from.getText(), to.getText(), duration);
});
}
showNavigationToolbar
SearchService.directions(from.getCurrentLocation(), to.getCurrentLocation(),
(path, duration, distance) -> {
enterNavigationMode(pinLayer, navigationToolbar, layer, path,
from.getText(), to.getText(), duration);
});
}
});
back.addActionListener(e -> {
pinLayer.removeAll();
navigationToolbar.setY(-navigationToolbar.getHeight());
layer.getComponentAt(1).setY(getDisplayHeight());
navigationToolbar.getParent().animateUnlayout(200, 120, () -> {
layer.removeAll();
revalidate();
});
});
layer.add(NORTH, navigationToolbar);
navigationToolbar.setWidth(getDisplayWidth());
navigationToolbar.setHeight(getPreferredH());
navigationToolbar.setY(-navigationToolbar.getHeight());
getAnimationManager().addAnimation(layer.createAnimateLayout(200),
() -> cc.showCompletionBar(layer));
}
showNavigationToolbar
private void addMapListener(MapListener ml) {
if(lastMapListener != null) {
mc.removeMapListener(lastMapListener);
}
lastMapListener = ml;
mc.addMapListener(ml);
}
addMapListener

More Related Content

Similar to Creating an Uber Clone - Part XXI.pdf

Maps - Part 3.pdf
Maps - Part 3.pdfMaps - Part 3.pdf
Maps - Part 3.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part XVI.pdf
Creating an Uber Clone - Part XVI.pdfCreating an Uber Clone - Part XVI.pdf
Creating an Uber Clone - Part XVI.pdf
ShaiAlmog1
 
203 Is It Real or Is It Virtual? Augmented Reality on the iPhone
203 Is It Real or Is It Virtual? Augmented Reality on the iPhone203 Is It Real or Is It Virtual? Augmented Reality on the iPhone
203 Is It Real or Is It Virtual? Augmented Reality on the iPhone
jonmarimba
 
Creating an Uber Clone - Part XXII - Transcript.pdf
Creating an Uber Clone - Part XXII - Transcript.pdfCreating an Uber Clone - Part XXII - Transcript.pdf
Creating an Uber Clone - Part XXII - Transcript.pdf
ShaiAlmog1
 
QML\Qt Quick на практике
QML\Qt Quick на практикеQML\Qt Quick на практике
QML\Qt Quick на практике
Platonov Sergey
 
Creating an Uber Clone - Part VII - Transcript.pdf
Creating an Uber Clone - Part VII - Transcript.pdfCreating an Uber Clone - Part VII - Transcript.pdf
Creating an Uber Clone - Part VII - Transcript.pdf
ShaiAlmog1
 
Keeping Track of Moving Things: MapKit and CoreLocation in Depth
Keeping Track of Moving Things: MapKit and CoreLocation in DepthKeeping Track of Moving Things: MapKit and CoreLocation in Depth
Keeping Track of Moving Things: MapKit and CoreLocation in Depth
Geoffrey Goetz
 
Maps - Part 3 - Transcript.pdf
Maps - Part 3 - Transcript.pdfMaps - Part 3 - Transcript.pdf
Maps - Part 3 - Transcript.pdf
ShaiAlmog1
 
Gis SAPO Hands On
Gis SAPO Hands OnGis SAPO Hands On
Gis SAPO Hands Oncodebits
 
Sapo GIS Hands-On
Sapo GIS Hands-OnSapo GIS Hands-On
Sapo GIS Hands-Oncodebits
 
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
Martin Kleppe
 
google play service 7.8 & new tech in M
google play service 7.8 & new tech in M google play service 7.8 & new tech in M
google play service 7.8 & new tech in M
Ted Liang
 
Creating an Uber Clone - Part XXIV.pdf
Creating an Uber Clone - Part XXIV.pdfCreating an Uber Clone - Part XXIV.pdf
Creating an Uber Clone - Part XXIV.pdf
ShaiAlmog1
 
Creating an Uber Clone - Part IX.pdf
Creating an Uber Clone - Part IX.pdfCreating an Uber Clone - Part IX.pdf
Creating an Uber Clone - Part IX.pdf
ShaiAlmog1
 
Mashup caravan android-talks
Mashup caravan android-talksMashup caravan android-talks
Mashup caravan android-talkshonjo2
 
Google Maps JS API
Google Maps JS APIGoogle Maps JS API
Google Maps JS API
Alberto Simões
 
Google Maps Api
Google Maps ApiGoogle Maps Api
Google Maps Api
Anas Alpure
 
Canvas al ajillo
Canvas al ajilloCanvas al ajillo
Canvas al ajillo
Adrián García Lomas
 
UI Design From Scratch - Part 5.pdf
UI Design From Scratch - Part 5.pdfUI Design From Scratch - Part 5.pdf
UI Design From Scratch - Part 5.pdf
ShaiAlmog1
 
Useful Tools for Making Video Games - XNA (2008)
Useful Tools for Making Video Games - XNA (2008)Useful Tools for Making Video Games - XNA (2008)
Useful Tools for Making Video Games - XNA (2008)
Korhan Bircan
 

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

Maps - Part 3.pdf
Maps - Part 3.pdfMaps - Part 3.pdf
Maps - Part 3.pdf
 
Creating an Uber Clone - Part XVI.pdf
Creating an Uber Clone - Part XVI.pdfCreating an Uber Clone - Part XVI.pdf
Creating an Uber Clone - Part XVI.pdf
 
203 Is It Real or Is It Virtual? Augmented Reality on the iPhone
203 Is It Real or Is It Virtual? Augmented Reality on the iPhone203 Is It Real or Is It Virtual? Augmented Reality on the iPhone
203 Is It Real or Is It Virtual? Augmented Reality on the iPhone
 
Creating an Uber Clone - Part XXII - Transcript.pdf
Creating an Uber Clone - Part XXII - Transcript.pdfCreating an Uber Clone - Part XXII - Transcript.pdf
Creating an Uber Clone - Part XXII - Transcript.pdf
 
QML\Qt Quick на практике
QML\Qt Quick на практикеQML\Qt Quick на практике
QML\Qt Quick на практике
 
Creating an Uber Clone - Part VII - Transcript.pdf
Creating an Uber Clone - Part VII - Transcript.pdfCreating an Uber Clone - Part VII - Transcript.pdf
Creating an Uber Clone - Part VII - Transcript.pdf
 
Keeping Track of Moving Things: MapKit and CoreLocation in Depth
Keeping Track of Moving Things: MapKit and CoreLocation in DepthKeeping Track of Moving Things: MapKit and CoreLocation in Depth
Keeping Track of Moving Things: MapKit and CoreLocation in Depth
 
Maps - Part 3 - Transcript.pdf
Maps - Part 3 - Transcript.pdfMaps - Part 3 - Transcript.pdf
Maps - Part 3 - Transcript.pdf
 
Gis SAPO Hands On
Gis SAPO Hands OnGis SAPO Hands On
Gis SAPO Hands On
 
Sapo GIS Hands-On
Sapo GIS Hands-OnSapo GIS Hands-On
Sapo GIS Hands-On
 
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
 
google play service 7.8 & new tech in M
google play service 7.8 & new tech in M google play service 7.8 & new tech in M
google play service 7.8 & new tech in M
 
Creating an Uber Clone - Part XXIV.pdf
Creating an Uber Clone - Part XXIV.pdfCreating an Uber Clone - Part XXIV.pdf
Creating an Uber Clone - Part XXIV.pdf
 
Creating an Uber Clone - Part IX.pdf
Creating an Uber Clone - Part IX.pdfCreating an Uber Clone - Part IX.pdf
Creating an Uber Clone - Part IX.pdf
 
Mashup caravan android-talks
Mashup caravan android-talksMashup caravan android-talks
Mashup caravan android-talks
 
Google Maps JS API
Google Maps JS APIGoogle Maps JS API
Google Maps JS API
 
Google Maps Api
Google Maps ApiGoogle Maps Api
Google Maps Api
 
Canvas al ajillo
Canvas al ajilloCanvas al ajillo
Canvas al ajillo
 
UI Design From Scratch - Part 5.pdf
UI Design From Scratch - Part 5.pdfUI Design From Scratch - Part 5.pdf
UI Design From Scratch - Part 5.pdf
 
Useful Tools for Making Video Games - XNA (2008)
Useful Tools for Making Video Games - XNA (2008)Useful Tools for Making Video Games - XNA (2008)
Useful Tools for Making Video Games - XNA (2008)
 

More from ShaiAlmog1

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

More from ShaiAlmog1 (20)

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

Recently uploaded

Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
Abida Shariff
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 

Recently uploaded (20)

Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 

Creating an Uber Clone - Part XXI.pdf

  • 1. Creating an Uber Clone - Part XXI
  • 2. private MapContainer mc; private AutoCompleteAddressInput lastFocused; private MapListener lastMapListener; private UITimer lastTimer; private Button whereTo; private Container mapLayer; private boolean inNavigationMode; MapForm
  • 3. private MapContainer mc; private AutoCompleteAddressInput lastFocused; private MapListener lastMapListener; private UITimer lastTimer; private Button whereTo; private Container mapLayer; private boolean inNavigationMode; MapForm
  • 4. private MapContainer mc; private AutoCompleteAddressInput lastFocused; private MapListener lastMapListener; private UITimer lastTimer; private Button whereTo; private Container mapLayer; private boolean inNavigationMode; MapForm
  • 5. private MapContainer mc; private AutoCompleteAddressInput lastFocused; private MapListener lastMapListener; private UITimer lastTimer; private Button whereTo; private Container mapLayer; private boolean inNavigationMode; MapForm
  • 6. private MapContainer mc; private AutoCompleteAddressInput lastFocused; private MapListener lastMapListener; private UITimer lastTimer; private Button whereTo; private Container mapLayer; private boolean inNavigationMode; MapForm
  • 7. private MapContainer mc; private AutoCompleteAddressInput lastFocused; private MapListener lastMapListener; private UITimer lastTimer; private Button whereTo; private Container mapLayer; private boolean inNavigationMode; MapForm
  • 8. private MapContainer mc; private AutoCompleteAddressInput lastFocused; private MapListener lastMapListener; private UITimer lastTimer; private Button whereTo; private Container mapLayer; private boolean inNavigationMode; MapForm
  • 9. void showNavigationToolbar() { final Container layer = getLayeredPane(MapForm.class, true); layer.setName("MapFormLayer"); layer.setLayout(new BorderLayout()); final Container pinLayer = getLayeredPane(AutoCompleteAddressInput.class, false); pinLayer.setName("PinLayer"); pinLayer.setLayout(new BorderLayout(CENTER_BEHAVIOR_CENTER_ABSOLUTE)); Image pin = Resources.getGlobalResources().getImage("Pin.png"); Label pinLabel = new Label(pin); MapLayout.setHorizontalAlignment(pinLabel, MapLayout.HALIGN.CENTER); MapLayout.setVerticalAlignment(pinLabel, MapLayout.VALIGN.BOTTOM); pinLayer.add(CENTER, pinLabel); Button back = new Button("", "TitleCommand"); FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK); CompletionContainer cc = new CompletionContainer(); AutoCompleteAddressInput from = new AutoCompleteAddressInput("Current Location", "From",layer,cc); AutoCompleteAddressInput to = new AutoCompleteAddressInput("", "Where To?", layer, cc); from.setCurrentLocation(LocationService.getCurrentLocation()); Image circle = Image.createImage(square.getWidth(),square.getHeight(),0); Graphics g = circle.getGraphics(); showNavigationToolbar
  • 10. void showNavigationToolbar() { final Container layer = getLayeredPane(MapForm.class, true); layer.setName("MapFormLayer"); layer.setLayout(new BorderLayout()); final Container pinLayer = getLayeredPane(AutoCompleteAddressInput.class, false); pinLayer.setName("PinLayer"); pinLayer.setLayout(new BorderLayout(CENTER_BEHAVIOR_CENTER_ABSOLUTE)); Image pin = Resources.getGlobalResources().getImage("Pin.png"); Label pinLabel = new Label(pin); MapLayout.setHorizontalAlignment(pinLabel, MapLayout.HALIGN.CENTER); MapLayout.setVerticalAlignment(pinLabel, MapLayout.VALIGN.BOTTOM); pinLayer.add(CENTER, pinLabel); Button back = new Button("", "TitleCommand"); FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK); CompletionContainer cc = new CompletionContainer(); AutoCompleteAddressInput from = new AutoCompleteAddressInput("Current Location", "From",layer,cc); AutoCompleteAddressInput to = new AutoCompleteAddressInput("", "Where To?", layer, cc); from.setCurrentLocation(LocationService.getCurrentLocation()); Image circle = Image.createImage(square.getWidth(),square.getHeight(),0); Graphics g = circle.getGraphics(); showNavigationToolbar
  • 11. from.setCurrentLocation(LocationService.getCurrentLocation()); 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(circle); final Label toSelected = new Label(square); SearchService.nameMyCurrentLocation( LocationService.getCurrentLocation(), name -> from.setTextNoEvent(name)); to.requestFocus(); lastFocused = to; from.addFocusListener(new FocusListener() { @Override public void focusGained(Component cmp) { fromSelected.setIcon(square); lastFocused = from; } @Override public void focusLost(Component cmp) { fromSelected.setIcon(circle); } showNavigationToolbar
  • 12. @Override public void focusLost(Component cmp) { toSelected.setIcon(circle); } }); addMapListener((source, zoom, center) -> { if(lastTimer != null) { lastTimer.cancel(); } lastTimer = UITimer.timer(500, false, () -> { lastTimer = null; SearchService.nameMyCurrentLocation( new Location(center.getLatitude(), center.getLongitude()), name -> { lastFocused.setTextNoEvent(name); lastFocused.setCurrentLocation( new Location(center.getLatitude(), center.getLongitude())); }); }); }); Container navigationToolbar = BoxLayout.encloseY(back, showNavigationToolbar
  • 13. lastFocused.setCurrentLocation( new Location(center.getLatitude(), center.getLongitude())); }); }); }); 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) { if(((BorderLayout)layer.getLayout()).getCenter() != null) { g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight()); } g1.drawImage(dropShadow, rect.getX() - shadowHeight, rect.getY() + rect.getHeight() - dropShadow.getHeight() / 4 * 3); g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getY() + rect.getHeight() - shadowHeight); } else { showNavigationToolbar
  • 14. g1.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getY() + rect.getHeight() - shadowHeight); } 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); }); cc.addCompletionListener(e -> { if(to.getCurrentLocation() != null) { SearchService.directions(from.getCurrentLocation(), to.getCurrentLocation(), (path, duration, distance) -> { enterNavigationMode(pinLayer, navigationToolbar, layer, path, from.getText(), to.getText(), duration); }); } showNavigationToolbar
  • 15. SearchService.directions(from.getCurrentLocation(), to.getCurrentLocation(), (path, duration, distance) -> { enterNavigationMode(pinLayer, navigationToolbar, layer, path, from.getText(), to.getText(), duration); }); } }); back.addActionListener(e -> { pinLayer.removeAll(); navigationToolbar.setY(-navigationToolbar.getHeight()); layer.getComponentAt(1).setY(getDisplayHeight()); navigationToolbar.getParent().animateUnlayout(200, 120, () -> { layer.removeAll(); revalidate(); }); }); layer.add(NORTH, navigationToolbar); navigationToolbar.setWidth(getDisplayWidth()); navigationToolbar.setHeight(getPreferredH()); navigationToolbar.setY(-navigationToolbar.getHeight()); getAnimationManager().addAnimation(layer.createAnimateLayout(200), () -> cc.showCompletionBar(layer)); } showNavigationToolbar
  • 16. private void addMapListener(MapListener ml) { if(lastMapListener != null) { mc.removeMapListener(lastMapListener); } lastMapListener = ml; mc.addMapListener(ml); } addMapListener