locked
WHY Auto-launching app from a file (file type association) messes up default.html?

    Question

  • my app has its own type file to open it. It is ".makeb" file

    the landing page is just the standard default.html and my app use the:

    <div data-win-control="WinJS.UI.ViewBox">
            <div class="fixedlayout">

    To keep its layout fixed.

    When i open it from its own tile at the modern ui start page it looks fine like this:

    THE PROBLEM is when do a double click from desktop to a file blabla.makeb (as nothing in it, it is created just to launch the app) the app layout is ALL MESSED UP:

    WHY? is it a BUG with the windows 8? if so.. VERY poorly designed the Modern UI, looks like it's only a. embedded browser over the Windows 7. Any ideas?

    Monday, September 30, 2013 2:03 PM

All replies

  • Compare how the app handles activation from the file and from a normal launch to make sure the app isn't missing important initialization.

    See How to handle file activation and the  Association launching sample for suggestions.

    You'll need to provide more details about what your app does in this area for us to help you debug it in more detail. If you can share a link to a minimal sample demonstrating the problem it would be very useful.

    --Rob

    Monday, September 30, 2013 2:27 PM
    Owner
  • I Said: (with nothing in it, it is created just to launch the app)

    There is nothing different from both ways because there is NO initialization. I DO KNOW how to handle the file activation. I've been working with it in dozens of other apps i developed.

    THE only reason this file association was created is to LAUNCH the app from desktop. That's ALL. nothing else need to be done.. no information collected or anything JUST to launch the app.

    And the app SHOULD render the default.html correctly SINCE there's NO difference between the normal launch and the fily association launch.

    SO.. WHAT IS GOING ON?

    Monday, September 30, 2013 2:34 PM
  • Hi Alan,

    Can you please let us know what your HTML looks like and what exactly your code to handle the activation looks like? A link to a minimal sample that reproduces the problem would be ideal.

    I was not able to reproduce it in a simple app with your ViewBox snippet. There is likely something different in your code or HTML that is important to the repro. It may help to look at how the app that doesn't work is different from the dozens of other apps you've written which do work correctly.

    --Rob

    Monday, September 30, 2013 8:27 PM
    Owner
  • HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>MakeB</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

        <!-- MakeB references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <script src="/js/jquery-2.0.0.min.js"></script>
        <script src="/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="/js/alancode.js"></script>
    </head>
    <body>
        <div data-win-control="WinJS.UI.ViewBox">
            <div class="fixedlayout">
                <div class="whiteTab"></div>
                <div class="video-div">
                    <video id="video" class="video" src="images/rio60.mp4" width=688 height=375></video>
                    <div class="player-control"></div>
                    <div class="botao-stop"></div>
                </div>
                
                <div class="logo"></div>
                <div class="colecao-tab openTab" i="1">
                    <div class="tapete"></div>
                </div>
                <div class="produtos-tab openTab" i="2">
                    <div class="preview"></div>
                    <div class="title title-olhos"></div>
                    <div class="title title-rosto"></div>
                    <div class="title title-acessorios"></div>
                    <div class="title title-boca"></div>
                    <div class="title title-fragrancia"></div>
                    <div class="title title-esmaltes"></div>
                    <div class="tapete">
                        <div class="voltar"></div>
                        <!--<div class="olhos-content1"></div>
                        <div class="olhos-content2"></div>
                        <div class="olhos-content3"></div>

                        <div class="boca-content1"></div>
                        <div class="boca-content2"></div>
                        -->
                    </div>
                    <!---->
                    <div class="fragrancia-button alan-button"></div>
                    <div class="esmaltes-button alan-button"></div>
                    <div class="olhos-button alan-button"></div>
                    <div class="boca-button alan-button"></div>
                    <div class="acessorios-button alan-button"></div>
                    <div class="rosto-button alan-button"></div>

                    
                </div>
                <div class="looks-tab openTab" i="3">
                    <div class="preview1 touched"></div>
                    <div class="preview2 touched"></div>
                    <div class="tapete">
                        <div class="voltar"></div>
                    </div>
                    <div class="footer"></div>
                    <div class="botao-noite touched"></div>
                    <div class="botao-dia touched"></div>
                </div>
                <!-- -->
                        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
                            <div style="width: 748px; height: 691px; ">

                                <img src="#"  style="width: 748px; height: 691px; background-color:transparent" 
                                     data-win-bind="alt: title; src: picture" />
                            
                            </div>
                        </div>       

                        <div id="basicListView" style="; bottom:115px; left:769px"  data-win-control="WinJS.UI.ListView" 
                            data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
                                itemTemplate: select('#mediumListIconTextTemplate')}">
                        </div>
                        <div class="footer-arraste"></div>
                <!-- -->
                <div class="playlist-tab"></div>
                <div class="aba"></div>
                <div class="vervideo"></div>
                <div class="inicio"></div>
            </div>
        </div>
    </body>
    </html>

    --------

    fixedlayout CSS:

    .fixedlayout {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
        height: 1366px;
        width: 768px;
        background-image:url(../images/playlist-back.png);
        background-repeat:no-repeat;
        overflow:hidden;
    }

    -----

    default.js ( I TOLD YOU THERE IS NO SPECIAL HANDLER FOR ACTIVATION. JUST THE STANDARD.  IT IS ONLYYYY TO OPEN THE APP)

    // For an introduction to the Fixed Layout template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232508
    (function () {
        "use strict";

        WinJS.Binding.optimizeBindingReferences = true;

        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;

        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };

        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };

        app.start();
    })();

    --------------

    the app manifest. the landing page is the default.html like a normal launch.

    Monday, September 30, 2013 11:55 PM
  • Can you please provide a link to a minimal project which reproduces the problem?

    Your code snippets don't appear to be complete: tossing them into a test app crashed before getting to the point where it could reproduce (or not reproduce) the problem.

    --Rob

    Wednesday, October 2, 2013 12:12 AM
    Owner