Resource management 0.0.8.1

When running m-init.js and creating a new project, a base folder is placed inside the project resource folder. The base folder is the default ressource folder for all devices/resolutions. If no other target is specified, all ressource are taken from this base folder.

Usage in the Config.json

You can tell Espresso to build for specific device like: a Apple device with resolution 640x960" by adding this lines to the projects config.json. and run ./m-build.js

{  
    "target":{ 
             "manufacturer": "apple",
             "resolution": "640x960"
            }
}

Specific resources

Espresso uses a three-level based resource management. Place all your resources into the resources/base folder - when no other device has been specified or if you want one design on all devices. In case you have specific resource that only should be added for some devices, you can put these into correspondingly named subfolders of the resources directory: resources/apple and more specific: resources/apple/640x960.

The three-levels

• 1 base - containing all resources, that are the same on every device.
• 2 group - containing all resources, that are shared by a group of devices, not all. Example: apple
• 3 devices - containing all resources, that belongs to exactly on device, inside a group. Example: 640x960

With the resource level concept, you can spread resources over the folders. What does it mean ?! - well, you can place some default resources for all devices in: resources/base. Espresso will take those common resources from the base folder, and look for more resources in a specific folder, that is specified in the config.json. If there is no target entry in the config.json, only resources from the base folder are taken.

If you have specified a target like:

{  
    "target":{ 
             "manufacturer": "apple"
            }
}

Espresso will take the resources from: resources/base AND resources/apple. Resources defined in base = level 1 are "overridden" by that ones in the group = level 2 folder - here the group folder is "apple". A resource is overridden if they share the same name.

If you have specified a target like:

{  
    "target":{ 
             "manufacturer": "apple",
             "resolution": "640x960"
            }
}

Espresso will take the resources from: resources/base AND resources/apple AND the resources/apple/640x960. Like in the example above but also and the ressources in the group = level folder are overridden in the devices = level 3 folder, here the device folder is called: "640x960".

If you have specified a target like:

{  
    "target":{ 
             "resolution": "640x960"
            }
}

Espresso will take the resources only from: resources/base. Because it is not clear from which group/manufacturer the resources for a device with the resolution "640x960" should be read.

Summery:

You can define additional folder, for group of target devices. A target device could be: "Apple device with resolution 640x960" which is the iPhone 4. So the new folder named apple can be defined. All resources inside that folder, are for all Apple devices. While the rest uses the file in the base folder. Another group could be Android (Google) or RIM. This is the second level of resource management.

The last level of specialization are concrete devices (like: iPhone3, iPhone3GS or iPad) or resolutions (640x960 or 320v480). To use it, place a corresponding folder inside a group folder.

Example:

The used resources are printed to the terminal, so you can verify, what resources and more correctly from which folder are used during the application build.

Using Images in the Code

The used images are copied in the output folder under: /build/1295023489690/theme/images along with the images from The-M-Projects core. See here:

As you can see in the screenshot above, all other resources of the application (CSS and JavaScript files) are placed relative to the image folder. To use a image you must specify the url to the image relative from the CSS or JavaScript, where the image is used.

From a CSS file:

/images/<name_of_the_image>.png

Example

.myClass {
background: url("images/<name_of_the_image>.png") no-repeat scroll 50% 50% transparent;
}

From a JavaScript file:

theme/images/<name_of_the_image>.png

Example:

M.ImageView.design({
 value: 'theme/images/<name_of_the_image>.png'
})