Alphasoftware and AngularJS

Part 2, 

June 19th 2016.

Happy Fathers Day everyone!

Today we will be discussing how to set up device deployable product.

Since my aim is to create primarily iPhone, iPad apps I will be working on Mac, but the steps are the same in windows based computer.

So, let's get going.

First we need to setup required frameworks for our project.

Go to NodeJs.org and download node.js to your computer and install. Once installed npm, the node package manager is also available for you to use.

You can verify the installation with

node -v  and npm -v commands you should see the version for each.

If okay so far, we are set to go.

Now we are going to install the packages with npm. Follow the commands one by one and you will install the required packages.

sudo npm install -g corodova, supply the password when prompted.

that will download and install cordova ( -g option installs globally)

Now we will create the program, I will call my program BLOG.

Enter the command

cordova create blog com.niniswinecellar blog

your company identifier is com prefixed, so if your id is alpha.com the instead f com.niniswinecellar use com.alpha.

You will see Cordova creates the folder and necessary files.

Now cd to blog with cd blog command.

You can inspect the contents with ls command and see the files are there.

Next, we will add iOS platform with this command

cordova platforms add iOS.

We will be adding more packages at this point with another package manager - Bower.

Let's add Bower with npm.  

npm install -g bower ( if there are errors you will need to run sudo nom install -g bower)

Once installed we will use bower to install other components.

We are still in the blog directory and install the following

bower install angular

bower install angular-route

bower install bootstrap

bower install ngCordova.

I like using Brackets editor since it comes with preview web server and the path is easily managed.

When you looked at the directory of blog you will see a folder - www, if you examine that folder will have all the deployable files and an index.html. We will be working in that folder.

Start the Brackets and load the folder blog into it.

And select the index.html file and start the preview server.
You will see phone gap log in flashing screen.
If that happens all good.

Here is the video:

https://www.youtube.com/watch?v=fFScQpnIY-U

This is how I have added the packages to the project, a step I did not show in the last video:
https://www.youtube.com/watch?v=QwOMlGddy1U

Alphasoftware and AngularJS

Date: June 11th 2016:

Okay, now I will be discussing how to integrate AngularJs with Alphasoftware. 

I use version 11 of Alpha Five and all these are done with that version.  I develop using Mac since I am primarily interested in deploying in iPhone & iPads.  But this can be deployed in Android devices too as long as you have necessary SDK installed in your computer.  When this session is complete I will rewrite the same in iconic angular framework which is even finer than the AngularJS.

Okay, what is AngularJS anyway? It is full javascript framework that extends the HTML markup tags and is maintained by none other than GOOGLE and many volunteers contributing source code for the project.  It is an open-source code project.  It is a part of the commonly known MEAN stack. M(ongoDB)E(xpress)A(ngularJS)N(odeJS) .

This blog is NOT intended to teach AngularJS. There are, however, large number of books, videos and tutorials available and in no way I can do better job than those.  If anyone interested in learning about AngularJs or iconic frameworks then they should refer to those available out there.  My aim in this blog is how to integrate AngularJs with Alphasoftware, primarily for phone and tablets use, because we will be taking advantage of the device functions. I want you to know in the desktop it appears and works just as it does in the device but without the device oriented functions like camera, barcode scanner etc.,

The final application will have a main menu page and on push of the selection it will load the appropriate page and data can be viewed, edited, deleted and created, all at your disposal  Finished product will also feature other frameworks like bootstrap css, nodeJS & npm, bower package manager, google maps and last but not the least, Xcode to push this into iPhone for functioning properly.

So we will start with the general introductory page:

Hello World example

1> from standard html page

2> from alpha five web server with a5w page

3> from angularJS simple display page

4> from angularJs displaying from local alpha five web server

5> from angularJS calling a remote alpha five web server 

the later methods use angular supplied HTTP service,  which renders a response from remote server as json objects. The json object then is converted and injected into the html page.  JSON is standard transport for AngularJS.

You can see all of these in this following video. Next week we will start building our menu page and partials to show different aspects of the data.

Please copy and paste this link:

http://www.youtube.com/watch?v=3JlfvoeP6Ic

Hope you like this, let me know.

You comments are most appreciated.

July 10th 2016

Sorry everybody, I have been away and busy with lots of things and did not post any new post lately.
Now I am back.
I will be posting few articles how to integrate Alpha software with AngularJS and Iconic framework.
Also I noticed during cleanup all my old screencasts were removed, if I can recreate them I will, if not please contact me I can create a new one to provide you.
Starting this Sunday I hope to post once a week to show what can be done.
Thanks
See you soon.

Master Detail grid for a purchase order

August 26th 2014

Today I am going to show how I implemented master grid with a child detail grid for the purposes of a purchase order.  Normally I like to do this in a dialog but this time I chose to implement via a grid since this gave me an opportunity to add a single line each time a record is saved in the detail section.  I am sure I can do this in a dialog.  But this is working so I did not pursue that line.

Before I build the purchase order header, let me tell you how the detail view is done. Then it will be easy to incorporate it into the header grid and you are done with it.  The detail grid is a simple updatable grid with a property to add a single new record rather than the customary 3 records that alpha gives.  The item name field is designed as a look up to fill all the rest and in the onChange event I have triggered to save the grid via action javascript.  My grid is also designed to total the amount for the total cases and the cost, you can easily accomplish that. This is rather straight forward.  The main work comes in the next grid.

The header grid is based on the single record template.  The reason I chose this instead of others is that when you finish it almost looks like a dialog, not anything nearly like a grid.  I have also hidden the detail section and the buttons to direct the user my way.

To show the buttons show and hide property is used for the first two buttons based on the idea whether the grid is dirty or not.  And for the next three buttons it is based on the idea record id being grater than 1.

Printing report and sending email are again straight forward.  One is done with action javascript, the other via an xbasic routine.

To show the detail section on demand a div with an id is created below the detail section of the grid in the freeform area and the onClick event of the button opens the child grid filtered by the purchase order id at that location.

When all done the parent grid and child detail grid work flawlessly and has been a good addition to my work schedule.

The same method may be applied to receiving document and especially sales. I have to finish the sales before I post it.
In the meantime here are some videos to show how this is done

purchase order detail:
http://screencast.com/t/zwe2K2H6yC
purchase order header part 1
http://screencast.com/t/3ON0pzC30H1
purchase order header part 2
http://screencast.com/t/aeLcMqqa
real life functioning purchase order at my store
http://screencast.com/t/h7N63XZqKjM
 

Javascript Date Functions

July 31st 2014.

Lot of people are afraid to deal with date objects in JavaScript. While it is not the easiest to deal with it is not certainly the most difficult to deal with.  With little time and experiments and lots of patience you can understand how it works.  Once learnt building something additional to it is lot easier in latter times.  Most of the functions I learnt in JavaScript is by studying W3Schools articles.
You can view all of their offering at www.w3schools.com

Today I am going to show you an example of date object manipulation.  This is in response to a discussion in the Alpha Message Board. In the following weeks I will post how the date object works as told by w3schools.

Think of a scenario where a vendor sends you a bill. The bill may be due in various dates according to the terms established by the vendor, for example it may be due on delivery, 10 days from delivery, certain day of the month or end of the month etc.,

So I have created a dialog in Alpha Five that will deal with three fields. Date of invoice, terms and due date.  Since this is only to show the date object functionality, I have designed that way.  In real world the terms will be at the vendor file and it will populate when you select the vendor and the due date will be calculated and assigned when you select the invoice date. You may be able to change the terms on the fly with the option of changing it permanently in the vendor table or just for this particular invoice.  I have not shown that since that is not planned.  The example deals with how the date object is manipulated, that is it.  You can use your imagination to build more complex component, if you wish.

In this example I have three fields. Date of Invoice, Terms and Due Date. The field terms is a drop-down with three options. The options are
(1) due 10th day of month returned value 1
(2) end of the month returned value 2
(3) 10 days from the bill returned value 3
The date of invoice is entered and in the onChange event of the field Terms I have written the inline JavaScript code that fires and calculates the due date according to the terms picked. It is important to notice that the dates are good even for leap years and leap centuries.

So here is the video:
http://screencast.com/t/mn0CtPesHq

the code that runs in the onChange event of the field Terms is here:
As I said earlier this is only for demonstration, you can assign the various values as you like and arrive at your desired result.

var invDate = {dialog.Object}.getValue('DATE_OF_INVOICE');
invDate = new Date(invDate);
var terms = {dialog.Object}.getValue('TERMS');
if (terms == 1) {
//alert('10th of the month');
var due_day = 10;
var d1 = invDate.getDate();
var m1 = invDate.getMonth()+1;
//
if (d1 <= due_day) {
var new_invDate = invDate.setDate(due_day);
}
else
{
new_invDate = invDate.setDate(due_day);
new_invDate = invDate.setMonth(m1);
}
invDate.setTime(new_invDate);
var mm = invDate.getMonth()+1;
if (mm < 10) {
mm = "0"+mm;
}
var dd = invDate.getDate();
var yyyy =invDate.getFullYear();
}
else if (terms == 2) {
//alert('end of the month');
var lastDayOfMonth = new Date(invDate.getFullYear(),invDate.getMonth()+1,0);
var mm = lastDayOfMonth.getMonth()+1;
var dd = lastDayOfMonth.getDate();
var yyyy = lastDayOfMonth.getFullYear();
}
else if (terms == 3) {
//alert('10 days from invoice');
invDate.setTime(invDate.getTime()+(10*24*60*60*1000));
var mm = invDate.getMonth()+1;
var dd = invDate.getDate();
var yyyy = invDate.getFullYear();
}
var due_date = mm + "/" + dd + "/" + yyyy;
{dialog.Object}.setValue('DUE_DATE',due_date );

Please let me know if there are any errors and any improvements I can make.

Edit Web Security User

Edit Web Security User..

Okay, last week we saw how I created a dialog to add web security users, they are all added to a group called "New User". The new user group has very limited functionality and is restricted. However you can login and edit those credentials using a edit dialog.

In order to do that you will need two components.  One grid to show the currently enlisted users with a button select to edit the data and a dialog to edit the data to save.

As you remember we created a separate table to hold personal data with a common link to the web security table using the email as a link, since that is the sign in user name.

The grid will display the users and when you click the edit button the dialog will pop up with the data and you will edit all the information.  The secret is that alpha has helper functions that load and save the data back and forth from the security tables.  You don't have to write a separate code to do that.  You will be primarily concentrating on the table that you created for the user and rest alpha will take care of.  The ID from the grid is passed onto the dialog via a session variable so the dialog knows which record it should fetch to populate.  Once edited the record is saved to the private and as well as the security tables.

Since this involves security, it is better to have all these components require a login.

Here are the videos:
WebSecurity User Edit Video 1
http://screencast.com/t/fmhL1gFQI

WebSecurity User Edit Video 2
http://screencast.com/t/45J0wVl3bI

WebSecurity User Edit Video 3
http://screencast.com/t/amK07SCwC

So you want to setup web security in AlphaFive...

So you want to setup web security in AlphaFive...

I was very busy during the holiday season, the business I am in demands that.  I skipped many weeks of posting.  Sorry about that.
So I thought now is the best time to talk about web security.
By default the web security is not enabled.  You have to enable it then create the necessary components to go with it.

To start with, go to web menu on the top and select the application server and then turn on the web security by clicking the checkbox enable security framework.  You may have to restart the server for this to take effect.

Then go to web control panel and click on the websecurity.  Then on the dialog that pops up click on the web configuration, the first choice. There turn on the web security and fill in all the necessary information.  You may want to create dummy login files and logout files if you need to.  Also select a random encryption key, I let alpha do it for me.

Once you have done that, it is time to setup security users and their permissions.
The following screencast shows how to setup the security. Take a look:
http://screencast.com/t/GuG5Qt97

Once you have set the security up, the first thing we need to do is add a new user or many users.
This can be easily done via the interface Alpha provides. But that has very limited use. If you want to add additional data regarding the user then it is better with a dialog that will add additional data to the security information.  Fortunately Alpha provides a template, that you can use and take advantage of it.
So when you want to build a dialog to add user with additional information select that template and first thing you do is remove all data binding.  You have an option of asking Alpha to create a table in your backend or you can create then bind to the fields.  When Alpha creates the table all the bindings are set to start with.
Since the dialog is template driven and was bound to other controls in the template, ou need to go back to each server side functions and edit them.  You may not need to correct any but you need to go through the steps so the xbasic commands are refreshed to reflect the changes.
Here is a video showing the dialog being built, take a look:
http://screencast.com/t/jW5W8WOqv

After configuring the dialog to add user, you need to go to each of the server side functions and edit them so that the xbasic will be re-written and the new values will take effect.
Here is that video, take a look:
http://screencast.com/t/8epwwLRH

Here is the final video where I am entering a new user to the security system.
http://screencast.com/t/OSfXwP8WEY