Fork us on GitHub

Good Looking By Default, Native Fonts, Simulator Detection & More

First impressions are crucial. That is why we are re-doing ours
Post Image

Good Looking By Default, Native Fonts, Simulator Detection & More

I've spent a lot of time working with and reviewing other cross platform tools this past month, mostly with Cordova due to our recent announcement that we support Cordova.
I hope it doesn't come off as too arrogant but our "onboarding" experience is pretty amazing in comparison to pretty much everything else. Just install IDE, type in Codename One and follow wizard for new app. The only tools that are simpler than that are the rather limited web based solutions.
But we do fall short in one major way, our "hello world" apps look bad by default when compared to pretty much any tool out there. There are a lot of reasons for this but none of them are good reasons and this gives a horrible first impression to any developer picking up Codename One for the first time.

E.g. this is what our new Hello Cordova demo looks like when creating a hello world on Codename One:

Cordova Hello World App

What isn't obvious in this screenshot is that the text on the bottom animates in a very pleasant subtle way to complete the experience. It just looks great and inviting to explore!
By comparison this is what we have today if you just use the new project wizard all the way thru without changing the defaults:

Codename One Hello World

I think picking the flat blue theme as the default would be a slight improvement but this is not an inviting first impression. We created this because we think like developers ("get a hello world out") but we should think like a product where the end result matters.
Several things need fixing here:

  • Default color scheme - the blue theme should be the default, lighter more inviting colors
  • We need better more modern fonts by default - see below
  • We need a more animated/image based output
  • We still want to keep the code short and simple

So right now this is what we have in terms of a new "hello" world, the Apple logo in dukes hand is replaced dynamically with android/windows logos:

New Codename One Hello World

The code for this entire thing is pretty small as well so it should be really easy.
Notice that we will still have the plain hello world app, "we'll just rename it to "barebones" which is more representative of its function/use.

Simpler Fonts

Fonts have always been a hassle with Codename One because of the low end platform legacies. The main problem is that even if we want to support something like truetype fonts only on smartphones, we still need to change rather complex API's and the designer UI.

We normally just recommend that people embed a TTF file which solves the problem for some use cases, but its often not intuitive and doesn't work well for the "good looking by default" goals stated above. Modern Android devices have roboto font builtin to them and modern iOS devices have HelveticaNeue both are gorgeous fonts that can really make a huge difference to an app.
So we introduced a new scheme into the Font.createTrueTypeFont method, if you use one of the hardcoded font names on a device that supports it you will get a font object that is similar to a TTF loaded font but was generated by the platform. To detect if a platform supports this use Font.isNativeFontSchemeSupported.

This might be challenging for most developers so we enhanced the designer to include all of the options: native:MainThin, native:MainLight, native:MainRegular, native:MainBold, native:MainBlack, native:ItalicThin, native:ItalicLight, native:ItalicRegular, native:ItalicBold, native:ItalicBlack.
Each option here maps to either roboto on Android or HelveticaNeue on iOS with the equivalent weight/italic behavior.

Detecting The Simulator/Simpler Crash Reports

One of the long time requests we always had was detecting whether we are running in the simulator or not. In the past no one opened an issue on that and most were OK with using some System.getProperty() trickery.
While these tricks work, they still have issues with the desktop port. There is also the very valid use case of detecting the simulator to disable crash protection and to implement development time logic (e.g. skipping login process).

We now have a new method in Display: isSimulator which I would say is pretty self explanatory.
One of the triggers for this is the new Log.bindCrashProtection(boolean) API which ignores the simulator and doesn't bind crash protection logic there. This method accepts a boolean flag indicating whether the exception on the EDT should be swallowed. It simply grabs all exceptions thrown on the EDT and sends the log to us by email, its restricted to pro developers as part of the crash protection feature..

More Terse Layouts

We added a lot of new terse layout API's into the layout class specifically LayeredLayout now has an encloseIn method of its own. So does FlowLayout, however it also added many methods to allow enclosing in all the available variation of flow loyout types, specifically: encloseCenter, encloseRight, encloseMiddle, encloseCenterMiddle, encloseRightMiddle, encloseBottom, encloseCenterBottom, encloseRightBottom.

New Label Constructors

We recently added the ability to create a Label with UIID and now we added the ability to create a label with both text and an image in a single constructor (I'm a bit shocked we didn't have this). We also added a constructor for text, image and a UIID.

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.