Follow the steps given below to create a template-driven form in Angular. The code in these instructions is partially adapted from an official tutorial at the URL “https://angular.io/guide/forms “.
1. Create a new Angular app, perhaps using the procedure in the previous article.
2. Open a File Explorer window and navigate to the root directory of the newly created Angular app, which will contain files whose names begin with “app.component”.
3. Open a command prompt in the Angular app’s root directory.
4. Run the command “node ..\node_modules\@angular\cli\bin\ng generate component HeroForm”.
5. In the “src/app” subdirectory of the newly created Angular application directory, create a new text file named “hero.ts”, containing the following text:
export class Hero {
constructor(
public id: number,
public name: string,
public power: string,
public alterEgo?: string
) { }
}
6. Within the newly created hero-form directory, open the text file named “hero-form.component.ts” and replace its contents with the following text:
8. Back in the parent directory, open the file “app.module.ts” in a text editor and replace its existing contents with the text given below. Note the lines that reference “FormsModule” and “HeroFormComponent”.
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';
@NgModule({
declarations: [
AppComponent,
HeroFormComponent,
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
9. In the parent directory, open the file “app.module.html” in a text editor and replace its existing contents with the following text:
<app-hero-form></app-hero-form>
Back in the command prompt, still in the root directory for the Angular app, run the command “node ..\node_modules\@angular\cli\bin\ng serve”.
If it isn’t done automatically, open a web browser and enter the value “http://localhost:4200 ” in the address bar.
Verify that the page is displayed as shown in the included screenshot.
Follow the steps below to install Angular, create a default application, and run it on Windows 10.
If necessary, download and install Node.js from the site at “https://nodejs.org “.
In any convenient location, create a new directory named “AngularTest”.
Open a command prompt within the newly created AngularTest directory.
Enter the command “npm install angular”.
Enter the command “npm install @angular/cli”.
Enter the command “node node_modules\@angular\cli\bin\ng new AngularApp”. When prompted, accept the defaults.
Enter the command “cd AngularApp” to enter the newly created AngularApp directory.
Enter the command “node ..\node_modules\@angular\cli\bin\ng serve AngularApp” to start the Angular application.
Open a web browser and, in the address bar, enter the URL “http://localhost:4200 ” (or whatever the correct URL is, as indicated in the output of the previous command).
Follow the steps below to create a simple ASP.NET MVC project that presents a list of article titles to choose from, and, when an article in the list is clicked, shows the details and contents of that article.
Start Visual Studio. (For these instructions, Visual Studio 2019 was used.)
From the main menu bar, select File – New – Project.
In the "Search for templates" box, enter "MVC".
In the list of templates returned, click "ASP.NET Web Application (.NET Framework)", then click the Next button.
On the "Configure your new project" dialog, in the Project name box, enter "MvcTest1", and click the Create button.
On the "Create a new ASP.NET Web Application" dialog, click the MVC item, then click the Create button.
On the tool bar, click the "Play" button (represented by a green right-pointing triangle) or press the F5 key to build the newly created project and run it the debugger.
If a dialog appears prompting for whether to "trust the IIS Express SSL certificate" appears, click the "Don’t ask me again" checkbox to activate it, then click the Yes button. (If this fails due to permissions, it may be necessary to override the browser to allow it to use the HTTP, rather than HTTPS, version of the site.)
Verify that the default home page, titled "ASP.NET", appears in the default web browser.
Back in Visual Studio, on the toolbar, click the "Stop" button, represented by a small red square, to stop debugging. The web browser tab showing the page will close.
Back in Visual Studio, in the Solution Explorer pane, locate the node for the "Controllers" directory and right-click it. In the context menu that appears, select the "Add – Controller" item.
In the "Add New Scaffolded Item" dialog that appears, click the "MVC 5 Controller – Empty" item, then click the Add button.
In the Add Controller dialog that appears, in the "Controller name" box, enter the value "ArticleController", then click the OK button.
In the Solution Explorer pane, locate the node for the "Views" directory, and, if necessary, click to expand it.
Under the Views directory, locate the node for the "Article" directory and right-click it. From the context menu that appears, select the item "Add > MVC 5 View Page (Razor)".
On the "Specify Name for Item" dialog that appears, enter the value "Index" and click the OK button.
Verify that a new file is created in the "Article" directory, named "Index.cshtml", and that its contents are loaded in the editor pane.
In the Editor pane, in the Index.cshtml file, locate the "<title></title>" element. Between the start and end tags, add the text "Article".
In the "body" element, within the "div" tag, enter the text "<h1>Articles</h1>".
Click the Play button to build and run the app again.
In the browser window that appears, in the address bar, append the text "/Article" to the end of the existing URL and press the Enter key.
Verify that a page titled "Articles", and otherwise blank, appears.
Click the Stop button to stop debugging.
Back in the Solution Explorer, locate the node for the "Models" directory, right-click it, and select the "Add – Class" item from the menu that appears.
Verify that a new node named "Article.cs" appears under the Models directory in the Solution Explorer, and that its contents are loaded in the editor pane.
In the editor pane for Article.cs, replace the default text with the text between the horizontal lines below:
using System;
namespace MvcTest1.Models
{
public class Article
{
public int Id { get; set; }
public string Title { get; set; }
public string AuthorName { get; set; }
public DateTime TimeCreated { get; set; }
public string Body { get; set; }
}
}
Open the ArticleController.cs file in the text editor pane and replace the existing file with the text between the horizontal lines below.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MvcTest1.Models;
namespace MvcTest1.Controllers
{
public class ArticleController : Controller
{
public List<Article> Articles { get; set; }
public ArticleController()
{
Articles = new List<Article>()
{
new Article()
{
Id = 1,
Title = "This Is the First Article",
AuthorName = "Adam Nowonson",
TimePublished = DateTime.MinValue,
Body = "New job today. Gotta name animals."
},
new Article()
{
Id = int.MaxValue,
Title = "This Is the Last Article",
AuthorName = "Matt Huselah",
TimePublished = DateTime.MaxValue,
Body = "So tired. So very tired."
}
};
}
public ActionResult Index()
{
return View(Articles);
}
public ActionResult Detail(int id)
{
var article = Articles.Single(x => x.Id == id);
return View("Detail", article);
}
}
}
In Index.cshtml, replace the existing contents with the text below:
Open HomeController.cs and replace the default contents with the following text:
using System.Web.Mvc;
namespace MvcTest1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return Redirect("/Article");
}
}
}
Click the Play button.
Verify that the page showing a list of articles is displayed by default.
Click on the title of one of the listed articles.
Verify that a page showing the details and contents of the article is displayed.
Follow the steps below to run Linux Mint in a VM (“virtual machine”) using QEMU on Windows.
Download and install the QEMU binaries. As of this writing, the latest binaries for a 64-bit Windows system are linked at the URL “https://www.qemu.org/download/#windows”.
In any convenient location, create a new directory named “LinuxOnQemuTest”.
Download Linux Mint as an .iso file into the newly creted LinuxOnQemuTest directory. As of this writing, the latest version is available for download via the URL “https://linuxmint.com/”.
To simplify later steps, rename the newly downloaded iso file to “LinuxMint.iso”.
Open a command prompt window and navigate to the LinuxOnQemuTest directory.
In the command prompt, run the command “qemu-img create Disk.img 20G” to create a blank hard disk image file of sufficient size to install Linux Mint (>12.7 GB).
Run the command “qemu-system-x86_64.exe -boot d -cdrom LinuxMint.iso -m 4G -drive file=Disk.img,format=raw -accel whpx,kernel-irqchip=off”. (Note that this command was tested on a Windows 10 machine with hardware virtualization enabled. If the -accel switch and its argument are omitted, QEMU will run the VM without hardware acceleration in “pure software” mode, but this will likely be too slow for any serious use.)
On the Linux Mint boot menu that appears, make sure the “Start Linux Mint” item is selected, then press the Enter Key. (As noted in the title bar of the QEMU window, you may have to press Ctrl-Alt-G for the mouse pointer to be released from the window. When you click back on the VM window, make sure to line up the host’s mouse cursor with the guest VM’s mouse cursor, or it will be impossible to move the cursor to some parts of the guest VM window.)
Verify that Linux Mint starts up correctly.
If possible, install Linux Mint to the hard drive image file by double-clicking the “Install Linux Mint” icon on the desktop. Follow the prompts to install.
Once a message is displayed Linux Mint has been installed, close the VM window and run the command “qemu-system-x86_64.exe -m 4G -drive file=Disk.img,format=raw -accel whpx,kernel-irqchip=off” to re-run the VM without booting from the .iso file.
1. Open a Linux command prompt in the newly created directory (perhaps, if using Microsoft Windows, by installing and starting the Windows Subsystem for Linux, or “WSL”).
2. Create a new empty file of adequate size (2048 blocks of 4 kiB each, or 8 MiB) by running the following command:
dd if=/dev/zero of=ext4.img bs=4k count=2048
3. Format the newly created ext4.img file as an ext4 filesystem by running the following command:
mkfs.ext4 ext4.img
4. Disable the “file system check” on the newly formatted image file by running the following command:
tune2fs -c0 -i0 ext4.img
5. Create a new directory for the image file to be mounted to by running the following command:
mkdir ext4
6. Mount the image file to the newly created directory by running the following command. (Note that the command uses “sudo” to run as the superuser. Also, during the writing of these instructions it was necessary to use chown and chgroup to change the owner of the directory before mounting so that writes would work):
sudo mount ext4.img ext4/
7. Switch to the newly mounted directory by running the following command:
cd ext4
8. Create some test files and subdirectories in the ext4 directory by running the following commands:
sudo echo "This is Test1.txt!" > Test1.txt
sudo echo "This is Test2.txt!" > Test2.txt
sudo echo "This is Test3.txt!" > Test2.txt
sudo mkdir TestDirectory1
sudo mkdir TestDirectory2
sudo cd TestDirectory1
sudo echo "This is Test1_1.txt!" > Test1_1.txt
sudo echo "This is Test1_2.txt!" > Test1_2.txt
sudo mkdir TestDirectory1_1
sudo cd TestDirectory1_1
sudo echo "This is Test1_1_1.txt!" > Test1_1_1.txt
sudo echo "This is Test1_1_2.txt!" > Test1_1_2.txt
9. Unmount the image file by running “cd ..” a couple times to return to the directory containing the ext4/ directory and then run the following command:
sudo umount ext4
10. If running through WSL, the newly populated image file can be copied from the guest Linux VM to the host Windows machine by running the following command from within the desired directory on the VM and then copying the file through the Windows file explorer as usual:
The packaging system in Java can be tricky for the beginner to navigate. Follow the steps below to create, compile, and run a test program that creates a Java program whose classes belong to a root package and a subpackage.
1. In any convenient location, create a new directory named “PackageAndSubpackageTest”.
2. In the newly created PackageAndSubpackageTest directory, create a subdirectory named “RootPackage”.
3. In the newly created RootPackage directory, create a subdirectory named “Subpackage”.
4. Still in the RootPackageDirectory, create a new text file named PackageAndSubpackageTest.java, containing the following text:
package RootPackage;
import RootPackage.Subpackage.*;
public class PackageAndSubpackageTest
{
public static void main(String[] args)
{
ClassInSubpackage instance = new ClassInSubpackage();
String messageFromSubpackage = instance.messageGet();
System.out.println(messageFromSubpackage);
String messageFromRootPackage =
instance.messageGetFromClassInRootPackage();
System.out.println(messageFromRootPackage);
}
}
5. Still in the RootPackage directory, create a new text file named ClassInRootPackage.html, containing the following text:
package RootPackage;
public class ClassInRootPackage
{
public String messageGet()
{
return "This is coming from class in the root package!";
}
}
6. In the Subpackage directory, create a new text file named ClassInSubpackage.html, containing the following text:
package RootPackage.Subpackage;
import RootPackage.*;
public class ClassInSubpackage
{
public String messageGet()
{
return "This is coming from class in a subdirectory!";
}
public String messageGetFromClassInRootPackage()
{
ClassInRootPackage instance = new ClassInRootPackage();
String message = instance.messageGet();
return message;
}
}
7. Open a command prompt in the top-level PackageAndSubpackageTest directory, and run the following command:
The JavaScript code below, when run, presents an interface that allows the user to upload a collection of image files, and then display and download all those images as a single combined image incorporating the original images in a grid.
<html>
<body>
<div id="divUI">
<h3>Image Combiner</h3>
<p>Upload one or more images and click the button to combine them into a single image and download them.</p>
<label>Image File to Upload:</label>
<br />
<input type="file" multiple="true" onchange="inputImageFileToUpload_Changed(this);"></input>
<div id="divImagesUploaded"></div>
<label>Images per Row:</label>
<br />
<input id="inputImagesPerRow" type="number"></input>
<br />
<button onclick="buttonRenderAsSingleImage_Clicked();">Render As Single Image</button>
<button onclick="buttonDownloadAsSingleImage_Clicked();">Download As Single Image</button>
<br />
<label>Combined Image:</label>
<div id="divImageCombined"></div>
</div>
<script type="text/javascript">
// UI event handlers.
function buttonDownloadAsSingleImage_Clicked()
{
var d = document;
this.buttonRenderAsSingleImage_Clicked();
var divImageCombined = d.getElementById("divImageCombined");
var imageCombinedAsCanvas = divImageCombined.children[0];
if (imageCombinedAsCanvas != null)
{
var imageCombinedAsDataUrl =
imageCombinedAsCanvas.toDataURL("image/png");
var imageCombinedAsLink = d.createElement("a");
imageCombinedAsLink.href = imageCombinedAsDataUrl;
imageCombinedAsLink.download = "Combined.png";
imageCombinedAsLink.click();
}
}
function buttonRenderAsSingleImage_Clicked()
{
var d = document;
var divImagesUploaded = d.getElementById("divImagesUploaded");
var inputImagesPerRow = d.getElementById("inputImagesPerRow");
var imagesAsImgElements = divImagesUploaded.children;
var imageCount = imagesAsImgElements.length;
var imagesPerRow = parseInt(inputImagesPerRow.value);
if (isNaN(imagesPerRow))
{
imagesPerRow = imageCount;
}
var imageWidthMaxSoFar = 0;
var imageHeightMaxSoFar = 0;
for (var i = 0; i < imageCount; i++)
{
var imageAsImgElement = imagesAsImgElements[i];
if (imageAsImgElement.width > imageWidthMaxSoFar)
{
imageWidthMaxSoFar = imageAsImgElement.width;
}
if (imageAsImgElement.height > imageHeightMaxSoFar)
{
imageHeightMaxSoFar = imageAsImgElement.height;
}
}
var rowCount = Math.ceil(imageCount / imagesPerRow);
var combinedWidth = imageWidthMaxSoFar * imagesPerRow;
var combinedHeight = imageHeightMaxSoFar * rowCount;
var imageCombinedAsCanvas = d.createElement("canvas");
imageCombinedAsCanvas.width = combinedWidth;
imageCombinedAsCanvas.height = combinedHeight;
var graphics = imageCombinedAsCanvas.getContext("2d");
for (var i = 0; i < imageCount; i++)
{
var imageAsImgElement = imagesAsImgElements[i];
var drawPosInImagesX = i % imagesPerRow;
var drawPosInImagesY = Math.floor(i / imagesPerRow);
var drawPosInPixelsX =
drawPosInImagesX * imageWidthMaxSoFar;
var drawPosInPixelsY =
drawPosInImagesY * imageHeightMaxSoFar;
graphics.drawImage
(
imageAsImgElement, drawPosInPixelsX, drawPosInPixelsY
);
}
var divImageCombined = d.getElementById("divImageCombined");
divImageCombined.innerHTML = "";
divImageCombined.appendChild(imageCombinedAsCanvas);
}
function inputImageFileToUpload_Changed(inputImageFileToUpload)
{
var d = document;
var filesToUpload = inputImageFileToUpload.files;
for (var i = 0; i < filesToUpload.length; i++)
{
var file = filesToUpload[i];
if (file != null && file.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = (event) =>
{
var imageUploadedAsImgElement =
d.createElement("img");
imageUploadedAsImgElement.src =
event.target.result;
var divImagesUploaded =
d.getElementById("divImagesUploaded");
divImagesUploaded.appendChild(imageUploadedAsImgElement);
};
fileReader.readAsDataURL(file);
}
}
}
</script>
</body>
</html>
Follow the steps below to create and compile a simple TypeScript program that, when run by opening the hosting .html in a web browser, simply displays the message “Hello, world!” in an alert dialog.
These instructions use the “tsc” TypeScript compiler supplied as a module to Node.js.
Note that this is certainly not the accepted, “correct” way to create a new TypeScript project. But I wanted a tutorial that runs in a browser, includes external class files, and doesn’t require additional tools like “WebPack”, and I couldn’t find one.
1. If you have not already done so, download and install Node.js. The latest version is available for download at this link.
2. In any convenient location, create a new directory named “HelloWorldTS”.
3. Open the newly created directory in a command prompt window.
4. In the command prompt, run the command “npm install typescript”. This will install the TypeScript module to the local directory. You may be able to install it to the global registry by inserting the switch “–global” into that command, but be aware that this scenario was not tested while writing these instructions.
5. Run the command “tsc –init”. This will create the configuration file that TypeScript needs to compile the program.
6. In the newly created directory, create a new text file named “HelloWorldTS.html”, containing the following text:
Programming for the Beginner (on Amazon)
github.com/thiscouldbebetter
This Could Be Better 