Places Demo Part III

OK, its time to get started with actual resource editor work. First we need to launch the resource editor and create a new blank theme.

BTW If you follow along don't forget to save frequently, unfortunately the resource editor doesn't yet offer proper "crash recovery" it is in my todo list but is a rather hairy problem.

Then I define the form background to a vertical gradient starting from d8fe:

The next stage is going to the GUI builder and creating a new form (I called it Main, but call it whatever you want). I set its layout to border layout and placed two containers within it (in the center and in the south), these containers will hold the UI for the two portions of the screen.

It should look something like this:

Then we need to allow for the design of the top area texture, for that we will add a new multi-image using the Images->Add Multi-Images option and select the skyline image here:

Notice that I am selecting the full size image and not the one included in the blog!

Then I am prompted to select the resolutions to the multi images. Notice that I filled out the percentages (to 100 and 61) and only then updated the values to 0 where appropriate.

This dialog effectively tells the resource editor which size images it should manufacture for every resolution. I selected 100% for width which means I want the typical width of a device class as listed above (since the image needs to occupy the full width) and selected 60 percent height to match the image dimensions.
I zeroed out the values of the fields for which I didn't want an image created, very high resolution images would make my resource file too large and very low res images will be pointless for this sort of application.

After pressing OK I select the first container and set its UIID property to "MainTexture", I then right click it and select Style->Unselected to edit its style. I select "Image Tile Horizontal Align Top" and within the derive tab I type in Container (to inherit the behavior of the Container style).

Notice that the image might not tile properly sometimes due to its size, in which case we can increase its width slightly. Ideally an image that tiles "properly" will provide the best background texture.

You should have something that looks like this:

And the GUI should look like this:

Now we would like to add the carousel to the bottom of the screen and the map.
We add the map image using the same multi-image approach from before:

We then select the second container and select BoxLayout_Y as its layout. We drag two containers into it. We select the containers and select for both the FlowLayout layout type, and configure it to align to center. This allows us to center the elements within the containers.
We drag a label into the top first of these two containers, set its UIID to Container and set its icon to the map image.
We drag a List to the second container and configure its orientation to be Horizontal. You should end up with something that looks like this:

We will implement the list bellow in the next part but lets at least finish the main sections of the top part... Go to the top container (the one I called Container1 which we placed in the Center) and set its layout to border layout, drag a container into its center area.
Set the UIID of that new container to MainList and its layout to box layout Y.
Edit its style by right clicking it and selecting Style->Unselected, in the derive tab type in "Container". Select the border tab and click the image border wizard.
Use pick image to pick the list image here:

And fill out the cutting setting as such with 30 px for every direction and Low/Medium multi-image generation:

After pressing the generate button close the wizard and select the margin tab, define 10 pixels for every direction and click OK. 
This should produce something like this:

Next time I will continue from this point to complete the UI of the first form.