Posts by Frank

Home Author is Frank

3 important decisions you need to make before starting your next Web or Mobile Project

FrankNo Comments

These days I see a lot of confusion about all the different frameworks, libraries & services that are popping up everywhere at an ever-increasing rate.

In this post, I want to clarify some of the decisions you need to make based on the following diagram:

 

Let’s first consider the type of project you have (see arrow A at the bottom): is it mobile, web or desktop? Since a few years, it makes a lot of sense to use web technologies not only for browser based apps, but also for mobile & desktop applications. Why? These web technologies became mature enough for most of the use cases that you need to implement on any of these platforms. The biggest benefit is that you don’t need special skilled developers anymore for your mobile or desktop projects, instead you can reuse your team’s skills for the complete spectrum of devices.

There are of course still cases where you want to develop for the native platforms, but I would suggest to consider web technologies first.

So here are the 3 decisions you need to make:

1/ Backend service

Although it is not the focus of this post, it is a very important decision you need to make.

There are a lot of cloud-technologies you can choose from:

  • Microsoft Azure
  • Amazon Web Services
  • Google / Firebase
  • IBM Cloud

This is really a choice of where your expertise is or what your customer wants. We are doing for instance a lot of Azure developments at Da Vinci IT, but we can recommend Firebase for any project to get started very quickly.

More complex applications might even connect to different back-ends.

2/ UI infrastructure framework

We make a clear distinction here between the UI infrastructure & the UI skinning framework.

Now we will decide upon the UI infrastructure framework. Some examples are: Angular, React, vue.js.

This type of framework can/will provide you with:

  • a certain method to split up your application in different components & modules (both graphical & non-graphical)
  • a routing mechanism to navigate through your UI components
  • specifications to setup services, html templates, events
  • data binding to bind data between your html templates and your code

Generally, it is more focused on programming and less on html.

3/ UI skinning framework

The UI skinning framework will determine more the look & feel of your application. It will provide the layout and all the UI controls needed to build an application (text input, data input, menu’s, …).

Generally, it is more focused on html. Good examples are Bootstrap & Material Design.

It is not always possible to draw a clear line between the UI infrastructure & the UI skinning layers. The Ionic framework is a good example of this: it provides all controls to do the skinning of your application, but it also extends the Angular framework with extra functionalities on the infrastructure level.

We will make a top 3 of existing skinning frameworks in an upcoming post. Just be sure to select one that is actively maintained because a lot of these frameworks are started by a few fellows and suddenly abandoned.

Conclusion

When starting a new web or mobile project you will need to select a back-end service and a UI infrastructure & skinning framework. Be sure to select frameworks you feel comfortable with and that have broad support from the community!

How to create Angular forms 10x faster

FrankNo Comments

Building Angular forms just became a lot easier: we released a new version of the Angular Workbench for Windows RC2.

This tool will save you a lot of time if you need to build forms in Angular. Currently it supports 3 different UI frameworks: Bootstrap, Material & Ionic

To install: Angular Workbench installation

Some posts to get any developer started:

Part 1: define your model
Part 2: generate a bootstrap form
Part 3: generate a material design form
Part 4: generate an Ionic form
Part 5: adding list based controls (radio/checkbox group & dropdowns)
Part 6: template driven or reactive forms, it’s your call !

Angular Workbench form builder part 6: template driven or reactive forms, it’s your call !

FrankNo Comments

In the previous 5 posts of the “Angular form builder” series I demonstrated how you can generate Angular forms:

  • with all kinds of controls: basic & complex
  • for 3 different UI frameworks: Bootstrap 4, Material Design 2 & Ionic 2+

In the form builder we just changed 1 setting in order to select the UI framework. But there is another important setting that sets the “programming mode”: “Template driven” or “Reactive” (see arrow 2 below):

In the previous posts we always used the default setting: “Template driven”. But there is a second option for this drop-down: “Reactive forms”.

The resulting form will look exactly the same for both options. It is just that the generated code will have some differences. Below I will try to compare the 2 options.

Template driven Angular forms

Template driven is the default mechanism and resembles most with the previous Angular (v1) style of programming: html controls bind directly to your object properties (in the .ts file) by using the [(ngModel)] attribute:

Reactive Angular forms

Reactive forms on the other side are a bit more work to develop, because you need to setup a separate structure to hold your data (see the method createCustomerForm(obj) below).
So you do not bind directly with properties in your objects, instead you bind to form-controls inside a form-group:

Notice that we use the html attribute formControlName instead of [(ngModel)].

But why would you write more code if template driven is more compact and easier to write? Well it turns out that you have more control over your forms (validation is 1 example) when you use the reactive style.

Conclusion

The Angular Workbench allows you to generate forms in tempate driven mode or in the reactive style. Both are valid options. For small projects we advice you stick to the default template-driven method, for enterprise-grade projects we advice to evaluate both options. Anyway the forms are generated automatically, so you can always change later on!

 

Angular Workbench form builder part 5: adding list based controls (radio/checkbox group & dropdowns)

FrankNo Comments

The previous posts explained how to create simple forms with basic input fields (text, text-area, date/time, checkbox, password) and we implemented the same form with 3 different UI libraries (Bootstrap, Material, Ionic).

But most forms also need more complex controls such as radio & checkbox groups or drop-downs. This can also be done very easily with the Angular Workbench through the concept of lists.

In this demo we will generate the following form:

We will reuse the Bootstrap demo project that we created in part 1 & 2 of this post series, but feel free to create a new Angular project with the “ng new” command.

So after opening that demo project again, we will define our lists first. In the project explorer on the left side we right-click on the model folder and select “Add”, then in the pop-up we select “List” and type “nr of employees”:

After pressing the “Add” button you will see a new file called “nr of employees” in your model folder (see the green arrow labeled 1). At the right side (arrow 2) you will see the list editor: introduce here 3 rows as shown below: just type in the label (the Code and Value columns are automatically populated after pressing TAB):

And we add 2 more lists (so we end up with 3 lists in order to show 3 control layouts: radio group, checkbox group, drop-down):

The communication list looks like (I just typed in the 3 labels: Email, Phone, Postal letter):

And the frequency list looks like (also 3 labels: Daily, Weekly and Monthly):

Now we’ll create a new entity in the model folder to demonstrate the use of the 3 lists: we call it “extra info”.

We configure the extra info entity as shown below:

The columns “Data type” (2) and “Data subtype” (3) are configured with drop-downs:

  • Data type: instead of a basic type (string, number, …) we selected now list-item or the plural list-items (the latter is used for multi select controls such as a checkbox list)
  • Data subtype: here we select one of the lists that we defined before

Now that we’ve finished our definitions, we are ready to generate the html form. So we start by creating a new component called “bs4lists”. At the command prompt we type:

ng generate component bs4lists

Now we want this new component to be visualized when we start our application. So in the file “app.component.html” we place the tags corresponding to this new component:
<app-bs4lists></app-bs4lists>

Next we open the html for the bs4lists component (located in “src\app\bs4form\bs4form.component.html”). Now we drag & drop the “extra info.wbe” entity file from our model onto the html canvas. The Form Builder will appear us usual, but now we select the second tab “Elements” (see arrow 1). Here we can change the desired control type for each form element. For the first 2 elements we keep the default proposed controls (select & input-checkbox), but we will change the control type for the “Frequency” form element to “input-radio” (see arrow 2).

As a result we get the form that we showed in the beginning of this post. When we press the submit button, we get to see:

Angular Workbench form builder part 4: generate an Ionic form

FrankNo Comments

In the previous posts I demonstrated howto easily generate forms for the Bootstrap & Material design framework. But maybe if you’re more into apps, then you want to use the Ionic framework. So in this post I will show how you can generate exact the same form for Ionic:

We start by creating a new Ionic project. So we type at the command prompt:

ionic start ionic-demo tabs

Remarks:

  1. the last parameter of the “ionic start …” command above (=”tabs”) will create a new project with already 3 tabs pre-configured (Home, About & Contact). We will (ab)use the Home tab to show our form.
  2. You can answer no (=n) to the question: “Link this app to your Ionic Dashboard to use tools like Ionic View? (Y/n)”

Again we go into the newly created directory:

cd ionic-demo

Just like in the previous post, we copy over the “src\model” directory from one of the previous projects.

Then we open the project in the Angular workbench. We will use the home tab of this small app to show the form. So we open the “home.html” file and we remove all code between the “ion-content” start and end tag:

Next we drag & drop the customer entity onto the home.html canvas, but now do the drop between the “ion-content” start and end tag:

When you drop the entity the form builder will appear. Now make sure that you select the “Ionic 2+” UI library (see arrow 1):

Next press insert.

Now go back to the command prompt and type:

ionic serve

This command will automatically startup a browser for you. (if not: just look for the url, probably it will be http://localhost:8100/).

Normally you will see your app now in a browser with in the home tab our form.

Angular Workbench form builder part 3: generate a material design form

FrankNo Comments

In this post we will generate the same form as in part 2, but now we will use the material design look and feel.
The resulting form will look like:

We’ll start by creating a new Angular project at the command prompt (this can take a minute to finish…):

ng new material-demo

And then we go into that directory:

cd material-demo

Next we install the material design prerequisites. Execute the following statements at the command prompt:

Then we generate a new component inside our Angular project:

ng generate component mat4form

Now we open the project in the Angular Workbench and we make the new component the startup component by replacing the content of “app.component.html” to:

<app-mat4form></app-mat4form>

You will see this in the workbench:

Now we need the entity definition that we created in part 1 of this blog series. For this demo we just copy over the “src\model” directory from the previous demo project into this project (same location “src\model”).

Remark: optionally you could recreate the entity manually in this project (just 1 minute of work: see part1), or you could open both projects in the workbench and drag & drop the entity file from the project explorer of that project.

Next we open the file “mat4form.component.html” and then we drag & drop the entity file “customer.wbe” onto the canvas of the file “mat4form.component.html”:

                   

When you drop the entity the form builder will appear. Now make sure that you select the “Material 2+” UI library:

And then press the big “Insert code” button. You will notice that the html & typescript code will be generated on top of some other changes to your project necessary to get everything working.

Now you should be able to serve up you solution, so type at the command prompt:

ng serve

And go with a browser to the url that is proposed by “ng serve”, in our case:  http://localhost:4200/

You should see now the form that was presented at the beginning of this post.

Angular Workbench form builder part 2: generate a bootstrap form

FrankNo Comments

In this post we will generate an Angular form based on the entity that we created in part 1 from this series. The result will look like:

We start by creating a new component called “bs4form” (bootstrap 4 form). At the command prompt we type:

ng generate component bs4form

This will create 4 files (css, html, spec.ts, ts):

If we double click in the workbench on the newly created “bs4form.component.ts” file, then we can see the selector that we can use in order to visualise this component:

Now we use this selector in the main app.component.html file:

By doing this, our new bs4form component will be visualised. But at this moment, it’s not doing a lot.

Now we open the file “bs4form.component.html” and delete everything in it. Next we drag & drop the entity file “customer.wbe” that we created in part 1 from the project explorer on the left onto the “bs4form.component.html” canvas in the middle. (drag & drop = press and hold the left mouse button)

The Angular Workbench form builder will appear. At this moment we won’t change any other settings, we will just press the button “Insert code”.

You will notice that the tool generated a lot of html:

Also notice on the left side (project explorer) that the tool changed the Typescript file. The tool will create the minimum code needed to get the form working.

Time for testing! Type “ng serve” at the command prompt:

Remark: if “ng serve” was already running before the drag & drop operation for the form generation, then be sure to restart it at this moment.

And now open a browser and type in the url: http://localhost:4200/

You should see the form that was presented in the beginning of this post! When you fill in this form:

And press the “Submit” button, you’ll see:

Conclusion: with a minimum of Angular knowledge we created a working Bootstrap 4 form.

In the coming posts we’ll demonstrate the same for other UI libraries such as Ionic & Angular Material. And we’ll demonstrate more Angular Workbench features.

Angular Workbench form builder part 1: define your model

FrankNo Comments
When you develop any application you will have some domain objects that need to be reflected in your code.
Examples are:
  • Accounting application: customer, account
  • Pets app: animal, food
We call them entities and they are part of your model.
In this post we will demonstrate how to define these entities in the Angular Workbench, so you can use them later to generate other constructs. At the end of this demo you will have everything ready in order to generate forms in any Angular project based on these entities. In the upcoming posts we will show this for different UI libraries (Bootstrap 4, Ionic 2+, Material 2), without the need to know/learn these libraries.
Remark: if you want to try out the information from this post yourself, then make sure you have a Windows PC and first go through the post “Installing the Angular Workbench”.
So from here we assume you have installed all prerequisites:
  • node.js
  • Angular CLI
  • Angular Workbench
We start by creating a new Angular project using the Angular CLI. Execute at the command prompt:
> ng new demo
 
Start the Angular Workbench tool and press the “Open project” button that is located in the toolbar at the top.
Now open the directory that was just created by your “ng new” command.
In our case, we select the directory: C:\Code\sandbox\angularwb\demo (important: this should be the top-level directory of your project = directory that is containing the src folder)
On the left side you will see the directory structure of your project:
Right-click with your mouse on the “src” directory and select “Add” in the popup menu:
Then you first add a folder named “model”:
Now right-click the newly created “model” folder and click “Add” again.
Now you create a new item of type “Entity” and give it the name “customer”.
The entity editor will appear in the middle of the workbench. Now you can start adding properties to your entity:
 
For the purpose of this demo we will add 6 properties with some different data types & data subtypes.
Important:
Every property should have a data type and optionally you can select a subtype (or you can just keep the “default” subtype).
If you want you can also provide:
  • a default value
  • a place holder
  • an “is required” flag
and even more specialised settings (if you change the property view on top).
All this extra information will be used when you generate other things later on (such as forms).

Angular Workbench installation

FrankNo Comments
Basically you can just install the Angular Workbench (on Windows  only !!) and start working, but if you want to run your Angular projects then it’s better to have all the necessary infrastructure in place. So we advice to install at least node.js, the angular CLI & Ionic.

Install Node.js & npm

If you’re not sure if you have this on your system, then open a command prompt and type:
  • “node -v”: this checks if node.js is installed, you should have at least version 6.9.0
  • “npm -v”: this checks if npm is is installed, you need version 3 or higher
If not installed or you have old versions, then install from here:
Remark:  when you download Node.js, you automatically get npm installed on your computer.

Install the Angular CLI (Command Line Interface)

 If you’re not sure if you have this on your system, then open a command prompt and type:
“ng -v”: this checks if the angular CLI is installed, you should have at least version 1 (no beta !!)
To install or upgrade, you can use:
npm install -g @angular/cli

Install Ionic (optional)

You can check again the currently installed version with the command “ionic -v”. We advice to have version 3 or later.

To install or upgrade, you can use:

npm install -g cordova ionic

Install the workbench

Download the workbench from: https://angularwb.com/
Menu