I am new to Enyo and trying to do mobile web application with router and multiple pages, it is not actually a single page application but we want to maintain different header and footer and content in different pages, so we tried with multiple enyo application.
It is working as expected but the issue is i can see multiple times of rendering the page where its configured in the router. I am not able to find out. I am using enyo 2.5.1.1.
Here is my app.js.
enyo.kind({
name: "myapp.Application",
kind: "enyo.Application",
view: "myapp.MainView",
components :[
{
name: 'router',
kind: 'enyo.Router',
routes: [
{path: 'next', handler: 'nextPage'}
],
publish: true
}
],
nextPage : function(){
// new myapp.MainView1().renderInto(document.body);
new myapp.Application1();
}
});
enyo.kind({
name: "myapp.Application1",
kind: "enyo.Application",
view: "myapp.MainView1",
});
enyo.ready(function () {
new myapp.Application({name: "app"});
});
view.js
enyo.kind({
name: "myapp.MainView",
kind: "FittableRows",
fit: true,
components:[
{kind: "onyx.Toolbar", content: "Hello World"},
{kind: "enyo.Scroller", fit: true, components: [
{name: "main", classes: "nice-padding", allowHtml: true}
]},
{kind: "onyx.Toolbar", components: [
{kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"}
]}
],
create : function(){
this.inherited(arguments);
console.log("MainView is created in memory");
},
rendered : function(){
this.inherited(arguments);
console.log("MainView is created in rendered into DOM");
},
helloWorldTap: function(inSender, inEvent) {
//this.$.main.addContent("The button was tapped.
");
//window.location="#login";
new myapp.Application().router.trigger({location:'next',change:true});
}
});
view1.js
enyo.kind({
name: "myapp.MainView1",
kind: "FittableRows",
fit: true,
components:[
{kind: "onyx.Toolbar", content: "Hai-->>"},
{kind: "enyo.Scroller", fit: true, components: [
{name: "main", classes: "nice-padding", allowHtml: true}
]},
{kind: "onyx.Toolbar", components: [
{kind: "onyx.Button", content: "Go Back", ontap: "helloWorldTap"}
]}
],
create : function(){
this.inherited(arguments);
console.log("MainView1 is created in memory");
},
rendered : function(){
this.inherited(arguments);
console.log("MainView1 is created in rendered into DOM");
},
helloWorldTap: function(inSender, inEvent) {
//this.$.main.addContent("The button was tapped.
");
//window.location="#";
new myapp.Application().router.trigger({location:'/ ',change:true});
}
});
here whenever i click the "Tap me" in the Mainview , it will load the MainView1. but i can see multiple time the Mainview1 is rendering ,it keeps incrementing 3 times every tap.
It's probably because you're not returning true from the helloWorldTap() handler. That will cause the tap event to continue up the ownership hierarchy and any other components that happen to hear it will run their handlers, as well.
Try just adding return true; at the end and see if it helps.
I might suggest implementing your changing header/footer content based on "pages" to something that better suits a single page app, but if you have multiple apps already running, it might not be worth it.
This is certainly a pathological use case. I don't think it was intended that you would create multiple Application objects that would render into the same document that way (you can render them into separate DOM nodes, but I wouldn't expect you to be able to render two applications into document.body.)
Further, in your tap handler, you're creating another application and then calling its router, which will cause yet another application to be created. It doesn't make sense to create a new Application to call its router. You can just use this.app.router... to access your current App's router.
Related
[Violation] Added non-passive event listener to a scroll-blocking
'touchstart' event. Consider marking event handler as 'passive' to
make the page more responsive
i am trying to use Tabulator in angular with success.but after a while the grid stop responding and then the browser, i am updating the grid content every 1 min using observable. aftr 4 times everything stucks with this issue....
//define table options
this.flatTableOptions = {
reactiveData: true,
data: this.currentTrafficServices,
columns: [
{
title: 'SERVICES',
field: 'displayName'
},
{
title: 'OCCURRENCES',
field: 'connectionQuantity'
},
{
title: 'STARTING FROM',
field: 'firstSeen',
mutator: this.milliToDate
},
{
title: 'LAST UPDATE',
field: 'lastSeen',
mutator: this.milliToDate
}
],
// persistentSort: true,
selectable: true,
layout: "fitColumns"
};
//create table
this.flatTable = new Tabulator('#tabulator-flat', this.flatTableOptions);
this.flatTable.redraw(true);
Does anybody know how to fix this? or should I give up on Tabulator with Angular?
That was a console warning rather than an error, it would have had no affect on your tables function, as #Shual mentions it is more to do with performance optimisation than functionality.
As of version v4.4 this behaviour has been optimised an you will no longer see these warnings in your console
In the shell.html for HotTowel template we have:
<!--ko compose: {model: router.activeItem,
afterCompose: router.afterCompose,
transition: 'entrance'} -->
<!--/ko-->
which will automatically insert the proper view by convention. I am trying to inject different views based on the user's role in a HotTowel/Durandal App. For example,
I have two Views,
productEditor_Admin.html
productEditor_Superviser.html
(instead of these two views, I used to have only productEditor.html, by convention everything worked)
and only a single ViewModel:
productEditor.js
Now, I want to have a function in productEditor.js that will let me decide which view to insert based on user's role. I see in the Composition documentation, we can do function strategy(settings) : promise but I am not sure what's the best way to accomplish this in the HotTowel template. Anyone have already tried and got an answer for that?
It's possible to return a 'viewUrl' property in the view model, so hopefully something like the following will crack the door open ;-).
define(function () {
viewUrl = function () {
var role = 'role2'; //Hardcoded for demo
var roleViewMap = {
'default': 'samples/viewComposition/dFiddle/index.html',
role1: 'samples/viewComposition/dFiddle/role1.html',
role2: 'samples/viewComposition/dFiddle/role2.html'
};
return roleViewMap[role];
}
return {
viewUrl: viewUrl(),
propertyOne: 'This is a databound property from the root context.',
propertyTwo: 'This property demonstrates that binding contexts flow through composed views.'
};
});
Did you take a look at John Papa's JumpStart course on PluralSight.
Look at the source code from that app here: https://github.com/johnpapa/PluralsightSpaJumpStartFinal
In App/Config.js file he adds other routes which are visible by default as :
var routes = [{
url: 'sessions',
moduleId: 'viewmodels/sessions',
name: 'Sessions',
visible: true,
caption: 'Sessions',
settings: { caption: '<i class="icon-book"></i> Sessions' }
}, {
url: 'speakers',
moduleId: 'viewmodels/speakers',
name: 'Speakers',
caption: 'Speakers',
visible: true,
settings: { caption: '<i class="icon-user"></i> Speakers' }
}, {
url: 'sessiondetail/:id',
moduleId: 'viewmodels/sessiondetail',
name: 'Edit Session',
caption: 'Edit Session',
visible: false
}, {
url: 'sessionadd',
moduleId: 'viewmodels/sessionadd',
name: 'Add Session',
visible: false,
caption: 'Add Session',
settings: { admin: true, caption: '<i class="icon-plus"></i> Add Session' }
}];
You can add routes to both the views here using the same logic and then in your productEditor.js you can decide which view to navigate and navigate to that using router.navigateTo() method.
I try to create my own kind in enyo
enyo.kind(
{
name: "DeviceButton",
kind: "Button",
caption: "",
published: { userAgent: "" },
flex: 1,
onclick: "butclick",
butclick: function() { console.log("User agent changed to " + this.userAgent) }
})
But when I click there is nothing shown
If I just did
onclick: console.log("User agent changed to " + this.userAgent)
It was printed that this.userAgent is undefined
What am I doing wrong?
Btw., is it possible to send parameters via onclick (so that the function repsponding to the click get a variable)
Thanks
The problem you're having here is that the onclick property is actually giving the name of the event handler for the Enyo to send the event to when the click is received. The "butclick" event isn't dispatched to the DeviceButton, but rather to its parent.
If you want to handle the event entirely within your kind, then you need to set it up as a "handler". In Enyo 2.x, you do it like this:
enyo.kind(
{
name: "DeviceButton",
kind: "Button",
caption: "",
published: { userAgent: "" },
flex: 1,
handlers {
onclick: "butclick"
},
butclick: function() { console.log("User agent changed to " + this.userAgent) }
})
In Enyo 1.x, you'd just need to name the handler function "onclickHandler". I mention the Enyo 1 solution because I see that you have "flex: 1" in your definition. Flexbox isn't supported in Enyo 2, we have a "Fittable" system instead.
I made a little example for you how enyo can handle sending and receiving values to and from a custom kind. I also added some short comments inside the code.
http://jsfiddle.net/joopmicroop/K3azX/
enyo.kind({
name: 'App',
kind: enyo.Control,
components: [
{kind:'FittableRows', components:[
// calls the custom kind by it's default values
{kind:'DeviceButton',name:'bttn1', classes:'joop-btn',ontap:'printToTarget'},
// calls the custom kind and pass the variables to the DeviceButton kind
{kind:'DeviceButton', name:'bttn2', btnstring:'Get Agent', useragent:'chrome', classes:'joop-btn', ontap:'printToTarget'},
{tag:'div', name:'targetContainer', content:'no button clicked yet', classes:'joop-target'},
]},
],
printToTarget:function(inSender, inEvent){
// inSender = the button that was pressed
this.$.targetContainer.setContent(inSender.name+' has used the value: "'+inSender.getUseragent()+'" and sends the value of: "'+inSender.getValueToPrint()+'" back.');
},
});
enyo.kind({
name:'DeviceButton',
kind:enyo.Control,
components:[
{kind:'onyx.Button',name:'btn', ontap:'printUsrAgent'}
],
published:{
btnstring:'default btnstring', // value that will be received
useragent:'default useragent', // value that will be received
valueToPrint:'default valueToPrint' // value that will be used
},
rendered:function(){
this.inherited(arguments);
this.$.btn.setContent(this.btnstring);
},
printUsrAgent:function(inSender,inEvent){
// set a parameter with the value that was received of if not received use the default value (normaly would do some calculations with it first)
this.valueToPrint = this.useragent+' after changes';
},
});
NOTE: Author is new to EXT JS and is trying to use MVC in his projects
imagine i have a web service whose data model is not fixed. I would want to have my models dynamically created, from which i dynamically create stores and hence dynamic components whose data is in those stores.
Lets start by seeing a sample class definition of a model:
Ext.define('MNESIA.model.User', {
extend: 'Ext.data.Model'
});
In this model definition, i have left out the 'fields' parameter in the config object. This is because whwnever i create an instance of a model of the type above, i want to dynamically give it its fields definition, in other words i can have many instances of this model yet all having different definition of their 'fields' parameter.
From here i create a definition of the store, like this:
Ext.define('MNESIA.store.Users', {
extend: 'Ext.data.Store',
autoLoad: true
}
});
There, i have a store definition. I have left out the 'model' parameter because i will attach it to every instance of this class dynamically. Infact, even the 'data' and 'proxy' settings are not mentioned as i would want to asign them during the instantiation of this store.
From there, i would want to have dynamic views, driven by dynamic stores. Here below i have a definition of a Grid
Ext.define('MNESIA.view.Grid' , {
extend: 'Ext.grid.Panel',
alias : 'widget.mygrid',
width: 700,
height: 500
});
I have left out the following parameters in the Grid specification: 'columns', 'store' and 'title' . This is because i intend to have many Grids created as instances of the specification above yet having dynamic stores, titles and column definitions.
Some where in my controller, i have some code that appears like this:
function() {
var SomeBigConfig = connect2Server();
/*
where:
SomeBigConfig = [
{"model":[
{"fields":
["SurName","FirstName","OtherName"]
}
]
},
{"store":[
{"data":
{"items":[
{"SurName":"Muzaaya","FirstName":"Joshua","OtherName":"Nsubuga"},
{"SurName":"Zziwa","FirstName":"Shamusudeen","OtherName":"Haji"},
...
]
}
},
{"proxy": {
"type": "memory",
"reader": {
"type": "json",
"root": "items"
}
}
}
]
},
{"grid",[
{"title":"Some Dynamic Title From Web Service"},
{"columns": [{
"header": "SurName",
"dataIndex": "SurName",
"flex": 1
},{
"header": "FirstName",
"dataIndex": "FirstName",
"flex": 1
},
{
"header": "OtherName",
"dataIndex": "OtherName",
"flex": 1
}
]}
]
}
]
*/
var TheModel = Ext.create('MNESIA.model.User',{
fields: SomeBigConfig[0].model[0].fields
});
var TheStore = Ext.create('MNESIA.store.Users',{
storeId: 'users',
model: TheModel,
data: SomeBigConfig[1].store[0].data,
proxy: SomeBigConfig[1].store[1].proxy
});
var grid = Ext.create('MNESIA.view.Grid',{
store: TheStore,
title: SomeBigConfig[2].grid[0].title,
columns: SomeBigConfig[2].grid[1].columns
});
// From here i draw the grid anywhere on the, page say by
grid.renderTo = Ext.getBody();
// end function
}
Now this kind of dynamic creating of models, then stores, and then grids does result into memory wastage and so this would require the destroy methods of each component to be called each time we want to destroy that component.
Questions:
Qn 1: Does the MVC implementation of EXT JS 4 permit this ?
Qn 2: How would i gain the same functionality by using the xtypes of my new classes. Say for example:
{
xtype: 'mygrid',
store: TheStore,
title: SomeBigConfig[2].grid[0].title,
columns: SomeBigConfig[2].grid[1].columns
}
Qn 3: If what i have written above really works and is pragmatically correct, can i apply this to all components like Panels, TabPanels, Trees (whereby their Configs are sent by a remote server) ?
Qn 4: If i have Controllers A and B, with controller A having a specification of views: [C, D] and Controller B having views: [E, F], would it be correct if actions generated by view: E are handled by Controller A ? i.e. Can a controller handle actions of a view which is not registered in its views config ?
NOTE: am quite new to Ext JS but would love to learn more. Advise me on how to improve my EXT JS learning curve. Thanks
In my option ,your model must map onto the store that is to be rendered to the view like for example,if implement the model part like this
{"model":[{"fields":[{name:'name',type:'string'},
{name:'id',type:'string'}]}]} ,this will be easily mapped onto the store for the view render it.
EDIT
I have a viewport that extends a TabPanel. In it, I set one of the tabBar buttons to load another TabPanel called subTabPanel. myApp.views.viewport.setActiveItem(index, options) works just fine. But myApp.views.subTabPanel.setActiveItem(index, options) only loads the appropriate panel card for a split second before it vanishes.
Strangely, it works just fine to make this call from within the subTabPanel's list item:
this.ownerCt.setActiveItem(index, options)
However, I want to avoid this, as I want such actions to live inside controllers so as to adhere to MVC.
Any thoughts on why the card disappears when called from the controller, but not when called from the containing subTabPanel?
(The subTabPanel card in question is an extension of Ext.Carousel.)
UPDATE
It looks like both subTabPanel and its carousel are being instantiated twice somehow, so that could be a big part of the problem...
The answer in this case was to prevent the duplicate creation of the subTabPanel and its carousel.
The viewport now looks like this:
myApp.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
listeners: {
beforecardswitch: function(cnt, newCard, oldCard, index, animated) {
//alert('switching cards...');
}
},
tabBar: {
ui: 'blue',
dock: 'bottom',
layout: { pack: 'center' }
},
items: [],
initComponent: function() {
//put instances of cards into myApp.views namespace
Ext.apply(myApp.views, {
subTabPanel: new myApp.views.SubTabPanel(),
tab2: new myApp.views.Tab2(),
tab3: new myApp.views.Tab3(),
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
myApp.views.productList,
myApp.views.tab2,
myApp.views.tab3
]
});
myApp.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
And I've since removed the duplicate creation of those TabPanel items from the items: property and moved their tabBar-specific properties into the view classes SubTabPanel, Tab2 and Tab3 (each of which are extensions of either Ext.TabPanel or Ext.Panel).