18 de junio de 2015

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.

20 de mayo de 2015

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.


6 de mayo de 2015

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

Crear un chart D3 en WaveMaker

Bueno les queria dejar un poco de codigo para incrustar bar chart series d3js en wavemaker 6.x

mas que todo hay que usar un widget html en incluir un tag div para poder llenar alli el chart


 y por su puesto referenciar a d3js y si quiere tambien usar d3 tip pues lo mismo agregar esa referencia.

  <script src="http://d3js.org/d3.v3.min.js"></script>
   <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>.

ya en la pagina que vamos a trabajar creamos un objeto json datos tipo array para poder llenar el chart

data = [];
        data.push({
            year: 1,
            Current: 2704659,
            Cashflow: 4499890,
            Savings: 2159981
        });
        data.push({
            year: 2,
            Current: 2027307,
            Cashflow: 3277946,
            Savings: 1420518
        });
 en este ejemplo lleno con 2 series para ustedes podrian adquirir los datos desde algun liveVariable en onSuccess

finalmente colocamos el codigo de d3 y solo referenciamos al html widget como

var svg = d3.select("#chart1")

que en este caso es el div id que tenemos en nuestro html widget

les dejo un proyecto de ejemplo mavirroco.com/d3sample1.1.Alpha.zip

suerte espero que les sirva

16 de mayo de 2014

Limpiar el dojogrid sin actualizar livevariable/servicevariable

Hola les comparto una forma simple de limpiar el dojogrid sin la necesidad de actualizar livevariable/servicevariable y asi no ahorramos hacer un query a nuestra db.

Aqui el codigo

var emptyCells = { items: "" };//creamos un objeto con items vacios 
var emptyStore = new dojo.data.ItemFileWriteStore({data: emptyCells}); this.myGridname.dojoObj.setStore(emptyStore);//aplicamos solo sobre el objeto dojo del grid

Espero que les sirva.

Fuente: http://jadendreamer.wordpress.com/2011/03/07/dojo-tutorial-clear-all-data-from-the-grid/
Se ha producido un error en este gadget.

Mis cosas