My theme.css is 58K, but the generated theme.res (which does not contain any images or fonts, only the theme generated from css) is 349K.
Since theme.res is a binary format, and probably more compact than a css text file, this seems strange - has anything changed in the format or could something be wrong in my css file?
If on the other it is normal that the theme.res size can be so much bigger than the theme.css, wouldn't it make sense to add an option to just include the css in the distribution and then generate the theme.res on the device on first run of the application?
58k is huge for a CSS theme so this makes sense. Notice that some CSS styles can't be implemented in Codename Ones styling so the CSS tool launches a browser and grabs a screenshot from the browser then generates an image based on that.
To see if this is what happened just open the resource file using the designer tool and go to the images section to see what images were generated. You can then reverse the styles that triggered image generation and see if you can tune the CSS a bit to avoid image creation.
Related
I am using Netbeans. I don't know what I'm doing wrong and I'll detail what I've done in sections within the attached image:
Rename theme.res to theme_legacy.res
Delete indicated file and folders.
In the designer create the constant "theme" and save file.
Rename resource file in main class and save file.
Activate CSS file and save.
In section 6 it shows the incomplete CSS file. After executing the project another "theme" is created as shown in section 7.
I appreciate your comments.
To do a "slow migration" just do the following:
Remove the includeNativeBool constant from the CSS - this means we inherit the native theme instead of the old theme (which I assume already inherits the native theme). You can only inherit one theme...
In the code load the legacy theme just like you do right now
Layer the CSS on top by adding the following line:
theme = UIManager.initNamedTheme("/theme", "Theme");
Once you do that the theme will include both the legacy code and the new stuff. This is from the developer guide "Theme Layering" section.
I would like to record an 'iPhone' demo in the simulator, but the font is not the same as on the device (I know you can't distribute it). However, I found the SF Pro font for download and wanted to give it a try and was wondering if there is a simple way to override the native fonts easily (without having to change e.g. the css file)?
So that I can leave statements like this in my CSS: font-family: "native:MainRegular" but programmatically set this to be my copy of SF Pro font in the Simulator...
I wouldn't do this since font kerning will look "off" and if someone will notice the font he'll notice that as well. The same font will look different in Windows, Mac etc.
But if you insist then the simplest way is to create your own skin file. This is just a simple zip file containing the skin details. E.g. this is the iPhoneX skin. Notice it doesn't include TTF files within...
You need to add the fonts you want then use something like the google pixel skin as a reference. Look in the properties file on defining the fonts. It's pretty simple.
As you can see from the script building the skins is literally just zipping.
I have been using Fontawesome 5.6 (free) in a winforms project, and rendered glyphs by referencing the character code into a variable. "&HF084" would show the Key character in VB.net for example.
The latest versions of Fontawesome, like 5.10, while still having the same character codes for the same icons, don't always render the icon, even if it's available in the free version I'm using.
I have noticed in a few comments, that specifying weight would fix the issue, at least for css rendering.
Specifying Bold style under a label with the font does fix the issue of non-rendering icons, however they are rendered much more heavy than they should be. Previously specifying Regular font style used to work for all icons, however that is not the case now.
As far as I'm aware I can't specify weight of a font by point in winforms, just specify the style (regular, bold, underlined, etc.)
EDIT: For more information, I am using the ttf font files that come in the web folder of the web zip file of fontawesome. The reason for this is that otf file format doesn't work on Windows server 2003, which is an environment that will run the WinForms app.
Two questions:
What are the steps to add a data file to theme.res in a css activated project? When I open the generated theme.res with the resourceEditor, I can see the data file but the code Resources.getGlobalResources().getData("datafile") returns null.
I keep having some multi-image files "SideCommand*.png" from Resources.getGlobalResources() that I have no idea where they are from since they do not appear in the generated theme.res loaded in resourceEditor.
It could sound like the process is broken somewhere or I do not check out the right theme.res but adding an image to the css area works just fine. I can see it in the resource Editor and I can load it using Resources.getGlobalResources().getData("imagefile"). I'm really lost here, any chance you can guide me?
Cheers.
Emmanuel
If you define a border that can't be satisfied by the existing borders in Codename One the CSS plugin generates a 9-piece border for you by using the JavaFX HTML engine to render the CSS and grab a screenshot. That means the css for SideCommand uses a fancy border.
The CSS processor supports images but not data files at this time. You can add an image using this approach: https://www.codenameone.com/blog/using-css-to-import-images.html
Notice you can add additional res files for data.
My app is too large for the 50 meg limit so I am looking at some ways to significantly reduce the file size.
If I discard a dpi what happens when it runs on that dpi? I have some HUGE backgrounds making my app very bloated, I was wondering if I can remove them all but say the HD one and it would scale or would it be simply empty? Or would I need to change the background image scaling to make it do this?
Also CN1 seems to use png, can I use jpg for selected items to save space? Backgrounds that are 2.3 meg pngs could be 35k jpgs.. Even if I wrote a script that jpeged them after I press save in the gui designer, this could work I assume?
Any any further final tips for reducing the size of cn1 apps?
A 50mb app is not only big, but prone to be slow on devices (performance wise).
To reduce your App size tremendously, do the following:
All my answers are based on old GUI Builder
For background image, use a single image (not multi-image) and style the form UIID to use the image and type IMAGE_TO_FILL.
Avoid using png image whenever possible, CN1 supports jpg perfectly.
Don't use images for basic icons, use fonticon. Thousand of icons could be made 100kb and of high quality svg image that doesn't pixelate. I will explain at the end of this list how to create your custom fonticons.
Avoid using 9-piece border image where it's not really needed, try to use solid background color if it won't ruin your design.
Delete unused images, they also take a lot of space. On your GUI Builder.
Re-use UIIDs, instead of creating multiple similar UIIDs.
Migrate your GUI Builder forms to code, I posted a sample form Class to answer another question here and also talk about similar thing here.
Delete UIIDs you're not using and in most cases, copy and paste UUID of unselected style to selected, instead of creating similar.
Be Careful with this. Keep your GUI Builder open, make sure Xml team mode is checked under File, save the GUI Builder after deleting Unused Images, without closing the GUI Builder, go to your project folder -> res -> delete theme.xml and the theme folder inside res folder (The name might be different if you've renamed your theme.res file). Now go back to your app and save again. A fresh copy of your res files would be saved in the same folder.
Minimise the amount of background images you use, Modern good looking apps are simple plain background apps. E.g, Facebook, Twitter, Uber, AirBnB, BBC News App and many others. Unless your app is actually a game or necessarily require rich images that have to be static.
Watch this video about performance tuning, It's a bit old but still contains useful information
If your app is bigger than 20 mb on iOS and 5mb on android, you should be worried about it's performance.
Creating fonticons:
Go to fontello.com and check the icons present, if there are icons you need that are not there...
Go to flaticon.com and search for it there, download it as svg and drag'n'drop the svg on fontello webpage. If the icon doesn't look as expected...
Go back to flaticon.com and download the image as black 512px png image and go to online-convert.com, convert the png to Monochrome svg file, this helps you to create a compound image that works well with fontello.
download the fonticon as zip on fontello and follow Shai's chat app example to use it. the zip contains demo html file to preview your icons and also a config.json that can be drag'n'drop on fontello.com to continue where you stopped.