Saturday, May 30, 2015
Wednesday, May 27, 2015
SASS - Resources about Sass maven plugin
http://www.yegor256.com/2014/06/26/sass-in-java-webapp.html
http://mvnrepository.com/artifact/org.jasig.maven/sass-maven-plugin/1.1.1
<dependency>
<groupId>org.jasig.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
<version>1.1.1</version>
</dependency>
http://mvnrepository.com/artifact/org.jasig.maven/sass-maven-plugin/1.1.1
<dependency>
<groupId>org.jasig.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
<version>1.1.1</version>
</dependency>
Monday, May 25, 2015
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
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
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.
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
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
w3schools.com http://www.w3schools.com/angular/angular_bootstrap.asp
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;
}
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%)";
});
Thursday, May 21, 2015
CSS - left shadow line for any container
-webkit-box-shadow: -1px 0px 1px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -1px 0px 1px 0px rgba(0, 0, 0, 0.2);
box-shadow: -1px 0px 1px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -1px 0px 1px 0px rgba(0, 0, 0, 0.2);
box-shadow: -1px 0px 1px 0px rgba(0, 0, 0, 0.2);
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})
==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:d
,this
andi
. With.forEach()
, on an array (like in the example from the beginning) you only get 2 things (d
andi
), 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' >
<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
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
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
_JAVA_OPTIONS=C:\Users\username
More of it here:
http://stackoverflow.com/questions/1501235/change-user-home-system-property
Sunday, May 10, 2015
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.
===== 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();
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">
<?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> {
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 - 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> {
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> {
Monday, May 4, 2015
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
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..." ); } } |
Subscribe to:
Posts (Atom)