Issue with the Simulator
60 views
Skip to first unread message
Thomas
Mar 23, 2018, 12:40:56 AM3/23/18
to CodenameOne Discussions
I am using the new GUI builder to create a Login Form. In the GUI builder preview, everything looks fine and correctly reflect the constraint and components properties I defined in the GUI builder. But when launching the similator, my layout is a complete mess and even show components that are not even part of this form (like the "SIGN IN" button that is actually a buton part of the previously displayed form. See picture below).
And here is what I obtain in the simulator:
And when I take a screenshot of the simulator, the display change and here is what I obtain:
(Still not the correct result as the background is black rather than white but at least the layout seems ok. Too bad I have to take a screenshot for the simulator to reflect the layout of my code though...)
Here is the code of my login form:
public class Login extends com.codename1.ui.Form { public Login() { this(com.codename1.ui.util.Resources.getGlobalResources()); } public Login(com.codename1.ui.util.Resources resourceObjectInstance) { initGuiBuilderComponents(resourceObjectInstance); } //-- DON'T EDIT BELOW THIS LINE!!! private com.codename1.ui.TextField gui_Email = new com.codename1.ui.TextField(); private com.codename1.ui.TextField gui_Password = new com.codename1.ui.TextField(); private com.codename1.ui.Button gui_LoginButton = new com.codename1.ui.Button();
// <editor-fold defaultstate="collapsed" desc="Generated Code"> private void initGuiBuilderComponents(com.codename1.ui.util.Resources resourceObjectInstance) { setLayout(new com.codename1.ui.layouts.LayeredLayout()); setInlineStylesTheme(resourceObjectInstance); setScrollableY(false); setUIID("SignInForm"); setInlineStylesTheme(resourceObjectInstance); setInlineAllStyles("alignment:center;"); setTitle("Sign In"); setName("Login"); addComponent(gui_Email); addComponent(gui_Password); addComponent(gui_LoginButton); gui_Email.setHint("Email"); gui_Email.setUIID("SignInEmail"); gui_Email.setInlineStylesTheme(resourceObjectInstance); gui_Email.setName("Email"); gui_Email.setRows(1); ((com.codename1.ui.layouts.LayeredLayout)gui_Email.getParent().getLayout()).setInsets(gui_Email, "5.0mm 5.0mm auto 5.0mm").setReferenceComponents(gui_Email, "-1 -1 -1 -1").setReferencePositions(gui_Email, "0.0 0.0 0.0 0.0"); gui_Password.setHint("Password"); gui_Password.setUIID("SignInPassword"); gui_Password.setInlineStylesTheme(resourceObjectInstance); gui_Password.setName("Password"); gui_Password.setRows(1); ((com.codename1.ui.layouts.LayeredLayout)gui_Password.getParent().getLayout()).setInsets(gui_Password, "5.0mm 0.0mm auto 0.0mm").setReferenceComponents(gui_Password, "0 0 -1 0 ").setReferencePositions(gui_Password, "1.0 0.0 0.0 0.0"); gui_LoginButton.setText("Login"); gui_LoginButton.setInlineStylesTheme(resourceObjectInstance); gui_LoginButton.setName("LoginButton"); ((com.codename1.ui.layouts.LayeredLayout)gui_LoginButton.getParent().getLayout()).setInsets(gui_LoginButton, "10.0mm 5.0mm auto 5.0mm").setReferenceComponents(gui_LoginButton, "1 -1 -1 -1").setReferencePositions(gui_LoginButton, "1.0 0.0 0.0 0.0"); }// </editor-fold>
//-- DON'T EDIT ABOVE THIS LINE!!!}And here is what I obtain in the simulator:
And when I take a screenshot of the simulator, the display change and here is what I obtain:
(Still not the correct result as the background is black rather than white but at least the layout seems ok. Too bad I have to take a screenshot for the simulator to reflect the layout of my code though...)
What can be the orgin of this issue and how can I fix it? (as, as it is, the simulator is just unusable for me now...).
Maybe I am not correctly navigating from my previous Form from this one (I am new to CN1 and had difficulties finding a tutorial showing navigation examples. The only "how to" CN1 video on navigation is based on the old GUI builder and do not show any code for navigating from one Form to another)? Here is how I open this new Form from an onpress action event on a previous Form button:
public void onSignInButtonActionEvent(com.codename1.ui.events.ActionEvent ev) { Form loginf = new Login(); loginf.show();}I tested in Eclipse and Netbeans but the result is the same with both plugins. And I a made a clean/rebuild of my project with no effect. Also updated my java JDK from JDK 8_181 to JDK 10 but did not change anything.
I am on Windows 10 OS.
Steve Hannah
Mar 23, 2018, 7:31:36 AM3/23/18
to codenameone...@googlegroups.com
The "SignInForm" UIID doesn't appear to be picked up. Note: If you comment out that line, it works fine.
setUIID("SignInForm");
So double check and make sure that you are working with the same theme file - and that the SignInForm UIID is registered in that theme file.
Steve
--
You received this message because you are subscribed to the Google Groups "CodenameOne Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discussions+unsub...@googlegroups.com.
Visit this group at https://groups.google.com/group/codenameone-discussions.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/69caa71a-411b-4f59-86d1-a191acd29a82%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Message has been deleted
Thomas
Mar 24, 2018, 8:41:34 PM3/24/18
to CodenameOne Discussions
The "SignInForm" UIID was the issue (would be nice to have an exception thrown in the simulator console when an UUID doesn't exist). Thanks
I have another issue with the simulator.
Here is the code of my Form produced by the new GUI builder:
I have another issue with the simulator.
Here is the code of my Form produced by the new GUI builder:
import com.codename1.ui.Form;
public class Launch extends com.codename1.ui.Form { public Launch() { this(com.codename1.ui.util.Resources.getGlobalResources()); } public Launch(com.codename1.ui.util.Resources resourceObjectInstance) { initGuiBuilderComponents(resourceObjectInstance); }
//-- DON'T EDIT BELOW THIS LINE!!! private com.codename1.ui.Button gui_CreateAccountButton = new com.codename1.ui.Button(); private com.codename1.ui.Button gui_SignInButton = new com.codename1.ui.Button(); private com.codename1.components.ScaleImageLabel gui_Logo = new com.codename1.components.ScaleImageLabel();
// <editor-fold defaultstate="collapsed" desc="Generated Code"> private void guiBuilderBindComponentListeners() { EventCallbackClass callback = new EventCallbackClass(); gui_CreateAccountButton.addActionListener(callback); gui_SignInButton.addActionListener(callback); }
class EventCallbackClass implements com.codename1.ui.events.ActionListener, com.codename1.ui.events.DataChangedListener { private com.codename1.ui.Component cmp; public EventCallbackClass(com.codename1.ui.Component cmp) { this.cmp = cmp; }
public EventCallbackClass() { }
public void actionPerformed(com.codename1.ui.events.ActionEvent ev) { com.codename1.ui.Component sourceComponent = ev.getComponent();
if(sourceComponent.getParent().getLeadParent() != null && (sourceComponent.getParent().getLeadParent() instanceof com.codename1.components.MultiButton || sourceComponent.getParent().getLeadParent() instanceof com.codename1.components.SpanButton)) { sourceComponent = sourceComponent.getParent().getLeadParent(); }
if(sourceComponent == gui_CreateAccountButton) { onCreateAccountButtonActionEvent(ev); } if(sourceComponent == gui_SignInButton) { onSignInButtonActionEvent(ev); } }
public void dataChanged(int type, int index) { } } private void initGuiBuilderComponents(com.codename1.ui.util.Resources resourceObjectInstance) { guiBuilderBindComponentListeners(); setLayout(new com.codename1.ui.layouts.LayeredLayout()); setInlineStylesTheme(resourceObjectInstance); setScrollableY(false); setInlineStylesTheme(resourceObjectInstance); addComponent(gui_CreateAccountButton); addComponent(gui_SignInButton); addComponent(gui_Logo); gui_CreateAccountButton.setText("Create an account"); gui_CreateAccountButton.setInlineStylesTheme(resourceObjectInstance); gui_CreateAccountButton.setInlineAllStyles("border:round ffbbbbbb rect; fgColor:ffffff; opacity:255; bgImage:; alignment:center; padding:2.5mm 2.5mm 2.5mm 2.5mm;"); gui_CreateAccountButton.setName("CreateAccountButton"); gui_CreateAccountButton.setTextPosition(com.codename1.ui.Component.LEFT); ((com.codename1.ui.layouts.LayeredLayout)gui_CreateAccountButton.getParent().getLayout()).setInsets(gui_CreateAccountButton, "auto 5.0mm 5.0mm 5.0mm").setReferenceComponents(gui_CreateAccountButton, "-1 -1 -1 -1").setReferencePositions(gui_CreateAccountButton, "0.0 0.0 0.0 0.0"); gui_SignInButton.setText("Sign in"); gui_SignInButton.setInlineStylesTheme(resourceObjectInstance); gui_SignInButton.setInlineAllStyles("border:round ff5bc8fb rect; fgColor:ffffff; opacity:255; bgImage:; alignment:center; padding:2.5mm 2.5mm 2.5mm 2.5mm;"); gui_SignInButton.setName("SignInButton"); gui_SignInButton.setTextPosition(com.codename1.ui.Component.LEFT); ((com.codename1.ui.layouts.LayeredLayout)gui_SignInButton.getParent().getLayout()).setInsets(gui_SignInButton, "auto 5.0mm 3.0mm 5.0mm").setReferenceComponents(gui_SignInButton, "-1 -1 0 -1").setReferencePositions(gui_SignInButton, "0.0 0.0 1.0 0.0"); gui_Logo.setPreferredSizeStr("50.0mm inherit"); gui_Logo.setInlineStylesTheme(resourceObjectInstance); gui_Logo.setName("Logo"); com.codename1.ui.FontImage.setMaterialIcon(gui_Logo,"\ue3f4".charAt(0)); ((com.codename1.ui.layouts.LayeredLayout)gui_Logo.getParent().getLayout()).setInsets(gui_Logo, "5.0mm auto 5.0mm auto").setReferenceComponents(gui_Logo, "-1 -1 1 -1").setReferencePositions(gui_Logo, "0.0 0.0 1.0 0.0"); }// </editor-fold>
//-- DON'T EDIT ABOVE THIS LINE!!! public void onSignInButtonActionEvent(com.codename1.ui.events.ActionEvent ev) { Form loginf = new Login(); //loginf.getToolbar().setBackCommand("", e -> ((Form) ev.getComponent().getParent()).showBack()); loginf.show(); } public void onCreateAccountButtonActionEvent(com.codename1.ui.events.ActionEvent ev) { Form signf = new Register(); //signf.getToolbar().setBackCommand("", e -> ((Form) ev.getComponent().getParent()).showBack()); signf.show(); } }
In the preview, everything is fine and correctly match my components properties.
When I run this code in the simulator though, here is what I obtain:
When I run this code in the simulator though, here is what I obtain:
So here, all components seems to only inherit the default properties from my global theme (flatBlue) and to ignore those I defined in the GUI builder (like the grey color for the second button or the rounded border). I don't understand why as the code automatically produced by the GUI builder seems to correctly override them...
Also, how can I completely remove the empty title bar (I don't wan't any blue bar to appear at top of my Form)? I tried to define:
Also, how can I completely remove the empty title bar (I don't wan't any blue bar to appear at top of my Form)? I tried to define:
setTitle(null)
setName(null)or
setTitle("")
setName("")in my Form class but none worked...
Shai Almog
Mar 25, 2018, 12:20:01 AM3/25/18
to CodenameOne Discussions
All UIID's exist. You will get the default UIID value when you use something that doesn't exist. Since the default value (which you can edit in the designer) is transparent the form is transparent and you get problematic behavior.
We could check for transparent forms but this might be a problem as there are cases where this is legal e.g. when embedding forms, in dialogs or if you implement your own bg painter.
The blue line at the top is the Toolbar or TitleArea UIID if you set it to background transparency 0 and Border = Empty in the designer it will disappear. It's there because we have a different UIID above it called StatusBar which takes up 2mm to make room for the clock/battery/notch symbols in iOS.
I'm not sure why the styles aren't showing up correctly, Steve would have to answer that one as it's a relatively new feature.
We could check for transparent forms but this might be a problem as there are cases where this is legal e.g. when embedding forms, in dialogs or if you implement your own bg painter.
The blue line at the top is the Toolbar or TitleArea UIID if you set it to background transparency 0 and Border = Empty in the designer it will disappear. It's there because we have a different UIID above it called StatusBar which takes up 2mm to make room for the clock/battery/notch symbols in iOS.
I'm not sure why the styles aren't showing up correctly, Steve would have to answer that one as it's a relatively new feature.
Steve Hannah
Mar 26, 2018, 7:50:10 AM3/26/18
to codenameone...@googlegroups.com
I just copied the source code you posted directly into a project that uses the blue theme, and this was the result in the Simulator.
I'm not sure why you'd be getting different results. Perhaps your project is using an older version of the libs. Make sure that:
1. Your Codename One plugin is up to date with the latest.
2. That your project libs are up to date. (I.e. Project Properties > Click "Update project libs".
WRT hiding the titlebar altogether, try this: https://stackoverflow.com/questions/42871223/how-do-i-hide-get-rid-the-title-bar-on-a-form-codename-one
Steve
On Fri, Mar 23, 2018 at 12:36 PM, Thomas <tomber...@gmail.com> wrote:
The SignInForm UIID was the source of the issue. Thanks. (Not sure why taking a screenshot changed the layout though...)
I now have another issue with the simulator.
Here is the source code of my class generated with the GUI builder:
This is how it (correctly) appears in the GUI builder preview:
And here is the result in the simulator:
I really don't undrstand why the simulator do not reflect the specific button properties I set in the GUI builder and keep using the default flatBlue theme button properties. (yet the code produced by the GUI builder seems to correctly override them...)
Also how can I completely remove the title component at the top of the form. I don't want any empty blue title bar to appear. I tried to doin my code so as
setName(null)
setName("")but with no effect...
--
You received this message because you are subscribed to the Google Groups "CodenameOne Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discussions+unsub...@googlegroups.com.
Visit this group at https://groups.google.com/group/codenameone-discussions.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/dd1973f4-358d-4fab-b642-53a1b8a16ce1%40googlegroups.com.
Thomas
Mar 26, 2018, 3:24:41 PM3/26/18
to CodenameOne Discussions
I suppose that my CN1 plugin is up to date (I had an automatic update notification 2 or 3 days ago). I tested in eclipse and Netbeans with the same result
my CN1 libs are also up to date (but just to be sure, I performed a new "refresh CN1libs libs" but that didn"t change anything)
Here is the code of my MainApplication class:
The one of my Launch Form:
my CN1 libs are also up to date (but just to be sure, I performed a new "refresh CN1libs libs" but that didn"t change anything)
I found how to fix the issue with my login Form. In my main class, if I do:
instead of
that works (but I don't understand why as initFirstTheme() is suposed to be a shorthand notation of the latest...)
theme = UIManager.initFirstTheme("/theme");
try { Resources theme = Resources.openLayered("/theme"); UIManager.getInstance().setThemeProps(theme.getTheme(theme.getThemeResourceNames()[0]));} catch (IOException e) { e.printStackTrace();}However, if I do that, my Login Form (= Sign In) layout is all messed up again, like in my previous post! (whereas it is OK when I use the second code with try catch):
Here is the code of my MainApplication class:
package org.tbdlab.cn1test;
import static com.codename1.ui.CN.addNetworkErrorListener;import static com.codename1.ui.CN.updateNetworkThreadCount;
import org.tbdlab.cn1test.screens.Launch;
import com.codename1.io.Log;import com.codename1.ui.Dialog;import com.codename1.ui.Display;import com.codename1.ui.Form;import com.codename1.ui.SideMenuBar;import com.codename1.ui.Toolbar;import com.codename1.ui.plaf.UIManager;import com.codename1.ui.util.Resources;
/** * This file was generated by <a href="https://www.codenameone.com/">Codename One</a> for the purpose * of building native mobile applications using Java. */@SuppressWarnings("deprecation")public class MyApplication { private Form current; private Resources theme; private Form home;
public void init(Object context) { // use two network threads instead of one updateNetworkThreadCount(2); theme = UIManager.initFirstTheme("/theme"); /* try { Resources theme = Resources.openLayered("/theme"); UIManager.getInstance().setThemeProps(theme.getTheme(theme.getThemeResourceNames()[0])); } catch (IOException e) { e.printStackTrace(); } */ // Enable Toolbar on all Forms by default Toolbar.setGlobalToolbar(true);
// Pro only feature //Log.bindCrashProtection(true);
//Side menu Display.getInstance().setCommandBehavior(Display.COMMAND_BEHAVIOR_SIDE_NAVIGATION); UIManager.getInstance().getLookAndFeel().setMenuBarClass(SideMenuBar.class); addNetworkErrorListener(err -> { // prevent the event from propagating err.consume(); if(err.getError() != null) { Log.e(err.getError()); } Log.sendLogAsync(); Dialog.show("Connection Error", "There was a networking error in the connection to " + err.getConnectionRequest().getUrl(), "OK", null); }); }
public void start() { if (current != null) { current.show(); return; } Form hi = new Launch(); hi.show(); }
public void stop() { current = Display.getInstance().getCurrent(); if(current instanceof Dialog) { ((Dialog)current).dispose(); current = Display.getInstance().getCurrent(); } }
public void destroy() { }
}The one of my Launch Form:
package org.tbdlab.cn1test.screens;
import com.codename1.ui.Form;
public class Launch extends com.codename1.ui.Form { public Launch() { this(com.codename1.ui.util.Resources.getGlobalResources()); } public Launch(com.codename1.ui.util.Resources resourceObjectInstance) { initGuiBuilderComponents(resourceObjectInstance); this.getToolbar().hideToolbar();and the one of my Login Form:
package org.tbdlab.cn1test.screens;
public class Login extends com.codename1.ui.Form { public Login() { this(com.codename1.ui.util.Resources.getGlobalResources()); } public Login(com.codename1.ui.util.Resources resourceObjectInstance) { initGuiBuilderComponents(resourceObjectInstance); } //-- DON'T EDIT BELOW THIS LINE!!! private com.codename1.ui.TextField gui_Email = new com.codename1.ui.TextField(); private com.codename1.ui.TextField gui_Password = new com.codename1.ui.TextField(); private com.codename1.ui.Button gui_LoginButton = new com.codename1.ui.Button();
// <editor-fold defaultstate="collapsed" desc="Generated Code"> private void initGuiBuilderComponents(com.codename1.ui.util.Resources resourceObjectInstance) { setLayout(new com.codename1.ui.layouts.LayeredLayout()); setInlineStylesTheme(resourceObjectInstance); setScrollableY(false); setInlineStylesTheme(resourceObjectInstance); setInlineAllStyles("transparency:0; opacity:255; alignment:center;"); setTitle("Sign In"); setName("Login"); addComponent(gui_Email); addComponent(gui_Password); addComponent(gui_LoginButton); gui_Email.setHint("Email"); gui_Email.setInlineStylesTheme(resourceObjectInstance); gui_Email.setInlineAllStyles("border:none;"); gui_Email.setName("Email"); gui_Email.setRows(1); ((com.codename1.ui.layouts.LayeredLayout)gui_Email.getParent().getLayout()).setInsets(gui_Email, "5.0mm 5.0mm auto 5.0mm").setReferenceComponents(gui_Email, "-1 -1 -1 -1").setReferencePositions(gui_Email, "0.0 0.0 0.0 0.0"); gui_Password.setHint("Password"); gui_Password.setInlineStylesTheme(resourceObjectInstance); gui_Password.setInlineAllStyles("border:none;"); gui_Password.setName("Password"); gui_Password.setRows(1); ((com.codename1.ui.layouts.LayeredLayout)gui_Password.getParent().getLayout()).setInsets(gui_Password, "5.0mm 0.0mm auto 0.0mm").setReferenceComponents(gui_Password, "0 0 -1 0 ").setReferencePositions(gui_Password, "1.0 0.0 0.0 0.0"); gui_LoginButton.setText("Login"); gui_LoginButton.setInlineStylesTheme(resourceObjectInstance); gui_LoginButton.setName("LoginButton"); ((com.codename1.ui.layouts.LayeredLayout)gui_LoginButton.getParent().getLayout()).setInsets(gui_LoginButton, "10.0mm 5.0mm auto 5.0mm").setReferenceComponents(gui_LoginButton, "1 -1 -1 -1").setReferencePositions(gui_LoginButton, "1.0 0.0 0.0 0.0");Steve Hannah
Mar 26, 2018, 4:25:22 PM3/26/18
to codenameone...@googlegroups.com
It appears that initFirstTheme() sets the global resources file. This is the effective difference, as when you call the no-args constructor of your form, it uses the global resource file. I'll need to look into it deeper to see what the correct behaviour should be (whether the result you're getting is correct or not).
Steve
To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discussions+unsubscr...@googlegroups.com.
Visit this group at https://groups.google.com/group/codenameone-discussions.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/dd1973f4-358d-4fab-b642-53a1b8a16ce1%40googlegroups.com.
--
You received this message because you are subscribed to the Google Groups "CodenameOne Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discussions+unsub...@googlegroups.com.
Visit this group at https://groups.google.com/group/codenameone-discussions.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/1bea8bd1-5d97-4e2e-87c3-d3f9c228169f%40googlegroups.com.
Thomas
Apr 10, 2018, 9:47:37 PM4/10/18
to CodenameOne Discussions
I put you a small example on github: https://github.com/ramsestom/CN1GUI_test in case this can help you track the issue (this is the login form layout that is broken on the simulator or on a real android device).
To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discussions+unsub...@googlegroups.com.
Visit this group at https://groups.google.com/group/codenameone-discussions.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/dd1973f4-358d-4fab-b642-53a1b8a16ce1%40googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/1bea8bd1-5d97-4e2e-87c3-d3f9c228169f%40googlegroups.com.--
You received this message because you are subscribed to the Google Groups "CodenameOne Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discussions+unsub...@googlegroups.com.
Visit this group at https://groups.google.com/group/codenameone-discussions.
Thomas
Apr 10, 2018, 9:56:20 PM4/10/18
to CodenameOne Discussions
EDIT: just found the origin of the issue. In my Login Form I had "setInlineAllStyles("transparency:0; opacity:255; alignment:center;");" . Removing the "transparency:0" parametter solved the issue.
To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discussions+unsub...@googlegroups.com.
Visit this group at https://groups.google.com/group/codenameone-discussions.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/dd1973f4-358d-4fab-b642-53a1b8a16ce1%40googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/1bea8bd1-5d97-4e2e-87c3-d3f9c228169f%40googlegroups.com.--
You received this message because you are subscribed to the Google Groups "CodenameOne Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discussions+unsub...@googlegroups.com.
Visit this group at https://groups.google.com/group/codenameone-discussions.
Shai Almog
Apr 11, 2018, 12:29:59 AM4/11/18
to CodenameOne Discussions
We might want to have a special case on the top level form to block opacity/transparency manipulation.
Reply all
Reply to author
Forward
0 new messages