Post Image

Round Border in the Designer

We introduced the new RoundBorder API a couple of weeks ago and it's already picking some usage. But to really take off it needs to be within the themes, starting with the next plugin update the border section of the designer tool will include the options for round border.

Read More
Post Image

KitchenSink UWP

The latest plugin update includes a new kitchen sink version that includes quite a few bug fixes, enhancements and a new side menu design that looks much better. We also got the demo published on the Windows Store thru the UWP port which isn't so much a testament to the maturity of the port as much as it is to the limited testing done by Microsoft.

Read More
Post Image

Floating Button

The material design floating action button is a powerful tool for promoting an action within your application. Quite a few Codename One developers implemented with own interpretation of this UI element and with the coming update we will have an official implementation.

Read More
Post Image

Round Border

Circles and completely round border sides are problematic for multi-resolutions. You need to draw them dynamically and can't use image borders which can't be tiled/cut to fit round designs. Up until now we recommended using background images or changing the design entirely but now we have a new option: RoundBorder.

Read More
Post Image

Different Icons

When we designed the icon for the new Kitchen Sink demo we tried to use material design principals. We thought it would look reasonable on iOS but it looked awful. So we decided to adapt the design and create a separate yet similar icon for iOS.

Read More
Post Image

Rating Widget

The two key factors to improve any product are: get help from your biggest fans and learn from your detractors. Obviously there is a lot of nuance to that wide reaching advice...
Rating widgets embody this advice. They prompt a user for a rating. If it's good we ask him to review the app in the appstore and thus bring more users. If it's bad we ask him to tell us why!

Read More
Post Image

3 Image Tools for App Marketing

Every now and again developers ask us how we do the graphics for our posts/promotions and up until recently the answer was "photoshop". While knowing photoshop is still very worthwhile we still like these 3 tools that provide great shortcuts to creating both screenshots and art.

Read More
Post Image

KitchenSink II

I try all things, I achieve what I can.
Opening with a Moby-Dick quote seems rather appropriate for taking on the kitchen sink demo. It often seemed like a task that is too big and unsurmountable as we were working our way thru it. In fact the version that we are releasing now has far less features and abilities than our original whiteboard...

Read More
Post Image

In the Shadow

Diamond asked us about an easy way to do dropshadows in Codename One to which I answered that it's pretty easy thanks to our Gaussian blur support...

Read More
Post Image

Performant Radial Gradients

One of the first Codename One performance tips is: "Don't use gradients". We already wrote about improved performance to gradients in the past but that covered linear gradients and didn't cover radials on iOS.

Read More
Post Image

Using Icon Fonts Such as Fontello

A lot of our focus in the past couple of releases has been around the material design icon fonts, they changed the way we build UIs. We also support arbitrary font icons, this features isn't limited to material icons and we blogged about it a while back.

Read More
Post Image

Image Overriding

I hoped todays post would cover the new Kitchen Sink demo but due to a couple of bugs we decided to postpone that to next week. In the meantime I'd like to discuss something I did there which is actually pretty cool and most developers have no idea that we can do Image Overriding.

Read More
Post Image

Composite Animations

When we announced Codename One 3.4 we also announced a major animation overhaul. This was an important milestone that we didn't fully actualize until this past week...

Read More
Post Image

Scrollbars & Tooltips

One of the big decisions we made a while back was to build the new GUI builder on top of Codename One itself, we extended that decision three months ago with the decision to build the Codename One settings in Codename One and then deciding to make it the default preferences UI for all IDE's...

Read More
Post Image

Alphabet Scroll

We got a lot of requests from developers over the years to do an iOS style alphabet side scroll. Some developers implements such scrolling but no one made it generic or contributed it back. So a recent stack overflow question got me thinking about how easy it would be to actually implement something like that and I decided to try...

Read More
Post Image

Dynamic AutoComplete

With the fix for issue #1694 we can now have a moderately simple method of creating an AutoCompleteTextField that works with a webservice. This has been requested quite often and was quite frustrating to implement in the past it is now relatively simple with just a few lines of code.

Read More
Post Image

Charts Demo Revisited

The charts demo is one of the most elaborate/messy demos we have as it was derived/ported from an aChartEngine demo. Since the Codename One charts are themselves a derivative of aChartEngine this makes a lot of sense but the demo is a bit big and hard to follow.

Read More
Post Image

ToastBar Messages

The ToastBar was one of those API's I didn't know I needed and yet I became addicted to it...
Ever since Steve came out with the ToastBar I constantly catch myself typing Display.show only to delete that to use the ToastBar. It's both really easy to use and more consistent with modern mobile UI design.

Read More
Post Image

Unleading & Mutating Accordion

We covered the new Accordion component last week and just started using it in a demo for which it was very suitable. As we were working with it we discovered that it was missing some core methods to remove an Accordion entry or change it's title. But worse, was the fact that a delete button in the title wouldn't work!
The crux of the issue is in the fact that lead component doesn't support excluding a specific component within the hierarchy from it's behavior so we set about to fix that...

Read More
Post Image

Clock Demo

We've been working very hard on updating a very ambitious demo for this week but alas it still isn't ready... In the meantime we decided to modernize the clock demo which is an important demo that is missing from the IDE's for some reason which is a shame because it's probably our only low level graphics focused demo...

Read More
Post Image

Accordion Component

The Accordion ui pattern is a vertically stacked list of items. Each item can be opened/closed to reveal more content similarly to a Tree however unlike the Tree the Accordion is designed to include containers or arbitrary components rather than model based data.

Read More
Post Image

Social Boo Revisited

SocialBoo originated from the same app design vault set of designs that brought us the Chrome Demo. This demo uses a somewhat outdated but still reasonable gunmetal look, it also features different UI styles when running on a tablet/phone. Notice in the screenshot above that the UI for the demo differs when running in a phone/tablet and even changes when the tablet flips between portrait and landscape...

Read More
Post Image

Toolbar Search Mode

The Toolbar is a pretty flexible API for handling the title area. It allows a lot of things including search but up until now that very common use case was not a standard part of the API.

Read More
Post Image

Dr. Sbaitso Revisited

Dr. Sbaitso is one of our newer demos. We wrote it for a workshop at JavaZone a couple of years ago and it proved to be an excellent tutorial on many complex abilities of Codename One. It captures images from the camera, rounds them, does dynamic search with a chat like bubble interface...

Read More
Post Image

Property Cross Revisited

PropertyCross is one of our newer demos, due to that there was relatively very little work needed to modernize it and this resulted in a stunning improvement over the existing demo. During that process we also discovered a small regression due to changed in the web service we relied on.

Read More
Post Image

Sticky Headers

Sticky headers was one of the first big requests we said no to. Back in the day a lot of people asked for it but we always shot it down because it was too hard to implement on top of our Swing inspired lists. This predated our Container improvement, InfiniteContainer and InfiniteScrollAdapter.

Read More
Post Image

Toolbar Back & Easier Material Icons

When we initially launched Codename One it was pretty hard to imagine todays apps. Menus and back navigation were miles apart when comparing Android 2.x and iOS 4.x... So we created a very elaborate set of abstractions (command behavior) that served as a set of patch framework we could live with for a while.

Read More
Post Image

Chrome Demo

This week we chose to modernize the very outdated Chrome Demo. This demo is one of our early demos developed during the iOS 4.x era. We licensed it's original design fromapp design vault and created a Codename One version of that original template. While the guys in app design vault modernized most of their templates to iOS 7 flat design they didn't do this for the Chrome demo.

Read More
Post Image

Camera Demo

With the 3.4 release we discussed the process of modernizing the demos and the first one we picked for this task is the camera demo which is probably the easiest one of all the demos...
The demo is trivial and doesn't really demonstrate anything other than capturing and showing an image captured from the camera/retrieved from the gallery but this is where it gets interesting. It even works in the JavaScript port so you can even run this in the browser and it works as you'd expect!

Read More
Post Image

Java 8 Switch, New Preferences & Demo Structure

With the 3.4 release we discussed the process of modernizing the demos and also mention that we would continue the trend of building Codename One on top of itself. We now have a rough outline of what we are going to do possibly starting with the next plugin update.

Read More
Post Image

Around

Chen just released a new cn1lib for circular progress indicators of various types. This is an often requested feature and there were many ways to implement this in the past but it is now far easier to do this with shape clipping.

Read More
Post Image

Shape Clipping & Bubble Transition

Clipping is one of the core tenants of graphics programming, you define the boundaries for drawing and when you exceed said boundaries things aren't drawn. Shaped clipping allows us to clip based on any arbitrary shape and not just a rectangle, this allows some unique effects generated in runtime.

Read More
Post Image

PSD to App Revisited

One of our most important posts from 2015 was Steves PSD to App: Converting a Beautiful Design into a Native Mobile App. This post included a very thorough step by step video guide walking thru the creation of a non-trivial UI design and ended with the introduction of Steve's CSS plugin for Codename One.

As we are close to wrapping up the developer guide update it occurred to us that this remarkably important tutorial isn't within the developer guide!

Read More
Post Image

It's Full Of Stars & Terse Commands

A very common UI pattern is the 5 star ranking system. Up until recently we always had the same answer when developers asked us how to implement it: "Use toggle buttons (CheckBox)".
This is still not a bad answer but we think there is a "better" simpler way to do this thru the Slider which was effectively designed with this usage in mind.

Read More
Post Image

ToastBar & Gaussian Blur

Just last week I wrote that we are making an effort not to add new features and we got foiled by a couple of new features. The main reason for this is paying customers who need to have a feature now. This makes it hard for us to focus completely, but it does keep the lights on here so we can't really complain.
To be fair, during this time we were able to almost double the page count of the developer guide from the 3.2 era to 576 pages at this moment and we still have a lot of work ahead of us in that department.

Read More
Post Image

Ratatouille's Restaurant In Code

One of my favorite Pixar movies is Ratatouille, maybe because I'm such a glutton. So when I was thinking about the next tutorial/demo and the idea of a restaurant app came up I knew it had to be based on Ratatouille. This is a relatively simple demo that can literally fit in a single blog post all the way thru and the real cool thing about it is that you can try the JavaScript version right now from your browser without compiling anything...

Read More
Post Image

Sizing Images Just Right with Cloudinary

Sizing images for multiple DPIs and device sizes is challenging. There are image quality and bandwidth considerations, especially when loading images over the network. The new Cloudinary cn1lib simplifies this process by preprocessing images on the server side, so that they can be delivered to the mobile app in the exact correct side and quality.

Read More
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.

Read More
Post Image

Building A Chat App With Codename One Part I

In this tutorial we will cover the basics of building a good looking chat application with Codename One that will work on all mobile OS's. We will cover everything from design to social network login and the actual chat behavior.

This project is created with the new Java 8 support to make the code simple and short. This tutorial is for a hand coded application mostly because GUI builder tutorials require video and are thus less searchable.

Read More

Codename One Graphics - Understanding Coordinates

Post Image

Codename One provides a rich set of drawing primitives in its Graphics class. It allows you to draw text, shapes, and images to the screen. The position where these elements will be rendered is determined based on a combination of Graphics state information (e.g. the current translation, and transform) and coordinates that are passed to the drawing method. Understanding how these coordinates are calculated can be tricky when you first begin using the API.

Read More

Easy Demos, Flip & More

Post Image

One of the pains in Codename One is the access to the demos, yes we have the downloadable demo bundle and the SVN but for a compete novice to Codename One this isn't front and center. Chen decided to address that by embedding the latest versions of the demos both into the Eclipse and the NetBeans plugins, now when you create a new Codename One project you can also create a demo project and "just run it". This allows you to quickly learn/debug our sample code which should help with the Codename One learning curve.

Read More

PropertyCross Demo

Post Image

The new property cross demo shows off the usage of webservices, JSON parsing, infinite scroll, URLImage and lots of other Codename One features. It uses a UK webservice that allows listing properties for sale in the UK.

Read More