missing icons from built foam

[psperneac]

foam was built like this:

node --harmony ../../bower_components/foam/tools/foam.js --classpath=../../js/app/model/foamModels.js foam.build.BuildApp targetPath=. controller=com.employtouch.webclock.WebClockApp includeFoamCSS=true precompileTemplates=true

CLASS({
    package: 'com.employtouch.webclock',
    name: 'WebClockApp',
    extends: 'foam.browser.u2.BrowserController',
    requires: [
        'com.employtouch.webclock.Notification',
        'foam.dao.EasyDAO'
    ],
    exports: [
        'notificationDao'
    ],

    properties: [
        {
            name: 'notificationDao',
            factory: function() {
                return this.EasyDAO.create({
                    model: this.Notification,
                    daoType: 'IDB',
                    name: 'notification',
                    cache: true,
                    cloning: true,
                    contextualize: true,
                    seqNo: false
                });
            }
        },
        {
            name: 'model',
            factory: function() {
                return this.Notification;
            }
        }
    ],
});

only modification was on the foam.js file itself as I didn't know how to 'require' other paths:

c:\dev\git\TouchBaseHost\src\main\webapp\webclock-resources\bower_components\foam>git diff tools/foam.js
diff --git a/tools/foam.js b/tools/foam.js
index b7b54c3..1d34b32 100644
--- a/tools/foam.js
+++ b/tools/foam.js
@@ -73,6 +73,7 @@ console.dir(FOAMargs);
         foamPath = args.foamPath + '/core/bootFOAMnode.js';
     }
     require(foamPath);
+    require('../../../js/app/model/foamModels.js');

     if (CLASSPATH) {
         for (var i = 0; i < CLASSPATH.length; i++) {

c:\dev\git\TouchBaseHost\src\main\webapp\webclock-resources\bower_components\foam>git branch
* master

I tried to figure out where those images are coming from, but the dom is pretty complicated, not sure if it is the canvas or an img with an empty 'src'

<action-button id="u2v24" class="foam-u2-md-ActionButton- foam-u2-md-ActionButton-available foam-u2-md-ActionButton-floating-action-button noselect" style="color: rgb(255, 255, 255); opacity: 1;">
      <canvas id="view14" class="halo" style="width: 100%; height: 100%" width="44" height="44"></canvas>
    <div id="u2v25" class="foam-u2-md-ActionButton-icon-container"><div id="u2v26" class="foam-u2-md-ActionButton-icon">
      <icon id="view16">

             <img class="material-icons-extended" id="view17" src="" style="opacity: 1; height: 24px; width: 24px;">

      </icon>
    </div></div></action-button>

[bshepherdson]

Code loading

First, as to loading extra models. You have two options, effectively:

• Keep them all in one file and add extraFiles=../../js/app/model/foamModels.js to your command (after the foam.build.BuildApp
• Or split the models out, one to a file, in a ../../js/com/foo/bar/SomeModel.js sort of hierarchy, Java-style, and then add extraClassPaths=../../js to your BuildApp command.

Then you should be able to revert the hack to the foam.js load script. That should also get your code included properly in the built output, in case it wasn't already.

Icons

As to rendering icons correctly, you should double-check that you've actually got a <link> tag for the fonts.css file included in your HTML page, and that that file is loading correctly.

[psperneac]

Thanks! I got images now :) I'll change my hack back... did not know how classpath, extraclasspath or extrafiles works...