SlideShare a Scribd company logo
1 of 14
Download to read offline
Creating an Uber Clone - Part XX
We’ll continue the search UI implementation as we step into the CompletionContainer class
public class CompletionContainer {
private Container result;
private boolean completionUsed;
private final EventDispatcher dispatcher = new EventDispatcher();
void updateCompletion(String text, AutoCompleteAddressInput dest) {
SearchService.suggestLocations(text,
LocationService.getCurrentLocation(), resultList -> {
if(resultList != null && resultList.size() > 0) {
result.removeAll();
completionUsed = true;
for(SearchService.SuggestionResult r : resultList) {
MultiButton mb = createEntry(FontImage.MATERIAL_PLACE,
r.getMainText(), r.getSecondaryText());
result.add(mb);
mb.addActionListener(e -> {
dest.setTextNoEvent(r.getFullText());
r.getLocation(l -> {
dest.setCurrentLocation(l);
dispatcher.fireActionEvent(e);
});
});
}
CompletionContainer
The CompletionContainer tries to coordinate the two instances of the AutoCompleteAddressInput class by providing a single class that handles the completion UI. Most
of the code in this class should be very familiar as some of it is refactored code from the MapForm while other code relates to the suggestLocations API we implemented
earlier... 

The name of the class is misleading. CompletionContainer is not a Container. Here instead of deriving I encapsulated the UI logic and tried to expose only the business
logic
public class CompletionContainer {
private Container result;
private boolean completionUsed;
private final EventDispatcher dispatcher = new EventDispatcher();
void updateCompletion(String text, AutoCompleteAddressInput dest) {
SearchService.suggestLocations(text,
LocationService.getCurrentLocation(), resultList -> {
if(resultList != null && resultList.size() > 0) {
result.removeAll();
completionUsed = true;
for(SearchService.SuggestionResult r : resultList) {
MultiButton mb = createEntry(FontImage.MATERIAL_PLACE,
r.getMainText(), r.getSecondaryText());
result.add(mb);
mb.addActionListener(e -> {
dest.setTextNoEvent(r.getFullText());
r.getLocation(l -> {
dest.setCurrentLocation(l);
dispatcher.fireActionEvent(e);
});
});
}
CompletionContainer
Event dispatchers allow us to broadcast events using the add/removeListener observer style API. We use this dispatcher to broadcast an event when a user presses a
completion button
public class CompletionContainer {
private Container result;
private boolean completionUsed;
private final EventDispatcher dispatcher = new EventDispatcher();
void updateCompletion(String text, AutoCompleteAddressInput dest) {
SearchService.suggestLocations(text,
LocationService.getCurrentLocation(), resultList -> {
if(resultList != null && resultList.size() > 0) {
result.removeAll();
completionUsed = true;
for(SearchService.SuggestionResult r : resultList) {
MultiButton mb = createEntry(FontImage.MATERIAL_PLACE,
r.getMainText(), r.getSecondaryText());
result.add(mb);
mb.addActionListener(e -> {
dest.setTextNoEvent(r.getFullText());
r.getLocation(l -> {
dest.setCurrentLocation(l);
dispatcher.fireActionEvent(e);
});
});
}
CompletionContainer
This method is invoked when completion is in progress it invokes the WebService call to request completion suggestions for the given string
public class CompletionContainer {
private Container result;
private boolean completionUsed;
private final EventDispatcher dispatcher = new EventDispatcher();
void updateCompletion(String text, AutoCompleteAddressInput dest) {
SearchService.suggestLocations(text,
LocationService.getCurrentLocation(), resultList -> {
if(resultList != null && resultList.size() > 0) {
result.removeAll();
completionUsed = true;
for(SearchService.SuggestionResult r : resultList) {
MultiButton mb = createEntry(FontImage.MATERIAL_PLACE,
r.getMainText(), r.getSecondaryText());
result.add(mb);
mb.addActionListener(e -> {
dest.setTextNoEvent(r.getFullText());
r.getLocation(l -> {
dest.setCurrentLocation(l);
dispatcher.fireActionEvent(e);
});
});
}
CompletionContainer
We fill up the container with buttons if one of the buttons is pressed we fetch the location from the webservice and fill it into the AutoCompleteAddressInput. We then fire
the event dispatcher to process the actual selection in the UI
result.animateLayout(150);
}
});
}
private MultiButton createEntry(char icon, String title) {
MultiButton b = new MultiButton(title);
b.setUIID("Container");
b.setUIIDLine1("WhereToButtonLine1");
b.setIconUIID("WhereToButtonIcon");
FontImage.setMaterialIcon(b, icon);
return b;
}
private MultiButton createEntry(char icon, String title, String subtitle) {
MultiButton b = new MultiButton(title);
b.setTextLine2(subtitle);
b.setUIID("Container");
b.setUIIDLine1("WhereToButtonLineNoBorder");
b.setUIIDLine2("WhereToButtonLine2");
b.setIconUIID("WhereToButtonIcon");
FontImage.setMaterialIcon(b, icon);
return b;
CompletionContainer
We have two types of entries here, one with only one line of text and one with two lines of text. This is mostly in place to fit the UIID's correctly with the right underline
behavior
b.setUIIDLine2("WhereToButtonLine2");
b.setIconUIID("WhereToButtonIcon");
FontImage.setMaterialIcon(b, icon);
return b;
}
public void initCompletionBar() {
if(!completionUsed) {
return;
}
completionUsed = false;
result.removeAll();
initCompletionBarImpl();
}
private void initCompletionBarImpl() {
MultiButton addHome = createEntry(FontImage.MATERIAL_HOME,
"Add Home");
MultiButton addWork = createEntry(FontImage.MATERIAL_WORK,
"Add Work");
MultiButton savedPlaces = createEntry(
FontImage.MATERIAL_NAVIGATE_NEXT, "Saved Places");
savedPlaces.setUIIDLine1("WhereToButtonLineNoBorder");
savedPlaces.setEmblemUIID("WhereToButtonLineNoBorder");
savedPlaces.setEmblem(FontImage.createMaterial(
CompletionContainer
This method is invoked externally to clear up the content of the completion UI and show the "clean" set of initial options
savedPlaces.setUIIDLine1("WhereToButtonLineNoBorder");
savedPlaces.setEmblemUIID("WhereToButtonLineNoBorder");
savedPlaces.setEmblem(FontImage.createMaterial(
FontImage.MATERIAL_NAVIGATE_NEXT,
savedPlaces.getIconComponent().getUnselectedStyle()));
Label whereSeparator = new Label("", "WhereSeparator");
whereSeparator.setShowEvenIfBlank(true);
result.addAll(addHome, addWork, savedPlaces, whereSeparator);
addHistoryToCompletionBar();
}
private void addHistoryToCompletionBar() {
MultiButton history1 = createEntry(FontImage.MATERIAL_HISTORY,
"Mikve Yisrael Str...");
result.add(history1);
}
public void showCompletionBar(Container parentLayer) {
result = new Container(BoxLayout.y());
initCompletionBarImpl();
CompletionContainer
History is positioned here so we could later on fill this with actual search history etc.
private void addHistoryToCompletionBar() {
MultiButton history1 = createEntry(FontImage.MATERIAL_HISTORY,
"Mikve Yisrael Str...");
result.add(history1);
}
public void showCompletionBar(Container parentLayer) {
result = new Container(BoxLayout.y());
initCompletionBarImpl();
result.setUIID("Form");
result.setScrollableY(true);
result.setScrollVisible(false);
Container enclose = BorderLayout.center(result);
enclose.setY(getDisplayHeight());
enclose.setWidth(getDisplayWidth());
enclose.setHeight(result.getPreferredH());
parentLayer.add(CENTER, enclose);
parentLayer.animateLayout(200);
}
public void addCompletionListener(ActionListener<ActionEvent> a) {
dispatcher.addListener(a);
CompletionContainer
This method constructs and animates the completion UI into place. Notice that we place the content in a Container which we wrap up in a BorderLayout this allows us to
manipulate the preferred size without breaking the scrolling behavior of the child Container
WhereToButtonLine2
© Codename One 2017 all rights reserved
In order to accomplish the design for the buttons I had to add the WhereToButtonLine2 UIID. It uses gray text on a transparent background
WhereToButtonLine2
© Codename One 2017 all rights reserved
Padding aligns with the text above, we keep the top padding to 0 so it won’t drift away from the first line in the where to button
WhereToButtonLine2
© Codename One 2017 all rights reserved
Margin is zero as usual
WhereToButtonLine2
© Codename One 2017 all rights reserved
We have an underline here instead of the underline of the first line of text
WhereToButtonLine2
© Codename One 2017 all rights reserved
We use a slightly smaller font but the standard main light font

More Related Content

Similar to Creating an Uber Clone - Part XX - Transcript.pdf

EclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with EclipseEclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with Eclipse
Heiko Behrens
 
Functional programming using underscorejs
Functional programming using underscorejsFunctional programming using underscorejs
Functional programming using underscorejs
偉格 高
 
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
Dmitry Soshnikov
 
Enterprise workflow with Apps Script
Enterprise workflow with Apps ScriptEnterprise workflow with Apps Script
Enterprise workflow with Apps Script
ccherubino
 

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

properties-how-do-i.pdf
properties-how-do-i.pdfproperties-how-do-i.pdf
properties-how-do-i.pdf
 
Creating an Uber Clone - Part XXXX.pdf
Creating an Uber Clone - Part XXXX.pdfCreating an Uber Clone - Part XXXX.pdf
Creating an Uber Clone - Part XXXX.pdf
 
EclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with EclipseEclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with Eclipse
 
Object-Oriented JavaScript
Object-Oriented JavaScriptObject-Oriented JavaScript
Object-Oriented JavaScript
 
Object-Oriented Javascript
Object-Oriented JavascriptObject-Oriented Javascript
Object-Oriented Javascript
 
【Unity】Scriptable object 入門と活用例
【Unity】Scriptable object 入門と活用例【Unity】Scriptable object 入門と活用例
【Unity】Scriptable object 入門と活用例
 
Functional programming using underscorejs
Functional programming using underscorejsFunctional programming using underscorejs
Functional programming using underscorejs
 
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
 
Functionality Focused Code Organization
Functionality Focused Code OrganizationFunctionality Focused Code Organization
Functionality Focused Code Organization
 
JavaScript Lessons 2023
JavaScript Lessons 2023JavaScript Lessons 2023
JavaScript Lessons 2023
 
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
 
Workshop: Async and Parallel in C#
Workshop: Async and Parallel in C#Workshop: Async and Parallel in C#
Workshop: Async and Parallel in C#
 
Clean coding-practices
Clean coding-practicesClean coding-practices
Clean coding-practices
 
Creating a Facebook Clone - Part XXXIII - Transcript.pdf
Creating a Facebook Clone - Part XXXIII - Transcript.pdfCreating a Facebook Clone - Part XXXIII - Transcript.pdf
Creating a Facebook Clone - Part XXXIII - Transcript.pdf
 
mobl
moblmobl
mobl
 
16 18
16 1816 18
16 18
 
Android workshop
Android workshopAndroid workshop
Android workshop
 
MVVM e Caliburn Micro for Windows Phone applications
MVVM e Caliburn Micro for Windows Phone applicationsMVVM e Caliburn Micro for Windows Phone applications
MVVM e Caliburn Micro for Windows Phone applications
 
Enterprise workflow with Apps Script
Enterprise workflow with Apps ScriptEnterprise workflow with Apps Script
Enterprise workflow with Apps Script
 
Creating an Uber Clone - Part XVIII - Transcript.pdf
Creating an Uber Clone - Part XVIII - Transcript.pdfCreating an Uber Clone - Part XVIII - Transcript.pdf
Creating an Uber Clone - Part XVIII - Transcript.pdf
 

More from 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 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
 
Creating a Whatsapp Clone - Part IX.pdf
Creating a Whatsapp Clone - Part IX.pdfCreating a Whatsapp Clone - Part IX.pdf
Creating a Whatsapp Clone - Part IX.pdf
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 

Creating an Uber Clone - Part XX - Transcript.pdf

  • 1. Creating an Uber Clone - Part XX We’ll continue the search UI implementation as we step into the CompletionContainer class
  • 2. public class CompletionContainer { private Container result; private boolean completionUsed; private final EventDispatcher dispatcher = new EventDispatcher(); void updateCompletion(String text, AutoCompleteAddressInput dest) { SearchService.suggestLocations(text, LocationService.getCurrentLocation(), resultList -> { if(resultList != null && resultList.size() > 0) { result.removeAll(); completionUsed = true; for(SearchService.SuggestionResult r : resultList) { MultiButton mb = createEntry(FontImage.MATERIAL_PLACE, r.getMainText(), r.getSecondaryText()); result.add(mb); mb.addActionListener(e -> { dest.setTextNoEvent(r.getFullText()); r.getLocation(l -> { dest.setCurrentLocation(l); dispatcher.fireActionEvent(e); }); }); } CompletionContainer The CompletionContainer tries to coordinate the two instances of the AutoCompleteAddressInput class by providing a single class that handles the completion UI. Most of the code in this class should be very familiar as some of it is refactored code from the MapForm while other code relates to the suggestLocations API we implemented earlier... The name of the class is misleading. CompletionContainer is not a Container. Here instead of deriving I encapsulated the UI logic and tried to expose only the business logic
  • 3. public class CompletionContainer { private Container result; private boolean completionUsed; private final EventDispatcher dispatcher = new EventDispatcher(); void updateCompletion(String text, AutoCompleteAddressInput dest) { SearchService.suggestLocations(text, LocationService.getCurrentLocation(), resultList -> { if(resultList != null && resultList.size() > 0) { result.removeAll(); completionUsed = true; for(SearchService.SuggestionResult r : resultList) { MultiButton mb = createEntry(FontImage.MATERIAL_PLACE, r.getMainText(), r.getSecondaryText()); result.add(mb); mb.addActionListener(e -> { dest.setTextNoEvent(r.getFullText()); r.getLocation(l -> { dest.setCurrentLocation(l); dispatcher.fireActionEvent(e); }); }); } CompletionContainer Event dispatchers allow us to broadcast events using the add/removeListener observer style API. We use this dispatcher to broadcast an event when a user presses a completion button
  • 4. public class CompletionContainer { private Container result; private boolean completionUsed; private final EventDispatcher dispatcher = new EventDispatcher(); void updateCompletion(String text, AutoCompleteAddressInput dest) { SearchService.suggestLocations(text, LocationService.getCurrentLocation(), resultList -> { if(resultList != null && resultList.size() > 0) { result.removeAll(); completionUsed = true; for(SearchService.SuggestionResult r : resultList) { MultiButton mb = createEntry(FontImage.MATERIAL_PLACE, r.getMainText(), r.getSecondaryText()); result.add(mb); mb.addActionListener(e -> { dest.setTextNoEvent(r.getFullText()); r.getLocation(l -> { dest.setCurrentLocation(l); dispatcher.fireActionEvent(e); }); }); } CompletionContainer This method is invoked when completion is in progress it invokes the WebService call to request completion suggestions for the given string
  • 5. public class CompletionContainer { private Container result; private boolean completionUsed; private final EventDispatcher dispatcher = new EventDispatcher(); void updateCompletion(String text, AutoCompleteAddressInput dest) { SearchService.suggestLocations(text, LocationService.getCurrentLocation(), resultList -> { if(resultList != null && resultList.size() > 0) { result.removeAll(); completionUsed = true; for(SearchService.SuggestionResult r : resultList) { MultiButton mb = createEntry(FontImage.MATERIAL_PLACE, r.getMainText(), r.getSecondaryText()); result.add(mb); mb.addActionListener(e -> { dest.setTextNoEvent(r.getFullText()); r.getLocation(l -> { dest.setCurrentLocation(l); dispatcher.fireActionEvent(e); }); }); } CompletionContainer We fill up the container with buttons if one of the buttons is pressed we fetch the location from the webservice and fill it into the AutoCompleteAddressInput. We then fire the event dispatcher to process the actual selection in the UI
  • 6. result.animateLayout(150); } }); } private MultiButton createEntry(char icon, String title) { MultiButton b = new MultiButton(title); b.setUIID("Container"); b.setUIIDLine1("WhereToButtonLine1"); b.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(b, icon); return b; } private MultiButton createEntry(char icon, String title, String subtitle) { MultiButton b = new MultiButton(title); b.setTextLine2(subtitle); b.setUIID("Container"); b.setUIIDLine1("WhereToButtonLineNoBorder"); b.setUIIDLine2("WhereToButtonLine2"); b.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(b, icon); return b; CompletionContainer We have two types of entries here, one with only one line of text and one with two lines of text. This is mostly in place to fit the UIID's correctly with the right underline behavior
  • 7. b.setUIIDLine2("WhereToButtonLine2"); b.setIconUIID("WhereToButtonIcon"); FontImage.setMaterialIcon(b, icon); return b; } public void initCompletionBar() { if(!completionUsed) { return; } completionUsed = false; result.removeAll(); initCompletionBarImpl(); } private void initCompletionBarImpl() { MultiButton addHome = createEntry(FontImage.MATERIAL_HOME, "Add Home"); MultiButton addWork = createEntry(FontImage.MATERIAL_WORK, "Add Work"); MultiButton savedPlaces = createEntry( FontImage.MATERIAL_NAVIGATE_NEXT, "Saved Places"); savedPlaces.setUIIDLine1("WhereToButtonLineNoBorder"); savedPlaces.setEmblemUIID("WhereToButtonLineNoBorder"); savedPlaces.setEmblem(FontImage.createMaterial( CompletionContainer This method is invoked externally to clear up the content of the completion UI and show the "clean" set of initial options
  • 8. savedPlaces.setUIIDLine1("WhereToButtonLineNoBorder"); savedPlaces.setEmblemUIID("WhereToButtonLineNoBorder"); savedPlaces.setEmblem(FontImage.createMaterial( FontImage.MATERIAL_NAVIGATE_NEXT, savedPlaces.getIconComponent().getUnselectedStyle())); Label whereSeparator = new Label("", "WhereSeparator"); whereSeparator.setShowEvenIfBlank(true); result.addAll(addHome, addWork, savedPlaces, whereSeparator); addHistoryToCompletionBar(); } private void addHistoryToCompletionBar() { MultiButton history1 = createEntry(FontImage.MATERIAL_HISTORY, "Mikve Yisrael Str..."); result.add(history1); } public void showCompletionBar(Container parentLayer) { result = new Container(BoxLayout.y()); initCompletionBarImpl(); CompletionContainer History is positioned here so we could later on fill this with actual search history etc.
  • 9. private void addHistoryToCompletionBar() { MultiButton history1 = createEntry(FontImage.MATERIAL_HISTORY, "Mikve Yisrael Str..."); result.add(history1); } public void showCompletionBar(Container parentLayer) { result = new Container(BoxLayout.y()); initCompletionBarImpl(); result.setUIID("Form"); result.setScrollableY(true); result.setScrollVisible(false); Container enclose = BorderLayout.center(result); enclose.setY(getDisplayHeight()); enclose.setWidth(getDisplayWidth()); enclose.setHeight(result.getPreferredH()); parentLayer.add(CENTER, enclose); parentLayer.animateLayout(200); } public void addCompletionListener(ActionListener<ActionEvent> a) { dispatcher.addListener(a); CompletionContainer This method constructs and animates the completion UI into place. Notice that we place the content in a Container which we wrap up in a BorderLayout this allows us to manipulate the preferred size without breaking the scrolling behavior of the child Container
  • 10. WhereToButtonLine2 © Codename One 2017 all rights reserved In order to accomplish the design for the buttons I had to add the WhereToButtonLine2 UIID. It uses gray text on a transparent background
  • 11. WhereToButtonLine2 © Codename One 2017 all rights reserved Padding aligns with the text above, we keep the top padding to 0 so it won’t drift away from the first line in the where to button
  • 12. WhereToButtonLine2 © Codename One 2017 all rights reserved Margin is zero as usual
  • 13. WhereToButtonLine2 © Codename One 2017 all rights reserved We have an underline here instead of the underline of the first line of text
  • 14. WhereToButtonLine2 © Codename One 2017 all rights reserved We use a slightly smaller font but the standard main light font