I'm coding an app via Codename One. Since the screen of an iPad or other tablet is bigger than a phone's display and that would leave me with a bunch of open space, I was wondering if there is something in Codename One to have an image pop-up on a tablet but that it is not visible on a phone's display.
So is there something like that? How can I use it?
Thank you in advance!
Nick van Kesteren
You can use Display.isTablet() to adapt the UI for a tablet. Normally you don't do this at the image level but rather at a Container level.
E.g. I could do something like this:
Form myForm = new Form("My Title", new BorderLayout());
// add the stuff that's always here...
if(Display.getInstance().isTablet()) {
myForm.add(BorderLayout.EAST, createAdditionalTabletUI());
}
You can also enable other things such as permanent side menu to make the UI use the tablet aspects more intelligently.
Related
After the PR https://github.com/codenameone/CodenameOne/pull/3233, I get the popupDialogs as I want them (on Android). They are ok, the text is correctly in the centre, margin and padding are as I want them.
But I have an issue with iOS. Sometimes, when the popup Dialog contains very few text, iOS calculates wrong Dimension for the Dialog. It happens only on iOS.
What I understood is that the implementation of Dialog popups on iOS is native, while on Android it's lightweight. Please correct me if I have misunderstood. Since the Android implementation works well, I would like to use it on iOS as well. That's the meaning of this RFE of mine:
https://github.com/codenameone/CodenameOne/issues/3234
Anyway, I change my question: even without that RFE, can I use Lightweight Popup Dialogs also on iOS?
Yes but it might be a bit tricky. If you use CSS setting the popup border becomes a huge pain because of this issue.
So you'll need to either use the designer tool and define PopupDialog to explicitly use the RoundRectBorder or you'll need to do it from code (explicitly setting this into the theme).
A hack that might work (didn't try this) is using this code in your init(Object) instead of initFirstTheme:
try {
theme = Resources.openLayered(resourceFile);
themeProps.put("PopupDialog.derive", "Dialog");
themeProps.put("PopupDialog.border", RoundRectBorder.create().
cornerRadius(2f).
shadowOpacity(60).shadowSpread(3.0f));
themeProps.put("PopupDialog.transparency", "255");
themeProps.put("PopupDialog.bgColor", background);
themeProps.put("PopupDialog.padding", "4,4,4,4");
themeProps.put("PopupDialog.padUnit", new byte[]{Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS});
UIManager.getInstance().setThemeProps(theme.getTheme(theme.getThemeResourceNames()[0]));
Resources.setGlobalResources(theme);
} catch(IOException e){
Log.e(e);
}
Note for the readers: this question is referred exclusively to Codename One.
Because I have multiple targets for the same app (Android, iOS, Javascript), that can be run on small screens (that is the typical use case) but also on wide screens, I have to do a choice about the UI.
I want to simplify my life: mobile devices held on portrait mode are my primary target, so... all wide screens (desktop and tablet) will show the app inside a vertical rectangle in the center of the screen. Maybe this is not the best solution, but it can make sense. I suppose that the width of that centered rectangle is 9 cm (my iPhone device width is about 7 cm and my Android device width is about 8 cm).
So... what is a proper way to accomplish this requirement?
Initially I thought that I can create a BaseForm with a code that override the show() method, setting a left and right margin for ContentPane, LayeredPane and Toolbar before calling super.show()... but this solution seems to me a poor way to go and also an overhead, because in that case I'll need to recalculate the margins and to revalidate the BaseForm for every change of size of screen... and, however, this solution will not work with FABs or Dialogs. So... it's not a solution.
It could be nice if I can choose a background (an image or a color) for all the space outside the centered rectangle containing the app.
Any better idea?
This is probably something that we need to implement in the system to make it seamless. Any approach you choose will require some work.
If I were doing something like this I'd create a special form with no title that acts as your background. I'd give it a special custom layout manager that centers the content. Something like:
public CenterOneCompnentLayout class Layout {
public void layoutContainer(Container parent) {
if(parent.getComponentCount() == 1) {
Component cmp = parent.getComponentAt(0);
cmp.setWidth(convertToPixels(9));
cmp.setHeight(parent.getHeight());
cmp.setY(0);
cmp.setX(parent.getWidth() / 2 - cmp.getWidth() / 2);
}
}
public Dimension getPreferredSize(Container parent) {
return new Dimension(100, 100);
}
}
Now just add the actual form to this background form. The rest should work "as is". I think you would need to guard against some things and it's possible this hack will produce some side effects due to the nesting of the forms. But ultimately it should work.
In this picture, there is a screenshot of the iPhone camera functions selector: the user can horizontally scroll them, and the function name moved to center is selected (it changes its color and it calls a listener that activate the function). It's easier to test on a real iPhone than to describe.
The behavior is very similar to the lightweight string picker, but the main differences are that it's horizontal and it's always shown (while the string picker can be opened and closed).
At the moment, I haven't no idea how to replicate it in Codename One: I need to put it over a camera PeerComponent. I need something "enough" similar and usable: the rotating effect (that I suppose hard to replicate) is very nice but not strictly necessary.
This is the one case where List has no better substitute. Notice that this doesn't cover the slight 3d effect in iOS. You can fake it a bit by using a layered layout and gradient fade on top of the list but that might not look great:
Form f = new Form("Horizontal List", new BorderLayout());
DefaultListCellRenderer.setShowNumbersDefault(false); com.codename1.ui.List<String> l = new com.codename1.ui.List<>("Time-Lapse", "Slo-Mo", "Video", "Foto", "Ritrato");
l.setOrientation(com.codename1.ui.List.HORIZONTAL);
l.setFixedSelection(com.codename1.ui.List.FIXED_CENTER);
f.add(SOUTH, l);
f.show();
I am 2 days in experimenting with Codename One and Mobile development in general and tested out some basic navigation and features so far. Now I want to work on the look and feel of the app.
I looked at the 9-border vid which was helpful, but not sure of the best way to add an image for the touchCommand that takes 3 tabs on that bar ( Example: home, profile, settings.. Similar to how instagram's TouchCommand is at the bottom of the app).
If I add the image, it does not line up with my Commands.
What is the best way to approach this to ensure the "TouchCommand" image appears as one, but is broken up to 3 parts for each individual commands when pressed, home, profile and settings? I might be asking this all wrong, forgive me as this is all new to me.
Thanks.
EDIT:
This is what was done.
In Theme -> Constants added commandBehavior= bar . This gives the default bar at the bottom. Created in photoshop a new bar 300x80 and added it to the TouchCommand. (See ScreenShot 1). Took this bar and broke it up in photoshop into 3 different buttons for the tab press etc. In GUI Builder, added Home, Profile, Settings in the commands. Added the image to Press Icon for Home and it didnt line up (screenshot 2). Very Frustrating to design layouts. I am hoping there is a much better technique as I am still experimenting with Codename one?
What is unclear to me, is I cant find any documentation on how to approach this and what the dimensions of each image should be as it seems that codename one has issue aligning them. I am assuming the steps would be to create the background image and add the icons as interactive layers for the user. I really care for the image being pressed and changes color like the instagram example. I dont see a way to do this in codename one GUI builder and themes.
EDIT:
Okay, I have decided to use tabs instead of the bar at the bottom. If I add my image to it, I get the results (screeshot 3). Is this the right method to use to accompolish what I want? If so, I dont see a way yet to alter this to become what I want :( .
Plus adding the background, shows one size in the display and looks different in the simulator. (screeshot4)
Answered Here: How do you get ActionBar from SocialBoo theme to show up in your GUI?
Tabs are customized individually so the border should apply for an individual tab to create the background. The foreground element is the icon which you define in the Tabs component itself thru the icons property which allows you to define 3 icons for the 3 tabs (assuming you use the GUI builder). If you add the tabs via addTab in the code you can specify an icon there.
Is there any way to disable the WP7 splash screen and just show a blank screen?
My splash screen only stays on for less than half a second, leaving the user with a rather jarring sensation. I'd rather they not see any splash screen at all.
I would have simply used a plain black image as my splash screen, but then that would result in an ugly experience for people using a light theme (since my app's background is white on light themes and black on dark themes)
Thanks!
Simply remove the file SplashScreenImage.jpg.
Right click on the image file, select "Exclude from project". Rebuild.
Just try to delete the SplashScreenImage.jpgas madd0 said :)
If you want your SplashScreen to last longer you can add a start page like this:
Customer Splash Screen
Modify the Timespan to suit your the time you want:
_splashTimer.Interval = new TimeSpan(0, 0, 2);
Like everyone says, you could delete it. But before that, just rename it - right-click on SplashScreenImage.jpg in the Solution Explorer, click rename and just name it something like: SplashScreenImage2.jpg - gives VS a chance to catch up with your intent depending on your machine. Then delete that file.
You can and should delete the splash screen as per the guidance in the Windows Phone 7 Application Certification Guide in section 5.2.1.a:
Microsoft recommends that the
application provides a splash screen
image only when it takes longer than 1
second to load the first screen.
However, one thing that I've discovered is that while many apps can fire up really fast the first time they are launched, they made load slower after that if they have data that has been tombstoned. Just FYI