Wednesday, 11 January 2017

Set The Title Of A Web Page in Angular2 / AngularDart

This is just a tiny snippet for Angular2 / AngularDart that I decided was worth a blog post because it is A) a FAQ and B) has lots of weird Angular 1 workarounds on the web that may be time wasting rabbit trails!

How to set the web page Title from Angular?
import 'package:angular2/src/platform/browser/title.dart';
....
 Title _title = new Title();
....
_title.setTitle(text);

Saturday, 17 December 2016

Notepad 8080 and AngularDart Update

As detailed in previous posts, I have been working on a notepad application using AngularDart. There's not been a blog post for while but it has slowly and steadily progressed.

AngularDart has had a couple of big updates since I started this and not caused any issues. So I am finding it very stable and easy to relate to Angular1. There's a lot of Angular features that I haven't used in there yet so I will continue to scour articles and samples. That said, the focus for np8080 will probably be on the end user functionality rather than the implementation technology. Adding markdown support was very easy thanks to the package on pub - the real battle was with the CSS.

I am going to continue to develop the application - I use it almost daily in the day job for notes and as a scratchpad. Feel free to raise a feature request! I am pondering making an Electron version at least for Windows.

Looks quite good on my Chromebook! Try it out at np8080.win

Finally, on an unrelated note, for a limited time my Dart book is just $5 for the ebook version!

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