Saturday, September 21, 2013

icon approach of checkbox in angularJs

Using icons vs checkbox or  ng-check .
Select boxes are great for forms.

When saving the change to the server on a click...this works too.
The icons are from font awesome.

<div ng-repeat="item in items">
 <i 
    ng-class="{'true':'icon-check','false':'icon-check-empty'}[item.selected]" 
    ng-click="fooClick(item)"></i>
</div>

Explained:  The ng-class has a JavaScript object {...} with an item selector [item.selected].  All this happen inline to paint the proper icon.

The best part is you can see the icon choices in the html and do not have to look in the js files.  For larger lists I would not do it inline.

When user clicks, fooClick is invoked and I change the item in the database and change the var in the item.  Thanks to angularJs binding, the ui is updated.

My Controller code.

Note: I have boolean strings.
Like a good developer, I'm not 'boxing' item.selected by directly assigning it while operating on it. For more info on boxing click here.

$scope.fooClick = function (item) {
  var tf = (item.selected === 'true') ? 'false' : 'true';//watchout... boolean strings
  item.selected = tf;
  saveToDatabase(id,val);
}

Wednesday, September 18, 2013

Browsers vs Editors

HTML has come along way from its roots. At one point in time there was the concept of an Editor.

I would be interested in a podcast that interviewed someone from the Amaya.  Listen to their thoughts on Editors, the (x)ml movement, and maybe leading into editors for dsl (domain specific languages).

At what point does a browser become an editor? Many business desktop applications are moving to the web. As a developer I often question where browsing ends and where editing or work begins.

http://www.w3.org/Amaya/

Tuesday, September 17, 2013

Reinventing the wheel, actually Ninject

I was doing some dynamic invoking work with Asp.Net WebApi.

Code worked from beginning, middle, and end. The middle was a bunch of ugly unnecessary if statements that needed manual configuration for each class.  I didn't have time to use (fight) reflection and assembly invoke.

First Refactor

Custom service locator / factory.  Good old inversion of control.

I stubbed out a few classes.  Wired up the first item, then realized...

Realization I'm reinventing the wheel!

Then saw that I already had this in Ninject! I just needed to add create an interface for each controller class.

My custom built service locator / factory became

public virtual IAbstractXrxController ManualControllerFactory(Type controllerType)
{
      var ctrl = (IAbstractXrxController)GlobalConfiguration
                    .Configuration.DependencyResolver
                    .BeginScope().GetService(controllerType);
      return ctrl;
}



I used http://tohtml.com/ to create html code.

Saturday, September 14, 2013

Linkers vs. Controllers in AngularJS Directives

When I first started working with directives, I used linker functions to do all the work.  I enjoy working with controllers over linker functions.  They are simpler.

I have had mixed results using "ng-click" in the linker function. Binding "ng-click" in the controller always works. Not that there is a bug or problem with the linker function.  It is invoked at a different time in the page load life cycle.  With anything, order of operations is important.

The example below shows the same click activity implemented two different ways; as a linker function and as a controller.  The example does not run, but is conceptually correct.  I'm still trying to figure out how to debug efficiently in jsfiddle.

Thursday, September 12, 2013

Git Mergetool

 Pretending you have tortoise, kdiff3, or winmerge already set up so we can get to the good stuff. 

Git does a good job or merging, but conflicts happen.

You could just open your IED and try to fix things, but don't.
Instead type
> git mergetool

This is the cool part...
Your merging tool will open with the conflicted file.

When the conflict is resolved, save the file and the next conflicted file will open.

This continues until all conflicts are resolved.

There are tons of good blogs out there on configuring your merge tool.

I'm using kdiff3 right now and it's working for me.

Tuesday, September 10, 2013

Simple Git Cheatsheet (beta)

This post does not cover setting up git for the first time or cloning the repo.

Starting Work - (already have a clone on your box)
> git pull origin master   (or branch name)
> git branch MyShinyNewFeature (create new branch)
> git checkout MyShinyNewFeature (switch to that branch)
Then do you work


Doing Work
Add all new files to current branch, commit files, push to remote server (origin)
> git add . (add all files)
> git commit -m 'message here'
> git push origin MyShinyNewFeature (save files to server)

Finishing your work for the day while on your branch
[MyShinyNewFeature] > git checkout master (switch to master)
[master] > git pull origin master  (update local copy of master)
[master]> git checkout MyShinyNewBranch (switch to your branch)
[MyShinyNewBranch] git merge origin master (merge master into your branch)
See Doing work to commit the merge.

Merging new feature into master
issue a pull request to integrate your branch into master, it better merge without any errors.

Random
> get fetch (every once in a while just run this)

Simple Definitions

  • add . (adds all files, you still need to commit)
  • commit - something you do after add
  • fetch - download the code from the server
  • pull - is a fetch and merge in one command
  • clone - copies code from the server to your box. Usually the first thing you do when starting a project.
  • origin - is a shortcut term for a remote server url
  • checkout is how you switch branches.  You can checkout local or remote branches.
  • branch - does branching stuff
  • .gitignore - this is a file that prevents certain files from being checked in.  There are several good ones out there.
Note: I like the github for Windows git client.  I like that it stores the password without any extra work.  It also generates ssh keys for you.
http://windows.github.com/