This blog explains how to define custom renderers in Oracle JET.
We have defined the layout as below and will populate those areas with flight information.
First column: Departing flights
Second column: All flights
Third column: Arriving flights
Finally it should look like:
We will start with the “second column” – All Flights.
To get all Flights info the API we will be using is : /api/getAllFlights
For that, we will make use of Oracle JET Collection model. I will first define a Model object which can parse each Flight info from the API.
self.AllFlight = oj.Model.extend({
parse: self.parseAllFlights,
idAttribute: 'Flight'
});
“parseAllFlights” is a method which will extract the information out of the response and put it in a JSON object.
self.parseAllFlights = function (response) {
return {Flight: response['FLIGHT_NUMBER'], Place: response['PLACE'],
Airline: response['AIRLINES'], Date: self.convertDateTime(response['DATE_TIME']), IsArrival: response['IS_ARRIVAL']};
};
Now the collection object:
self.AllDepartingFlightsCollection = oj.Collection.extend({
url: "<END_POINT>/api/getAllFlights",
model: new self.AllFlight,
comparator: "Flight",
parse: function (flights) {
return flights.result.rows;
}
});
Above in the “parseAllFlights”, I have used a date formatter, to format the incoming date object to dd/MM/yyyy hh:mm. It uses Oracle JET helper classes to format the date.
self.convertDateTime = function(date) {
var options = {pattern: 'dd/MM/yyyy hh:mm'};
var conv = oj.Validation.converterFactory('datetime').createConverter(options);
return conv.format(date);
}
I have also defined two observables to populate this information into a table.
self.allFlightsCol = ko.observable();
self.allFlightsDatasource = ko.observable();
And, then populate these with the Collection object.
self.allFlightsCol(new self.AllFlightsCollection());
self.allFlightsDatasource(new oj.CollectionTableDataSource(self.allFlightsCol()));
In the “view”, I access this info as:
<table
id="table" summary="All Arriving
and Departing Flights"
data-bind="ojComponent:{component:'ojTable',
data: allFlightsDatasource, columns: columnArray}">
</table>
If you have noticed, I use a viewModel object “columnArray” for the column definitions.
self.columnArray = [
{headerText: '', field: 'IsArrivalClass', id: 'column5', renderer: self.arivalOrDepartureFunc},
{headerText: 'Flight No.', field: 'Flight', id: 'column1', sortable: 'enabled'},
{headerText: 'To/From', field: 'Place', id: 'column2', sortable: 'enabled'},
{headerText: 'On/At', field: 'Date', id: 'column4'} ];
JS function as renderer
The above column array has a custom “renderer” for IsArrival column which takes care of the flight icon and color for Departing and Arriving flights.
self.arivalOrDepartureFunc = function (context) {
var div = $(document.createElement('div'));
var faclass = "";
var style="color:green;"
if(context.row.IsArrival === 'Y') {
faclass = "fa-rotate-180";
style="color:blue;"
}
div.attr('class', 'fa fa-plane ' + faclass);
div.attr('style', style);
$(context.cellContext.parentElement).append(div);
};
So now, the second column in the page will look like :
HTML template as renderer
For the first and the third column in the page, we will be displaying the results as ListView which will be using a custom renderer, but this renderer is based on a HTML template.
For Arriving flights:
<oj-list-view id="listview" aria-label="list using collection" style="width:100%;height:300px;overflow-x:hidden"
data="[[allArrivingFlightsDatasource]]"
item.renderer="[[oj.KnockoutTemplateUtils.getRenderer('arrivalDepartureTemplate')]]"
selection-mode="single"
scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="15">
</oj-list-view>
For Departing flights, it looks similar, only data source is different:
<oj-list-view id="listview1" aria-label="list using collection" style="width:100%;height:300px;overflow-x:hidden"
data="[[allDepartingFlightsDatasource]]"
item.renderer="[[oj.KnockoutTemplateUtils.getRenderer('arrivalDepartureTemplate')]]"
selection-mode="single"
scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="15">
</oj-list-view>
As you have noticed, they both use same template as renderer:
<script type="text/html" id="arrivalDepartureTemplate">
<li data-bind="attr: {id: Flight}">
<div class="oj-flex" style="flex-wrap: nowrap">
<div class="oj-flex-item" data-bind="style: { color: IsArrival != 'Y' ? 'green' : 'blue' }">
<div><strong data-bind="text: Flight"></strong>
<span data-bind="text: Date"></span>
</div><div>
<span style="word-wrap: break-word" data-bind="text: Place"></span>
</div></div></div>
</li></script>
I have changed the text color depending upon whether a flight is arriving or departing.
Now going to the Collection model, they both uses same Model object but a different collection.
For Departing flights :
self.AllDepartingFlightsCollection = oj.Collection.extend({
url: "<END_POINT>/api/getDepartingFlights",
model: new self.AllFlight,
comparator: "Flight",
parse: function (flights) {
return flights.result.rows;
}
});
For Arriving flights:
self.AllArrvingFlightsCollection = oj.Collection.extend({
url: "<END_POINT>/api/getArrivingFlights",
model: new self.AllFlight,
comparator: "Flight",
parse: function (flights) {
return flights.result.rows;
}
});
And the observables, Arriving flights:
self.allArrivingFlightsDatasource = ko.observable();
self.allArrivingFlightsCol = ko.observable();
self.allArrivingFlightsCol(new self.AllArrvingFlightsCollection());
self.allArrivingFlightsDatasource(new oj.CollectionTableDataSource(self.allArrivingFlightsCol()));
Departing flights:
self.allDepartingFlightsDatasource = ko.observable();
self.allDepartingFlightsCol = ko.observable();
self.allDepartingFlightsCol(new self.AllDepartingFlightsCollection());
self.allDepartingFlightsDatasource(new oj.CollectionTableDataSource(self.allDepartingFlightsCol()));
Finally the Departing flights:
And Arriving flights:
Comments
Post a Comment