I'm trying to develop a side menu with a sliding home screen.
This is what I did.
set hideLeftSideMenuBool to true in constants and using menuBtn to openSideMenu,
I get this:
java.lang.NullPointerException
at com.codename1.ui.Toolbar.showOnTopSidemenuImpl(Toolbar.java:1616)
at com.codename1.ui.Toolbar$12.run(Toolbar.java:1567)
at com.codename1.ui.AnimationManager.flushAnimation(AnimationManager.java:220)
at com.codename1.ui.Toolbar.showOnTopSidemenu(Toolbar.java:1563)
at com.codename1.ui.Toolbar.openSideMenu(Toolbar.java:343)
..................
Form hi = new Form("Hi World");
hi.setAllowEnableLayoutOnPaint(true);
Toolbar tb = new Toolbar(false);
final Container ToolbarCnt = new Container(new BorderLayout());
Container menuCnt = new Container(new FlowLayout(CENTER, CENTER));
Button menuBtn = new Button(theme.getImage("ToolbarSideMenuIcon.png"),"Container");
menuCnt.add(menuBtn);
ToolbarCnt.add(BorderLayout.WEST, menuCnt);
ToolbarCnt.getAllStyles().setMarginUnit(Style.UNIT_TYPE_SCREEN_PERCENTAGE);
ToolbarCnt.getAllStyles().setMargin(1, 1, 2, 2);
Command MenuCommand = new Command("");
Button HomeCommand= new Button("Home");
HomeCommand.getAllStyles().setFgColor(0xA6A6A6);
HomeCommand.addActionListener((evt) -> {
SideMenuBar.closeCurrentMenu();
});
Container cnt = new Container(new BoxLayout(BoxLayout.Y_AXIS));
cnt.add(HomeCommand);
hi.setToolbar(tb);
tb.setTitleCentered(false);
tb.setTitleComponent(ToolbarCnt);
MenuCommand.putClientProperty("SideComponent", cnt);
hi.addCommand(MenuCommand);
menuBtn.addActionListener((evt) -> {
hi.getToolbar().openSideMenu();
});
Thanks in advance for the support.
The menu is constructed when things are added to it and since you didn't add anything into the menu it was never constructed. Just add items to the menu e.g.:
tb.addMaterialCommandToLeftSideMenu("Hello", materialIcon, e -> {});
Related
I have a dialog box that has picker and other components. I need its height auto fix where the last component ends. In the pic below, it should end after submit button.
Code:
Dialog selectDialog = new Dialog();
selectDialog.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
selectDialog.getAllStyles().setMargin(0, 0, 0, 0);
Container pickerContainer = new Container(new BorderLayout());
Picker p = new Picker();
p.setStrings(outlets);
Label arrowLabel = new Label(pickerIcon);
arrowLabel.setUIID("Container");
pickerContainer.add(BorderLayout.CENTER, p);
pickerContainer.add(BorderLayout.EAST, arrowLabel);
Label nameLabel = new Label("Name");
Label nameData = new Label("Santosh Kandel");
Label locationLabel = new Label("Location");
Label locationData = new Label("Baneswor");
Label timeLabel = new Label("Time");
Label timeData = new Label("09:47");
Label dateLabel = new Label("Date");
Label dateData = new Label("2017-2-10");
TableLayout dialogTable = new TableLayout(7, 2);
Container attendenceTableContainer = new Container(dialogTable);
attendenceTableContainer.getAllStyles().setMargin(0, 0, 50, 50);
attendenceTableContainer.add(dialogTable.createConstraint().widthPercentage(30), nameLabel)
.add(dialogTable.createConstraint().widthPercentage(70), nameData)
.add(dialogTable.createConstraint().widthPercentage(30), locationLabel)
.add(dialogTable.createConstraint().widthPercentage(70), locationData)
.add(dialogTable.createConstraint().widthPercentage(30), timeLabel)
.add(dialogTable.createConstraint().widthPercentage(70), timeData)
.add(dialogTable.createConstraint().widthPercentage(30), dateLabel)
.add(dialogTable.createConstraint().widthPercentage(70), dateData);
Button submitButton = new Button("Submit");
selectDialog.add(pickerContainer);
selectDialog.add(attendenceTableContainer);
selectDialog.add(FlowLayout.encloseCenter(submitButton));
selectDialog.showAtPosition(200, 200, 50, 50, false);
I tried d.showPopupDialog(component) but it didnot place the dialog where I wanted. Here I want it at the top of the form with some margin and in some cases at a specif location as well. Thank You
You can use showStretched or showPacked depending on if you want the Dialog to take up the screen width or resized to fit the size of the widest component, and you can define the position it should popup at:
selectDialog.setAutoDispose(false);
selectDialog.setDisposeWhenPointerOutOfBounds(true);
selectDialog.setTransitionInAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_VERTICAL, false, 300));
selectDialog.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_VERTICAL, true, 800));
selectDialog.showStretched(BorderLayout.NORTH, true);
I used setHidden(true) and it doesnt work. The container and its components are visible if setHidden is used instead of setVisible. Moreover the problem I am getting while using setVisible is that the background of the container just pop up after the components inside the container animates from top. How can I make the background of the container move frm top along with its components.
questionAnswerContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));
titleDialog = new Label("Yuppie!");
titleDialog.setUIID("GameDialogLabelBold");
body1 = new Label("Let’s celebrate");
body2 = new Label("with another");
body3 = new Label("drink");
Button ok = new Button(theme.getImage("playIcon.png"));
dialogContainer = (BoxLayout.encloseY(titleDialog, body1, body2, body3, ok));
dialogContainer.getAllStyles().setBgImage(theme.getImage("yuppieDialog.png"));
dialogContainer.setPreferredW(screenWidth * 2 / 3);
dialogContainer.setPreferredH(screenWidth * 2 / 3);
add(BorderLayout.CENTER, LayeredLayout.encloseIn(questionAnswerContainer, FlowLayout.encloseCenterMiddle(dialogContainer)));
dialogContainer.getParent().setVisible(false);
// dialogContainer.setHidden(true); //it doesnot work, the container and its components are visible if setHidden is used instead of setVisible
f.revalidate();
public void checkIfCorrect(Button checkBtn, Form f) {
dialogContainer.getParent().setY(-Display.getInstance().getDisplayHeight());
dialogContainer.getParent().setVisible(true);
// dialogContainer.getParent().setHidden(false);
}
Give a try to f.invalidate(); as well.
For me, sometimes combination of both invalidate and revalidate works.
I'm stuck in a simple animation code which has a no. of components in the container moves from top of the screen to a specific position. I have a bg image set in the UIID "AttempTitle" in the container consisting all the component. The problem is while all the components moves from top, the bg img is not seen until it reaches the specific position and it appears at last. How can I make the bg Image move along with the components.
I got another problem while doing it. I have a bg image in the title container. While the animation is taking place, the green bg image of the title container disappears for a second too. How that happened, I cannot figure out.
I have a video uploaded in the youtube incase you didn't understand the problem have a look at it.
https://youtu.be/6Or26wxnzUY
Code:
setLayout(new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER));
attemptIcon = theme.getImage("attemptIcon.png");
attempt1 = new Label(attemptIcon);
attempt2 = new Label(attemptIcon);
attempt3 = new Label(attemptIcon);
attempt4 = new Label(attemptIcon);
attempt5 = new Label(attemptIcon);
attemptContainer = BoxLayout.encloseX(attempt1, attempt2, attempt3, attempt4, attempt5);
Container titleContainer = new Container(new GridLayout(1));
titleContainer.add(FlowLayout.encloseCenterMiddle(attemptContainer));
add(BorderLayout.NORTH, titleContainer);
attemptContainer.getParent().setUIID("AttempTitle");
attemptContainer.getParent().setPreferredW(screenWidth / 3);
questionAnswerContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));
Label a = new Label("questin answer");
questionAnswerContainer.add(a);
titleDialog = new Label("Yuppie!");
body1 = new Label("Let’s celebrate");
body2 = new Label("with another");
body3 = new Label("drink");
Button ok = new Button(theme.getImage("playIcon.png"));
ok.addActionListener(e -> {
new Test(sm).show();
});
dialogContainer = (BoxLayout.encloseY(titleDialog, body1, body2, body3, ok));
dialogContainer.getAllStyles().setBgImage(theme.getImage("yuppieDialog.png"));
add(BorderLayout.CENTER, LayeredLayout.encloseIn(questionAnswerContainer, FlowLayout.encloseCenterMiddle(dialogContainer)));
titleDialog.getAllStyles().setMarginTop((dialogContainer.getPreferredW() / 3) + 30);
dialogContainer.getParent().setVisible(false);//using setHidden(true) gives same issue
Runnable r = new Runnable() {
public void run() {
checkIfCorrect(Test.this);
}
};
if (timer == null) {
timer = new UITimer(r);
}
if (timer != null) {
timer.schedule(5000, false, Test.this); //4 seconds
}
revalidate();
checkIfCorrect method:
public void checkIfCorrect(Form f) {
dialogContainer.getParent().setY(-Display.getInstance().getDisplayHeight());
dialogContainer.getParent().setVisible(true);
f.animateHierarchyAndWait(1200);
f.setTransitionInAnimator(null);
}
toolbar code:
Toolbar toolbar = new Toolbar();
form.setToolbar(toolbar);
Container containerTitle = new Container(new BorderLayout());
toolbar.setTitleComponent(LayeredLayout.encloseIn(containerTitle, FlowLayout.encloseCenter(ruslanLogo)))
//there r 4 buttons inside containerTitle container
You should use animateLayout instead of animateHierarchy start by setting the element you want as visible false then show. Then set it's Y to the right location set it to visible and do the animate layout.
The problem is that the background sizing/position of the Container doesn't work properly as a result of the animation.
I have a swipeable container with a button exposed when you swipe it.
It works when you use your mouse to swipe, but it doesnt seem to work when
you use code to perform the same action.
Form hi = new Form(new BoxLayout(BoxLayout.Y_AXIS));
Container multiButtonCont = new Container(new BoxLayout(BoxLayout.Y_AXIS));
MultiButton mButton = new MultiButton();
mButton.setTextLine1("mButton 1");
Button testB1 = new Button("TestButton1");
SwipeableContainer swipe = new SwipeableContainer(testB1,mButton);
multiButtonCont.addComponent(swipe);
Button openButton = new Button("Open");
openButton.addActionListener(e->{
for(int i=0;i<multiButtonCont.getComponentCount();i++){
((SwipeableContainer) (multiButtonCont.getComponentAt(i))).openToRight();
}
});
Button closeButton = new Button("Close");
closeButton.addActionListener(e->{
for(int i=0;i<multiButtonCont.getComponentCount();i++){
((SwipeableContainer) (multiButtonCont.getComponentAt(i))).close();
}
});
hi.addComponent(GridLayout.encloseIn(2, openButton, closeButton));
hi.addComponent(multiButtonCont);
hi.show();
Any ideas on how to implement opening a swipeable container using code?
Thanks for the code, it seems to be a regression in the component. I've fixed it and it should be available for the coming update which is on October 7th 2016
I want to implement a TextArea in CodenameOne as follows:
private Container getMessageContainer(String message) {
Container con = new Container(new BorderLayout());
TextArea ta = new TextArea();
ta.setGrowByContent(true);
ta.setSingleLineTextArea(false);
ta.setScrollVisible(true);
ta.setUIID("DialogTextArea");
ta.setEditable(false);
ta.setFocusable(false);
ta.setText(message);
con.addComponent(BorderLayout.CENTER, ta);
return con;
}
I then have a Theme Component in the theme.res file called DialogTextArea deriving TextArea, as follows:
This TextArea is then put on a Dialog as follows:
public MessageDialog(NotificationType notificationType, String title, String message,
boolean fallback) {
this.notificationType = notificationType;
this.fallback = fallback;
this.buildTitle(title);
this.setLayout(new BorderLayout());
this.addComponent(BorderLayout.CENTER, getContentConainer(message));
this.addComponent(BorderLayout.SOUTH, getButtonContainer());
}
private Container getContentConainer(String message) {
Container con = new Container(new BorderLayout());
con.addComponent(BorderLayout.CENTER, getMessageContainer(message));
return con;
}
Where MessageDialog extends Dialog.
This does work well, and I get the following results:
And:
However, when I remove the border from the theme in the theme.res, turning it into an Empty border, I get this as a result:
As well as
This does mean there are some inconsistencies when I wish to remove the border.
Is there any way to get the text to always display when I do not want a border? I tried changing the padding and margin properties, but to no avail.
This is all using the Native theme.
Any help would be appreciated.
private Container getMessageContainer(String message) {
Container con = new Container(new BorderLayout());
TextArea ta = new TextArea();
ta.setGrowByContent(true);
ta.setSingleLineTextArea(false);
ta.setScrollVisible(true);
ta.setUIID("DialogTextArea");
ta.setEditable(false);
ta.setFocusable(false);
ta.setText(message);
con.addComponent(BorderLayout.CENTER, ta);
Label transparentLabel = new Label("");
transparentLabel.getAllStyle().setBgColor(0xffffffff);
con.addComponent(BorderLayout.SOUTH, transparentLabel);
return con;
}
This gives a temporary solution.
You need to remove the border from the selected, unselected states as well as the padding from both. If you don't do that we will pick the "most" option and go with that to prevent "jumping" on every focus change.
Note that selected state is still applicable even if you selected the component to not have focus or editability.