Connecting to a Webservice.pdf

Connecting to a Webservice
✦There are a lot of ways to do web service
communication in Codename One
✦The webservice wizard is a powerful tool but I
won’t be using it here because it might not fit for
all use cases
✦I’ll stick to core classes and won’t wander to
libraries or special syntaxes like xpath. We all
know Java but some of us might not know xpath

The Item Webservice
✦We can add an item using this curl request:
curl -H "Content-Type: application/json" -X PUT
-d '{"name":"Item Name", "marked":false, "deleted":false, "owner":"Shai"}'
http://localhost:8080/item
✦The output is:
{"id":1,"name":"Item Name","marked":false,"deleted":false,"owner":"Shai"}

public class Item {
private Long id;
private String name;
private boolean marked;
private boolean deleted;
private String owner;
public Item(Map<String, Object> m) {
this.id = Util.toLongValue(m.get("id"));
this.name = (String)m.get("name");
String b = (String)m.get("marked");
this.marked = b != null && b.equals("true");
b = (String)m.get("deleted");
this.deleted = b != null && b.equals("true");
this.owner = (String)m.get("owner");
}
public Map<String, Object> toMap() {
HashMap<String, Object> map = new HashMap<>();
map.put("id", getId());
map.put("name", getName());
map.put("owner", getOwner());
map.put("deleted", isDeleted());
map.put("marked", isMarked());
return map;
}
// …
}
Item Class

public class Item {
private Long id;
private String name;
private boolean marked;
private boolean deleted;
private String owner;
public Item(Map<String, Object> m) {
this.id = Util.toLongValue(m.get("id"));
this.name = (String)m.get("name");
String b = (String)m.get("marked");
this.marked = b != null && b.equals("true");
b = (String)m.get("deleted");
this.deleted = b != null && b.equals("true");
this.owner = (String)m.get("owner");
}
public Map<String, Object> toMap() {
HashMap<String, Object> map = new HashMap<>();
map.put("id", getId());
map.put("name", getName());
map.put("owner", getOwner());
map.put("deleted", isDeleted());
map.put("marked", isMarked());
return map;
}
// …
}
Item Class
Trimmed Code
I trimmed a lot of boilerplate
code, the constructors,
getters/setters to all the
elements

public Item addItemSync(Item i) {
final String json = Result.fromContent(i.toMap()).toString();
ConnectionRequest request = new ConnectionRequest(url + "item", true);
request.setRequestBody(json);
request.setContentType("application/json");
request.setHttpMethod("PUT");
NetworkManager.getInstance().addToQueueAndWait(request);
JSONParser.setUseLongs(true);
if(request.getResponseData() != null) {
JSONParser p = new JSONParser();
InputStream response = new ByteArrayInputStream(request.getResponseData());
try {
Map<String, Object> result = p.parseJSON(new InputStreamReader(response, "UTF-8"));
return new Item(result);
} catch(IOException err) {
Log.e(err);
}
}
return null;
}
Server class - addItemSync

Sync vs Async API’s
✦Sync API’s can be invoked on the EDT (Event
Dispatch - UI thread)
✦Easier flow for some use cases
✦Async API’s are slightly more performant
✦Async doesn’t encounter “weird” nesting issues
(I’ll go into these when discussing the EDT)

public void addItemAsync(Item i, final SuccessCallback<Item> onSuccess) {
final String json = Result.fromContent(i.toMap()).toString();
ConnectionRequest request = new ConnectionRequest(url + "item", true) {
private Item resultItem;
@Override
protected void buildRequestBody(OutputStream os) throws IOException {
os.write(json.getBytes("UTF-8"));
}
@Override
protected void readResponse(InputStream input) throws IOException {
Map<String, Object> result = p.parseJSON(new InputStreamReader(input, "UTF-8"));
resultItem = new Item(result);
}
@Override
protected void postResponse() {
onSuccess.onSucess(resultItem);
}
};
request.setHttpMethod("PUT");
NetworkManager.getInstance().addToQueue(request);
}
Server class - addItemAsync

Fetch My Items
✦We can fetch my items using:
curl http://localhost:8080/item?owner=Shai
✦The output is:
[{"id":1,"name":"Item Name","marked":false,"deleted":false,"owner":"Shai"},
{"id":2,"name":"Item Name","marked":false,"deleted":false,"owner":"Shai"},
{"id":3,"name":"Item Name","marked":false,"deleted":false,"owner":"Shai"}]

public Item[] getItemsSync() {
ConnectionRequest request = new ConnectionRequest(url + "item", false);
request.addArgument("owner", owner);
NetworkManager.getInstance().addToQueueAndWait(request);
if(request.getResponseData() != null) {
InputStream response = new ByteArrayInputStream(request.getResponseData());
try {
Map<String, Object> result = p.parseJSON(new InputStreamReader(response, "UTF-8"));
List<Map<String, Object>> resultList = (List<Map<String, Object>>)result.get("root");
Item[] arr = new Item[resultList.size()];
for(int iter = 0 ; iter < arr.length ; iter++) {
arr[iter] = new Item(resultList.get(iter));
}
return arr;
} catch(IOException err) {
Log.e(err);
}
}
return null;
}
Server class - getItemsSync

public void getItemsAsync(final SuccessCallback<Item[]> response) {
ConnectionRequest request = new ConnectionRequest(url + "item", false) {
Item[] arr;
@Override
protected void readResponse(InputStream input) throws IOException {
Map<String, Object> result = p.parseJSON(new InputStreamReader(input, "UTF-8"));
List<Map<String, Object>> resultList = (List<Map<String, Object>>)result.get("root");
arr = new Item[resultList.size()];
for(int iter = 0 ; iter < arr.length ; iter++) {
arr[iter] = new Item(resultList.get(iter));
}
}
@Override
protected void postResponse() {
response.onSucess(arr);
}
};
request.addArgument("owner", owner);
NetworkManager.getInstance().addToQueue(request);
}
Server class - getItemsAsync

Connecting to The UI
✦We can bind this to the todo list demo
✦Just add/list entries, first we need global
members
private static final String OWNER = "Owner";
private Server serverInstance = new Server("http://localhost:8080/", OWNER);

✦Replace the for loop that adds the elements with:
Component ip = FlowLayout.encloseCenterMiddle(new InfiniteProgress());
shoppingList.add(ip);
serverInstance.getItemsAsync(items -> {
ip.remove();
for(Item i : items) {
if(!i.isDeleted()) {
Component c = createCheck(i.getName(), i.isMarked());
c.setWidth(shoppingList.getWidth());
shoppingList.add(c);
shoppingList.add(createSeparator());
}
}
shoppingList.revalidate();
});

✦Replace the for loop that adds the elements with:
Component ip = FlowLayout.encloseCenterMiddle(new InfiniteProgress());
shoppingList.add(ip);
serverInstance.getItemsAsync(items -> {
ip.remove();
for(Item i : items) {
if(!i.isDeleted()) {
Component c = createCheck(i.getName(), i.isMarked());
c.setWidth(shoppingList.getWidth());
shoppingList.add(c);
shoppingList.add(createSeparator());
}
}
});
Async
I have to use async or call
serially here. The form hasn’t
shown yet and we need to
show it first before blocking
progress…

✦Adding a new element using the FAB:
fab.addActionListener(e -> {
shoppingList.scrollComponentToVisible(filler);
TextField text = new TextField("");
shoppingList.addComponent(1, text);
text.startEditingAsync();
text.addActionListener(ee -> {
if(text.getText().length() > 0) {
text.remove();
shoppingList.addComponent(1, createCheck(text.getText(), false));
shoppingList.addComponent(2, createSeparator());
shoppingList.getContentPane().animateLayout(150);
serverInstance.addItemAsync(new Item(null, text.getText(), false, false, OWNER),
i -> ToastBar.showMessage("Item added!", FontImage.MATERIAL_INFO));
}
});
});

✦Adding a new element using the FAB:
fab.addActionListener(e -> {
shoppingList.scrollComponentToVisible(filler);
TextField text = new TextField("");
shoppingList.addComponent(1, text);
text.startEditingAsync();
text.addActionListener(ee -> {
if(text.getText().length() > 0) {
text.remove();
shoppingList.addComponent(1, createCheck(text.getText(), false));
shoppingList.addComponent(2, createSeparator());
shoppingList.getContentPane().animateLayout(150);
serverInstance.addItemAsync(new Item(null, text.getText(), false, false, OWNER),
i -> ToastBar.showMessage("Item added!", FontImage.MATERIAL_INFO));
}
});
});
Async
I could have used sync here
just as well there was no
reason in terms of the UI
though so I used an async
call

Connecting to a Webservice.pdf

Implement Check
✦The check functionality should be stored in the server
✦It should be detected in the UI and communicated as
a state change to the server
✦This means creating a webservice call both in the
client and the server
✦Extra credit: implement delete via swipe and make it
attractive!
✦Triple credit: Port Item to use Property on the client

What did we learn?
✦How to use a JSON webservice
✦Async vs. Sync calls in NetworkManager
✦Event dispatch thread relation to networking
✦Wiring remote calls to UI

Connecting to a Webservice.pdf

Recommended

More Related Content

Similar to Connecting to a Webservice.pdf (20)

More from ShaiAlmog1 (20)

Recently uploaded (20)

Connecting to a Webservice.pdf