Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Referencing resources from packages in dev mode

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2014
    Posts
    6

    Default Referencing resources from packages in dev mode

    I have an Ext.JS 5 app in a workspace, which "requires" a local package from the same workspace. The package contains some images under its resources folder.

    Running 'sencha app build' or 'sencha app watch' merges the resources folder from the package into "<workspaceDir>/build/development/<appName>/resources/<pkgName>", but not "<appDir>/resources/<pkgName>", as I would expect, in order for the files to be available alongside the app source in dev mode.

    I'm using Ext.JS 5.0.1 and the just-released Sencha Cmd 5.0.2.270. although the same issue was present with Sencha Cmd 5.0.1.


    Here are the steps to reproduce this scenario:

    Code:
    sencha -sdk <ext-5.0.1 sdk directory> generate workspace PkgTest
    
    cd PkgTest
    
    
    sencha -sdk ext generate app TestApp TestApp
    
    
    sencha generate package TestPkg
    
    
    cd TestApp
    
    
    [ Edit app.json, add "TestPkg" to requires list ]
    
    
    sencha app watch
    Now add some images to PkgTest/packages/TestPkg/resources/images/. These are copied to PkgTest/build/development/TestApp/resources/TestPkg, but as mentioned above, I would expect them to be copied to PkgTest/TestApp/resources/, so that they are available to the app when loading the from index.html in dev mode (i.e. http://localhost:1841/TestApp/ )

    As is, I cannot reference the resources in dev mode the same way I would in a production build.

    It seems I either need to alter the directory the package resources are merged into, or have the built-in web server remap the resources directory.

    What am I missing? If this is working as designed, what is the best practice for working with packages that contain resources in dev mode?

    Thanks in advance for any tips.

  2. #2
    Sencha Premium Member
    Join Date
    Jan 2014
    Posts
    6

    Default

    I've found a solution, adding the following to .sencha/app/development.properties:

    build.resources.dir=${app.output.resources.path}

    I'm curious to know if this is the best approach for developing with packages that provide their own resources (i.e. images).

    Thanks.

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2014
    Posts
    6

    Default

    This only solved the problem for resources referenced within the code, or app.json, but not images referenced within SCSS, since bootstrap.js still loads the CSS as follows:

    @import '../build/development/TestApp/resources/TestApp-all.css';

    Still looking for a robust solution.

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2014
    Posts
    6

    Default

    Adding the following to resources-impl.xml, within the -resources target and after the existing <x-compile/> task seems to have done the trick:

    Code:
           
            <if>
                <equals arg1="${build.environment}" arg2="development"/>
                <then>
                      <x-compile refid="${compiler.ref.id}">
                            <![CDATA[
                               resources
                                  -excludes=-all*.css
                                  -out=${app.output.resources.path}
                            ]]>
                      </x-compile>
                </then>
            </if>
    This results the resources being merged into both the workspace build/development directory and the resource directory within the app.
    Last edited by Chris Thornhill; 11 Sep 2014 at 5:33 PM. Reason: clarification

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2014
    Posts
    39

    Default

    I've got the same problem!

    How should I reference resources from dependent theme or code packages in code and css? Can't get it working!

  6. #6
    Sencha User
    Join Date
    Jun 2014
    Location
    Murmansk, Russia
    Posts
    277

    Default

    The same problem and no clear solution. Editing resources-impl.xml or any additional config is a bad option. Package user should only add package to requires section in app.json without any additional configuration for application.

  7. #7
    Sencha User
    Join Date
    Jun 2014
    Location
    Murmansk, Russia
    Posts
    277

    Default

    One of possible solutions is to get current resources path via defined style in package.
    Smth like this.

    CSS defined in package:
    Code:
    .mypackage-blankimg {
        background-image: url('mypackage/images/blank.gif');
    }
    JS code to get path:
    Code:
    var tempEl = Ext.getBody().createChild({cls: 'mypackage-blankimg', style: 'display: none;'}),
        tempElStyle = window.getComputedStyle(tempEl.dom, null),
        imagePath = tempElStyle.getPropertyValue('background-image'),
        resourcesRoot = imagePath.match(/url\((.+)(\/mypackage\/images\/blank\.gif)\)/)[1];
    tempEl.destroy();
    return resourcesRoot;

  8. #8
    Sencha User dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,748

    Default

    If a resource is in some package and is needed by that package (be it a theme or otherwise), you would do this:

    Code:
      theme-background-image('foo');
    For non-images, there is no API in place in 5 (will be in 6):

    Code:
      theme-background-image('../video/foo', 'mp4');
    For themes, this simply evaluates to "images/foo.png" (or "images/foo.gif" depending) or "images/../video/foo.mp4" in the second case.

    For non-themes, this resolves to "package-name/images/foo.png" (or "package-name/images/../video/foo.mp4").

    The generated CSS file is written to the "resources" folder so that these relative paths are minimized. This means the CSS file and all resources are in the same folder (namely, "build/development/appname/resources").

    To reference a resource of a non-theme package from elsewhere (another package or app maybe), you need to do something like this:

    Code:
      background-image: url('package-name/images/foo.png');
    There is no helper method at present to call for this, so you just have to use the knowledge of resource folders and package-name isolation provided by the build.

    The reason resources are not copied into the app's "resources" folder is that this is a "source" location not a build output location. Doing so would cause subsequent builds to confuse artifacts from previous builds as sources. This is important because a file in the app's resources folder can "override" the same file from a package.

    Say you didn't like some image from a package, you can place an override in app's resources in "package-name/images/foo.png" and it will override that image in the build resources folder. This is how themes override image assets from their bases as well. The build folder holds the "squashed" resource tree.

    Does that answer the original question?
    Don Griffin

    "Use the source, Luke!"

  9. #9
    Sencha Premium User
    Join Date
    Jan 2010
    Posts
    62

    Default

    Thank you Don, for this explanation. I have not been able to find anything about how to reference resources in packages, in the "official" guides. So this was a big help.

    However, I think that theme-background-image() is a misleading method name, since it deals with a lot of other stuff than images, and it does not apply only to themes...

  10. #10
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    10

    Lightbulb theme-background-image within JS code

    Don,

    thanks for the accurate information.
    One thing left i.r.t. package-relative resources:

    Within a code package, I have some resource, e. g.

    packages/mypackage/resources/config/myconfig.json


    Within the package code, I would like to load this resource programmatically.
    As the package resources will be stored in a 'mypackage' subfolder by sencha app build, I might do this by accessing the URL

    resources/mypackage/config/myconfig.json


    Works fine in production build.
    However, this does not work when using the development loader.

    So what I need is something like the theme-background-image SASS function, which is aware about the resource path to the build output directory, as JS code.
    I suppose there is such a thing, isn't it?

    Any hints highly appreciated as this prevents us from putting a finishing touch to our framework.
    Having the user copy the resource file to his application resource is a violation of proper layering.

    BR
    Heiko

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •