This is the second background example and shows how to use the Elementary background object to set an image as background of your application.
The first part consists of including the necessary modules and for this we'll use the Node.js require() function. In this example, we are working solely with elm module.
Next step is creating an Elementary window with Win_Standard without a parent, which is the type used for all of our examples. Here we also set the title that will appear at the top of our window and then the autohide state for it.
The autohide works automatically handling "delete,request" signals when set to true, hidding the window, instead of destroying it.
Our background will have an image, that will be displayed over the background color.
To do so, first we create the background that will display our image.
Then, before loading this image, we set the load size of the image. The load size is a hint about the size that we want the image displayed in the screen. It's not the exact size that the image will have, but usually a bit bigger. The background object can still be scaled to a size bigger than the one set here. Setting the image load size to something smaller than its real size will reduce the memory used to keep the pixmap representation of the image, and the time to load it. Here we set the load size to 20x20 pixels, but the image is loaded with a size bigger than that (since it's just a hint).
Now we load our image from it's directory, using file_set. Notice that the second argument of the file_set() function is null, since we are setting an image to this background. This function also supports setting an Eet file as background, in which case the key parameter wouldn't be null, but be the name of the Eet key instead.
To better understand, the function size_hint_weight_set for JS bindings originated from C bindings function evas_object_size_hint_weight_set, that is EFL Evas type function. With this function we set the hints for an object's weight. The parameters are:
- x - Double ranging from 0.0 to 1.0 use as horizontal hint.
- y - Double ranging from 0.0 to 1.0 use as vertical hint.
This is not a size enforcement in any way, it's just a hint that should be used whenever appropriate. This is a hint on how a container object should resize a given child within its area.
Containers may adhere to the simpler logic of just expanding the child object's dimensions to fit its own or the complete one of taking each child's weight hint as real weights to how much of its size to allocate for them in each axis. A container is supposed to, after normalizing the weights of its children (with weight hints), distribute the space it has to layout them by those factors – most weighted children get larger in this process than the least ones.
- Note
- Default weight hint values are 0.0, for both axis.
Now we add the background as a resize_object to win informing that when the size of the win changes so should the background's size. And finally we make background visible.
Now we only have to set the size for our window and make it visible.
The full code for this example can be found at bg_example_02.js .
This example will look like this:
