How to make page Transitions in Enyo2.0

edited January 2013 in Newbie Questions
Hi,

I want to implement page transitions in my project. I have a login page, once the user clicked on login button page has to transition from left to right.

Note: We are not using any panels.

Comments

  • This is one thing panels are designed for. You can have a simple two panel solution, disable dragging, and just have the login page do the one-time transition from panel 0 to 1.
  • @unwiredben: if we have multiple pages, then how can we use page trnsition.
  • Multiple HTML pages? Enyo really is designed for single-page apps, rather than ones that load multiple HTML index files from a server. There is a new enyo.Router component in the top-of-trunk that supports responding to URL changes while staying on the same page.
  • edited September 30
    For an enyo based project we needed to have a multi-page application.
    In order to make a multi-page application we did the following.
    We declared different application kinds in our app.js.

    //centralized logging flag.
    function mainLogging()
    {
    return true;
    };

    //centralized narrow screen flag.
    function mainIsScreenNarrow()
    {
    return enyo.Panels.isScreenNarrow();
    };

    //Multiple application kinds declared for different entry points into a web application.
    enyo.kind({
    name: "wpp.ApplicationPwd",
    kind: "enyo.Application",
    view: "wpp.MainPwdView"
    });

    enyo.kind({
    name: "wpp.ApplicationVerify",
    kind: "enyo.Application",
    view: "wpp.MainVerifyView"
    });

    enyo.kind({
    name: "wpp.ApplicationCreate",
    kind: "enyo.Application",
    view: "wpp.MainCreateView"
    });

    enyo.kind({
    name: "wpp.ApplicationPin",
    kind: "enyo.Application",
    view: "wpp.MainPinView"
    });

    enyo.kind({
    name: "wpp.ApplicationLogin",
    kind: "enyo.Application",
    view: "wpp.MainLoginView"
    });

    enyo.kind({
    name: "wpp.ApplicationForgot",
    kind: "enyo.Application",
    view: "wpp.MainForgotView"
    });

    enyo.kind({
    name: "wpp.ApplicationTimeout",
    kind: "enyo.Application",
    view: "wpp.MainTimeoutView"
    });

    enyo.kind({
    name: "wpp.ApplicationErrorTimeout",
    kind: "enyo.Application",
    view: "wpp.MainErrorTimeoutView"
    });

    enyo.kind({
    name: "wpp.ApplicationLogout",
    kind: "enyo.Application",
    view: "wpp.MainLogoutView"
    });

    enyo.kind({
    name: "wpp.ApplicationDisableAccount",
    kind: "enyo.Application",
    view: "wpp.MainDisableAccountView"
    });

    enyo.kind({
    name: "wpp.ApplicationEnableAccount",
    kind: "enyo.Application",
    view: "wpp.MainEnableAccountView"
    });

    enyo.kind({
    name: "wpp.ApplicationDeleteAccount",
    kind: "enyo.Application",
    view: "wpp.MainDeleteAccountView"
    });

    enyo.kind({
    name: "wpp.ApplicationPandS",
    kind: "enyo.Application",
    view: "wpp.MainPandSView"
    });

    enyo.ready(function () {
    loadView();
    });

    function setStartMode(mode)
    {
    startMode = mode;
    };

    function loadView()
    {
    if(startMode === "verify")
    {
    new wpp.ApplicationVerify({name: "app"});
    }
    else if(startMode === "login")
    {
    new wpp.ApplicationLogin({name: "app"});
    }
    else if(startMode === "timeout")
    {
    new wpp.ApplicationTimeout({name: "app"});
    }
    else if(startMode === "error_timeout")
    {
    new wpp.ApplicationErrorTimeout({name: "app"});
    }
    else if(startMode === "disable_account")
    {
    new wpp.ApplicationDisableAccount({name: "app"});
    }
    else if(startMode === "enable_account")
    {
    new wpp.ApplicationEnableAccount({name: "app"});
    }
    else if(startMode === "delete_account")
    {
    new wpp.ApplicationDeleteAccount({name: "app"});
    }
    else if(startMode === "logout")
    {
    new wpp.ApplicationLogout({name: "app"});
    }
    else if(startMode === "create")
    {
    new wpp.ApplicationCreate({name: "app"});
    }
    else if(startMode === "pin")
    {
    new wpp.ApplicationPin({name: "app"});
    }
    else if(startMode === "forgot")
    {
    new wpp.ApplicationForgot({name: "app"});
    }
    else if(startMode === "main")
    {
    new wpp.ApplicationPwd({name: "app"});
    }
    else if(startMode === "pands")
    {
    new wpp.ApplicationPandS({name: "app"});
    }
    };


    Next we declared .aspx pages that tied the enyo client views app into a single back-end. The start mode set in the .aspx page determines how the enyo app starts and what application kind it uses.


    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>yourpwd.com - Error Timeout</title>
    <link rel="shortcut icon" href="assets/favicon.ico"/>
    <!-- -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <% if(this.isDevMode == true) { %>
    <!-- Less.js (for client-side rendering of less stylesheets; comment to use pre-compiled CSS) -->
    <script src="enyo/tools/less.js"></script>
    <!-- enyo (debug) -->
    <script src="enyo/enyo.js" charset="utf-8"></script>
    <!-- application (debug) -->
    <% }else{ %>
    <!-- css -->
    <link href="build/enyo.css" rel="stylesheet"/>
    <link href="build/app.css" rel="stylesheet"/>
    <!-- js -->
    <script src="build/enyo.js" charset="utf-8"></script>
    <% } %>

    <script type="text/javascript">
    //<!--
    var startMode = "delete_account";
    //-->
    </script>

    <% if (this.isDevMode == true) { %>
    <script src="source/package.js" charset="utf-8"></script>
    <% }else{ %>
    <script src="build/app.js" charset="utf-8"></script>
    <% } %>
    </head>
    <body class="enyo-unselectable">
    </body>
    </html>

    Then you can use location = "/SomePage.aspx" and/or anchor tags to jump to different pages in your Enyo application.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!