Kendo UI Mobile SPA start page and templates with Router

2 posts, 0 answers
  1. Dan
    Dan avatar
    16 posts
    Member since:
    Aug 2014

    Posted 08 Apr 2015 Link to this post

    I have been tasked with adding a Login page to a Kendo UI Mobile project.  The Login page needs to appear first when the user opens the application.  I also need to make this application an SPA application, using the router (or not using the router is easier).

    Here is the existing index.html:

    <!DOCTYPE HTML>
    <html>
            <head>
                <meta charset="UTF-8">
                <title>Global Client Dashboard</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
                <!--
                    <link rel="shortcut icon" href="images/favicon.png">
                    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
                -->
                 
                <!-- CSS -->
                <link rel="stylesheet" href="css/main.css">
                <link href="js/libs/kendoui/styles/kendo.mobile.all.min.css" rel="stylesheet" />
                 
                <!-- jQuery -->
                <!-- Using the jQuery in Kendo UI -->
                <script src="js/libs/kendoui/js/jquery.min.js"></script>
                 
                <!-- Angular JS -->
                <script src="js/libs/kendoui/js/angular.min.js"></script>
                 
                <!--  Kendo UI -->
                <script src="js/libs/kendoui/js/kendo.all.min.js"></script>
                 
                <!-- application scripts -->
                <script src="js/app.js"></script>
                 
            </head>
            <body style="display:none;" kendo-mobile-application k-hash-bang="true" ng-app="gcdApp">
                 
                <!--application UI goes here-->
                 
                <!--  Accounts -->
                <kendo-mobile-view id="accounts" k-title="'Customer Accounts'" k-layout="'default'" ng-controller="AccountsController">
                    <kendo-mobile-list-view id="accountslist" class="item-list"
                        k-template="templates.accountsTemplate" k-data-source="gcdAccounts.accountsDataSource">
                    </kendo-mobile-list-view>
                </kendo-mobile-view>
                 
                <!--  Metrics - Historical Performance -->
                <kendo-mobile-view id="metrics" k-transition="'slide'" k-title="'Historical Performance'" k-layout="'default'" ng-controller="MetricsController" k-on-show="setCurrentItem(kendoEvent)">
                    <kendo-mobile-header>
                        <kendo-mobile-nav-bar>
                            <kendo-mobile-back-button k-align="'left'">Accounts</kendo-mobile-back-button>
                            <kendo-view-title>Historical Performance</kendo-view-title>
                        </kendo-mobile-nav-bar>
                    </kendo-mobile-header>
                    <kendo-mobile-content>
                        <h2>{{gcdAccounts.currentItem.custname}}</h2>
                         
                        <!-- Client Experience Metric - Transaction -->
                        <div style="margin-left:5px;">
                            <div kendo-chart class="chart-halfwidth chart-left-top"
                                 k-title="{ text: 'Client Experience Metric - Transaction' }"
                                 k-legend="{ position: 'bottom' }"
                                 k-series-defaults="{ type: 'column', stack: true, categoryField: 'month', labels: {visible: false} }"
                                 k-series="[
                                                 { field: 'q2avg', name: 'Avg', color: 'green' },
                                                 { field: 'miss', name: 'Miss', color: 'red' }
                                             ]"
                                 k-value-axis="{ min:0, max:10, plotBands: [{ from: 8.0, to: 8.05, color: 'black' }] }"
                                 k-category-axis="{ labels:{ visible:true } }"
                                 k-data-source="cexpDataSource"
                                 k-series-click="transactionClicked" >
                            </div>
                        </div>
                         
                        <!-- Hardware Billing Accuracy -->
                        <div style="margin-left:5px;">
                            <div kendo-chart class="chart-halfwidth chart-right-top"
                                 k-title="{ text: 'HW Billing Accuracy' }"
                                 k-legend="{ position: 'bottom' }"
                                 k-series-defaults="{ type: 'column', stack: { type: '100%' }, categoryField: 'month', labels: {visible: false} }"
                                 k-series="[
                                                 { field: 'okcnt', name: 'Make', color: 'green' },
                                                 { field: 'defects', name: 'Miss', color: 'red' }
                                             ]"
                                 k-value-axis="{ plotBands: [{ from: 0.95, to: 0.955, color: 'black' }] }"
                                 k-category-axis="{ labels:{ visible:true } }"
                                 k-data-source="hwbillDataSource">
                            </div>
                        </div>
                         
                        <!-- Dispute Cycle Time -->
                        <div style="margin-left:5px;">
                            <div kendo-chart class="chart-halfwidth chart-left"
                                 k-title="{ text: 'Dispute Cycle Time' }"
                                 k-legend="{ position: 'bottom' }"
                                 k-series-defaults="{ type: 'column', categoryField: 'month', labels: {visible: false} }"
                                 k-series="[
                                                 { field: 'cycletime', name: 'Cycle Time', color: 'green' }
                                             ]"
                                 k-value-axis="{ min:0, max:60, plotBands: [{ from: 30, to: 30.3, color: 'black' }] }"
                                 k-category-axis="{ labels:{ visible:true } }"
                                 k-data-source="dctDataSource">
                            </div>
                        </div>
                         
                        <!-- On Time Delivery -->
                        <div style="margin-left:5px;">
                            <div kendo-chart class="chart-halfwidth chart-right"
                                 k-title="{ text: 'On Time Delivery' }"
                                 k-legend="{ position: 'bottom' }"
                                 k-series-defaults="{ type: 'column', stack: { type: '100%' }, categoryField: 'month', labels: {visible: false} }"
                                 k-series="[
                                                 { field: 'okcnt', name: 'Make', color: 'green' },
                                                 { field: 'defects', name: 'Miss', color: 'red' }
                                             ]"
                                 k-value-axis="{ plotBands: [{ from: 0.95, to: 0.955, color: 'black' }] }"
                                 k-category-axis="{ labels:{ visible:true } }"
                                 k-data-source="otdDataSource">
                            </div>
                        </div>
                         
                        <!-- Services Billing Accuracy -->
                        <div style="margin-left:5px;">
                            <div kendo-chart class="chart-halfwidth chart-left"
                                 k-title="{ text: 'Services Billing Accuracy' }"
                                 k-legend="{ position: 'bottom' }"
                                 k-series-defaults="{ type: 'column', stack: { type: '100%' }, categoryField: 'month', labels: {visible: false} }"
                                 k-series="[
                                                 { field: 'okcnt', name: 'Make', color: 'green' },
                                                 { field: 'defects', name: 'Miss', color: 'red' }
                                             ]"
                                 k-value-axis="{ plotBands: [{ from: 0.95, to: 0.955, color: 'black' }] }"
                                 k-category-axis="{ labels:{ visible:true } }"
                                 k-data-source="svcbillDataSource">
                            </div>
                        </div>
                     
                    </kendo-mobile-content>
                </kendo-mobile-view>
                 
                <!-- Header and Footer -->
              <kendo-mobile-layout k-id="'default'">
                <kendo-mobile-header>
                    <kendo-mobile-nav-bar>
                        <kendo-view-title></kendo-view-title>
    <!--                    <kendo-mobile-button class="about-button" k-align="'right'" href="views/about.html">About</kendo-mobile-button> -->
                    </kendo-mobile-nav-bar>
                </kendo-mobile-header>
             
                <kendo-mobile-footer>
                    <kendo-mobile-tab-strip>
                        <a href="#!accounts" data-icon="home">Home</a>
                        <a href="views/about.html" data-icon="info">About</a>
                        <a href="#!" data-icon="more">More</a>
                    </kendo-mobile-tab-strip>
                </kendo-mobile-footer>
            </kendo-mobile-layout>
             
            <!--  Templates -->
            <!-- k-on-click="gcdAccounts.addToCart(kendoEvent, dataItem)" -->
            <script id="accountsTemplate" type="text/x-kendo-template">
                <a class="details-link" data-role="listview-link" href="\#!metrics?id={{dataItem.id}}">
                    {{ dataItem.custname }}
                </a>
            </script>
             
            <!-- Standard Worklight Stuff -->
            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
             
            <script type="text/javascript">
                WL.Logger.debug("Loading main page");
            </script>
             
            <!--  Controllers -->
            <script src="js/controllers/controllers.js"></script>
            <script src="js/controllers/accounts.js"></script>
            <script src="js/controllers/metrics.js"></script>
             
             
             
        </body>
    </html>

    I have a few questions:

    1. What determines, in the above .html, the first page/view that will appear?

    2. How do I add an existing login.html into this page?

    3. If I am to use the router, how to I add this feature to the existing index.html?  Does each view become a template and how would I do that?

    4. Once the login page is authenticated/passes, how do I open the Accounts view?  Does this need to be put into a router or not?

    I have been reviewing examples online, but I don't see samples on how to accomplish what I need to do.

    Thanks!
    Dan

     

     

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 10 Apr 2015 Link to this post

    Hi,

    - the view which will be displayed initially is the first view in the markup. You may control this with the mobile application initial configuration option.

    - the mobile application supports the concept of remote views.

    - the mobile application instance automatically instantiates its router instance and uses it to navigate across views. You don't have to do anything about that. More information is available in the following help article

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top