This is a migrated thread and some comments may be shown as answers.

Kendo UI, Angular JS and IBM Worklight

2 Answers 87 Views

Integration with other JS libraries

This is a migrated thread and some comments may be shown as answers.

John asked on 18 Dec 2014, 03:57 PM

kendo_and_worklight.png

kendo_and_worklight_and_angular.png

I am using IBM Worklight Studio, Kendo UI and Angular JS. I want a basic mobile app with a header(nav bar), footer(tab strip) and a content area in the middle that will be populated based on the Angular JS route.

Using Kendo UI without Angular JS, everything is great. The screen is formatted nicely, fonts are crisp and all is well. See the 1st image attached below.

Using Kendo UI with Angular JS for routing, and things don't look as nice. I can't get the tab bar to stay at the bottom of the screen. It seems to be directly under the content, but is not fixed to the bottom of the visible area. Also, the fonts and images for the data icons don't look as nice. The app basically works ok. I can click on a tab bar item and Angular will route the request and show me the correct view. But it seems that the Kendo UI elements aren't displaying correctly.

Code snippets are shown below. If you have any recommendations I'd appreciate it. Thanks.

Sample Code - IBM Worklight and Kendo UI - index.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>jktest</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">

-->

<link rel="stylesheet" href="css/main.css">

<link href="js/libs/kendoui/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="js/libs/kendoui/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="js/libs/kendoui/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />

<link href="js/libs/kendoui/styles/kendo.silver.mobile.min.css" rel="stylesheet" type="text/css" />

<link href="js/libs/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

<link href="js/libs/kendoui/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

<script src="js/libs/kendoui/js/jquery.min.js"></script>

</head>

<body style="display: none;">

<div data-role="view" id="navbar-home" data-title="JK Test App">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title">JK Test App</span>

</div>

</header>

<h2>Hello Worklight</h2>

<footer data-role="footer">

<div data-role="tabstrip">

<a data-icon="home" href="#">Accounts</a>

<a data-icon="organize" href="#">View All</a>

<a href="#" data-icon="more">More</a>

</div>

</footer>

</div>

<script src="js/initOptions.js"></script>

<script src="js/main.js"></script>

<script src="js/messages.js"></script>

<script src="js/libs/kendoui/js/kendo.all.min.js"></script>

<script> var kapp = new kendo.mobile.Application(); </script>

</body>

</html>

Sample Code - IBM Worklight, Kendo UI and Angular JS

index.html

01.<!DOCTYPE HTML>

02.<html>

03.        <head>

04.            <meta charset="UTF-8">

05.            <title>Test App</title>

06.            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

07.            

11.

12.            

13.            <link rel="stylesheet" href="css/main.css">

14.

15.            <link href="js/libs/kendoui/styles/kendo.mobile.all.min.css" rel="stylesheet" />

16.            <link href="js/libs/kendoui/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

17.            <link href="js/libs/kendoui/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />

18.            <link href="js/libs/kendoui/styles/kendo.silver.mobile.min.css" rel="stylesheet" type="text/css" />

19.            <link href="js/libs/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

20.            <link href="js/libs/kendoui/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

21.

22.

23.            

24.            

25.            <script src="js/libs/kendoui/js/jquery.min.js"></script>

26.

27.            

28.            <script src="js/libs/angular/1.3/angular.min.js"></script>

29.            <script src="js/libs/angular/1.3/angular-route.min.js"></script>

30.

31.            

32.            <script src="js/app.js"></script>

33.

34.            

35.            <script src="js/controllers/login.js"></script>

36.            <script src="js/controllers/customers.js"></script>

37.

38.

39.

40.

41.

42.        </head>

43.        <body style="display:none;">

44.            <div>

45.                

46.

47.                

48.                <kendo-mobile-header>

49.                    <kendo-mobile-nav-bar>

50.                        <kendo-view-title>Test App</kendo-view-title>

51.                    </kendo-mobile-nav-bar>

52.                </kendo-mobile-header>

53.

54.

55.                

56.                <div>

57.                    <div class="main" ng-view></div>

58.                </div>

59.

60.                

61.                <kendo-mobile-footer>

62.                    <kendo-mobile-tab-strip>

63.                            <a href="#/" data-icon="contacts">Welcome</a>

64.                            <a href="#/customers" data-icon="home">Accounts</a>

65.                    </kendo-mobile-tab-strip>

66.                </kendo-mobile-footer>

67.

68.

69.            </div>

70.

71.            

72.            <script src="js/initOptions.js"></script>

73.            <script src="js/main.js"></script>

74.            <script src="js/messages.js"></script>

75.

76.            

77.            <script src="js/libs/kendoui/js/kendo.all.min.js"></script>

78.

79.            <script type="text/javascript">

80.                WL.Logger.debug("Loading main page");

81.            </script>

82.        </body>

83.</html>

main.js

1.console.log("Loading Angular");

2.    angular.element(document).ready(function() {

3.         angular.bootstrap(document, ['App']);

4.         location.hash = "/login";

5.     });

app.js

01.var app = angular.module('App', ['ngRoute','kendo.directives']);

02.app.config(['$routeProvider', function($routeProvider) {

03.     $routeProvider.when('/customers',

04.     {

05.         templateUrl:'views/customers.html',

06.         controller: 'CustomersController'

07.     }).

08.     when('/login',

09.     {

10.         templateUrl:'views/login.html',

11.             controller: 'LoginController'

12.     }).

13.     otherwise({

14.         redirectTo: '/login'

15.     });;

16.}]);

customers.js - Controller

1.app.controller('CustomersController',

2.    function($scope) {

3.        $scope.custdata = {

4.            'custno':'12345',

5.            'custname':'JK, Inc'

6.        };

7.    }

8.);

login.js - Controller

1.app.controller('LoginController',

2. function($scope) {

3. $scope.username = 'JK';

4. }

5.);

login.html - View No. 1

1.<h1>This is the login page</h1>

2.<br />

3.<br />

4.Username is {{username}}

5.<br />

6.<a href="#/customers">Go to Customers</a>

customers.html - View No. 2

1.<h1>This is the Customers page</h1>

2.        <br />

3.        <br />

4.        Customer Number: {{custdata.custno}}

5.        <br />

6.        Customer Name: {{custdata.custname}}

7.        <br />

8.        <a href="#/login">Go to Login</a>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

jQuery

Angular

React

Vue

Kendo UI, Angular JS and IBM Worklight

2 Answers, 1 is accepted