Skin design vs legacy skins

[jsfan3]

I have a few questions:

1. Do the skins created by the Skin Designer and the legacy skins provided with the Simulator use CSS the same way?

2. The Skin Designer allows for a lot of customization. If I want a specific device (e.g., the iPhone 17e), is it enough to choose that device, select "Pick a shape," and click "Finish" without changing anything? I don't understand the point of making customizations. Let me explain: If a device like the iPhone 17e has certain characteristics, I want those characteristics to be the default, because I don't know exactly what they are.

3. The Simulator allows one to select the native theme. If there are multiple native themes, does the one used depend on build hints, or on the user’s device? I'm confused because I assumed that the theme I see in the simulator is how the app should appear on any device, with the only distinction being between Android and iOS. I also assume that the JS Port uses the iOS theme. Desktop apps seem to not use any native themes, so I have to style everything from scratch. However, it’s been a long time since I built a desktop app from scratch, so I’m not sure.

Thanks for the clarification!

[shai-almog]

1. This has no impact on CSS.
2. In theory yes (see below).
3. Right now we didn't want to disturb the status quo of themes that "work" that's why we didn't apply modern by default everywhere. We also rethought the idea of distributing themes in skins. It made sense when we did it but it no longer does. We keep it there for legacy but the right thing is to include the theme in our implementation since that will most closely match what you see in the device. The goal is to actively update the new native themes with new features as we move forward and you'd instantly get them through maven.

Designing a skin requires a few things:

1. OS name
2. Screen size
3. Screen DPI
4. Fonts
5. Device name
6. Picture of the device
7. Map of the elements within the device e.g. notch, island, hole etc.

In the past we just used device artwork (which is hard to get for free) and the artwork had to fit the screen dimensions perfectly which is HARD. We then had to map this using special marker images that told the simulator where the screen is. What areas are "legal" and what areas are safe. That's a challenge.

However, most of this data already exists in the internet already so we took an existing device database and are expanding it automatically with new device meta-data:

https://github.com/codenameone/CodenameOne/blob/master/scripts/skindesigner/common/src/main/resources/devices.json

e.g. this is the entry for the iPad Air 11:

{"id":"apple_ipad_air_11_2026","brand":"Apple","name":"iPad Air 11 (2026)","os":"iPadOS 26.3, upgradable to iPadOS 26.4","year":2026,"form":"Tablet","tablet":true,"w":1640,"h":2360,"ppi":264,"inches":11.0,"platform":"ios","hasNotch":false,"hasIsland":false,"hasHole":false,"hasHome":true,"safeTop":24,"safeBottom":24,"fonts":{"system":"SF Pro","prop":"SF Pro","mono":"SF Mono","small":13,"medium":17,"large":24}}

That's a lot of what we need. Now notice that it say's the device doesn't have a notch. I don't know if that's accurate and even if it says that it has a notch it probably won't say exactly where it is or what size it is. That's where you come in, when the details of the device aren't perfect representation of the reality you can refine them in the UI. The UI then generates a simple clean rendering of the device. Fills in all the applicable information and generates a skin that should be a good representation of the device. It isn't perfect because our data will never be perfect. But if you have a physical device you can measure and adapt to fit the constraints and get it to a point where it's good enough for testing/screenshots etc. That's the goal.