Thursday, 8 December 2016

Dart SDK and Dartium 1.21.0 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.21.0
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.21.0
To verify you have the right version on your path.
dart --version
Dart VM version: 1.21.0 (Thu Dec 07 06:52:21 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.21.0

Monday, 24 October 2016

Building A Notepad with Dart Angular 2 : Part Six

Another step in my personal 'Learn Angular 2' project... Here's some details of what made it into v0.06. I'd recommend looking at the entire project alongside this post.

Let's quickly add another function to the Text processing service:

  String getRepeatedString(String textToRepeat, num count) {
    count ??= 1;
    return textToRepeat * count.toInt();
  }

We use a null aware operator to set count to a default value and then use the string multiplication operator to do the required repeating.

The generate dialog is pretty much the same as the About dialog. It would be useful to have a base dialog class - alas I have not got this to work yet but I hope to follow it up.

There some more event stuff going on with the toolbar which now has a drop down menu (toolbar_component.html):

div (mouseenter)="show()" (mouseleave)="hide()" class="toolbarButton" 
The menu contents are hidden and shown with ngStyle:
[ngStyle]="{'display':  display}

Again, not too different to Angular 1 - just different syntax.

That's it for this time. Check the app out np8080.win and the code is on GitHub.

Monday, 17 October 2016

Dart SDK and Dartium 1.20.1 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

You can install unmoderated versions by specifiying the install version during installation.
Chocolatey has also been updated with versions 1.20.1
Command line installation:
choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.20.1
To verify you have the right version on your path.
dart --version
Dart VM version: 1.20.1 (Wed Oct 12 15:07:45 2016) on "windows_x64"

Command line installation:
choco uninstall dartium

choco install -y dartium  -version 1.20.1

Tuesday, 11 October 2016

Building A Notepad with Dart Angular 2 : Part Five

Another step in my personal 'Learn Angular 2' project... Here's some details of what made it into v0.05. I'd recommend looking at the entire project alongside this post.

It's time we added a proper dialog. I put off doing this as I thought it wouldn't involve much Angular 2. Turns out it covers some very important ground!

So let's plan out what we need to do. The Editor component will have a flag to show/hide the About dialog. The toolbar will have to be able to set it to True so that it appears and the dialog itself will have to set it to False so that it closes. So we need to bind this flag to the two components and be able to update it.

The dialog can be shown or hidden using [hidden] (about_component.html). This value is from the scope of the Editor.

div id="overlay" [hidden]="!showDialog"

The components get the value easily enough but there is a little bit more work to let the Editor know it has been updated. An @Output property fires and event based on showDialog changing.

import 'package:angular2/core.dart';

@Component(
    selector: 'about-dialog',
    templateUrl: 'about_component.html')
class AboutDialogComponent {
  @Input()
  bool showDialog = false;

  @Output()
  EventEmitter showDialogChange = new EventEmitter();

  void closeTheDialog() {
    showDialog = false;
    showDialogChange.emit(showDialog);
  }
}

This does seem more complicated than Angular 1 doesn't it? However the default two way binding of version 1 has performance implications and can easily lead to some tricky dependencies. The payoff of more control and clearer code makes sense to me - though perhaps hard to see in this simple example.

The toolbar has a similar way to announce the change of value.

  void aboutHandler() {
    showDialog = true;
    showDialogChange.emit(showDialog);
  }

That's it for this time. Check the app out np8080.win and the code is on GitHub.

Saturday, 1 October 2016

Installing Dart on Linux - Bash Script

Dart moves rather quickly with releases every 6 weeks or so. Lots of posts on this blog are for Chocolatey which is fine for Windows but I spend most of my Dart time on Linux so how do I update? There are a few methods but I decided to roll my own Bash shell script which downloads and unzips the SDK and Dartium to the current folder.

Hope someone finds this useful!

P.S. The first wget download is the ARM version which I use on my Raspberry Pi.

#!/bin/bash
VERSION="1.19.1"
wget https://storage.googleapis.com/dart-archive/channels/stable/release/$VERSION/sdk/dartsdk-linux-arm-release.zip
wget https://storage.googleapis.com/dart-archive/channels/stable/release/$VERSION/sdk/dartsdk-linux-x64-release.zip
wget https://storage.googleapis.com/dart-archive/channels/stable/release/$VERSION/dartium/dartium-linux-x64-release.zip
unzip -qq -o dartsdk-linux-x64-release.zip
unzip -qq -o dartium-linux-x64-release.zip
rm dartsdk-linux-x64-release.zip
rm dartium-linux-x64-release.zip
dart --version 

Wednesday, 28 September 2016

Building A Notepad with Dart Angular 2 : Part Four

Another step in my personal 'Learn Angular 2' project... Here's some details of what made it into v0.04.

Services are a core part of Angular (inject-able units of functionality). They are inject-able in that the responsibility of creating the service is the Angular frameworks and any object using it receives a fully configured service when that object is created.

Okay that's a bit abstract - what does it mean for np8080? Well, there are a number of methods that process the data in the text document. Let's extract all that into a text processing service class

import 'dart:math';

import 'package:angular2/core.dart';

@Injectable()
class TextProcessingService {

  String trimText(String src) {
    return src.trim();
  }

  int getWordCount(String text) {
    String workingText = text;
    workingText = workingText.replaceAll('\n', ' ');
    List words = workingText.split(' ');
    words.removeWhere((word) => word.length == 0 || word == " ");
    return min(words.length, text.length);
  }

  int getLineCount(String text) {
    return '\n'
        .allMatches(text)
        .length;
  }
}

This is a regular class other than the @Injectable() next to the class declaration.

This service can be used in any part of our application by injecting it in the constructor. Wait a second how does Angular know how to get this service for the consumer object? We let Angular know via providers statement when we are declaring a component. This can be seen in the updated StatusComponent. Note that _textProcessingService can be declared final as it is assigned once at creation time.

import 'package:angular2/core.dart';
import 'package:np8080/services/textprocessingservice.dart';

@Component(
    selector: 'text-status',
    templateUrl: 'status_component.html',
    providers: const [TextProcessingService])
class StatusComponent {

  final TextProcessingService _textProcessingService;

  StatusComponent(this._textProcessingService);

  @Input('text')
  String text;

  @Input('modified')
  DateTime modified;

  String get length => text.length.toString();

  String get wordCount => _textProcessingService.getWordCount(text).toString();

  String get lineCount => _textProcessingService.getLineCount(text).toString();
}

That's it for this time. A few other visual tweaks have gone in. Check the app out np8080.win (I though it was worth the $1 to get a domain!) and the code is on GitHub.

Monday, 26 September 2016

Building A Notepad with Dart Angular 2 : Part Three

Continuing on with my personal 'Learn Angular 2' project... Here's some details of what made it into v0.03.

Change of plan - we are going to look at pipes! Pipes are the renamed 'Filters' from Angular 1. They work in pretty much the same way. A last modified DateTime object is now stored part of the TextDocument class. Let's add it onto the status component.

Let's use the built-in filters to show the full date in upper case:

Last modified: {{modified |  date:'fullDate' | uppercase}}

Notice the * before ngIf. This is critical for ng2 to identify the target element. If omitted, you will get an error as Angular will search for a template.

Angular 2 is keen to mark attributes more clearly on components. For the updated status bar the square brackets denote an input. Round brackets are for outputs and both types denote 2 way binding as on the TextArea.

    HTML
    text-status [text]="note.text" [modified]="note.lastModified"

    CODE
    @Input('modified')
    DateTime modified;

Check the app out np8080.win (I though it was worth the $1 to get a domain!) and the code is on GitHub.