Kick Out Java Fundamental: June 2015

Friday, 12 June 2015

How do I conditionally apply CSS styles in AngularJS?

Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically:

ng-class - use when the set of CSS styles is static/known ahead of time
ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values.
ng-show and ng-hide - use if you only need to show or hide something (modifies CSS)
ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM)
ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM)
ng-disabled and ng-readonly - use to restrict form element behavior
ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations

The normal "Angular way" involves tying a model/scope property to a UI element that will accept user input/manipulation (i.e., use ng-model), and then associating that model property to one of the built-in directives mentioned above.
When the user changes the UI, Angular will automatically update the associated elements on the page.

Q1 sounds like a good case for ng-class -- the CSS styling can be captured in a class. ng-class accepts an "expression" that must evaluate to one of the following:

a string of space-delimited class names
an array of class names
a map/object of class names to boolean values

Assuming your items are displayed using ng-repeat over some array model, and that when the checkbox for an item is checked you want to apply the pending-delete class:

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
   ... HTML to display the item ...
   <input type="checkbox" ng-model="item.checked">
</div>

Above, we used ng-class expression type #3 - a map/object of class names to boolean values.

Q2 sounds like a good case for ng-style -- the CSS styling is dynamic, so we can't define a class for this. ng-style accepts an "expression" that must evaluate to:

an map/object of CSS style names to CSS values

For a contrived example, suppose the user can type in a color name into a texbox for the background color (a jQuery color picker would be much nicer):

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">

Fiddle for both of the above. The fiddle also contains an example of ng-show and ng-hide. If a checkbox is checked, in addition to the background-color turning pink, some text is shown. If 'red' is entered in the textbox, a div becomes hidden.

Wednesday, 10 June 2015

Top Ten Things Every Java Programmer Should Know

These are in no particular order, but these are things that all Java programmers should probably know.

Who Invented Java, and when?
James Gosling, at Sun Labs, around 1992; the group was building a set-top box and started by "cleaning up" C++ and wound up with a new language and runtime.
What does Java stand for?
Java is not an acronym (not even Just Another Vague Acronym :-)). The language was first named Oak, after the tree outside James' window. The lawyers found a computer company called Oak so, legend has it, the gang went out to the local cafe to discuss names and wound up naming it Java; the "0xCafeBabe" magic number in the class files was named after the Cafe where the Java team used to go for coffee.
What is the JLS?
JLS is The Java Language Specification. Every developer should buy or download (free) this specification and read it, a bit at a time.
How do changes get into Java? JCP (Java Community Process).
Why is there no printf-like function in Java?
Actually there are! This was fixed in Java 5; see Java Cookbook (2nd Edition) Chapter 9. Java 5 (J2SE 1.5) includes printf (and scanf), String.format(), and lots more.
What is the GOF book?
The Gang Of Four book is entitled Design Patterns, by Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides. This is a very good book. You should read it. Not when you're just learning Java, but when you've let it sink in for about six months.
What other Java book do I need?
- Most of the O'Reilly Java books.
- Effective Java, by Joshua Bloch
- Java Developer's Almanac
- My Java Cookbook (see below)
What is the Java Cookbook?
That's my own book of Java recipes (for the programming language, not the coffee, but some bookstores still wind up listing it under Cooking).
What other Java sites do I need to know about?
- java.sun.com, Sun's main technology site
- java.net, a collaborative site (run by Sun)
- java.com, an advocacy/news site (run by Sun)
- developer.java.sun.com, Sun's main developer site
- www.javalobby.org, independent advocacy group
- www.javaworld.com, Java news
- www.theserverside.com, Java Review
- http://www.darwinsys.com/java/, my own Java site
What else do I need to know? Everything! But nobody can know everything about Java - the subject is now too vast. Imagine somebody saying that they know everything about every single Microsoft product and technology. If someone like that calls me, I'm always out.

How to draw an html table with diagonal lines and diagonal text?

The main building blocks are:

A nicely marked up <table>
A pseudo element border with skew to get the basic shape
A rotate on the span that contains the header text.

The concept is pretty basic, the pseudo elements and spans are positioned using position: absolute and they are positioned relative to their parent <th> headers which have position: relative
Here is the example!
Here is what it looks like in Chrome / Firefox / IE10+. IE 8 - 9 should work with their proprietary filters.
Screenshot

Here is the HTML / CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background: #FFF;
}
table {
    border-collapse: collapse;
    margin: 50px 0 0 50px;
    border-top: solid 1px #000;
    position: relative;
}

/* Very top border */
 table:before {
    content:'';
    display: block;
    position: absolute;
    top: -20px;
    left: 120px;
    height: 20px;
    width: 240px;
    border: solid 1px #000;
    border-bottom: none;
}

/* Far right headers top border (it's outside the table) */
 table:after {
    content:'';
    display: block;
    position: absolute;
    border-top: solid 1px #000;
    width: 101px;
    right: -101px;
    top: 0;
}

/* 
     - Apply header background/font colour 
     - Set base z-index for IE 9 - 10
*/
 thead, th:before {
    background: #03a9f4;
    color: #FFF;
    z-index: 1;
}

/* min-width and max-width together act like a width */
 th {
    min-width: 60px;
    max-width: 60px;
    position: relative;
    height: 100px;
}

/* Pseudo element borders */
 th:before {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    right: -50px;
    height: 100px;
    width: 60px;
    border: solid 1px #000;
    border-right: none;
    border-top: none;
    transform: skew(-45deg);
    border-bottom: none;
}

/* Apply the right border only to the last pseudo element */
 thead th:last-child:before {
    border-right: solid 1px #000;
}

/* Apply the top border only to the first rows cells */
 tbody tr:first-child td {
    border-top: solid 1px #000;
}

/* 
     - Rotate and position headings
     - Padding centers the text vertically and does the job of height
     - z-index ensures that the text appears over the background color in IE 9 - 10
*/
 th span {
    transform: rotate(-45deg);
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: -70px;
    bottom: 29px;
    height: 0;
    padding: 0.75em 0 1.85em;
    width: 100px;
    z-index: 2;
}

/* Create first two th styles */
 th:nth-child(1), th:nth-child(2) {
    border: solid 1px #000;
    border-top: none;
    border-bottom: none;
}
th:nth-child(2) {
    border-right: none;
}
th:nth-child(1):before, th:nth-child(2):before {
    display: none;
}

td {
    border: solid 1px #000;
    border-bottom: none;
    border-top: none;
    height: 20px;
    text-align: center;
}
tfoot {
    border: solid 1px #000;
}

HTML Code :

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th><span>Three</span></th>
            <th><span>Four</span></th>
            <th><span>Five</span></th>
            <th><span>Six</span></th>
            <th><span>Seven</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tfoot>
</table>

Create diagonal border of a cell

HTML :

<div id="square">
<span id="room">ROOM TYPE</span>
   <span id="hosp">HOSPITALITY</span></div>
<div id="line"></div>

CSS :

#square {
    position: absolute;
    top: 100px;
    left: 100px;
    background: #3b2a32;
    border: 2px solid #ad1b59;
    color: #ad1b59;
    height: 200px;
    width: 400px;
    font-family: arial, verdana;
    font-size: 22px;
    font-weight: bolder;
}

#room {
    display: block;
    position: absolute;
    top: 50px;
    left: 220px;
}

#hosp {
    display: block;
    position: absolute;
    top: 140px;
    left: 50px;
}

#line {
    position: absolute;
    top: 190px;
    left: 33px;
    height: 200px;
    width: 450px;
    border-top: 2px solid #ad1b59;
    -webkit-transform: rotate(26.5deg);
       -moz-transform: rotate(26.5deg);
        -ms-transform: rotate(26.5deg);
         -o-transform: rotate(26.5deg);
            transform: rotate(26.5deg);
}

Thursday, 4 June 2015

HashMap with multiple values under the same key

Use a map that has a list as the value. Map<KeyType, List<ValueType>>.
Create a new wrapper class and place instances of this wrapper in the map. Map<KeyType, WrapperType>.
Use a tuple like class (saves creating lots of wrappers). Map<KeyType, Tuple<Value1Type, Value2Type>>.
Use mulitple maps side-by-side.

Examples

1. Map with list as the value

// create our map
Map<string, List<Person>> peopleByForename = new HashMap<string, List<Person>>();    

// populate it
List<Person> people = new ArrayList<Person>();
people.Add(new Person("Bob Smith"));
people.Add(new Person("Bob Jones"));
peopleByForename.Add("Bob", people);

// read from it
List<Person> bobs = peopleByForename["Bob"];
Person bob1 = bobs[0];
Person bob2 = bobs[1];

2. Using wrapper class

// define our wrapper
class Wrapper {
    public Wrapper(Person person1, Person person2) {
       this.person1 = person1;
       this.person2 = person2;
    }

    public Person getPerson1 { return this.person1; }
    public Person getPerson2 { return this.person2; }

    private Person person1;
    private Person person2;
}

// create our map
Map<string, Wrapper> peopleByForename = new HashMap<string, Wrapper>();

// populate it
Wrapper people = new Wrapper()
peopleByForename.Add("Bob", new Wrapper(new Person("Bob Smith"),
                                        new Person("Bob Jones"));

// read from it
Wrapper bobs = peopleByForename["Bob"];
Person bob1 = bobs.Person1;
Person bob2 = bobs.Person2;

3. Using a tuple

// you'll have to write or download a Tuple class in Java, (.NET ships with one)

// create our map
Map<string, Tuple2<Person, Person> peopleByForename = new HashMap<string, Tuple2<Person, Person>>();

// populate it
peopleByForename.Add("Bob", new Tuple2(new Person("Bob Smith",
                                       new Person("Bob Jones"));

// read from it
Tuple<Person, Person> bobs = peopleByForename["Bob"];
Person bob1 = bobs.Item1;
Person bob2 = bobs.Item2;

4. Multiple maps

// create our maps
Map<string, Person> firstPersonByForename = new HashMap<string, Person>();
Map<string, Person> secondPersonByForename = new HashMap<string, Person>();

// populate them
firstPersonByForename.Add("Bob", new Person("Bob Smith"));
secondPersonByForename.Add("Bob", new Person("Bob Jones"));

// read from them
Person bob1 = firstPersonByForename["Bob"];
Person bob2 = secondPersonByForename["Bob"];

Underscore JS

JS File : underscore.js

Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux and Backbone's suspenders.

Usage :

var groupedData = _.groupBy(data, function(d){return d.division});
console.log(groupedData);

var data = [{
"division": "East",
"rm_name": "Russ Martin",
"address": "MT,VT, NH, ME (all firms)",
"state": "MT",
"coordinates": "43.299428,-74.217933"
}, {
"division": "East",
"rm_name": "Carey Fischer",
"address": "NY- Upstate ex Rockland County (BD, FP)",
"state": "NY",
"coordinates": "46.879682,-110.362566"
}, {
"division": "East",
"rm_name": "Brandon Born",
"address": "CT, NY - Upstate, MA - ex metro Boston (FI), MA - Central, West (all firms)",
"state": "CT",
"coordinates": "40.714353,-74.005973"
}, {
"division": "East",
"rm_name": "Joe Tocyloski",
"address": "PA - East, NJ - South (FP)",
"state": "PA",
"coordinates": "41.603221,-73.087749"
}, {
"division": "East",
"rm_name": "Phil Hemery",
"address": "NJ (FI), NJ - Bergen County (all firms), NY - NYC (FI,RIA)/Westchester (FI,BD)/Rockland County (all firms)",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}, {
"division": "East",
"rm_name": "Bob Mancini",
"address": "MA - East (all firms)",
"state": "MA",
"coordinates": "42.407235,-71.383667"
}, {
"division": "East",
"rm_name": "Damien Ramondo",
"address": "NJ, PA East",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}, {
"division": "East",
"rm_name": "Kevin Gang",
"address": "W VA,PA - West (all firms), OH - Cleveland (BD, FI)",
"state": "VA",
"coordinates": "44.314844,-85.602364"
}, {
"division": "East",
"rm_name": "Andrew Fischer",
"address": "MI - (all firms)",
"state": "MI",
"coordinates": "40.057052,-74.404907"
}, {
"division": "East",
"rm_name": "David Saslowsky",
"address": "NYC",
"state": "NY",
"coordinates": "46.879682,-110.362566"
}, {
"division": "East",
"rm_name": "Robert Brazofsky",
"address": "NYC",
"state": "NY",
"coordinates": "46.879682,-110.362566"
}, {
"division": "East",
"rm_name": "Joseph Proscia",
"address": "NJ - North ex Bergen County, NY - NYC (FP)",
"state": "NJ",
"coordinates": "41.203456,-77.189941"
}, {
"division": "East",
"rm_name": "William Marsalise",
"address": "NY - LI and Outer Boroughs (FI), LI Planners",
"state": "NY",
"coordinates": "46.879682,-110.362566"
}, {
"division": "East",
"rm_name": "Dan Stack",
"address": "OH - Columbus and South (all firms), KY - Covington (all firms)",
"state": "OH",
"coordinates": "37.439974,-78.662109"
}, {
"division": "East",
"rm_name": "James Broderick",
"address": "OH - North of Columbus ex Cleveland (all firms), Cleveland (FP)",
"state": "OH",
"coordinates": "37.439974,-78.662109"
}, {
"division": "South",
"rm_name": "Chris Carrelha",
"address": "FL - North (FP)",
"state": "FL",
"coordinates": "40.417287,-82.907123"
}, {
"division": "South",
"rm_name": "Don Connell",
"address": "TN, AR, KY - ex Covington (all firms), MO - St. Louis (by firm)",
"state": "TN",
"coordinates": "27.664827,-81.515754"
}, {
"division": "South",
"rm_name": "Jay O'Connor",
"address": "NC - ex coast, SC, GA - Savannah to Augusta (all firms)",
"state": "NC",
"coordinates": "35.517491,-86.580447"
}, {
"division": "South",
"rm_name": "Dwight Cornell",
"address": "FL - South, VI, PR (all firms)",
"state": "FL",
"coordinates": "40.417287,-82.907123"
}, {
"division": "South",
"rm_name": "Eric Indovina",
"address": "AL (all firms), GA (BD, RIA)",
"state": "AL",
"coordinates": "14.97198,19.753418"
}, {
"division": "South",
"rm_name": "Russ Corby",
"address": "TX - DFW (BD, FP) Houston Austin and San Antonio (FP, FI)",
"state": "TX",
"coordinates": "32.318231,-86.902298"
}, {
"division": "South",
"rm_name": "Chris Boeker",
"address": "TX - Southeast (BD), MS, LA - South (all firms)",
"state": "TX",
"coordinates": "32.318231,-86.902298"
}, {
"division": "South",
"rm_name": "Robert Nelms",
"address": "VA - ex DC metro (all firms), NC - Coast, MD (ex Baltimore), VA, DC (FI), TN - northeastern corner (all firms)",
"state": "VA",
"coordinates": "44.314844,-85.602364"
}, {
"division": "South",
"rm_name": "Joe Dominguez",
"address": "FL - North (BD, FI)",
"state": "FL",
"coordinates": "40.417287,-82.907123"
}, {
"division": "South",
"rm_name": "Marc Della Pia",
"address": "MD, DC - Metro, VA - Alexandria (BD, FA), Baltimore (FI)",
"state": "MD",
"coordinates": "31.968599,-99.901813"
}, {
"division": "South",
"rm_name": "Chris Carrelha",
"address": "GA (FI, FP)",
"state": "GA",
"coordinates": "32.166313,-82.902832"
}, {
"division": "South",
"rm_name": "Terry Harris",
"address": "OK, TX - by city (all firms)",
"state": "OK",
"coordinates": "32.166313,-82.902832"
}, {
"division": "West",
"rm_name": "Arend Elston",
"address": "AR, MO, IL - South(all firms)",
"state": "AR",
"coordinates": "35.007752,-97.092877"
}, {
"division": "West",
"rm_name": "John Schmidt",
"address": "IL - Chicago Metro (BD)",
"state": "IL",
"coordinates": "35.20105,-91.831833"
}, {
"division": "West",
"rm_name": "Jason Stevens",
"address": "MN, ND (All Firms)",
"state": "MN",
"coordinates": "46.7248,-94.680176"
}, {
"division": "West",
"rm_name": "Laura Channell",
"address": "IL - Chicago Metro (FI, FP)",
"state": "IL",
"coordinates": "35.20105,-91.831833"
}, {
"division": "West",
"rm_name": "Patrick Denis",
"address": "WI (all firms), Upper Peninsula of Michigan",
"state": "WI",
"coordinates": "46.729553,-94.6859"
}, {
"division": "West",
"rm_name": "Michael Cheskis",
"address": "IN (all firms), IL - Chicago Metro (By Firm)",
"state": "IN",
"coordinates": "43.78444,-88.787868"
}, {
"division": "West",
"rm_name": "Dave Mitchell",
"address": "IA, KS, NE, SD, MO - Kansas City (all firms)",
"state": "IA",
"coordinates": "40.271144,-86.132812"
}, {
"division": "West",
"rm_name": "Paul Moyer",
"address": "WA, ID, OR (all firms)",
"state": "WA",
"coordinates": "41.877741,-93.098145"
}, {
"division": "West",
"rm_name": "Peter Szabo",
"address": "AK, NV - Reno (all firms), N. CA (BD & FI), San Francisco (FI)",
"state": "AK",
"coordinates": "47.751074,-120.740139"
}, {
"division": "West",
"rm_name": "Lou Tousignant",
"address": "N.CA (FP), San Francisco (BD & FP)",
"state": "CA",
"coordinates": "64.200841,-149.493673"
}, {
"division": "West",
"rm_name": "Matt Malvey",
"address": "CA - San Diego (all firms)",
"state": "CA",
"coordinates": "64.200841,-149.493673"
}, {
"division": "West",
"rm_name": "Kevin Dausch",
"address": "N. CA (BD & FI), San Francisco (FI)",
"state": "CA",
"coordinates": "64.200841,-149.493673"
}, {
"division": "West",
"rm_name": "Scott Hutton",
"address": "CO, NM, WY, MT (all firms)",
"state": "Colorado",
"coordinates": "40.747164,-74.000566"
}, {
"division": "West",
"rm_name": "Brian Buehring",
"address": "CA - North LA to Santa Barbara, HI (all firms)",
"state": "CA",
"coordinates": "64.200841,-149.493673"
}, {
"division": "West",
"rm_name": "Robert Forrester",
"address": "CA - Orange County to San Diego (all firms)",
"state": "CA",
"coordinates": "64.200841,-149.493673"
}, {
"division": "West",
"rm_name": "Mike Ossmen",
"address": "CA - Downtown LA, Pasadena, South Bay & Inland Empire (All Firms)",
"state": "CA",
"coordinates": "64.200841,-149.493673"
}];

Kick Out Java Fundamental