Wednesday, 13 December 2017

Styling RadAutoCompleteTextView with Nativescript and Angular2

Lately I’ve been working a lot with Nativescript to develop mobile apps able to run in Android and iOS devices.

One of the apps that I just finished required me to use the nativescript-pro-ui controls, which proven themselves to be quite useful for sure. In this particular case I had to use the AutoComplete control. Everything was going ok until the moment I had to apply some styling to that control using CSS.

As expected I created a class in my stylesheet and applied it to the RadAutoCompleteTextView but unfortunately that wasn’t enough. Some of the properties such as the border color and width were applied correctly but for some reason font size and font face were just being ignored. After some research I found an opened issue on their Github repo and found out someone else with a similar problem. The presented workaround seemed to be using Nativescript Core instead of Angular2 so I just tried to do something similar.

Once again I had to face the fact that developing in frameworks such as NativeScript, Xamarin and others still require you to understand how Android and iOS native code works, otherwise you’ll have a real hard time trying to figure out how you can apply some transformations to the native controls that are generated when the app is running.

Below are some code snippets that worked like a charm. I think the code speaks for itself but in those I’m basically getting the references to the native controls on each platform and setting up the font face and the padding of the text field control that RadAutoCompleteTextView generates.

home.component.html

<RadAutoCompleteTextView [items]="customersList" class="form-input" hint="Search" suggestMode="Suggest" displayMode="Plain" (didAutoComplete)="onCustomerSelected($event)" (loaded)="onAutoCompleteLoad($event)">
    <SuggestionView tkAutoCompleteSuggestionView>
        <ng-template tkSuggestionItemTemplate let-customer="item">
            <StackLayout orientation="vertical" class="picker-entry">
                <Label [text]="customer.text"></Label>
            </StackLayout>
        </ng-template>
    </SuggestionView>
</RadAutoCompleteTextView>


home.component.ts

import { TokenModel, AutoCompleteEventData, RadAutoCompleteTextView } from "nativescript-pro-ui/autocomplete";

// (...)

public onAutoCompleteLoad(args: AutoCompleteEventData) {
    var autocomplete = args.object;

    if (isAndroid) {
        let rad = autocomplete.android;
        let nativeEditText = rad.getTextField();
        let currentApp = fs.knownFolders.currentApp();
        let fontPath = currentApp.path + "/fonts/futurat.ttf";

        nativeEditText.setTextSize(14);
        nativeEditText.setTypeface(android.graphics.Typeface.createFromFile(fontPath));
        nativeEditText.setPadding(7, 16, 7, 16);
     } else if (isIOS) {
        let rad = autocomplete.ios;
        let nativeEditText: UITextField = rad.textField;

        nativeEditText.font = UIFont.fontWithNameSize("FuturaT", 14);
        nativeEditText.leftView = new UIView({ frame: CGRectMake(7,16,7,16) });
        nativeEditText.leftViewMode = UITextFieldViewMode.Always;
     }
}


Happy coding and see you on a next post!

Tuesday, 14 November 2017

Cleaning up ASP.NET temp files with Powershell

One of the things that you must certainly have to deal with when developing ASP.NET applications in when you try to debug some piece of code but for some reason it seems that it keeps loading old versions of the assemblies and not the most recent build you just did.

This is certainly frustrating and one of the most common reasons for it to happen is due to the temporary ASP.NET files that are stored on your machine. Cleaning those is not hard at all and the following PowerShell script will do that for you.

Get-ChildItem "C:\Windows\Microsoft.NET\Framework\v*\Temporary ASP.NET Files" -Recurse | Remove-Item -Recurse
Get-ChildItem "$Env:Temp\Temporary ASP.NET Files" -Recurse | Remove-Item -Recurse


Not only it removes the temporary files that are stored under each of the framework version directories in your local windows installation folder, but it will also delete the ones that keep getting stored under your user AppData folders. This way you’ll be sure to delete files related to both IIS and IISExpress instances.

Just save the above in a .ps1 file and run it with full privileges every time it seems the debug session is not picking up the right version of the DLL.

Hope this is useful for you. See you on a next post.

Wednesday, 1 November 2017

Begin cross platform desktop development with Electron and Typescript

If you would like to create a cross platform desktop application and already have the skills and experience on web development using HTML, JavaScript and CSS, then Electron is probably what you are looking for.

Formerly known as Atom Shell and currently being developed by GitHub, this framework allows you to build desktop GUI application by leveraging some well-known technologies such as the Node.js run-time and Chromium.

Some well known examples of applications that were developed using Electron include the Discord client, GitHub desktop application, and also the Atom and VS Code editors, amongst many others.
Please follow the links to know more but right now, let’s start with our very own first Electron application, but instead of using plain vanilla JavaScript, let’s make leverage of another great language which is Typescript.

First thing to do will be to create a directory for your app and inside of it run the below commands in order to initialise npm and install electron and typescript packages. Additionally we can also install electron-reload which is a very useful package that allow us to see any changes done to our code on a running application without having to restart it.

npm init -y npm install electron --save 
npm install typescript electron-reload --save-dev

Now that the base setup is done we need to create the entry point for our application, configure the Typescript compiler and perform some additional changes to our package.json file in order to make our life easier whenever we need to run the application.

That being said, lets start by the creating a src directory under the root - not necessary but I just like to keep things organised this way - and the following two files inside of it:

main.html - this one will contain the markup for our main page. Its just a plain HTML, similar to those that you would create for any website.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>Hello Electron World!</h1>
    </body>
</html>


main.ts - which will contain the “entry point” code for our application. I think the code below speaks for itself. All we are doing for now is to open our main HTML page in a new window and setting some values for the size and position of it. We will also need to initialise the electron-reload package to listen to any changes to our code.

import { app, BrowserWindow } from "electron";
import * as electronReload from "electron-reload";

app.on("ready", () => {
    let mainWindow: BrowserWindow;

    mainWindow = new BrowserWindow({
        width: 1024,
        height: 768,
        center: true
    });

    // __dirname points to the "root" directory of the application
    // in this case it's the absolute path to "src"
    mainWindow.webContents.loadURL(`file://${ __dirname }/main.html`);
});

electronReload(__dirname);


One thing to notice is the way we load the page URL using the file:// protocol and the __dirname variable. We have to bear in mind that this is a desktop, not a web, application despite the fact we are using web technologies. This means that we are loading files located on our disk and not web addresses so we need a way to open those up and to know where they are located.

That’s exactly what we are doing here. The file:// protocol allow us to load a file stored on our device and __dirname points to the root executing directory of our application, which in this case is the src folder.

Now that we have our entry point files created we need to configure typescript by adding a tsconfig.json file in the root directory and copy the following:


    "compilerOptions": { 
        "rootDir": "./src", 
        "module": "commonjs", 
        "target": "es5" 
     } 
}

Finally update the package.json file to properly configure the entry point of the application and to add a new start script that will trigger the Typescript compiler and run our electron application afterwards.


    "name": "electron-tsc-app", 
    "version": "1.0.0", 
    "description": "", 
    "main": "src/main.js", 
    "scripts": { 
        "start": "tsc && electron ." 
    }, 
    "keywords": [], 
    "author": "", "license": "ISC", 
    "dependencies": { 
        "electron": "^1.7.9" 
    }, 
    "devDependencies": { 
        "electron-reload": "^1.2.2", 
        "typescript": "^2.5.3" 
    } 
}


We are now ready to start our app. All we have to do is to execute npm start from the command line and:



Our app is now running and since we included electron-reload in our application we’ll also be able to change the code and see those changes reflected in our application without having to restart it.

Nice, right? This is just the beginning. See you on a next post.