Developing in C++ on a Chromebook with Nitrous.io

Recently I purchased a Chromebook so that I could take advantage of the eight hour battery life and catch up on some word processing tasks that I had to do, obviously it excels at those things, but then I wondered, could I code on this thing? I tried tons of cloud IDEs and even went into developer mode and installed Ubuntu Linux so that I could boot into that and code, which would have seemed like the perfect solution but the font size was a killer and also the fact that well, I bought the Chromebook to keep things simple and this clearly was not doing it. After looking at shiftedit, cloud9, sourcelair, and even remoting into my mac I settled on nitrous.io (remember I wanted to code in C++ and it is imperative that the .h files linked properly which is the only reason that sourcelair lost).

Nitrous_io_screen_shot

Nitrous.io is a cloud based ide that appears to run on Amazon’s AWS, and they give you access to the console on the linux box that the ide runs on. The image above shows the ide open with the terminal docked to the bottom of the window. In the terminal window you will quickly find that sudo has been turned off, and you are limited to what commands you can run, however, if you look at the top menu bar you see something called ‘Autoparts’, this is the nitrous way to install packages such as the apache web server or PHP, but again, the point here is to use this ide for C++ development so we really need a compiler, right. You are in luck, the machine already comes with CMAKE installed, in fact, trying to add it from the ‘Autoparts’ menu just produced errors so to save yourself some heartache type:

 cmake -version

into the console. If you get the version back you are good to go. Now, all you have to do is set up CMAKE by adding the CMakeLists.txt to the root of the folder that contains all of your .h and .cpp files. I went ahead and created the folder workspace that you can see in the image above.  I added my .h file named GradeBook, and my .cpp file named GradeBookMain.cpp in the workspace folder. I then added the following text to the CMakeLists.txt file that I created in the workspace directory.

#Specify the version being used as well as the language
cmake_minimum_required(VERSION 2.6)
#Name your project here
project(GradeBook)

#This tells CMake to build GradeBookMain.cpp and name the executable GradeBook
add_executable(GradeBook GradeBookMain.cpp)

Notice that the min required version is set at 2.6, you should find 2.7 on your new box. I named the project GradeBook and then the important line add_executable(GradeBook GradeBookMain.cpp) points to my .cpp file that contains the main function and contains the name of the executable which will be GradeBook.

The easiest way to create all of the necessary dependencies is to run CMAKE wizard mode at this point by issuing the following command at the prompt in your workspace folder:

cmake -i

Now all you have to do is answer the questions and CMAKE will do the rest, for the record I answered No and Debug respectively.

Now, to build your application just type make at the command prompt. If all goes well you should see something like this:

syntax_error_console

If you have some syntax errors to clear up you should see something like this:

syntax_error_console

Adding grid like ellipsis and tooltip with full text to your extjs form text fields

One of the nice features in the extjs grids are the fact that they don’t just leave your text hanging. If your text overflows the cell bounds then an ellipsis is appended to the text and the rest is cut off, with the user well aware of the fact that there is some amount of text that they can not see. Wouldn’t this be a nice feature for the textbox as well? The following code will add the ellipsis using simple css and the fieldCls / focusCls configs of the text field, then add a tooltip using just the quick-tips data attributes to show the user the full text of the textbox.

The CSS

focusCls

The goal here is to stop showing the ellipsis when the user clicks in the field to edit the text. To achieve this the default class is passed on focus without the ellipsis class.

fieldCls

This is where the class that specifies the text-overflow attribute is passed, that way any fields just sitting there out of focus have an ellipsis ready and waiting for that long text.

 The JavaScript

You can find the code on JSFiddle, however, here is the brief explanation and a caveat or two. First, when overriding the afterrender event you will notice that it is looking for a config named initialized, and when this is set to false it goes ahead and the function itself to the change event of the text field, this way the tooltip is visible on show, when you manipulate it using setValue(), or when the user types into the text field (this is the blur function).

The Example

Extjs 4 Plugin that adds tooltips only when text overflows the grid cell

Recently I was asked to make a tooltip appear with the text from a cell within when the user hovers over the cell – this is pretty straight forward, and examples exist everywhere, however, to throw a twist in the tooltip, the text was only supposed to show when the data actually overflowed the cell thus creating the ellipsis. I started to code and came up with a pretty straightforward solution, add a renderer to the column programmatically when the grid was rendered, however, I soon discovered that this method has some problems. First, if there was already a renderer present the new addition would simply overwrite the existing renderer – not cool. Second, in the case of a ‘tpl’ column like the row expander where the value in the value parameter (yes I meant to write it like that) is undefined then the whole thing blew up. It took a bit of time to overcome these obstacles so I wanted to take a few minutes and share my discoveries in case anyone else out there runs across the same issues.

Ext.Function contains quite a few features that everyone should become familiar with; I choose to chain the original renderer to the new function that handled the logic for the tooltip using the ‘createSequence’ method. http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.Function-method-createSequence I could do this because I was only appending the metadata’s tdAttr. The fact that the passed function is called with all of the original functions parameters gave me access to the original renderer’s value which are found here: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer. The parameters that we are concerned with are the value of the cell (a), the metadata (b), the column index so that  we can get the current width, and the view.

Next, I relied on Ext’s Text Metrics (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.util.TextMetrics) utility that allows you to get the width and height in pixels of a string that you pass it.

Finally, this was added to the grid’s column render event which is called when the grid is first rendered, however, if the user decides to

Extjs 4.2

Download it via GitHub

Ext.define('plugin.showConditionalToolTip', {
        extend : 'Ext.AbstractPlugin',
        alias : 'plugin.showConditionalToolTip',
        init: function(grid){
            grid.on('columnresize', function(){
                grid.getView().refresh();
            });
            grid.on('render', function(){
                var tm = new Ext.util.TextMetrics();
                Ext.Array.each(grid.columns, function(column) {
                    if (column.hasCustomRenderer == true){
                        // This column already has a renderer applied to it
                        // so we will be adding only the tooltip after the
                        // custom renderer has formatted the data.
                        column.renderer = Ext.Function.createSequence(column.renderer,function(a,b,c,d,e,f,g){
                            // There could be instances where the column actually has no value, such as
                            // row expander, etc.. check for that and only apply the tooltip if the column
                            // has data.
                            if(a){

                                // Check to see if the entire data string is visible in the cell, if it is then disregard
                                // otherwise add the tooltip
                                if ((g.ownerCt.columns[e].getEl().getWidth() || 10) <= (((tm.getSize(a).width + 15) || 0))){
                                    b.tdAttr += 'data-qtip="' + a + '"';
                                }
                            }
                        });

                    } else {
                        // Here we do the same as above, just w/o the sequence as there is no existing renderer
                        column.renderer = function (a,b, c, d, e, f, g){
                            if(a){
                                if ((g.ownerCt.columns[e].getEl().getWidth() || 10) <= (((tm.getSize(a).width + 15) || 0))){
                                    b.tdAttr += 'data-qtip="' + a + '"';
                                }
                                return a;
                            }
                        }
                    }
                });
            });
        }
    });

Number one new year goal -share more – my personal leadership philosophy

People usually look to the new year as a time to start doing something that they know they should have already been doing a long time ago, that said, I had a rather busy year last year and want to take some time this year to start posting again regularly. Recently I was tasked with coming up with a personal leadership philosophy, something I did a few times before, but dare I say that I am older, not necessarily wiser, but may have seen a bit more than the last time I took a stab at this. If you are in any of the classes I have coming up I would recommend that you give this a quick read, as you will find my grading policy, and the reason why  I just can’t go easy on both the assignments or the grading.

If your actions inspire others to dream more, learn more, do more, and become more, you are a leader. – John Quincy Adams

My personal philosophy of leadership is best summed up by this statement attributed to John Quincy Adams, the sixth president of the United States – inspire others to overcome obstacles, personal and organizational, and even more inspire those around you to never stop learning. Adam’s words are a prelude to what Robert Greenleaf would consider servant leadership, where one “begins with the natural choice to serve first, and then conscious choice brings one to aspire to lead”. We’ve all heard the term ‘to give back’, yet how many of us actually act on the urge to give back? How many can say that they are propelled forward by a belief that they will be able to help those that may find themselves in the same circumstances that they once were in themselves. I would like to invite you on a journey through my experiences in the next few paragraphs so that you may gain a clear understanding of what I will expect from you as well as how I formed these expectations.

Leadership Philosophy

First, let’s be clear, the pen may be mightier than the sword; however, we all know that the road to hell is paved with good intentions. A beautifully written philosophy is meaningless unless it is backed up by actions. How can I possibly ask you to do something that I would be unwilling to do myself? With that in mind understand that I will never ask you to take on a task that I would be unwilling to do.

I would like you to stop and think back right now to those who have had an impact on your path; they could be parents, coaches, teachers, managers, leaders, neighbors, and friends. I would be willing to bet that those who stand out the most were the ones that were not easy on you, that pushed you farther than you thought possible. Make no mistake; I will assign you tasks that will be considerably more difficult than those you have faced in the past which will require careful reflection, concentrated effort, and the ability to work as part of a team – if I for one second did not believe that you could accomplish the tasks that I have given I would not have assigned them in the first place.

Integrity in all that you do is the cornerstone to Mutual Respect and trust – Let me tell you a story if I may, I like to call it the time clock problem. I spent a considerable time of my early career in the back of kitchens throughout Europe. I only mention this as many of you know air conditioning is non-existent in most of Europe, and labor rules give the upper hand to employees and employers are often dealt with harshly for the smallest infraction. Most of us worked in the back of these kitchens were not European, and we never paid much attention to these rules, we worked when work needed to get done and we took breaks when possible, not when mandated, apparently, the management overlooked the fact that during peak times everyone was on the job and trained their focus on the off-peak times where everyone was on a break. We all knew that we were not abusing our time; we had integrity, and a collective work ethic that made that impossible, what we did not have was the trust of the management. One afternoon a time clock appeared on the wall.  This was a devastating blow. It questioned everyone’s integrity; respect left the kitchen, and trust was broken. The lunch rush was impeded by these mandatory breaks, and off-peak times were being occupied by wiping down clean counters, driveways, and crystal clear windows. Single-handedly this device destroyed the morale of a functioning team. After three weeks of slow orders and unhappy customers the clock disappeared, however, trust and respect never came back. I will always come in expecting that you will have the integrity to do what is right, please do not let me down, as I have learned that trust and respect are much harder to gain than they are to lose. I also am very aware of the unintended consequences that something as seemingly small as a time clock can bring to a team, I will do my best to make sure that I never put this team through a “time-clock moment”; if you see this happening consider it your duty to call me out on it there may be a reason that you are not aware of and I may not have communicated this effectively. I need to know.

Communication is the key that unlocks doors – The most frustrating managers, leaders, or teachers that I have encountered have been those that shroud themselves in secrecy. Working in a vacuum is frustrating and saps morale; you deserve to work in an informed environment. One of the greatest leaders I have had the fortune of working for was (Army) Col. Lukey, he held weekly staff meetings that lasted no more than 15 minutes, the sole reason was to disseminate information from higher up to the entire team, and illustrate how everyone fit into the bigger picture. I hope to do the same, you should have no doubt in your mind of the importance that each of you bring to the organization.

Risk Taking is paramount to success – There is a quote on the wall of Facebook’s headquarters that reads, “Done is better than perfect”. Don’t be afraid to not be perfect, the world is full of perfect ideas that never get done, and imperfect ideas that are successful because they got done. Don’t be afraid to take risks. The only way to ensure that you never fail is to never do anything, seems logical. I have seen so many individuals with the potential to accomplish great things succumb to the fear of failure. I will never criticize those who throw themselves into a new task; take on more than they thought possible, push the boundaries of what they thought was possible. Understand, however, that this is not a free pass that allows you to turn in sub-par work. You should always aim to do your best; remember integrity in all you do.

Fair Treatment – There are no guarantees in life except maybe this, life will not be fair. I can’t change that, however, I can assure you that I will be fair in rating your performance. I come from a ‘hard science’ background and never could understand the subjectivity in many subjects that were taught in school. I will always make sure that you know up-front, not three weeks after something is done, what is expected, and how your performance will be rated. I will make it one of my goals to create a culture where management extends this service to everyone that they supervise. After all, without concrete expectations, how are you supposed to succeed?

Add client side download as CSV file capability to any Extjs4 grid using HTML5′s new download attribute

OK, you have created a really nice app, that contains a lot of data, and now the customer wants to download selected records into a comma separated value spreadsheet. You don’t want to go back to the server, run the query, and be bothered with sending a list of id’s that the user has selected, that would be so 2010, and it would, well, take some time, and your users are particularly impatient! You are on top of the latest trends and have heard of the download attribute of the a (link) tag. This attribute lets you specify a filename and pops up a ‘save as’ prompt on the client machine. No more server side requerying and transferring just for the sake of creating a file save dialog, I mean haven’t you already done enough getting the data into that grid in the first place?

There are two problems hidden in this task, first – what to do with old browsers, and second what happens if we need to implement a paging grid. Let me address both by stepping through the plugin code piece by piece:

1) Where do you want the download records button to appear, the default is to create a context (right click) menu and show the user a button indicating they can download the records, however, for those users that just need to see the button you can pass

downloadButton   : 'top',

in the grid and it should create or append a button to a toolbar at the top of the grid.

2) I know what you are thinking, ‘I’m using paging, my users want to pick and choose records across multiple pages!’. Don’t worry I had the same idea, in the init function you will see that an array named selectedRecords is created and that listeners are set on the ‘select’ and  ’deselect’ events of the grid. These two listeners point to functions that add and remove selected records to the array. A third listener waits patiently for page changes and then re-selects the records that the user had previously selected on the page (hey it’s an added bonus!). The function onPageChange handles all of the reselecting.

3) Ok, this all makes sense but what about the users that are stuck on old browsers? The magic of the new download attribute has been lost on some browsers, i.e IE, so for those users a window with an old school HTML table is popped up allowing them to just cut and paste the selected records, or print the page.

Download the plugin here :  https://github.com/jmcdonald69124/extjs4DownloadGridCSVPlugin

Save the plugin to your Extjs ux folder.

Make sure you add the following to the required files:

Ext.require([
    'Ext.ux.ExportRecords',
 ]);

Add the plugin to a grid like this:

plugins :[{ ptype :'exportrecords',  downloadButton  : 'top' }],