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