SlideShare a Scribd company logo
1 of 18
Download to read offline
Creating an Uber Clone - Part XIX
Search UI
✦Swipe
✦Completion
✦Map location picking
© Codename One 2017 all rights reserved
Search Completion
© Codename One 2017 all rights reserved
public class AutoCompleteAddressInput extends TextField {
private final Container layers;
private int firstX = -1, firstY = -1;
private boolean dragStarted;
private CompletionContainer completion;
private ActionListener<ActionEvent> dragListener, releaseListener;
private Location currentLocation;
private boolean blockChangeEvent;
public AutoCompleteAddressInput(String value, String hint,
Container layers, CompletionContainer completion) {
super(value, hint, 40, TextField.ANY);
this.completion = completion;
this.layers = layers;
getHintLabel().setUIID("FromToTextFieldHint");
setUIID("FromToTextField");
addDataChangedListener((i, ii) -> {
if(blockChangeEvent) {
return;
}
if(!getText().equals(value)) {
completion.updateCompletion(getText(), this);
}
AutoCompleteAddressInput
public class AutoCompleteAddressInput extends TextField {
private final Container layers;
private int firstX = -1, firstY = -1;
private boolean dragStarted;
private CompletionContainer completion;
private ActionListener<ActionEvent> dragListener, releaseListener;
private Location currentLocation;
private boolean blockChangeEvent;
public AutoCompleteAddressInput(String value, String hint,
Container layers, CompletionContainer completion) {
super(value, hint, 40, TextField.ANY);
this.completion = completion;
this.layers = layers;
getHintLabel().setUIID("FromToTextFieldHint");
setUIID("FromToTextField");
addDataChangedListener((i, ii) -> {
if(blockChangeEvent) {
return;
}
if(!getText().equals(value)) {
completion.updateCompletion(getText(), this);
}
AutoCompleteAddressInput
public class AutoCompleteAddressInput extends TextField {
private final Container layers;
private int firstX = -1, firstY = -1;
private boolean dragStarted;
private CompletionContainer completion;
private ActionListener<ActionEvent> dragListener, releaseListener;
private Location currentLocation;
private boolean blockChangeEvent;
public AutoCompleteAddressInput(String value, String hint,
Container layers, CompletionContainer completion) {
super(value, hint, 40, TextField.ANY);
this.completion = completion;
this.layers = layers;
getHintLabel().setUIID("FromToTextFieldHint");
setUIID("FromToTextField");
addDataChangedListener((i, ii) -> {
if(blockChangeEvent) {
return;
}
if(!getText().equals(value)) {
completion.updateCompletion(getText(), this);
}
AutoCompleteAddressInput
addDataChangedListener((i, ii) -> {
if(blockChangeEvent) {
return;
}
if(!getText().equals(value)) {
completion.updateCompletion(getText(), this);
}
});
}
public void setTextNoEvent(String text) {
blockChangeEvent = true;
setText(text);
blockChangeEvent = false;
}
@Override
protected void focusGained() {
completion.initCompletionBar();
}
@Override
protected void deinitialize() {
AutoCompleteAddressInput
protected void deinitialize() {
if(dragListener != null) {
Form f = getComponentForm();
f.removePointerDraggedListener(dragListener);
f.removePointerReleasedListener(dragListener);
}
super.deinitialize();
}
@Override
protected void initComponent() {
super.initComponent();
if(dragListener == null) {
dragListener = e -> {
Component cmp = layers.getComponentAt(1);
boolean dragUp = layers.getLayout().
getComponentConstraint(cmp).equals(SOUTH);
if(dragStarted) {
e.consume();
cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS);
if(dragUp) {
cmp.setPreferredSize(new Dimension(getDisplayWidth(),
firstY - e.getY() + getDisplayHeight() / 8));
AutoCompleteAddressInput
protected void deinitialize() {
if(dragListener != null) {
Form f = getComponentForm();
f.removePointerDraggedListener(dragListener);
f.removePointerReleasedListener(dragListener);
}
super.deinitialize();
}
@Override
protected void initComponent() {
super.initComponent();
if(dragListener == null) {
dragListener = e -> {
Component cmp = layers.getComponentAt(1);
boolean dragUp = layers.getLayout().
getComponentConstraint(cmp).equals(SOUTH);
if(dragStarted) {
e.consume();
cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS);
if(dragUp) {
cmp.setPreferredSize(new Dimension(getDisplayWidth(),
firstY - e.getY() + getDisplayHeight() / 8));
AutoCompleteAddressInput
protected void deinitialize() {
if(dragListener != null) {
Form f = getComponentForm();
f.removePointerDraggedListener(dragListener);
f.removePointerReleasedListener(dragListener);
}
super.deinitialize();
}
@Override
protected void initComponent() {
super.initComponent();
if(dragListener == null) {
dragListener = e -> {
Component cmp = layers.getComponentAt(1);
boolean dragUp = layers.getLayout().
getComponentConstraint(cmp).equals(SOUTH);
if(dragStarted) {
e.consume();
cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS);
if(dragUp) {
cmp.setPreferredSize(new Dimension(getDisplayWidth(),
firstY - e.getY() + getDisplayHeight() / 8));
AutoCompleteAddressInput
protected void deinitialize() {
if(dragListener != null) {
Form f = getComponentForm();
f.removePointerDraggedListener(dragListener);
f.removePointerReleasedListener(dragListener);
}
super.deinitialize();
}
@Override
protected void initComponent() {
super.initComponent();
if(dragListener == null) {
dragListener = e -> {
Component cmp = layers.getComponentAt(1);
boolean dragUp = layers.getLayout().
getComponentConstraint(cmp).equals(SOUTH);
if(dragStarted) {
e.consume();
cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS);
if(dragUp) {
cmp.setPreferredSize(new Dimension(getDisplayWidth(),
firstY - e.getY() + getDisplayHeight() / 8));
AutoCompleteAddressInput
protected void deinitialize() {
if(dragListener != null) {
Form f = getComponentForm();
f.removePointerDraggedListener(dragListener);
f.removePointerReleasedListener(dragListener);
}
super.deinitialize();
}
@Override
protected void initComponent() {
super.initComponent();
if(dragListener == null) {
dragListener = e -> {
Component cmp = layers.getComponentAt(1);
boolean dragUp = layers.getLayout().
getComponentConstraint(cmp).equals(SOUTH);
if(dragStarted) {
e.consume();
cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS);
if(dragUp) {
cmp.setPreferredSize(new Dimension(getDisplayWidth(),
firstY - e.getY() + getDisplayHeight() / 8));
AutoCompleteAddressInput
protected void deinitialize() {
if(dragListener != null) {
Form f = getComponentForm();
f.removePointerDraggedListener(dragListener);
f.removePointerReleasedListener(dragListener);
}
super.deinitialize();
}
@Override
protected void initComponent() {
super.initComponent();
if(dragListener == null) {
dragListener = e -> {
Component cmp = layers.getComponentAt(1);
boolean dragUp = layers.getLayout().
getComponentConstraint(cmp).equals(SOUTH);
if(dragStarted) {
e.consume();
cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS);
if(dragUp) {
cmp.setPreferredSize(new Dimension(getDisplayWidth(),
firstY - e.getY() + getDisplayHeight() / 8));
AutoCompleteAddressInput
cmp.setPreferredSize(new Dimension(getDisplayWidth(),
firstY - e.getY() + getDisplayHeight() / 8));
} else {
cmp.getUnselectedStyle().setMarginTop(
Math.max(0, e.getY() - firstY));
}
layers.revalidate();
} else {
Component draggedCmp =
getComponentForm().getComponentAt(e.getX(), e.getY());
if(!draggedCmp.isChildOf((Container)cmp)) {
return;
}
if(firstX == -1) {
firstX = e.getX();
firstY = e.getY();
}
if((!dragUp && e.getY() - firstY > convertToPixels(2)) ||
(dragUp && firstY - e.getY() > convertToPixels(2))) {
e.consume();
dragStarted = true;
}
AutoCompleteAddressInput
cmp.setPreferredSize(new Dimension(getDisplayWidth(),
firstY - e.getY() + getDisplayHeight() / 8));
} else {
cmp.getUnselectedStyle().setMarginTop(
Math.max(0, e.getY() - firstY));
}
layers.revalidate();
} else {
Component draggedCmp =
getComponentForm().getComponentAt(e.getX(), e.getY());
if(!draggedCmp.isChildOf((Container)cmp)) {
return;
}
if(firstX == -1) {
firstX = e.getX();
firstY = e.getY();
}
if((!dragUp && e.getY() - firstY > convertToPixels(2)) ||
(dragUp && firstY - e.getY() > convertToPixels(2))) {
e.consume();
dragStarted = true;
}
AutoCompleteAddressInput
(dragUp && firstY - e.getY() > convertToPixels(2))) {
e.consume();
dragStarted = true;
}
}
};
getComponentForm().addPointerDraggedListener(dragListener);
releaseListener = e -> {
if(dragStarted) {
e.consume();
Component cmp = layers.getComponentAt(1);
boolean dragUp = layers.getLayout().
getComponentConstraint(cmp).equals(SOUTH);
cmp.remove();
cmp.setUIID(cmp.getUIID());
boolean animateDown;
if(dragUp) {
animateDown = !(firstY - e.getY() > convertToPixels(8));
} else {
animateDown = e.getY() - firstY > convertToPixels(8);
}
if(animateDown) {
layers.add(SOUTH, cmp);
AutoCompleteAddressInput
if(dragUp) {
animateDown = !(firstY - e.getY() > convertToPixels(8));
} else {
animateDown = e.getY() - firstY > convertToPixels(8);
}
if(animateDown) {
layers.add(SOUTH, cmp);
cmp.setPreferredSize(
new Dimension(getDisplayWidth(), getDisplayHeight() / 8));
Style s = cmp.getUnselectedStyle();
s.setMarginUnit(Style.UNIT_TYPE_DIPS);
s.setMarginLeft(3);
s.setMarginRight(3);
} else {
layers.add(CENTER, cmp);
cmp.setPreferredSize(null);
}
layers.animateLayout(200);
firstX = -1;
firstY = -1;
dragStarted = false;
}
};
AutoCompleteAddressInput
s.setMarginRight(3);
} else {
layers.add(CENTER, cmp);
cmp.setPreferredSize(null);
}
layers.animateLayout(200);
firstX = -1;
firstY = -1;
dragStarted = false;
}
};
getComponentForm().addPointerReleasedListener(releaseListener);
}
}
public Location getCurrentLocation() {
return currentLocation;
}
public void setCurrentLocation(Location currentLocation) {
this.currentLocation = currentLocation;
}
}
AutoCompleteAddressInput

More Related Content

Similar to Creating an Uber Clone - Part XIX.pdf

Player x 0 y ga.docx
Player x 0 y ga.docxPlayer x 0 y ga.docx
Player x 0 y ga.docx
mattjtoni51554
 
How to Clone Flappy Bird in Swift
How to Clone Flappy Bird in SwiftHow to Clone Flappy Bird in Swift
How to Clone Flappy Bird in Swift
Giordano Scalzo
 
C++ Searching & Sorting5. Sort the following list using the select.pdf
C++ Searching & Sorting5. Sort the following list using the select.pdfC++ Searching & Sorting5. Sort the following list using the select.pdf
C++ Searching & Sorting5. Sort the following list using the select.pdf
Rahul04August
 
[C++ gui programming with qt4] chap9
[C++ gui programming with qt4] chap9[C++ gui programming with qt4] chap9
[C++ gui programming with qt4] chap9
Shih-Hsiang Lin
 
Bindings: the zen of montage
Bindings: the zen of montageBindings: the zen of montage
Bindings: the zen of montage
Kris Kowal
 
Creating custom views
Creating custom viewsCreating custom views
Creating custom views
Mu Chun Wang
 

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

Player x 0 y ga.docx
Player x 0 y ga.docxPlayer x 0 y ga.docx
Player x 0 y ga.docx
 
662305 11
662305 11662305 11
662305 11
 
Applications
ApplicationsApplications
Applications
 
Creating an Uber Clone - Part VIII - Transcript.pdf
Creating an Uber Clone - Part VIII - Transcript.pdfCreating an Uber Clone - Part VIII - Transcript.pdf
Creating an Uber Clone - Part VIII - Transcript.pdf
 
How to Clone Flappy Bird in Swift
How to Clone Flappy Bird in SwiftHow to Clone Flappy Bird in Swift
How to Clone Flappy Bird in Swift
 
Write a program that reads a graph from a file and determines whether.docx
 Write a program that reads a graph from a file and determines whether.docx Write a program that reads a graph from a file and determines whether.docx
Write a program that reads a graph from a file and determines whether.docx
 
From Java to Kotlin beyond alt+shift+cmd+k - Kotlin Community Conf Milan
From Java to Kotlin beyond alt+shift+cmd+k - Kotlin Community Conf MilanFrom Java to Kotlin beyond alt+shift+cmd+k - Kotlin Community Conf Milan
From Java to Kotlin beyond alt+shift+cmd+k - Kotlin Community Conf Milan
 
Reactive programming with RxJS - ByteConf 2018
Reactive programming with RxJS - ByteConf 2018Reactive programming with RxJS - ByteConf 2018
Reactive programming with RxJS - ByteConf 2018
 
Migrating from Flux to Redux. Why and how.
Migrating from Flux to Redux. Why and how.Migrating from Flux to Redux. Why and how.
Migrating from Flux to Redux. Why and how.
 
C++ Searching & Sorting5. Sort the following list using the select.pdf
C++ Searching & Sorting5. Sort the following list using the select.pdfC++ Searching & Sorting5. Sort the following list using the select.pdf
C++ Searching & Sorting5. Sort the following list using the select.pdf
 
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
 
[C++ gui programming with qt4] chap9
[C++ gui programming with qt4] chap9[C++ gui programming with qt4] chap9
[C++ gui programming with qt4] chap9
 
Blocks+gcd入門
Blocks+gcd入門Blocks+gcd入門
Blocks+gcd入門
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Bindings: the zen of montage
Bindings: the zen of montageBindings: the zen of montage
Bindings: the zen of montage
 
Creating custom views
Creating custom viewsCreating custom views
Creating custom views
 
csc 208
csc 208csc 208
csc 208
 
Go: It's Not Just For Google
Go: It's Not Just For GoogleGo: It's Not Just For Google
Go: It's Not Just For Google
 
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
 

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 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

Recently uploaded (20)

Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 

Creating an Uber Clone - Part XIX.pdf

  • 1. Creating an Uber Clone - Part XIX
  • 2. Search UI ✦Swipe ✦Completion ✦Map location picking © Codename One 2017 all rights reserved
  • 3. Search Completion © Codename One 2017 all rights reserved
  • 4. public class AutoCompleteAddressInput extends TextField { private final Container layers; private int firstX = -1, firstY = -1; private boolean dragStarted; private CompletionContainer completion; private ActionListener<ActionEvent> dragListener, releaseListener; private Location currentLocation; private boolean blockChangeEvent; public AutoCompleteAddressInput(String value, String hint, Container layers, CompletionContainer completion) { super(value, hint, 40, TextField.ANY); this.completion = completion; this.layers = layers; getHintLabel().setUIID("FromToTextFieldHint"); setUIID("FromToTextField"); addDataChangedListener((i, ii) -> { if(blockChangeEvent) { return; } if(!getText().equals(value)) { completion.updateCompletion(getText(), this); } AutoCompleteAddressInput
  • 5. public class AutoCompleteAddressInput extends TextField { private final Container layers; private int firstX = -1, firstY = -1; private boolean dragStarted; private CompletionContainer completion; private ActionListener<ActionEvent> dragListener, releaseListener; private Location currentLocation; private boolean blockChangeEvent; public AutoCompleteAddressInput(String value, String hint, Container layers, CompletionContainer completion) { super(value, hint, 40, TextField.ANY); this.completion = completion; this.layers = layers; getHintLabel().setUIID("FromToTextFieldHint"); setUIID("FromToTextField"); addDataChangedListener((i, ii) -> { if(blockChangeEvent) { return; } if(!getText().equals(value)) { completion.updateCompletion(getText(), this); } AutoCompleteAddressInput
  • 6. public class AutoCompleteAddressInput extends TextField { private final Container layers; private int firstX = -1, firstY = -1; private boolean dragStarted; private CompletionContainer completion; private ActionListener<ActionEvent> dragListener, releaseListener; private Location currentLocation; private boolean blockChangeEvent; public AutoCompleteAddressInput(String value, String hint, Container layers, CompletionContainer completion) { super(value, hint, 40, TextField.ANY); this.completion = completion; this.layers = layers; getHintLabel().setUIID("FromToTextFieldHint"); setUIID("FromToTextField"); addDataChangedListener((i, ii) -> { if(blockChangeEvent) { return; } if(!getText().equals(value)) { completion.updateCompletion(getText(), this); } AutoCompleteAddressInput
  • 7. addDataChangedListener((i, ii) -> { if(blockChangeEvent) { return; } if(!getText().equals(value)) { completion.updateCompletion(getText(), this); } }); } public void setTextNoEvent(String text) { blockChangeEvent = true; setText(text); blockChangeEvent = false; } @Override protected void focusGained() { completion.initCompletionBar(); } @Override protected void deinitialize() { AutoCompleteAddressInput
  • 8. protected void deinitialize() { if(dragListener != null) { Form f = getComponentForm(); f.removePointerDraggedListener(dragListener); f.removePointerReleasedListener(dragListener); } super.deinitialize(); } @Override protected void initComponent() { super.initComponent(); if(dragListener == null) { dragListener = e -> { Component cmp = layers.getComponentAt(1); boolean dragUp = layers.getLayout(). getComponentConstraint(cmp).equals(SOUTH); if(dragStarted) { e.consume(); cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS); if(dragUp) { cmp.setPreferredSize(new Dimension(getDisplayWidth(), firstY - e.getY() + getDisplayHeight() / 8)); AutoCompleteAddressInput
  • 9. protected void deinitialize() { if(dragListener != null) { Form f = getComponentForm(); f.removePointerDraggedListener(dragListener); f.removePointerReleasedListener(dragListener); } super.deinitialize(); } @Override protected void initComponent() { super.initComponent(); if(dragListener == null) { dragListener = e -> { Component cmp = layers.getComponentAt(1); boolean dragUp = layers.getLayout(). getComponentConstraint(cmp).equals(SOUTH); if(dragStarted) { e.consume(); cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS); if(dragUp) { cmp.setPreferredSize(new Dimension(getDisplayWidth(), firstY - e.getY() + getDisplayHeight() / 8)); AutoCompleteAddressInput
  • 10. protected void deinitialize() { if(dragListener != null) { Form f = getComponentForm(); f.removePointerDraggedListener(dragListener); f.removePointerReleasedListener(dragListener); } super.deinitialize(); } @Override protected void initComponent() { super.initComponent(); if(dragListener == null) { dragListener = e -> { Component cmp = layers.getComponentAt(1); boolean dragUp = layers.getLayout(). getComponentConstraint(cmp).equals(SOUTH); if(dragStarted) { e.consume(); cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS); if(dragUp) { cmp.setPreferredSize(new Dimension(getDisplayWidth(), firstY - e.getY() + getDisplayHeight() / 8)); AutoCompleteAddressInput
  • 11. protected void deinitialize() { if(dragListener != null) { Form f = getComponentForm(); f.removePointerDraggedListener(dragListener); f.removePointerReleasedListener(dragListener); } super.deinitialize(); } @Override protected void initComponent() { super.initComponent(); if(dragListener == null) { dragListener = e -> { Component cmp = layers.getComponentAt(1); boolean dragUp = layers.getLayout(). getComponentConstraint(cmp).equals(SOUTH); if(dragStarted) { e.consume(); cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS); if(dragUp) { cmp.setPreferredSize(new Dimension(getDisplayWidth(), firstY - e.getY() + getDisplayHeight() / 8)); AutoCompleteAddressInput
  • 12. protected void deinitialize() { if(dragListener != null) { Form f = getComponentForm(); f.removePointerDraggedListener(dragListener); f.removePointerReleasedListener(dragListener); } super.deinitialize(); } @Override protected void initComponent() { super.initComponent(); if(dragListener == null) { dragListener = e -> { Component cmp = layers.getComponentAt(1); boolean dragUp = layers.getLayout(). getComponentConstraint(cmp).equals(SOUTH); if(dragStarted) { e.consume(); cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS); if(dragUp) { cmp.setPreferredSize(new Dimension(getDisplayWidth(), firstY - e.getY() + getDisplayHeight() / 8)); AutoCompleteAddressInput
  • 13. protected void deinitialize() { if(dragListener != null) { Form f = getComponentForm(); f.removePointerDraggedListener(dragListener); f.removePointerReleasedListener(dragListener); } super.deinitialize(); } @Override protected void initComponent() { super.initComponent(); if(dragListener == null) { dragListener = e -> { Component cmp = layers.getComponentAt(1); boolean dragUp = layers.getLayout(). getComponentConstraint(cmp).equals(SOUTH); if(dragStarted) { e.consume(); cmp.getUnselectedStyle().setMarginUnit(Style.UNIT_TYPE_PIXELS); if(dragUp) { cmp.setPreferredSize(new Dimension(getDisplayWidth(), firstY - e.getY() + getDisplayHeight() / 8)); AutoCompleteAddressInput
  • 14. cmp.setPreferredSize(new Dimension(getDisplayWidth(), firstY - e.getY() + getDisplayHeight() / 8)); } else { cmp.getUnselectedStyle().setMarginTop( Math.max(0, e.getY() - firstY)); } layers.revalidate(); } else { Component draggedCmp = getComponentForm().getComponentAt(e.getX(), e.getY()); if(!draggedCmp.isChildOf((Container)cmp)) { return; } if(firstX == -1) { firstX = e.getX(); firstY = e.getY(); } if((!dragUp && e.getY() - firstY > convertToPixels(2)) || (dragUp && firstY - e.getY() > convertToPixels(2))) { e.consume(); dragStarted = true; } AutoCompleteAddressInput
  • 15. cmp.setPreferredSize(new Dimension(getDisplayWidth(), firstY - e.getY() + getDisplayHeight() / 8)); } else { cmp.getUnselectedStyle().setMarginTop( Math.max(0, e.getY() - firstY)); } layers.revalidate(); } else { Component draggedCmp = getComponentForm().getComponentAt(e.getX(), e.getY()); if(!draggedCmp.isChildOf((Container)cmp)) { return; } if(firstX == -1) { firstX = e.getX(); firstY = e.getY(); } if((!dragUp && e.getY() - firstY > convertToPixels(2)) || (dragUp && firstY - e.getY() > convertToPixels(2))) { e.consume(); dragStarted = true; } AutoCompleteAddressInput
  • 16. (dragUp && firstY - e.getY() > convertToPixels(2))) { e.consume(); dragStarted = true; } } }; getComponentForm().addPointerDraggedListener(dragListener); releaseListener = e -> { if(dragStarted) { e.consume(); Component cmp = layers.getComponentAt(1); boolean dragUp = layers.getLayout(). getComponentConstraint(cmp).equals(SOUTH); cmp.remove(); cmp.setUIID(cmp.getUIID()); boolean animateDown; if(dragUp) { animateDown = !(firstY - e.getY() > convertToPixels(8)); } else { animateDown = e.getY() - firstY > convertToPixels(8); } if(animateDown) { layers.add(SOUTH, cmp); AutoCompleteAddressInput
  • 17. if(dragUp) { animateDown = !(firstY - e.getY() > convertToPixels(8)); } else { animateDown = e.getY() - firstY > convertToPixels(8); } if(animateDown) { layers.add(SOUTH, cmp); cmp.setPreferredSize( new Dimension(getDisplayWidth(), getDisplayHeight() / 8)); Style s = cmp.getUnselectedStyle(); s.setMarginUnit(Style.UNIT_TYPE_DIPS); s.setMarginLeft(3); s.setMarginRight(3); } else { layers.add(CENTER, cmp); cmp.setPreferredSize(null); } layers.animateLayout(200); firstX = -1; firstY = -1; dragStarted = false; } }; AutoCompleteAddressInput
  • 18. s.setMarginRight(3); } else { layers.add(CENTER, cmp); cmp.setPreferredSize(null); } layers.animateLayout(200); firstX = -1; firstY = -1; dragStarted = false; } }; getComponentForm().addPointerReleasedListener(releaseListener); } } public Location getCurrentLocation() { return currentLocation; } public void setCurrentLocation(Location currentLocation) { this.currentLocation = currentLocation; } } AutoCompleteAddressInput