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.
src/main/webapp/WEB-INF/
spring-ws-servlet.html
<?xml version=”1.0″ encoding=”UTF-8″?>
<beans xmlns=”http://www.springframework.org/schema/beans”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xmlns:context=”http://www.springframework.org/schema/context”
xmlns:sws=”http://www.springframework.org/schema/web-services”
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”>
<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” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd”
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”;
//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”
xmlns:hr=”http://mycompany.com/hr/schemas”
elementFormDefault=”qualified”
targetNamespace=”http://mycompany.com/hr/schemas”>
<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/”
xmlns:soap=”http://schemas.xmlsoap.org/wsdl/soap/”
xmlns:schema=”http://mycompany.com/hr/schemas”
xmlns:tns=”http://mycompany.com/hr/definitions”
targetNamespace=”http://mycompany.com/hr/definitions”>
<!–SCHEMA REFERENCE–>
<wsdl:types>
<xsd:schema xmlns:xsd=”http://www.w3.org/2001/XMLSchema”>
<xsd:import namespace=”http://mycompany.com/hr/schemas”
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”/>
<wsdl:operation name=”Holiday”>
<soap:operation soapAction=”http://mycompany.com/RequestHoliday”/>
<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/”/>
</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”>
<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
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
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:
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/
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.
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