HTML and webbrowser - codenameone

I tried to use html page in my code for that i found way from kichensink application, i am using same code and same page.html file applicatin working on simulator but not working on devices. Ondevices i got a blank screen. Below is my code. Please help me on this.
void ShowForm()
{
Form f = new Form("testweb");
Container cnt = new Container(new BorderLayout());
cnt = createDemo();
f.setLayout(new BorderLayout());
f.addComponent(BorderLayout.CENTER, cnt);
f.show();
}
public Container createDemo() {
Container cnt = new Container(new BorderLayout());
final WebBrowser wb = new WebBrowser();
if(wb.getInternal() instanceof BrowserComponent) {
Button btn = new Button("Add");
final TextArea content = new TextArea();
Container north = new Container(new BorderLayout());
north.addComponent(BorderLayout.CENTER, content);
north.addComponent(BorderLayout.EAST, btn);
cnt.addComponent(BorderLayout.NORTH, north);
content.setHint("Add to web document");
btn.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
((BrowserComponent)wb.getInternal()).execute("fnc('" + content.getText() + "');");
}
});
((BrowserComponent)wb.getInternal()).setBrowserNavigationCallback(new BrowserNavigationCallback() {
public boolean shouldNavigate(String url) {
if(url.startsWith("http://sayhello")) {
// warning!!! This is not on the EDT and this method MUST return immediately!
Display.getInstance().callSerially(new Runnable() {
public void run() {
((BrowserComponent)wb.getInternal()).execute("fnc('this was written by Java code!');");
}
});
return false;
}
return true;
}
});
}
cnt.addComponent(BorderLayout.CENTER, wb);
wb.setURL("jar:///page.html");
return cnt;
}
Hi,I did few changes setlayout for container and add to another cotainer with scrollable true for container and scrollable false for form but now it's giving me error on devices and error is: "web page not available" page.html not found. Whereas page.html is already placed in src with .res file and application on simulator working fine.
Regards,
Jeny

You can't make a border layout scrollable, including nested scrollables and scrolling native+Codename One widgets in sync is probably not a good idea.
Which device are you having a problem on? There was an issue with browser component on Android for some use cases, its fixed now.

Related

Codename One's MediaPlayer works in Simulator but on Android

I want to have a simple form that shows a video from a public URL. So I found out the MediaPlayer controller and I copied the example from the docs
final Form hi = new Form("MediaPlayer", new BorderLayout());
hi.setToolbar(new Toolbar());
Style s = UIManager.getInstance().getComponentStyle("Title");
FontImage icon =
FontImage.createMaterial(FontImage.MATERIAL_VIDEO_LIBRARY, s);
hi.getToolbar().addCommandToRightBar(new Command("", icon) {
#Override
public void actionPerformed(ActionEvent evt) {
Display.getInstance().openGallery((e) -> {
if(e != null && e.getSource() != null) {
String file = (String)e.getSource();
try {
Media video = MediaManager.createMedia(file, true);
hi.removeAll();
hi.add(BorderLayout.CENTER, new MediaPlayer(video));
hi.revalidate();
} catch(IOException err) {
Log.e(err);
}
}
}, Display.GALLERY_VIDEO);
}
});
hi.show();
It worked flawlessly in the simulator, the button appears and when I select a video file the component appears.
But when testing it on actual Android device, after I select the video nothing happens. I wonder if I missed some configuration. I am looking for the simplest possible way to run videos on Codename One for Android.
EDIT: It looks like the event listener in Display#openGallery is not being called.

Codename One: BrowserComponent and WebBrowser does not work on real Android device

I'm trying to load a WebView using Codename One but it does not work on a real Android device (though it worked in the Codename One simulator - the page was loaded).
I've tried both BrowserComponent and WebBrowser and both didn't work. The code are:
public class WebViewScreenOpR implements Runnable {
private String urlString;
public WebViewScreenOpR(String urlString) {
super();
this.urlString = urlString;
}
private Form webViewForm;
private void prepareAsWebBrowser() {
WebBrowser webBrowser = new WebBrowser(urlString);
webViewForm = new Form("Starlent", new BoxLayout(BoxLayout.Y_AXIS));
webViewForm.add(webBrowser);
}
private void prepareAsBrowserComponent() {
webViewForm = new Form("Starlent", new BoxLayout(BoxLayout.Y_AXIS));
BrowserComponent browserComponent = new BrowserComponent();
browserComponent.setURL(urlString);
webViewForm.add(browserComponent);
}
#Override
public void run() {
prepareAsBrowserComponent();
show();
}
private void show() {
webViewForm.show();
}
and to display it:
private class GoLiveButtonActionListener implements ActionListener {
#Override
public void actionPerformed(ActionEvent evt) {
WebViewScreenOpR webViewScreenOpR = new WebViewScreenOpR("http://www.apple.com");
Display.getInstance().callSerially(webViewScreenOpR);
}
}
I've also tried the "reload()" and "setEnabled(true/false)" methods but to no avail.
On testing using a real Android device, it briefly showed a progress dialog box with the text "loading...". The dialog box then disappeared and nothing appears. What's wrong with my code? How can I get it work in a real Android?
Try a BorderLayout center instead your boxlayout the initial size of the browser might just be 0 height

Fade animation not working properly when used with other animation

I combine the a component sliding component with other component fade animation. But the component appears for a second before it fades in. Here the form is in Layered layout. Since there are other components as well that overlap each other. All works fine but the ones i apply fade in have the same issue. I have attached the gif of how it looks below.
beforeSplash(Form f) :
f.setLayout(new LayeredLayout());
Container bottomContainer = new Container(new BoxLayout(BoxLayout.X_AXIS));
f.add(FlowLayout.encloseBottom(bottomContainer));
Container appleContainer = new Container(new FlowLayout(Component.CENTER, Component.BOTTOM));
appleLabel = new Label(apple);
appleLabel.setVisible(false);
appleContainer.add(appleLabel);
bottleLabel = new Label(bottle);
bottomContainer.add(appleContainer);
bottomContainer.add(bottleLabel);
bottleLabel.setVisible(false);
postSplash(Form f) :
bottleLabel.setVisible(true);
arrangeForSlide(bottleLabel);
bottleLabel.getParent().animateLayoutAndWait(2000);
appleLabel.setVisible(false);
appleLabel.setVisible(true);
appleLabel.getParent().animateLayoutFadeAndWait(2500, 0);
f.revalidate();
Slide animation:
private void arrangeForSlide(Label c) {
c.setX(-c.getWidth());
}
Update:
bottleLabel.setVisible(true);
arrangeForSlide(bottleLabel);
bottleLabel.getParent().animateLayoutAndWait(2000);
new Thread() {
public void run() {
Display.getInstance().callSerially(new Runnable() {
public void run() {
appleContainer.setVisible(true);
appleContainer.animateLayoutFadeAndWait(2000, 0);
}
});
}
}.start();
Now i need to add other components animation after above applecontainer animation finishes and so on. eg:
questionBg.setVisible(true);
questionBg.getParent().animateLayoutFadeAndWait(3000, 20);
Update 2:
I added only one component appleLabel and applied fade effect and the result is the same. so may be it is not EDT issue. I have tried it in barebone template too.
Container appleContainer = new Container(new FlowLayout(Component.CENTER, Component.BOTTOM));
appleLabel = new Label(apple);
appleContainer.add(appleLabel);
appleLabel.setVisible(false);
f.add(appleContainer);
f.show();
appleLabel.setVisible(true);
appleLabel.getParent().animateLayoutFadeAndWait(5000, 0);
It doesnt work so I have tried in callSerially but it gives same issue as well
Display.getInstance().callSerially(new Runnable() {
#Override
public void run() {
appleLabel.setVisible(true);
appleLabel.getParent().animateLayoutFadeAndWait(5000, 0);
}
Try setting the appleContainer to visible false too and see if this helps.

Handle event for html button codename one

In form I embedded WebBrowser component with lots of html contents (Mainly Table, buttons ) for rich ui. Is it possible to handle event on clicking html button ?
Sure, look at the kitchen sink demo for a sample.
Generally just navigate to a URL on the event and implement your own BrowserNavigationCallback to handle navigation to that specific URL.
This is the code from the Kitchen Sink demo notice the setBrowserNavigationCallback block:
final WebBrowser wb = new WebBrowser();
if(wb.getInternal() instanceof BrowserComponent) {
Button btn = new Button("Add");
final TextArea content = new TextArea();
Container north = new Container(new BorderLayout());
north.addComponent(BorderLayout.CENTER, content);
north.addComponent(BorderLayout.EAST, btn);
cnt.addComponent(BorderLayout.NORTH, north);
content.setHint("Add to web document");
btn.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
((BrowserComponent)wb.getInternal()).execute("fnc('" + content.getText() + "');");
}
});
((BrowserComponent)wb.getInternal()).setBrowserNavigationCallback(new BrowserNavigationCallback() {
public boolean shouldNavigate(String url) {
if(url.startsWith("http://sayhello")) {
// warning!!! This is not on the EDT and this method MUST return immediately!
Display.getInstance().callSerially(new Runnable() {
public void run() {
((BrowserComponent)wb.getInternal()).execute("fnc('this was written by Java code!')");
}
});
return false;
}
return true;
}
});
}

Display html text in codenameone

I would like to display html formatted text that I have as a string.
Does the WebBroswer component support this ?
If yes, what method to use ?
Thanks,
Sanket
Code:
private void loadCourseDesc() {
Container courseDescContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));
NETextArea title = new NETextArea(AppState.current_Course.getTitle());
title.setUIID("biggreylabel");
courseDescContainer.addComponent(title);
Container c1 = new Container(new BoxLayout(BoxLayout.X_AXIS));
Label l = new Label("Fees:" + AppState.current_Course.getFees());
l.setUIID("mgreylabel");
c1.addComponent(l);
Label l1 = new Label("Completion Date:" + AppState.current_Course.getExpiryDate());
l1.setUIID("mgreylabelLM");
c1.addComponent(l1);
courseDescContainer.addComponent(c1);
WebBrowser wb = new WebBrowser(){
#Override
public void onLoad(String url) {
super.onLoad(url); //To change body of generated methods, choose Tools | Templates.
instance.forceRevalidate();
}
};
wb.setScrollableY(true);
System.out.println("::---" + AppState.current_Course.getDesc());
wb.setPage(AppState.current_Course.getDesc(), "http://localhost/");
courseDescContainer.addComponent(wb);
replace(courseDescContainer);
Code for replace:
private void replace(final Container c) {
Display.getInstance().callSerially(new Runnable() {
public void run() {
instance.replaceAndWait(currentCentre, c, null);
currentCentre = c;
instance.forceRevalidate();
}
});
}
It supports it by adding the component into the container, to set HTML instead of a URL just use setPage instead of setURL.

Resources