I talk to a lot of mobile developers or those who are starting out in the field and by far the number one problem is getting a refined sublime app. There are too many difficulties and pitfalls along the way and the end result is often “sub par” in terms of the UI you want to achieve.
We too bare responsibility for that. We focus too much on the technology and too little on making “gorgeous” easy. I want you to join me in changing that narrative…
The narrative is very common: “you can’t have it all”. You will pay for cross platform by sub par UX or UI. You will “write once debug everywhere”.
Sometimes, that narrative is true. However, when you wield the tools effectively you can get better results than any other approach… You can design your app once and instantly adapt it to all OS’s with native feel. You can debug & optimize your app once and have a more stable/faster app across all OS’s.
It’s not a magic bullet though. You need to learn how to wield these tools just like any tool within your toolbox and that’s where we failed you.
We provided JavaDocs but they are too low level and assume you already know everything.
We have a better developer guide but it doesn’t explain how to design a real app despite having 1000 pages of content…
Something Better
That’s why I started the bootcamp, I needed to learn from the participants about the pain points and difficulties. Despite having a very wide skill set disparity between the participants I saw the advanced developers and beginners run into the exact same set of difficulties.
I’ve learned a lot. I learned how to build better course material, I understood where the main pitfalls lie in Codename One and I’ve condensed all of that together. You can see some of that work in my recent video tutorials which are better looking and more concise.
I’ve applied this approach into the coming course material which is already completely different from everything I did in the past.
Real Apps
This is probably the most important piece. Up until now none of our tutorials focused on creating real apps to the full extent and mostly stopped short. The closest we got was with the chat app tutorial and property cross both of which are two of our most popular tutorials.
I think that this is the biggest missing piece in our educational stack and I think this is the piece that will help you transform your applications from good to great!
So here are the questions:
What apps are you working on?
What sort of UI or functionality are you aiming at but can’t get right?
I want this material to be “driven” by your real world needs, not by my guessing. So please help me out with some suggestions.
I’ve got something going and will write more about it during the week. We also have the code freeze for 3.7 which is just around the corner and we have some pretty huge surprises there!
47 Comments
«What apps are you working on?»
A social network with all its complexities and functionallities. I need to learn how to develop both the app and the server side code.
«What sort of UI or functionality are you aiming at but can’t get right?»
I’m at beginning, however everything seems to me very difficult. You wrote that «We provided JavaDocs but they are too low level and assume you already know everything. We have a better developer guide but it doesn’t explain how to design a real app despite having 1000 pages of content»: it’s true. I hope that the new courses will make me able to do a real social network (like Facebook).
I’m working on a business app right now but a friend is nagging me to build an app to track the trucks for a local shipping company. I’ve done some Codename One work in the past but looking at the map API’s I’m not sure I can do that easily…
Thanks for the feedback!
Building a social network style app is indeed something I’d like to address within the course as it’s a common type of app.
I do hope this work will make the ramp up easier.
Thanks!
I’ve thought about building an Uber style taxi hailing app as part of this. It sounds like this would be something similar to what you’re describing right?
Maps are indeed a bit challenging to get into but with the new z-ordering support it should be much easier…
Thanks, that sounds interesting. I remember seeing something you mentioned about z-ordering in the past. I’ll take a look at that.
Dear Shai,
I am planning an app to connect local customers with local merchants (somehow a mix between a social app and an eCommerce app that will help the local community nourishes their local business through requests tracking and chatting, making advance or full payments)
functionalities expected:
real time update through web sockets, a global payment api, server push notifications, integration with Instagram, Facebook, whats app, etc…, and of course beautiful and slick design that resembles the smoothness of use of popular applications such as Yahoo Mail or [Alibaba.com](http://Alibaba.com)…
Thanks!
Social style app is indeed something I’d like to introduce. I already have some discussion on websockets in the material but the current app isn’t ideal for it. I might make better use of them in an upcoming app, in fact my biggest problem wasn’t with using websockets in Codename One (that was trivial) the problem was using them in Spring Boot, it worked but it was very hard to leverage their power properly.
I do want to build a whatsapp style chat app as one of the apps, as I said our existing chat app tutorial is one of our most popular tutorials.
The basic app that I already have working within the course includes payments with braintree which uses the native SDK to do so.
I’m developing a BLE application to support my medical hardware. UI is the most difficult thing for me.
— What apps are you working on?
I’m working on an app for publishing companies, so they can have their magazines available with full multimedia capabilities. They optionally can take advantage of a new section with localized events.
This is something similar to the Restaurant app buider you have developed, but for publishing bussiness.
This is a working app
Android: [https://play.google.com/sto…](https://play.google.com/store/apps/details?id=es.vchmag&hl=es)
iOS: [https://itunes.apple.com/us…](https://itunes.apple.com/us/app/vch-mag/id591025291?l=es&mt=8)
— What sort of UI or functionality are you aiming at but can’t get right?
So far, I think I’ve got it, although the app still need some refiniment.
Maybe transitions are sometimes difficult to get right. Ie, you have to flush a previous transitions before the next one comes into place or you can have troubles, and this is not always obvious. If the user change tabs for instance, and there is a transition going on, the app might fail.
Other transitions are not easy to figure out. I wanted a zoom effect, something similar to bubble transition, but that is for Dialog mostly. I ended up creating a custom layout to place the zoomed component (yes, I needed absolute positioning) and animating with animateLayout. I’m happy with the results.
Other than that, I think some elements should be modernized. The pull to refresh feature is a bit outdated and now all apps I see just bring down a styled infinite progress.
And you can see cool transitions effect on modern Android apps, When swiping pictures on Whatsapp, the upcomming picture emerges from the background while sliding. I whish I could do something similar.
Thanks for the feedback, that’s very helpful.
I actually had that exact requirement for zoom effect. I used the morph transition which isn’t ideal but it got me something reasonable. It’s in the later portions of the course so hopefully I’ll cover that too.
I totally agree we need better native themes especially with material design but also newer iOS elements. If you notice something specific that you feel should be modernized please just file an issue with screenshots and what you’d expect. It helps us place priorities on what we need to do otherwise we just guess about what’s important.
I agree. UI is a MAJOR focus here.
hi am almost done with an app which users would use to save money , the feature i would say we need but couldn’t implement was being able to send notifications after the app has been closed like every other android app
Did you try push notification?
We cover it in the course as well.
Hi there
— What apps are you working on?
I have an app that uses networking functionality. It fires json test requests at our API’s and receives a response.
I then evaluate the response to determine the health of our API’s.
— What sort of UI or functionality are you aiming at but can’t get right?
My app has a very basic UI – there is no animation or transition effects etc. It is just basic text fields that are populated with values which I store and fire off in the request. You would think that such an app would have no UI challenges … but it does. For example when I open a screen that contains the BODY of a POST request (which is read from a properties file), the text field appears blank. However it is not blank because when I drag my mouse over the text it highlights. And then when I click off, I can see the text.
Still – CN1 is a great tool and I know that it is probably my lack of knowledge that is limiting me. But I am changing that!!! 🙂
Keep up the great work
Thanks, I highly appreciate your taking the time to comment.
I agree that we have a lot of room to improve, especially for first time usage, default theming and learning materials.
I think our core product is far more elaborate than many tools in our field which sometimes means we end up putting out fires in one place while not improving these things enough. Unfortunately, we depend on the community to point out some of these things and nag us to do them but since those are things that bother new users they just don’t get done…
The main app that will be a part of the launch is the restaurant ordering app which is an eCommerce app with payment powered by braintree. Uber, whatsapp and a social network/image manipulation app are definitely the types of applications we are looking to create in the course moving forward.
Thanks!
We discuss webservices and form based UI a lot in the material.
What you are describing sounds a lot like an EDT issue, we discuss that a lot in the course as well. It’s a guess though as it’s hard to tell. Try turning on the EDT violation detection in the simulator menu.
What apps are you working on?
I work on a range of apps, most of the time they have relatively ‘standard’ and simple UI and I use the Flat Blue theme or similar. I like how it looks clean and simple to start with and customers and usually happy with it but I don’t like how many UIIDs need to be edited to change colours etc., (some inheritance would make it more user friendly for other UI).
For more complex designs provided by graphic designers I’ve only used the old GUI Designer and found it takes a lot of patience but did get a handle on how it works and can usually get a good outcome.
What sort of UI or functionality are you aiming at but can’t get right?
Recently I’ve had to make a web app which means taking a break from Codename One for one project. For this I used Vue and Vue Material and was impressed with how quick and easy it is to get a very polished material design UI using those components.
Coming back to Codename One (and trying the new Gui Builder for the first time) I notice that not only is the GUI Builder ‘quirky’ it is also complex to get the same polish and the quirks (particularly around selecting components or adding them in the right place) make it time consuming to get things right so sometimes I just give up short of the outcome I’d like. For example for I use BorderLayout and BoxLayout Y more often than any other type of layout, but all new Forms and Containers in the GUI Builder default to FlowLayout, and the highlighted component in the tree isn’t always the one that is actually selected (GUI Builder bug) so it involves a lot of clicking and fiddling around just to get layouts set, moving a component in and out of a BorderLayout container changes the layout constraints of all the other elements. The upshot of this is that when on a time and budget the layouts have to be done right and then nice polish aspects sometimes get neglected.
I realise that this complexity in the Codename One GUI system is due to the flexibility (Vue Material can ONLY do material design components – even down to enforcing colours from the Material Design specifications) – I’m sure Codename One can produce any type of UI given time and patience.
Perhaps a module could be developed that allows for material design components that clearly match the standards and have them as optional – I know most of my clients on Android and iOS want clean and tidy modern looking applications but don’t have extensive design requirements beyond that, simple drop in material design components would make this a breeze in Codename One, and would produce apps for me at least that would be a step up from the current theme options without adding a lot of work to each project. Its very difficult to replicate material design appearance and interactivity using the current tools.
I very much agree with everything you said. Keep your eye open for our 3.7 announcement next week… We have big news regarding the gui builder…
I agree we need to refine the default look/themes and bring them to the modern age. A lot of the work we did such as the RoundBorder and gradient performance improvements were infrastructure work so we can go back to the themes and remove the usage of hardcoded images within.
Material design components is one of the top features in my list. Some of the developers I talked to specifically mentioned the pull to refresh component which has an outdated look. Others mentioned the OnOffSwitch and there are components that are completely missing.
You can help by filing issues, providing screenshots of how default apps look today or a component looks today and a screenshot of how you would expect it to look. There are so many tasks and issues we get thru every release that it’s really hard to keep an eye on the ball and these are probably the most important and relatively easy to address issues… But we need you to actually ask for that!
I would hope you would 🙂
Just keep an eye on what we do and help us improve by asking for things. If the look of specific things suck we would appreciate issues in the issue tracker to help us keep track of it: [http://github.com/codenameo…](http://github.com/codenameone/CodenameOne/issues/) ideally with screenshots of how the UI looks today and how it should look
I would like to know if it’s possible that when I select a new theme, the old theme and it’s related images get deleted from the GUI Builder. It’s a tedious task to get to remove these manually.
Try Images -> Delete Unused Images
See [https://www.codenameone.com…](https://www.codenameone.com/blog/shrinking-sizes-optimizing.html)
In terms of the whole UI/theme thing, I think you really should make it more clear to new users that the “native theme” is NOT actually native components, but a CN1 generated “look a like”. (I know you can call native, but that’s a slightly different animal). Personally, I _like_ the fact that I can have a UI design that is invariant across platforms – I don’t really understand why people perceive that Google’s L&F of the month or Apple’s is the “one right way”, and people think that CN1 leads to a “lowest common denominator”, which it doesn’t because all the widgets are light weight anyway.
I wanted to build an app for my client. My client is a major football team and they wanted android only app but thinking ahead I rhought it would be better to do it cross platform. Then codenameone disappointed in UI so I had to go back and do a normal android app. But I’m still interested maybe you can take alook of it to see what type of UI but it’s surely material based and modern. So those are things to consider .. just like xamarin limited apis and tools for designing. My app [https://play.google.com/sto…](https://play.google.com/store/apps/details?id=twendetech.eag.simba)
Thanks, we try to be clear with messaging but it gets too nuanced really quickly.
If we say we’re not native that isn’t true because we use native themes. If we say we don’t use native widgets that’s also not true because we support embedding native widgets e.g. text edit, browser, maps, video etc. It’s really hard to explain this in a way that isn’t confusing without going into inaccurate generalizations.
I used to refer to our approach as a “highest common denominator” where we can do stuff that’s kind of difficult to do in the regular native platform e.g. control every pixel in the screen. But that doesn’t really explain anything.
I think we need to seriously overhaul our native themes and this is indeed a high priority moving forward.
Thanks.
I don’t see anything special that should be hard in Codename One although the default theming might now be as nice and might require a bit of design work.
E.g. this app was built in Codename One and has a pretty nice UI although I can think of some things I would have done differently there too: [https://www.codenameone.com…](https://www.codenameone.com/featured-fanzcall.html)
Push Notification is very good but not exactly what we want, we want to run a service in the background that wait for the user to receive an sms when that is done a notification is sent by our app to the user to save money using our app. I hope you understand
Hi Shai
What apps are you working on?
I am working on an eCommerce app for pre ordering food. Here are some screen shot off the
[https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/42f7a92f6d0bb1c49dbc2506d032eac248918635ce4edc240e8bc19e263c163b.png) [https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/81f31b37dc53b86482c8f66cba1463d197b0c51534920177554ec5818758714f.png) [https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/efd71b83b9c07d027e6a5ca3f45bfb3099527bcab6c9119e7e7c6e6e0feb7ac6.png) [https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/80faa7a29cc553ff721049ac48bf5e56b4740fcace1b162cf0a8433b40bfe9a0.png) [https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/c2c4a90592fdf23285dc033a9d8058c235468a51dcb88a8973c1ee3b45899dba.png) [https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/177258718f6552d8383d71a9d19e08ae4b091ed13639748715d85827b80e08f4.png) [https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/802b340d6ae4444ba71c2e3858ab546f333c8dcab22ea02f365632b1c6d5f3bd.png)
What sort of UI or functionality are you aiming at but can’t get right?
My aim is to upload image on the server side and save the image inside my database using codenameone client.(i am using glassfish 4.1 as application server and mysql as database) . If you can provide a sample that upload image and save it inside a database with java it can be gratefull for me.
Background services are an Android only feature, so is grabbing SMS’s. iOS doesn’t allow those (it has background modes which is pretty different). We have some support for that but it won’t work for your use case. You can use native interfaces to do it but it doesn’t make sense in our framework as it’s purely for Android.
That’s a nice looking app. Did you see this post: [https://www.codenameone.com…](https://www.codenameone.com/blog/restaurant-app-builder.html)
This will be the first app I’m teaching and the second app will be the builder app. It will cover image upload and mysql but I’m using Spring Boot not glassfish.
Our target users right now are android users so if you have any tutorial i would love to have a look at how to implement at least being able to send a notification to users via a background service . Thank you
shai
the tutorial your are preparing is free or it was a paying bootcamp ?
Hi, I would like to see an example of how to make an app with a cloud backend. The project I was trying to do was an app that its content can be uploaded from a Web App (an admin) and the customers can see that info on mobile. Thanks!!!
Hi,
both of the apps at launch have a backend in the cloud. It’s unclear if you mean cloud as in server or as MBaaS like Parse. It’s something I’m thinking about discussing as well.
We have a native interfaces tutorial, you can proceed from there.
Both
Thanks Shai. That just simplifies my life
(Sorry – just saw that this was posted as reply on another post. Can you please move it? Thanks)
What I’m working on (going to work on) is a front-end for this database: [https://github.com/aduial/e…](https://github.com/aduial/eldamo-relationaldb)
Eldamo, the parent project, is a comprehensive dictionary of all the languages described by JRR Tolkien including grammar, phonetics and internal history. It’s being created and maintained by Paul Strack and exists basically in XML. The goal of our subproject is to parse this XML into a relational database (done) and to build a client app to use both as dictionary and utility to maintain the database with.
I’ve considere a few different options to create this front-end. I want something cross-platform or in any case, something that’s easily recompilable for different target platforms. I’m currently considering Python & Divi and Java & Codenameone (mobile) + Java & Javafx (desktop).
Unless codenameone doesn’t support embedded databases (H2 / HSQLDB / SQLite / Derby) I’ll give it a try when I’m ready.
Thank you shai, and have been a FAN of yours since LWUIT
Sure we’ve supported SQLite since 2012 and have a few tutorials on this. There is also a section in the online course about using SQLite.
Hi Shai, codename one is great, some new things I would like to make is augmented reality, but need support for video stream and playback at same time. I don’t know Android or IOS so I don’t understand native code implementation too well. Thanks
Hi,
This wasn’t possible in the past but is now possible thanks to peer component z-ordering. It’s mostly a matter of building a peer component that will encapsulate camera views. I’ve looked into it a bit and while it’s doable there is a lot of nuance. Since this isn’t something you can do in PhoneGap there is no plugin we can reference for ideas and it does take some work.
I thought about doing something like this in one of the modules just teach how to build a cn1lib for camera. I looked at it and it’s got a lot of low level OS complexities so I have some concerns that this will become an iOS and Android internals tutorial but it might be worth hitting this if there is interest.
I believe developers would love this. Thank you.
Hello Shai:
I am working on a consumer application that allows users to find stores and browse products. Its status is advanced but I still do not get the functionality I’m looking for.
The problems or needs I have are:
–
The integration with Google Maps does not yet reproduce the most useful
features of that api such as Clustering, setMaxzoom, etc. Personally, I consider that CN1 has “a little bit of everything” but does not end up tackling an issue in its entirety. The interaction with Maps is very important and I consider that it
does not contain all the functionalities that are necessary to develop a
complete application.
– Error control when the terminal goes offline is still rough and I do not find it very intuitive to handle such errors
–
It would be very useful if they made a manual of common development
practices with CN1 to optimize the performance and to reduce the
development time. For example: standardize processes, have general guides of how you develop.
– The control of font size I consider to be rather cumbersome.
– The control of proportions in certain cases is not very friendly. For example when in the item of a list you need to establish that an
image adapts its height and width to the top of the item or if the item
adapts its height to that of the image.
– Bluetooth LE: not even if it works.
In summary: CN1 is a great tool and that’s why I am still subscribed
user, but I think that it still lacks a bit to mature and that it is
necessary that in its functionalities manage to simplify what with other
complicated tools.
Keep in that way!
Thanks, that’s very helpful!
– Yes, we map the basic common use cases and move to the next task. If we’d map every potential use case for Google Maps we might not reach other tasks and might be wasting our time mapping functionality no one actually needs.
We implemented the original maps based on a request from an enterprise customer, Features that came later are based on user demand. If people don’t ask for stuff it will never get done and the way to ask for stuff is file an RFE in the project.
An even more effective way is pull request, you just implement the features you want and have them integrated into the library. One of the nice things about the maps library is that it’s relatively small and standalone. You could probably implement these features yourself in the code without knowing too much because the code is so small. If you run into issues doing it that’s exactly why we are here and we can help you with that. There were several pull requests to that library and that’s probably the best way to get a feature integrated. The whole value of a library like this is the extensibility and ability to implement stuff without our help. I know of a user who forked this lib and converted it to use a China based mapping service since Google Maps doesn’t work well there. Unfortunately he didn’t publish his work.
I’ll be working on an Uber clone as part of these courses and if something is necessary for that common type of use case I’ll probably implement this.
– When you go offline you can handle errors globally or locally. Our simulator includes an option to simulate slow connection and offline as well. If you have a specific example of a problem just post a question on stackoverflow and we’ll try to help you.
– We have a performance section in the developer guide but yes I agree that the developer guide is structured more as a reference than a guide or cookbook. That’s something I hope to change with the courses which try to be more pragmatic.
– Are you using millimeters for sizing fonts?
We have a lot of legacy there so the UX is awful. Select one of the native fonts and select millimeter size.
– I’m not sure I follow the issue with the “proportions”. Are you referring to multi image, background image behaviors, scale behavior or layout. There are some nuances and they are partially mixed with legacy. We’re trying to simplify that.
– I don’t understand the point about Bluetooth LE – that cn1lib has some issues. I think it was a mistake leaving the code too close to the original Cordova implementation as it has some issues. It’s also problematic because it doesn’t work in the simulator.
I think there are two potential solutions one is to implement the JavaSE version of the native interfaces so it works in the simulator and the second is on device debugging. We’re working on on-device-debugging but it’s hard to know when that will launch as it’s pretty damn big.
Implementing the JavaSE native interfaces for Bluetooth LE so you can debug in the simulator is something that community members can probably help with similarly to the work with google maps.
I agree we could use more maturity but I think the biggest things we need to focus on are:
– Good looking UI by default
– GUI builder
– Instructional materials & resources
– Debugging and error handling tools
The cn1libs are a perfect space for the community to fill in the gaps, if we try to do too much there we end up in constant maintenance mode instead of moving the product forward as a whole.
At the moment , I am not working on any app. Though, I feel that perhaps the ones I worked on before could be improved-as regards the UI.
I am working on apps for athletic activities that integrate with BlueTooth. I came back to testing with CN1 when the new guibuilder came out and I think I will stick with CN1 now. Guibuilder does have some issues with navigation but it is so much better. I would like to see more themes. Even a market place for themes would be nice. I would typically purchase my app themes online via themeforest. Maybe you could work with them to create a market for them or sell them directly via this site.
We tried to work with themeforest but it’s a bit of a challenge as a seller in that particular marketplace.
I think that once we improve our native themes implementing themes will become easier and we can offer a wider selection.