Is the social boo theme dead in codenameone? - themes

I've been struggling with app dialog and toolbar appearances in the social boo theme for some time. I recently discovered that my struggles are less with my code and more with the theme. In the GUI Builder switching the Native Themes from IOS6, IOS7, and Android (Gingerbread I believe) all create very different dialogs ranging from matching to illegible to ok. Also I found this demo:
https://www.codenameone.com/demos-SocialBoo.html
and ran it on my Android (S6) phone. The below image illustrates the problems:
Social Boo visualizations
Note the Dialog's appearances as they change in the first 3 images. Please note in the 3rd Android picture I'm clicking on the Cancel button to show how differently it paints with the pointer pressed. The 4th image is again from my phone, note the toolbar button on the top right with a square image placed oddly over a rectangular button. Ah finally, all the problems I'm seeing in my app happening elsewhere!
Hopefully my title question now makes more sense. Is the social boo theme being updated with CodenameOne releases or is it dead? Should I abandon using it as it'll have quite varied appearances on devices especially iOS? I'd love to have the theme maintain the IOS6 appearance on all devices - how can I achieve that goal? Thank you in advance for your help!

It's a bit out of date. Most developers just cut a PSD design from scratch which works best when based on a native theme.
You can easily fix these things if you want to work with that theme though. When we implement a theme we don't aim to implement every feature that might be needed as those are hard to predict and will increase the theme size. The original theme didn't include design for dialogs so some behaviors leaked out.
You can use theme constants and UIID's like the theme constant dlgButtonCommandUIID to determine the UIID of the buttons within the dialog.

Related

Is there any way to have an accessibility toolbar on a laravel project?

For my laravel project I need to implement an accessibility toolbar; however, I can't find an already developed toolbar. The only toolbar that I found was the ADA toolbar but it's for wordpress.
Do you know about any toolbar for laravel that I could use or should I create it myself?
Thanks in advance.
Having a toolbar to allow various adjustments to a site such as font, color schemes, etc is an ok thing to do as long as the toolbar isn't trying to replace making the site accessible. These latter tools are typically called "overlays" and many of them market themselves as saying you don't have to fix any accessibility issues and all you have to do is plugin their tool to your site (and pay them a fee every month). It's blatent false advertising and several groups are working with the FCC regarding this.
A guide to accessibility overlays
Overlay Fact Sheet
The Many Pitfalls of Accessibility Overlays
Accessibility Overlays May Not Make Your Site More Accessible
Why Accessibility Overlay Solutions Fail to Protect or Serve
Should I Use An Accessibility Overlay?
But with that out of the way, if you've already spent time making the site accessible, then having a toolbar to help with accessibility is ok. A good example is the State of California. Click on the "Settings" cog in the upper right...
and you'll see some handy adjustments you can make to the site. Higher contrast, font size, and font face.
These are all helpful things. The settings don't replace any accessibility work that's been done on the page. The webiste already has good color contrast. The website already has a good font (although there aren't any WCAG requirements when it comes to font.)
Making a website is not that difficult, contrary to what you may think. Most (I'd say over 90%, probably higher) accessibility issues are super easy to fix. It's usually the volume of issues that takes time. Lots of easy fixes still add up to a lot of time if there are 1000s of them.
Finding accessibility issues might be the challenging part if you're not familiar with WCAG. For anyone that's been doing accessibility testing for a few years, it's not that challenging.

Manually Setting the color of the WP7 System Tray

I have read the UI Design Guidelines for WP7 development and am actually a fan of Metro (to a point). However, an app I am developing is requiring custom theming regardless of the user's theme settings.
In general, I just manually set each element that I want to be sure uses a specific color (rather than a theme resource). But I can't seem to find settings regarding the system tray (status bar).
I am okay with it showing as long as I can change it's color (failing that though, how can I hide it?). The color I need it to always be is black. Obviously when the dark theme is selected, we are good to go. But it looks terrible in the light theme to have a big white bar at the top of the app.
Hopefully this is an easy question with some easy to earn rep!
It is possible to change that color in mango. SystemTray.BackgroundColor = Colors.Orange; In my case it must be inserted in OnNavidatedTo, in constructor it disappeared after 1 second.
If you want to set this in the xaml you can do something like this:
shell:SystemTray.IsVisible="True"
shell:SystemTray.Opacity="0"
shell:SystemTray.ForegroundColor="Black"
I am not aware of a way to change the theme of the system tray (or status bar). You can hide it using the SystemTray.IsVisible property.
Note that I've had trouble trying to set that property within the page constructor (I think it fails when resuming after tombstoning, don't remember exactly). The solution was to place the code in the page's Loaded or OnNavigatedTo event.

How to force to use light theme in Windows Phone 7?

In my Windows Phone 7 app, I want to use the light theme, no matter what theme the user sets in the phone. How to do that ?
Do I need to custom the style or theme ? I just want the default light theme.
Thanks
Jeff Wilcox offers a good way to do this using a theme manager he developed.
http://www.jeff.wilcox.name/2012/01/phonethememanager/
There is a nice way of replacing the default brushes. Saves you setting Forecolor everywhere.
http://www.designersilverlight.com/2011/01/17/theme-forcing-for-windows-phone-7-silverlight/
You'll still need to set the background of the main layout node to the default background brush.
Background="{StaticResource PhoneBackgroundBrush}"
There is no way to force an app to use a specific theme.
The best you can do is create your own style for every control you use and mimic the light theme in your styles.
Beware, this can be a time consuming and tedious task. Be sure to test all pages and all controls in all states when both the light and dark themes have been specified by the user.
I've had to do this (but for the dark theme) and it's not something I'd do again out of choice.
There are a few tips on doing this from one of the PDC sessions on optimising performance http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/10/28/pdc-live-optimizing-performance-for-silverlight-windows-phone-7-applications.aspx
This is a very bad idea.
Windows Phones use OLED displays - the pixels generate light directly, they are not backlit. Power consumption is therefore highest for white pixels. This is why Microsoft is suddenly obsessed with light text on dark backgrounds. It's not a back-to-the-seventies thing.
If you do this you will cause ridiculous power consumption.
For the benefit of the jerk who voted down a factually correct answer, I quote page 63 of the Windows Phone 7 UI Design and Interaction Guide published in July 2010 by Microsoft.
Avoid using too much white in
applications, such as white
backgrounds, as this may have an
impact on battery life for devices
that have organic LED displays.
If you're wondering why Microsoft included a "light background" theme option, so am I.

Window docking advice for Mac

I'm from a Windows programming background when writing tools, but have been programming using Carbon and Cocoa for the past year. I have introduced myself to Mac by, I admit it, hiding from UI programming. I've been basically wapping my OpenGL code in a view, then staying in my comfort zone using my platform agnostic OpenGL C++ code as usual.
However, now I want to start porting one of my more sophisticated applications to Mac OS.
Typically I use the standard Visual Studio dockable MDI approach, which is excellent, but very Windows-like. From using a Mac primarily now for a while, I don't tend to see this sort of method used for Mac UIs. Even Xcode doesn't support the idea of drag and drop/dockable views, unfortunately. I see docked views with splitter panels, but that's about it.
The closest thing I've seen to the Visual Studio approach is Photoshop CS4, which is pretty nice.
So what is the general consensus on this? Is there are more Mac-like way of achieving the same thing that I haven't seen? If not, I'm happy to write a window manager in Cocoa myself, so that I can finally delve in an learn what looks like an excellent API.
Note, I don't want to use QT or any other cross-platform libraries. The whole point is that I want to make a Mac app look like a Mac app, leave the Windows app looking like a Windows app. I always find the cross-platform libraries tend to lose this effect, and when I see a native Mac UI, with fancy Cocoa transitions and animations, I always smile. It's also a good excuse for me to learn Cocoa.
That being said, if there is an Open Source Cocoa library to do this, I'd love to know about it! I'd love to see how someone else achieves this, and would help smooth the Cocoa learning curve.
Cheers,
Shane
UPDATE: I forgot to mention a critical point. I support plugins, which can have their own UI to display various plugin specific information. I don't know which plugins will be loaded and I don't know where their UI will live, if I don't support docking. I'd love to hear people's thoughts on this, specifically: How do I support a plugin view architecture, if the UI can't change? Where do I put the plugin views?
Coming from a Windows background, you feel the need to have docking windows, but is it really essential to the app? Apple's philosophy (in my opinion) is that the designer knows better than the user how things should look and work. For example, iTunes is a pretty sophisticated app, but it doesn't let you change the UI around, change the skin, etc., because Apple wants to keep it consistent. They offer the full view, the mini player, and a handful of different viewing options, but they don't let you pull the source list off into a separate window, or dock it in other positions. They think it should be on the left, so there it stays...
You said you "want to make a Mac app look like a Mac app", and as you pointed out, Mac apps don't tend to have docking windows. Therefore, implementing your own docking windows is probably a step in the wrong direction ;)
+1 to Ken's answer.
From a user perspective unless its integral to the app like it is in Adobe CS or Eclipse i want everything as concise as possible and all the different options and displays out of my way so i can focus on the document.
I think you will find with mac users that those who have the "user skill" to make use of rearranging panels will in most cases opt for hot key bindings instead, and those who dont have that level of "skill" youre just going to confuse.
I would recommend keeping it as simple as possible.
One thing that's common among many Mac apps is the ability to hide all the chrome and focus on your content. That's the point behind the "tic tac" toolbar control in the top right corner of many windows. A serious weakness of many docking UIs is that they expect you to have the window take up most of the screen, because the docked panels can obscure content. Even if docked panels are collapsable, the space left by them is often just wasted and filled with white space. So, if you build a docking panel into your interface, you should expect it to be visible most of the time. For example, iTunes' source list is clearly designed to be visible all the time, but you can double-click a playlist to open it in a new window.
To get used to the range of Mac controls, I'd suggest you try doing some serious work with some apps that don't have a cross-platform UI; for example, the iWork apps, Interface Builder or Preview. Take note of where controls appear and why—in toolbars, in bottom bars, in inspectors, in source lists/sidebars, in panels such as IB's Library or the Font and Color panels, in contextual HUDs. Don't forget the menu bar either. Get an idea of the feel of controls—their responsiveness, modality, sizing, grouping and consistency. Try to develop some taste—not everything is perfect; just try iCal if you want to have something to make fun of.
Note that there's no "one size fits all" for controls, which can be an issue with docking UIs. It's important to think about workflow: how commonly used the control would be, whether you can replace it with direct manipulation, whether a visible indication of its state is necessary, whether it's operable from the keyboard and mouse where appropriate, and so forth. Figure out how the control's placement and behavior lets the user work more efficiently.
As a simple example of example of a good versus bad control placement and behavior in otherwise-decent applications, compare image masking in OmniGraffle and Keynote. In OmniGraffle, this uses the Image inspector where you have to first click on an unlabeled button ("Natural size") in order to enable the appropriate controls, then adjust size and position away in a low-fidelity fashion with an image thumbnail or by typing percentages into fields. Trying to resize the frame directly behaves in a bizarre and counterintuitive fashion.
In Keynote, masking starts with a sensibly named menu item or toolbar item, uses a HUD which pops up the instant you click on a masked image and allows for direct manipulation including a sensible display of the extent of the image you're masking. While you're dragging a masked image around, it even follows the guides. Advanced users can ignore the HUD entirely, just double-clicking the image to toggle mask editing and using the handles for sizing. It should be easy to see, with a few caveats (e.g. the state of "Edit Mask" mode should be visible in the HUD rather than just from the image; the outer border of the image you're masking should be more effectively used) Keynote is substantially better at this, in part because it doesn't use an inspector.
That said, if you do have a huge number of options and the standard tabbed inspector layout doesn't work for you, check out the Omni Group's OmniInspector framework. Try to use it for good, and hopefully you'll figure out how to obsess over UI as much as you do over graphics now :-)
(running in slow motion, reaching out in panic) Nnnnnoooooooo!!!!!
:-) Seriously, as I mentioned in reply to Ken's excellent answer, trying to force a "Windowsism" on an OS X UI is definitely a bad idea. In my opinion, the biggest problem with Windows UI is third-party developers inventing new and inconsistent ways of presenting UI, rather than being consistent and following established conventions. To a Mac user, that's the sign of a terrible application. It's that way for a reason.
I encourage you to rethink your UI app's implementation from the ground up with the Mac OS in mind. If you've done your job well, the architecture and model (sans platform-specific implementation) should clearly translate to any platform.
In terms of UI, you've been using a Mac for a year, so you should have a pretty good idea of "the norm". If you have doubts, it's best to post a question specifically detailing what you need to present and your thoughts on how you might do it (or asking how if you have no idea).
Just don't whack your app with the ugly stick by forcing it to behave as if it were running in Windows when it's clearly not. That's the kiss of death for an app to Mac users.

Windows mobile controlling scroll bar with finger

I have a question about the windows mobile development.
I created a mobile form on the windows mobile 6.0 test project. But that example form slightly larger than the vertically normal pocketpc forms. I now everybody said you can press the scrollbar for accessing bottom or any location of the form.
But i need to use the finger for easy navigating form areas. This kind of iphone :)
Is it possible ? how can i make this ?
Windows Mobile 6.5 adds gesture support, that is supposed to allow such functionality for finger control. Of course, your code has to take advantage of it.
You can also write your own, which isn't difficult, but still cumbersome.
My answer could be classified as subjective. I try to now show the scroll bar when possible for just that reason. On most devices that have touch screen, you can scroll using you finger (and I'm a somewhat large guy -- 6'3" with farmer kid hands).
But if you are displaying a grid, that isn't always possible. The results can go off the screen very easily. Oh well, grab a pen and hit the scrollbar.
Other screen elements that can help: tab control. separate your controls into groups and put each group on a separate tab. I also do a lot of wizards with LARGE next and previous buttons.
But in all of this, if it is designed to be stylus free, just pray the user doesn't have to type anything using the screen soft keyboard. That just doesn't work with a finger.

Resources