The shape of space: 2012

Thursday, December 27, 2012

Javascript / HTML - Find focused element

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript">
      function init() {
        console.log('init()');

        document.getElementById('btnTeste02').focus();

        var focusedElement = document.activeElement;

        console.log('Focused element: ' + focusedElement.innerHTML);

        focusedElement.click();
      }
    </script>
  </head>

  <body>
    <button id="btnTeste01" onclick="console.log('Click: ' + this.innerHTML);">Teste 01</button>
    <button id="btnTeste02" onclick="console.log('Click: ' + this.innerHTML);">Teste 02</button>
    <button id="btnTeste03" onclick="console.log('Click: ' + this.innerHTML);">Teste 03</button>
  </body>
</html>

<script type="text/javascript">
  init();
</script>

Monday, December 03, 2012

JavaScript / Canvas / Image Data

<html>
  <head>
    <style>
      body {
        background-color: #ccc;
      }
    </style>

    <script type="text/javascript">
      function onLoad() {
        var canvas = document.getElementById('canvas_1');

        canvas.width = 20;
        canvas.height = 20;

        if (!canvas.getContext) {
          alert('Canvas is not supported.');
        }

        var context = canvas.getContext("2d");
        
        context.fillStyle = "rgb(255,0,0)";
        context.fillRect(0, 0, canvas.width, canvas.height);

        var imageData = context.getImageData(0, 0, canvas.height, canvas.width);

        var pixels = new Array();

        for (var i = 0; i < canvas.height; i++) {
          pixels[i] = new Array();

          for (var j = 0; j < canvas.width; j++) {
            pixels[i][j] = imageData.data[i * canvas.width + j * 4];

            console.log('pixels[' + i + '][' + j + '] = ' + imageData.data[i * (canvas.width * 4) + (j * 4) + 0] + ', ' +
                                                            imageData.data[i * (canvas.width * 4) + (j * 4) + 1] + ', ' +
                                                            imageData.data[i * (canvas.width * 4) + (j * 4) + 2]);

            imageData.data[i * (canvas.width * 4) + (j * 4) + 0] = 0;   // Red
            imageData.data[i * (canvas.width * 4) + (j * 4) + 1] = 0;   // Green
            imageData.data[i * (canvas.width * 4) + (j * 4) + 2] = 255; // Blue
          }
        }

        context.putImageData(imageData, 0, 0);
      }
    </script>
  </head>

  <body onload="onLoad()">
    <canvas id="canvas_1"></canvas>
  </body>
</html>

Tuesday, November 27, 2012

MinGW / Java / JNI

File: Test.java

public class Test {
public native void displayMessage();

static {
System.loadLibrary("teste");
}

public static void main(String args[]) {
new Test().displayMessage();
}
}

File: TestImp.c

#include <jni.h>
#include "Test.h"
#include <stdio.h>

JNIEXPORT void JNICALL Java_Test_displayMessage(JNIEnv *env, jobject obj)
{
printf("Testing 1 2 3...\n");

return;
}

File: Makefile

JAVA_DIR=/c/Program\ Files/Java/jdk1.7.0_07

all:
@echo
@echo "Compiling Java source"

${JAVA_DIR}/bin/javac.exe Test.java

@echo
@echo "Generating header file"

${JAVA_DIR}/bin/javah.exe -jni Test

@echo
@echo "Creating DLL file"

gcc -Wall -D_JNI_IMPLEMENTATION_ -Wl,--kill-at -I \
${JAVA_DIR}/include -I ${JAVA_DIR}/include/win32 \
-shared -o teste.dll TestImp.c

@echo
@echo "Executing..."

${JAVA_DIR}/bin/java.exe Test

clean:
rm -f Test.class
rm -f Test.h
rm -f Test.exe
rm -f teste.dll

Thursday, November 15, 2012

Insights / Scrollbar / JavaScript / CSS

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>
      * {
        padding: 0;
        border: 0;
      }

      .scrollable_area {
        clear: both;
        width: 500px;
        height: 400px;
      }

      .content {
        float: left;
        background-color: #f1f1f1;
        color: #000;
        opacity: 0.8;
      }

      .scrollbar {
        float:left;
        background-color: #c0c0c0;
        opacity: 0.5;
        position: relative;
      }

      .bar {
        background-color: green;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>

    <script type="text/javascript" language="JavaScript">
      /** Scroll bar object implementation. */

      function ScrollBar(element) {
        console.log('ScrollBar()');

        this.element = element;

        this.init();
      }

      ScrollBar.prototype = {
        element: null,
        height: 0,
        width: 0,

        contentElement: null,
        paddingContent: 5,
        contentWidth: 0,

        scrollElement: null,
        scrollBarWidth: 10,

        thumbElement: null,
        thumbWidth: 0,
        thumbHeight: 50,
      };

      ScrollBar.prototype.init = function() {
        console.log('ScrollBar.init()');

        // Content element

        this.contentElement = this.element.getElementsByClassName('content')[0];

        // Scroll bar element

        this.scrollElement = this.element.getElementsByClassName('scrollbar')[0];

        // Scroll bar element

        if (this.scrollElement) {
          this.thumbElement = this.scrollElement.getElementsByClassName('bar')[0];
        }

        // Layout

        this.layout();

        // Event listeners

        this.enableListeners();

        this.updateThumbFromContent();
      };

      ScrollBar.prototype.layout = function() {
        console.log('ScrollBar.layout()');

        this.calculate();

        this.layoutContent();

        this.layoutBar();
      };

      ScrollBar.prototype.calculate = function() {
        console.log('ScrollBar.calculate()');

        //this.borderWidth = this.element.style.borderWidth;

        console.log('this.element.style.borderWidth = ' + this.element.style.borderWidth);

        // Scroll area width

        this.width = this.element.offsetWidth;

        // Content area width

        this.contentWidth = this.width - this.scrollBarWidth - this.paddingContent * 2;

        this.height = this.element.offsetHeight;

        // Thumb dimensions

        this.thumbWidth = this.scrollBarWidth;
      };

      ScrollBar.prototype.layoutContent = function() {
        console.log('ScrollBar.layoutContent()');

        this.contentElement.style.overflow = 'hidden';

        this.contentElement.style.height = (this.height - this.paddingContent * 2) + 'px';

        this.contentElement.style.padding = this.paddingContent + 'px';

        this.contentElement.style.width = this.contentWidth + 'px';

        //this.contentElement.style.height = this.height + 'px';
      };

      ScrollBar.prototype.layoutBar = function() {
        console.log('ScrollBar.layoutBar()');

        // Scroll area dimensions

        this.scrollElement.style.height = this.height + 'px';

        this.scrollElement.style.width = this.scrollBarWidth + 'px';

        // Thumb layout

        this.thumbElement.style.width = this.thumbWidth + 'px';
        this.thumbElement.style.height = this.thumbHeight + 'px';
      };

      ScrollBar.prototype.setContent = function(str) {
        if (typeof(str) == 'string') {
          this.contentElement.innerHTML = str;

          this.updateThumbFromContent();
        }
      };


      ScrollBar.prototype.enableContentListener = function() {
        console.log('enableContentListener()');

        //if IE (and Opera depending on user setting)
        if (document.attachEvent) {
          console.log('attachEvent');

          var that = this;

          document.attachEvent("on" + mousewheelevt, that.onMouseWheelEventCall);
        }

        //WC3 browsers
        else if (document.addEventListener) {
          console.log('addEventListener');

          //FF doesn't recognize mousewheel as of FF3.x
          var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";

          var that = this;

          document.addEventListener(mousewheelevt, that.onMouseWheelEventCall, false)
        }
      }

      ScrollBar.prototype.disableContentListener = function() {
        console.log('disableContentListener()');

        var that = this;

        // if IE (and Opera depending on user setting)
        if (document.dettachEvent) {
          console.log('dettachEvent');

          var that = this;

          document.dettachEvent("on" + mousewheelevt, that.onMouseWheelEventCall);
        }

        //WC3 browsers
        else if (document.removeEventListener) {
          console.log('removeEventListener');

          //FF doesn't recognize mousewheel as of FF3.x
          var mousewheelevt = (/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"

          var that = this;

          document.removeEventListener(mousewheelevt, that.onMouseWheelEventCall, false);
        }
      }

      ScrollBar.prototype.onMouseWheelEvent = function(e) {
        console.log('onMouseWheelEvent()');

        var e = window.event || e; // old IE support

        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        console.log('delta = ' + delta);

        if (delta == 1) {
          this.contentElement.scrollTop -= 5;
        }
        else {
          this.contentElement.scrollTop += 5;
        }

        this.updateThumbFromContent();
      }

      ScrollBar.prototype.enableListeners = function(str) {
        var that = this;

        var handler = this.onMouseWheelEvent;

        this.onMouseWheelEventCall = handler.bind(that);

        // Mouse event for content

        this.contentElement.onmouseover = function() {
          console.log('onmouseover');

          // Enable event listener

          that.enableContentListener();
        };

        this.contentElement.onmouseout = function() {
          console.log('onmouseout');

          // Disable event listener

          that.disableContentListener();
        };


        // Mouse event for scroll

        this.scrollElement.onmouseover = function() {
          console.log('onmouseover');

          that.scrollElement.style.opacity = '1.0';
        };

        this.scrollElement.onmouseout = function() {
          console.log('onmouseout');

          that.scrollElement.style.opacity = '0.5';
        };

        this.scrollElement.onmousedown = function(e) {
          // Thumb positioning

          var x = e.pageX - that.scrollElement.offsetLeft;
          var y = e.pageY - that.scrollElement.offsetTop;

          if (y > (that.scrollElement.offsetHeight - that.thumbHeight))
            y = that.scrollElement.offsetHeight - that.thumbHeight;

          that.thumbElement.style.top = y + 'px';

          that.updateContentFromThumb();
        };
      };

      ScrollBar.prototype.updateContentFromThumb = function() {
        // Content positioning

        var thumbPercent = this.thumbElement.offsetTop / (this.scrollElement.offsetHeight - this.thumbHeight);

        console.log('this.thumbElement.offsetTop = ' + this.thumbElement.offsetTop);
        console.log('thumbPercent = ' + thumbPercent);

        this.contentElement.scrollTop = (this.contentElement.scrollHeight * thumbPercent);
      };

      ScrollBar.prototype.updateThumbFromContent = function() {
        console.log('updateThumbFromContent');

        console.log('this.contentElement.scrollTop = ' + this.contentElement.scrollTop);

        var contentPercent = 0;

        if (this.contentElement.scrollHeight -

            this.contentElement.offsetHeight > 0)
          contentPercent = this.contentElement.scrollTop /

                           (this.contentElement.scrollHeight -

                            this.contentElement.offsetHeight);

        console.log('contentPercent = ' + contentPercent);

        this.thumbElement.style.top = ((this.scrollElement.offsetHeight -

                                        this.thumbHeight) *

                                       contentPercent) + 'px';
      };


    </script>

  </head>
  <body onload="init();">
    abcdef
    <div class="scrollable_area">
      <div class="content">content</div>
      <div class="scrollbar">
        <div class="bar"></div>
      </div>
      <div style="clear: both;"></div>
    </div>
    <br>
    ghijkl
  </body>
</html>
<script type="text/javascript" language="JavaScript">
  function init() {
    // Initialize scrolls

    var scrollElement = document.getElementsByClassName('scrollable_area')[0];

    var scroll = new ScrollBar(scrollElement);

    var content = "\"A Imaginação\" Jean-Paul Sartre<br><br>" +
        "Olho esta folha branca posta sobre minha mesa; percebo sua forma, sua" +
        "cor, sua posição. Essas diferentes qualidades têm características" +
        "comuns: em primeiro lugar, elas se dão a meu olhar como existências" +
        "que apenas posso constatar e cujo ser não depende de forma alguma do" +
        "meu capricho. Elas são para mim, não são eu. Mas também não são" +
        "outrem, isto é, não dependem de nenhuma espontaneidade, nem da minha," +
        "nem da de outra consciência.<br>" +
        "<br>" +
        "São, ao mesmo tempo, presentes e inertes. Essa inércia do conteúdo" +
        "sensível, freqüentemente descrita, é a existência em si. De nada serve" +
        "discutir se esta folha se reduz a um conjunto de representações ou se" +
        "é ou deve ser mais do que isso. O certo é que o branco que constato" +
        "não pode ser produzido por minha espontaneidade. Esta forma inerte," +
        "que está aquém de todas as espontaneidades conscientes, que devemos" +
        "observar, conhecer pouco a pouco, é o que chamamos uma coisa.<br>" +
        "<br>" +
        "Em hipótese alguma minha consciência seria capaz de ser uma coisa," +
        "porque seu modo de ser em si é precisamente um ser para si. Existir, para" +
        "ela, é ter consciência de sua existência. Ela aparece como uma pura" +
        "espontaneidade em face do mundo das coisas que é pura inércia. Podemos," +
        "pois, colocar desde a origem dois tipos de existência: é, com efeito," +
        "na medida em que são inertes que as coisas escapam ao domínio da" +
        "consciência; é sua inércia que as salvaguarda e que conserva sua" +
        "autonomia.<br>" +
        "<br>" +
        "Mas eis que agora desvio a cabeça. Não vejo mais a folha de papel. Agora" +
        "vejo o papel cinzento da parede. A folha não está mais presente, não" +
        "está mais aí. Sei, entretanto, muito bem, que ela não se aniquilou:" +
        "sua inércia a preserva disso. Ela cessou, simplesmente, de ser para" +
        "mim. No entanto, ei-la de novo. Não virei a cabeça, meu olhar continua" +
        "dirigido para o papel cinzento; nada se mexeu no quarto.<br>" +
        "<br>" +
        "Entretanto, a folha me aparece de novo com sua forma, sua cor e sua" +
        "posição; e sei muito bem, no momento em que ela me aparece, que é" +
        "precisamente a folha que eu via há pouco. É ela, verdadeiramente," +
        "em pessoa? Sim e não. Afirmo, sem dúvida, que é a mesma folha com as" +
        "mesmas qualidades. Mas não ignoro que esta folha ficou lá no seu lugar;" +
        "sei que não desfruto de sua presença; se quero vê-Ia realmente é" +
        "preciso que me volte para minha escrivaninha, que concentre meus olhares" +
        "sobre o mata-borrão em que a folha está colocada.<br>" +
        "<br>" +
        "A folha que me aparece neste momento tem uma identidade de essência com" +
        "a folha que eu via há pouco. E, por essência, não entendo somente" +
        "a estrutura, mas, ainda, a individualidade mesma. Essa identidade" +
        "de essência, porém, não está acompanhada por uma identidade de" +
        "existência.<br>" +
        "<br>" +
        "É bem a mesma folha, a folha que está presentemente sobre minha" +
        "escrivaninha, mas ela existe de outro modo. Eu não a vejo, ela não" +
        "se impõe como um limite à minha espontaneidade; tampouco é um inerte" +
        "existindo em si.<br>" +
        "<br>" +
        "Em uma palavra, ela não existe de fato, existe em imagem.<br><br>" +

        "Do Prefácio de \"A Imaginação\", de Jean-Paul Sartre.";

    scroll.setContent(content);
  }
</script>

Wednesday, November 14, 2012

Config / Database / wxWidgets

Adding support to SQLite database, in this way the application usage / configuration is simplified and is added the possibility to use application in standalone mode, if required.

Implementando suporte a banco de dados SQLite, assim será possível utilizar o software em modo stand-alone, com instalação simplificada.

Sunday, November 11, 2012

Linux / Fedora / wxWidgets / PostgreSQL

Friday, November 02, 2012

Insights / Dropdown menu / HTML / JavaScript / CSS


<!DOCTYPE html>
<html>
  <head>
    <style>
      .menu-item {
        width: 100px;
        height: 50px;
        background-color: #f1f1f1;
        border: #ccc 1px solid;
        float: left;
      }

      .menu-item td {
        text-align: center;
        vertical-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #444;
        text-shadow: #ccc 1px 1px;
      }

      .menu-item:hover {
        background-color: #eee;
      }

      .menu-item:hover td {
        color: #000;
        text-shadow: #ccc 1px 1px;
      }

      .menu-clear {
        width: 0px;
        height: 0px;
        clear: both;
      }

      #menuPopup {
        position: absolute;
        width: 200px;
        height: 200px;
        border: #ccc 1px solid;
        background-color: #f1f1f1;
        visibility: hidden;
      }
    </style>

    <script type="text/javascript">
      var Menu = {
        closePopupHandler: null
      };

      Menu.closeMenuTimer = function() {
        console.log('Menu.closeMenuTimer');

        this.stopCloseMenuTimer();

        var obj = this;

        this.closePopupHandler = setTimeout(function() {
            console.log('Closing menu popup');

            obj.popupHide();
        }, 1000);
      };

      Menu.stopCloseMenuTimer = function() {
        console.log('Menu.stopCloseMenuTimer');

        if (this.closePopupHandler)  {
          clearTimeout(this.closePopupHandler);

          this.closePopupHandler = null;
        }
      };

      Menu.popupShow = function() {
        document.getElementById('menuPopup').style.visibility = 'visible';

        document.getElementById('menuPopup').style.display = 'block';
      };

      Menu.popupHide = function() {
        document.getElementById('menuPopup').style.visibility = 'hidden';

        document.getElementById('menuPopup').style.display = 'none';
      };

      Menu.init = function() {
        for (var i = 0; i < document.getElementsByClassName('menu-item').length; i++) {
          document.getElementsByClassName('menu-item')[i].xyz = 'testando';

          var obj = this;

          document.getElementsByClassName('menu-item')[i].onmouseover = function() {
            console.log('onmouseover menu item');

            var x = this.offsetLeft;
            var y = this.offsetTop;
            var width = this.offsetWidth;
            var height = this.offsetHeight;

            console.log('x=' + x + ' y=' + y + ' width=' + width + ' height=' + height);

            Menu.stopCloseMenuTimer();

            document.getElementById('menuPopup').style.top = (y + height - 1) + 'px';
            document.getElementById('menuPopup').style.left = x + 'px';

            obj.popupShow();
          }

          document.getElementsByClassName('menu-item')[i].onmouseout = function() {
            console.log('onmouseout menu item');

            Menu.closeMenuTimer();
          }

          document.getElementById('menuPopup').onmouseover = function() {
            console.log('onmouseover menu popup');

            Menu.stopCloseMenuTimer();
          }

          document.getElementById('menuPopup').onmouseout = function() {
            console.log('onmouseout menu popup');

            Menu.closeMenuTimer();
          }
        }
      };
    </script>
  </head>
  <body>  
    <div class="menu-item">
      <table width="100%" height="100%">
        <tr>
          <td>
            Teste
          </td>
        </tr>
      </table>
    </div>
    <div class="menu-item">
      <table width="100%" height="100%">
        <tr>
          <td>
            Teste
          </td>
        </tr>
      </table>
    </div>
    <div class="menu-item">
      <table width="100%" height="100%">
        <tr>
          <td>
            Teste
          </td>
        </tr>
      </table>
    </div>
    <div class="menu-item">
      <table width="100%" height="100%">
        <tr>
          <td>
            Teste
          </td>
        </tr>
      </table>
    </div>
    <div class="menu-clear"></div>
    <div id="menuPopup"></div>
  </body>
</html>
<script type="text/javascript">
  Menu.init();
</script>

Insights / Collapsible List / HTML / JavaScript / CSS

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
      #menuContainer {
        width: 250px;
        height: 350px;
        overflow: auto;
      }

      #menuContainer * {
        color: #fff;
        text-shadow: #000 1px 1px 1px;
      }

      #menuContainer table tr td {
        vertical-align: middle;
        text-align: center;
        padding: 5px;
      }

      .menuItem {
      }

      .menuTitle {
        font-weight: bold;
      }
    </style>

    <script type="text/javascript">
      function menuUpdate() {
        for (var i = 0; i < document.getElementsByClassName('menuItem').length; i++) {
          var element = document.getElementsByClassName('menuItem')[i];

          //alert(element.innerHTML);

          if (i == 0) {
            element.style.height = '50%';
          }
          else {
            element.style.height = '25%';
          }
        }
      }

      function onMenuItemSelect(elementSelected) {
        console.log('onMenuItemSelect');

        //console.log(elementSelected.innerHTML);

        console.log('menuContainer height: ' + document.getElementById('menuContainer').offsetHeight);

        var itemsCount = document.getElementsByClassName('menuItem').length;

        console.log("document.getElementsByClassName('menuItem').length: " + itemsCount);

        var itemHeightUnselected = 30;

        console.log('itemHeightUnselected: ' + itemHeightUnselected);

        for (var i = 0; i < itemsCount; i++) {
          var element = document.getElementsByClassName('menuItem')[i];

          //console.log(element.innerHTML);

          if (element.id == elementSelected.id) {
            console.log('ELEMENT "' + element.id + '" FOUND ***');

            element.style.height = (document.getElementById('menuContainer').offsetHeight -

                                    itemsCount * itemHeightUnselected) + 'px';
            
            element.innerHTML = boxExpanded('<span class="menuTitle">' + element.getAttribute('title') + '</span>' +
                                '<br>' + element.getAttribute('brief'));
          }
          else {
            element.style.height = itemHeightUnselected + 'px';

            element.innerHTML = boxExpanded(element.getAttribute('title'));
          }
        }
      }

      function boxExpanded(str, align, valign) {
        return '<table width="100%" height="100%">' +
                 '<tr>' +
                   '<td align="' + (align ? align : 'center') + '" valign="' + (valign ? valign : 'middle') + '">' +
                     str +
                   '</td>' +
                 '</tr>' +
                 '</table>';
      }

    </script>
  </head>

  <body>
    <div id="menuContainer">
      <div id="menuItem01" class="menuItem" style="background-color: #006699;"
        onclick="onMenuItemSelect(this);" onmouseenter="onMenuItemSelect(this);"
        title="Item 01" brief="Conteúdo do item 01">
      </div>
      <div id="menuItem02" class="menuItem" style="background-color: orange;"
        onclick="onMenuItemSelect(this);" onmouseenter="onMenuItemSelect(this);"
        title="Item 02" brief="Conteúdo do item 02">
      </div>
      <div id="menuItem03" class="menuItem" style="background-color: #555;"
        onclick="onMenuItemSelect(this);" onmouseenter="onMenuItemSelect(this);"
        title="Item 03" brief="Conteúdo do item 03">
      </div>
    </div>
  </body>
</html>

<script type="text/javascript">
  menuUpdate();

  onMenuItemSelect(document.getElementById('menuItem01'));
</script>

Insights / Notebook control / HTML / JavaScript / CSS

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        font-family: Monaco, Arial, Verdana;
        font-size: 12px;
        padding: 0;
      }
      body {
        margin: 0;
      }
      #box {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 500px;
        height: 400px;
        background-color: green;
      }
      .notebook {
        list-style: none;
      }
      .notebook li {
        float: left;
      }
      .notebook .tab {
        background-color:#f1f1f1;
        color: #000;
        border: #ccc 1px solid;
        cursor: pointer;
        padding: 2px 10px 2px 10px;
      }
      .notebook .tab-selected {
        background-color: #ccc;
        color: #000;
        border: #ccc 1px solid;
        font-weight: bold;
        cursor: pointer;
        padding: 2px 10px 2px 10px;
      }
      .notebook .content {
        clear: both;
        width: 99%;
        height: 300px;
        background-color: #ccc;
        border: #ccc 1px solid;
      }
    </style>
    <script type="text/javascript">

      var Notebook = {
        elementId: '',

        tabIndex: 0,

        tabs: new Array()
      };

      Notebook.setElementId = function(id) {
        this.elementId = id;

        for (var i = 0; i < document.getElementById(this.elementId).getElementsByTagName('li').length; i++) {
          var tabElement = document.getElementById(this.elementId).getElementsByTagName('li')[i];

          if (tabElement.className == 'content') {
            continue;
          }

          tabElement.index = i;

          var obj = this;

          tabElement.onclick = function() {
            obj.onTabClick(this);
          };


          this.tabs.push(tabElement);
        }

        this.onTabClick(this.tabs[this.tabIndex]);
      };

      Notebook.onTabClick = function(element) {
        this.tabIndex = element.index;

        for (var i = 0; i < this.tabs.length; i++) {
          if (this.tabs[i].className == 'content') {
            continue;
          }

          if (i == this.tabIndex) {
            this.tabs[i].className = "tab-selected";
          }
          else {
            this.tabs[i].className = "tab";
          }
        }

        document.getElementById(this.elementId).getElementsByClassName('content')[0].innerHTML = \

               element.getAttribute('content');
      };
    </script>
  </head>
  <body>
    <div id="box">
      <ul class="notebook" id="notebook">
        <li class="tab" id="tab1" content="Testando 1 2 3">Tab 1</li>
        <li class="tab" id="tab2" content="Testando 4 5 6">Tab 2</li>
        <li class="tab" id="tab3" content="Testando 7 8 9">Tab 3</li>
        <li class="content">xxx</li>
      </ul>
    </div>
  </body>
</html>
<script type="text/javascript">
  Notebook.setElementId('notebook');
</script>

SW / Insight / Integrated system / Br. Portuguese / Minimalistic thoughts / wxWidgets

Trying to develop something minimalistic to clean-up the system interface. Use windows on tabs instead of modal windows.

Tentando criar algo minimalista e funcional para finança / contabilidade pessoal. Atalhos de teclado para acessibilidade.

SW / Estudos / Minimalism / Monet

Sunday, July 08, 2012

Sistema Integrado - Aprimoramentos

Modificações foram feitas nas interfaces do sistema integrado. As interfaces gráficas estão sendo modificadas para um maior trabalho em paralelo na utilização do sistema. A utilização de janelas modais está sendo reduzida por um esquema de abas, assim é possível manter várias abas de trabalho abertas.
As modificações realizadas no módulo de contabilidade / finanças foram integradas.
Início da implementação de um instalador automatizado.
Builds em Windows 7.

Abas da interface principal do sistema integrado.

Sunday, June 17, 2012

Website de comércio eletrônico

Website para pré-venda de produtos com os seguintes recursos:

- Gerência de informações sobre produtos, categorias de produtos, fabricantes.

- Procura por produtos.

- Carrinho de compras.

- Pré-venda de produtos selecionados.

- Notícias.

Plataforma: Web

Status: Em desenvolvimento

Saturday, June 16, 2012

Sistema de Finanças Pessoais

Adaptação do sistema comercial para a administração de finanças pessoais.

Recursos:

Controle de informações sobre receitas e despesas

Cadastro, listagem, edição e exclusão de receitas.

Cadastro, edição e exclusão de parcelas de receitas recebidas.

Cadastro, listagem, edição e exclusão de despesas.

Cadastro, edição e exclusão de parcelas de despesas pagas.

Gráficos demonstrativos.
Plano de contas para receitas e despesas.

Plataformas a serem suportadas: Linux, MS Windows e Mac OS X.
Status: em desenvolvimento

The shape of space

Pages

Thursday, December 27, 2012

Javascript / HTML - Find focused element

Monday, December 03, 2012

JavaScript / Canvas / Image Data

Tuesday, November 27, 2012

MinGW / Java / JNI

Thursday, November 15, 2012

Insights / Scrollbar / JavaScript / CSS

Wednesday, November 14, 2012

Config / Database / wxWidgets

Sunday, November 11, 2012

Linux / Fedora / wxWidgets / PostgreSQL

Friday, November 02, 2012

Insights / Dropdown menu / HTML / JavaScript / CSS

Insights / Collapsible List / HTML / JavaScript / CSS

Insights / Notebook control / HTML / JavaScript / CSS

SW / Insight / Integrated system / Br. Portuguese / Minimalistic thoughts / wxWidgets

SW / Estudos / Minimalism / Monet

Sunday, July 08, 2012

Sistema Integrado - Aprimoramentos

Sunday, June 17, 2012

Website de comércio eletrônico

Saturday, June 16, 2012

Sistema de Finanças Pessoais

Blog Archive

Links

Pages

Thursday, December 27, 2012

Monday, December 03, 2012

Tuesday, November 27, 2012

Thursday, November 15, 2012

Wednesday, November 14, 2012

Sunday, November 11, 2012

Friday, November 02, 2012

Sunday, July 08, 2012

Sunday, June 17, 2012

Saturday, June 16, 2012

Blog Archive

Links

Subscribe To