I'm trying to develop a side menu with a sliding home screen when I open the menu. The issue I have is when I close the side menu, the menu button disappear .
enter image description here
Form hi = new Form("Hi World");
Toolbar tb = new Toolbar(false);
Image icon = theme.getImage("icon.png");
Container topBar = new Container(new BorderLayout());
topBar.add(BorderLayout.SOUTH, new Label("Cool App Tagline...", "SidemenuTagline"));
topBar.setUIID("SideCommand");
Command SideLogoCommand = new Command("");
SideLogoCommand.setIcon(icon);
Command MenuCommand = new Command("");
Button HomeCommand= new Button("Home");
HomeCommand.getAllStyles().setFgColor(0xA6A6A6);
HomeCommand.addActionListener((evt) -> {
SideMenuBar.closeCurrentMenu();
});
Button WebsiteCommand= new Button("Website");
WebsiteCommand.getAllStyles().setFgColor(0xA6A6A6);
Button SettingsCommand= new Button("Settings");
SettingsCommand.getAllStyles().setFgColor(0xA6A6A6);
Container cnt = new Container(new BoxLayout(BoxLayout.Y_AXIS));
cnt.add(topBar);
cnt.add(HomeCommand);
cnt.add(WebsiteCommand);
cnt.add(SettingsCommand);
hi.setToolbar(tb);
tb.setOnTopSideMenu(false);
hi.addCommand(SideLogoCommand);
MenuCommand.putClientProperty("SideComponent", cnt);
tb.addCommandToSideMenu(MenuCommand);
hi.addComponent(new Label("Hi World"));
hi.show();
I'm guessing it's because of this line:
tb.setOnTopSideMenu(false);
You're essentially forcing the older less tested side menu that might still have regressions in newer code. The best thing to do is remove that line. But if you insist you can try invoking:
hi.setAllowEnableLayoutOnPaint(true);
Notice this will impact performance for long forms etc.
Related
I tried and tried to run this code in a new "bare bones" project, but there is nothing to do, it always gives me the following error:
/home/francesco/NetBeansProjects/TestUUID/src/net/informaticalibera/test/UUID/MyApplication.java:62: error: cannot find symbol
hi.add(new SpanLabel(Util.getUIID()));
symbol: method getUIID()
location: class Util
1 error
Code that is known to work, it's an example that I inserted in the Javadoc of Util.getUIID:
Form hi = new Form("Test UIID", BoxLayout.y());
Button button = new Button("Generate 10 UIID");
hi.add(button);
hi.show();
button.addActionListener(l -> {
String myId = "myUsername"; // do not exceed 12 characters
Preferences.set("CustomDeviceId__$", Long.parseLong(myId, 36));
hi.add(new SpanLabel("10 Random UUID"));
for (int i = 0; i < 10; i++) {
hi.add(new SpanLabel(Util.getUIID()));
}
hi.revalidate();
});
I think it is a problem of updating the Codename One libraries, which maybe in a project bare bones are old. However, opening "Codename One Settings", clicking on the hamburger menu at the top right and choosing first "Update" and then "Save" I keep getting the same error. If I try to use the old version of the "Codename One Settings" GUI, clicking on "Basic" and then "Update Project Libs", the problem remains. I don't know what to do.
Is it a Codename One bug or am I not doing the right action?
In my code I have a scrollable container, I want to call a refresh function when the user pulls down on the container.
venueList = new Container(BoxLayout.y());
venueList.setScrollableY(true);
venueList.addPullToRefresh(() -> {
refresh();
});
This works well when there is more then one item in the container, however, when there is only one item or less, this does not work.
The issue occurs both on the NetBeans simulator and on my ios device.
My current workaround is to add a button to the list if it is empty (after calling a web-service) named "REFRESH", with the refresh() function invoked on clicking it.
Update I just tried this with tabs too with the same result:
Form hi = new Form("Hi World", new BorderLayout());
Tabs t = new Tabs();
Container mainContainer = new Container(BoxLayout.y());
mainContainer.setScrollableY(true);
mainContainer.addPullToRefresh(() -> log("Pull..."));
t.addTab("Test Tabs", mainContainer);
hi.add(CENTER, t);
hi.show();
Original answer below:
This worked fine for me with no elements so I'm guessing there is a different issue such as placing the container within a nested scrollable hierarchy:
Form hi = new Form("Hi World", new BorderLayout());
Container mainContainer = new Container(BoxLayout.y());
mainContainer.setScrollableY(true);
mainContainer.addPullToRefresh(() -> log("Pull..."));
hi.add(CENTER, mainContainer);
hi.show();
#Shai, thank you for pointing me in the right direction, it indeed ended up being a nesting issue.
When I was adding my list container to the Tab container I was using the following code:
tabContainer.addTab("Around Me",aroundTabicon,BoxLayout.encloseY(venueList));
Note that the BoxLayout.encloseY was causing the issue, I removed it and ended up with the following:
tabContainer.addTab("Around Me",aroundTabicon,venueList);
And it seems to be working now.... thank you again.
At this moment I'm only testing my app in the simulator (as I'm having issues with "Send iOS Build" mentioned in another thread [Errors with Codename One "Send iOS Build" and "Send Android Build")
I'm experiencing some layout issues where it is not making use of the width and height correctly. The elements are left-aligned and there is unused space on the right side. And I need to scroll up and down instead of having everything fit within the visual area. Please see images.
The code are:
private final void show() {
loginSignupForm = new Form("Company", new BoxLayout(0));
Tabs loginSignupTabs = new Tabs();
Style loginSignupStyle = UIManager.getInstance().getComponentStyle("Tab");
prepareAndAddSignupTab(loginSignupTabs, loginSignupStyle);
prepareAndAddLoginTab(loginSignupTabs, loginSignupStyle);
loginSignupForm.add(loginSignupTabs);
loginSignupForm.show();
}
private void prepareAndAddLoginTab(Tabs loginSignupTabs, Style loginSignupStyle) {
loginID = new TextField();
loginPassword = new TextField();
Button loginButton = getLoginButton();
Component[] loginComponents = {
new Label("Email Address"),
loginID,
new Label("Password"),
loginPassword,
loginButton,
};
Container loginContainer = BoxLayout.encloseY(loginComponents);
FontImage loginIcon = FontImage.createMaterial(FontImage.MATERIAL_QUESTION_ANSWER, loginSignupStyle);
loginSignupTabs.addTab("Login", loginIcon, loginContainer);
}
What do I need to changenter code heree to get the elements to:
1. expand to the maximum width (no free space on the right)
2. fit within the visual area (for top-to-bottom)
Please note that I'm coding the elements because I find the (new) GUI Builder quite a challenge to use.
Firstly, don't pass a constant value as an argument to Layouts, coz the values might change in future Codename One updates and this will be difficult for you to debug. new BoxLayout(0) should be new BoxLayout(BoxLayout.Y_AXIS) or simply BoxLayout.y().
The above is where the problem arose but not the only problem because BoxLayout doesn't recognize 0 as a valid argument as it has only 3 which are X_AXIS = 1, Y_AXIS = 2, and X_AXIS_NO_GROW = 3.
If you change the above to use BoxLayout.Y_AXIS, it will work, but from the screenshot above, that's not the best solution.
In conclusion, change your code to below:
private final void show() {
loginSignupForm = new Form("Company", new BorderLayout());
Tabs loginSignupTabs = new Tabs();
Style loginSignupStyle = UIManager.getInstance().getComponentStyle("Tab");
prepareAndAddSignupTab(loginSignupTabs, loginSignupStyle);
prepareAndAddLoginTab(loginSignupTabs, loginSignupStyle);
loginSignupForm.add(BorderLayout.CENTER, loginSignupTabs);
loginSignupForm.show();
}
I currently have a Logo of my app on the top of every form. Since it takes a lot of space, I want it's size to scale down the more the user scrolls down, just the way a lot of apps do it.
My Logo is currently just a container with the logo added to NORTH in the Layout. Did anyone of you already implement something similar and could give me a hint how to achieve this?
Thanks in advance.
Check out this blog post for title animations. This is the relevant code from the post:
Form hi = new Form("Shai's Social App", new BoxLayout(BoxLayout.Y_AXIS));
for(int iter = 0 ; iter < 100 ; iter++) {
hi.add(new Label("Social Data Goes here..."));
}
Toolbar tb = new Toolbar();
hi.setToolbar(tb);
ComponentAnimation cna = tb.createStyleAnimation("TitleAreaClean", 200);
ComponentAnimation title = tb.getTitleComponent().createStyleAnimation("TitleClean", 200);
hi.getAnimationManager().onTitleScrollAnimation(cna, title);
hi.show();
we want dialog message in this format and look and fill
Can you please let me know how to resolve it. My application needs to be supported on all platforms (Android, iOS, Windows) and I don't want to write native code for all platforms separately.
Actually customizing the look is easier in Codename One as everything is written in Java you can customize literally everything about the look of anything.
For simplicity sake I used code rather than styles which would be better, you can customize the Dialog UIID and other UIID's in the theme designer to get more flexibility and have this easier. However, this would require many screenshots and explanations so I did the customization in code:
Form f = new Form("Test");
Button b = new Button("Show Dialog");
f.add(b);
b.addActionListener(e -> {
Dialog dlg = new Dialog("Authentication");
Style dlgStyle = dlg.getDialogStyle();
dlgStyle.setBorder(Border.createEmpty());
dlgStyle.setBgTransparency(255);
dlgStyle.setBgColor(0xffffff);
Label title = dlg.getTitleComponent();
title.setIcon(finalDuke.scaledHeight(title.getPreferredH()));
title.getUnselectedStyle().setFgColor(0xff);
title.getUnselectedStyle().setAlignment(Component.LEFT);
dlg.setLayout(BoxLayout.y());
Label blueLabel = new Label();
blueLabel.setShowEvenIfBlank(true);
blueLabel.getUnselectedStyle().setBgColor(0xff);
blueLabel.getUnselectedStyle().setPadding(1, 1, 1, 1);
blueLabel.getUnselectedStyle().setPaddingUnit(Style.UNIT_TYPE_PIXELS);
dlg.add(blueLabel);
TextArea ta = new TextArea("This is the text you want to appear in the dialog, this might line break if the text is too long...");
ta.setEditable(false);
ta.setUIID("DialogBody");
ta.getAllStyles().setFgColor(0);
dlg.add(ta);
Label grayLabel = new Label();
grayLabel.setShowEvenIfBlank(true);
grayLabel.getUnselectedStyle().setBgColor(0xcccccc);
grayLabel.getUnselectedStyle().setPadding(1, 1, 1, 1);
grayLabel.getUnselectedStyle().setPaddingUnit(Style.UNIT_TYPE_PIXELS);
dlg.add(grayLabel);
Button ok = new Button(new Command("OK"));
ok.getAllStyles().setBorder(Border.createEmpty());
ok.getAllStyles().setFgColor(0);
dlg.add(ok);
dlg.showDialog();
});
f.show();
I would recommend doing the dialog customization in the theme designer and using a 9-piece image border which is better looking.