Lightweight Popup Dialogs on iOS - codenameone

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);
}

Related

Codename One show image only on specific device

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.

When does the UINavigationBar shadow show? (iOS 6)

I am using a navigation bar with a custom background image. When I wanted to add a custom shadow image, I was surprised to find that even the default shadow image is not visible.
iOS 6 introduced an automatic drop shadow on UINavigationBars, which I expected to see. The example project from http://www.raywenderlich.com/21703/user-interface-customization-in-ios-6 demonstrates this.
However, creating a new project from Xcode’s Master-Detail template does not show the shadow.
When exactly is the shadow shown, and when is it not?
IOS 6 automatic drop shadow is shown by default. If you want to disable/hide this shadow you can try this:
[[UINavigationBar appearance]setShadowImage:[[UIImage alloc] init]];
What I have noticed is that, if I copy/paste a viewController from one project to a new one, the UINavigationBar shadow (sometimes) it's not shown. Replacing the copied viewController with a new one solves the problem... (maybe your case)
I had the same problem on a project upgraded from iOS5, but only on navigation controllers inserted in the pre-iOS6 Xcode versions. Removing them and replacing them with new ones in the most recent version of Xcode (4.6) fixed the problem.
The workaround, which I found half a year later, is actually embarrassingly simple:
self.navigationController.navigationBar.clipsToBounds = NO;
This said, I still believe this is a bug with how Xcode 4.4/4.5 configures navigation bars in storyboards. But at least now we know how to work around it. Cheers!
In addition to Yang's answer, you can create a category to have a global fix like this
#interface UINavigationBar (JTDropShadowFix)
#end
#implementation UINavigationBar (JTDropShadowFix)
- (void)awakeFromNib {
self.clipsToBounds = NO;
}
#end
If you're looking for a solution without hacking around with the category methods, you can also get to a blog post that talks about how to use a UINavigationController subclass to achieve the same fix.
http://ioscodesnippet.com/post/61487770156/custom-shadow-image-on-navigation-bar-ios6-fix
to add some context: i just took my 1-year-old app Cocktailicious and embedded the root UINavigationView in a UITabBarController. after that the old UINavigationBar had the property Clip Subviews checked in interface builder.
in the embedding process i also added a second navigation controller for a new tab in the tab bar. surprisingly, this controller came with Clip Subviews unchecked. feels like an xcode issue.

ImageViewer in WPF

Hi everyone I would like to implement an ImageViewer (like the one in Facebook for example) in a WPF application
I already have a ListBox whith my pictures, it works well. But I would like to add pop "image full size" when the user double click on one of them. (something like in FB, with a fade out of the background etc).
Currently I'm thinking of to use a Window...Do you have a better idea of what I should use ?
i would probably use a window for that as well. Then you can easily put an opacity animation when the window loads to give it the fade in and fade out effect
You could also use a Popup control.
It comes with some some built in (but very limited) animations, like fade, see PopupAnimation.
I'd try that and if it doesn't fit your needs, I second bflosabre91 oppionion and would use a separate opacity animated window.
But bear in mind that with an additional window you could have negative side effects e.g always sync the window positions correctly, handle task switches (ie. correctly hide the window in the taskbar/tasklist)

Can I get TextFormattingMode=Display while drawing off-screen (e.g. RenderTargetBitmap)?

I'm drawing certain images in WPF which will be displayed by a game (developed by a third party). I currently produce the images using a RenderTargetBitmap. Unfortunately it seems that this only supports the Ideal text formatting mode, resulting in blurry small fonts. The application is a third-party game and thus there's no way around using images.
Can I tell the RenderTargetBitmap to assume that it's drawing an image destined for one of the current montiors? Is there another way to get WPF to use the Display rendering mode for off-screen drawing?
I understand why this might seem wrong in the theoretical sense, but in practice there are reasons why I think this is not an unreasonable thing to do:
One of the things the Display mode allows is aliased text, which looks better at small sizes than the Ideal rendering, and is completely independent of monitor properties such as gamma.
A screenshot of small Display-mode text rendered in ClearType looks far better on any screen, even those with different gamma, than Ideal-mode text.
Can the WPF rendering engine do this, or do I have to fall back onto GDI? (which has no difficulties with using Aliased or ClearType rendering off-screen)
There is certainly no obvious way of doing this. I guess drawing to images was never a goal of WPF; the fact that it can actually do this fairly well most of the time must be accidental.
It seems that this works now. Could someone else verify? Here's the relevant code:
var textBlock = new TextBlock();
textBlock.Text = "Hello World";
textBlock.FontFamily = new System.Windows.Media.FontFamily("Arial");
textBlock.Background = System.Windows.Media.Brushes.Transparent;
textBlock.Foreground = System.Windows.Media.Brushes.Black;
textBlock.FontSize = 50;
// . Set Formatting Mode Works! Setting the rendering mode doesn't.
System.Windows.Media.TextOptions.SetTextFormattingMode(textBlock, System.Windows.Media.TextFormattingMode.Display);
Edit: Forgot to mention I'm using the .NET 4.5 framework
Edit2: The difference between Display and Ideal is especially noticeable at smaller font sizes.

Shell Integration Library WindowChrome with Drop Shadow

Ive been googling this alot but can't find any working solution. Im using Shell Integration Library to cerate custom Window Chrome and I also need drop shadows for this window. Some say setting GlassFrameThickness to -1 do the trick but its not working for me. And Jeremiah Morrill suggested using DwmExtendFrameIntoClientArea. Ive tried that and it works, sort of. The shadows looks ok but when the window is shown it is first shown as a glass-frame and then a second later the real content is superimposed. This causes to much flickering for me. Is there any way to get rid of this flickering or is there any better way using only Shell Integration Library?
I had a similar problem where it wouldn't display any shadow when using a custom chrome. It worked fine when using the glass.
I got a shadow by setting GlassFrameThickness="0,0,0,1". The glass didn't show and I got the shadow.
Be warned, the shadow is a simple RECT to Windows, so if you have a funky chrome with transparencies it may look funny.
Also if you support the maximized state be aware the you'll need to set a margin on your top-level panel element of "8,8,8,8" when in maximized mode. All other modes should be "0,0,0,0".
To alimbada, the WindowStyle defaults to None on custom chrome.
The Shell Integration Library uses DwmExtendFrameIntoClientArea, plus handling of several Window messages to get the effects. If you're using the full window rect (i.e. no rounded corners) then setting it to (0,0,0,1) as suggested will give you the drop shadows as you want. If you want to simulate the rounded corners of Aero, then setting it to (8,8,8,8) will extend the glass frame enough that the corners also stay rounded, and then you're responsible for not drawing over the corners of the rectangle. The shape of the drop shadow doesn't change regardless of the glass frame thickness.
The flashing you're seeing when setting the thickness to -1 still exists even when not fully extending the glass frame. What's happening is the window is getting shown while the content is still compositing. What you can do is simplify the default UI so it displays quicker (or you can stage it, bringing in a simnple background first and then replacing it with something usable), or you can create and show the window off-screen, and then move it to the desired start location once the content has been rendered. The easy way to detect when it's probably ready is to invoke a DispatchTimer with Priority=Loaded. That should only get invoked once the basic first layout has been completed.

Resources