As calling a method of archivo.js to another? and then interact with the elements separately.

edited August 2012 in General
Hello, I'm not explaining very well, my English is not good, I hope you understand.

I'm making a simple page enyo, is this
http://pruebaswebos.webcindario.com/enioEspanol/index.html
I want to do is that when you click "start", the panel will slide as it does with the arrows, if I have the controls and the treatment of events in the same file no problem as in this case.
content of file1.js
enyo.kind({
	name: "MenuPrincipal",
	kind: "FittableRows",
	classes: "enyo-fit",
	components: [
		{kind: "Panels", name:"samplePanels", classes: "enyo-arranger-fit", fit:true, realtimeFit: true, arrangerKind: "CarouselArranger", components: [

			{content:0, style:"background:#445572",components:[
			{kind: "App1"},
			{kind: "Image", src: "images/flecha_adelante.png", classes:"btn-desp-adelante",ontap: "nextPanel"},
			{content:"Site created by MAMISHO", classes: "etiqueta-developer"}
			]},

			{content:1, style:"background:#445572",components:[
			{kind: "App1"},
			{kind: "Image", src: "images/flecha_atras.png", classes:"btn-desp-atras", ontap: "prevPanel",name:"introduccion"},
			{kind: "Image", src: "images/flecha_adelante.png", classes:"btn-desp-adelante",ontap: "nextPanel"}
			]},

			{content:2,  style:"background:#445572",components:[
			{kind: "App1"},
			{kind: "Image", src: "images/flecha_atras.png", classes:"btn-desp-atras", ontap: "prevPanel"},
			{kind: "Image", src: "images/flecha_adelante.png", classes:"btn-desp-adelante",ontap: "nextPanel"}
		
			]},
			{content:3,  style:"background:#445572",components:[
			{classes: "onyx-sample-divider",allowHtml:true, content: "texto"},
			]}
		]},

        prevPanel: function(insender, event) {
		this.$.samplePanels.previous();
               // head.alerta(); //this code not function
	},
	nextPanel: function() {
		this.$.samplePanels.next();
	},

});

now I have a header "App1" in another file2.js que es el siguiente.


enyo.kind({
	name: "App1",
	kind: "FittableRows",
	classes: "enyo-fit",
	components: [
		{kind: "Panels", fit:true, classes: "scroller-primero", components: [
			{kind: "Scroller", horizontal:"hidden",touch:true, style:"background:white;border-radius: 15px;",thumb: true,classes: "scroller-sample-scroller enyo-fit", components: [
			
			
				{kind: "head"},//este control esta en otro fichero
				{classes:"scroller-sample-content", allowHtml:true,style:"font-size: 16px;text-aling:center;width:auto;", components: [
					{content:titulo ,allowHtml:true,style:"text-align: center; "},
					{kind: "Image", src: "images/enyo-logo.png",style:"display: block;margin: auto;"},
					{content:"texto1" ,allowHtml:true}
				]}
			]},

		]}
	],
});
finally I have another file is the header in file3.js
enyo.kind({
	name: "head",
	classes: "onyx onyx-sample",
	style:"background-color:#657CA0;border-radius: 15px;",
	components: [
		{kind: "Scroller", classes:"onyx-toolbar", touchOverscroll:false, touch:true, vertical:"hidden", style:"border-radius: 15px;;", thumb:false, components: [
			
			
			{classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [
				{kind: "onyx.Grabber"},
				{classes: "onyx-sample-divider", content: "Enyospañol", style:"font-weight:900;text-align:center;font-family:Impact, fantasy;font-size: 1.4em;color:white;"},
				
				{kind: "onyx.Button", content: "Inicio" , classes: "onyx-blue",ontap: "nextPanel",},
				{kind: "onyx.Button", content: "Introducción", classes: "onyx-blue",ontap:"prevPanel" ,name:"introduccion"},
				{kind: "onyx.Button", content: "Herramientas", classes: "onyx-blue"},
				{kind: "onyx.Button", content: "Tutoriales", classes: "onyx-blue"},
				{kind: "onyx.Button", content: "Contactos", classes: "onyx-blue"},
				
				//buscador
  				{kind: "onyx.InputDecorator",style:"margin-right: 10px;", components: [
    			{kind: "onyx.Input", name: "searchTerm",style: "width: 120px", placeholder: "Buscar..", onkeydown: "searchOnEnter"},
   
    			{kind: "Image", src: "lib/onyx/examples/OnyxSampler/images/search-input-search.png", ontap: "search"}
  				]},
			]}
			
			
		]},

	],
    alertas: function() {
		alert("aqui estoy");
	}
});
I can call as "alertas" from "prevPanel" I try this.alertas(), but does not work, also with head.alerta();

file package.js is
// package.js
enyo.depends(
	//estilos
	"estilos.css",

	//librerías
	"$lib/onyx",
	"$lib/layout/fittable",
	"$lib/layout/panels",
	"$lib/layout/slideable",

	"file1.js",
	"file2.js",
	"file3.js",
	"textos.js"
);
took 4 days learning enyo, hopefully I can help

Comments

  • In chrome the console says you are calling method next of undefined. It looks to me like you are violating encapsulation. Samplepanels doesnt exist in that kind. It exists in your menuprincipal kind. So you need to pass an event up the hierarchy of kinds to let Samplepanels change its index. Check out the event handling documentation in getting started.
  • but the call head.alerta (); from prevPanel correct???
  • To call the alertas function in your head kind: make sure and name the instance of the head kind you want to call (name: "head1" for instance. Then call this.$.head1.alertas() from within a kind that head1 is a component of.
  • does not work, it may be because head1 this in another file?
  • edited August 2012
    Thanks, the error is that does not name the kind, for example
    enyo.kind({
    	name: "Principal",
    	kind: "FittableRows",
    	classes: "enyo-fit",
    	components: [
    		{kind: "Panels", name:"samplePanels", classes: "enyo-arranger-fit", fit:true, realtimeFit: true, arrangerKind: "CarouselArranger", components: [
    			{content:0, style:"background:#445572",components:[
    			{name: "contenedor", kind: "contenido"},
    			{kind: "Image", src: "images/flecha_adelante.png", classes:"btn-desp-adelante",ontap: "nextPanel"},
    			{content:"Site created by MAMISHO", classes: "etiqueta-developer"}
    			]},
    			]},
    		
    	],
    
    	// panels
    	prevPanel: function(insender, event) {
    		this.$.samplePanels.previous();
    		this.$.contenedor.alertas();
    		
    	},
    	nextPanel: function() {
    		this.$.samplePanels.next();
    	},
    });

    and
    enyo.kind({
    	name: "contenido",
    	kind: "FittableRows",
    	classes: "enyo-fit",
    	components: [
    		{kind: "Panels", fit:true, classes: "scroller-primero", components: [
    			
    			{kind: "Scroller", horizontal:"hidden",touch:true, style:"background:white;border-radius: 15px;",thumb: true,classes: "scroller-sample-scroller enyo-fit", components: [
    			
    			
    				{kind: "cabecera"},
    				{classes:"scroller-sample-content", allowHtml:true,style:"font-size: 16px;text-aling:left;width:auto;", components: [
    					{content:titulo ,allowHtml:true,style:"text-align: center; "},
    					{kind: "Image", src: "images/enyo-logo.png",style:"display: block;margin: auto;"},
    					{content:texto1 ,allowHtml:true,style:"margin-left:1%;"}
    				]}
    			]},
    		
    		]}
    	],
    	alertas: function() {
    		alert("aqui estoy");
    	}
    	
    });



    Thanks for everything, I do not put the code unreadable, not how XD by new mind.
Sign In or Register to comment.