navigate from one page to another page

I wanted to know how I can navigate to a new page with a new design after clicking on a button
for example in python we define a url after that we set the button's href to that url
in webos i define a components :components:[{kind:Button,classes:'searchButton',ontap:'tapped'}]
i want when i click on this button navigate to another page
how could it we done in enyo for webos

I'm sorry actually I'm a beginner please explain for me complitly


  • If you're navigating to a new page and not just another part of your app, you can either use an Anchor or update the location in your tapped handler via window.location.href = '/path/to/resource.html';.

    If you're navigating to another part of the app, we'll need a bit more details on how your app is structured to answer that effectively.
  • i have 2 .js files . and i want to navigate from one file in my app to another one
    my view.js consist component and tap function like this :
    module.exports = kind({
    name: 'enyo.sample.DataListSample',
    kind: Control,
    components: [{kind:Button,classes:'searchButton',ontap:'tapped'}],

    tapped: function(sender,ev) {

    // this.createComponent({kind:moviePage }).renderInto(document.body);

    in tap function i want to go to another js file for example moviePage.js
    that it has another UI
    but i can't
    i was searching a bout href in enyo but i didn't undrestand anything
    please help me i'm bigginer
  • I'd suggest using Panels to navigate between views within the same app. There is a base Panels component and a moonstone-styled version.

    The Developer Guide has a section on using Panels that might help. The short explanation is to create a instance of Panels with one child for each Panel. The active panel is selected by setting the index on Panels.

    Here's a quick JSFiddle to illustrate. Hope it helps!
  • sorry but i don't want to navigate between panels.

    in enyo strawman sample first we have some buttons to select them (enyo, moonstone,layout...:
    after that when we click on one of them it navigates to the page that is related to that button and has a lot of samples about that subject(for example we select the enyo button in first page after that we goes on this page : it has a lot of sample that use enyo )

    and ofcurse it has back button to navigate to home page. how did that happen?!
    i was searching in strawman sample in some page it use kind of rout . is it related ?
    i didn't undrestand the source of strawman it was hard for me becuase i'm bigginer
    pleas help me
  • I agree with Ryan that you would be better off using panels. You can have different UI's on each panel if you needed.

    When it comes to how they have Strawman setup, its a little different. The way I see it is that they have each lib that they include setup almost like its own little app. There is an enyo folder for the enyo lib and it contains its own index.html file. The button you see on each lib page is basically specifying the URL back to the root app "strawman".
    {name: 'back', kind: Link, classes: 'back-button', content: 'Back', href: '../index.html'}
    I am not sure the strawman configuration is what you are looking to do. The "enyo/Router" that you also mentioned helps with seeing and making changes to the URL. Would your app have different URLs paths that you would want to watch and adjust accordingly?

    Not sure if this info helps you any but just something to think about.
  • as u sugested me i use panel to navigate but i have new problem
    when i click on items i want to navigate to next panel
    i want to do this in my onclick function
    but when i put this.setIndex(0); in onclick it gets this error:
    Uncaught ReferenceError: Index is not defined
    cuase it's in another kind
  • Appears the issue here is your encapsulation. Your image list doesn't have any knowledge of (nor should it) the Panels so it can't affect the index directly. It only knows that an Item was tapped and that consumers of the list might care about that.

    In Enyo, the way to do that is to declare a custom event which you invoke when the Item is clicked. Then, the common ancestor (App in your case) handles that event and translates that into a change in a change in Panel index since it owns (is) the panels instance.

    I took a quick cut at updating your fiddle but didn't attempt to run it so you might have to revise a bit.
  • hello
    after i switch view on the panel 2, there is a space with a link on the left that brings me back to panel 1, and the way i understand is that after i switch between panels there is an transforming involve, but it always transforming less than i expect. what should i do so the translateX value become 0 ,not 234px,
    when i delete style of that components or whatever that is
  • If you do not want the breadcrumbs (the component on the left to navigate back a panel), you should set the pattern to none.
  • hello again
    the problem i had before is solved now thanks to you
    i have another question.
    when i am in the home panel or panel 1, i have some lists or whatever and they contain bunch of information and data so after the user click on one of them panel 2 will shown and show the data. but when i am in the home page and click on the right or left it will change and switch to panel 2, i don't want that and i need it only when the user click on one of this lists, so what should i do?
    p.s: i asked it before and you respond with an answer but it didn't work, here is your answer before:

    and here is my sample code that does not work:
  • The issue appears to be that you've mistakenly included a Panels instance inside your main Panels and when you 5-way right, the close button of the second panels instance offscreen is being focused.

    From Line 147 of your jsfiddle. Panels there should be Panel.
    	       	    ]},{kind: Panels,components:[{kind:Image,src:''
    	       	    ,}] } 
  • i use panels cause i want to add a new page to that panels . in this example that i sent to u just add the image to panel but in real i want to add a panel that consist text body , itemList and... . for example i have movie kind and i want to add this kind to that panel
    when i change the panels to panel , i can not add this things it means when i go to next panel by clicking it dosen't appear me anything
    and ofcourse i try panel but it doesn't work
    do you have any other sujestion?
    thank you
  • in your example a bout panel :
    if i don't use panels how can navigate between them ?
    if i use panel it dosen't set the index and when i click on button dosen't go to next panel

  • If your panels are in separate components (as they should be) you'll need to have the parent Panels instance pass an event handler in to each panel that can be used to navigate (e.g.: onRequestPushPanel . Then, in each panel you can call the doRequestPushPanel method with an object containing the index to navigate to. Search for that method in the Moonstone tutorial:
  • I am very new to Enyo and still learning. But i am working with something which might be useful to you/anyone who still needs it.
    Put a function and renderInto the other page . e.g

    handleBtnOtherPage : function(inSender,inEvent){
    new Page2().renderInto(document.body); //
    Assign 'handleBtnOtherPage' to your button through 'ontap:"handleBtnOtherPage"'.

    Make sure you have your page2.js mentioned in the package.js file.

    Hope this helps.
  • I have developed a way of changing panels which may improve the library. In my application, there is myriad of panels and subpanels. In many cases user is driven through "steps" to perform actions. Thus I have extensive panel navigations. Some panels, like user agreement, will automatically advance once the server responds that the agreement is up to date. Also, when a panel is activated, its content needs to become up to date. In order all of this will be manageable I have following architecture in place:

    1. Panels are referred by its name,
    2. You can switch to neighbour panel,
    3. You can let a sub-panel to change,
    4. When panel gets "visible", then its method nowVisible will be called, that will inherently also call its visible subpanel. The nowVisible will handle content refreshment and in the agreement case will set the next neighbour visible.
    5. When panel gets "hidden", then similarily nowHidden method will be called, this I use rarely but can be used for minimizing RAM usage by deleting some large content that must be refreshed again later.
  • @peetervois , This sounds very useful, is it in a form that you could share?
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!