i need to build the page by binding aggregation as below
view
<NavContainer
id="navCon"
class="navContainerControl sapUiSmallMarginBottom" height="50%">
</NavContainer>
controller
onInit : function()
{
var navCon = this.getView().byId("navCon");
navCon.bindAggregation('pages',{
path:'/pages',
factory : jQuery.proxy(this.createPages,this)
});
}
createPages : function(sid,context)
{
var eachpageData = context.getObject();
var grid = new sap.ui.layout.Grid({
defaultSpan:"L4 M6 S6"
});
var page = new sap.m.Page({
id : eachpageData.name,
title : eachpageData.name,
content : grid
});
grid.bindAggregation('content',{path:'data',factory :this.createPageContent});
return page;
},
But when i see from the debugger it has only one page
But when i call navto
handleNav : function(evt)
{
var navCon = this.getView().byId("navCon");
var target = evt.getSource().getText();
if (target) {
//var animation = this.getView().byId("animationSelect").getSelectedKey();
navCon.to(this.getView().byId(target));
} else {
navCon.back();
}
}
and if i see the navCon.getPages() will give 2 pages.
What mistake i have done here?
You are trying to pass the DOM element to the NavContainers.to(DOM) method. This is where its gone wrong.
But NavContainers.to() method can accept id(String) as parameter.
Change your handleNav method as follows it will work.
handleNav : function(evt)
{
var navCon = this.getView().byId("navCon");
var target = evt.getSource().getText();
if (target) {
navCon.to(target);
} else {
navCon.back();
}
}
NavContainers can display only one page. You can add more pages to the pages aggregation, but they will be visible only if a navigation event is fired with the proper parameters. After that, the layout of the new page is loaded and added to the DOM.
In case of SplitApp, application can display two pages (master and detail) if you see it on tablet or desktop; however it's implemented by the use of two NavContainers.
That's why the control inspector returns with one page before the navigation, second page is not part of the DOM until you navigates to it.
If you place a breakpoint into your code instead of using the control inspector, you can call the navCon.getPages() which should return with the number of pages in the aggregation.
Related
I use 2 XML fragment, one for display data, the other for edit.
I switch the fragment using this method:
onAfterRendering : function () {
this._toggleForm("Display");
},
_toggleForm : function(sFragmentName) {
var oPage = this._detailPage;
//my detail page has an object header, a fragment form and a form in detail view.
if(oPage.getContent().length > 2) {
oPage.removeContent(1);
}
oPage.insertContent(this._getFormFragment(sFragmentName), 1);
},
_formFragments: {},
_getFormFragment: function (sFragmentName) {
var oFormFragment = this._formFragments[sFragmentName],
oView = this.getView();
if (oFormFragment) {
return oFormFragment;
}
oFormFragment = sap.ui.xmlfragment(oView.getId(), "namespace.fragment." + sFragmentName, this);
oView.addDependent(oFormFragment);
return this._formFragments[sFragmentName] = oFormFragment;
}
Everything works fine... BUT, if I call the app from the Fiori launchpad, the first call is ok, but the second time give me this error in insertContent :
The object with ID XXX-detail--general was destroyed and cannot be used anymore.
Display/Change fragment is destroyed after exit, but this._fromFragment still stored a reference, and returned this reference oFormFragment when _getFormFragment is called when I entered the second time, which caused this error.
Fixed by add:
onExit : function () {
for(var sPropertyName in this._formFragments) {
if(!this._formFragments.hasOwnProperty(sPropertyName)) {
return;
}
this._formFragments[sPropertyName].destroy();
this._formFragments[sPropertyName] = null;
}
}
Answer #AndriiNaumovych 's question:
It seems that only sap.ui.comp.smartform.SmartForm has a EditTogglable property, and it need a sap:updatable="true" in metadata.xml (I saw that in Explore, not specified in doc.)
I use sap.ui.layout.form.SimpleForm, editable seems not working in JSON model without metadata. So I use this example with fragment.
I looked everywhere on the internet but I couldn't find any clear documentation or some examples to create my verySimplePlugin for videoJS 5 (Since it uses ES6).
I just want to add a button next to the big play button... Can someone help me?
Thanks...
PS: I'm using it in angularJS but I guess this can not a problem
This is how you can add download button to the end of control bar without any plugins or other complicated code:
var vjsButtonComponent = videojs.getComponent('Button');
videojs.registerComponent('DownloadButton', videojs.extend(vjsButtonComponent, {
constructor: function () {
vjsButtonComponent.apply(this, arguments);
},
handleClick: function () {
document.location = '/path/to/your/video.mp4'; //< there are many variants here so it is up to you how to get video url
},
buildCSSClass: function () {
return 'vjs-control vjs-download-button';
},
createControlTextEl: function (button) {
return $(button).html($('<span class="glyphicon glyphicon-download-alt"></span>').attr('title', 'Download'));
}
}));
videojs(
'player-id',
{fluid: true},
function () {
this.getChild('controlBar').addChild('DownloadButton', {});
}
);
I used 'glyphicon glyphicon-download-alt' icon and a title for it so it fits to the player control bar styling.
How it works:
We registering a new component called 'DownloadButton' that extends built-in 'Button' component of video.js lib
In constructor we're calling constructor of the 'Button' component (it is quite complicated for me to understand it 100% but it is similar as calling parent::__construct() in php)
buildCSSClass - set button classes ('vjs-control' is must have!)
createControlTextEl - adds content to the button (in this case - an icon and title for it)
handleClick - does something when user presses this button
After player was initialized we're adding 'DownloadButton' to 'controlBar'
Note: there also should be a way to place your button anywhere within 'controlBar' but I haven't figured out how because download button is ok in the end of the control bar
This is how I created a simple button plugin for videojs 5:
(function() {
var vsComponent = videojs.getComponent('Button');
// Create the button
videojs.SampleButton = videojs.extend(vsComponent, {
constructor: function() {
vsComponent.call(this, videojs, null);
}
});
// Set the text for the button
videojs.SampleButton.prototype.buttonText = 'Mute Icon';
// These are the defaults for this class.
videojs.SampleButton.prototype.options_ = {};
// videojs.Button uses this function to build the class name.
videojs.SampleButton.prototype.buildCSSClass = function() {
// Add our className to the returned className
return 'vjs-mute-button ' + vsComponent.prototype.buildCSSClass.call(this);
};
// videojs.Button already sets up the onclick event handler, we just need to overwrite the function
videojs.SampleButton.prototype.handleClick = function( e ) {
// Add specific click actions here.
console.log('clicked');
};
videojs.SampleButton.prototype.createEl = function(type, properties, attributes) {
return videojs.createEl('button', {}, {class: 'vjs-mute-btn'});
};
var pluginFn = function(options) {
var SampleButton = new videojs.SampleButton(this, options);
this.addChild(SampleButton);
return SampleButton;
};
videojs.plugin('sampleButton', pluginFn);
})();
You can use it this way:
var properties = { "plugins": { "muteBtn": {} } }
var player = videojs('really-cool-video', properties , function() { //do something cool here });
Or this way:
player.sampleButton()
I'm new to SAPUI5
I'm trying to show the master page when a Tile is clicked in a home page. Below is the code that I have used with in event handler.
var context = evt.getSource().getBindingContext();
this.nav.to("Master", context);
The problem here is I am getting following error TypeError: this.nav.to is not a function
Please assist
What is this in your context? That depends on where your tilePressed method is defined. If it's defined in a controller, this will refer to the controller.
If it is defined statically - you often find this for formatter functions - this will refer to the control that triggered the event.
Is the variable this.nav defined and appropriatly initialized? It needs to contain some kind of NavContainer e.g. the outermost sap.m.App resp. sap.m.SplitApp.
Also check out this article on the usage of this in JavaScript and this very handy jQuery function jQuery.proxy
The this.nav.to() and this.nav.back() functions are not
defined in the App.controller.js. You need to write the following code
in App.controller.js so that the compiler identifies the functions
being called.
to : function (pageId, context) {
var app = this.getView().app;
// load page on demand
var master = ("Master" === pageId);
if (app.getPage(pageId, master) === null) {
var page = sap.ui.view({
id : pageId,
viewName : "ProjectPath.view." + pageId,
type : "XML"
});
page.getController().nav = this;
app.addPage(page, master);
jQuery.sap.log.info("app controller > loaded page: " + pageId);
}
// show the page
app.to(pageId);
// set data context on the page
if (context) {
var page = app.getPage(pageId);
page.setBindingContext(context);
}
},
back : function (pageId) {
this.getView().app.backToPage(pageId);
}
I am on my way building a Fiori like app using SAPUI5. I have successfully built the Master page, and on item click, I pass the context and navigate to Detail page.
The context path from Master page is something like /SUPPLIER("NAME"). The function in App.controoler.js is as follows:
handleListItemPress: function(evt) {
var context = evt.getSource().getBindingContext();
this.myNavContainer.to("Detail", context);
// ...
},
But I would like to know how I can access this context in the Detail page. I need this because I need to use $expand to build the URL and bind the items to a table.
There is an example in the UI5 Documentation on how to deal with this problem using an EventDelegate for the onBeforeShow function which is called by the framework automatically. I adapted it to your use case:
this.myNavContainer.to("Detail", context); // trigger navigation and hand over a data object
// and where the detail page is implemented:
myDetailPage.addEventDelegate({
onBeforeShow: function(evt) {
var context = evt.data.context;
}
});
The evt.data object contains all data you put in to(<pageId>, <data>). You could log it to the console to see the structure of the evt object.
Please refer the "shopping cart" example in SAP UI5 Demo Kit.
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/cart/index.html?responderOn=true
Generally, in 'Component.js', the routes shall be configured for the different views.
And in the views, the route has to be listened to. Please see below.
In Component.js:
routes: [
{ pattern: "cart",
name: "cart",
view: "Cart",
targetAggregation: "masterPages"
}
]
And in Cart.controller.js, the route has to be listened. In this example, cart is a detail
onInit : function () {
this._router = sap.ui.core.UIComponent.getRouterFor(this);
this._router.attachRoutePatternMatched(this._routePatternMatched, this);
},
_routePatternMatched : function(oEvent) {
if (oEvent.getParameter("name") === "cart") {
//set selection of list back
var oEntryList = this.getView().byId("entryList");
oEntryList.removeSelections();
}
}
Hope this helps.
I'm building a Metro app using the single-page navigation model. On one of my pages I start an async ajax request that fetches some information. When the request returns I want to insert the received information into the displayed page.
For example:
WinJS.UI.Pages.define("/showstuff.html", {
processed: function (element, options) {
WinJS.xhr(...).done(function (result) {
element.querySelector('#target').innerText = result.responseText;
});
}
};
But how do I know that the user hasn't navigated away from the page in the meantime? It doesn't make sense to try to insert the text on a different page, so how can I make sure that the page that was loading when the request started is still active?
You can compare the pages URI with the current WinJS.Navigation.location to check if you are still on the page. You can use Windows.Foundation.Uri to pull the path from the pages URI to do this.
WinJS.UI.Pages.define("/showstuff.html", {
processed: function (element, options) {
var page = this;
WinJS.xhr(...).done(function (result) {
if (new Windows.Foundation.Uri(page.uri).path !== WinJS.Navigation.location)
return;
element.querySelector('#target').innerText = result.responseText;
});
}
};
I couldn't find an official way to do this, so I implemented a workaround.
WinJS.Navigation provides events that are fired on navigation. I used the navigating event to build a simple class that keeps track of page views:
var PageViewManager = WinJS.Class.define(
function () {
this.current = 0;
WinJS.Navigation.addEventListener('navigating',
this._handleNavigating.bind(this));
}, {
_handleNavigating: function (eventInfo) {
this.current++;
}
});
Application.pageViews = new PageViewManager();
The class increments a counter each time the user starts a new navigation.
With that counter, the Ajax request can check if any navigation occurred and react accordingly:
WinJS.UI.Pages.define("/showstuff.html", {
processed: function (element, options) {
var pageview = Application.pageViews.current;
WinJS.xhr(...).done(function (result) {
if (Application.pageViews.current != pageview)
return;
element.querySelector('#target').innerText = result.responseText;
});
}
};