Monday, May 25, 2015

Font Awesome resources

http://www.bootstrapcdn.com/

JavaScript - JSON.parse(), JSON.stringify()


https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Sunday, May 24, 2015

Spring Boot gradle webapp with Java persistence on server side and AngularJS+Bootstrap on client (link)

http://www.rnowak.info/2014/06/spring-boot-and-angularjs-quick-start.html

WebStorm JetBrains - install and run sample AngularJS app

1. Install WebStorm
2. Install NodeJS
3. Check it is installed:
   C:\Users\Andre>npm -version
   2.10.1
4. Run from the AngularJS root project directory npm install:
e.g. listed below.
5. In order to debbug JavaScript check that your Chrome has jetbrains-ide-support extension. If it is not installed look for it here: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji

JavaScript - testing tools: Jasmine (BDD), JsUnit, Karma (test runner)

1. Jasmine http://jasmine.github.io/ is the priority for testing, due to its BDD approach. 
2. JsUnit is an option (w/o BDD):http://www.jsunit.net/
3. Karma http://karma-runner.github.io/0.12/index.html - it is JavaScript test runner.

AngularJS + Bootstrap best practice

The main point: with AngularJS use pure CSS Bootstrap (don't use BootstrapJS)
https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together

angular.bootstrap - function in module ng:  https://docs.angularjs.org/api/ng/function/angular.bootstrap

Saturday, May 23, 2015

JavaScript - shuffle an array, mix up array elements randomly

Mix up (shuffle) array JavaScript function is taken from here:
Fisher–Yates Shuffle http://bost.ocks.org/mike/shuffle/
function shuffle(array) {
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}

Friday, May 22, 2015

JavaScript D3 - random integer number

Decimal values are fine, but if you ever need whole numbers, you can use JavaScript’s Math.round() method. For example, you could wrap the random number generator from this line
    var newNumber = Math.random() * 30;
as follows:
    var newNumber = Math.round(Math.random() * 30);
Example:
d3.selectAll("p").style("color", function() { return "hsl(" + Math.round(Math.random() * 360) + ",100%,50%)"; });

JavaScript D3 - The power of data()

http://alignedleft.com/tutorials/d3/the-power-of-data

Wednesday, May 20, 2015

Create ls command for Windows cmd

In order to enable cmd on Windows run ls command just run from command line this:
echo dir %1 > %systemroot%\system32\ls.bat

Javascript D3 good basic explanation

http://synthesis.sbecker.net/articles/2012/07/08/learning-d3-part-1

JavaScript D3 - example how the function(d, i) works

http://jsfiddle.net/M8nK8/

==HTML==
<script src="http://d3js.org/d3.v3.min.js"></script>
<section></section>


===JS D3==

var data=[10,20,30,40];

var lis = d3.select("section")
          .append("ul")
            .selectAll("li")
            .data(data)

lis.enter()
 .append("li")
 .text(function(d,i){ return "item n° "+i+" has value: "+d})

JavaScript D3 - forEach() vs each() function

The main takeaway is that, using .each() you get access to 3 things you need: dthis and i. With .forEach(), on an array (like in the example from the beginning) you only get 2 things (d and i), and you'd have to do a bunch of work to also associate an HTML element with those 2 things. And that, among other things, is how d3 is useful.

http://stackoverflow.com/questions/13465796/d3-javascript-difference-between-foreach-and-each

Tuesday, May 19, 2015

GWT DataGrid with LeafValueEditor

====== UIBINDER =======

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:b.grid='urn:import:org.gwtbootstrap3.client.ui.gwt'
             xmlns:b='urn:import:org.gwtbootstrap3.client.ui' >

Wednesday, May 13, 2015

Monday, May 11, 2015

Bootstrap free themes - link

Apache Tomcat - good explanation of install etc, "how to"

Could not reserve enough space for object heap

Here is the errors during the Maven build:

Error occurred during initialization of VM 
Could not reserve enough space for object heap 
Error: Could not create the Java Virtual Machine. 
Error: A fatal exception has occurred. Program will exit. 
Picked up _JAVA_OPTIONS: -Duser.home=C:\Users\Andre

In order to fix this, add an extra parameter to _JAVA_OPTIONS sys environment:
-Xmx512m

So it should look something like this:
_JAVA_OPTIONS: -Duser.home=C:\Users\Andre -Xmx512m

Issues with user.home during Maven build

If you have issue with incorrect property user.home during Maven build set this sys environment:

_JAVA_OPTIONS=C:\Users\username

More of it here:
http://stackoverflow.com/questions/1501235/change-user-home-system-property

Friday, May 8, 2015

GWT - how dynamically change a static css of theme in GWT Dev Mode

We know that all static resources e.g. images, css should be kept in project structure in static way e.g. through resource or public packages. This principle supposes that these kind of resources rarely will be changed. But if in your RIA GWT project you have to override some theme's css by some custom-style.css and see the result lets say "right now" in Dev Mode there would be the problem because if both css stored statically you can not dynamically see the result of the change just by refreshing the browser page e.g. F5.

If you want to see your css changes dynamically in GWT Dev Mode you have to inject your e.g. custom-style.css through ClientBundle somewhere in the beginning e.g. onModuleLoad().

===== Create this class inside resource package in you java src ====
 
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.CssResource.NotStrict;

/**
 * Created by panoand on 08/05/2015.
 */
public interface AppResources extends ClientBundle {

    AppResources INSTANCE = GWT.create(AppResources.class);

    @Source("css/custom-style.css")
    @NotStrict
    CssResource foo();
}

===== In your EntryPoint class put it inside onLoadModule() methode =====
AppResources.INSTANCE.foo().ensureInjected();







Thursday, May 7, 2015

GWT project settings

=========== app-client =================

<?xml version="1.0" encoding="UTF-8"?>
<project
        xmlns="http://maven.apache.org/POM/4.0.0"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

GWT - LeafValueEditor implementation for RadioButton widget with Enum type

package com.paniov.bitwitwebapp.client.widgets.editors;

import com.google.gwt.editor.client.LeafValueEditor;
import com.google.gwt.uibinder.client.UiConstructor;
import org.gwtbootstrap3.client.ui.RadioButton;
import org.gwtbootstrap3.client.ui.html.Div;

import java.util.HashMap;
import java.util.Map;

/**
 * Created by Paniov on 06.05.15.
 */
public class EnumRadiobuttonEditor extends Div implements LeafValueEditor<ButtonsType> {

Wednesday, May 6, 2015

GWT - links on ListEditor example code

https://sites.google.com/site/mygwtexamples/home/ui/listeditor

https://goo.gl/J5wCvQ

GWT - SelectActionCell. ActionCell with options menu

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.BrowserEvents;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.EventTarget;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.client.SafeHtmlTemplates;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import org.gwtbootstrap3.client.ui.constants.ButtonSize;
import org.gwtbootstrap3.client.ui.constants.ButtonType;

import java.util.*;

public class SelectActionCell<T> extends AbstractCell<T> {

HTML & CSS - Схлопывание внешних отступов

Friday, May 1, 2015

Google DI Guice - @ImplementedBy

The content below is taken from here:
http://blog.decaresystems.ie/2007/06/14/juicy-code-with-google-guice-part-4/
All parts about GUICE from the same source:
Part 2 – First Code
Part 3 – Dependency Injection
Part 4 – @ImplementedBy and Annotating Bindings
Part 5 – Custom Providers and Conclusions
As I mentioned in the previous blog entries, you configure Google Guice by creating a class that implements the Module interface or better, one that extends AbstractModule class. In this class you specify the bindings that logically connects implementations to interfaces. However, there’s a way that lets you create the bindings using annotations without needing to write the code in a Module implementation. You can do that using the@ImplementedBy annotation decorating an interface.
Let’s see a quick example:
1
2
3
4
5
6
7
8
import com.google.inject.ImplementedBy;
@ImplementedBy(MobilePhone.class)
public interface Phone {
public void ring();
}
The simple interface above is decorated with the @ImplementedBy annotation and the name of the implementer is specified as a single attribute.
1
2
3
4
5
6
7
public class MobilePhone implements Phone {
public void ring() {
System.out.println("It's playing some annoying melody...");
}
}