technology inspiration

AngularJS for newbies

2016-10-17T20:00:00.000+02:00

A few days ago Angular was announced in the final version 2.0.0. Time to make a review on the version AngularJS 1.x and on some best practice examples.

Architecture

The MVC* model

The AngularJS architecture use the MVC (Model View Controller) design pattern, a two-way data binding and dependency injection. Unlike some other MVC frameworks AngularJS extends the HTML code but, instead of abstracting it. With the MVC pattern, the application logic is separated from the user interface layer. The controller get all requests from the application and worked with the model to prepare the data for the view. The view use all these data to present them to the user.

The Model:
The model is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself.

The View:
A presentation of data in a particular format, triggered by the controller's decision to present the data.

The Controller:
The controller responds to user input and performs interactions on the data model objects. The controller receives input from the injected factory service and then performs business operations that modify the state of the data model. With the two-way data binding any changes on the view layer could be detected in the controller.

The Service:
An additional layer will be archived by use a factory service to fetch the data from the back-end system. In the factory service the data will be validated, enriched and hold. This will make the controller lighter and improve performance. A target is here to make the controller as small as possible. In combination with Dependency Injection, the factory services that called the back-end system, is used in the controller by inject them.

AngularJS 1.x

To make managing a portion of an HTML page of AngularJS, this must be enclosed in an element with the attribute "ng-app". After loading the page index.html, AngularJS searches for the element "ng-app" and analyzes thereof enclosed area. The application will be bootstrapped by detected this area.

<body id="myapp" ng-app="app" class="full-height">
   <div class="full-height">
      <div class="header" ui-view=""></div>
      <div class="menu"   ui-view="menu"></div>
      <div class="split"  ui-view="splitter"></div>
   </div>
   …
</body>

Now the ng-module concept comes into the focus. The ng-module is a global place for creating, registering and retrieving Angular modules. All modules that should be available to an application must be registered using this mechanism. A module is a collection of services, controllers, filters, directives and configuration information. Ng-module is used to configure the dependency injection part. We named the ng-app “app”, so angular is search in the javascript module files this name.

Ng-module is also used to inject foreign packages. In our programs we inject the ui-router service, toastr, angular material, underscore and Kendo UI (alternative Google charts).

In our application the next element is now the ng-run, these element is the initial start point for the application. We use these point to start the current state of the application with the ui-router part. Our application knows at this construction point only one state (or if you will to say, only one page “detailview”). But the ui-router part has also other issues, because it separates parts from each other, make them simpler and bring some performance improvements.

With the design of three parts (header, menu and detail) we get a flexible state based concept that allow us to create several pages in one structure in combination with the router concept.

Every element could now be defined separated in the config file of the router, so that based on the state of the application, several pages could be displayed. The combination allow us now to define per view a html sub-page and a controller for this part.

   .state('tileview', {
                url: '/',
                views: {
                    '': {
                        templateUrl: './js/header/header.html',
                        controller: 'headerController',
                        controllerAs: 'hc'
                    },
                    'menu': {
                        templateUrl: './js/menu/menu.html',
                        controller: 'menuController',
                        controllerAs: 'mc'
                    },
                    'detail': {
                        templateUrl: './js/detail/detail.html',
                        controller: 'detailController',
                        controllerAs: 'dc'
                    }
                }
            })

Controller are defined in AngularJS using the property "ng-controller". Controller and view communicate via the "scope", a container can be accessed on its contents from both sides. With the "{{}}" notation can be accessed by means of a one-way binding in HTML on elements of the "scope". The data can be displayed, but not restored. Two-way bindings allow writing in the "scope" and logically can only be used on input elements. To get the data from the back-end system, we inject factory services in the controller.

The ng-provider service factory is the next main part of the concept. These services are singleton objects and are functions which, in turn, are created by a service provider. The service providers are constructor functions. When instantiated they must contain a property which holds the service factory functions.

Components Folder

The components folder will contain the actual part of the angular app. So you could think of this like a multiple mini AngularJS application inside of your AngularJS application.

In this example we describe the header section. The header part is separated into four files and for simple collection reasons separated in an own folder named “/header”. So for every part of the application we get components folders, these folders holds all necessary information for a component.

header.html	The html page. The scope is presented by “hc” (headerController).
header.module.js	Makes a module for this part, so that is could be injected by other element and factual holds other modules for a deeper nesting.
header.controller.js	The controller, based on the same module name.
header.service.js	The factory service, based on the same module name and injected in the controller. This service fetches data from back-end system and prepare data for the controller.

The folder structure of the app looks like this:

js/	header/ menu/ detail/ common/	header.html header.module.js header.controller.js header.service.js menu.html menu.module.js menu.controller.js menu.service.js detail.html detail.module.js detail.controller.js detail.service.js service/ directive/ filter/ constant	message.service.js ... ... ... ...
...

Implementation

No we have a look at some of the key features of AngularJS.

Cleancode

When you work in a team, it is easier to use a style that is accepted from all over the world. My code examples based on the clean code style guide from John Papa (@John_Papa ) for AngularJS.

Component Design Example: header

The following code examples shows the combination of the header part. Through the loose coupling between the areas, we can get easy to maintain system.

Header module (header.module.js)

The module name for this area is “header”. The controller and the service factory get the same module name for this area and could be loaded as package when needed.

(function () {
    'use strict';
    angular.module('header', [
    ]);
})();

Service factory module (header.service.js)

The service factory get the initialization during the injection in the controller. The factory send back the available services. In this example we inject the $http service. The $http service is a standard function from AngularJS. $http returns a promise so we can return back the promise immediately. This means that the “.then” part runs after the result from the back-end systems arrived.

(function () {
    'use strict';

    angular
        .module('header')
        .factory('headerService', headerService);

    headerService.$inject = ['$http', '$q'];

    function headerService($http, $q) {
        var service = {
            user: [],
            client: [],
            loadHeaderData: loadHeaderData,
        };
        return service;

        ////////////

        function loadHeaderData() {
            return $q.all([loadUserData(),loadClientData()]).then(function (result) {
                service.user = result[0];
                service.client = result[1];
            });
        }

        function loadUserData() {
            return $http.get('../js/header/user.json');
        }

        function loadClientData() {
            return $http.get('../js/header/client.json');
        }
    }
})();

Controller module (header.controller.js)

The controller get now the factory service injected. An asynchronous call was started during the start process and will be finished when the promises get a result from the back-end system.

(function () {
    'use strict';

    angular
        .module('header')
        .controller('headerController', headerController);

    headerController.$inject = ['headerService', 'messageService'];

    function headerController(headerService, messageService) {
        var hc = this;

        hc.user = [];
        hc.reload = reload;
        hc.spin = headerService.spin;
        loadData();
        
        /////////
        function reload() {
            messageService.addMessage('reload', 'reload', null, null);
        }
       
        function loadData() {
            headerService.loadHeaderData().then(function () {
                hc.user = headerService.user;
            });
        }
    }
})();

In our code example we used simple json structure for the client.json

{
    "client": "D01",
    "id": "11"
}

and for the user.json.

{
    "name": "Donald Duck",
    "city": "Duckburg"
}

Both files are stored in the same "header" folder.

Html Part (header.html)

The databinding between Controller and View Model, which was served by the scope (in our case the scope get the name “hc” – headerController) is realized by “{{}}” the two brackeds. In this example hc.user.name holds the information about the user name. “hc” is the scope variable, “user” is the collection and “name” holds the information about the user name.

<div class="pure-g header-box">
    <div class="pure-u-14-24 header-pos">
        <label  ng-if="::hc.user.name" class="header-user">{{::hc.user.name}}</label>
    </div>

    <div class="pure-u-7-24 header-pos">
    
    </div>

    <div class="pure-u-3-24 header-pos">
        <div class="pull-right pointer" ng-click="::hc.reload();" title="Reload">
            <i class="fa fa-refresh" ng-class="{'fa-spin' : hc.spin}"></i>
        </div>
    </div>
</div>

Ng-if shows the information about the user only, when the collection exists. AngularJS has per default a double binding on the element by “{{}}”, to reduce this binding during the refresh of a page, it is possible to create a single binding by add the both double points “::”. This is a performance issue, and in this case the user information is only one time updated. So it is not necessary to update this information more than once.

$http and Promises

$http service is used to get data from the back-end system. $http give a promise back and this is one of the key factors to use AngularJS, other concept use promises as well and in Angular 2.0 observables are the new concept, but based on the request of the most backend systems, this is one of the killer features of use AngularJS. This is not new and is available in other MVCs as well (but in AngularJS automatic integrated in the main core), but this allows you to build fast and small application in a short time. The old way is to use callbacks, but this often ends in a callbacks nested callbacks, nested inside callbacks … (After this you could not maintain such a system any more).

A promise is a proxy for a value not necessarily known at its creation time. With promises, rather than an asynchronous call accepting a callback, it instead returns a promise. The calling code can then wait until that promise is fulfilled before executing the next step. To do so, the promise has a method named “then”, which accepts a function that will be invoked when the promise has been fulfilled.

Promises helps to run functions asynchronously, and use their return values when they are done processing. There are various ways to combine them. With race conditions, chaining and combining it is possible to run complex based combination of data fetching in the simple way.

In the controller service the data will be updated when they are available from the injected factory service “headerService”.

//controller
loadData();

function loadData() {
            headerService.loadHeaderData().then(function () {
                hc.user = headerService.user;
            });
        }

As result usually a json object is fetched. In the factory service the data will be fetched asynchronously from the back end service.

//factory 
function loadHeaderData() {
         return $http.get("Z_CR_BSP_GET_USER_RUNTIME_DATA")
                .then(function (result){
                   service.user = result;
                });
}

Now when the data returns, the system automatic update the front end part. How easy is this! So this is a non blocking asynchrony code combine with modules in the router. These combination makes it very fast, module oriented and easy to maintain, instead of a callbacks, that nested in callbacks, that nested in callbacks ….

For common failure messages we abstact the $http service in a separate module with the name rest.service.js. This allows us to create common messages when the connection between the front-end part and back-end system fails. What does this mean? Instead of inject the $http service in the factory service of a module and manage the failures there, we inject the common rest.service.js in the factory. So if a failure from the connection between the front-end system comes up, we could there give information to the user on a common module and have not implemented it everywhere.

Ng-controller

There are more options to set a controller for a html file. In the ui-router module the controller was set externally (see ui-router). The other way is used in the html part. Here the controller will set when then html part was called by a part of the code component. In this example we implement this in the chart.html file chart.controller.js.

<div class="charts" ng-controller="chartController as cc">
       ...
    </div>
</div>

Broadcast events

So now we have a loose coupled system, with the maximum on parallelization on back-end request. Between the controllers, we implement a broadcast event, so that on a click on the header part, the tiles used sub-elements could be reloaded.

Therefore we inject the “messageService” in both controllers. With the click event on the html Page ng-click="hc.reload();" in the controller of the header “headerController”, we fire the messageService event.

function reload() {
         messageService.addMessage('emailController', 'reload', null, null);
}

The messageService factory is from type singleton and is only one time initialized.

(function () {
    'use strict';

    angular
       .module('common.service')
       .factory('messageService', messageService);

    messageService.$inject = ['$rootScope'];

    function messageService($rootScope) {
        var service = {
            addMessage: addMessage,
            message: {}
        };

        return service;

        ///////
        function addMessage(receiver, type, value, text, caller) {
            service.message = {
                receiver: receiver,
                type: type,
                value: value,
                text: text,
                caller: caller,
                timestamp: new Date()
            };

            $rootScope.$broadcast('messageAdded');
        }
    }
})();

In the controller of an element that should be reloaded (example tileController), we search in the global scope variable for updates, and if a message was received for this controller, we fire the event based on the request. This allow you to combine light message sharing between the controllers. For heavy data loading between two controllers it is better to create an own factory service.

$scope.$on('messageAdded', function () {
            var message = messageService.message;
            if (message && (message.receiver === 'emailController')) {
                switch (message.type) {
                    case "reload":
                        loadData();
                        break;
                }

            }
        });

Ng-repeat

The ng-repeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item. This allows you to repeat given collection of data. In our project this could be tiles or grid combinations. Ng-repeat could be insert in every type of html tag.

Each size of the component grid could be defined with a other html file. This allows a maximum of flexibility and also an easy to maintain the system.

Build process

We combine all AngularJS module files into one big application javascript file. This could be done with gulp process We make then the javascript file available in the index.html file. When combine all javascript parts in one javascript file, it is necessary to bring the elements of the modules (*.module.js) at the first place.

Now have a look at part II of the AngularJS 1.x version. If you are looking for Angular 2.0 example, please check out this.

If you want to check-out one of my applications that was build with angular 1.x and is available in the app store, follow this link.

Shell script to generate HTML5 gallery

2014-10-10T12:52:00.001+02:00

You know that, with the years, some collected digital photos are languish in folders. Although there are all kinds of tools to manage this, but if you want to make it public and you do not want to manually bind in a HTML5 file, you need something that do this binding automatically for you.
For this we use a Bash (shell) script, that can be easily created and modified on Linux / Mac systems.
This script produce several HTML5 files from a flat folder structure that includes an image collection and creates some beautiful sliders based on CSS3. Have a look at the result here on berndmartin.net.

[Tweet this image]

The shell script create a main page which is named "gallery.html" in the folder "photos/", in this file you can see an image for each sub-directory. When you open these link behind an image, you will directed to the picture slider of the sub-directory which is named as "photos/[sub-directory].hmtl". So the name of the sub-directory is also the name of the created HTML5 file. A hyphen in the sub-directory is displayed as a blank sign for the designation (the subfolder "photos/new-york/" is displayed as "NEW YORK"). The folder structure is flat and end with "photos/[sub-directory]/".

The image size is controlled by the CSS3 file and in my setting it is 640 px (Pixel). It is recommended previously to reduce the size of the pictures in any sub-directory folder so that the charging time is reduced on the web. On a Mac you can use this command to reduce the size of each image at once to a maximum high or width of 640 px.

sips -Z 640 *.jpg

Here you can download the script that generates the gallery and the other html files. You can run this script on Linux, Unix or Mac systems. Therefore you have to executable the script with this command.

chmod +x photo-gallery-berndmartin.sh

Now you can run the script with this command.

./photo-gallery-berndmartin.sh

Make sure that you use the same folder structure that begins with "photos/". The nice thing is now, if you add more pictures and folders, you can simply run it again.

vi editor commands for Unix, Linux and Mac

2014-10-08T11:00:00.003+02:00

About editor might have been written as about other issues, especially about the vi editor already more. He is one of the older representatives and remains one of the most important tools in Unix, Linux, and perhaps also in the Mac environment. Of course, today there are many editors who have become each an important part of the development and administration process, particularly noteworthy are sublime text and textpad. But one of the fastest representatives at all, not only on servers, is the editor vi.

vi is considered controversial and also acts as a deterrent to some, because it works a totally different ideology follows. In the operation of all other programs and editors one is usually equal in editable mode, not in vi, you have to give him only a instruction feedbacks that you would now like to add something. Other functions are only some getting used to, but the learning curve is very steep and with a few keystrokes you can reach over with your mouse and keyboard from other programs.

This short command summary of the vi editor (and his clones VIM, calvin, elvis, lemmy, Nvi, WinVi, ...) is not intended as a compendium to document all the commands and the honored readers alike to take the courage that was indeed documented with countless here commands the reference of the writer, but also at the same time the desire to learn this editor was taken.

How to start with vi

First we open the editor on the console with this command and create the non existing file "test.txt".

Then we want to insert something by first press the key "i", now we are in the insert mode, now we write the words "Hello World".

Now we leave the insert mode, by press the "ESC" button, save the results and close the vi editor by insert the keys ":", "w" and "q".

Now you are ready to perform more experiments and experiences.

subtitle	command	description
help	vi -h	start help page of vi editor (man vim)
modi	normal mode	vi knows three different modi, the normal mode (usally to open a file and navigate in the lines)
	insert mode	switch from normal mode to insert mode or to use command line mode by press one of this characters "i", "I", "a", "A", "o", "O", "c", "C", "s" or "S", to go back to normal mode use the ESC button
	command mode	usally used to save a file with insert :w or leave a file with :p or do both with :wq, to view file in coloured mode set :syntax on
start	vi myfile.txt	open vi editor with file myfile.txt OR create a new file when file does not exits
	vi -R myfile.txt	open vi editor with file myfile.txt in read-only modus
	vim myfile.txt	open vim editor (vi clone)
	vi +99 myfile.txt	open vi editor with file myfile.txt on line 99
	vi -r myfile.txt	recovery of a corrupt file myfile.txt (after a crash of vi)
	vi +/PADERN myfile.txt	opens file myfile on first position with PADERN
basic	:q	quit editor
	:q!	quit editor force
	i	start insert mode (more on subtitle insert)
	ESC	leave the current insert mode
	:w	write to file
	:w!	write to file force
	:w myfile.txt	write to file myfile.txt
	:wq	write to file and quite VI
	:syntax on	start coloured mode
navigation	h	go left
	j	go down
	k	go top
	l	ro right
	:99	jump to line 99
	99	takes you 99 lines down from your current position
	0	go to first character of line
	$	go to last character of line
	/PADERN	search "PADERN" forward in file
	?PADERN	search "PADERN" backward in file
	n	same search as before forward
	N	same search as before backward
	5G	go to the 5 line in file
	G	go to the end of the file
redo, undo	.	redo last command
	u	undo last change
	U	undo last change in whole line
delete	dw	delete word
	dd	delete line
	dgg	delete everthing from your current line to the top of your line
	D	delete until end of line
	:g/^$/d	delete all empty lines
	:g/with this/d	delete all lines with this
	:g/^\s*$/d	delete all lines that are empty or contains white space
	:v/^\s*"/d	delete all lines that are not empty or contains white spare
	:v/this\\|that\othersl/d	delete all lines that not this, that or others
copy and paste	"ayy	copy current line in named buffer a (vi could work with several buffers a,b,c)
	"add	delete current line in named buffer a
	"ap	paste from buffer a in
	"ayG	copy all lines to the end of the file in buffer a
replace	:g/old text/s//new text/g	combined with ex command :g, replace "old text" with "new text" in all lines
	:s/replace this//	"replace this" with nothing in all lines
	:%s/r/s	replace r with s
	:%s///g	replace all ^M, therefore you must enter and then
enhanced insert	i	start insert mode before current position
	I	start insert at the beginning of the current line
	a	append after current character
	A	append after current line
	o	start insert on a new line below
	O	start insert on a new line before
	s	substitute one character and start insert mode
	S	substitute line and start insert mode
several files	vi file.1 file.2 file.3	open vi with file.1, file.2 and file.3, file.1 is first visible
	:n	open next file.2, and so on (maybe it is necessary to save the file that you edit before)
	:rew	rewind, at the end of all file.*, show file.1 again
	:e#	open file before (opposite from :n)
	:e nextfile.txt	opens nextfile.txt, maybe it is necessary to save the file that you edit before or you open it with :e! nextfile.txt
	:r myfile.txt	insert file myfile.txt on current position
	:! ls -ltr	enable you to call the shell command ls -ltr from vi

If, despite all the care one error have crept in, so I ask this to be made known to me.

URL QR code generator

2014-09-19T11:33:00.003+02:00

QR codes are very practical when the physical things should be connected to the digital world by a print or a sticker that transports information in a QR code. The information can be extract by smartphones, tablets or scanner and read the accordingly the information in form of a URL, e-mails or key values refer and give you create opportunities also in Marketing to connect the things with your domain. Learn how to combine this with your own shortener URL service.

The main convenient is that the user does not have to write long destination information or the information is processed automatically like it is in logistics. The capacity of QR codes is of course limited and also depends on the size, but it is a simple digital rule: the shorter the code is, the higher the quality.

Originally, the QR code was developed in Japan, but the number of applications today is diverse and has detail found in all possible areas. I am mostly interested in transporting of URL information and use this in my Marketing activities. Accordingly, it is always useful when a website link is transported, to shorten the URL by a service before the QR code is generated.

To create your QR code, there are several options out in the world wide web, I only make a simple variant in form of a google app (a) and integrate the service in the existing URL shortener service (b) solution. Both based on the same google QR code generator:

a)
This short code example create a QR code for any website: simple QR code generator

b)
This plugin for yourls.org use the google code generator and creates the QR code when you add .qr to the shorten URL on your service, see the example for http://bmline.qrcode here http://bmline.de/qrcode.qr

Both example produce a image that could be used in the field what you want to make it easier for your customers. Try it and find your usage possibility.

Progress OpenEdge RESTful Webi BusinessObjects Viewer

2014-08-29T15:22:00.001+02:00

To get everything out of your SAP BusinessObject Business Intelligence 4.x (BO BI Webi) take a look at the RESTful web service SDK that allow you to get even more than just some reports. To start the first experiments, the CURL described in the documentation offers approach. In my record the socket connection with Progress OpenEdge takes place.

In the attached example that was realized with Progress OpenEdge are listed some of the reports and wanted then to the reports the objects out. For a different view on objects already created so far is in a very extensive reporting again possible, since you can generate and query in the report in addition to the documents, the folder structure, CUID, universes, objects, ...

The first step is to connect to the BI server and send an XML/JSON file with username, password and authentication mode, in response we obtain a logon token that is used for the further correspondence with the BI platform.

After this you can start to load the documents, list the associated reports, check the queries, and much more.

The code has been implemented with Progress OpenEdge, you gain on github.com. A Java version of the code exists as well, please contact me for this.

Progress OpenEdge: Dynamic fill a Temp-Table/ProDataSet

2014-07-24T22:36:00.002+02:00

There are several ways to fill a dynamically generated Temp-Table in Progress OpenEdge ABL. But here I'll show you the most elegant and the fastest method.

In the first example you see the classical way for filling a temp table.

DEFINE VAR bCustomer    AS HANDLE NO-UNDO.
DEFINE VAR h-ttCustomer AS HANDLE NO-UNDO.   
DEFINE VAR httCustomer  AS HANDLE NO-UNDO. 
DEFINE VAR hquery       AS HANDLE NO-UNDO.

CREATE BUFFER bCustomer FOR TABLE "Customer".
CREATE TEMP-TABLE h-ttCustomer.
h-ttCustomer:CREATE-LIKE(bCustomer).
h-ttCustomer:TEMP-TABLE-PREPARE("tt-Customer").
httCustomer = h-ttCustomer:DEFAULT-BUFFER-HANDLE.
      
CREATE QUERY hquery.
hquery:SET-BUFFERS(bCustomer).
hquery:QUERY-PREPARE("FOR EACH Customer NO-LOCK").
hquery:FORWARD-ONLY.
hquery:QUERY-OPEN.
hquery:GET-FIRST(NO-LOCK).
DO WHILE NOT hquery:QUERY-OFF-END.
  httCustomer:BUFFER-CREATE.
  httCustomer:BUFFER-COPY(bCustomer).
  hquery:GET-NEXT(NO-LOCK).
END.
hquery:QUERY-CLOSE.
DELETE OBJECT hquery.

Now the same fill the same Temp-Table with the use of a ProDataSet.

DEFINE VAR bCustomer    AS HANDLE NO-UNDO.
DEFINE VAR h-ttCustomer AS HANDLE NO-UNDO.   
DEFINE VAR httCustomer  AS HANDLE NO-UNDO. 
DEFINE VAR hDsSource    AS HANDLE NO-UNDO.
DEFINE VAR hDs          AS HANDLE NO-UNDO.

CREATE BUFFER bCustomer FOR TABLE "Customer".
CREATE TEMP-TABLE h-ttCustomer.
h-ttCustomer:CREATE-LIKE(bCustomer).
h-ttCustomer:TEMP-TABLE-PREPARE("tt-Customer").
httCustomer = h-ttCustomer:DEFAULT-BUFFER-HANDLE.

/* we need a ProDataSet to fill*/      
CREATE DATASET hDs.
hDs:ADD-BUFFER(httCustomer).
      
CREATE DATA-SOURCE hDsSource.
hDsSource:ADD-SOURCE-BUFFER(bCustomer,?).
httCustomer:ATTACH-DATA-SOURCE(hDsSource).
hDsSource:FILL-WHERE-STRING = "WHERE". /*...*/
hDs:FILL().
httCustomer:DETACH-DATA-SOURCE().
    
DELETE OBJECT hDsSource.

Convert virtual machine (VM) from VMware to Virtualbox

2014-06-05T13:32:00.000+02:00

In one of my mandates I got a 80 GB virtual machine for the VMware platform. On this machine the complete development platform was installed. Since I use VirtualBox on my Mac and really wanted to stay on this platform, I have been looking for methods to convert the VM from VMware to Virtualbox and then import them into it.

First I found a tool that could be downloaded from VMware (ovftool), I had installed it and used addtionally some modification - but I could not convert the VM.

ovftool /myPath/my_vm.vmx /myNewPath/my_new_vm.ovf

After visiting of some forums, I decided to install the trial version of VMware Fusion, and with the command below I could convert at least my VM.

/Applications/VMware Fusion.app/Contents/Library/VMware OVF Tool/ovftool /myPath/my.vmx /myNewPath/my.ovf

That went without any problems (about 40 minutes to convert the 80 GB), then, I wanted to import the new my_new_vm.ovf file directly into the Virtualbox machine, unfortunately, came close to completion an error to the fore (SCSI controller not found). But even this, there is a solution. Maybe there is a shorter way, but I had to import the VM into VMware Fusion and then modify the hard disk controller from SCSI controller to IDE controller.

After this, I used again the ovftool to create a new VM that could be imported into Virtualbox.

/Applications/VMware Fusion.app/Contents/Library/VMware OVF Tool/ovftool /myPath/new.vmx /myNewPath/new.ovf

See my long path to success, unfortunately, the size of the system has given me problems, so that I had to outsource files to an external USB disk.
I found a very good description on the internet on the oracle blog that describes the whole process in pictures.

Virtuality computing with virtualbox

2014-05-22T10:59:00.000+02:00

When I was in the previous millennium with a company, there was only Windows PC as a virtual variant on an older Linux server allowed. Because of a Windows PC was considered potentially highly dangerous and there was no other way to tie this into the corporate network. Only the virtual version of Windows with Linux as the host operating system was allowed.

Partly due to lack of time and partly also that I always used Linux on my older notebooks I did not have to look for the requirements and the time for a solution. Several years have now passed here and the whole market of virtuality computing (VMware, Virtualbox, Parallels, ...) has become huge and has left the nursery long. Currently there are all sorts of actors which drive on the VM market around.

I only want to do a few tests with my notebook and so a free desktop version is quite enough for me. If you are interested in this area, you have to select the criteria by yourself. The decisive for me was, I could run the system on the following hosts (Windows, Linux , Mac OS), it is available for free and the clients can be Windows or/and Linux (please check the licenses for all VM clients).

My final choice falls on Virtualbox, others are even excellent, but my goal is eventually I would like to try out my test on all systems to which I take my three laptop computers and install each with Virtualbox. This runs smoothly, it buzz on the net some examples of this around. As a guest operating system Linux comes in the distribution Lubuntu in question (resources carefully and I need only 512 MB of RAM).

After Lubuntu/Linux is running, I use the Synaptic Package Manager to install Java, Chromium and Netbeans.

A few more notes, system updates and installation of software can be run on Ubuntu/Lubuntu using the following commands (I simplify the process here and show only a few points):

Reread All package lists.

sudo apt-get update

Perform an upgrade to the newly read package lists.

sudo apt-get dist-upgrade

However, I need a different version of Java to achieve this I need to include another repository with the following command.

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update

In my case I have to install Java 1.7.

sudo apt-get install oracle-java7-installer
sudo update-java-alternatives -s java-7-oracle

Java 1.8 would look like this

sudo apt-get install oracle-java8-installer
sudo update-java-alternatives -s java-8-oracle

Switch between the Java version with this command:

sudo update-alternatives --config java

In order to establish the chromium-browser as the default browser, this can be done using the following command.

sudo update-alternatives --config x-www-browser

After everything was done, comes the best part , I can duplicate the virtual machine and start my tests - Ludi incipiant.

Addendum:
The screen resolution is not quite appropriate under some circumstances, for this type the following command.

sudo apt-get install virtualbox-guest-dkms virtualbox-guest-utils virtualbox-guest-x11

Carrot cake recipe

2014-04-07T09:21:00.001+02:00

There are numerous attempts to explain programming with recipes through to programming chief, an esoteric programming language look like recipes in the programs. Here, however, I would just like to introduce my favorite cake. A carrot cake that tastes so wonderfully juicy. The picture shows the cake I baked for my wife birthday.

The ingredients:
250 g carrots
300 g ground almonds (or hazelnuts and / or coconuts)
300 g of sugar
5 eggs separated,
60 g flour
1 teaspoon of baking soda
1/2 lemon rind
1 pinch of salt
butter/margarine and crumbs for the form

Plating:
chocolate glaze with white and brown chocolate (see picture above)
or
sugar glaze
150 g icing sugar
1 tablespoon water
2 tablespoons lemon juice

The preparation:

Grate the carrots finely and then put them in a large bowl with the almonds, the salt and the lemon peel.

Separate the eggs and stir the yolks with 2/3 of the sugar until fluffy, at least add the flour with the baking powder.
Put together with the carrots and almonds.

The egg white should be mixed until stiff and stir, then add the remaining sugar slowly. The mass now carefully fold into the carrot / nut mixture.

Grease a mold and sprinkle with bread crumbs.

Fill the mass in a form and bake the cake about 50 minutes at 180° C (355° F).

Cover after cooling, either with chocolate or lemon frosting and decorate as desired.

Bon appétit.

Stamp

2014-03-25T08:26:00.000+01:00

Make a stamp itself or make a logo itself is now pretty easy with google docs, begin with a new drawing. While playing with colours, fonts and figures you can develop a unique design.

Store the result in a scalable file format and which your preferred stamp manufacturer needs. A lot of further decisions are necessary, what kind of material I want to print, should the color be dry quickly or should a greater liability to be achieved? Which colour should have the stamp?

After a few days waiting, you can admire the result and play around.

Please contact me if you want to create a unique branding for yourself or your company.

Development of a corporate design / personal branding

2014-03-21T13:02:00.002+01:00

The strongest brand you are self, therefore the name of my current project is also ABOUT.YOU. The core element of this new corporate design is the ring with the web address. By coupling the web link with terms, nearly every catchword or slogan can be communicated. This mechanism takes place through the entire CD.

The business cards is reduced to the most essential element: the web address.

The website is intended as a starting point for all my past and future activities. The ring is therefore a key element in the design of my new website. It reflects the small world again in which we find ourselves. In which we like to come back, but at the same time escape to discover new and expand our horizons.

Have a look at the result Bernd Martin Dot Net.

Create your #footprints with own click-to-tweet-links

2013-12-06T14:06:00.000+01:00

ClicktoTweet.com allow users to promote their stuff on twitter, but it is also easy to build such a service by your own. Create your own click-to-tweet-links on your websites, presentations or your other personal sites. Here is an example how to build such a link.

All starts with the link:
http://twitter.com/home/?status=

You must replace empty space ' ' with %20 when you add some content:
http://twitter.com/home/?status=Create%20your

If you want to add a #hashtag then replace the hash(#) with %23:
http://twitter.com/home/?status=Create%20your%20%23footprints

Combine this technics with a own shorten URL (long URL -> short URL) service (shortener URL service):
http://twitter.com/home/?status=Create%20your%20%23footprints%20with%20own%20click-to-tweet-links%20http://bmline.de/cl2tw

If you want to enter a @-symbol to add your twitter account then please replace also the @ with %40. If you really need a % percent symbol you can replace this also with %25. That's it is.

As result you get the link:
http://twitter.com/home/?status=Create%20your%20%23footprints%20with%20own%20click-to-tweet-links%20http://bmline.de/cl2tw%20%40martinbernd

Additional you could also combine these code with a shortener URL service so that the input is not so ugly. Try it out and click to tweet it now.

#Update 03/2015
It's been over a year ago when I wrote this blog entry. But what has always interested me and what I have so far had no solution, how do I send a tweet with a picture in a html link. The reason, with a picture in a tweet you got more chance to be retweeted.

Tweet this picture

How to operate? That works, if you have your picture tweeted before, then you can find out how the URL is of the image. Each twitter picture serves two URLs, only that which begins pic.twitter.com/[No] works.

How you can find this picture URL? Go to your pictures in twitter and press right button for view the source code in html of the twitter page. Then all pictures are listet, find out which picture you are interested in. Select this picture URL and add this to your tweet:

http://twitter.com/home/?status=Create%20your%20%23footprints%20with%20own%20click-to-tweet-links%20bmline.de/cl2tw%20pic.twitter.com/91kv39imTM

Have fun!

Shortener URL service

2013-12-04T13:07:00.000+01:00

There are running a lot of shortener URL service (list services to shortener URL) around, all of them are good and doing there job very well. Their existence authority is to convert a long URL into a short URL, this is particularly very useful when a service is used like twitter to post information and not need the available space with a long link to.

Or you have created hardware and you want to be sure that the link is still working in future. However, this URL shortener service bring some discomfort by the users, because you do not know what you click here http://goo.gl/rDQGJU, the destination is unclear by cryptic combinations, this brings the lose of branding opportunity, the lose of credibility and others. This is the right time to start a owned service, not necessary a public service, but a own URL shortener.

After a phase of orientation and of trial, I am finally stuck with yourls.org. The good documentation, easy installation, enable the rapid and extensive functionality of this service has also completely convinced me.

The result are, you get well formed links, that documents the traffic so that you could address various channels and analyze the result. There are several detail view of the traffic available that give you a good overview of your links and there usage. Moreover, there are a number of s plugins for yourls.org available, for example a QR Code generator which automatically creates QR Code from the given links, .

Check out a few of links which I have generated:
http://bmline.de/presume was previously http://de.slideshare.net/bernd_martin/pdf-presume-bernd-martin-1
http://bmline.de/gplus was previously http://plus.google.com/111997463922026514911

twitter was previously http://twitter.com/MartinBernd

linkedIn was previously http://www.linkedin.com/in/berndmartin
facebook was previously http://www.facebook.com/bernd.martin.79

With much more options for shopping, blogging or social media like xing, slideshare, github and ...

Serving software

2013-11-14T12:47:00.000+01:00

The software development process is more complex than ever, with the methodology of LEAN and the circle of "learn > build > measure", you transform your software development department into a serving software division.

How to be quick on the market?
How to be in budget?
How to reach fast the required quality?
How fulfill all the expectations?
.

Of course their is not a general answer, nor there is a royal road to lead you on the way. Small steps are necessary to try and learn from it. One thing is indispensable: Speak direct to your customer and listen, just listen.

Blogging is a method to structure, organize, share and conserve your thoughts

2013-11-13T09:51:00.000+01:00

I had searched the last years for a method to write down my thoughts. I like to use ink and feather, I had used hardcore notepads in the time where the only portable electronic devices were a pocket calculator, I had used for the years a lot of electronic devices, with different software on pc's notebooks, smartphones and tablets to conserve my thoughts and my work. Therefore I tested a lot of methods, techniques and software. But at least I found all of the stuff a little impractical.

In an autobiography of Irish novelist James Joyce, I read once that he used to make himself notes each occasion, he wrote on everything he could find, napkins, coasters or in short everything he can find and plug he used. He then collected these notes, convicted them in card file boxes, which he in turn was able to incorporate in his works.

For me the change took place with cloud computing and the several apps that coming up in the past. It happens when I was reading about Matt Mullenweg and how automatic grow up in a startup with remote work culture and their cool idea to meet up somewhere once per year in a new fantastic place over the world. I was fascinated about this meetings and thought about the blogger culture. That decided me to start a blog and share all the stuff in my mind. Blogging seems to me to personally and I never thought I could write good enough to share with others - and maybe this is still true, but I decided to write for me and do this in a foreign language.

In our days blogging belongs to a professional basic attitude, and no one can afford more to return his/her back to this. A blog is a simple way, to share your thoughts through a medium that is simple to use, you can write down your thoughts, you can bring it clear to a document, you can create collections about your interests, you can do a internet journey self tracking, you can filing on it, you can share it or not, create a channel, you can get response of your doing. That is for me the perfect way to write down my thoughts, so this blog was born. I know there are other cooperation product outside like asana, evernote and other that offers also a fantastic world. At the moment I believe blogging could be a place to put all together and share this with an audience.

Today I use various blogs (private and public) to collect my thoughts, I make notes about my work or a few popular excursions into the internet in order to document them can then visit again later or to create my own collections. I had also answered the question for me, which blog software is the right and which is not so comfortable, I tested some of them and find out for me that the easiest and quickest way is wordpress.com and blogger.com. Which one you want to use, well that are many blogs in the internet that describe the pro and contra of both. My decision fall to blogger.com (blogspot), but the easy feeling could you only get when you started one and get some practice.

You can also read several blogs that describe the technical options and extensions (best further information for blogger is helplogger.blogspot.de). If you want to know which software and hardware I also use, you can find my setup on this site.

So please tell me your thoughts about the practicable part and which is the best way you think is to conserve some thoughts (thoughts@bmline.de).

Thank you for your time :)