Ionic 2 (beta 6) / Angular 2 - Styled Upload / Attachment compoment

According to this issue: github.com/driftyco/ionic/issues/6628 we needed a solution to the problem. It ended up in a little custom component. Maybe this will be a temporary solution to others too or it could be basis for an ionic included solution.

Attention: As this was my first typescript, angular 2 component and also the first project with these tools, please be merciful if it includes bad practices or other mistakes. It is more a first draft than a final solution. Any improvements and fixes are welcome. We used the common practice for this styling issues and translate it to Angular. A hidden input element combined with a button doing the work.

Usage is simple just use the newly created tag ant tell it which ionic icon to use for the button. Also a callback must be defined which is executed after files are selected (FileList is passsed as parameter to it):

<upload-button [btnCallback]="addCallback" [btnStyle]="icon"></upload-button>
import {IONIC_DIRECTIVES} from "ionic-angular";
import {Component, ElementRef, Input, Inject, ViewChild, Renderer} from "angular2/core";
import {Log} from "../../log";

@Component({
  directives: [IONIC_DIRECTIVES],
  selector: "upload-button",
  template: `<button (click)="callback($event)" clear>
               <ion-icon name="{{btnStyle}}"></ion-icon>
             </button>
             <input type="file" (change)="filesAdded($event)" style="display: none" multiple #input />`
})

/**
 * Upload button component.
 *
 * As native input elements with type file are diffcult to style, it is common
 * practice to hide them and trigger the needed events manually as it done here.
 * A button is is used for user interaction, next to the hidden input.
 */
export class UploadButton {

  /**
   * The callback executed when button pressed, set by parent
   */
  @Input()
  private btnStyle: String;

  /**
   * The callback executed when files are selected, set by parent
   */
  @Input()
  private btnCallback: Function;

  /**
   * Native upload button (hidden)
   */
  @ViewChild("input")
  private nativeInputBtn: ElementRef;

  /**
   * Constructor
   * @param  {Renderer} renderer for invoking native methods
   * @param  {Log}      logger instance
   */
  constructor(private renderer: Renderer, @Inject(Log) private logger: Log) {}

  /**
   * Callback executed when the visible button is pressed
   * @param  {Event}  event should be a mouse click event
   */
  public callback(event: Event): void {
    this.logger.debug("upload-button callback executed");

    // trigger click event of hidden input
    let clickEvent: MouseEvent = new MouseEvent("click", {bubbles: true});
    this.renderer.invokeElementMethod(
        this.nativeInputBtn.nativeElement, "dispatchEvent", [clickEvent]);
  }

  /**
   * Callback which is executed after files from native popup are selected.
   * @param  {Event}    event change event containing selected files
   */
  public filesAdded(event: Event): void {
    let files: FileList = this.nativeInputBtn.nativeElement.files;
    this.logger.debug("Added files", files);
    this.btnCallback(files);
  }
}

/bin/bash: error while loading shared libraries: libgcc_s.so.1

After a couple of Portage-based updates, including GCC, I was the victim of a loss of connection to my headless RaspberryPi server. Afterwards I was not able to use "su" or "sudo" because of the following error message:

error while loading shared libraries: libgcc_s.so.1: cannot open shared object file: No such file or directory

RaspberryPi - A little USB device speed test

After installing sucessfully Gentoo on my Raspberry Pi, I decided to do a little speed test one of my USB sticks to find the best filesystem to enhance Pi's storage capabilities. The candidate is the SanDisk's Cruzer Blade with 32GB (PCI 0781:5567).

RaspberryPi - Install Gentoo (headless)

After buying a Raspberry Pi for home automation and a building a little home server, I decided to install again Gentoo as my favorite OS. There a lot of Tutorials out there which handles this topic. Also there are some of them that describe the steps to do for a working installation without monitor and keyboard. So, I want to thank all the contributors, blog an howto writers that have inspired me to write this one. Even if I try to comment every step in detail, this is more like a Todo list for myself.

Eclipse & jrunscript: Auto completion

To get jrunscript auto completion working inside Eclipse, there are only a few steps needed. First the source code (including JSDoc) of the used JDK has to be extracted. Jrunscript's global functions and objects are located in the init.js file which is part of the tools.jar. For my Win7 / Cygwin setup I used the command line:

PhoneGap Build - Facebook Connect (Part 3)

PhoneGap Build - Facebook Connect (Part 3)

After helping many people with Part 2 there is the time to update the guide. If using PG > 2.9 you have to slightly change your config.xml for PhoneGap's build serviceThe correct syntax now is the following:

MongoDB as Cache: Some performance tests

As we needed some kind of ID cache for synchronization purposes, which is fast and durable. By having some experience with CouchDB, a NoSQL solution seems to be worth a try. I decided to do some performance tests against the already available and running MongoDB in our server infrastructure.

Formerly we filled a LinkedList (yes, it is a bigger Java project as the "java" tag suggests ;)) by an expensive SQL database at server start (Oracle or SQL Server). Afterwards we had to check, again very expensive, with "contains" if elements are inside. Also the list was limited to a fixed size and contained only the newest IDs.

Javascript - Getter are evil? - Some performance tests

According to this nice article Javaworld (09-2003)  I decided to check getters and setters runtime behavior with JavaScript inside different browsers and on different machines. I tested also the different initialization possibilities, with some unexpected, but not really surprising, results.

Some interpretation tries... Chrome seems to be very constant in each kind of implementation, also it slightly improve its performance in newer versions. Firefox has the highest variation, but again newer version have better times. IE9 does a good job in this case, constant times and very fast. As expected IE8 has runtime problems even with this simple script.

It would be nice if some people add their results, maybe with some more browser versions, like Safari, IE10, Opera, ...