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.
  • wow. That's not very single-page friendly. :D
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!