Last week we discussed the first part of working with text components and left some big tasks for this week. This week we'll try to address the remaining issues with text input and make it easier to construct UI's. This is crucial as we'll be going into code freeze soon and we need enough time to iron out the issues in the text input.Read More
I started working on this post back in August and so much happened in between I just had to scrap the whole thing and start over again... I've discussed buttons before and now it's time for
TextArea. But before we go into that lets take a moment to talk about the problems that arose from the last installment of pixel perfect.
I already have half a post on text components but I've put that on hold for now as I've been working on the on-top side menu to supersede the existing side menu bar implementation. I've made some fixes for it over the week, I wanted to make it the default for Codename One apps but it still isn't "perfect". We will make it the default within the next couple of weeks so please test it after this weeks update and let us know ASAP if you spot any issues!Read More
I have blogged, in the past, about UI design in Codename One. In one tutorial, I walk through the process of converting a PSD file into a mobile app. Unfortunately, upon re-reading that tutorial, I realize that I completely skipped one of the most important steps. I essentially began with "let's make our app look just like the design", but I didn't describe what it meant to look "just like the design". In this blog post, I'd like to unpack what "just like the design" means to me, in the context of mobile app development.Read More
I've been working on the new pixel perfect post which I would like to focus around the text components, in order to do that I needed an underline border type. Historically this is something we shrugged off and pointed people at the 9-piece border. That was the wrong answer and it partially related to the way rendering used to work in Codename One and partially related to our reluctance in changing the resource file format.Read More
For this blog post, I have prepared a couple of video tutorials to walk you through the creation of a Sign In form using the GUI Builder. I have taken the existing Sign In demo project as a basis, but I'm re-doing the UI, which was originally hand-coded, using the GUI Builder.Read More
Last week I wrote about the effort of revitalizing the native themes in Codename One and I'm not sure if I got the point across as I would have liked it. So this week before I go into the changes and work we're doing I'd like to take a step back and explain how everything works and why we need a native theme...Read More
I got a question the other day about a UI design for an upcoming Codename One app. In this UI the title floated on top of the content as the content scrolled past and tabs were a part of the title area in the style of material design.
Our tabs component predated material design by many years and wasn't designed for this sort of UI. When you scroll out of a tab it scrolls out. Using it for this sort of UI doesn't make much sense. The solution was to use a custom title area with two toggle radio buttons representing each tab with a line below to indicate the selected button.
I've mentioned before that our biggest priority in 3.8 is refining the UI design of Codename One applications. This is a difficult task as it is so vague. There are so many small things we can do, when they are viewed in unison they seem approachable but as we start going thru the tasks priorities muddle. That's why we need feedback from you guys on what bothers you about the UI and its refinement.Read More
With version 3.7, we have revamped the GUI builder with a designer that allows you to position your elements precisely where you want them. The experience should be closer to what you find in graphical design applications like Photoshop rather than the more rigid "drop in the slot" approach in previous versions of the GUI builder. There are caveats to be aware of with this approach, but overall, it should empower you to build beautiful UIs with greater ease than before.Read More
SVG (Scalable Vector Graphics) is an XML based image format that represents an image as vectors instead of pixels (raster). An SVG file is represented by the set of lines & shapes that make it and can thus be rendered at any resolution without quality degradation due to scaling. It has some other neat tricks up its sleeve but I'm only going to discuss that specific feature today.Read More
Theming allows us to adapt the look of an application in a similar way to CSS while styling allows us to do so within the code. In this tutorial I cover only a small fraction of the subject matter but after going thru it you should have a decent understanding of the forces at play and the tools you can use.Read More
Until this weeks release push notification was registered using
Display.registerPush(Hashtable, boolean) the thing is that both of these arguments to that method are no longer used or not the best way to implement registration. So we deprecated that method and introduced a new version of the method
Layouts are one of the hardest subjects to grasp in Codename One, there is a lot of nuance in getting layouts "right". Since the subject is so vast and complex this video only scratches the surface and is still relatively long for an introductory video. It's crucial to go thru this material though if you are not familiar with layouts or find them confusing.Read More
This feature is still undergoing development but I wanted to share the progress here so we can start getting bug reports and suggestions. One of the frequent requests for the side menu UI is to provide a way for it to render on top of the UI instead of shift the UI. The old side menu was written when the facebook app was the chief application that used that UI paradigm so it was built to match that approach.Read More
One of the biggest challenges facing new Codename One developers is the challenge of creating an elegant looking UI. This isn't trivial in any tool but we don't make it easy enough in some cases. In the tutorial below I'm focusing on one of the most important UI elements: the side menu.Read More
One of the biggest pain points in Codename One is theming, there are several things we did to alleviate the problem but it's an inherently complex problem. One difficulty people have is in the disconnect between what we see in the UI and the styling in the designer. This creates a disconnect that is often hard to bridge.Read More
One of the most painful aspects in any mobile app is input, besides the difficulty of viewing the details on a tiny cramped screen the input via the virtual keyboard is nowhere near the input comfort of a full fledged computer or even a tablet.Read More
Last week a question came up in stackoverflow that came out quite a few times before but this time I had a better answer thanks to the round border. After giving that answer I recalled that I already wrote some code to implement badging in the FloatingActionButton but never exposed it because of some bugs...Read More
The Phoenix theme had a FloatingActionButton with a gradient on top. This goes against the mostly flat material design spec but after looking at the design with a solid color I came to the conclusion that the designer was totally right to use a gradient in this case. Unfortunately we didn't build that support into the
The Phoenix UI kit by Adrian Chiran is one of the best looking and most challenging template UI's I had to adapt in recent history. The breadth of the design is pretty challenging but it also has some elements that are really hard to adapt across platforms in a portable way.
Some designs don't work well in landscape/portrait mode and we need to adapt them to fit the orientation of the device e.g. when we have a large graphic element (icon etc.) on top/below and we no longer have room for that element.Read More
In the previous template post I introduced a material design inspired theme. This time the theme I chose is simpler "cleaner" but not necessarily easier to integrate. I've had quite a few difficulties wrestling with Photoshop oddities (bugs?) that made this template painful, hopefully I've narrowed down the process enough so this should become easier.Read More
We previously discussed the problems with List and somewhat neglected
ComboBox which is a subclass of
ComboBox has the dubious "honor" of deriving most of the problems
List has and adding a slew of its own problems such as two separate renderers, different behaviors between OS's etc.
There was much left unsaid about the template UI that I did earlier in the week. It was doable and reasonably easy but I still had some pitfalls. I was able to circumvent them easily but I'm not so sure these would have been easy for other developers out there. As a result we decided to simplify some use cases in Codename One as a result.Read More
We get contacted quite a bit about the prospect of porting applications that were already written using the Android API. In this quick tutorial we will walk you thru the paces of converting a simple Android application to a Codename One application. We will also start with some basic tips covering the differences between Android and Codename One development.Read More
Generating a template from a PSD isn't hard but it isn't a trivial task either, in this recurring segment I will try to generate good looking Codename One templates from freely available PSD files. Since this requires some effort I don't think I'll be able to keep this as a weekly segment but I'll try to post such a template once every two or three weeks. If you know of a free PSD that you'd like to see as a Codename One app point me at it in the comments and I might integrate it in a future post!Read More
Chen has been working quite a bit on the new GUI Builder and made some significant changes both to it's look and functionality. These changes are wide reaching covering the appearance, functionality and stability of the GUI Builder.Read More
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.
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
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
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:
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
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!
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
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
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
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
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
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
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
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
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
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.
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
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.
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...
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
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
Accordion is designed to include containers or arbitrary components rather than model based data.
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
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.
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
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
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,
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
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
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...
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
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
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
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!
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.
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.
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
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.
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.
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
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