Embed image in flex? Export -> release build not working. - apache-flex

I've a flex application which has actionscript file, images. When i run this in adobe flash builder, everything works. When i export it as a release build and run in other file, swf does not show images and interactivity of flex components is also lost.
Is there a specific way to embed images?
Here is image code,

I don't see your code, but I've had similar issues before. The trick is to reference the image starting with a forward slash '/' in the path. For example, if the image is located at 'img/test.png' then use '/img/test.png' as the embed source path. You should also check to make sure the image is included in your build path.

Related

How to use own icons in Flet

I can't find how to load my own icons in Flet.
I'm testing Flet with the intention of making a desktop app (pure desktop, not Internet needed), but I'm not able to use my own icons to begin with. I can only use the ones that come inside ft.icons, but I'd rather use my own by loading them from a folder similar to /assets/icons. Can I do that? How?
Thanks.
Currently, I don't see a way of doing this; however, you could use the Image class instead.
I would suggest you create an assets folder under your main project folder.
Let's assume you have the following folder structure on your project:
/assets
/icons/my-icon.png
main.py
When you are running your app, you should provide that folder to the initializer in the following way:
flet.app(target=YourApp(), assets_dir="assets")
Then you can access your images there directly and create an Image instance in the following way:
test_image = flet.Image(src="icons/my-icon.png", width=32, height=32, tooltip="Image Tooltip")
You can nest these Image controls inside of anything you want, so you have a lot of flexibility.
The only downside of doing it this way is if you are using light/dark themes on your app. Compared to the Icon class, you will have to specify the light/dark theme versions yourself and update them manually when you are switching your theme.
Here is the official documentation

JavaFX CSS image not rendering

I am working on a Gradle JavaFX project in IntelliJ. My question is essentially "How do I get a background-image URL working for JavaFX in CSS?" for which the answer would be:
.button{
-fx-background-image: url("/image/CloseButtonBlack.png");
}
except that this doesn't work for me. After much experimentation, I have discovered that if I move the file up one level so it lies directly in the resources folder, everything works. Because of this, I believe that the reason the file doesn't display when it lies within the image folder is that the image folder is not marked as a resource folder. If I were not using Gradle, I believe I could fix this just by using IntelliJ's Project Structure -> Modules menu. Since I am using Gradle though, I am thinking that the correct way to fix this would be to write some code in build.gradle so that Gradle knows the image folder is a resource folder. If I am right, what code is it that I need to write to get my background image to display while it lies in the image folder?

Best way to deploy JavaFX app with a lot of images

I am fairly new to java. I have written an application that basically has a 50x50 grid of buttons, with each button opening a specific image related to that button. The images are stored on my file system.
The app works perfectly in Netbeans, each button opens up the correct image.
I would now like to export the app to be able to share it with some people that are interested - however I am not sure what is the best way to do this. I have been googling this for days but haven’t found anything that really answers my question.
What I would prefer is this: The user installs/unzips/whatever the app, and as a result is left with a folder with all the image files (quite a lot of them and around 1Gb in size) and a runnable file, preferrably an .exe to run the program.
What would be the best way to achieve something like this?
At first I was thinking about including all the image files in a runnable JAR. The problem with this approach is that I would have to rewrite my code, as right now my code uses java.io.File to fetch the images and to my knowledge this doesn’t work inside a JAR. Also I would much prefer an .exe instead of a JAR.
Any help will be greatly appreciated!
as right now my code uses java.io.File to fetch the images
Are you saying that you use java.io.File to get a listing of available images or that you're using it to read an image?
If you need a list of images or resources inside a jar take a look at "How to list the files inside a JAR file?"
To read an image from inside a jar using JavaFX, you just need to get the URL to the image:
import javafx.scene.image.Image;
URL url = getClass().getResource("/path/inside/jar/myimage.png");
Image image = new Image(url.toExternalForm(), true);
As to the best way to deploy that app ... I would say that a 1GB app is a beast. Could you host the images on a web server and have the app lazily fetch the images as they need to be displayed?

How to check CSS loaded size in Angular Application

Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.

Flex - Source Size vs. Compile Size

Could you explain why a Flash Builder source folder - no larger than 2 MB - compiles into a SWF exceeding 15 MB with debugging turned off (exported release build)?
There is only 1 embedded image at about 93k - no other images. The application is not that complicated, basically calls are made to a MySQL db to display information, as well as store information. I have used drop shadows and borders, but all standard to Flash Builder. Some custom classes and one custom skin.
Thank you...
Here is listing of the files:
.DS_Store
mx_4.5.1.21328.swz
Main.html
playerProductInstall.swf
Main.swf > 15 MB
rpc_4.5.1.21328.swz
amf_config.ini
services
assets
skins
charts_4.5.1.21328.swz
spark_4.5.1.21328.swz
framework_4.5.1.21328.swz
sparkskins_4.5.1.21328.swz
gateway.php
swfobject.js
history
textLayout_2.0.0.232.swz
This seems pretty large to me.
When you say "Debugging Turned Off" what does that mean? Did you export a release build? Or did you just press the "play" button to run your code instead of the "Debug" button?
Do you have the Flex Framework linkage type set to RSL (AKA External) or Merge into Code?
Are you using an external libraries (SWC)? A framework, such as RobotLegs or Swiz, could add to the size of the SWF; but will probably not be located in the source folder.
Well, well...thought I'd revisit this since I found the problem - a font in a css file with embed set to 'true'. This font wasn't even being used, so I removed it and the css file completely (not in use either). They probably got inserted way early in the project. Code now hovering around 1 MB and less than that for the export build. Hope this helps someone. Cheers!
Flex is a collection of ActionScript classes and components, so when you build an app based on Flex, some of these classes get embedded into your application.
Something as simple as a <s:Button means that the byte code of spark.components.Button has to be included into your application along with your custom code, it's not part of the runtime.

Resources