1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
|
Your AngularJS app
=========================
Now that we've established a database connection, it's time to work on the web side of your app. To start, we'll create some files in :code:`sdk/ecomp-sdk/epsdk-app-os/src/main/webapp/app/fusion/scripts/myapp/myfirstpage`.
myfirstpage.html
----------------
This is your landing page. Its purpose is to pull in all the JavaScript and CSS that your app might need as well as to set up your AngularJS app (:code:`app.js`) and your app's controller (:code:`controller.js`), data-services (:code:`data-service.js`), and routing information (:code:`route.js`) --- more on these in a moment. There is likely much that can be removed from this file (it is boilerplate copied from a sample Portal SDK app), but to save yourself headaches at first, just cut and paste all of it into the :code:`sdk/ecomp-sdk/epsdk-app-os/src/main/webapp/app/fusion/scripts/myapp/myfirstpage/myfirstpage.html` you created earlier in, redundancies and all:
.. code-block:: html
<!DOCTYPE html>
<!-- Single-page application for EPSDK-App using DS2 look and feel. -->
<html>
<head>
<meta charset="ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>Welcome</title>
<!-- B2b Library -->
<link rel="stylesheet" type="text/css" href="app/fusion/external/b2b/css/b2b-angular/b2b-angular.css">
<link rel="stylesheet" type="text/css" href="app/fusion/external/b2b/css/b2b-angular/font_icons.css">
<!-- icons in open source -->
<link rel="stylesheet" type="text/css" href="app/fusion/external/ds2/css/digital-ng-library/ionicons.css">
<link rel="stylesheet" type="text/css" href="app/fusion/external/ds2/css/digital-ng-library/ecomp-ionicons.css">
<link rel="stylesheet" type="text/css" href="app/fusion/external/angular-bootstrap/ui-bootstrap-csp.css">
<link rel="stylesheet" type="text/css" href="app/fusion/external/angular-gridster/dist/angular-gridster.min.css">
<link rel="stylesheet" type="text/css" href="static/fusion/sample/css/scribble.css" />
<link rel="stylesheet" type="text/css" href="static/fusion/sample/css/welcome.css" />
<link rel="stylesheet" type="text/css" href="app/fusion/styles/ecomp.css">
<!-- Common scripts -->
<script src="app/fusion/external/angular-1.4.8/angular.min.js"></script>
<script src="app/fusion/external/angular-1.4.8/angular-messages.js"></script>
<script src="app/fusion/external/angular-1.4.8/angular-touch.js"></script>
<script src="app/fusion/external/angular-1.4.8/angular-sanitize.js"></script>
<script src="app/fusion/external/angular-1.4.8/angular-route.min.js"></script>
<script src="app/fusion/external/angular-1.4.8/angular-cookies.min.js"></script>
<script src="app/fusion/external/jquery/dist/jquery.min.js"></script>
<script src="app/fusion/external/javascript-detect-element-resize/jquery.resize.js"></script>
<script src="app/fusion/external/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="app/fusion/external/angular-gridster/dist/angular-gridster.min.js"></script>
<!-- EPSDK App scripts and common services -->
<!-- B2b Library -->
<script src="app/fusion/external/b2b/js/b2b-angular/b2b-library.min.js"></script>
<script src="app/fusion/scripts/DS2-services/ds2-modal/modalService.js"></script>
<script src="app/fusion/scripts/myapp/myfirstpage/app.js"></script>
<script src="app/fusion/scripts/DS2-services/userInfoServiceDS2.js"></script>
<script src="app/fusion/scripts/DS2-services/headerServiceDS2.js"></script>
<script src="app/fusion/scripts/DS2-services/leftMenuServiceDS2.js"></script>
<script src="app/fusion/scripts/DS2-services/manifestService.js"></script>
<script src="app/fusion/scripts/DS2-directives/footer.js"></script>
<script src="app/fusion/scripts/DS2-directives/ds2Header.js"></script>
<script src="app/fusion/scripts/DS2-directives/ds2LeftMenu.js"></script>
<script src="app/fusion/scripts/DS2-directives/b2b-leftnav-ext.js"></script>
<script src= "app/fusion/scripts/DS2-services/userInfoServiceDS2.js"></script>
<!-- Page specific items -->
<script src="app/fusion/scripts/myapp/myfirstpage/controller.js"></script>
<script src="app/fusion/scripts/myapp/myfirstpage/route.js"></script>
<script src="app/fusion/scripts/myapp/myfirstpage/data-service.js"></script>
<style>
.controls {
margin-bottom: 20px;
}
.page-header {
margin-top: 20px;
}
ul {
list-style: none;
}
.box {
height: 100%;
border: 1px solid #ccc;
background-color: #fff;
position: relative;
overflow: hidden;
}
.box-header {
background-color: #eee;
padding: 0px 0px 0px 0px;
margin-bottom: -25px;
cursor: move;
position: relative;
}
.box-header h3 {
margin-top: 0px;
display: inline-block;
}
.box-content {
padding: 10px;
display:block;
height: 100%;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.box-header-btns {
top: 15px;
right: 10px;
cursor: pointer;
position: absolute;
}
.gridster {
border: none;
position:relative;
}
.box-content .box-content-frame{
}
.box table{
border:none;
display:block;
}
.box table tr{
line-height:20px;
}
.box table th{
border:none;
line-height:20px;
}
.menu-container{
margin-top:0px
}
.handle-e {
width:3px;
}
</style>
</head>
<body class="appBody" ng-app="abs">
<!-- commented the header for now to avoid duplicate headers on portal -->
<div ds2-Header class="header-container" ></div>
<div ds2-menu id="menuContainer" class="menu-container"></div>
<div ng-view id="rightContentProfile" class="content-container"></div>
<div ds2-Footer class="footer-container"></div>
</body>
</html>
app.js
------
:code:`sdk/ecomp-sdk/epsdk-app-os/src/main/webapp/app/fusion/scripts/myapp/myfirstpage/app.js` contains a single line:
.. code-block:: javascript
var appDS2=angular.module("abs", ['ngRoute', 'ngMessages','modalServices', 'ngCookies', 'b2b.att','gridster','ui.bootstrap','ui.bootstrap.modal']);
Don't worry too much about the particulars here. Just know that the list of strings are dependencies. You might add or remove some later.
controller.js
-------------
The controller is where most of the action happens. The controller is complex, but there is one basic thing that needs clarifying. In AngularJS, :code:`$scope` essentially says, "This should be visible inside the associated :ref:`template`." You'll gradually come to understand other aspects of the controller as you work with it.
Copy and paste the following into :code:`sdk/ecomp-sdk/epsdk-app-os/src/main/webapp/app/fusion/scripts/myapp/myfirstpage/controller.js`:
.. code-block:: javascript
appDS2
.controller('myFirstPageController', function($scope, $routeParams, $location, $interval, $http, $q, $modal, $log, ManifestService, dataService) {
/**********************************************
* FUNCTIONS
**********************************************/
$scope.init = function () {
// Set up and initialize a state object. This object will contain information about the state of
// the application as the user interacts with it.
$scope.state = {
// Holds a message string for testing
message: "Hello from myFirstPageController",
}
}
/**********************************************
* Setup and initialize the app on load
**********************************************/
$scope.init();
}); // end .controller
data-service.js
---------------
:code:`data-service.js` is the bridge between the Java side of your app and the web side. The dataService makes http requests to :code:`MyAppController.java`. Once a response is received (it will not block, waiting for a response, because you want your app to continue working while waiting), it executes the :code:`then` portion of the code, which simply returns the result back to wherever it was called from.
We'll see it in action soon. For now copy and paste the following into :code:`sdk/ecomp-sdk/epsdk-app-os/src/main/webapp/app/fusion/scripts/myapp/myfirstpage/data-service.js`:
.. code-block:: javascript
appDS2.factory('dataService', function ($http, $q, $log) {
return {
// Service to return chart data
getChartData: function(direction) {
return $http.get("get_chart_data/" + direction + "/").then(function(response) {
if (typeof response.data === 'object' || typeof response.data === 'string') {
return response.data;
}
else {
return $q.reject(response.data);
}
}, function(response) {
return $q.reject(response.data);
})
}
};
});
route.js
--------
:code:`route.js` tells AngularJS how to map specific kinds of incoming requests to specific pages and controllers. AngularJS uses the 'location' hashtag to pass parameters to the client as seen in the commented :code:`when` block example below.
Copy and paste the following into :code:`sdk/ecomp-sdk/epsdk-app-os/src/main/webapp/app/fusion/scripts/myapp/myfirstpage/route.js`:
.. code-block:: javascript
appDS2.config(function($routeProvider) {
$routeProvider
// Example route that maps a specific URL to another page and
// controller.
//
// This would respond to:
// http://localhost:8080/epsdk-app-os#/date1/2017-08-01/date2/2017-08-07/
//
//.when('/date1/:date1/date2/:date2/', {
// templateUrl: 'app/fusion/scripts/myapp/myfirstpage/someotherpage.html',
// controller : "anotherController"
//})
.otherwise({
templateUrl: 'app/fusion/scripts/myapp/myfirstpage/template.html',
controller : "myFirstPageController"
});
});
.. _template:
template.html
-------------
The AngularJS template holds all the HTML and AngularJS directives that are presented to the user inside the ONAP Portal SDK boilerplate navigation. It is referenced in the :code:`route.js` file. Copy and paste the following into :code:`sdk/ecomp-sdk/epsdk-app-os/src/main/webapp/app/fusion/scripts/myapp/myfirstpage/template.html`:
.. code-block:: html
<div id="page-content" class="content" style="padding: 25px;">
<p>{{state.message}}</p>
</div>
Now, compile, install, and login.
Adding your new page to the SDK navigation
------------------------------------------
First, click on :code:`Menus` in the :code:`Admin` navigation menu:
.. image:: img/menus.png
:width: 320px
Now, click the :code:`Add Menu Item` button at the top of the page:
.. image:: img/addmenu.png
:width: 200px
Finally, fill out the form in the following way.
.. note:: "myfirstpage" is a reference to the name we defined in :ref:`definitions.xml`.
.. image:: img/newmenuitem.png
:width: 640px
To reload the navigation, click :code:`Home` in the Portal SDK navigation menu. You should see your new menu item at the top. If all went well, you should see "Hello from myFirstPageController" in the content area to the right of the navigation menu.
|
