Quitar el search bar del select menu en phone y tablets

Encontre un codigo sencillo para quitar el search bar cuando clickeas el select menu en dispositivos moviles como phone y tablets.

Aqui el codigo

start: function() {
         dojo.extend(wm.ListSet, {showSearchBar: false});
},

espero que les sirva

Cambiar el incremento minutos del time editor

Si buscaban por ahi cambiar el incremento minutos del time editor con este codigo en el metodo start
lo pueden hacer

start: function() {
dojo.extend(dijit._TimePicker, {clickableIncrement: "T00:30:00"});
},

en este caso estoy cambiando la variacion a 30min en ves de 15min por defecto


espero que les sirva

Crear una Alert de Inactividad con dojo en wavemaker

Para poder controlar los problemas de sesion podemos usar un alert de inactividad para cerrar automaticamente la sesion activa.

Para ello tenemos que adjuntar este codigo en el App Script en la parte final

dojo.declare("Monitor", null, { _events: [ [window, 'scroll'], [window, 'resize'], [document, 'mousemove'], [document, 'keydown'] ], _idleTime: null, _timers: null, idleTime: null, constructor: function(time, timers) { Monitor.prototype.time = time; this._timers = timers; this.initObservers(); this.setTimer(); }, initObservers: function() { dojo.forEach(this._events, function(e) { dojo.connect(e[0], e[1], function(event) { Monitor.prototype.onInterrupt(); }); }); }, onInterrupt: function() { this.idleTime = new Date() - this._idleTime; dojo.publish("state:active", [this.idleTime]); this.setTimer(); }, setTimer: function() { var oj = Monitor.prototype; this.clearTimers(); this._idleTime = new Date(); this._timers.push(setTimeout(function() { dojo.publish("state:idle", null); }, oj.time)); }, clearTimers: function() { if (this._timers) { for (var i = 0; i < this._timers.length; i++) { //console.debug("Clearing Timer: " + this._timers[i]); clearTimeout(this._timers[i]); } } this._timers = []; } });

en nuestro main page colocamos antes de la primera linea de codigo

var logoutNow = function() { main1.varTemplateLogout.update(); }; 
var logoutTimeout; 
var monitor = new Monitor(180000, []); //180 000 =3 minutes 

aqui lo mas importante es el valor de 180 000 corresponde a los minutos que se dispara la advertencia

ahora en nuestro main page en start event

start: function() { 
 dojo.addOnLoad(function() { 
 function onActive(args) { monitor.clearTimers(); } 
 function onIdle() { 
  console.debug("idle...logging out"); 
  logoutTimeout = setTimeout(logoutNow, 60000); 
  main.idleDialog.show(); 
 } 
 dojo.subscribe("state:active", null, onActive); 
 dojo.subscribe("state:idle", null, onIdle); }); 
 }, 

y en nuestro main page colocamos un dialog con un label y 2 botones para que no sirva para mostrar la advertencia

idleDialog: ["wm.DesignableDialog", {"buttonBarId":"buttonBar5","containerWidgetId":"","desktopHeight":"120px","height":"120px","styles":{},"title":undefined,"width":"300px"}, {"onShow":"idleDialogShow"}, { containerWidget16: ["wm.Container", {"_classes":{"domNode":["wmdialogcontainer","MainContent"]},"autoScroll":true,"height":"100%","horizontalAlign":"left","padding":"5","verticalAlign":"top","width":"100%"}, {}, { label7: ["wm.Label", {"_classes":{"domNode":["dialogfooter"]},"caption":"Your session close in 60 seconds.","padding":"4","styles":{},"width":"100%"}, {}], label4: ["wm.Label", {"caption":"Did you want to keep working?","height":"100%","padding":"4","styles":{"fontSize":"15px","fontWeight":"bold"},"width":"278px"}, {}] }], buttonBar5: ["wm.ButtonBarPanel", {"border":"1,0,0,0","borderColor":"#333333","desktopHeight":"33px","height":"33px"}, {}, { YesIdleBtn: ["wm.Button", {"caption":"Yes","margin":"4","styles":{}}, {"onclick":"YesIdleBtnClick"}], NoIdleDialog: ["wm.Button", {"caption":"No","margin":"4"}, {"onclick":"NoIdleDialogClick"}] }] }],

y con sus respectivos eventos

YesIdleBtnClick: function(inSender) { 
 clearTimeout(logoutTimeout); 
 monitor.clearTimers(); 
 this.idleDialog.hide(); 
 ////execute here some query for refresh server for not go to session expiration 
}, 
 NoIdleDialogClick: function(inSender) { 
  main.varTemplateLogout.update(); 
 },
  idleDialogShow: function(inSender) { 
  try { 
   var downloadButton = document.getElementById("countdown"); 
   var counter = 60; 
   var id = window.setInterval(function() { counter--; if (counter < 0) { clearInterval(id); } else { downloadButton.innerHTML = counter.toString(); } }, 1000); } catch (e) { console.log(e.name, e.message); }
  },

Espero que les sirva.

JsKeyboard en WaveMaker

Encontre este teclado de jquery que me es util en una app touch para kiosk que no tiene teclado.

Como siempre agregan las fuentes al index.html

 <link rel="stylesheet" href="resources/css/jsKeyboard.css" type="text/css" media="screen"/>
 <script type="text/javascript" src="resources/js/jsKeyboard.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Primero en el Studio agregamos un html widget para colocar alli el teclado que tendria que ser en la parte de abajo del editor que necesitamos y en el colocamos un

<div id="virtualKeyboard"></div>

En mi caso lo enlace con un largeTextArea y tuve que agregar un evento onChange en start event

 start: function() {
        dojo.connect(this.largeTextArea1.domNode, "onkeyup", this, "largeTextArea1Change");
        $(function() {
            jsKeyboard.init("virtualKeyboard");
        });
     
    },

Ahora para ver el teclado virtual podemos agregar este codigo en algun evento por ejemplo lo hice en un boton

button1Click: function(inSender) {
this.showKeyboard("dijit_form_SimpleTextarea_0");
},
 tambien necesitamos agregar un par de funciones como estas

showKeyboard: function(id) {
        this.clean($("#" + id));
        jsKeyboard.currentElement = $("#" + id);
        jsKeyboard.show();
    },
     clean: function(t) {
        if (!isCleaned) {
            $(t).text("");
            isCleaned = true;
        }
    },

y finalmente ya podemos usarlo en nuestro text area.

Integracion MapQuest en WaveMaker

Buscando una alternativa a google maps encontre MapQuest para usar en algunas apps sin preocuparse en cuestiones de licencia.

Podemos hacer la integracion con codigo js que nos provee en la documentacion de MapQuest

aqui les comparto un ejemplo de marcadores.

Primero debemos crear una cuenta en MapQuest y obtener un key para apuntar al script en el index.html 

<script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=YOURKEY"></script>

Ahora en Wavemaker  usar un widget Html como contenedor para alli mostrar el mapa, luego en source js vamos a configurar nuestro marker en mi caso hice 3 custom markers

var customIcon1 = new MQA.Icon('resources/images/yo_green46.png', 20, 29);

var customIcon2 = new MQA.Icon('resources/images/yo_yellow46.png', 20, 29); 

var customIcon3 = new MQA.Icon('resources/images/yo_red46.png', 20, 29);

la idea ahora es crear un objeto coleccion de mapquest con el conjunto de coordenadas de los marcadores

y podemos llenar desde la db o una lista ..en mi caso utilice la db y obtengo los datos desde un liveVariable

 /*Create a new POI collection.*/

        var sc = new MQA.ShapeCollection(),

            poi, latlng = {

                lat: 39.0,

                lng: -82.0

            },

            i;

        /*Create additional POIs and add them to the shape collection.*/

        for (i = 0; i < this.liveVariable1.getData().length; i++) {

            latlng.lat = this.liveVariable1.getData()[i].lat;

            latlng.lng = this.liveVariable1.getData()[i].lng;

            poi = new MQA.Poi(latlng);

            if (this.liveVariable1.getData()[i].status == "Status 1") {

                poi.setIcon(customIcon1); 

            }

            else if (this.liveVariable1.getData()[i].status == "Status 2") {

                poi.setIcon(customIcon2);

            }

            else if (this.liveVariable1.getData()[i].status == "Status 3") {

                poi.setIcon(customIcon3);

            }

            sc.add(poi);

        }

Al finalizar creo un objeto TileMap para agregar la coleccion que ya tenemos

 /*Construct an instance of MQA.TileMap with the shape collection and margin offset in the map constructor.*/

        window.map = new MQA.TileMap({

            elt: document.getElementById('main_mapHtml1'),

            mtype: 'osm',

            collection: sc,

            bestFitMargin: 100

        });

Eso es todo ahora para generar otro mapa como consejo se tendria que borrar el anterior para ello

con main.mapHtml1.domNode.innerHTML = ""; podemos hacerlo.

Crear Widgets de forma dinamica

Aqui les dejo un snippet de como crear diferentes widget en js onRunTime, para ello tienen que apuntar a un container como por ejemplo un panel que estoy utilizando en el ejemplo:

Aqui el codigo

 buttonTextEditorClick: function(inSender) {
       this.layoutBox1.createComponent("someTextEditor", "wm.Text", {});
       this.someTextEditor.setDataValue("hola");
        this.layoutBox1.reflow();
    },
    buttonSelectEditorClick: function(inSender) {
        this.layoutBox1.createComponent("mySelect", "wm.SelectMenu", {});
        this.mySelect.setOptions("Rojo,Azul,Verde");
        this.layoutBox1.reflow();
    },
    buttonCheckBoxClick: function(inSender) {
        this.layoutBox1.createComponent("myCheckBox", "wm.Checkbox", {});
        this.myCheckBox.setCaption("El cHECK BOX");
        this.layoutBox1.reflow();
    },
    buttonRadioClick: function(inSender) {
        this.layoutBox1.createComponent("someRadio", "wm.RadioButton", {});
        this.layoutBox1.reflow();
    },
    buttonTextAreaClick: function(inSender) {
        this.layoutBox1.createComponent("textAreaEditor", "wm.LargeTextArea", {});
        this.layoutBox1.reflow();
    },
    buttonLabelClick: function(inSender) {
this.layoutBox1.createComponent("myLabel", "wm.Label", {});
        this.myLabel.setCaption("un ejemplo");
        this.layoutBox1.reflow();
},
buttonRadioSetClick: function(inSender) {
  this.layoutBox1.createComponent("myRadioSet", "wm.RadioSet", {});
        this.myRadioSet.setOptions("Masculino,Femenino,Otros");
        this.layoutBox1.reflow();
},
  buttonTextArea1Click: function(inSender) {
  this.panel1.createComponent("textAreaEditorPanel", "wm.LargeTextArea", {});
       this.textAreaEditorPanel.setCaption("mucho texto");
        this.panel1.reflow();
},
  buttonRichTextClick: function(inSender) {
   this.layoutBox1.createComponent("richText", "wm.RichText", {});
        this.layoutBox1.reflow();
},
  buttonDateClick: function(inSender) {
 this.layoutBox1.createComponent("dateEditor1", "wm.Date", {});
        this.layoutBox1.reflow();
},
  buttonDojoUploadClick: function(inSender) {
this.panel1.createComponent("dojoUpload", "wm.DojoFileUpload", {});
        this.panel1.reflow();
},

Espero que les sirva.

Personalizar Wizard widget

En un soporte tuve la necesidad de personalizar el widget wizard en ciertos idiomas pero el texto de los componentes no venia con la propiedad indicada para editar asi
que mediante js y dom me di mañas para poder hacerlo. aqui comparto como podrian hacerlo

para cambian el texto de boton preview

document.getElementById("main_wizardLayers1_prevButton").innerHTML = "Abbrechen";

para cambiar el texto tambien por decorator del wizard

this.wizardLayers1.decorator.cancelCaption = "Abbrechen";
this.wizardLayers1.decorator.nextCaption = "Weiter";
this.wizardLayers1.decorator.doneCaption = "fertig";

para cambiar el texto de datos invalidos en el wizard

wm.locale.phrases["wm.WizardDecorator.TOAST_INVALID"] = "Ungültigen Wert für ${name}";

espero que les sirva