Single Page Application - switching views

Webix JS
#1

Hi, am wondering what the best way is to implement the ability to switch views in a single page app.
From what I’ve seen, there isn’t a ‘Card View’ component, so options might include:

  1. showing/hiding components (doesn’t work with some component, eg form)

  2. adding / removing views from a parent component

  3. using a tabview with no header

  4. changing the css visibility of html container.

  5. Multiview

Any suggestions on how best to switch views dynamically (e.g. a login view, a home page view, etc).

David

#2
  1. MultiView seems to work well:

http://docs.webix.com/desktop__show_switching.html

#3

MultiView was designed exactly for such case. The non-visible views are operable by API but do not really rendered, so you can have a LOT of views inside of multiview without affecting the overall performance.

If you have any code snippet, where hiding doesn’t work for form - please share it. There is no technical limitations for hiding on type of view.

#4

works awesomely for me!

#5

by the way, I have noticed that, if the views are different sizes, then they aren’t automatically sized properly. A manual resize of the browser is required.
This is presumably a side-effect of keeping the invisible views out of the dom until they are rendered.

Is there a refresh, or other function that one can call on the multiview after a new view is shown (alternatively, is this a bug that you can fix in the api)

#6

The following fixes the problem in Chrome, Firefox, and Safari:
After showing a new view in a multiview, run the following statement:

window.dispatchEvent(new Event(‘resize’))

Note: IE doesn’t support this.

#7

I found this block of code, which works for me in Chrome, FF, Safari, IE 9+ (it probably works in IE < 9, but I haven’t tried that):

Call this after showing a view in a multiview which has a different size:

function triggerResize(){

var el = window

var eventName = 'resize'

var event;

if(document.createEvent){

    event = document.createEvent('HTMLEvents');

    event.initEvent(eventName,true,true);

}else if(document.createEventObject){// IE < 9

    event = document.createEventObject();

    event.eventType = eventName;

}

event.eventName = eventName;

if(el.dispatchEvent){

    el.dispatchEvent(event);

}else if(el.fireEvent && htmlEvents['on'+eventName]){// IE < 9

    el.fireEvent('on'+event.eventType,event);// can trigger only real event (e.g. 'click')

}else if(el[eventName]){

    el[eventName]();

}else if(el['on'+eventName]){

    el['on'+eventName]();

}

}

(should this be in the core?)

#8

Not quite sure, but you can try to call

webix.ui.resize();

Normally multiview will try adjust self to the new content automatically, so external call must not be necessary.
If you have some code snippet or demo page with problematic behavior - please share it.

#9

yep, webix.ui.resize() works fine, thanks!