Courses

Module 10: Adapting to Tablets and Desktops The value of an abstraction is not that it looks clever in isolation. It is that real screens become easier to adapt. This final lesson in the module is where that claim gets tested. The encouraging thing in the original walkthrough is how little many screens actually need to change once the abstraction layer exists. Base navigation screens can move from Form to UIAbstraction with relatively small edits, and more specialized screens can opt into the specific behaviors they need such as OK/cancel handling or form-specific theming. ...

Module 11: Building from the Open Source Project Offline Without Build Servers or Plugin If you are building Codename One directly from source, the simulator is the first place to prove that your environment is actually coherent. Before you worry about native packaging, you want one unambiguous success signal: the framework builds, the demo project links against it correctly, and the application runs in the Java SE simulator path. ...

Module 11: Building from the Open Source Project Offline Without Build Servers or Plugin Running a Codename One app as a desktop application is a useful way to understand what the simulator and Java SE port are really doing for you. The central idea is straightforward: Codename One still needs a bootstrap environment, and on desktop that environment is responsible for creating the host window, initializing the port, and handing lifecycle control to the application. ...

Module 11: Animations Animation helps when it explains something. It hurts when it becomes decoration for its own sake. That warning at the start of the video is still the right way to approach transitions in Codename One. The two most useful jobs for transitions are emphasis and confirmation. Sometimes you want to draw the user’s eye to something important. More often, you want motion to confirm what just happened: a new screen was opened, a dialog came from outside the normal navigation stack, or a piece of content expanded into a detail view. ...

Module 11: Building from the Open Source Project Offline Without Build Servers or Plugin Building a native Android application directly from the Codename One sources is a useful exercise in understanding how the Android port is assembled, but it is not a lightweight workflow. The amount of setup in the older lesson makes that point on its own. ...

Module 11: Animations Layout animation is one of the most useful animation tools in Codename One because it works with the framework instead of fighting it. The layout manager already decides where components belong. Layout animation simply turns that change of layout into motion the user can understand. ...

Module 11: Animations By the time you reach this lesson, the easy animation APIs are no longer enough. You start needing orchestration: style changes that happen in sequence, animations that should not collide with each other, and low-level control for custom graphical effects. That is where the animation manager becomes useful. Style animation does not fit as neatly into the older one-method convenience APIs because it has to coordinate state changes on components that may already be participating in other updates. The animation manager gives the form one place to serialize and supervise those operations. ...

Module 11: Building from the Open Source Project Offline Without Build Servers or Plugin The source-built iOS path makes the underlying Codename One architecture especially visible because it forces you to confront the translation step directly. Unlike the simulator or Java SE path, this is not just “compile the app.” It is “prepare the classes, translate them into the form the iOS runtime expects, and then wrap the result in an Xcode project that can actually run on Apple tooling.” ...

Module 12: Creating an Uber Clone Transcript Uber is a big influence on the mobile market and a lot of us try to replicate their functionality and Design in this module I’ll try to create an Uber application clone but let’s discuss a bit what that means let’s start by setting expectations in place I’m not going to build everything in the app as there are so many nuances and details within the final app that it would be impossible to go through everything however I will build most of the big ticket UI elements and I’ll actually try and focus on the hard stuff rather than doing things that are mostly simple I chose to clone the existing app rather than building my own since I want to show a professional grade application and Uber is pretty much that the goal of this module is to teach the theory of building a professional app it’s not there for the purpose of rebuilding Uber are you string boot as usual for the server but I’ll try to keep it bare it’s actually better to do stuff in the server in real world scenarios but in this case I want to focus on client development I’m trying to create a close clone but not an identical clone during that last bit between identical and pretty close is a huge amount of effort that doesn’t provide a benefit in fact it makes things worse because it forces the code and designed to be more convoluted I will spend a lot of time in the map UI and try to explain how to build a decent GIS application this isn’t a GIS tutorial though as I’m not an expert in that field I took some shortcuts in building this app so hopefully they don’t show much before we start we need to essentially understand the functionality of uber even if you use the app in the past a lot of the functionality is pretty subtle and you might have run through it without noticing we need to grab screenshots of uber features that we can review and compare to what we are trying to implement once we have those images we can use them to create a mock-up of the Uber UI once the mock-up is in place we can create a server and then connect the whole thing together and fill in the details as we move along this is pretty similar to the process I used to build all the apps and the course as you will notice I prefer building the UI first and think it’s always the best approach when we finish the app it should be fully working at but you will probably need some work in order to bring it to production grade I’ll try to highlight the bits that are necessary as we move through the UI there are some great transition animations in the Uber app which you can see here I’ll go into some details of how we can achieve some of them near the end of the module we’ll start by focusing on the basic skeleton UI notice that these animations differ between Android and iOS now let’s go into the screenshots I captured of the Uber application this shows that even a major native app can have ux blunders we have the Uber logo splash screen followed by a permission prompt for location but let’s move on this is the basic login flow to Uber one of the first things I checked is the look and landscape mode turns out that Uber doesn’t support that the app is fixed to Portrait on mobile phones it doesn’t seem to have much support for tablets either which makes some sense as you would probably not hail a cab with a tablet this allows them to simplify some of their user experience logic and we can probably use a similar approach there are two options for login the first uses social again through Google Facebook and that falls to the native login option the second one uses SMS style activation by collecting the phone number we have support for that in our SMS activation cn1 lib the UI is shown here are all very simple clean and minimalistic which should make them very easy to replicate in codename one on the right you can see a simple form that allows us to select a country if the one we detected isn’t correct it’s pretty simple list with flags and search notice that when you scroll down in the form the title collapses in the material design style to provide a more compact View the SMS activation process works with four digits it doesn’t seem to automatically offer to grab the SMS which is pretty lame we can do better than this I don’t understand why Uber wouldn’t do something better on Android where it’s possible one important thing to notice is the way the digit input looks these are four separate digits but they have one error message below when a number is already active in the server you can use your password and get a password reset form which I didn’t include in the screenshots I’m not sure I’ll go into that level of detail with the implementation one thing that is missing from the screenshots is the next button progress effect which is pretty cool when you press the arrow button the screen tints and the arrow is surrounded by a circular blue progress bar that should be pretty easy to accomplish in codename one so it’s something I’ll try to do as well the UI itself is mostly the map which is great there are the cause and landmarks highlighted in the map the where to text field isn’t really a text field it’s a button when you click on it you see the search form to find directions to order an Uber that you can see in the screenshot next to the map notice notices can be swiped from the bottom this is a doable element but it’s non-trivial so I won’t go into it with this app and ignore that specific element we can see two floating buttons of recent searches trips that you can repeat that should be pretty easy to replicate as well notice that the side menu icon that just floats with no title to disturb the UI of the application one of the small details is the fact that the menu back button is black surrounded by a white outline that means it will be reasonably visible both on a dark and light map that’s a great attention to detail once we pick a location we can get a UI prompt with an order option it also shows the direction on the map highlighting my location and destination if we open the sign menu we can see the design is very simple I’ll skip the Uber for business stuff in the app we make but I’ll try to reproduce this exact UI design notice how the minimalistic design that even skims on colors is able to broadcast Elegance payment is a relatively simple you user experience I won’t go into it at all because we can just integrate brain free for billing and Skip on some of these complexities credit card billing is problematic not just due to technical difficulties but due to liability I wouldn’t go into that unless I had to I won’t go into the details of each of these forms notice I blocked out in red some private information about my trip that isn’t really important one thing you should notice is how simple these uis are I won’t really get into them but they should be pretty trivial the iOS version is remarkably similar to the Android version both in design and transitions notice that the login form has some pretty cool background rotation animation but other than that only the transitions differ in the app everything else looks identical even the text input and The Floating Action button this will make our lives much easier

Module 12: Performance and Memory Tuning Performance problems become much easier to solve once you stop treating them as one category. “The app feels slow” can mean several very different things, and each one points to a different fix. This lesson makes that distinction well. Rendering problems are not the same as business-logic delays. Memory pressure is not the same as a blocking network call. A UI bug caused by nested scrollables or conflicting focus behavior is not really a performance issue at all, even if the user experiences it as sluggishness. ...