Obtener un Viewport

Los Viewport se obtienen a través de la API:

mui.getViewport(<id>);

y existe dos shortcuts para los Viewports estándares:

mui.screen = mui.getViewport(“mui-screen”);
mui.viewport = mui.getViewport(“mui-viewport”);

Mostrar una página

Para mostrar una nueva página determinada basta con invocar el método showPage del Viewport correspondiente, pasándole como parámetros el id de la página y el efecto.

<Viewport Object>.showPage(<page id>,<effect>);

Los efectos posibles al momento de construir el presente manual son:

• DEF
• NONE
• FADE
• SLIDE_RIGHT
• SLIDE_LEFT
• SLIDE_UP
• SLIDE_DOWN
• OVERFLY_IN
• OVERFLY_OUT
• FLOAT_IN
• FLOAT_OUT

Siendo DEF el efecto por defecto de la plataforma, el cual puede ser consultado o modificando mediante:

mui.DEF_ANDROID_EFFECT - Transición por defecto para Android.
mui.DEF_IOS_EFFECT - Transición por defecto para iOS.
mui.DEF_WIN_EFFECT - Transición por defecto para Windows Phone.
mui.DEF_WEBAPP_EFFECT - Transición por defecto para WebApp.

Ejemplo:

$("#buttom1").on("click", function(e) {
    mui.viewPort.showPage("page2", "DEF");
});

Volver atrás

Note que no existe el concepto de cerrar una página. Siempre debe haber una página a la vista dentro del Viewport, por lo que una página da lugar a otra y así sucesivamente.

En ocasiones el usuario querrá volver a la página anterior. Los dispositivos con Android en general disponen de un botón para esta acción, pero esto no sucede en otras plataformas con iOS, por lo que deberemos programar la acción de volver.

Para ello se invoca al método history.back().

Ejemplo

$("#backbutton").on("click", function(e) {
    mui.history.back();
});

Mostrar un Panel

Para mostrar un panel basta con invocar el método showPanel del Viewport corresponiente, pasándole como parámetros el id de la página y el efecto.

Los efectos posibles al momento de construir el presente manual son:

• NONE
• FADE
• SLIDE_RIGHT
• SLIDE_LEFT
• SLIDE_UP
• SLIDE_DOWN
• FLOAT_RIGHT
• FLOAT_LEFT
• FLOAT_UP
• FLOAT_DOWN

Ejemplo:

$("#panelbutton").on("click", function(e) {
    mui.screen.showPanel('panel1', 'FLOAT_UP');
});

Si el panel estuviese en el mui-screen entonces la invocación sería:

$("#panelbutton").on("click", function(e) {
    mui.screen.showPanel('panel1', 'FLOAT_UP');
});

Cerrar un Panel

A diferencia de las páginas, los paneles deben ser cerrados.

Cuando se hace un click/touch dentro del viewport pero fuera del panel, éste se cerrará automáticamente. No obstante, si el click/touch se hace fuera del viewport esto no sucederá, por lo que se deberá invocar al método closePanel del viewport correspondiente.

Ejemplo:

$("#closepanelbutton").on("click", function(e) {
    mui.viewPort.closePanel();
});

 

Introducción a MobileUI

API de MobileUI