top and left line border not showing on Android 7.0 - codenameone

In my cn1-project, the top and left line border for Label, Button and TextField are not shown on an Android 7.0 device. The simulator shows all borders correct. The issue can be easily reproduced with the code from the SignatureComponentDemo on the current cn1 version 4.x for the themes FlatXXXX which also use line borders instead of border images.
I created a new FlatBlue "Get Started App" on Intellij Idea and replaced the code for init(), start(), stop() and destroy() in MyApplication by the code from the SignatureComponentDemo.
The TextField for the name in the demo shows correctly with a line border on the simulator. One the Galaxy S7 edge with Android 7.0 the top and left border of the TextField are missing. Adding more padding for these components has no effect. Also disabling loading of native theme by setting includeNativeBool to false has no effect. The only relevant code is in the following method:
public void start() {
if(current != null){
current.show();
return;
}
Form hi = new Form("Signature Component");
hi.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
hi.add("Enter Your Name:");
hi.add(new TextField());
hi.add("Signature:");
SignatureComponent sig = new SignatureComponent();
sig.addActionListener((evt)-> {
System.out.println("The signature was changed");
Image img = sig.getSignatureImage();
// Now we can do whatever we want with the image of this signature.
});
hi.addComponent(sig);
hi.show();
}
Is there a workaround for this issue? I need to build a table of Components using TableLayout. The table class is no option, because i need to draw borders of different color and thickness and wanted to apply these to the Containers and Components within the container using TableLayout as a layout manager.

Related

CheckBox setTextPosition(TOP) not working

Windows 10 Pro
NetBeans 12.3
Simulator Latest
Simulator, IOS, Android
Setting TextPosition to TOP does not seem to have any affect, The Text is always left or right of the checkbox.
Form hi = new Form("ComboBox TextPosion Test", new BoxLayout(BoxLayout.Y_AXIS));
CheckBox MpiSubSystemSoon = new CheckBox("FYI");
MpiSubSystemSoon.setTextPosition(TOP);
hi.add(MpiSubSystemSoon);
hi.show();
Assumed behavior is the Text "FYI" appears directly above the check box
Thoughts?
Regards
This is in relation to the icon not to the checkbox which is a separate thing. This is a method of Label inherited by CheckBox.
We don't support that layout. To do that place a CheckBox below a Label in the layout.
CheckBox cb = new CheckBox();
Container ui = BoxLayout.encloseY(new Label("My Label"), FlowLayout.encloseCenter(cb));
ui.setLeadComponent(cb);

Make videos scrollable

I have a scrollabillity issue in a Form, layered out by BoxLayout.y().
The form contains many Tabs (with fixed size), each tab of the Tabs can contain an image or a video (the video is inside a BorderLayout to scale it at the tab size).
If an image is shown, the scrolling up and down works correctly.
If a video is shown, the y scrolling is not possibile, I can only swipe to change the tab.
I suppose that the cause of this issue is that videos are native component (I used the Codename One API to show the videos).
How can I solve or workaround this issue? This is crucial for the app design. Thanks for the tips.
The video.setEnabled(false) workaround (Make videos scrollable) doesn't work.
I workaround in a different way, inserting the MediaPlayer container in a LayeredLayout container, and then placing a Button over the MediaPlayer. A generic empty Label doesn't work, but an empty Button works. Of course I have to override calcPreferredSize to make the MediaPlayer and the Button of the same size (or use a different approach to make them of the same size).
This allows scrolling, but prevents the tapping of the play and pause Buttons (that are over the video). I solved also this issue.
In short, this is my solution, tested on Simulator, Android and iOS (in the following code, note that videoBtnsCnt is a Container over the video, in which I inserted play and pause Buttons):
MediaPlayer mediaPlayer = new MediaPlayer(video) {
#Override
public Dimension getPreferredSize() {
return new Dimension(size, size);
}
};
Container mediaPlayerCnt = new Container(new LayeredLayout(), "NoMarginNoPadding") {
#Override
public Dimension getPreferredSize() {
return new Dimension(size, size);
}
};
mediaPlayerCnt.add(mediaPlayer);
Button allowScrollingLabel = new Button() {
#Override
public Dimension getPreferredSize() {
return new Dimension(size, size);
}
};
allowScrollingLabel.setUIID("NoMarginNoPadding");
allowScrollingLabel.addActionListener(l -> {
Component responder = videoBtnsCnt.getResponderAt(l.getX(), l.getY());
if (responder instanceof Button) {
// it can be a play button or a pause button
((Button) responder).pressed();
((Button) responder).released();
}
});
mediaPlayerCnt.add(allowScrollingLabel);

Why does my Side menu snaps back when i lift my finger, when swiping in my CN1 app?

In my Codenameone app i have built a side menu, but i have 2 cosmetic issues with it.
When i swipe from the left and i lift my finger in the screen space, slightly further than the menu finishes, the menu snaps back. It doesn't snap back if i lift my finger in the space the menu will expand to. Is there a way to make the side menu stay on the screen when i swipe?
My main page has a vertically scrollable container. When i open the side menu, it doesn't disable my main page so i am still able to scroll my main page container by moving my finger on the space to the right of the menu. Are we able to disable the main page content by default when the menu is open?
For ref, my menu is along the design of this tutorial, with a very simple example being:
public void start() {
if (current != null) {
current.show();
return;
}
Form hi = new Form("Hi World", BoxLayout.y());
hi.add(new Label("Hi World"));
Toolbar t = new Toolbar();
hi.setToolbar(t);
t.setTitle("Title");
Label logoLabel = new Label("");
logoLabel.setTextPosition(Label.BOTTOM);
logoLabel.setText("label text here");
t.addComponentToSideMenu(logoLabel);
hi.show();
}
Thanks
The point of closing back seems to be hardcoded to a quarter of the screen here: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/ui/Toolbar.java#L1380
There might be other points in the code that implement this logic. It might be possible to change that to make that logic configurable via theme constants. But right now this is hard coded.

FloatingActionButton on TextArea not working as expected

I tried to use a com.codename1.components.FloatingActionButton in combination with a com.codename1.ui.TextArea.
Now I have two questions:
Apparently the valign is not honored - is it a bug?
The actionListener of the FloatingActionButton is not called. Is anything wrong with my usage or is it a bug?
Here is the code to demonstrate it:
public class FormFabOnText extends Form {
public FormFabOnText() {
setTitle("FormFabOnText");
setLayout(new BorderLayout());
Container contentPane = getContentPane();
contentPane.add(BorderLayout.NORTH, new SpanLabel(
"This form contains a TextArea and a FloatingActionButton combined by bindFabToContainer. "
+ "It demonstrates that the FloatingActionButton is not working in this constellation."));
TextArea textArea = new TextArea();
float iconDefaultSize = FloatingActionButton.getIconDefaultSize();
try {
FloatingActionButton.setIconDefaultSize(2.0f);
FloatingActionButton floatingActionButton = FloatingActionButton.createFAB(FontImage.MATERIAL_CLEAR);
Container containerFab = floatingActionButton.bindFabToContainer(textArea, Component.RIGHT, Component.CENTER);
floatingActionButton.addActionListener((e) -> textArea.setText(""));
contentPane.add(BorderLayout.CENTER, containerFab);
} finally {
FloatingActionButton.setIconDefaultSize(iconDefaultSize);
}
}
}
The text area has 0 height so when you valign to the center the button correctly places itself on top. Then you add it to a border layout which stretches it across but the preferred size of the text area determines the valign so it stays.
I'm not sure if there is a good workaround for that other than a bit of margin like we did in the msuikit demo.
The issue with tapping during editing is probably related to the native editing peer. Tapping inside the text area gets sent to the native layer for editing otherwise elements below might cause an issue. Text input is a peer but also a very special case.

WebView is always the topmost component

I'm developing a reporting dashboard application using W8 Metro UI style application. The application has a dark theme, so most of the screen is black. I'm using the WebView control to display SSRS .rdl reports from our report server (which all have black backgrounds). The problem I'm seeing is that when I navigate to a new report, the WebView control flashes white for a split second and then loads the new report. To get around this, I tried putting an Easing opacity animation on the WebView control to make it fade out, load the report, and then fade back in. However, no matter what I try, I can't get the flickering to go away.
I then tried putting a black rectangle on top of the WebView and fading that one in and out... still no luck. The WebView is always on top at runtime, meaning I can't put any control on top of it. Does anyone know of a way around this?
I breifly looked into the WebView.Transitions, but couldn't find many resources on this. Could this be my answer?
EDIT:
Event to load the new report:
void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// Create a WebViewBrush of the content currently loaded in the WebView
WebViewBrush b = new WebViewBrush();
b.SourceName = "WebView1";
b.Redraw();
Rectangle1.Fill = b;
// Hide the WebView
WebView1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
// Navigate to the new report
var selectedItem = ItemListView.SelectedItem;
WebView1.Navigate(((Report)selectedItem).ReportUri);
}
void WebView1_LoadCompleted(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
{
// Show the new report
WebView1.Visibility = Windows.UI.Xaml.Visibility.Visible;
Rectangle1.Fill = new SolidColorBrush(Colors.Transparent);
}
This is just the way WebView works because internally its loading the trident COM control into a separate hwnd. The workaround is to set Visibility to Hidden on the webview and instead show a webviewbrush which isn't interactive but does integrate with the rest of your UI so it can be animated, etc

Resources