<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

  <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
          id="sap-ui-bootstrap" 
          data-sap-ui-resourceroots='{"view": "./"}'
          data-sap-ui-theme="sap_bluecrystal" 
          data-sap-ui-xx-bindingSyntax="complex">
  </script>
  
  <!--
   <script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-resourceroots='{"view": "./"}'
            data-sap-ui-libs="sap.ui.commons"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-xx-bindingSyntax="complex">
    </script>
  -->
  
  <script>
    // Best practice would be to set this stuff up in an Component.js
     // but let's not over-complicate stuff for demonstration purposes

     // at the end of the page there is the corresponding xml view as a comment
    sap.ui.localResources("view");

    var page = sap.ui.view({
      id: "idMain",
      viewName: "view.main",
      type: sap.ui.core.mvc.ViewType.XML
    });

   page.placeAt("content");
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>
<core:View xmlns:core="sap.ui.core" 
           xmlns:mvc="sap.ui.core.mvc" 
           xmlns="sap.ui.commons"
           xmlns:m="sap.m"
		   controllerName="view.main">

      <Label text="Middle IconTabFilter is using a model but although COUNT is updated successfully, ICONCOLOR as well" />
      
      <m:IconTabBar
        id="idIconTabBar"
        expanded="false"
        select="handleIconTabBarSelect"
        class="sapUiResponsiveContentPadding">
        
        <m:items>
    
          <m:IconTabFilter
          	id="itf1"
            icon="sap-icon://globe"	        
            iconColor="Positive" />
            
    	    <!--  iconColor from: Neutral, Positive, Critical, Negative or Default -->
          <m:IconTabFilter
          	id="iconTabFilter"
            icon="sap-icon://overview-chart"	        
            iconColor="{status>/STATUS}"
            design="Horizontal"
            count="{status>/COUNT}"
            text="Status"
            key="status">
          </m:IconTabFilter>
        
          <m:IconTabFilter
          	id="itf3"
            icon="sap-icon://sap-logo-shape"	        
            iconColor="Neutral" />
    
        </m:items>
        
      </m:IconTabBar>

</core:View>
	      
{ "STATUS"  : "Negative",
  "COUNT"   : "63"
}
sap.ui.controller("view.main", {

		_oIconTabFilter: null,

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf view.check
*/
	onInit: function() {
		this._oIconTabFilter = this.byId("iconTabFilter");
		
		// Refresh model
		var sUrl = "mock_data.json";
		
		jQuery.ajax({
			type    : "GET",
			dataType: "json",
			url     : sUrl,
			context : this,
			error   : function(jqXHR, textStatus, errorThrown) {
				var sMessage = jqXHR.status + " " + jqXHR.statusText + " " + jqXHR.responseText;
				jQuery.sap.log.error("Data loading", sMessage, "index.html");
				sap.m.MessageToast.show(sMessage)				
			},
			success : function(oData, textStatus, jqXHR) {
				if (oData === null || oData === undefined) {
					var sMessage = "WARNING. Received a null or undefined response object.";
					jQuery.sap.log.warning("Data loading", sMessage, "index.html");
					sap.m.MessageToast.show(sMessage);
					return;
				}			
				
				var oModel = new sap.ui.model.json.JSONModel(oData);
				this._oIconTabFilter.setModel(oModel, "status");
				//this._oIconTabFilter.invalidate();
				//this._oIconTabFilter.rerender();
			}
		});
	},

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf publicis_userchecker.check
*/
//	onBeforeRendering: function() {
//
//	},

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf publicis_userchecker.check
*/
//	onAfterRendering: function() {
//
//	},

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf publicis_userchecker.check
*/
//	onExit: function() {
//
//	}

});