Multi-column, Multi-input, focus on first input

•April 14, 2014 • Leave a Comment

Angular, Bootstrap

Multi-column, Multi-input, focus on first input for bootstrap and angular

Background

This is a continuation of my first post around Input focus. In this post I will be expanding on the input focus to show you how to do the same, with multiple input boxes and input rows. We as developers have times where the user needs to input larger amounts of data, this example will show will just scratch the surface of the power behind angular and data binding. In a future post I will be going further into model and data formatting.

clip_image001

Assumptions

· Using Bootstrap http://getbootstrap.com/

· Using Angular JS http://angularjs.org/

The Directive

If you have already created the inputfocus.js ignore this section.

Create a file called inputfocus.js and implement the directive below. This generic directive will function across your application any place that it finds the inputfocus attribute on an element, but the power behind this directive is that it will work for modal windows as well. The way we accomplish this is the trigger on our limited scope, the directive does not fire till the page is fully loaded then the directive is ran, and the focus is put on the first input box.

clip_image002

Input form HTML

We will now decorate the first input of the form with the inputfocus attribute, now once the form is loaded the directive will know what element we want to put focus on.

We have two input elements for the first name box. You will also notice that they contain the ng-if attribute, the first input element and ng-if contains the $index==0 it also is where the inputfocus attribute is placed. This $index uses the power we get from the ng-repeat element when It iterates over the array object, it tells the framework to only output to the DOM the first element if this is the first pass through the object, the second input and ng-if will be output for anything other than the first time through the array.

clip_image004

Application Controller

We will now finish the creation of the application by defining the module the controller the data object and populating the data object. As you can see we created the json so that each user has properties that correspond with the values we want displayed on the view, we are also following the object model for each object/user in the array.

clip_image005

Conclusion

As you can see from the code examples above it is easy to wire up the directive to do things as simple as setting focus. To see the code in action see the following fiddle to see the code in action.

Advertisements

Input focus using angular for bootstrap

•February 18, 2014 • 1 Comment

Background

As developers we usually have standards on how user experience should work, when you come into a data entry window or modal. Good user experience would dictate that we focus on the first input box on an input form.

In this post I will discuss using angularjs, and bootstrap how to fulfil this behavior.

image

Assumptions

· Using Bootstrap http://getbootstrap.com/

· Using Angular JS http://angularjs.org/

The Directive

Create a file called inputfocus.js and implement the directive below. This generic directive will function across your application any place that it finds the inputfocus attribute on an element. The power behind this directive is that it is constructed to work with modal windows. This is accomplished by defining a limited scope trigger around the scope: { trigger: ‘@inputfocus’ } attribute. The directive does not fire till the page is fully loaded then the directive code is executed, the focus is put on the first input box.

image

Input form HTML

We will now decorate the first input control of the form with the inputfocus attribute. Once the form is loaded the directive will know what element we want to the focus to be on.

image

Application Controller

We will now finish the creation of the application by defining the module the controller, and setting up of the interface.

image

Conclusion

As you can see from the code examples above it is easy to wire up the directive to do things as simple as setting focus. To see the code in action see the following fiddle. In my next post I will show you how you can put focus on the first element of an ng-repeat using the ng-if functionality introduced in angularjs any version after 1.1.5.

Health

•October 9, 2011 • Leave a Comment

Earlier this year I came to the realization that I needed to make a change, my weight and health were progressively getting worse. I have fought with my weight and health for most of my life. In January my weight had hit another high I was approaching a very dangerous level, exercise alone was not enough. I have been hesitant to make dietary changes not wanting to miss the good foods, what I didn’t realize was
those foods were not good after all but very bad in the quantity I was eating them at.

Our society has an issue, our processed foods. It may make it cheaper and earlier to feed people, but the quantity that we eat those foods in is what is causing obesity in our day and age. Our processed food are so high in calories but contain very little in nutrition, I very rarely eat those processed foods anymore looking more at more organic foods. What I am speaking of is meets, vegies fruit and the most important of all drinking enough water. I realized over the last 8 months that I has mistaken the signs from my body most of my life as hunger but thirst.

During that time as a developer liking to analyze things that I needed tools that would help track different aspects of my life. I created two health tools. There are many tools out on the internet but most didn’t work or give me the information I wanted. The first tool I created helped me make calculate how many calories I burned for my activity level. This BMR calculator has helped me greatly allowing me to know how many calories I burn from all that I do.  This was the first time I worked with Silverlight, this was a good experience for me. I created another tool that helps me calculate in detail how many calories I burn
for my individual activities. The Activity Calorie calculator allows the user to select an activity and intensity level of the previously selected activity.

I know I still have more weight to get off, and other topics to talk about. My goal is to take what I have learned over the last nine months help people become healthier. You will see more posts in the near future stay tuned.

Major Accomplishment

•April 2, 2010 • Leave a Comment

As of today April 1, 2010 I have been a software developer for over ten years. This is a very proud day for me. At the same time this is my tenth year anniversary at a company called Healthwise. I started at Healthwise as a programmer Analyst 1 April 1, 2000. I have come a long way in the last ten years. I have grown as a man, and as an individual. 

Its interesting to see where I started, and where I am now. A really good friend of mine Travis Dugan invited me to a users group at the time. It was a VB users group the other people in the group where professional developers with experience, and degrees. I just had an interest in programming, and wanted to explore what it was like to write software. At the time I started the group I was a software tester at a company call Design Concepts International. That was where I met Travis and developed the friend ship that we have to this day. With that friend ship and encouragement from him I started to develop my skills at writing applications. I still remember when I would call him with a question he would tell me to look it up, because of his persistence of me learning how to look things up on my own that has turned me into the developer I am today. I developed skills to write test applications for the company I was working for at the time. Things changed at the company I was working for our parent company itron decided to close our offices in Boise. I was encouraged by Travis and other friends to apply for an entry level developer’s job.

The job in question was a posting I saw on the Healthwise website. The job posting was for a manufacturing programmer Analyst 1. I figured what would it hurt if I didn’t get the job I would have at least tried. In February of that year I received a phone call from a Bob Long, and Brian Howard. Bob at the time was VP of technology at Healthwise and Brian was the manager of what would be the manufacturing team. The phone interview went really well to the point of being invited for an in person interview. At the interview I was introduced to people I developed good relationships with over the long years. The room was filled with five people, David Starr, Viki Smith, Brian Howard these are the people I remember the most from the interview. I even remember the question that David asked me. What did I want to be in five years? I told him I wanted to be a seasoned software developer. Well that was ten years ago and I am what I told David I wanted to be. I have been for a while working my way up from that Programmer Analyst 1 all the way up to a Software engineer 3. The progression has been fun I can’t wait to see what happens over the next ten years.

Random Thought

•March 10, 2010 • Leave a Comment

Found an interesting quote yesterday, while reinforcing my Object Oriented Programming concepts.

  • The goal is not to bend developers to the will of some specific patterns, but to get them to think about their work and what they are doing.  

Very cool update:

•November 11, 2009 • 1 Comment

With the extra time I have now I started working on my book again. My goal is to have chapter one finished before our local writers group meeting and have it proof read. Um not sure I am going to make that deadline. Of course I have been procrastinating but that is normal. I just came onto the realization that I need a name. The name I need will play a big role in one of my characters path through the story. The problem is. How do you pick a good name? The bad part is I know where I want to go, and what I want to tell for the rest of chapter one but this simple name has me blocked. I am in the process of name storming but it is going slow… Dang it I wanted to present this to our meeting the 19th since I won’t be in town next month when the group meets.

My goals after finishing chapter one is to use December to work on my synopsis. This will allow me to better plan out the rest of my book and what I want to accomplish in each chapter. We will see with all the distractions we have in our world today it is hard to just sit in front of the pc and just type.

Late fall 2009 update

•October 30, 2009 • Leave a Comment

I had a tough choice to make this fall. I ended up having to drop from class for the semester. It looks as of now I have to drop till at least next fall. I don’t have in my bank nor will I have $1200 for next semester’s tuition.

For now I need to concentrate on me. Last fall I put on a LOT of weight. I am just now getting back to a regular schedule for my working out. It is so easy to stop but so hard to start. It is the same with losing weight it is easy to put it on but so hard to take it off.

I can gladly say as of this week the book I started back in high school is making good progress. My goal is to have chapter 1 finished and reviewed and edited for the writers group meeting in November.