Display html text in codenameone - 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.

Related

Codenameone - Calendar createDay() Navigation

I hand-coded my app using CN1 (based on CN1's standard form template). Mostly for using Calendar for appointment app (I have reason not to use Picker).
Here's my main Form class
public class celebriesta {
private Form current;
private Resources theme;
private Form home;
public void init(Object context) {
theme = UIManager.initFirstTheme("/theme");
// Enable Toolbar on all Forms by default
Toolbar.setGlobalToolbar(true);
// Pro only feature
Log.bindCrashProtection(true);
}
public void start() {
if (current != null) {
current.show();
return;
}
home = new Form("Home", BoxLayout.y());
mainCalendar Calendar = new mainCalendar();
home.addComponent(Calendar);
Calendar.setUIID("Calendar");
//Create Form1 and Form2 and set a Back Command to navigate back to the home Form
Form form1 = new Form("Form1");
setBackCommand(form1);
Form form2 = new Form("Form2");
setBackCommand(form2);
Form form3 = new Form("Form3");
setBackCommand(form3);
//Add navigation commands to the home Form
NavigationCommand cmd1 = new NavigationCommand("Form1");
cmd1.setNextForm(form1);
home.getToolbar().addCommandToSideMenu(cmd1);
NavigationCommand cmd2 = new NavigationCommand("Form2");
cmd2.setNextForm(form2);
home.getToolbar().addCommandToSideMenu(cmd2);
NavigationCommand cmd3 = new NavigationCommand("Form3");
cmd3.setNextForm(form3);
Calendar.createDay().pressed();
Calendar.createDay().released();
Calendar.createDay().setCommand(cmd3);
//Add Edit commands to the home Form context Menu
Image im = FontImage.createMaterial(FontImage.MATERIAL_MODE_EDIT, UIManager.getInstance().getComponentStyle("Command"));
Command edit = new Command("", im) {
#Override
public void actionPerformed(ActionEvent evt) {
System.out.println("Editing");
}
};
home.getToolbar().addCommandToRightBar(edit);
home.show();
}
protected void setBackCommand(Form f) {
Command back = new Command("") {
#Override
public void actionPerformed(ActionEvent evt) {
home.showBack();
}
};
Image img = FontImage.createMaterial(FontImage.MATERIAL_ARROW_BACK, UIManager.getInstance().getComponentStyle("TitleCommand"));
back.setIcon(img);
f.getToolbar().addCommandToLeftBar(back);
f.getToolbar().setTitleCentered(true);
f.setBackCommand(back);
}
public void stop() {
current = getCurrentForm();
}
public void destroy() {
}}
I've override Calendar class accordingly
public class mainCalendar extends Calendar { #Override
protected Button createDay(){ Button day = new Button();
Image im = FontImage.createMaterial(FontImage.MATERIAL_MODE_EDIT, UIManager.getInstance().getComponentStyle("Command"));
day.setIcon(im);
return day;
}
#Override
protected void updateButtonDayDate(Button dayButton, int currentMonth, int day) {
//Customize day values
dayButton.setText("" +day);
}}
The main Form manages to get to Form 1 & 2 (sidemenu). I know Form 3 does exist but not sure why it didn't managed to be 'reached' from createDay(). And I suspect it's something wrong somewhere around this code in main Form
Calendar.createDay().pressed();
Calendar.createDay().released();
Calendar.createDay().setCommand(cmd3);
Need advise and/or help.
Have a look at a sample code here that creates a custom calendar day component. You don't need the below code:
Calendar.createDay().pressed();
Calendar.createDay().released();
Calendar.createDay().setCommand(cmd3);
Calendar day pressing and releasing is handled through an actionListener which you can implement through overriding the bindDayListener() if you're using a custom day component or addDayActionListener() if you're using the default day button. An example will be:
Calendar.addDayActionListener(evt -> {
//show your next form here
});
Unless you need a high-level customization, I don't see a point subclassing the Calendar class.

Codename one Android Sidemenu

I'm trying to implement an Android style side menu and I'm having an issue implementing the rounded icon on top and labels below it before the sideCommands are added.
How do I implement this please?
You can use Toolbar API which allows you to add components to the Sidemenu.
Have a look at Flickr demo.
Instead of using tool.addCommandToSideMenu(Command) you should use tool.addComponentToSideMenu(yourComponent, CommandToPerform)
Example:
#Override
protected void beforeMain(Form f) {
//Store your commands before setting toolbar
List<Command> cmds = new ArrayList();
for (int i = 0; i < f.getCommandCount(); i++) {
cmds.add(f.getCommand(i));
}
Toolbar toolbar = new Toolbar();
f.setToolBar(toolbar);
Label lblTitle = new Label("My Form", "Title");
lblTitle.setEndsWith3Points(false);
toolbar.setTitleComponent(lblTitle);
// Use your stored commands after setting toolbar
for (Command cmd : cmds) {
toolbar.addCommandToSideMenu(cmd);
}
Container CustomContainer = ...
toolbar.addComponentToSideMenu(CustomContainer, new Command("") {
#Override
public void actionPerformed(ActionEvent evt) {
//What CustomContainer should do (if any)
}
});
f.revalidate();
}

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;
}
});
}

ImageDownloadServices in codenameone

I am trying below mention code for download image from server but it's not working and not giving me any error. Please suggest if any thing wrong which i used.When i am accessing URL from browser it's displaying image to me.
int pos;
public void DisplayContent()
{
f = (Form)createContainer(GlobalVariables.Theme, "ContentPageWise");
body = (Container) findByName("Containerbody", f);
Display_Image = new Image[Page_Details.size()];
for(int i=0;i<Page_Details.size();i++)
{
Hashtable<String,String> hash_page = Page_Details.get(i);
Log.p("imagepath:"+hash_page.get("imgPage"));
pos=i;
GetImagesFromserver(hash_page.get("imgPage"));
Container Cpage = new Container(new BoxLayout(BoxLayout.Y_AXIS));
Label pic = new Label();
pic.setIcon(Display_Image[i]);
Cpage.addComponent(pic);
body.addComponent(Cpage);
}
}
void GetImagesFromserver(String Imagepath)
{
//eg. url like this: http://lmsasr.gizmosupport.com/presentation/tele/internet.jpg
ImageDownloadService imageDownloadService =
new ImageDownloadService(Imagepath, actionListener);
InfiniteProgress ip = new InfiniteProgress();
imageDownloadService.setDisposeOnCompletion(ip.showInifiniteBlocking());
NetworkManager.getInstance().addToQueue(imageDownloadService);
}
ActionListener actionListener = new ActionListener()
{
public void actionPerformed(ActionEvent evt)
{
NetworkEvent n = (NetworkEvent) evt;
Display_Image[pos] = ((Image)n.getMetaData());
}
};

HTML and webbrowser

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.

Resources