Mobile Static Resources

Contents 1 Introduction 2 ComponentProvider 2.1 Application Identifier 2.2 Dependencies with other Applications 2.2.1 Extending Existing Applications 3 File Structure

Introduction

This document explains how static JavaScript and Stylesheet resources are declared to be included in a mobile application.

ComponentProvider

Openbravo mobile applications use the same Openbravo concept of Component Provider to declare the resources available for it.

 
@ApplicationScoped
@ComponentProvider.Qualifier(WarehouseConstants.COMPONENT_TYPE)
public class WarehouseComponentProvider extends MobileCoreComponentProvider {
  static {
    // Set dependency on Mobile Core app
    BaseComponentProvider.setAppDependencies(WarehouseConstants.APP_IDENTIFIER,
        Arrays.asList(MobileCoreConstants.APP_IDENTIFIER));
  }
 
  private static final String PREFIX = "web/" + WarehouseConstants.MODULE_JAVAPACKAGE;
 
  @Override
  public List<ComponentResource> getGlobalComponentResources() {
    final List<ComponentResource> resources = new ArrayList<ComponentResource>();
 
    final String[] deps = { "terminal/wh-terminal.js", "mainMenu/wh-menu-model.js",
        "mainMenu/wh-menu-view.js", "goodsMovement/wh-movement-model.js",
        "goodsMovement/wh-movement-view.js", "goodsMovement/wh-movement-document.js",
        "goodsMovement/wh-movement-lineEditor.js", "goodsMovement/wh-movement-product.js",
        "goodsMovement/wh-movement-bin.js", "goodsMovement/wh-movement-attribute.js",
        "css/wh-styles.css" };
 
    for (final String dep : deps) {
      if (dep.endsWith(".js")) {
        resources.add(createComponentResource(ComponentResourceType.Static, PREFIX + "/source/"
            + dep, WarehouseConstants.APP_IDENTIFIER));
      } else if (dep.endsWith(".css")) {
        resources.add(createComponentResource(ComponentResourceType.Stylesheet, PREFIX + "/assets/"
            + dep, WarehouseConstants.APP_IDENTIFIER));
      }
    }
    return resources;
  }
}

Application Identifier

Application identifier is a String that identifies your mobile application.

When adding static resources, this identifier should be used.

resources.add(createComponentResource(ComponentResourceType.Static, yourJSFile, APP_IDENTIFIER));

This is the way to load isolatedly the resources for your application and not, for example, the ones defined in Openbravo.

Application identifier is used by index.html to load the correct resources.

 
  <script src="../../org.openbravo.client.kernel/OBMOBC_Main/StaticResources?_appName=APP_IDENTIFIER"></script>
  <link rel="stylesheet" type="text/css" href="../../org.openbravo.client.kernel/OBCLKER_Kernel/StyleSheetResources?_appName=APP_IDENTIFIER"/>

Dependencies with other Applications

 
  static {
    // Set dependency on Mobile Core app
    BaseComponentProvider.setAppDependencies(WarehouseConstants.APP_IDENTIFIER,
        Arrays.asList(MobileCoreConstants.APP_IDENTIFIER));
  }

It is possible to load resources defined by another application by declaring a dependency from ours to the other.

Dependencies are declared by BaseComponentProvider.setAppDependencies(OurAppIdentifier, ListOfApplicationsItDependsOn);.

Extending Existing Applications

An existing application can be extended by third party modules if ComponentProvider of these modules adds resources to the application identifier.

File Structure

Following eyo's structure, the recommended structure for static resources files is:

+ <module>
  + web
     + <module>
        |- assets
        |  + here all css and images
        |- source
           + here all your javascript files

Whenever one of these files is modified, it is required to deploy it to WebContent directory. This can be done with: ant smartbuild.

Another (faster when developing) is to work directly in WebContent. In this case is of paramount importance not to forget to move back the files from there to actual module folder, because is this one what will be included in the obx file to deliver the module. There is a utility shell script (it works in *nix systems) that automates the copy from WebContent.

Category: Mobile Developers Guide