Jayson JSON

Marshalling : takes your custom objects and converts them to XML, JSON or other serialization formats.

Unmarshalling : creation of custom objects from XML

Gunner Hillert  :  “The easiest way to marshal JSON in Spring MVC is via the Jackson Java JSON-processor“

Create JSON response from Spring MVC 3 :  ”Spring MVC invokes a MappingJacksonHttpMessageConverter built on the Jackson JSON processor. This implementation is enabled automatically when you use the mvc:annotation-driven configuration element with Jackson present in your classpath”

The @ResponseBody annotation is similar to @RequestBody  : “ This annotation can be put on a method and indicates that the return type should be written straight to the HTTP response body (and not placed in a Model, or interpreted as a view name).”

Spring MVC wth @ResponseBody : “Spring will automatically marshall the return value of an annotated method to XML, JSON, etc. “

From SpringSource : “Underneath the covers, Spring MVC delegates to a HttpMessageConverter to perform the serialization. In this case, Spring MVC invokes a MappingJacksonHttpMessageConverter built on the Jackson JSON processor. This implementation is enabled automatically when you use the mvc:annotation-driven configuration element with Jackson present in your classpath.”

http://jackson.codehaus.org/

http://wiki.fasterxml.com/JacksonInFiveMinutes

http://wiki.fasterxml.com/ObjectMapper

Jackson 2.0

http://www.mkyong.com/spring-mvc/spring-3-mvc-and-json-example/

escaping characters

I find that if you are using HTTP GET you will run into a lot of troubles with your url string with characters such as quotes, colons, and others. The way to get around that is to use HTTP POST. But, if you still want to use GET, the best way is to escape the characters.

“URL encoding is the practice of translating unprintable characters or characters with special meaning within URLs to a representation that is unambiguous and universally accepted by web browsers and servers”

Here are a few javascript solutions on how to encode url:

Javascriptwriter: You can convert any string to a URL-encoded string (suitable for transmission as a query string or, generally speaking, as part of a URL) using the JavaScript functions escape,encodeURI and encodeURIComponent.

From an ASP dot net blog  : Understand that in asp.net, virtual path in the URL with colon (:) is not allowed. To solve this problem, i replace the colon (:) with ASCII value for colon : (please check http://www.asciitable.com/)

If you are working with javascript,  it provides a number of functions that encode and decode special characters

MSDN JScript Reference - escape(), encodeURI(), encodeURIComponent()

Mozilla Developer Core Javascript Guide - escape(), encodeURI(), encodeURIComponent()

ASCII Table - http://www.asciitable.com/

W3C’s URIs, URLs, and URNs: Clarifications and Recommendations 1.0 - http://www.w3.org/TR/uri-clarification/

Iframe JQuery http://stackoverflow.com/questions/5044210/jquerys-attr-escaping-ampersands, if you are using jQuery 1.6 and up, you want to use .prop() rather than .attr():

One thing to consider:

//import org.apache.commons.lang.StringEscapeUtils;
StringEscapeUtils.escapeJavaScript(out, str)

Documented at :
http://commons.apache.org/lang/api-2.5/org/apache/commons/lang/StringEscapeUtils.html#escapeJavaScript%28java.lang.String%29

References:

http://www.freeformatter.com/javascript-escape.html#ad-output

 

Beginning iOS

This project i used a storyboard and I added a label and a button to it. I then took the button on the storyboard clicked the control button and held it down into the controller (h file).

This generated code:

@property (weak, nonatomic) IBOutlet UILabel *display;

I then on the storyboard located the button and clicked control button held it down and dragged the link into the controller. This created a method in the controller. I added a print to the method:

#import “RookieViewController.h”

@implementation RookieViewController

@synthesize display;

- (IBAction)buttonDo:(id)sender {

NSLog (@”test”);

}
….

I then modified the above method to change the label on a button click:

- (IBAction)buttonDo:(id)sender {

NSLog (@”test”);

UILabel *label1 = self.display;

NSString *label1text =label1.text;

NSLog(@”the label was %@” ,label1text);

[label1 setText:@"Luke"];

}

RookieAppDelegate.h: define your class as a UI Reponder

@interface RookieAppDelegate : UIResponder

@property (strong, nonatomic) UIWindow *window;

@end

MVC can you see

link : “With your first glance at Spring MVC 2.5 you have probably noticed that controller methods don’t have to return a ModelAndView anymore.”

link: Some basics in Spring MVC 3 with how to construct a project, additional concepts, form processing, and more in a tutorial series.

link : an overview of Spring MVC which ends with a link to a video on Spring MVC

http://www.captaindebug.com/search/label/MVC

http://www.javavm.net/spring-mvc-controllers/

http://krams915.blogspot.com/2010/12/spring-3-mvc-using-modelattribute-in.html

http://stackoverflow.com/questions/10401402/how-to-share-sessionattributes-between-controllers-in-spring-mvc

http://richardchesterwood.blogspot.com/2011/03/using-sessions-in-spring-mvc-including.html

http://stackoverflow.com/questions/5938951/set-session-variable-spring-mvc-3

http://vard-lokkur.blogspot.com/2011/01/spring-mvc-session-attributes-handling.html

https://github.com/SpringSource/spring-mvc-showcase

https://src.springframework.org/svn/spring-samples/

http://sleeplessinslc.blogspot.com/2012/07/spring-mvc-31-presentation-and-tutorial.html?m=1

 

Moving past scriplets

In the early days, while working in JSP files, the approach was to use scriplets to present server side data. Such as

Scriptlet <% code %>
- Code is inserted in service method.

JSP Expression <%= expression %>
- Expression is evaluated and placed in output.

Insert a help message into jsp file
<%
String s3 = new String();
s3 = s3 + “XYZ” ;
out.print(“<!– ” + s3 + ” –>”);
%>

Moreover, to generate javascript inside a JSP, you might do something like:

out.print(“<script>” + “alert” + “(‘” +situation.getValue() + “‘)” + “</script>”);

JSTL technology followed JSP (or even the Struts tag libraries) .

These objects allow for access to any variables that are held in the particular JSP scopes. Objects include:

• pageScope
• requestScope
• sessionScope
• applicationScope

${sessionScope.loginId} will return the session-scoped attribute named LoginId, or null if the attribute is not found.

<c:if test=”${someTest}”> Content</c:if>

<c:set var=”string1″value=”${item.value}” />

< c:out value=”${‘dmb: ‘} ${string1}” escapeXml=”false”/ >

Now, for javascript jstl integration:

var totRec = ‘<fmt:formatNumber type=”number” value=”${myCount}” />’;

 

ioS beginnings part 2

 

Delegate file (h) example:

#import <UIKit/UIKit.h>

@class ViewController;

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@property (strong, nonatomic) ViewController *viewController;

@end

Controller File (h) example:

@interface ViewController : UIViewController

 

Change the view controller example in your delegate:

@property (strong, nonatomic) UINavigationController*viewController;

Other choices:

UITableViewController

UIViewController

First Steps into ioS

I had never done any programming in native mobile development with the ioS operating system prior to now. The way i found the Xcode on the iMac was searching the files on computer until i found out about cmd-space and entered xcode in the search box. There was a pdf on the computer named about Xcode 4.2

“Xcode is the complete developer toolset for creating applications for Mac, iPhone, and iPad”

In Xcode, you would start by doing File -> new project  and then single view application and click next where you enter a product name, a company identifier,  device such as iphone or ipad (dont click storyboarding, but click automatic reference counting), and then indicate where project goes and then you will click create.

After XCode loads the new project, you can click run to launch the simulator (or cmd-r).

You will see files AppDelegate.h AppDelegate.m ViewController.h ViewController.m ViewController.xib

Click on the sidebar the AppDelegate.h then on right at top click the tuxedu icon which will display now the AppDelegate.m beside the other file.

@interface AppDelegate : UIResponder <UIApplicationDelegate>

In the editor, if you click the command button the identifiers become URLs

On right side,

[ standard ] [ assistant] [ version ]            [Navigator] [Debug] [Utilities]                                  [open]
editor                                                                 view                                                         organizer

Utilities: toggle panel on right side, Debug : toggle panel on bottom, Navigator: toggle panel on left

bottom utilities:

• file template library
• code snippet library
• Objects
• Media library

iOS programming Field Of Dreams

I guess you could say 2012 has been my Field Of Dreams . In this year, I expanded my playing field of technical knowledge learning several new computer programming languages and tool sets.

I started year off learning Base SAS Programming with SAS 9.3. I also got exposed to SAS Enterprise Guide tool. My training in data continued with Data Flux by SAS. I thought about continuing my growth in the data with possibly getting certified.But, at the end of the day, what really interested me was creating GUIs.

In my next project, I was fortunate enough to enhance my front end development knowledge base by working with Sencha EXTJS4 javascript library. I really got to learn the in and outs of this library.

Next, I was part of another front end technology project with JQuery and KnockoutJS  technologies. Knockout uses the MVVC pattern which I had used before so it really fit well with me.

I have played around with BootstrapJS and even have used all different web service tools like Apache CXF and Spring-WS

This entry begins my exploration into ioS programming.

Spring WS template

So what is JAXWS: “Java API For XML Web Services can be thought of as a
Java Programming API to create Web Services. JAXWS was introduced in JAVA SE 5 and
uses Annotations in the creation of end points and service clients. JAXWS 2.0 replaced or
encompassed the JAX-RPC API. For more details on the same look at this developer works article.
JAXWS uses JAXB 2.0 for data binding“
Generating proxy classes
JAX-WS provides a tool called wsimport which takes the WSDL of a web service and generates proxy classes for the WSDL’s service and port definitions. These can then be used to access the web service endpoint.

With the help of the JAX-WS Maven plugin the wsimport tool can easily be used in Maven based projects.

he WSDL to be processed can either be fetched directly from the actual web service endpoint or from a local directory (by specifying the wsdlDirectory property as shown in the example). I recommend to stick with the latter approach. That way your project can be built even if the service to be accessed is not available from your development environment.

During the “generate-sources” build lifecycle phase the plugin will generate

• proxy classes for all service and port type declarations contained within the WSDL files in the specified directory
• JAXB binding classes for all schema types used in the operations of that services

http://krams915.blogspot.com/2010/12/spring-ws-mvc-implementing-client.html

• What is Spring Web Services (WS)   [Source: Spring WS Reference 2.0]
• What is WebServiceTemplate  [Source: Spring WS Reference Chapter 6]
• What is wsimport? [Source: Java™ API for XML Web Services (JAX-WS) 2.0 ]

• JAXB Marshalling XML using O/X Mappers [Source :Spring WS Chapter 8 ]
• create project with maven archtype and define ws template
• maven plugin wsimport
• spring ws with jaxb plugin
• http://jax-ws-commons.java.net/jaxws-maven-plugin/
• http://j2eeroad.wordpress.com/2011/06/15/developing-web-services-using-jax-ws-spring-and-maven-3/
• http://feima2011.wordpress.com/2011/11/27/web-service-programming-with-spring-ws-jaxb2-and-jax-ws/
• http://ankeetmaini.wordpress.com/2011/10/24/spring-web-services-2-made-easy
• http://rphgoossens.wordpress.com/2011/02/20/developing-a-contract-first-jax-ws-webservice/
• http://www.java-tutorial.ch/web-services/web-services-java-tutorial

Soap Client Homemade implementation

The Soap request:

<?xml version=”1.0″ encoding=”utf-8″?>

<soap:Envelope xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221; xmlns:xsd=”http://www.w3.org/2001/XMLSchema&#8221; xmlns:soap=”http://schemas.xmlsoap.org/soap/envelope/”&gt;
<soap:Body>
<GetInfoByZIP xmlns=”http://www.webserviceX.NET”&gt;
<USZip>27615</USZip>
</GetInfoByZIP>
</soap:Body>
</soap:Envelope>

The java program:

try {
// Set up the Web Service URL and SOAP Message file name
// http://www.webservicex.net/uszip.asmx
// src/exercise1/test.xml

String WebServiceUrl = args[0];
String SOAPFile = args[1];

//Create the connection where we’re going to send the file.
URL url = new URL(WebServiceUrl);
URLConnection connection = url.openConnection();
HttpURLConnection httpConn = (HttpURLConnection) connection;

//Get the SOAP document ready to send

File f1 = new File(SOAPFile);
String path = f1.getAbsolutePath();
FileInputStream FileIn = new FileInputStream(path);
ByteArrayOutputStream ByteOut = new ByteArrayOutputStream();
byte[] buffer = new byte[256];
while (true) {
int bytesRead = FileIn.read(buffer);
if (bytesRead == -1)
break;
ByteOut.write(buffer, 0, bytesRead);
}

byte[] b = ByteOut.toByteArray();
FileIn.close();

//Set the HTTP parameters.
httpConn.setRequestProperty(“Content-Length”, String.valueOf(b.length));
httpConn.setRequestProperty(“Content-Type”, “text/xml; charset=utf-8″);
httpConn.setRequestProperty(
“Accept”,
“application/soap+xml, application/dime, multipart/related, text/*”);
httpConn.setRequestProperty(“User-Agent”, “WSAD”);
httpConn.setRequestProperty(“Host”, “localhost”);
httpConn.setRequestProperty(“Cache-Control”, “no-chache”);
httpConn.setRequestProperty(“Pragma”, “no-chache”);
httpConn.setRequestProperty(“SOAPAction”, “http://www.webserviceX.NET/GetInfoByZIP&#8221;);
httpConn.setRequestMethod(“POST”);
httpConn.setDoOutput(true);
httpConn.setDoInput(true);

//Send XML File
OutputStream out = httpConn.getOutputStream();
out.write(b);
out.close();

//Get the response
InputStreamReader isr = new InputStreamReader(httpConn.getInputStream());
BufferedReader in = new BufferedReader(isr);

String inputLine;
while ((inputLine = in.readLine()) != null)
System.out.println(inputLine);
in.close();

} catch (Exception e) {
System.out.println(“FaultString: ” + e.toString());
return;
} //end exception
}

Response:

<?xml version=”1.0″ encoding=”utf-8″?><soap:Envelope xmlns:soap=”http://schemas.xmlsoap.org/soap/envelope/&#8221; xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221; xmlns:xsd=”http://www.w3.org/2001/XMLSchema”><soap:Body><GetInfoByZIPResponse xmlns=”http://www.webserviceX.NET”><GetInfoByZIPResult><NewDataSet xmlns=”"><Table><CITY>Raleigh</CITY><STATE>NC</STATE><ZIP>27615</ZIP><AREA_CODE>919</AREA_CODE><TIME_ZONE>E</TIME_ZONE></Table></NewDataSet></GetInfoByZIPResult></GetInfoByZIPResponse></soap:Body></soap:Envelope>

Soap Web Services Begin To End Part 3

Using the WSDL in Part 2, right click on it in the sidebar:

WebService -> Generate Java Bean Skeleton

Again move the notch up to  Test Service  and click Next until it completes

Then, you will see in src folder all the generated files.

This completes the Producer  side of the web service.

Now, to generate a client side, you generate a new dynamic project (i.e. Call it MyClientProject).  After the dynamic project is complete, you can go into the Producer project, and get the wsdl and place it in the new Client project. Right click on the WSDL, click WebService -> Generate Client.

 

http://localhost:8080/MyClientProject/sampleCostServiceProxy/TestClient.jsp

 

Soap Web Services Begin To End Part 2

Create a Dynamic Web project in eclipse. In my case I called it NumbersService.

Create a new class :
learn.webservices.numbers.ElectricCompanyService :

public class ElectricCompanyService {

public int multiply(int number1, int number2)
{
return number1 * number2;
}

public int add(int number1, int number2)
{
return number1 – number2;
}

}

Right click in the siderbar on ElectricCompanyService

WebService-> Create Web Service

On the screen that comes up, move the selector up one notch where it shows Test Service

In Web Content you can find a folder named WSDL with the WSDL file

<?xml version=”1.0″ encoding=”UTF-8″?>
<wsdl:definitions targetNamespace=”http://numbers.webservices.learn&#8221; xmlns:apachesoap=”http://xml.apache.org/xml-soap&#8221; xmlns:impl=”http://numbers.webservices.learn&#8221; xmlns:intf=”http://numbers.webservices.learn&#8221; xmlns:wsdl=”http://schemas.xmlsoap.org/wsdl/&#8221; xmlns:wsdlsoap=”http://schemas.xmlsoap.org/wsdl/soap/&#8221; xmlns:xsd=”http://www.w3.org/2001/XMLSchema”&gt;
<!–WSDL created by Apache Axis version: 1.4
Built on Apr 22, 2006 (06:55:48 PDT)–>
<wsdl:types>
<schema elementFormDefault=”qualified” targetNamespace=”http://numbers.webservices.learn&#8221; xmlns=”http://www.w3.org/2001/XMLSchema”&gt;
<element name=”add”>
<complexType>
<sequence>
<element name=”number1″ type=”xsd:int”/>
<element name=”number2″ type=”xsd:int”/>
</sequence>
</complexType>
</element>
<element name=”addResponse”>
<complexType>
<sequence>
<element name=”addReturn” type=”xsd:int”/>
</sequence>
</complexType>
</element>
<element name=”multiply”>
<complexType>
<sequence>
<element name=”number1″ type=”xsd:int”/>
<element name=”number2″ type=”xsd:int”/>
</sequence>
</complexType>
</element>
<element name=”multiplyResponse”>
<complexType>
<sequence>
<element name=”multiplyReturn” type=”xsd:int”/>
</sequence>
</complexType>
</element>
</schema>
</wsdl:types>

<wsdl:message name=”multiplyResponse”>

<wsdl:part element=”impl:multiplyResponse” name=”parameters”>

</wsdl:part>

</wsdl:message>

<wsdl:message name=”multiplyRequest”>

<wsdl:part element=”impl:multiply” name=”parameters”>

</wsdl:part>

</wsdl:message>

<wsdl:message name=”addResponse”>

<wsdl:part element=”impl:addResponse” name=”parameters”>

</wsdl:part>

</wsdl:message>

<wsdl:message name=”addRequest”>

<wsdl:part element=”impl:add” name=”parameters”>

</wsdl:part>

</wsdl:message>

<wsdl:portType name=”ElectricCompanyService”>

<wsdl:operation name=”add”>

<wsdl:input message=”impl:addRequest” name=”addRequest”>

</wsdl:input>

<wsdl:output message=”impl:addResponse” name=”addResponse”>

</wsdl:output>

</wsdl:operation>

<wsdl:operation name=”multiply”>

<wsdl:input message=”impl:multiplyRequest” name=”multiplyRequest”>

</wsdl:input>

<wsdl:output message=”impl:multiplyResponse” name=”multiplyResponse”>

</wsdl:output>

</wsdl:operation>

</wsdl:portType>

<wsdl:binding name=”ElectricCompanyServiceSoapBinding” type=”impl:ElectricCompanyService”>

<wsdlsoap:binding style=”document” transport=”http://schemas.xmlsoap.org/soap/http”/&gt;

<wsdl:operation name=”add”>

<wsdlsoap:operation soapAction=”"/>

<wsdl:input name=”addRequest”>

<wsdlsoap:body use=”literal”/>

</wsdl:input>

<wsdl:output name=”addResponse”>

<wsdlsoap:body use=”literal”/>

</wsdl:output>

</wsdl:operation>

<wsdl:operation name=”multiply”>

<wsdlsoap:operation soapAction=”"/>

<wsdl:input name=”multiplyRequest”>

<wsdlsoap:body use=”literal”/>

</wsdl:input>

<wsdl:output name=”multiplyResponse”>

<wsdlsoap:body use=”literal”/>

</wsdl:output>

</wsdl:operation>

</wsdl:binding>

<wsdl:service name=”ElectricCompanyServiceService”>

<wsdl:port binding=”impl:ElectricCompanyServiceSoapBinding” name=”ElectricCompanyService”>

<wsdlsoap:address location=”http://localhost:8080/NumbersService/services/ElectricCompanyService”/&gt;

</wsdl:port>

</wsdl:service>

</wsdl:definitions>

:

Soap Web Services Begin To End Part I

Step 1 : Open Web Perspective -> Web Services Explorer

Launch Web services explorer:


Select WSDL page (next to star on right):

Enter the SDL URL : http://www.webservicex.net/stockquote.asmx?WSDL

Choose Soap enter stock quote and Go!

<soapenv:Envelope xmlns:soapenv=”http://schemas.xmlsoap.org/soap/envelope/” xmlns:q0=”http://www.webserviceX.NET/” xmlns:xsd=”http://www.w3.org/2001/XMLSchema” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance“>

- <soapenv:Body>

- <q0:GetQuote>

  <q0:symbol>IBM</q0:symbol>

  </q0:GetQuote>

  </soapenv:Body>

  </soapenv:Envelope>

- <soap:Envelope xmlns:soap=”http://schemas.xmlsoap.org/soap/envelope/” xmlns:xsd=”http://www.w3.org/2001/XMLSchema” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance“>

- <soap:Body>

- <GetQuoteResponse xmlns=”http://www.webserviceX.NET/“>

  <GetQuoteResult><StockQuotes><Stock><Symbol>IBM</Symbol><Last>193.36</Last><Date>10/19/2012</Date><Time>4:03pm</Time><Change>-1.60</Change><Open>195.12</Open><High>196.08</High><Low>193.18</Low><Volume>6621563</Volume><MktCap>219.9B</MktCap><PreviousClose>194.96</PreviousClose><PercentageChange>-0.82%</PercentageChange><AnnRange>177.06 – 211.79</AnnRange><Earns>13.913</Earns><P-E>14.01</P-E><Name>International Bus</Name></Stock></StockQuotes></GetQuoteResult>

  </GetQuoteResponse>

  </soap:Body>

  </soap:Envelope>

Here is a WSDL for Mortgage  payments calculation:

http://www.webservicex.net/mortgage.asmx?WSDL

Spring Documento

In web.xml with Spring MVC (Convenient ApplicationContext instantiation for web applications):

• org.springframework.web.context.ContextLoaderListener

ContextLoader called  by ContextLoaderListener

[ref] : “ContextLoaderListener creates a root web-application-context for the web-application and puts it in the ServletContext. This context can be used to load and unload the spring-managed beans ir-respective of what technology is being used in the controller layer(Struts or Spring MVC) “

• org.springframework.web.servlet.DispatcherServlet

[ref] : “DispatcherServlet creates its own WebApplicationContext and the handlers/controllers/view-resolvers are managed by this contextContextLoader”

“When ContextLoaderListener is used in tandem with DispatcherServlet, a root web-application-context is created first as said earlier and a child-context is also created by DispatcherSerlvet and is attached to the root application-context.”

http://static.springsource.org/spring/docs/3.0.x/reference/index.html

org.springframework.web.filter.DelegatingFilterProxy

[ref] Spring’s DelegatingFilterProxy provides the link between web.xml and the application context. .. “it finds a bean (“target bean” or “delegate”) in your Spring application context, an invoke it. How is it possible? Because this bean implements javax.servlet.Filter, its doFilter method is called.”

• org.springframework.context.support.ReloadableResourceBundleMessageSource

[link ] :  The feature I’m talking about is the ability to reload (and detect changes in) i18n property files on-the-fly.

org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter

This interface that maps handlers based on HTTP paths expressed through the RequestMapping annotation at the type or method level.

 

Now Learning Soap Web Services

Soap is a lightweight protocol for exchanging structured information in a decentralized, distributed environment. It is an XML based protocol that consists of three parts:

• an envelope that defines a framework for describing what is in a message and how to process it
• a set of encoding rules for expressing instances of application-defined datatypes
• a convention for representing remote procedure calls and responses

Soap Request, Soap Response

RPC Style, Document Style Soap

<soapenv:Envelope> <soapenv:Body>

Apache Axis is an implementation of the SOAP by Apache

WSDL document describes the interface of a web service in a language and protocol independent way:

• service : Defines service
• binding : possible ways to invoke service
• port: defined endpoint
• porttype: particular interface
• operation: defines method
• message :
• types: datatypes with schema

WSDL………………………………………………………………………..
http://www.w3.org/2001/03/14-annotated-WSDL-examples

 

Examples;

http://javapapers.com/web-service/soap-web-service-introduction/

http://docs.oracle.com/cd/E17802_01/webservices/webservices/docs/2.0/tutorial/doc/

http://rantincsharp.wordpress.com/2008/10/14/a-simple-soap-web-service-example-in-eclipse-ganymede/

http://blog.sencide.com/2011/06/create-web-service-using-apache-axis2.html

Closing out Knockoutjs Adventure

I have been involved with a knockout project the past few months. I learned alot over the course of the coding journey. The Knockout simplifies your code and works well in tandem with Jquery. Along the way, I got to use JQuery Tabs, KnockoutJS templates, Knockout observable arrays, and much more

Here are some of the great sites  and links I found along the way.

• http://techomaha.com/2012/09/knockoutjs-barcamp-omaha/
• http://www.syncfusion.com/Content/downloads/ebook/Knockoutjs_Succinctly.pdf
• knockout example of item select from a pulldown
• knockout group forum
• knockout dirty model example
• knockout subscribe vs event example
• Knockout principles to know
• knockout details for observable arrays
• Knockout clear selection dropdown
• knockout selection items in json
• knockout editable grid
• knockoutjs event binding documentation
• savings goal full blown knockout example
• knockout options for radio input
• knockout search/list example
• knockout clearing observable array
• Knocout passing parameters with bind
• knockout checkbox example with json
• Knockout writeup on memory and javscript techniques
• Javscript shootout podcast knockout
• Javscript libraries compared
• knockout tabs
• knockout tabs 2
• knockout tabs 3
• knockout tabs
• knockout impressive example components
• knockout plain tabs
• knockout removeable tabs
• knockout templates
• knockout template article
• ToDo Knockout example
• knockoutjs custom buttons 
• knockout questionire example
• knockout performance gotchas

CSS Style

The format of a selector is as follows

Selector {property : value}

Type selector – targets selector by element name, can have comma and wild card *

Contextual Selectors – apply style to properties based on context or relation to another element

• Descendant selector:  descendants of another element, list separated by space starting with the higher level element, can have commas separating multiple entries, and can be specified several levels deep
• Child selector: like a descendant but specified by a specific parent of an element, indicated as child with greater than sign between elements >
• Adjacent selector: elements that comes directly after a certain  element with same parent, indicated with plus sign +

Class and Id selectors: specified in regard to specific elements which are a class or a specific ids specified by user.

• For class you define it in terms of class in regards to a specific type selector with a dot  separator  .
• To specify class selector to all elements within a class you can leave out the type selector
• id selector target a single element and work like class selector except indicated with a #

Attribute selectors – targets specific attribute names or values

• Simple attribute: specified for an attribute for an element, indicated as element[attribute]
• Exact attribute value : specified as element[attribute="myvalue"]
• Partial attribute value: doesnt match whole word but search value within attribute value , specified as element[attribute~="myvalue"]
• hyphen separated value : used for case where you look for value of ‘myvalue’ or starting with ‘myvalue-’ , indictaed with |=

Pseudeoclass selector  :  targets a group of elements such as an anchor.  has a colon : after the anchor followed with the attribute kind (i.e. link, or name)

• there are others supported other than the anchor tag . i.e. :first-chld, :first-line, :first-letter,:before, :after

How you reference style sheets:

<link rel=style sheet href=file.css type=text/CSS />

or

@import url();

Document structure and inheritance
- parent child relationships
- sibling relationships
- descendants
Inheritance – styles passed down to desndants
Overriding styles by nodes higher in hierarchy
Can get presentation rules from several sources and conflicts
Passed down until overridden by command with more weight
Resolve rules from competing style sheets
When user agent (ie browser) encounters element looks for all style rules that may apply
Sorts out this out based on
Style sheet origin
Least weight to greatest
1 User agent style sheet 2 reader style sheet 3 authorsyle sheets 4 !Important marked
External file sheets further down document greater precedence
Imported styles sheets override linked ones
Embedded styles sheets override external ones
Inline styles override other references

Selector
More specific the selector the more priority it gets
Least to most priority for selectors follow
Individual element to pseudo element selector
Contextual selectors
Class selectors
Id selectors
rule order
Last one wins

Display roles
Block level elements – line breaks before and after it  and fills in width of the parent that contains it
Paragraph
Headings
Lists
Divs

Inline – no line breaks
Emphasized text
Anchors

None – Wont display

List-item
Run-in

Box model : Element box around it
Border
Margin
Background

Inner edge
Border
Margin
Outer edge

Unit measures
Pixel
Pts
Pc
Em
Ex
In
Mm
Cm

Color value
% values

 

Spring Web Services

Contract First Web Services tutorial: When using contract-first, you start with the WSDL contract, and use Java to implement said contract.  Spring-WS only supports the contract-first development style.

3.5. Creating the project

src/main/webapp/WEB-INF/

spring-ws-servlet.html

<?xml version=”1.0″ encoding=”UTF-8″?>
<beans xmlns=”http://www.springframework.org/schema/beans&#8221;
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221;
xmlns:context=”http://www.springframework.org/schema/context&#8221;
xmlns:sws=”http://www.springframework.org/schema/web-services&#8221;
xsi:schemaLocation=”http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/web-services http://www.springframework.org/schema/web-services/web-services-2.0.xsd”&gt;

<sws:annotation-driven/>
</beans>

a) add this line to above file <context:component-scan base-package=”com.mycompany.hr”/>

b) Create java package com.mycompany.hr.ws

web.xml:

<?xml version=”1.0″ encoding=”UTF-8″?>
<web-app xmlns=”http://java.sun.com/xml/ns/j2ee&#8221; xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221;
xsi:schemaLocation=”http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd&#8221;
version=”2.4″>
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>spring-ws</servlet-name>
<servlet-class>org.springframework.ws.transport.http.MessageDispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>spring-ws</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
</web-app>

Spring-WS, you will implement Endpoints to handle incoming XML messages. An endpoint is typically created by annotating a class with the @Endpoint annotation.

you will create one or more methods that handle incoming request.

3.6.1. Handling the XML Message

use JDom to handle the XML message. We are also using XPath, because it allows us to select particular parts of the XML JDOM tree,

New class HolidayEndpoint

package com.mycompany.hr.ws;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ws.server.endpoint.annotation.Endpoint;
import org.springframework.ws.server.endpoint.annotation.PayloadRoot;
import org.springframework.ws.server.endpoint.annotation.RequestPayload;
import com.mycompany.hr.service.HumanResourceService;
import org.jdom.Element;
import org.jdom.JDOMException;
import org.jdom.Namespace;
import org.jdom.xpath.XPath;

@Endpoint                                                                                
public class HolidayEndpoint {

private static final String NAMESPACE_URI = “http://mycompany.com/hr/schemas&#8221;;

//The HolidayEndpoint requires the HumanResourceService business service to operate, so we inject the dependency via the constructor and annotate it with @Autowired

@Autowired
public HolidayEndpoint(HumanResourceService humanResourceService)
throws JDOMException {
this.humanResourceService = humanResourceService;
Namespace namespace = Namespace.getNamespace(“hr”, NAMESPACE_URI);
startDateExpression = XPath.newInstance(“//hr:StartDate”);
startDateExpression.addNamespace(namespace);
endDateExpression = XPath.newInstance(“//hr:EndDate”);
endDateExpression.addNamespace(namespace);
nameExpression = XPath.newInstance(“concat(//hr:FirstName,’ ‘,//hr:LastName)”);
nameExpression.addNamespace(namespace);
}

//The @PayloadRoot annotation tells Spring-WS that the handleHolidayRequest method is suitable for handling XML messages.
//In this case, it can handle XML elements that have the HolidayRequest local part and the http://mycompany.com/hr/schemas namespace
//gets passed with the <HolidayRequest/> element from the incoming XML message.
// The @RequestPayload annotation indicates that the holidayRequest parameter should be mapped to the payload of the request message

@PayloadRoot(namespace = NAMESPACE_URI, localPart = “HolidayRequest”)         
public void handleHolidayRequest(@RequestPayload Element holidayRequest)
throws Exception {
SimpleDateFormat dateFormat = new SimpleDateFormat(“yyyy-MM-dd”);
Date startDate = dateFormat.parse(startDateExpression.valueOf(holidayRequest));
Date endDate = dateFormat.parse(endDateExpression.valueOf(holidayRequest));
String name = nameExpression.valueOf(holidayRequest);
humanResourceService.bookHoliday(startDate, endDate, name);
}

We skipped the Schema and WSDL, but they follow here (Note that Spring WS will create the WSDL, but here it is for getting to know it):

Schema………………………………………………………………………………………..
<xs:schema xmlns:xs=”http://www.w3.org/2001/XMLSchema&#8221;
xmlns:hr=”http://mycompany.com/hr/schemas&#8221;
elementFormDefault=”qualified”
targetNamespace=”http://mycompany.com/hr/schemas”&gt;
<xs:element name=”HolidayRequest”>
<xs:complexType>
<xs:all>
<xs:element name=”Holiday” type=”hr:HolidayType”/>
<xs:element name=”Employee” type=”hr:EmployeeType”/>
</xs:all>
</xs:complexType>
</xs:element>
<xs:complexType name=”HolidayType”>
<xs:sequence>
<xs:element name=”StartDate” type=”xs:date”/>
<xs:element name=”EndDate” type=”xs:date”/>
</xs:sequence>
</xs:complexType>
<xs:complexType name=”EmployeeType”>
<xs:sequence>
<xs:element name=”Number” type=”xs:integer”/>
<xs:element name=”FirstName” type=”xs:string”/>
<xs:element name=”LastName” type=”xs:string”/>
</xs:sequence>
</xs:complexType>
</xs:schema>

Note: Save this schema as hr.xsd in WEB-INF

WSDL………………………………………………………………………..
<wsdl:definitions xmlns:wsdl=”http://schemas.xmlsoap.org/wsdl/&#8221;
xmlns:soap=”http://schemas.xmlsoap.org/wsdl/soap/&#8221;
xmlns:schema=”http://mycompany.com/hr/schemas&#8221;
xmlns:tns=”http://mycompany.com/hr/definitions&#8221;
targetNamespace=”http://mycompany.com/hr/definitions”&gt;
<!–SCHEMA REFERENCE–>
<wsdl:types>
<xsd:schema xmlns:xsd=”http://www.w3.org/2001/XMLSchema”&gt;
<xsd:import namespace=”http://mycompany.com/hr/schemas&#8221;
schemaLocation=”hr.xsd”/>
</xsd:schema>
</wsdl:types>

<!–MESSAGE HolidayRequest–>
<wsdl:message name=”HolidayRequest”>
<wsdl:part element=”schema:HolidayRequest” name=”HolidayRequest”/>
</wsdl:message>
<!–MESSAGE Holiday Request to port type Human Resource as operation–>
<wsdl:portType name=”HumanResource”>
<wsdl:operation name=”Holiday”>
<wsdl:input message=”tns:HolidayRequest” name=”HolidayRequest”/>
                  </wsdl:operation>

       </wsdl:portType>

<!-Binding which tells the client how to invoke the operations just defined and service which tells where to invoke it->

<wsdl:binding name=”HumanResourceBinding” type=”tns:HumanResource”>
<soap:binding style=”document”
transport=”http://schemas.xmlsoap.org/soap/http”/&gt;
<wsdl:operation name=”Holiday”>
<soap:operation soapAction=”http://mycompany.com/RequestHoliday”/&gt;
<wsdl:input name=”HolidayRequest”>
<soap:body use=”literal”/>
</wsdl:input>
</wsdl:operation>
</wsdl:binding>
<wsdl:service name=”HumanResourceService”>
<wsdl:port binding=”tns:HumanResourceBinding” name=”HumanResourcePort”>
<soap:address location=”http://localhost:8080/holidayService/”/&gt;
</wsdl:port>
</wsdl:service>
</wsdl:definitions>

To generate the WSDL by spring ws add the following to spring-ws-servlet.html:

<sws:dynamic-wsdl id=”holiday”
portTypeName=”HumanResource”
locationUri=”/holidayService/”
targetNamespace=”http://mycompany.com/hr/definitions”&gt;
<sws:xsd location=”/WEB-INF/hr.xsd”/>
</sws:dynamic-wsdl>

The web.xml file is modified as follows:

<servlet>
<servlet-name>spring-ws</servlet-name>
<servlet-class>org.springframework.ws.transport.http.MessageDispatcherServlet</servlet-class>
<init-param>
<param-name>transformWsdlLocations</param-name>
  <param-value>true</param-value>
</init-param>
</servlet>

http://localhost:8080/holidayService/holiday.wsdl

http://static.springsource.org/spring-ws/sites/2.0/faq.html

http://www.springbyexample.org/examples/simple-spring-web-services.html

Spring WS+JAXB

Reference to JAXB Plugin

http://aigloss.blogspot.com/2011/07/creating-spring-web-services-with.html?m=1

http://krams915.blogspot.com/2010/12/spring-ws-2-and-spring-3-mvc.html?m=1

http://javaclue.blogspot.com/2012/05/soap-web-service-using-spring-ws-20.html?m=1

http://www.disasterarea.co.uk/blog/?tag=spring-ws

Twitter bs (Bootstrap)

what-is-bootstrap ”is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3.”

<script src=”js/bootstrap-transition.js”></script>
<script src=”js/bootstrap-alert.js”></script>
<script src=”js/bootstrap-modal.js”></script>
<script src=”js/bootstrap-dropdown.js”></script>
<script src=”js/bootstrap-scrollspy.js”></script>
<script src=”js/bootstrap-tab.js”></script>
<script src=”js/bootstrap-tooltip.js”></script>
<script src=”js/bootstrap-popover.js”></script>
<script src=”js/bootstrap-button.js”></script>
<script src=”js/bootstrap-collapse.js”></script>
<script src=”js/bootstrap-carousel.js”></script>
<script src=”js/bootstrap-typeahead.js”></script>

or

<script src=”js/bootstrap.min.js”></script>

Style code:

< link href=”css/bootstrap.css” rel=”stylesheet” >

< link href=”css/bootstrap-responsive.css” rel=”stylesheet” >

 

bootstrap and less css ”At its core, Bootstrap is just CSS, but it’s built with Less, a flexible pre-processor that offers much more power and flexibility than regular CSS. With Less, we gain a range of features like nested declarations, variables, mixins, operations, and color functions.”

http://tuts.wtfdiary.com/2012/07/bootstrap-tutorial-to-design-blog.html  : “top navigation bar, DropDown Menu in the navigation bar, Search Box too in the navigation bar

http://www.mrgeek.me/technology/tutorials/web-design/getting-started-with-bootstrap-part-1-of-series/ : “ the grid system allows you to quickly create a design by calling the required classes, which are pre-written for you in the stylesheet provided with Bootstrap. This doesn’t mean you don’t have to write a line of CSS ever again, but it certainly means you won’t have to write much of the CSS as far as design the skeleton of the web page is concerned”

http://roy-barber.co.uk/bootstrap/

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

More references:

• UIFrameworks
• twitter-bootstrap-lessjs
• What-are-good-alternatives-to-Twitter-Bootstrap
• Using-the-Twitter-Bootstrap-Framework-to-build-a-responsive-Joomla-Template-from-Scratch
• sample-app-with-backbone-js-and-twitter-bootstrap/

Spring MVC Refresher II

web.xml

browsers currently only support GET and POST, a common technique – is to use a normal POST with an additional hidden form field  (_method) to pass the “real” HTTP method.

< filter >
< filter-name >httpMethodFilter </  filter-name >
< filter-class >org.springframework.web.filter.HiddenHttpMethodFilter < /  filter-class >
< / filter >

accounts-servlet-config.xml:

< context:component-scan base-package=”accounts.web” />

< mvc:annotation-driven/ >

An interceptor which keeps a hibernate session open to allow lazy loading of backing object
< mvc:interceptors >
< bean class=”org.springframework.orm.hibernate3.support.OpenSessionInViewInterceptor” >
< property name=”sessionFactory” ref=”sessionFactory”/ >
< /bean >
< /mvc:interceptors >
< bean class=”org.springframework.web.servlet.view.InternalResourceViewResolver” >
< property name=”prefix” value=”/WEB-INF/views/”/ >
< property name=”suffix” value=”.jsp”/ >
< /bean >

When you use a ContentNegotiatingViewResolver your web controllers return ModelAndViews or view names and the ContentNegotiatingViewResolver will, based on various criteria, choose the right data representation strategy, Here for JSON Use Jackson Java JSON-processor

< bean class=”org.springframework.web.servlet.view.ContentNegotiatingViewResolver” >
< property name=”mediaTypes” >
< map >
< entry key=”json” value=”application/json”/ >
< /map >
< /property >
< property name=”defaultViews” >
< bean class=”org.springframework.web.servlet.view.json.MappingJacksonJsonView”/ >
< /property >
< /bean >

Note: if had not have used component scanning would have had to wire up the controller

A Spring MVC @Controller

imports:

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

package accounts.web;

@Controller
public class AccountController {

private AccountManager accountManager;

@ Autowired
public AccountController(AccountManager accountManager) {
this.accountManager = accountManager;
}

The method does not explicitly select a view name because the default
view name selected by Spring MVC matches to the incoming URL accountDetails.jsp
@ param id the id of the account
@ param model the “implicit” model created by Spring MVC

@ RequestMapping(value=”/accounts/{accountId}”,  method=RequestMethod.GET)
public void accountDetails(@PathVariable(“accountId”) int id, Model model) {
model.addAttribute(“account”, accountManager.getAccount(id)); return “accountDetails”;
}

The method does not explicitly select a view name because the default
view name selected by Spring MVC matches to the incoming URL accountSummary.jsp

@ param model the “implicit” model created by Spring MVC

@ RequestMapping(value=”/accounts”, method=RequestMethod.GET)
public void accountSummary(Model model) {
model.addAttribute(“accounts”, accountManager.getAllAccounts());return “accountSummary”;
}

index.html:

< a href=”app/accounts” >View Account Summary< /a >

http://localhost:8080/ss/app/accounts

Then on the listing page you click on one of the entries to get details

http://localhost:8080/ss/app/accounts/6

This uses the Path Variable

@ RequestMapping(value=”/accounts/{accountId}”,  method=RequestMethod.GET)
public void accountDetails(@PathVariable(“accountId”) int id, Model model) {

Spring MVC refresher

web.xml:

application context Beans makeup the configuration of the root web application context
< context-param >
< param-name >contextConfigLocation< /param-name >
< param-value >/WEB-INF/accounts-application-config.xml< /param-value >
< /context-param >

Bootstraps the root web application context before servlet initialization
< listener >
< listener-class >org.springframework.web.context.ContextLoaderListener< /listener-class >
< /listener >

Deploys the dispatcher servlet along with its configuration
< servlet >
< servlet-name >accounts< /servlet-name >
< servlet-class >org.springframework.web.servlet.DispatcherServlet< /servlet-class >
< init-param >
< param-name >contextConfigLocation< /param-name >
< param-value >/WEB-INF/accounts-servlet-config.xml< /param-value >
< /init-param >
< /servlet >
accounts-servlet-config.xml:

< context:component-scan base-package=”accounts.web” />

< mvc:annotation-driven/ >

An interceptor which keeps a hibernate session open to allow lazy loading of backing object
< mvc:interceptors >
< bean class=”org.springframework.orm.hibernate3.support.OpenSessionInViewInterceptor” >
< property name=”sessionFactory” ref=”sessionFactory”/ >
< /bean >
< /mvc:interceptors >
< bean class=”org.springframework.web.servlet.view.InternalResourceViewResolver” >
< property name=”prefix” value=”/WEB-INF/views/”/ >
< property name=”suffix” value=”.jsp”/ >
< /bean >

Note: if had not have used component scanning would have had to wire up the controller

A Spring MVC @Controller

imports:
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

package accounts.web;

@Controller
public class AccountController {

private AccountManager accountManager;

@ Autowired
public AccountController(AccountManager accountManager) {
this.accountManager = accountManager;
}

The method does not explicitly select a view name because the default
view name selected by Spring MVC matches to the incoming URL accountDetails.jsp
@ param id the id of the account
@ param model the “implicit” model created by Spring MVC

@ RequestMapping(“/accountDetails”)
public void accountDetails(@RequestParam(“entityId”) int id, Model model) {
model.addAttribute(“account”, accountManager.getAccount(id));
}

The method does not explicitly select a view name because the default
view name selected by Spring MVC matches to the incoming URL accountSummary.jsp

@ param model the “implicit” model created by Spring MVC

@ RequestMapping(“/accountSummary”)
public void accountSummary(Model model) {
model.addAttribute(“accounts”, accountManager.getAllAccounts());
}
}

index.html:

< a href=”accounts/accountSummary” >View Account Summary< /a >

http://localhost:8080/ss/accounts/accountSummary

Click on one of the listing entries

http://localhost:8080/ss/accounts/accountDetails?entityId=7

Again, this uses RequestParamin the nethod signature

public void accountDetails(@RequestParam(“entityId”) int id, Model model)

iPhone5 w iOS6 launch

Wow factor? 4 ” screen, 4G LTE, new chargers needed, sleeker, no wireless charging, no NFC Wallet, A6. Sold 20x faster

Meanwhile, that new dock connector was so thoroughly leaked that it’s unlikely to put the wind up the burgeoning “appcessories” industry (yes, a word used seriously by real companies).

The Dev Center – https://developer.apple.com/technologies/ios6/

http://techcrunch.com/2012/09/12/the-loops-jim-dalrymple-apple-got-a-decade-head-start-on-most-people/

Very lightweight, more usable real estate, can operate with one hand, panoramic effect on side vertical view, fits in pocket

sweet spot on market with one device, upgraded components , a6, re-engineering camera, smaller camera, LTE,

Apple chose no NFC for now or step fwd on mobile payment system – punted for now. New passbook

iOS6 – developer pure performance, console quality graphics, google kicked out of platform, Map stuff is apple and google data is gone when upgraded, apple video instead of youtube.

iphone launch

Apple is not and will not change things just for the sake of change. And while some may now be clamoring for this change, the paradox is that if Apple did make some big changes, many of the same people would bitch and moan about them

 

FOUC! (Flash of Unstyled Content)

It occurs when applying styles with JavaScript on page load.

The problem is most evident when there is some content that needs to be hidden initially and when the document is large or complex.

< ul id=”flash” >

In the On Ready function , you would apply :

$ (‘#flash’).hide();

A whole lot of document that has to be ready before anything inside the ready() function can be executed.

Putting the tags just inside the closing  body tag doesn’t help either

http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

Fluff 2012 August Notes on Next Gen Framework

Framework worth a look Spring Social

@Habuma : “Need to fix it if you don’t  know JS “

spinejs , spine mobile : based on coffee script http://www.coffeescriptlove.com/2011/11/why-is-spine-in-coffeescript.html

- tool to generate a project spine.app

- spine mobile GFX library under covers

web hosting – cloudfoundry , red hat open shift

oauth2 – mention of harsh comments by http://hueniverse.com/2012/07/oauth-2-0-and-the-road-to-hell/

zepto a jquery like library for mobile, jquery good beacuse it handles all browser types

Next-Gen “Stack”:

Database : Neo4j with Spring Data
REST API : Spring MVC
OAuth 2 : Spring Security for OAuth
Client : Spine.js and Spine Mobile
Mobile : PhoneGap/Apache Cordova

Asked him about knockoutjs and said it was great for data binding but you need to pair it with a routing js framework.

Fluff 2012 August Notes on Advanced Javascript

I just attended the NFJS Raleigh tour stop. This was my third time at this great event and my focus of the sessions was javascript and mobile.

Here begins my notes:

Suggested Book: Seven Languages in Seven weeks by Bruce Tate

Prototypes - IO, LUA, SELF : access to class , define on the fly, manipulate class after you define it.

Functional JS vs OO JS

http://joda-time.sourceforge.net/ - spring data

Everything in javascript is an object but primitives.  Objects consist of key value pairs + prototype

javascript function is pass by reference not by copy.

Dynamic typed language

hoisting -  Only functions create a new scope.

propertyIsEnumerable : higher within prototype

passing functions to a function desirable for reuse

associative array {name: ‘fred’}

two scopes: global and function level scope

this – scope you are in

null == undefined

parasitic inheritance is like composition

CommonJS – use of require

Underscore.js

Date.js

Sugar.js

Backbone.js

Testing- Jasmine

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects

 

Knockout Custom Bindings

I am continuing to work with KnockoutJs and I noticed a few examples that use custom bindings. This post does a great overview:

Knockout bindings consist of two methods: init and update. Creating a binding is as simple as creating an object with these two methods..

ko.bindingHandlers.yourBindingName = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
  },
  update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
  }
};

The init function – This is usually used to run one-time initialization code or to wire up event handlers …

The update function – provides a way to respond when associated observables are modified….

don’t actually have to provide both init and update callbacks ….

The element parameter – the DOM element that contains the binding…

The valueAccessor parameter – function that gives you access to what was passed to the binding. If you passed an observable, then the result of this function will be that observable (not the value of it). If you used an expression in the binding, then the result of the valueAccessor will be the result of the expression.

The allBindingsAccessor parameter - just a way to pass additional options to the binding, unless you choose to pass an object with multiple properties into your main binding.

The viewModel parameter – provides access to your overall view model for bindings outside of templates.  Most of the time the valueAccessor will give you the data that you want, but the viewModel parameter is particularly useful if you need an object to be your target when you call/apply functions.

ko.bindingHandlers.jqTabs = {
init: function(element, valueAccessor) {
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).tabs(“destroy”);
});
},
update: function(element, valueAccessor, allBindingsAccessor) {
var dependency = ko.utils.unwrapObservable(valueAccessor()), //just to create a dependency
options = allBindingsAccessor().jqTabOptions || {}, //any additional options
selected = $(element).tabs(“option”, ”selected”);  //restore selected index

//do in a setTimeout, as the DOM elements are not built yet when we are using bindings to create them
setTimeout(function() {
$(element).tabs(“destroy”).tabs(options).tabs(“option”, ”selected”, selected);
}, 0);
}
};

JQueryUI Tab – The Uncola

Lets say you are using knockoutjs , so your tabs might look something like this in your form data.

< div id=”tabs” data-bind=”jqTabs: { fx: { opacity: ‘toggle’ } }”>
< ul>
{{each tabs}}
< ul>
< li>< a href=”#tab-${id}” data-bind=”click: function(event,ui) {$root.ClickedTab(event,ui);}”>${title}
< /li>< /ul>

Handling the screen interaction is what I am interested in.

Such as the Tab  events.  Getting what was selected .

The  JQueryUI tabs documentation  lists Methods , Events, Options

For example, under methods,

tabsselect, tabsload, tabsadd

selected: Get or set the selected option, after init.-
var selected = $( ".selector" ).tabs( "option", "selected" );
$('#tabs').tabs("option", "selected")
$('#tabs').data()

$('#tabs').tabs({
        selected: selection.parent().index(),
    });
 

As well the live demos under contents feature information :

Events

A series of events fire when interacting with a tabs interface:

• tabsselect, tabsload, tabsshow (in that order)
• tabsadd, tabsremove
• tabsenable, tabsdisable

Event binding example:

$('#example').bind('tabsselect', function(event, ui) {

    // Objects available in the function context:
    ui.tab     // anchor element of the selected (clicked) tab
    ui.panel   // element, that contains the selected/clicked tab contents
    ui.index   // zero-based index of the selected (clicked) tab

});

tab fiddle  , tab jsbin , tabs stackoverflow

Knockout Templating

I am in middle of the use of conditional rendering with knockout.  There are some good articles out there on the use of templates.

http://www.akhildeshpande.com/2012/04/knockout-data-bindings-and-templates.html

http://www.strathweb.com/2012/08/knockout-js-pro-tips-working-with-templates/

http://blog.evereq.com/blog/index.php/2012/03/conditional-template-rendering-with-knockoutjs/

http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html

Knockout Nuggets

1) Send an event on some screen action

Form:

< input type=”button” id=”Button1″ value=”Create My Event” data-bind=”event: { click:createGreatEvent } ” />

Model:

this.createGreatEvent = handleReset;

function handleReset() { alert event(‘Yay’);}

2) Display Label from model

Form:

< label data-bind=”text: myLabel()”>

Model:

this.myLabel = ko.observable(“”);

this.myLabel(“Yay”);

3) Bind to typical form objects

Form:
< tr>
< td data-bind=”with:myObj” >
< textarea size=70 id=’myTextVal’ rows=5 cols=100 data-bind=”value:$data.text” />
< /td>< /tr>
< tr>

< td data-bind=”with:myObj” >
< input type=’checkbox’ id=’displayByDefault’ data-bind=”checked: $data.awesome == ‘Y’ ” />
< /td>< /tr>

< td >
< select id=’questionTypeVal’ data-bind=”options:typeItems, optionsText: ‘text’, value: selectedType, event: {change: changedTypeEvent} “

</select>
</td>
< /select>
< /td>
Model:

this.myObj = ko.observable(“”);

this.myObj = new Obj(”, ”, ”, ”, ”, ‘N’, ”, ”, ”, ‘Y’);

this.typeItems = ko.observableArray();

// choice list selected

this.selectedType = ko.observable();

this.typeItems.push(new OptionObj(“Text”, “Text Box”));
this.typeItems.push(new OptionObj(“TextArea”, “Text Area”));
this.typeItems.push(new OptionObj(“Date”, “Date”));

this.changedTypeEvent = handleTypeChoice;

function handleTypeChoice() {

if (this.selectedType() != null) {

var type = this.selectedType().id;

}}

4) Conditional Rendering with Templates

Model:

this.SetupQuestions = ko.observableArray();

this.templateToUse = function (item) {

var templateName;

if (item.type == “Text”) {
templateName = “temp1″;
}
else if (item.type == “TextArea”) {
templateName = “temp2″;
}

return templateName;
}

var myViewModel = new myProject();

ko.applyBindings(myViewModel);

myViewModel.SetupQuestions.push({

“myId”: “50001″,
“type”: “Text”
});

myViewModel.SetupQuestions.push({
“myId”: “50002″,
“type”: “TextArea”
});

Form:
< script type=”text/html” id=”temp1″>

< span data-bind=”template: { name: ‘QuestionAnswerChildTemplate’, data: $data }”>< /span>
< /script>

< script type=”text/html” id=”temp2″>

< span data-bind=”template: { name: ‘QuestionAnswerChildTemplate2′, data: $data }”>

< /span>

< /script>

< script type=”text/html” id=”QuestionAnswerChildTemplate”>
< input data-bind=”value : AnswerVal” />
< /script>

< script type=”text/html” id=”QuestionAnswerChildTemplate2″>

< textarea size=70 id=’questionTextVal’ rows=5 cols=100 data-bind=”value : AnswerVal” />
< /script>

< table >
< tbody data-bind=”template: { name: templateToUse, foreach: SetupQuestions }”>< /tbody>
< /table>

Knockout webosphere

1) Decoupling with Knockoutjs [pluralsight]

2) Knockout js shootout vs other js libraries [  screencast.]

3) data-*

4) Knockout.Unobtrusive

5) Cleaning up knockout

6) Knockout with jSON [1]

7) ESPN api with Knockout  [arrays]

8) Knockout built in binding types

9) Conditional rendering [1]  [2] [3]

10) wiki

GitHubba

I first heard of GitHub (what is GitHub anyway? ) several years ago at the NoFluffJustStuff conference. After the conference I set up an account (technobuzz is a member since Sep 03, 2010) , allthough I have not made much use of it.

https://help.github.com/

http://git-scm.com/doc/

http://git-scm.com/documentation/book

Also, in PhoneGap  they show you how to get started with Git bash .

I am using Aptana Studio which shows you a little about Git use and it comes with the tool/plugin.

http://pressedweb.com/tutorials/how-to-use-github-part-1/

- Some git hub resources

- git man pages

- set up git

C:\Program Files (x86)\Git\bin\ssh>ssh-keygen -t rsa -C “yagottabelieve@gmail.co
m”
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/xyz/.ssh/id_rsa):
Created directory ‘/c/Users/xyz/.ssh’.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/xyz/.ssh/id_rsa.
Your public key has been saved in /c/Users/xyz/.ssh/id_rsa.pub.
The key fingerprint is:
b2:f8:32:17:e1:ea:41:61:7b:79:39:b1:a0:55:88:4a xyz@gmail.com

https://github.com/settings/profile

go to .ssh dir and get text of pub key

C:\Users\xyz\.ssh>type id_rsa.pub

paste it into github ssh (https://github.com/settings/ssh)

Test out key:
C:\Users\xyz\.ssh>ssh -T git@github.com

C:\Users\xyz\.ssh>git config –global user.name “Dave-o”

C:\Users\xyz\.ssh>git config –global user.email “xyz@gmail.com”

GitHub for Windows includes this helper, and provides a git shell so you don’t need to install and configure git manually

cd c:\wamp\www\jquery

git init

git status

git add file1.txt

git commit – m “add test file “

git remote add orgin git@github.com:technobuzz/jquery.git

git pull orgin master

git push  orgin master

https://help.github.com/articles/fork-a-repo

Knockout jQuery Binding and Visibility

Reading more on Knockout js

Here is the panel we will enable or disable:

< div id=”optionalPanel” style=”color: red;” data-bind=”visible:isEnabled”>The following is an example div</div>

Here we have a button that sends an event when it is clicked

< input type=”button” id=”Button1″ value=”My Button” data-bind=”event: { click:buttonEvent } ” /> 

Here is what the associated binding  (javascript) looks like:

function viewModel() {
   var self = this;

    myValues = ko.observableArray([]);

    this.isEnabled = ko.computed(function () {   return myValues().length > 0;  }    );

    // Here when er receive event we enable div tag by making size of myValues greater than zero

    buttonEvent = function (selectedSection, userAction) { myValues.push(“some value”);   };

};

//Must apply a model to bindings
ko.applyBindings(new viewModel());

The documentation for this example (also an example with booleans).

Likewise, here is an example of using anonymous function in html to reference the javscript bindings.

A  dropdown  binding example

More binding techniques

Site point series : 1 2 3

special comments for “if” binding

select list  example (i.e. picklist) , alternate select list example

Knockout jQuery

In the GWT ecosystem , the Model View Presenter (MVP) pattern is the architecture of choice. However, the model requires some special capabilities when  dealing with the state (i.e. what the user did should force some special visibility rules).

In MVP the model typically refers to just the domain objects that will be displayed, things like a Customer, Contact or Account. From a Presentation Model perspective the term model encompasses the domain data plus all additional state that can change during the normal operation of the UI.

Likewise, pure javascript libraries have to deal with these type of issues too. They have a name for the MVP + (Editors/Pectin) pattern.  Its called MVVM.

Model–View-ViewModel talks of creating a new model (in addition to your domain model). This model normally adds additonal properties from the prespective of View (as we understand that View has controls in addition to data which it’s displaying).

Knockout  handles data binding :  ”Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes)”.

A simple example always explains it best.

The ViewModel can be considered a specialized Controller that acts as a data converter. It changes Model information into View information, passing commands from the View to the Model.

For example, let us imagine that we have a model containing a date attribute in unix format (e.g 1333832407). Rather than our models being aware of a user’s view of the date (e.g 04/07/2012 @ 5:00pm), where it would be necessary to convert the address to it’s display format, our model simply holds the raw format of the data. Our View contains the formatted date and our ViewModel acts as a middle-man between the two.

KnockoutJS interprets the ViewModel as the represtation of data and operations that can be performed on a UI. 

Another simple example with code.

The intent of Knockout and other MVVM framework offerings is to move those conditional logic statements into the ViewModel and let the ViewModel be the sole source of the business logic

more: http://learn.knockoutjs.com/#/?tutorial=intro

MVC in Javascript

http://www.alexatnet.com/articles/model-view-controller-mvc-javascript

Controller:

• add an item
• delete an item
• update

View

• wired to listen for add button click, invokes controller
• wired to listen for delete button click, invokes controller
• Event (model) handler for itemAdded, itemRemoved

• sender object
• attach method to add handler to the event
• notify method to invoke a handlers

Model

•  list of current items
• selected index
• define Event (model) for item added, removed, selectedindex changed
• model getters/setter methods for items

From Sencha to jQuery

After learning alot about EXTJS, it makes sense to get familiar with jQuery. If you have 15 minutes, this is a good overview. Similarly, try this slide share too as it provides good explanations.  As well, there is a jQuery fundamentals, an  online book or  jQuery in Action. As the first chapter says :

If you’ve spent any time at all trying to add dynamic functionality to your pages, you’ve found that you’re constantly following a pattern of selecting an element or group of elements and operating upon those elements in some fashion. You could be hiding or revealing the elements, adding a CSS class to them, animating them, or modifying their attributes.

This javascript library make it easier to accomplish these routine blocks of code in your client code.
To collect a group of elements, we use the simple syntax:

$(selector)
or
jQuery(selector)

The $ () function (an alias for the jQuery() function)  returns a special javascript object containing an array of DOM elements (known as the wrapped set or wrapper)  that match the selector.

Then, jQuery provides methods (or sometimes known as commands or actions) that can act on the group of elements. Some of these actions when completed return the same set of elements that can then again be acted on (known as chaining).

jQuery. or $. is the notation for utility functions.

15 days of jQuery

Selectors

Dimensions

Traversing

Maniplulation

Utilities

Events , Event Object

Ajax

Mobile advancements by Qualcomm

http://scobleizer.com/2012/07/11/mobile-3-0-arrives-how-qualcom-just-showed-us-the-future-of-the-cell-phone-and-why-iphone-sucks-for-this-new-contextual-age/

But in the future your mobile device, whether it be something you hold in your hand like a smart phone, or wear on your face, like Google Glasses, will know a hell of a lot about you.

How?

Well, Qualcomm just shipped the developer SDK, called Gimbal.

…

Apple does NOT give developers access to the Bluetooth and Wifi radios. This is going to really hinder developers in this new contextual world.

This is the location based services we have been hearing about for years. It is the auto check in functionality. Let’s say you are driving n your car, it knows you have visited Starbucks on many occasions. It knows that you are approaching a StarBucks, it offers you  a coupon code.

Mobile Apps explosion

http://blog.daniel-kurka.de/2012/05/talk-about-mgwt-gwt-phonegap-at-dutch.html

Clutter phone with apps instead of web pages

What we will do with phone in future going to explode.

Search for apps on our phone since there are so many

Periodically delete apps since cluttering phones

Web much better

One answer is phone gap

With different platforms  have to know different OS and API and languages. a lot to learn, and code  API changing all time.

The web provides a common software to bring different platforms together.

Build on standards (i.e. html5) , deploy app everywhere.

Native development – slow since have to develop for every platform, have to do separate implementation for every device, no portability, high cost, good performance on devices, native functionality

web development  - portability, low cost , no native functionality, device specific browser

Phone Gap – hybrid, web app and native app . Build it on standards and can run on anywhere. consistent api

gwt tool for building web apps

gwt  use java to build in javascript with compile (browser compatibility) , efficient javascript

mobile slow cpu drain battery slow network connections

can use phonegap and gwt together

web app – device, browser, mgwt great looking gui

apache 2.o license

native and javascript  (web)  in phone gap

adobe buys phonegap

donate code to Cordova

phone gap is one distribution of phone gap

adobe will build tools on it

web – native web control html,css – browser

phone gap plugins  (native) – camera plugins, android plugins, ioS

HBaseball

http://www.cloudera.com/resource/intorduction-hbase-todd-lipcon/

HBase : open source, distributed, sparse (no strict schema), column oriented (control how stored on disk) sorted map data store, modeled after Big Table.

Usage scenario: alot of data, very high write throughput (i.e. sequential writes), easy to scale (distribute across machines), data layout efficient(key look up disk seeks efficient and cost transparent some rows filled in some not still efficient)

column oriented – every row with same column, transaction on single row basis, not full acid, hbase no sql except with hive, but not realtime,

get :  single row get columns

put : put row these columns

scan row x in sorted order until row y, some filtering

indexing – primary key only

clustered indexes –  primary key is clustered key index

Hbase built on top of Hadoop, requires HDFS, work with map reduce but built on top of it.

HDFS sequential writes , cant update in middle of file, provides streaming I/O

HDFS lacks random read/write capabilities

HBase random read and write in middle of file

converts random writes to  writes into log, merge log back into table

log structure merge trees 89

http://www.cloudera.com/resource/chicago_data_summit_apache_hbase_an_introduction_todd_lipcon/

Failover handled with Zookeeper

Sorted Map Datastore:

Not a relational database

Tables consists of rows and primary key

Each row any number of cols

rows stored in sorted order

Have primary key and columns have attributes (column families) that can store many different things

logical view (row key : data) :

- info and roles are column families

- Can have versions of the data

cutting (row key):  info {height: ’9ft’, state : ‘CA’}, roles {ASF : ‘director’, Hadoop : ‘Founder’}

tlipcon (row key):  info {height: ’5ft7′, state : ‘CA’}, roles {Hadoop : ‘Committer’@ts=2010,Hadoop :’PMC’@ts=2011, Hive: ‘Contributor’}

physical view (for each column family, row key (primary key), col key (what data), time stamp, value) :

- column families stored separately on disk

info column family:

cutting (row key) ,  info.height (col key) , 12345678910 (timestamp), 9ft (value)

cutting (row key) ,  info.state (col key) , 12345678911 (timestamp), CA (value)

tlipcon(row key) ,  info.height (col key) , 12345678912 (timestamp), 5ft7 (value)

tlipcon (row key) ,  info.state (col key) , 12345678912 (timestamp), CA (value)

-  roles column family:

cutting (row key) ,  roles.ASF (col key) , 12345678910 (timestamp), Director (value)

cutting (row key) ,  roles.Hadoop (col key) , 12345678911 (timestamp), Founder (value)

tlipcon(row key) , roles.Hadoop(col key) , 12345678912 (timestamp), PMC (value)

tlipcon (row key) ,roles.Hadoop(col key) , 12345678912 (timestamp), Committer (value)

tlipcon (row key) ,roles.Hive(col key) , 12345678912 (timestamp), Contributer (value)

- Sorted in ascending order by row key and column key, and descending order by timestamp

-  column families:

each column may have different access patterns or properties

can configure compression, cache priority, #versions properties

- Java API, Rest Calls, Apache Thrift, Hive (sql)/Pig (hybrid) integrate

get(row)

put (row,Map)

scan (key-range, filter)

http://jimbojw.com/wiki/index.php?title=Understanding_Hbase_and_BigTable

HBASE Architecture

“ HBase handles basically two kinds of file types. One is used for the write-ahead log and the other for the actual data storage. The files are primarily handled by the HRegionServer‘s.”

You may also notice that the actual files are in fact divided up into smaller blocks when stored within the Hadoop Distributed Filesystem (HDFS).

The general flow is that

a new client contacts the Zookeeper quorum (a separate cluster of Zookeeper nodes) first to find a particular row key. It does so by retrieving the server name (i.e. host name) that hosts the -ROOT- region from Zookeeper.

With that information it can query that server to get the server that hosts the .META. table. Both of these two details are cached and only looked up once.

Lastly it can query the .META. server and retrieve the server that has the row the client is looking for.

http://hbase.apache.org/book/quickstart.html

http://hbase.apache.org/book/zookeeper.html

A distributed HBase depends on a running ZooKeeper cluster. All participating nodes and clients need to be able to access the running ZooKeeper ensemble. HBase by default manages a ZooKeeper “cluster” for you.

http://hbase.apache.org/book/datamodel.html

http://hbase.apache.org/book/data_model_operations.html

http://hbase.apache.org/book/schema.html

http://hbase.apache.org/book/mapreduce.html

http://hbase.apache.org/book/architecture.html

http://www.larsgeorge.com/2010/01/hbase-architecture-101-write-ahead-log.html

http://ria101.wordpress.com/2010/02/24/hbase-vs-cassandra-why-we-moved/ :

“ I will write about why I think we will see a seismic shift from SQL to NOSQL over the coming years, which will be just as important as the move to cloud computing. “

“HBase and its required supporting systems are derived from what is known of the original Google BigTable and Google File System designs (as known from the Google File System paper Google published in 2003, and the BigTable paper published in 2006″

“ Cassandra on the other hand is a recent open source fork of a standalone database system initially coded by Facebook, which while implementing the BigTable data model, uses a system inspired by Amazon’s Dynamo for storing data (in fact much of the initial development work on Cassandra was performed by two Dynamo engineers recruited to Facebook from Amazon).”

HBase being more suitable for data warehousing, and large scale data processing and analysis (for example, such as that involved when indexing the Web)

Cassandra being more suitable for real time transaction processing and the serving of interactive data.

where platforms are perceived as similar, people tend to aggregate around the platform that is going to offer the best supporting ecosystem in the long term

When starting with HBase, my impression then was that it had the greatest community momentum behind it, but I now believe that Cassandra is coming through much stronger.

HBase vs Cassandra: NoSQL Battle!” link more , or HBASE vs Big Table

ccelerating momentum behind Cassandra. You might also take note of the big names coming on board, such as Twitter, where they plan broad usage (see here).

“CAP Theorem, and was developed by Professor Eric Brewer, Co-founder and Chief Scientist of Inktomi.

The theorem states, that a distributed (or “shared data”) system design, can offer at most two out of three desirable properties –Consistency, Availability and tolerance to network Partitions.

Very basically, “consistency” means that if someone writes a value to a database, thereafter other users will immediately be able to read the same value back,

“availability” means that if some number of nodes fail in your cluster the distributed system can remain operational, and

“tolerance to partitions” means that if the nodes in your cluster are divided into two groups that can no longer communicate by a network failure, again the system remains operational.

a complete HBase solution is really comprised of several parts: you have the database process itself, which may run in several modes, a properly configured and operational hadoop HDFS distributed file system setup, and a Zookeeper system to coordinate the different HBase processes

HBase in pseudo distributed mode on a single server is difficult – so difficult in fact that I did my best to write a guide that takes you past all the various gotchas in the minimum time (see http://ria101.wordpress.com/2010/01/28/setup-hbase-in-pseudo-distributed-mode-and-connect-java-client/ if you wish to try it). As you will see from that guide, getting HBase up and running in this mode actually involves setting up two different system systems manually: first hadoop HDFS, then HBase itself.”

http://nosql.mypopescu.com/post/651051316/hbase-and-data-locality

http://www.larsgeorge.com/2010/05/hbase-file-locality-in-hdfs.html

Cassandra quick tour

http://research.google.com/archive/gfs.html

http://research.google.com/archive/bigtable.html

http://www.scribd.com/doc/21244790/Google-Designs-Lessons-and-Advice-from-Building-Large-Distributed-Systems

http://nosql.mypopescu.com/post/573604395/tutorial-getting-started-with-cassandra

Data on the Tube Blasts

Interview with Dr. Jim Goodnight CEO SAS Institute On Data Analytics

What is Hadoop in 9 minutes

Hadoop by Linkedin engineer

Google Compute Engine

Hadoop you do

Hadoop is a computing environment built on top of a distributed clustered file system  that was built specifically for large scale data.   The approach of Hadoop is distributing the data into a collection  of commonly available servers where each server is an in inexpenseive disk drive. Moreover, as it says here : “we introduce the idea of “big data” that the string is too huge to one master machine, so “master method” failed. Now we distribute the task to thousands of low cost machines.” With Hadoop, redundancy is built into the environment where data is stored in multiple places across the cluster. Not only is the data stored in multiple places in the cluster, but the programming model is such that  failures are expected and resolvedby running portions of the program on different servers in the cluster.

Hadoop  has two main parts :

• HDFS, the Hadoop Distributed File System, is a distributed file system designed to hold very large amounts of data (terabytes or even petabytes), and provide high-throughput access to this information. The design of HDFS is based on GFS (Google File System). Files are stored in a redundant fashion across multiple machines to ensure their durability to failure and high availability to very parallel applications. There is one NameNode, and multiple DataNodes.  Moreover, via Facebok Under the Hood says :  ”HDFS clients perform filesystem metadata operations through a single server known as the Namenode, and send and retrieve filesystem data by communicating with a pool of Datanodes. Data is replicated on multiple datanodes, so the loss of a single Datanode should never be fatal to the cluster or cause data loss.”  Also see IBM Big Data Analytics  HDFS, Facebook’s Realtime Hadoop

• MapReduce , the programming model.  it is a programming paradigm that allows for massive scalability across the many servers in a hadoop cluster. map reduce performs two seperate tasks. first is the map job which takes a set of data and converts it into another set of data where elements are broken down into key/value pairs. The reduce job takes the output from a map as input and combines the key/value pairs into a smaller set of key/value pairs.

Note: The IBM Infosphere BigInsights platform (current version is  1.4) is built on top of Hadoop .

More:

• http://hadoopblog.blogspot.com/
• Hadoop Basics
• HBASE
• Realtime Hadoop
• MapReduce Patterns

Learning Big Data

From the  whatsthebigdata.com post on  Crowdsourcing :

“The Wikipedia article on Big Data says it requires exceptional technologies to efficiently process large quantities of data within tolerable elapsed times.”

Big data is making us think of ways to harness the excessive amount of unstructured data that is generated on a daily basis.  Moreover, it is no surprise we have seen the introduction of many new Big Data technologies .

It was   Carlo Strozzi who coined the term NoSQL (“Not only SQL”) in 1998, referring to a lightweight database that did not expose a SQL interface. The NoSQL databases provide Infinite  scalability, fault  tolerance, high availibilty,  design-friendly lack of schema.  For example,  Oracle has a NoSQL offering, and  Globals is an Open Source NoSQL that supports a Java API.

My first experience with an unstructured like database was with the  Google App Engine in which uses the  BigTable like concepts (App Engine datastore and BigTable are not the same thing – datastore is built on top of the lower level BigTable, and adds extra capabilities. Bigtable is a sparse, distributed, persistent multidimensional sorted map. The map is indexed by a row key, column key, and a timestamp; each value in the map is an uninterpreted array of bytes.

Likewise, “The guts of Google are where concepts such as key-value pairs and MapReduce have been brought to the everyday user, albeit transparently.To finish the thought, NoSQL is a database-like storage engine for key-value pairs and Hadoop is an open-source implementation of MapReduce, among other things. Together, they enable mountains and mountains of data to be used purposefully“

The Primer on Big data defines the  four “V’s” of data: volume, velocity, variety and veracity :

Volume: The sheer amount of data being digitized, maintained, secured, and then used. Knowing the organization’s current needs and having a plan for its growth is fundamental.

Velocity: The speed at which data must be moved, stored, transformed, managed, analyzed or reported on in order to maintain competitiveness. This will vary by organization and application or usage.

Variety: The different types of data, from source (origin) to storage and usage, must be well understood because competitiveness requires access to the right types of data more than ever. From aged flat files to spatial and unstructured data, a plan must be in place.

Veracity: The truthfulness or quality of data can either lead to poor understanding and decisions that belie progress or deliver a powerful jolt of reality that fuels new insight and ideas. Ultimately, data quality may be the most important frontier.

I first heard the hadoop and cassandra  buzz words bounced around when they talked of the technology behind google/facebook.

More on Hadoop :

“Traditional databases have columns and structures — name, rank, serial number, data of entry, date of departure,” Kay said. “In a Hadoop cluster, it’s unstructured. You don’t know what the structure is.”

“Hadoop was created by computer scientist Doug Cutting, who developed the platform based on data-indexing research from Google Inc. Cutting, now Cloudera’s chief architect, named the technology after his son’s yellow stuffed-elephant toy, which went on to become the platform’s logo.”

Now,  VMWare is bringing in Hadoop to its SpringSource Umbrella.

References:

• Think Big Papers
• Big data predictions for 2012
• Big Data Myths

SAS Proc Summary and Means joined at hip

I have been working with SAS PROC Summary , and now know the PROC Means provides almost the exact same functionality (as the legend goes that two different people were designing  procs that did the same thing) . If you go to documentation for either, it shows the same syntax. The core
difference is that by default PROC MEANS sends the results to an Output Window and that PROC SUMMARY, by default, creates a SAS data set.

Class statement:   class variable(s) </ option(s)>;  

- Specifies the variables whose values define the subgroup combinations for the analysis

Id statement:  Id variable(s); 

includes additional variables in the output data set.

Output statement: OUT=SAS-data-set

• statistics : The statistical analyses PROC MEANS will generate
• _FREQ_ is the count of the number of observations available for use
• _TYPE_  is a numeric flag which indicates the subgroup of the CLASS variables summarized by that observation in the output data set.

Here is an example. Nice presentation here.

SAS BI Tasks

I am using the SAS Enterprise Guide and trying out a few things.

My samples directory is C:\Program Files\SASHome\x86\SASEnterpriseGuide\4.3\Sample\Data

• Tools-> SAS Enterprise Guide Explorer
• Tools -> Update Library Metadata
• File -> Open ->
• Right click on SAS program and click create stored process

More BI Learnings

http://cwebbbi.wordpress.com/2011/12/07/using-google-docs-data-explorer-and-powerpivot-for-questionnaires/

http://cwebbbi.wordpress.com/2012/05/20/a-look-at-google-bigquery/

http://proc-x.com/2011/11/sas-olap-cubes-tips-for-building-olap-cube-aggregations-effectively/

SAS Snippets

http://www.sasanalysis.com/search/label/web%20analytics

Pre-assign Library in SAS Management Console (SMC)

We created a new SAS library (which is just a name that points to a directory in the system),  but the SAS BI Dashboard  was not recognizing it.  Turns out you have to pre-assign the library.

We had to reset the tool for SAS BI Dashboard to take notice.  Simply checking the library was not good enough.

Stored Processes

A SAS stored process is a SAS program that is hosted on a server and described by metadata.

Because a stored process is basically a SAS program, it can access any SAS data source or external file as input
and can create multiple types of output, such as new data sets, files, and report output in a variety of formats.

code is not embedded in client applications  it is stored on a server

SAS stored processes can be hosted by either the SAS Stored Process Server or the SAS Workspace Server

Any SAS program can be a stored process

More on Stored Processes… http://www.bi-notes.com/2012/05/stored-process-edit-modify-change/

SAS data manipulations

SAS Transpose : “So many times we need to take our data and turn it around. One of the reasons that this is done is that it
is more efficient to store your data in a vertical format and processing the data is easier in a horizontal
format”

• Changes the variables (columns)  into observations (rows)
• eliminates the need to write a complex data step
• Horizontal data has many variables with few rows. There will be empty cells in the data if there are any missing values

SAS Summary/SAS Means : In SAS, you can use the UNIVARIATE, MEANS, or SUMMARY procedure to obtain summary statistics such as the median, skewness, and kurtosis

Median:
By definition, a median is a statistical term identifying a piece of data (number) that divides numerically ordered data into two equal halves. In easier terms, the median is the middle piece of data when those data are placed in numerical order.

Play the InfoMap Game

an information map bridges the gap between the:

• the physical data warehouse
• business user who views or builds reports from the data

An Example:

•  information architects  sees physical data source that might be an array of interconnected tables and columns
•  business users sees a simple list of business terms

an information map:

• enables business users access to the most current data that is needed for business reporting
• hides from business users the details of the physical data view

Information maps are :

user-friendly metadata definitions of physical data sources.

information map contains two basic elements:

A data item   (a table column, an OLAP hierarchy, or an OLAP measure) -

• are used for building queries and can be an item that represents either physical data or a calculation.
•  are usually customized in order to present the physical data in a form that is relevant and meaningful to a business user.

A filter is criteria that subset the data (i.e. where clause).

SAS Information Maps contain metadata to describe the following elements:

Metadata about the data sources:  An information map can be based on SAS data sets, SAS OLAP cubes, or a third-party database such as Oracle, Teradata, DB2, or Microsoft Excel

Metadata about relationships : Multiple relational data tables can be combined or joined to enable optimized queries, regardless of the data source.

Metadata about the appearance and usage of data items : control the display of data items through labels and formats. It can also control the usage of the data items. For example, you can decide that a certain data item should not be used in a sort or to compute statistics.

Metadata about business rules : Standard calculations and filters can be predefined so that business users do not need to re-create them every time that they are needed.

Metadata Repository pane on left: display of the information maps

Presentation tab: physical data sources, data items, and filters

Physical data on left : shows physical data sources

Information Map: details panel displays the Information Map data items and filters

Relationship Tab: Tables and their relationships to others

You cannot use both a table and a cube in the same information map

By inserting a data source for your information map, you have made the data available to the information map.

Now, you must create data items in order to include them in the information map.

A business user sees data from the data source only if you create a data item to represent it.

• A data item can be a logical view of a field in the physical data.
• A data item can be calculated from an expression.

To create data items, you use the Presentation tab of the main SAS Information Map Studio window.

To create a data item that is a logical view of the physical data field, you select an item in the Physical Data pane, and you use the Insert button to create a corresponding data item in the Information Map pane.

Data items are listed in the Information Map pane with an icon indicating their classification. There are two classes of data items

category: distinct value that is used to group or summarize measure data items

measured: a value that is measured and can be used in expression

Each data item has metadata to describe its properties

You can view and edit a data item’s properties in the Data Item Properties window

you right-click the data item in the Information Map pane of the Presentation tab and select Properties

Filters :  A filter can also be based on a physical data column or on an expression. The expression that you use in a filter can reference data items, physical data columns, or both.

category data item:

• query code uses a WHERE clause
• the clause is evaluated for individual records prior to any aggregations

measure data item:

• query code uses a HAVING clause
• the clause is evaluated on summarized information after aggregating the data

To open the New Filter window, you click the New Filter tool

In the Data item box, you specify the data item, physical column, or expression to which this filter applies.

In the Condition box, you specify the condition that is used to filter the data. For relational filters, the list of available conditions is based on the data item that is selected in the Data item box.

In the Value(s) box, you specify the unformatted values that the condition uses to filter the data items

You click Combinations to display or hide the elements that enable you to create compound expressions for the filter. Or/And expressions

he Edit button on the Definition tab enables you to open the Expression Editor window, where you can specify an expression for the new data item.

 

OLAP Sandwich

I am learning about OLAP cubes… [concepts] [more]

Cubes are logical, multidimensional models that consist of the following elements:

• One or more dimensions
• One or more levels
• One or more hierarchies
• Members

Dimension – collection of closely related hierarchies that group data into natural categories (i.e. variables)

Level – level of detail within dimension

Dimensions have top level

Hierarchy – order of levels in a dimension based on parent child relationships

Member – individual value within level

 Star Schema – The set of tables includes a single fact table and one or more dimension tables. “ It is called a star schema because the diagram resembles a star, with points radiating from a center. The center of the star consists of fact table and the points of the star are the dimension tables.”

Fact Table – “ The fact tables contain fields for the individual facts as well as foreign key fields relating the facts to the dimension tables.”

Aggregate Tables – “are special fact tables in a data warehouse that contain new metrics derived from one or more aggregate functions (AVERAGE, COUNT, MIN, MAX, etc..) or from other specialized functions that output totals derived from a grouping of the base data.”

http://proc-x.com/2011/11/sas-olap-cubes-tips-for-building-olap-cube-aggregations-effectively/

http://sastechies.blogspot.com/2010/02/building-olap-cubes-with-sas-enterprise.html

EXTJS Linkage

Over the course of doing some EXTJS4 development, I have come across some good sites that will be good reference for knowledge.

EXJS4 Training Video

Fusion Cube on EXTJS

DashasSalo on Sencha

Dconstructing Javascript 

20-things-to-avoid-or-do-when-getting-started-with-extjs-and-sencha-touch

Missing CSS for Breadcrumbs [more]

Designing web interfaces

Sencha examples

http://www.sencha.com/conference/session/ext-js-4-advanced-expert-techniques

http://www.slideshare.net/senchainc/ext-js-41-layouts-performance-and-api-updates

http://existdissolve.com/2012/02/extjs-4-querying-records-in-a-data-store/

http://www.famfamfam.com/lab/icons/

http://www.diloc.de/blog/2011/05/05/extjs4-form-validation-via-model-binding/

http://blog.falafel.com/blogs/basememara/11-12-15/Building_a_Mobile_Web_App_using_Sencha_Touch_2_and_MVC

In the Folds