1. #1
    Sencha User
    Join Date
    Jan 2014
    Location
    Brazil
    Posts
    2
    Vote Rating
    0
    leonardob is on a distinguished road

      0  

    Default Sencha + PhoneGap and app's icon

    Sencha + PhoneGap and app's icon


    Hello. I've been learning Sencha for about one week now, and I believe I'm getting the hang of it, but something still bugs me. I'm using Sencha Touch 2.3.1 and Sencha Cmd 4.0.1.45. I started my project with the following commands:

    > sencha generate app com.company.project... ...
    > sencha phonegap init
    Now, please, take a look at the directory tree:


    Since sencha cmd handles all the phonegap stuff, I assume I must not touch anything below the "phonegap" folder. Everything should be in place after the build command. All right so far. Here comes the tricky part for me. By default, we have the path "resources/icons/". I have replaced by my app's icon all the icons inside this folder (respecting their dimensions, of course). But after running a

    > senha app build -run native
    the app was not deployed with the correct icon. I think it's because the config.xml file points to another path: "res/icon/android/". But isn't sencha cmd supposed to map and copy the icons files from the resources/icon directory to the correct path based on the building platform? It doesn't make sense to me for it to create an icons folder by default but not to handle it properly, so that later I have to manually copy the files for each platform. Could I make myself clear? How does it actually work?

    I'm sorry for bringing this topic up. I believe this should be a well known issue among experienced users, but maybe I'm missing the right keywords to find the answer by myself. I couldn't find any discussion about it anywhere.

    Thank you.

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,978
    Vote Rating
    132
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      1  

    Default


    You must edit your config.xml to tell phonegap which icons to use.
    'sencha phonegap init' creates a config.xml at the root of your touch app.
    Here is the url for the phonegap docs on icons and splash screens:
    http://docs.phonegap.com/en/edge/con...images.md.html
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  3. #3
    Touch Premium Member
    Join Date
    Feb 2011
    Posts
    57
    Vote Rating
    0
    mvoss is on a distinguished road

      0  

    Default phonegap build

    phonegap build


    Hi,

    I think the properties set in config.xml only have effect using phonegp build. Is this correct? Did you get this to work? The phonegap documentation says you need to have your icons in www/res/icons ! Sencha cli should copy the images there as well I guess?

    Regards
    Markus Voss

  4. #4
    Sencha User
    Join Date
    Jan 2014
    Location
    Brazil
    Posts
    2
    Vote Rating
    0
    leonardob is on a distinguished road

      0  

    Default


    Quote Originally Posted by mvoss View Post
    I think the properties set in config.xml only have effect using phonegp build. Is this correct?
    Yes. But Sencha also uses the phonegap building tool when deploying native code. So, in some sense, it's also effective with Sencha.

    Quote Originally Posted by mvoss View Post
    The phonegap documentation says you need to have your icons in www/res/icons ! Sencha cli should copy the images there as well I guess?
    That's my point. It should, but it doesn't. In the end, I just copied all icons and launch screens manually. Then it worked.

  5. #5
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,978
    Vote Rating
    132
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    I agree. I have opened the following bug, SDKTOOLS-792, to have this issue addressed.
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  6. #6
    Sencha User sylvain1980's Avatar
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    1
    sylvain1980 is on a distinguished road

      1  

    Default Auto add icon & splash screen to Sencha Touch / Cordova App with native build

    Auto add icon & splash screen to Sencha Touch / Cordova App with native build


    Place the corresponding images files into your sencha_app/resources folder and add this code to your sencha_app/cordova/config.xml

    Ref.: http://cordova.apache.org/docs/en/3....lash%20Screens

    Exemple for the icons :

    Code:
        <platform name="ios">
            <!-- iOS 7.0+ -->
            <!-- iPhone / iPod Touch  -->
            <icon src="../resources/icons/ios/icon-60.png" width="60" height="60" />
            <icon src="../resources/icons/ios/icon-60@2x.png" width="120" height="120" />
            <!-- iPad -->
            <icon src="../resources/icons/ios/icon-76.png" width="76" height="76" />
            <icon src="../resources/icons/ios/icon-76@2x.png" width="152" height="152" />
            <!-- iOS 6.1 -->
            <!-- Spotlight Icon -->
            <icon src="../resources/icons/ios/icon-40.png" width="40" height="40" />
            <icon src="../resources/icons/ios/icon-40@2x.png" width="80" height="80" />
            <!-- iPhone / iPod Touch -->
            <icon src="../resources/icons/ios/icon.png" width="57" height="57" />
            <icon src="../resources/icons/ios/icon@2x.png" width="114" height="114" />
            <!-- iPad -->
            <icon src="../resources/icons/ios/icon-72.png" width="72" height="72" />
            <icon src="../resources/icons/ios/icon-72@2x.png" width="144" height="144" />
            <!-- iPhone Spotlight and Settings Icon -->
            <icon src="../resources/icons/ios/icon-small.png" width="29" height="29" />
            <icon src="../resources/icons/ios/icon-small@2x.png" width="58" height="58" />
            <!-- iPad Spotlight and Settings Icon -->
            <icon src="../resources/icons/ios/icon-50.png" width="50" height="50" />
            <icon src="../resources/icons/ios/icon-50@2x.png" width="100" height="100" />
        </platform>
        <platform name="android">
            <icon src="../resources/icons/android/ldpi.png" density="ldpi" />
            <icon src="../resources/icons/android/mdpi.png" density="mdpi" />
            <icon src="../resources/icons/android/hdpi.png" density="hdpi" />
            <icon src="../resources/icons/android/xhdpi.png" density="xhdpi" />
        </platform>
    Than, build your app using Sencha cmd :
    Code:
    sencha app build native
    After that, you only have to manage the images on the sencha_app/resources folder and build to populate the sencha_app/cordova/platform/... folder

    Note : I use Sencha cmd v 4.0.2.67 and Cordova 3.5

  7. #7
    Sencha User
    Join Date
    May 2014
    Posts
    3
    Vote Rating
    0
    dariusz.ruminski is on a distinguished road

      0  

    Default


    Quote Originally Posted by sylvain1980 View Post
    Place the corresponding images files into your sencha_app/resources folder and add this code to your sencha_app/cordova/config.xml

    Ref.: http://cordova.apache.org/docs/en/3....lash%20Screens

    Exemple for the icons :

    Code:
        <platform name="ios">
            <!-- iOS 7.0+ -->
            <!-- iPhone / iPod Touch  -->
            <icon src="../resources/icons/ios/icon-60.png" width="60" height="60" />
            <icon src="../resources/icons/ios/icon-60@2x.png" width="120" height="120" />
            <!-- iPad -->
            <icon src="../resources/icons/ios/icon-76.png" width="76" height="76" />
            <icon src="../resources/icons/ios/icon-76@2x.png" width="152" height="152" />
            <!-- iOS 6.1 -->
            <!-- Spotlight Icon -->
            <icon src="../resources/icons/ios/icon-40.png" width="40" height="40" />
            <icon src="../resources/icons/ios/icon-40@2x.png" width="80" height="80" />
            <!-- iPhone / iPod Touch -->
            <icon src="../resources/icons/ios/icon.png" width="57" height="57" />
            <icon src="../resources/icons/ios/icon@2x.png" width="114" height="114" />
            <!-- iPad -->
            <icon src="../resources/icons/ios/icon-72.png" width="72" height="72" />
            <icon src="../resources/icons/ios/icon-72@2x.png" width="144" height="144" />
            <!-- iPhone Spotlight and Settings Icon -->
            <icon src="../resources/icons/ios/icon-small.png" width="29" height="29" />
            <icon src="../resources/icons/ios/icon-small@2x.png" width="58" height="58" />
            <!-- iPad Spotlight and Settings Icon -->
            <icon src="../resources/icons/ios/icon-50.png" width="50" height="50" />
            <icon src="../resources/icons/ios/icon-50@2x.png" width="100" height="100" />
        </platform>
        <platform name="android">
            <icon src="../resources/icons/android/ldpi.png" density="ldpi" />
            <icon src="../resources/icons/android/mdpi.png" density="mdpi" />
            <icon src="../resources/icons/android/hdpi.png" density="hdpi" />
            <icon src="../resources/icons/android/xhdpi.png" density="xhdpi" />
        </platform>
    Than, build your app using Sencha cmd :
    Code:
    sencha app build native
    After that, you only have to manage the images on the sencha_app/resources folder and build to populate the sencha_app/cordova/platform/... folder

    Note : I use Sencha cmd v 4.0.2.67 and Cordova 3.5

    It really works! Thank you!

  8. #8
    Sencha User
    Join Date
    Dec 2013
    Posts
    9
    Vote Rating
    1
    gapa is on a distinguished road

      0  

    Default


    I have tried this approach. And indeed it does copy icons into cordova/platforms/ios/MyApp/Resources/Icons. But problem is that config.xml (that is in cordova/platforms/ios/MyApp folder) it shows the same path. But this path is not usable anymore since icons are in different (relative) folder than before.
    Before it was proper that it was in "../resources/icons/*" but now it should be in ../www/resources/icons. But if I change path to new one then it won't get copied. I can manually change path but then I have to do this every time I update cordova project.

  9. #9
    Sencha User
    Join Date
    Feb 2013
    Posts
    31
    Vote Rating
    1
    Keab42 is on a distinguished road

      0  

    Default


    I'm surprised the build or init processes haven't had this automated. Given the tight integration with Cordova/Phonegap since CMD 5.0 this would make a lot of sense.

    Quote Originally Posted by sylvain1980 View Post
    Place the corresponding images files into your sencha_app/resources folder and add this code to your sencha_app/cordova/config.xml

    Ref.: http://cordova.apache.org/docs/en/3....lash%20Screens

    Exemple for the icons :

    Code:
        <platform name="ios">
            <!-- iOS 7.0+ -->
            <!-- iPhone / iPod Touch  -->
            <icon src="../resources/icons/ios/icon-60.png" width="60" height="60" />
            <icon src="../resources/icons/ios/icon-60@2x.png" width="120" height="120" />
            <!-- iPad -->
            <icon src="../resources/icons/ios/icon-76.png" width="76" height="76" />
            <icon src="../resources/icons/ios/icon-76@2x.png" width="152" height="152" />
            <!-- iOS 6.1 -->
            <!-- Spotlight Icon -->
            <icon src="../resources/icons/ios/icon-40.png" width="40" height="40" />
            <icon src="../resources/icons/ios/icon-40@2x.png" width="80" height="80" />
            <!-- iPhone / iPod Touch -->
            <icon src="../resources/icons/ios/icon.png" width="57" height="57" />
            <icon src="../resources/icons/ios/icon@2x.png" width="114" height="114" />
            <!-- iPad -->
            <icon src="../resources/icons/ios/icon-72.png" width="72" height="72" />
            <icon src="../resources/icons/ios/icon-72@2x.png" width="144" height="144" />
            <!-- iPhone Spotlight and Settings Icon -->
            <icon src="../resources/icons/ios/icon-small.png" width="29" height="29" />
            <icon src="../resources/icons/ios/icon-small@2x.png" width="58" height="58" />
            <!-- iPad Spotlight and Settings Icon -->
            <icon src="../resources/icons/ios/icon-50.png" width="50" height="50" />
            <icon src="../resources/icons/ios/icon-50@2x.png" width="100" height="100" />
        </platform>
        <platform name="android">
            <icon src="../resources/icons/android/ldpi.png" density="ldpi" />
            <icon src="../resources/icons/android/mdpi.png" density="mdpi" />
            <icon src="../resources/icons/android/hdpi.png" density="hdpi" />
            <icon src="../resources/icons/android/xhdpi.png" density="xhdpi" />
        </platform>
    Than, build your app using Sencha cmd :
    Code:
    sencha app build native
    After that, you only have to manage the images on the sencha_app/resources folder and build to populate the sencha_app/cordova/platform/... folder

    Note : I use Sencha cmd v 4.0.2.67 and Cordova 3.5