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
1 Answer, 1 is accepted
0
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
- 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!