tag:blogger.com,1999:blog-76192506377933614032024-03-24T23:09:39.457-07:00alphawebprogrammingGovindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.comBlogger26125tag:blogger.com,1999:blog-7619250637793361403.post-28947904007932776712018-07-05T18:07:00.000-07:002018-07-05T18:07:08.918-07:00Modal window and Web in alpha five<div dir="ltr" style="text-align: left;" trbidi="on">
July 5th 2018.<br />
This is second of my post in the blog this week to cover a topic.<br />
<br />
I happened to visit the forum for personal reason and found this topic and it was interesting.<br />
There is not really a modal window in web, it is a make believe window positioned over the current window with different background color to make the current window standout and make the elements in the background not clickable, but they are still reachable by tabbing into them. Yes, of course you can make them fully a modal window with ARIA compliant code, however it is a simple matter of making all input elements not tabbable and only the input elements in the dialog itself tabbable. Then when you close make all the elements back to tabbable state. By description the modal dialog should not have any tabindex set, and you canconfirm alpha did not set them if you examine in the web inspector. So far so good.<br />
<br />
Most of the framework when you work with the background fields are accessible, so it is not a bug in alpha. It is consumer misunderstanding as far as I know and think.<br />
<br />
In order to make this work<br />
got to the dialog and go all the down and select window events and select onBeforeShow event and add this code<br />
<span style="color: blue;">var $j = jQuery;</span><br />
<span style="color: blue;">var inputs = $j(document).find('select, input, textarea, button, a').filter(':visible');</span><br />
<span style="color: blue;">$j(inputs).each(function() {</span><br />
<span style="color: blue;">$j(this).attr("tabindex", -1);</span><br />
<span style="color: blue;">});</span><br />
<span style="color: blue;"><br /></span>
and then go to the onHide event and add this code:<br />
<span style="color: blue;">var $j = jQuery;</span><br />
<span style="color: blue;">var inputs = $j(document).find('select, input, textarea, button, a').filter(':visible');</span><br />
<span style="color: blue;">$j(inputs).each(function() {</span><br />
<span style="color: blue;">$j(this).attr("tabindex", 0);</span><br />
<span style="color: blue;">});</span><br />
<span style="color: blue;"><br /></span>
This should work, I have tested in internet explorer. I was about to send this to Selwyn to analyse, but elected to post here in my blog.<br />
The one this this will not address is tabbing out to the document itself which is normal behavior in most browsers.<br />
The video is published in youtube and here is the link:<br />
<br />
<a href="http://www.youtube.com/watch?v=LI6UQQvHiqo">http://www.youtube.com/watch?v=LI6UQQvHiqo</a><br />
<br />
let me know if this works.<br />
<div>
<br /></div>
<br />
<br /></div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com1tag:blogger.com,1999:blog-7619250637793361403.post-69269217505303937062018-07-04T17:28:00.000-07:002018-07-04T17:30:20.223-07:00Inform user of processing using Font awesome spinner<div dir="ltr" style="text-align: left;" trbidi="on">
July 4th 2018<br />
<br />
So, I don't use alpha five regularly anymore, but I have many topics that I could post in my blog, if someone crosses this site and this can be useful to them. So here goes another topic.<br />
<br />
Say you have a dialog or ux whichever way you want to call it and you press the submit button and it takes some time to process the request, because you may be doing lots of stuff in the backend. In the meantime the button simply sits there and the user does not know what is happening. And by todays standards they won't sit tight, they will press the button again. Seems familiar, here is one answer to it.<br />
<br />
Ajax callbacks to the server may take time and exactly how long it takes is a mystery. So you want to be prepared for it.<br />
One way of doing it will be put up the message at the beginning and take it down at the end of the callback when the server tells alpha five all is good.<br />
<br />
Here are the steps to do it.<br />
Prepare the dialog to suit you best and then go to the properties of the dialog and select the head section tags and insert the link to font awesome cdn like this:<br />
<span style="color: blue;"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"></span><br />
Then go to the controls and select the submit button, and on the top change the button text to<br />
<span style="color: blue;"><span id = "gg">Submit</span></span><br />
<span style="color: #000037;">You can use any identifier, I am just showing an example.</span><br />
<span style="color: #000055;">Then go to the onClick event add this line above the dialog submit action</span><br />
<span style="color: blue;">document.getElementById("gg").innerHTML = <i class=\"fa fa-spinner fa-spin\"></i>"Processing...";</span><br />
<span style="color: #000025;">Then go to client side events and select afterAjaxcallbackComplete action and put back submit on the button like</span><br />
<span style="color: blue;">document.getElementById("gg").innerHTML = "Submit";</span><br />
<span style="color: #000025;"><br /></span>
T<span style="color: #000037;">est it and see if okay with you.</span><br />
He<span style="color: #000055;">re are videos showing the same:</span><br />
<span style="color: #000085;"><br /></span>
<span style="color: #000013;"><a href="http://www.youtube.com/watch?v=lmGcBt71sCc">http://www.youtube.com/watch?v=lmGcBt71sCc</a></span><br />
<span style="color: #000013;"><a href="http://www.youtube.com/watch?v=orcfvpVKUJc">http://www.youtube.com/watch?v=orcfvpVKUJc</a></span><br />
<span style="color: #000085;"><br /></span>
<span style="color: #000013;"><br /></span>
<br />
<div>
<span style="color: #000025;"><br /></span></div>
<div>
<span style="color: #000037;"><br /></span></div>
<br />
<span style="color: #9fc5e8;"></span></div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-59781497274314893942017-10-31T16:51:00.000-07:002017-10-31T16:51:14.483-07:00Update SQL database after printing report<div dir="ltr" style="text-align: left;" trbidi="on">
October 31st 2017<br />
<br />
So you know people who use alpha native DBF for their database needs are able to update the table after printing the report by using simple four lines of code and wondering if that can be done for the SQL database too.<br />
Of course you can do it. In fact it can be done more than one way.<br />
I am going to take one method in each post and discuss how that can be achieved.<br />
<br />
Today I am going to show you how you can update using sql connection string and sqldatasource for the report.<br />
For the purpose of this post the table contains a field vintage, and i am going to update that field with an arbitrary value to show the point. The report has a filter where the prompt ask for the name of the brand of the wine and prints the report then updates the vintage in the table to a year specified. In a real world example you would print invoices to many people and at the end update the table to show date of printing and the fact the invoice was printed to set a flag to true.<br />
<br />
So here is how it is done:<br />
Step 1: Create a report based on the sqldatasource as usual. add any where clause and order clause as needed. Test run the report and see if all works okay. Once satisfied save the report.<br />
Step 2: Now go to the top and select report, then report events, then onPrintInit enter the following code:<br />
<br />
<span style="color: blue;">dim SHARED cn as sql::Connection</span><br />
<span style="color: blue;">dim result as l = .f.</span><br />
<span style="color: blue;">result = cn.Open("::Name::claretPOS")</span><br />
<span style="color: blue;">if .not. result then</span><br />
<span style="color: blue;"><span style="white-space: pre;"> </span>end</span><br />
<span style="color: blue;">end if </span><br />
<br />
Then go to onPrintexit enter the following code:<br />
<br />
<span style="color: blue;">dim SHARED cn as sql::Connection</span><br />
<span style="color: blue;">if cn then</span><br />
<span style="color: blue;"><span style="white-space: pre;"> </span>cn.Close()</span><br />
<span style="color: blue;">end if</span><br />
<br />
Then go to Reports, Section events, detail, onRecord, there enter this code:<br />
<br />
<span style="color: blue;">dim t as p</span><br />
<span style="color: blue;">dim SHARED cn as sql::Connection</span><br />
<span style="color: blue;">dim args as sql::Arguments</span><br />
<span style="color: blue;">t = table.current()</span><br />
<span style="color: blue;">dim id as n</span><br />
<span style="color: blue;">id = t.ID</span><br />
<span style="color: blue;"><br /></span>
<span style="color: blue;">dim result as l = .f.</span><br />
<span style="color: blue;">dim sqlUpdate as c</span><br />
<span style="color: blue;">sqlUpdate = "UPDATE inventory SET vintage = 2000 WHERE id = :newID"</span><br />
<span style="color: blue;">args.set("newId", id)</span><br />
<span style="color: blue;">result = cn.Execute(sqlUpdate, args)</span><br />
<br />
As you can see I am showing my connection string and my table information, you need to adjust to yours.<br />
Also I want to emphasize that you need to dim in each segment, then it will look for SHARED namespace.<br />
And you can have your own update statement, not necessary to have the way I have, this is to show as an example without corrupting my data.<br />
So what happens is when the detail section is printed the id of that record is harvested and sqlUpdate statement is called and the backend is updated. This will work every time you call this report and if your intenstion is to update then it will happen.<br />
So here is an example:<br />
<br />
<a href="http://www.youtube.com/watch?v=0vyh34jiWXE">http://www.youtube.com/watch?v=0vyh34jiWXE</a><br />
<div>
<br /></div>
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-41549738302821903962017-09-24T06:54:00.003-07:002017-09-24T07:29:44.820-07:00Sparkpost and AplhaFive - Fantastic Part 4 (Final)<div dir="ltr" style="text-align: left;" trbidi="on">
September 24th 2017<br />
<h3 style="text-align: left;">
Sparkpost and AlphaFive - Fantastic</h3>
<div>
Part 4 ( Final)</div>
<div>
<br /></div>
<div>
So far we have covered </div>
<div>
1> to create an account with Sparkpost and generate an api key for sending the emails.</div>
<div>
2> created a separate table to hold the api key, so that we can retrieve that key with a sqlLookup command to save us from exposing the key to the outside world.</div>
<div>
3> we created a function sparkpost_email_send function with three arguments and sent one or more emails. Then we changed and incorporated that function in our code to send email itself, to make it easy and not worry about publishing user defined functions.</div>
<div>
<br /></div>
<div>
Today is the final discussion, we will cover how to send professional looking email with images and links the body of the email. The prerequisite for the images to be sent along the email is somehow the email should get the data for the images sent. There are few methods available and I am going to take easy method.</div>
<div>
<br /></div>
<div>
You can send the images as attachment, then it will show somewhere in the bottom. That is not what we need. We need to format the email with logo and banner at the top then the body then the footer with some other banner and social network images as links. This will not be possible with that method.</div>
<div>
<br /></div>
<div>
You can send images as base64encoded value and the email will convert that into images when received. A cumbersome process for me, at least.</div>
<div>
<br /></div>
<div>
The easy method, which I will describe now and follow in the example, will be to store the image in a content delivery network(CDN), preferably hosted by you and link that image to show in the email. Works every time except when the CDN goes down. The advantage of CDN hosted by private provider is that it rarely goes down but they might flag you down for spamming, this is not the case when you host it yourself, but your server may go down when the internet is down or rebooting. There is advantage and disadvantage in both systems. You decide which is better. I am using my own hosted server to deliver the content.</div>
<div>
<br /></div>
<div>
Then finally, if you have time, please read documentation in alphafive for html templates and using placeholders to replace variables in that location to customize the email.</div>
<div>
<br /></div>
<div>
So, now that all the bases are covered, I will show you how the email is sent. In this model, I have an dialog to fill in the from address, to address, cc, subject, item name that will bring up the name, image and description, then I will fill in the price then send that as an email. This is only an example, you can design any way you want and as long as you incorporate what I have shown in the html template, placeholders and image delivery method, this method will work for you too.</div>
<div>
<br /></div>
<div>
So, I will give you the code that sends the email and show you via a screencast the working of that.</div>
<div>
Here is the code:</div>
<div>
First onChange event of the item will do a lookup to the back end and bring the necessary data back to the dialog;</div>
<div>
<br /></div>
<div>
<div>
<span style="color: #3d85c6;">function xb2 as c (e as p)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>'debug(1)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim cn as sql::Connection</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim args as sql::Arguments</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim result as l = .f.</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim sqlSelect as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim product_id as n</span></div>
<div>
<span style="white-space: pre;"><span style="color: #3d85c6;"> </span></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>product_id = e.dataSubmitted.product</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = cn.Open("::Name::local_MySql")</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>sqlSelect = "SELECT * FROM product WHERE id = :newProduct_id"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>args.set("newProduct_id",product_id)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = cn.Execute(sqlSelect,args)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>rs = cn.ResultSet</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>description = rs.data("description")</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>image_name = rs.data("image_name")</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>cn.close()</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>e._set.image_name.value = image_name</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>e._set.description.value = description</span></div>
<div>
<span style="color: #3d85c6;">'xb2 = "javascript commands to be executed in the Browser."</span></div>
<div>
<span style="color: #3d85c6;">end function </span></div>
<div>
<br /></div>
<div>
Then you will fill in the price ( this can also be automated if you wish), thenwhen you press send email button this will call another function that will send the email and send the message to the browser.</div>
</div>
<div>
Here is that code:</div>
<div>
<div>
<span style="color: #3d85c6;">function xb as c (e as p)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>'debug(1)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim subject as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim description as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim to as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim cc as c = ""</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim list as c = ""</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim flag as l = .f.</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim msg as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim email_msg as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim image_name as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim price as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim product_id as n</span></div>
<div>
<span style="white-space: pre;"><span style="color: #3d85c6;"> </span></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim cn as sql::Connection</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim sqlSelect as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim args as sql::Arguments</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim rs as sql::ResultSet</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim result as l</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim ps as p</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim pm as p</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim pp as p</span></div>
<div>
<span style="white-space: pre;"><span style="color: #3d85c6;"> </span></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>cc = e.dataSubmitted.cc</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>select</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>case cc = "All"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>sqlSelect = "SELECT * FROM customer2"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>case cc = "Gandhi"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>sqlSelect = "SELECT * FROM customer2 WHERE name = 'gandhi'"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>case cc = "Papi"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>sqlSelect = "SELECT * FROM customer2 WHERE name = 'papi'"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>case cc = "Gandhi&Papi"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>sqlSelect = "SELECT * FROM customer2 WHERE name = 'gandhi' OR name = 'papi'"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end select</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = cn.Open("::Name::local_MySql")</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = cn.Execute(sqlSelect)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>rs = cn.ResultSet</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>flag = rs.nextRow()</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>while flag</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>list = list + rs.data("email")+","</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>flag = rs.nextRow()</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end while</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if substr(list,len(list)) = "," then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>list = substr(list,1,len(list)-1)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="white-space: pre;"><span style="color: #3d85c6;"> </span></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>to = e.dataSubmitted.to</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>subject = e.dataSubmitted.subject</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>description = e.dataSubmitted.description</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>image_name = e.dataSubmitted.image_name</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>price = e.dataSubmitted.price</span></div>
<div>
<span style="white-space: pre;"><span style="color: #3d85c6;"> </span></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pp.description = description</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pp.image_name = image_name</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pp.price = price</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>email_msg = <<%str%</span></div>
<div>
<span style="color: #3d85c6;"><!DOCTYPE html></span></div>
<div>
<span style="color: #3d85c6;"><html></span></div>
<div>
<span style="color: #3d85c6;"><head></span></div>
<div>
<span style="color: #3d85c6;"><meta name="generator" content="Alpha Five HTML Editor Version 11 Build 3381-4096"></span></div>
<div>
<span style="color: #3d85c6;"><!-- must use in order to make XP Themes render --></span></div>
<div>
<span style="color: #3d85c6;"><meta HTTP-EQUIV="MSThemeCompatible" content="Yes" /></span></div>
<div>
<span style="color: #3d85c6;"><meta http-equiv="X-UA-Compatible" content="IE=edge" /></span></div>
<div>
<span style="color: #3d85c6;"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </span></div>
<div>
<span style="color: #3d85c6;"><br /></span></div>
<div>
<span style="color: #3d85c6;"><title></title></span></div>
<div>
<span style="color: #3d85c6;"><style></span></div>
<div>
<span style="color: #3d85c6;"><!--</span></div>
<div>
<span style="color: #3d85c6;">body {</span></div>
<div>
<span style="color: #3d85c6;">background-color:white;</span></div>
<div>
<span style="color: #3d85c6;">}</span></div>
<div>
<span style="color: #3d85c6;">h1 {</span></div>
<div>
<span style="color: #3d85c6;">font-size:35px;</span></div>
<div>
<span style="color: #3d85c6;">font-style:italic;</span></div>
<div>
<span style="color: #3d85c6;">}</span></div>
<div>
<span style="color: #3d85c6;"><br /></span></div>
<div>
<span style="color: #3d85c6;">--></span></div>
<div>
<span style="color: #3d85c6;"></style></span></div>
<div>
<span style="color: #3d85c6;"></head></span></div>
<div>
<span style="color: #3d85c6;"><body></span></div>
<div>
<span style="color: #3d85c6;"><br /></span></div>
<div>
<span style="color: #3d85c6;"><table width="90%" border="0" bordercolor="" bordercolorlight="" bordercolordark="" bgcolor="" cellpadding="0" cellspacing="0"></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><tr></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><td style="background-color:#008080; text-align:center; color:#ffffff;"><h1>Nini's Wine Cellar</h1></td></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></tr></span></div>
<div>
<span style="color: #3d85c6;"><tr><td>&nbsp;</td></tr></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><tr></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><td><div style="text-align:center;"></span></div>
<div>
<span style="color: #3d85c6;"><img style="width:320px;height:180px;" src="http://24.90.115.79:82/claretpos/naples_morning.jpg"></span></div>
<div>
<span style="color: #3d85c6;"></div></td></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></tr></span></div>
<div>
<span style="color: #3d85c6;"><tr></span></div>
<div>
<span style="color: #3d85c6;"><td style="text-align:center;"><h3>Our weekly Promotions</h3> </td></span></div>
<div>
<span style="color: #3d85c6;"></tr></span></div>
<div>
<span style="color: #3d85c6;"><tr></span></div>
<div>
<span style="color: #3d85c6;"><td style="text-align:center;"></span></div>
<div>
<span style="color: #3d85c6;"><table width="90%" border="0" bordercolor="" bordercolorlight="" bordercolordark="" bgcolor="" cellpadding="0" cellspacing="0"></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><tr></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><td style="width:50%;"><div style="text-align:center;"></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><img style="width:110px;height:110px;" src="http://24.90.115.79:82/claretpos/{image_name}"></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></div></td></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><td style="width:50%; text-align:left;"> {description}<br/>{price}</td></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></tr></span></div>
<div>
<span style="color: #3d85c6;"></table></span></div>
<div>
<span style="color: #3d85c6;"><br /></span></div>
<div>
<span style="color: #3d85c6;"></td></span></div>
<div>
<span style="color: #3d85c6;"></tr></span></div>
<div>
<span style="color: #3d85c6;"> <tr></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><td style="background-color:#008080; text-align:center; color:#ffffff; font-size:20px;" >Fine wines for less</td></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></tr></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><td style="text-align:center;">Stay Connected<br/></td></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></tr></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><tr></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><td style="background-color:#ffffff; text-align:center;"></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><a href = "https://www.facebook.com/niniswinecellar" target="_blank"></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><img src = "http://24.90.115.79:82/claretpos/facebook.png" style="width:22px;height:22px;border:0"></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></a></span></div>
<div>
<span style="white-space: pre;"><span style="color: #3d85c6;"> </span></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><a href = "https://www.twitter.com/niniswinecellar" target="_blank"></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span><img src = "http://24.90.115.79:82/claretpos/twitter.jpg" style="width:22px;height:22px;border:0"></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></a></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></td></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></tr></span></div>
<div>
<span style="color: #3d85c6;"></table></span></div>
<div>
<span style="color: #3d85c6;"><br /></span></div>
<div>
<span style="color: #3d85c6;"></body></html></span></div>
<div>
<span style="color: #3d85c6;">%STR%</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = email_smtp_open(ps,"smtp.sparkpostmail.com",587,"SMTP_Injection",sql_lookup("::Name::local_MySql","sparkpost_api","ID=1","api_key"),"STARTTLS")</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.from = "admin@niniswinecellar.com"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.from_alias = "Govindan Gandhi"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.to = to</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.bcc = list</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.subject = subject</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>'pm.message = message</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.html_message = evaluate_string(email_msg,pp)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = email_smtp_send(pm,ps)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>msg = "alert('email successfully sent');"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>else</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>msg = "alert('there was a problem sending email, try again later');"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>email_smtp_close(ps)</span></div>
<div>
<span style="color: #3d85c6;">xb = msg<span style="white-space: pre;"> </span></span></div>
<div>
<span style="color: #3d85c6;"><br /></span></div>
<div>
<span style="color: #3d85c6;">end function </span></div>
</div>
<div>
<br /></div>
<div>
Some of the things to remember, always send the email to yourself and bcc to others so that the email address is hidden. Always use hidden api key to avoid people exploiting your or your client key.</div>
<div>
While this is shown as an example, you can design your email differently and if you use these methods you can definitely send customized emails not plain simple drag as an email.</div>
<div>
<br /></div>
<div>
Hers is a sample email sent via Sparkpost and using the code.</div>
<div>
<br /></div>
<div>
<a href="http://www.youtube.com/watch?v=D7TsosslSg8">http://www.youtube.com/watch?v=D7TsosslSg8</a></div>
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-45599343535745866462017-09-17T07:16:00.002-07:002017-09-17T07:16:16.317-07:00Sparkpost and Alpha Five - Fantastic<div dir="ltr" style="text-align: left;" trbidi="on">
September 17th, 2017<br />
<h3 style="text-align: left;">
Sparkpost and AlphaFive - Fantastic</h3>
<div>
part 3:</div>
<div>
<br /></div>
<div>
Okay, now that we have some working examples, we are going to send email to multiple recipients.</div>
<div>
<br /></div>
<div>
First things first. Email etiquette dictates that you do not give out others' email addresses without their consent. So in order to do that NEVER send an email with multiple mail addresses in the 'to' or 'cc' address locations, they are visible to everyone. Always send the email to yourself and 'bcc' to all the recipients. In this way the email addresses are hidden from others.</div>
<div>
<br /></div>
<div>
In AlphaFive when you send an email via any one of the email send functions the to, cc and bcc will take comma separated list. That is what we are going to use to send the emails via sparkpost and smtp_send function.</div>
<div>
<br /></div>
<div>
Secondly, you really do not need to write out a separate function and then use it to send an email. Since it takes only about 10 lines of code you can easily add it to the email code and done with it. So any modification you do will immediately be propagated to the server, instead of republishing all the files to upload a small change you did in the UDF.</div>
<div>
<br /></div>
<div>
So what we need to do today is to build a brand new dialog that will have the following controls:</div>
<div>
Subject, a textbox, this is the subject.</div>
<div>
Message, a textarea, this is the message we are sending.</div>
<div>
a button labelled 'send email, to send email by calling the xbasic function and send out alert to the browser.</div>
<div>
<br /></div>
<div>
we are going to select all the members of the table and send out simple email using the function we created earlier.</div>
<div>
Okay here is the code to do that:</div>
<div>
<div>
<span style="color: #3d85c6;">function xb as c (e as p)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>'debug(1)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim subject as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim message as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>subject = e.dataSubmitted.subject</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>message = e.dataSubmitted.message</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim cn as sql::Connection</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim result as l</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim sqlSelect as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim rs as sql::ResultSet</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim list as c = ""</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim flag as l = .f.</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim msg as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = cn.Open("::Name::local_MySql")</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>sqlSelect = "SELECT * FROM customer2"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = cn.Execute(sqlSelect)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>rs = cn.ResultSet</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>flag = rs.nextRow()</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>while flag</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>list = list + rs.data("email")+","</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>flag = rs.nextRow()</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end while</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if substr(list,len(list)) = "," then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>list = substr(list,1,len(list)-1)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="white-space: pre;"><span style="color: #3d85c6;"> </span></span></div>
<div>
<span style="white-space: pre;"><span style="color: #3d85c6;"> </span></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = email_sparkpost_send(list,subject,message)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>msg = "alert('email sent to recipents in the list');"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>else</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>msg = "alert('there was a problem sending email, try again later');"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>cn.close()</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;">xb = msg<span style="white-space: pre;"> </span></span></div>
</div>
<div>
<span style="color: #3d85c6;">end function</span></div>
<div>
<span style="color: #3d85c6;"><br /></span></div>
<div>
This will send emails to all from customer2 table with exposed email address in the 'to' column.</div>
<div>
so we will redo the code to send with hidden email address and incorporating the email send function in the xbasic function itself.</div>
<div>
So here is the modified code to do that:</div>
<div>
<div>
<div>
<span style="color: #3d85c6;">function xb as c (e as p)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>'debug(1)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim subject as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim message as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>subject = e.dataSubmitted.subject</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>message = e.dataSubmitted.message</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim cn as sql::Connection</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim result as l</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim sqlSelect as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim rs as sql::ResultSet</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim list as c = ""</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim flag as l = .f.</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim msg as c</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = cn.Open("::Name::local_MySql")</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>sqlSelect = "SELECT * FROM customer2"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = cn.Execute(sqlSelect)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>rs = cn.ResultSet</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>flag = rs.nextRow()</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>while flag</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>list = list + rs.data("email")+","</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>flag = rs.nextRow()</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end while</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if substr(list,len(list)) = "," then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>list = substr(list,1,len(list)-1)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="white-space: pre;"><span style="color: #3d85c6;"> </span></span></div>
<div>
<span style="color: #3d85c6;"> <span style="white-space: pre;">dim ps as p
dim pm as p
result = email_smtp_open(ps,"smtp.sparkpostmail.com",587,"SMTP_Injection",sql_lookup("::Name::local_MySql","sparkpost_api","ID=1","api_key"),"STARTTLS")
if result then
pm.from = "administrator@niniswinecellar.com"
pm.from_alias = "Govindan Gandhi"
pm.to = "ggandhi344@gmail.com"
p.</span>b<span style="white-space: pre;">cc = </span>list<span style="white-space: pre;">
pm.subject = subject
pm.message = message
result = email_smtp_send(pm,ps)</span><span style="white-space: pre;">
end if
</span> <span style="white-space: pre;">email_smtp_close(ps)</span></span></div>
<div>
</div>
<div>
</div>
<div>
<span style="color: #3d85c6;"> </span></div>
<div>
<span style="color: #3d85c6;"> if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>msg = "alert('email sent to recipents in the list');"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>else</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>msg = "alert('there was a problem sending email, try again later');"</span></div>
<div>
<span style="color: #3d85c6; white-space: pre;"> </span><span style="color: #3d85c6;">end if</span><span style="color: #3d85c6;"> </span><span style="color: #3d85c6; white-space: pre;"> </span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span></span><span style="color: #3d85c6;">end if</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>cn.close()</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;">xb = msg<span style="white-space: pre;"> </span></span></div>
</div>
<div>
<span style="color: #3d85c6;">end function</span></div>
</div>
<div>
<span style="color: #3d85c6;"><br /></span></div>
<div>
See if this works well before we go into sending email with html markup.</div>
<div>
<br /></div>
<div>
The next week article will finalize with HTML markup and images on the body of the email.</div>
<div>
<br /></div>
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-52362078325131948732017-09-10T06:17:00.001-07:002017-09-10T06:17:07.347-07:00Sparkpost and Alpha Five - Fantastic<div dir="ltr" style="text-align: left;" trbidi="on">
September 10th 2017<br />
<h2 style="text-align: left;">
Sparkpost and Alphafive - Fantastic</h2>
<div>
part 2:</div>
<div>
<br /></div>
<div>
Okay, now that you have configured the sparkpost, if you have not read that please go back and take a look at part 1 on this series, now you are ready to configure alpha to work with sparkpost to send emails from alphafive.<br />
<br /></div>
<div>
First and foremost we are going to create a table and store the api key there, and when needed in our xbasic function we will retrieve that api key via a sql lookup. This way the key is not exposed to unwanted elements. Create a table in your back end db, in my case it is MySql. The table is going to have only one important field and only one record. You may, however, add more fields and able to use them in your emails as you please. In our example the table will hold</div>
<div>
id primary key, auto increment, integer, length 2,</div>
<div>
api_key varchar, not null, length 50.</div>
<div>
and you can set the table name anything you want, for example mine is, sparkpost_api. Once it is done enter the sparkpost api key in to the field and save it. Now let's check if it works okay.</div>
<div>
Go to interactive window and type in</div>
<div>
<span style="color: #3d85c6;">?sql_lookup("::Name::local_mysql","sparkpost_api","id=1","api_key")</span></div>
<div>
and it will spit out the api key. For example, if your api key is "they shoot the horses, don't they?" it will print that. If that is working then well and good, you can go to the next step. If not go back and correct any mistakes then you are set to go.<br />
<br /></div>
<div>
Next, we are going to test with sparkpost. Log into sparkpost and take a look at api documents. They give examples for various languages and SMTP_Relay. we will be using SMTP_Relay since it lot easier to integrate with alpha and takes only few lines of code. Take note of host, port, user_name and password. we will see if we can sign in to sparkpost using smtp_open method from alpha.</div>
<div>
So again in your interactive window type in</div>
<div>
<br /></div>
<div>
<span style="color: #3d85c6;">dim ps as p</span></div>
<div>
<span style="color: #3d85c6;">dim pm as p</span></div>
<div>
<div>
<span style="color: #3d85c6;">?email_smtp_open(ps, "smtp.sparkpostmail.com", 587, "SMTP_Injection", sql_lookup("::Name::local_MySql", "sparkpost_api", "ID=1", "api_key"), "STARTTLS")</span></div>
</div>
<div>
<span style="color: #3d85c6;"><br /></span></div>
<div>
it should come out .t. If it does you are good to go, if not go back and correct any mistakes and re do till you succeed.</div>
<div>
Next, we will create a simple xbasic function and save that function. Go to regular control panel and click on the code tab and select new and function. Name the function anything you like, mine is email_sparkpost_send. The result is logical and the parameters are to: character, subject: character, message: character. When written the function should look like this:</div>
<div>
<br /></div>
<div>
<div>
<span style="color: #3d85c6;">FUNCTION email_sparkpost_send AS L (to AS C, subject AS C, message AS C )</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim result as l</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim ps as p</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>dim pm as p</span></div>
<div>
<span style="white-space: pre;"><span style="color: #3d85c6;"> </span></span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = email_smtp_open(ps,"smtp.sparkpostmail.com",587,"SMTP_Injection",sql_lookup("::Name::local_MySql","sparkpost_api","ID=1","api_key"),"STARTTLS")</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>if result then</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.from = "you@yourdomain.com"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.from_alias = "Your Name"</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.to = to</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.subject = subject</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>pm.message = message</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>result = email_smtp_send(pm,ps)</span></div>
<div>
<span style="color: #3d85c6;"><span style="white-space: pre;"> </span>end if</span></div>
<div>
<span style="color: #3d85c6;">email_smtp_close(ps)</span></div>
<div>
<span style="color: #3d85c6;">email_sparkpost_send = result</span></div>
<div>
<span style="color: #3d85c6;">END FUNCTION</span></div>
</div>
<div>
<br />
Now we are going to test this with a dialog component and see if all works as expected.<br />
Create a dialog with three controls: 1> to text, 2> subject text 3> message text-area and add a button > send email. On the onClick event call an xbasic function to cal this email_sparkpost_send.<br />
See if the message is sent and an alert appears. It does for me.<br />
If all goes well you have sent an email with sparkpost and alphafive, isn't that wonderful?<br />
Congratulations.<br />
<br />
Next we will see how to send multiple emails at one shot. That's for next week.</div>
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-15695115522284167662017-09-03T17:35:00.001-07:002017-09-03T18:18:45.799-07:00Sparkpost and Alpha Five - Fantastic<div dir="ltr" style="text-align: left;" trbidi="on">
<h4 style="text-align: left;">
Date: September 3rd 2017.</h4>
<h2 style="text-align: left;">
Sparkpost and Alpha Five... </h2>
<div>
Part One:</div>
<div>
Okay, now that you have done lots of work in Alpha Five and you have many clients under your belt, you are thinking - "Hey how about mass email marketing.. sounds like its about time."</div>
<div>
Yes it's about time.</div>
<div>
I am assuming you have done text messaging via Twilio earlier and now ready for email stuff.</div>
<div>
<br /></div>
<div>
The first thing you need to do is to sign up with an email service provider. There are few out there, but this is about Sparkpost.</div>
<div>
So I am going to deal with that only.</div>
<div>
Go to www.sparkpost.com and check it out. You can try for free or get started for free. I did get started for free. They give you about 25000 emails per day, for me that is lots of emails. Once you get the hang of it then you can upgrade anytime you want. So, I would say sign up for free account. Nothing fancy, no money. Just free as in free.</div>
<div>
<br /></div>
<div>
Once you get signed up then you can send an email via their sandbox account but that is only good for 5 emails, pittance, because you need more than that to complete all testing. So what can you do.</div>
<div>
Well, as far as sparkpost is concerned from address a sending domain. So go to your dashboard and create a new shiny domain. They need to verify you hold that account before you can send email via that address. When you create the domain it says unverified. In order to verify you will need do either of these two steps. You can verify with SMTP relay, meaning they will send an email to postmaster or abuse @ your domain.com. So you should have one of those set in your website. I had postmaster@....com and the email came to it and verified to start sending. Or you can copy paste the DNS setting which according to them is better, but I did not lose anything by the email method. So do the way you like, but at the end your domain ( that is the from address ) needs to be verified.</div>
<div>
Once verified, that account will say verified, ready for sending. Now you are halfway thru with sparkpost.</div>
<div>
<br /></div>
<div>
Next you need to generate an api key. </div>
<div>
Go to your dashboard and scroll down, it will indicate the progress. You have created sending domain and verified. Next click on the manage api keys and generate a new api key. Now here is the important part. Once you close that window you cannot get that key back. so copy and paste it in at least two places with some kind of name that you can recognize and recall the api key..</div>
<div>
<br /></div>
<div>
Now you are almost there in sparkpost.</div>
<div>
There are several ways to send emails with sparkpost and they give you example codes.</div>
<div>
The example codes include cURL, NodeJs and C# among other languages. You can also send via SMTP_Relay, meaning using standard smtp open, send and close methods. I am going to talk about SMTP_Relay since it is the easiest of all. There is nothing fancy no need to work hard and just few lines of code you can send one or many emails as you want. But eventually I will try to master javascript way of doing things, but that is for down the road.</div>
<div>
<br /></div>
<div>
Next, we need to work on alpha to complete the rest of the stuff so we can send one or many emails we need.</div>
<div>
That is for next week...</div>
<div>
Stay tuned.</div>
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com1tag:blogger.com,1999:blog-7619250637793361403.post-50420029145671124762016-07-10T05:11:00.001-07:002016-07-10T05:11:51.035-07:00Alphasoftware and AngularJS - part 4<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name" style="color: #666666; font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif; font-size: 22px; font-weight: normal; line-height: normal; margin: 0.75em 0px 0px; position: relative;">
<a href="http://alphawebprogramming.blogspot.com/2016/06/alphasoftware-and-angularjs-part-3.html" style="color: #888888; text-decoration: none;">Alphasoftware and AngularJS - part </a>4.</h3>
<div>
<br /></div>
<div>
Date: July 10th 2016.</div>
<div>
<br /></div>
<div>
Good morning everyone.</div>
<div>
Last week we built main menu successfully, today we will redirect to the contents of at least one page to show you the fundamentals how it is done.</div>
<div>
If you remember hello gandhi post where I sent a http call to the alpha server which provided a message "hello gandhi" and angular js posted that message on the html page, we will be using the same method to get the data from alpha server. The alpha server will query a mysql backend database and execute the query and fashion the output as json object. And angular js will get the output to display, we will modify with bootstrap to look beautiful</div>
<div>
<br /></div>
<div>
So here is the xbasic code that runs in alpha server to fetch the items from inventory table.</div>
<div>
<br /></div>
<div>
<div>
<%a5</div>
<div>
Response.headers.set("Access-Control-Allow-Origin", "*")</div>
<div>
dim cn as sql::Connection</div>
<div>
dim result as l = .f.</div>
<div>
dim args as sql::Arguments</div>
<div>
dim rs as sql::ResultSet</div>
<div>
dim msg as c</div>
<div>
dim sqlSelect as c</div>
<div>
result = cn.Open("::Name::alpha_blog")</div>
<div>
if result then</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>sqlSelect = "SELECT id, brand, description, unit_price FROM inventory ORDER BY brand"</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>result = cn.Execute(sqlSelect)</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>if result then</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>rs = cn.ResultSet</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg = rs.ToJSONObjectSyntax()</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg = "{\"items\":["+strtran(msg,crlf(),",")+"]}"</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg = strtran(msg,"'","\"")</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>else</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg = "\"items\":([\"msg\" : \"unable to get records\"])"</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>end if</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>cn.Close()</div>
<div>
else</div>
<div>
msg = "\"items\":([\"msg\" : \"unable to get connection\"])"</div>
<div>
end if</div>
<div>
?msg</div>
<div>
%></div>
</div>
<div>
<br /></div>
<div>
As you can see the alpha a5w page contains nothing but xbasic code and puts out the data as json formatted data. (I am using version 11 and in that version I do need to convert the json to format properly with double quotes).</div>
<div>
<br /></div>
<div>
So when a call to this a5w page happens alpha serves up the data to the call.</div>
<div>
And now back in the angularJs to harvest the data and show it on the page.</div>
<div>
<br /></div>
<div>
If you remember in the app.js we had a route </div>
<div>
<div>
.when('/items', {</div>
<div>
templateUrl: 'partials/items.html',</div>
<div>
controller: 'itemsCtrl'</div>
<div>
})</div>
</div>
<div>
that redirects to the items page and uses the itemsCtrl controller as content director.</div>
<div>
Now we will build that controller.</div>
<div>
<br /></div>
<div>
<div>
'use strict';</div>
<div>
var SERVER = "http://xx.xx.xx.xx:port/";</div>
<div>
<br /></div>
<div>
alphaBlog.controller('itemsCtrl', function($scope, $http) {</div>
<div>
$http.get(SERVER + "alpha_blog/itemsCallback.a5w")</div>
<div>
.success(function(response) {$scope.items = response.items;});</div>
<div>
});</div>
</div>
<div>
<br /></div>
<div>
As you can see the response.items is now assigned to $scope.items.</div>
<div>
If you just leave it alone you will see page full of items, not pleasing. So now we are going to use angularJs directive ng-repeat to go thru each item an display nicely, something for n next n loop in alpha.</div>
<div>
So replace the items.html to </div>
<div>
<div>
<div></div>
<div>
<h1>Items</h1></div>
<div>
<table></div>
<div>
<thead></div>
<div>
<td>Brand</td></div>
<div>
<td>Description</td></div>
<div>
</thead></div>
<div>
<tr ng-repeat = "x in items"></div>
<div>
<td>{{x.brand}}</td></div>
<div>
<td>{{x.description}}</td></div>
<div>
</tr></div>
<div>
</table></div>
<div>
</div>
<div>
</div></div>
</div>
<div>
Here we are using ngRepeat directive ( note when we state, we state ng-repeat in the html, since the directive will be interpreted by angularJs for proper camelCase since css can also be included in the HTML markup). The ngRepeat cycles thru the items and displays the content in a tabular form. You can use table to <li> </li> construct to display.</div>
<div>
<br /></div>
<div>
Okay if you notice that i am pulling only few fields from the inventory table and yet again I am only displaying fewer fields, right. Unlike alpha I am not calling large amount of data once and keep playing with that data, I make repeated calls to the server and display as needed. This makes loading time shorter and make the user experience better. Should you decide to use local storage to feed the data it will be even faster and not dependent on the internet connection.</div>
<div>
<br /></div>
<div>
So for so good, now we will apply bootstrap css to make it look better with alternate coloring and panels. And we will be adding a back button to get back to the home - main menu panel. We will also add search feature to search the list to show only the item we need to see.</div>
<div>
So here is the next version of the items html with css and back button:</div>
<div>
<br /></div>
<div>
<div>
<div></div>
<div>
<div class="container-fluid"> </div>
<div>
<a href="#/" class="btn btn-info btn-md"></div>
<div>
Back to Home</div>
<div>
</a></div>
<div>
</div>
<div>
<div class="panel panel-default"></div>
<div>
<div class="panel-heading"></div>
<div>
<h3 class="panel-title">Item List</h3></div>
<div>
</div> </div>
<div>
</div></div>
<div>
</div>
<div>
Search: <input id="searchID" type="text" ng-model="itemName"></div>
<div>
<table class="table table-striped table-condensed"></div>
<div>
<thead></div>
<div>
<td>Name</td></div>
<div>
<td>Description</td></div>
<div>
</thead></div>
<div>
</div>
<div>
<tr ng-repeat="x in items | filter:itemName"></div>
<div>
<td><a href="#/items/{{x.id}}">{{x.brand}}</a></td></div>
<div>
<td>{{x.description}}</td></div>
<div>
</tr></div>
<div>
</table></div>
<div>
</div>
<div>
</div> </div>
<div>
</div></div>
</div>
<div>
</div>
<div>
<br /></div>
<div>
If you notice that I have added a link to id field, that will display the detailed information for that item corresponding to that id number.</div>
<div>
Now we will build item detail html. As you expect this will need a controller, itemsDetailCtrl which will call the server with the id number of the item and fetch the data and we will again use bootstrap css to make that look nicer.</div>
<div>
So here is the detail page:</div>
<div>
<br /></div>
<div>
<div>
<div ng-controller="itemsDetailCtrl"></div>
<div>
<div class="container-fluid"> </div>
<div>
<a href="#/items" class="btn btn-info btn-md"></div>
<div>
Back to item</div>
<div>
</a></div>
<div>
<h2>Item Detail</h2></div>
<div>
<div class="panel panel-default"></div>
<div>
<div class="panel-heading"></div>
<div>
<h3 class="panel-title">Item Detail For: {{item_detail[0].brand}}</h3></div>
<div>
</div></div>
<div>
</div>
<div>
<div class="panel-body"></div>
<div>
Item ID: {{item_detail[0].id}}</div>
<div>
</div></div>
<div>
<div class="panel-body" style="background-color:#F0F0F0 "></div>
<div>
Brand: {{item_detail[0].brand}}</div>
<div>
</div></div>
<div>
<div class="panel-body"></div>
<div>
Description: {{item_detail[0].description}}</div>
<div>
</div></div>
<div>
<div class="panel-body" style="background-color:#F0F0F0 "></div>
<div>
Size: {{item_detail[0].size}}</div>
<div>
</div></div>
<div>
<div class="panel-body"></div>
<div>
Price: {{item_detail[0].unit_price | currency}}</div>
<div>
</div></div>
<div>
<div class="panel-body" style="background-color:#F0F0F0 "></div>
<div>
Notes: {{item_detail[0].notes}}</div>
<div>
</div></div>
<div>
</div> </div>
<div>
</div></div>
<div>
</div>
</div>
<div>
And to control the detail page here is the itemsDetailCtrl:</div>
<div>
(add this right below the itemsCtrl, so it looks like this)</div>
<div>
<br /></div>
<div>
<div>
'use strict';</div>
<div>
var SERVER = "http://xx.xx.xx.xx:port/";</div>
<div>
<br /></div>
<div>
alphaBlog.controller('itemsCtrl', function($scope, $http) {</div>
<div>
$http.get(SERVER + "alpha_blog/itemsCallback.a5w")</div>
<div>
.success(function(response) {$scope.items = response.items;});</div>
<div>
});</div>
</div>
<div>
<br /></div>
<div>
<div>
alphaBlog.controller('itemsDetailCtrl', function($scope, $routeParams, $http) {</div>
<div>
$scope.item_id = $routeParams.item_id;</div>
<div>
$http.get(SERVER + "alpha_blog/item_DetailCallback.a5w",{params:{item:$scope.item_id}})</div>
<div>
.success(function(response) {$scope.item_detail = response.item;});</div>
<div>
});</div>
</div>
<div>
and the server will process this http call and respond with the item in question as a json object, and here is the a5w page that does the trick:</div>
<div>
<br /></div>
<div>
<%a5</div>
<div>
Response.headers.set("Access-Control-Allow-Origin", "*")</div>
<div>
dim cn as sql::connection</div>
<div>
dim result as l=.f.</div>
<div>
dim args as sql::arguments</div>
<div>
dim rs as sql::resultset</div>
<div>
dim sqlSelect as c</div>
<div>
dim msg as c</div>
<div>
dim flag as l=.f.</div>
<div>
dim item_id as n</div>
<div>
dim item as c</div>
<div>
'item=2008</div>
<div>
item_id = convert_type(item,"N")</div>
<div>
result = cn.Open("::Name::alpha_blog")</div>
<div>
if result then</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>sqlSelect = "SELECT id, brand, description, size, unit_price, notes FROM inventory WHERE id = :newID"</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>args.Set("newID", item_id)</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>result = cn.Execute(sqlSelect,args)</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>if result then</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>rs = cn.ResultSet</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg = rs.ToJSONObjectSyntax()</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg = "{\"item\":["+strtran(msg,crlf(),",")+"]}"</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg = strtran(msg,"'","\"")</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>end if</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>cn.close()</div>
<div>
else</div>
<div>
<span class="Apple-tab-span" style="white-space: pre;"> </span>msg = "{\"item\":\"unable to open connection to the database\""</div>
<div>
end if<span class="Apple-tab-span" style="white-space: pre;"> </span></div>
<div>
?msg</div>
<div>
%></div>
<div>
<br /></div>
<div>
So when the items page is listing all the items and when you click on the brand name, the link takes the item.id and passes as a parameter to the http call and returns the response object.</div>
<div>
The detail page the uses the bootstrap to fashion it in a nice way and angularJs display the data as array object with elements that we need.</div>
<div>
<br /></div>
<div>
All the controllers are listed in the same page and that page is called blogController.js and the index.html lists the link to the source file for the script tags so the controllers are called in when the index.html is loaded.</div>
<div>
So now so far we have seen how to model the scope object and use http to fetch data and implement search and show detail, isn't that cool todo with alpha and angularJs.</div>
<div>
<br /></div>
<div>
So we will see how this evolves:</div>
<div>
<a href="https://www.youtube.com/watch?v=jMn31KHj66M">https://www.youtube.com/watch?v=jMn31KHj66M</a></div>
<div>
<br /></div>
<div>
Please post any comments, so that I can improve the presentation written or the video.</div>
<div>
Thank you.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-33731506775555134312016-06-26T04:01:00.002-07:002016-06-26T06:37:21.803-07:00Alphasoftware and AngularJS - part 3.<div dir="ltr" style="text-align: left;" trbidi="on">
<h2>
Alphasoftware and AngularJS - part 3.</h2>
<div>
Date: June 26th 2016</div>
<div>
<br /></div>
<div>
Good Morning everyone.</div>
<div>
<br /></div>
<div>
Last week we did the home page that displays the main menu that will direct our user to various pages. Normally, you should have a login page as the first page and when person is granted access then the main menu will show up. We will do that later, I did not implement that into my app since i will be the one to use.</div>
<div>
<br /></div>
<div>
Now we are going to take advantage of the angular routing to direct the user to different pages then we will fill in the content of the pages.</div>
<div>
<br /></div>
<div>
Go to the blogApp.js file open it.</div>
<div>
<br /></div>
<div>
When you look at the content </div>
<div>
<br /></div>
<div>
it will be</div>
<div>
<br /></div>
<div>
<div>
<span style="background-color: white;">'use strict';</span></div>
<div>
<span style="background-color: white;"><br /></span></div>
<div>
<span style="background-color: white;">var alphaBlog = angular.module('alphaBlog',[</span></div>
<div>
<span style="background-color: white;"> 'ngRoute'</span></div>
<div>
<span style="background-color: white;">]);</span></div>
<div>
<span style="background-color: white;"><br /></span></div>
<div>
<span style="background-color: white;">alphaBlog.config(function($routeProvider){</span></div>
<div>
<span style="background-color: white;"> $routeProvider</span></div>
<div>
<span style="background-color: white;"> .when('/', {</span></div>
<div>
<span style="background-color: white;"> templateUrl: 'partials/home.html'</span></div>
<div>
<span style="background-color: white;"> });</span></div>
<div>
<span style="background-color: white;"> </span></div>
<div>
<span style="background-color: white;">});</span><br />
<span style="background-color: white;"><br /></span>
<span style="background-color: white;">change that to:</span><br />
<br />
'use strict';<br />
<br />
var alphaBlog = angular.module('alphaBlog',[<br />
'ngRoute'<br />
]);<br />
<br />
alphaBlog.config(function($routeProvider){<br />
$routeProvider<br />
<br />
.when('/items', {<br />
templateUrl: 'partials/items.html'<br />
})<br />
.when('/', {<br />
templateUrl: 'partials/home.html'<br />
});<br />
<br />
});<br />
<br />
save the file, note that between the routes there is no semicolon.<br />
So now when you click on the items button the items page will pop up.<br />
So let's go and create a new page.<br />
Create a new file under partials, call that items.html and fill that with the following.<br />
<br />
<div><br />
<h1>Items </h1><br />
</div><br />
<br />
and save it and refresh the index.html on the browser and when you click on the items button the items page will pop up. if all goes well then we can do that to all pages, we will fill in the content later on on each page along with the controller that will display the contents dynamically.<br />
So now, let's see how we are doing:<br />
<br />
<a href="https://www.youtube.com/watch?v=nAUR9KVLNZw">https://www.youtube.com/watch?v=nAUR9KVLNZw</a><br />
<br />
take a look at this video.<br />
The finished routing should look like this:<br />
'use strict';<br />
<br />
var alphaBlog = angular.module('alphaBlog',[<br />
'ngRoute'<br />
]);<br />
<br />
alphaBlog.config(function($routeProvider){<br />
$routeProvider<br />
.when('/map', {<br />
templateUrl: 'partials/our_location.html'<br />
})<br />
.when('/weekly_wine_tasting', {<br />
templateUrl: 'partials/weekly_wine_tasting.html'<br />
})<br />
.when('/wine_recommendation_show', {<br />
templateUrl: 'partials/recommendation_list.html'<br />
})<br />
.when('/new_purchase_order', {<br />
templateUrl: 'partials/new_purchase_order.html'<br />
})<br />
.when('/vendors', {<br />
templateUrl: 'partials/vendors.html'<br />
})<br />
.when('/signin', {<br />
templateUrl: 'partials/signin.html'<br />
})<br />
.when('/appointments', {<br />
templateUrl: 'partials/appointments.html'<br />
})<br />
.when('/delivery', {<br />
templateUrl: 'partials/delivery.html'<br />
})<br />
.when('/items', {<br />
templateUrl: 'partials/items.html'<br />
})<br />
.when('/', {<br />
templateUrl: 'partials/home.html'<br />
});<br />
<br />
});<br />
<br />
<br />
Next week we will start filling in the contents of the page.<br />
<br />
Please post any comments and let me know how to improve this blog.<br />
Have a wonderful day.<br />
<br />
<br /></div>
</div>
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-78040272218535174522016-06-19T04:10:00.001-07:002016-06-19T04:54:34.402-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<h2>
Alphasoftware and AngularJS</h2>
<div>
Part 2, </div>
<div>
June 19th 2016.</div>
<div>
<br /></div>
<div>
Happy Fathers Day everyone!</div>
<div>
<br /></div>
<div>
Today we will be discussing how to set up device deployable product.</div>
<div>
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.</div>
<div>
So, let's get going.</div>
<div>
<br /></div>
<div>
First we need to setup required frameworks for our project.</div>
<div>
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.</div>
<div>
You can verify the installation with</div>
<div>
node -v and npm -v commands you should see the version for each.</div>
<div>
If okay so far, we are set to go.</div>
<div>
Now we are going to install the packages with npm. Follow the commands one by one and you will install the required packages.</div>
<div>
<br /></div>
<div>
sudo npm install -g corodova, supply the password when prompted.</div>
<div>
that will download and install cordova ( -g option installs globally)</div>
<div>
<br /></div>
<div>
Now we will create the program, I will call my program BLOG.</div>
<div>
Enter the command</div>
<div>
<span style="background-color: white;">cordova create blog com.niniswinecellar blog</span></div>
<div>
<span style="background-color: white;">your company identifier is com prefixed, so if your id is alpha.com the instead f com.niniswinecellar use com.alpha.</span></div>
<div>
<span style="background-color: white;">You will see Cordova creates the folder and necessary files.</span></div>
<div>
<span style="background-color: white;">Now cd to blog with cd blog command.</span></div>
<div>
<span style="background-color: white;">You can inspect the contents with ls command and see the files are there.</span></div>
<div>
<span style="background-color: white;">Next, we will add iOS platform with this command</span></div>
<div>
<span style="background-color: white;">cordova platforms add </span>iOS.</div>
<div>
We will be adding more packages at this point with another package manager - Bower.</div>
<div>
Let's add Bower with npm. </div>
<div>
npm install -g bower ( if there are errors you will need to run sudo nom install -g bower)</div>
<div>
Once installed we will use bower to install other components.</div>
<div>
We are still in the blog directory and install the following</div>
<div>
bower install angular</div>
<div>
bower install angular-route</div>
<div>
bower install bootstrap</div>
<div>
bower install ngCordova.</div>
<div>
<br /></div>
<div>
I like using Brackets editor since it comes with preview web server and the path is easily managed.</div>
<div>
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.</div>
<div>
Start the Brackets and load the folder blog into it.</div>
<div>
And select the index.html file and start the preview server.<br />
You will see phone gap log in flashing screen.<br />
If that happens all good.<br />
<br />
Here is the video:<br />
<br />
<a href="https://www.youtube.com/watch?v=fFScQpnIY-U">https://www.youtube.com/watch?v=fFScQpnIY-U</a><br />
<br />
This is how I have added the packages to the project, a step I did not show in the last video:<br />
<a href="https://www.youtube.com/watch?v=QwOMlGddy1U">https://www.youtube.com/watch?v=QwOMlGddy1U</a></div>
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-77487415795087443682016-06-11T17:36:00.000-07:002016-06-11T17:49:24.669-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<h2>
Alphasoftware and AngularJS</h2>
<div>
Date: June 11th 2016:</div>
<div>
<br /></div>
<div>
Okay, now I will be discussing how to integrate AngularJs with Alphasoftware. </div>
<div>
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.</div>
<div>
<br /></div>
<div>
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<b>. M</b>(ongoDB)<b>E</b>(xpress)<b>A</b>(ngularJS)<b>N</b>(odeJS) .</div>
<div>
<br /></div>
<div>
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.,</div>
<div>
<br /></div>
<div>
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.</div>
<div>
<br /></div>
<div>
So we will start with the general introductory page:</div>
<div>
Hello World example</div>
<div>
1> from standard html page</div>
<div>
2> from alpha five web server with a5w page</div>
<div>
3> from angularJS simple display page</div>
<div>
4> from angularJs displaying from local alpha five web server</div>
<div>
5> from angularJS calling a remote alpha five web server </div>
<div>
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.</div>
<div>
<br /></div>
<div>
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.</div>
<div>
<br />
Please copy and paste this link:</div>
<div>
http://www.youtube.com/watch?v=3JlfvoeP6Ic</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Hope you like this, let me know.</div>
<div>
You comments are most appreciated.</div>
<div>
<br /></div>
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-63766181409002334582016-06-10T05:44:00.001-07:002016-06-10T05:44:12.804-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
July 10th 2016<br />
<br />
Sorry everybody, I have been away and busy with lots of things and did not post any new post lately.<br />
Now I am back.<br />
I will be posting few articles how to integrate Alpha software with AngularJS and Iconic framework.<br />
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.<br />
Starting this Sunday I hope to post once a week to show what can be done.<br />
Thanks<br />
See you soon.</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com2tag:blogger.com,1999:blog-7619250637793361403.post-86055522544382043792014-08-26T06:33:00.002-07:002014-08-26T08:11:46.633-07:00Master Detail grid for a purchase order<div dir="ltr" style="text-align: left;" trbidi="on">
August 26th 2014<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
Printing report and sending email are again straight forward. One is done with action javascript, the other via an xbasic routine.<br />
<br />
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.<br />
<br />
When all done the parent grid and child detail grid work flawlessly and has been a good addition to my work schedule.<br />
<br />
The same method may be applied to receiving document and especially sales. I have to finish the sales before I post it.<br />
In the meantime here are some videos to show how this is done<br />
<br />
purchase order detail:<br />
<a href="http://screencast.com/t/zwe2K2H6yC">http://screencast.com/t/zwe2K2H6yC</a><br />
purchase order header part 1<br />
<a href="http://screencast.com/t/3ON0pzC30H1">http://screencast.com/t/3ON0pzC30H1</a><br />
purchase order header part 2<br />
<a href="http://screencast.com/t/aeLcMqqa">http://screencast.com/t/aeLcMqqa</a><br />
real life functioning purchase order at my store<br />
<a href="http://screencast.com/t/h7N63XZqKjM">http://screencast.com/t/h7N63XZqKjM</a><br />
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com2tag:blogger.com,1999:blog-7619250637793361403.post-91632895427327378152014-07-31T05:21:00.001-07:002014-07-31T05:30:06.373-07:00Javascript Date Functions<div dir="ltr" style="text-align: left;" trbidi="on">
July 31st 2014.<br />
<br />
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.<br />
You can view all of their offering at <a href="http://www.w3schools.com/">www.w3schools.com</a><br />
<br />
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.<br />
<br />
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.,<br />
<br />
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.<br />
<br />
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<br />
(1) due 10th day of month returned value 1<br />
(2) end of the month returned value 2<br />
(3) 10 days from the bill returned value 3<br />
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.<br />
<br />
So here is the video:<br />
<a href="http://screencast.com/t/mn0CtPesHq" target="_blank">http://screencast.com/t/mn0CtPesHq</a><br />
<br />
the code that runs in the onChange event of the field Terms is here:<br />
As I said earlier this is only for demonstration, you can assign the various values as you like and arrive at your desired result.<br />
<br />
var invDate = {dialog.Object}.getValue('DATE_OF_INVOICE');<br />
invDate = new Date(invDate);<br />
var terms = {dialog.Object}.getValue('TERMS');<br />
if (terms == 1) {<br />
//alert('10th of the month');<br />
var due_day = 10;<br />
var d1 = invDate.getDate();<br />
var m1 = invDate.getMonth()+1;<br />
//<br />
if (d1 <= due_day) {<br />
var new_invDate = invDate.setDate(due_day);<br />
}<br />
else<br />
{<br />
new_invDate = invDate.setDate(due_day);<br />
new_invDate = invDate.setMonth(m1);<br />
}<br />
invDate.setTime(new_invDate);<br />
var mm = invDate.getMonth()+1;<br />
if (mm < 10) {<br />
mm = "0"+mm;<br />
}<br />
var dd = invDate.getDate();<br />
var yyyy =invDate.getFullYear();<br />
}<br />
else if (terms == 2) {<br />
//alert('end of the month');<br />
var lastDayOfMonth = new Date(invDate.getFullYear(),invDate.getMonth()+1,0);<br />
var mm = lastDayOfMonth.getMonth()+1;<br />
var dd = lastDayOfMonth.getDate();<br />
var yyyy = lastDayOfMonth.getFullYear();<br />
}<br />
else if (terms == 3) {<br />
//alert('10 days from invoice');<br />
invDate.setTime(invDate.getTime()+(10*24*60*60*1000));<br />
var mm = invDate.getMonth()+1;<br />
var dd = invDate.getDate();<br />
var yyyy = invDate.getFullYear();<br />
}<br />
var due_date = mm + "/" + dd + "/" + yyyy;<br />
{dialog.Object}.setValue('DUE_DATE',due_date );<br />
<br />
Please let me know if there are any errors and any improvements I can make.</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-57611895901939437102014-02-22T05:17:00.001-08:002014-02-22T05:17:22.371-08:00Edit Web Security User<div dir="ltr" style="text-align: left;" trbidi="on">
Edit Web Security User..<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
Since this involves security, it is better to have all these components require a login.<br />
<br />
Here are the videos:<br />
WebSecurity User Edit Video 1<br /><a href="http://screencast.com/t/fmhL1gFQI">http://screencast.com/t/fmhL1gFQI</a><br />
<br />
WebSecurity User Edit Video 2<br /><a href="http://screencast.com/t/45J0wVl3bI">http://screencast.com/t/45J0wVl3bI</a><br />
<br />
WebSecurity User Edit Video 3<br /><a href="http://screencast.com/t/amK07SCwC">http://screencast.com/t/amK07SCwC</a></div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-13050770279770839292014-02-13T15:54:00.001-08:002014-02-13T15:54:53.142-08:00So you want to setup web security in AlphaFive...<div dir="ltr" style="text-align: left;" trbidi="on">
<strong>So you want to setup web security in AlphaFive...</strong><br />
<strong></strong><br />
I was very busy during the holiday season, the business I am in demands that. I skipped many weeks of posting. Sorry about that.<br />
So I thought now is the best time to talk about web security.<br />
By default the web security is not enabled. You have to enable it then create the necessary components to go with it.<br />
<br />
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.<br />
<br />
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.<br />
<br />
Once you have done that, it is time to setup security users and their permissions.<br />
The following screencast shows how to setup the security. Take a look:<br />
<a href="http://screencast.com/t/GuG5Qt97">http://screencast.com/t/GuG5Qt97</a><br />
<br />
Once you have set the security up, the first thing we need to do is add a new user or many users.<br />
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.<br />
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.<br />
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.<br />
Here is a video showing the dialog being built, take a look:<br />
<a href="http://screencast.com/t/jW5W8WOqv">http://screencast.com/t/jW5W8WOqv</a><br />
<br />
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.<br />
Here is that video, take a look:<br />
<a href="http://screencast.com/t/8epwwLRH">http://screencast.com/t/8epwwLRH</a><br />
<br />
Here is the final video where I am entering a new user to the security system.<br />
<a href="http://screencast.com/t/OSfXwP8WEY">http://screencast.com/t/OSfXwP8WEY</a><br />
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-44246208879126247732013-11-08T08:49:00.003-08:002013-11-08T08:49:40.081-08:00Basic Report<div dir="ltr" style="text-align: left;" trbidi="on">
Today I will be showing you how to do a basic report.<br />
In order to do this correct you need to set up the path alias properly. In one of the previous posts I have done that. Please follow that post and establish the path alias before constructing the report.<br />
<br />
Since this is done with MySQL back end, the report will be based on SQL Data source. Select the connection string and the table then design the report as usual. Drag and drop the fields necessary. And once done preview the report and if all is satisfactory save the report with a name you can recall. That's it. You are done.<br />
<br />
Now place the report in the tabbedui_main and publish you will be able to see via a browser interface.<br />
<br />
take a look at the screencast:<br />
<br />
<a href="http://screencast.com/t/caenE36BLM">http://screencast.com/t/caenE36BLM</a> </div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-32852421917053664152013-10-30T08:27:00.001-07:002013-10-30T08:27:07.354-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
Today I will be showing various steps to show your web site over the Internet and sending email from the website.<br />
In order to reach your website from somewhere using a browser you will need to few steps.<br />
First go to the computer where you will hosting the server and cmd window and type the command: ipconfig and copy the ip address of the computer.<br />
Then go to Google and find out the ip address of your site by typing what is my ip in the search box.<br />
Then go to the base of you router, usually it is either 192.168.0.1 or 192.168.1.1 then login and go to the advanced tab and forward your alpha port to that local ip address.<br />
if you need to adjust the firewall then allow the alphawas to be a permitted program.<br />
Then test it you should be able to reach your website from outside.<br />
<br />
Sending email from your website:<br />
<br />
First setup the email in Project properties, then setup Email in the view, setting, email. Test to see the test email shows success. If succeeded then you can create a dialog and send the email from your web site.<br />
<br />
Please see all of the following screencasts showing the above.<br />
<br />
Port Forwarding:<br /><a href="http://screencast.com/t/cU5nUuuZc">http://screencast.com/t/cU5nUuuZc</a><br />
Path Alias:<br /><a href="http://screencast.com/t/AuJnBUyeRi6">http://screencast.com/t/AuJnBUyeRi6</a><br />
Reaching from outside:<br /><a href="http://screencast.com/t/13X1mOBgvh6">http://screencast.com/t/13X1mOBgvh6</a><br />
Sending Email Part1, setting up profile and account settings:<br /><a href="http://screencast.com/t/UC8TWAYFs">http://screencast.com/t/UC8TWAYFs</a><br />
Dialog and sending the email:<br /><a href="http://screencast.com/t/ack8hhLbIc">http://screencast.com/t/ack8hhLbIc</a><br />
Sending Email from website:<br /><a href="http://screencast.com/t/8rTrYeUTw0v">http://screencast.com/t/8rTrYeUTw0v</a></div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com1tag:blogger.com,1999:blog-7619250637793361403.post-3004810624729168142013-10-25T08:43:00.001-07:002013-10-25T08:43:29.022-07:00Few More Standard Grids With Search<div dir="ltr" style="text-align: left;" trbidi="on">
Okay<br />
<br />
Now I have built few more standard grids with search part and detail part which I have uploaded to the tabbedui_main page.<br />
Since these are simple and similar I am gong to show only one and rest are all the same.<br />
<br />
Here are the videos.<br />
<br />
<a href="http://screencast.com/t/c3rogbBtNeZ">http://screencast.com/t/c3rogbBtNeZ</a><br />
<br />
<a href="http://screencast.com/t/YglUf6ypB">http://screencast.com/t/YglUf6ypB</a><br />
<br />
Next week or so I will show how to create reports and send emails.</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com1tag:blogger.com,1999:blog-7619250637793361403.post-6032475525678658992013-09-24T07:51:00.002-07:002013-09-24T07:51:51.350-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
September 24th 2013:<br />
<br />
Last time we saw how to do a tabbed ui interface. Today I am going to add few features to it to make it look pretty and as well as add picture to the home tab.<br />
<br />
Here are the videos:<br />
<a href="http://screencast.com/t/mEZAYnoGGWP">http://screencast.com/t/mEZAYnoGGWP</a><br />
<br /><a href="http://screencast.com/t/XPIoFLxQpn">http://screencast.com/t/XPIoFLxQpn</a><br />
<br />
<a href="http://screencast.com/t/Ozw5cIfbNY">http://screencast.com/t/Ozw5cIfbNY</a><br />
<br />Next week I will be showing you how to create a component that has a search part with many fields to select from. I have many other grids with simple search part as we did earlier, so I am just going to create them and add them to the tabbed ui interface.<br />
<br />
see you next time.</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com1tag:blogger.com,1999:blog-7619250637793361403.post-8383364115806142582013-08-29T09:59:00.000-07:002013-08-29T09:59:17.769-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<strong>TabbedUI interface:</strong><br />
<strong></strong><br />
Today I will be building a tabbedui interface to place all the components and display via a browser.<br />
The components can be placed in an a5w page and displayed or in a tabbedui interface (alpha builds the a5w page automatically) and then show that via a browser. These are two different approaches and whichever you like you can follow. I will be showing tabbedui for now.<br />
Just like any other component you start off with the building of the component and place the controls in the tabbedui component and when you save alpha automatically created a tabbedui page and when you publish that page can be viewed via a browser.<br />
<br />
Here are the videos to start off. I will continue to work with this components till it is finalized.<br />
<br />
Building tabbedui_main component:<br /><a href="http://screencast.com/t/O6XMlYiG">http://screencast.com/t/O6XMlYiG</a><br />
<br />
The tabbedui_main.a5w page by alpha:<br /><a href="http://screencast.com/t/HYSLb0ub6h">http://screencast.com/t/HYSLb0ub6h</a></div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com2tag:blogger.com,1999:blog-7619250637793361403.post-45387475625217514342013-08-21T08:09:00.003-07:002013-08-21T08:13:22.082-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<strong>Grid with Search and Detail view parts:</strong><br />
<strong></strong><br />
Today I will be building a grid with search and detail view parts. For this I am using a table in my MySQL backend named Vendor. <br />
<br />
The fields are<br />
id integer primary key auto increment<br />
name varchar 30<br />
address1 varchar 30<br />
address2 varchar 30<br />
city varchar 30<br />
state char 2<br />
zipcode char 5<br />
phone varchar 20<br />
contact varchar 30<br />
contact_phone varchar 20<br />
contact_email varchar 50<br />
contact_sms varchar 30<br />
purchase_today decimal 9,2<br />
purchase_ptd decimal 9,2<br />
purchase_ytd decimal 9,2<br />
purchase_total decimal 9,2<br />
account_number varchar 20<br />
<br />
the connection string is the same we used earlier. You can refer back to connection string post to refresh your memory.<br />
The grid is built to show main information.<br />
The search is built to search on name only.<br />
The detail view is built to show all the fields in two columns.<br />
<br />
The items I do not like are removed but it is not necessary for the function of the grid.<br />
Here are the videos showing the construction of the grid.<br />
<br />
Finished grid & the table information in MySql<br />
<a href="http://screencast.com/t/LruHacH14Z">http://screencast.com/t/LruHacH14Z</a><br />
<br />
Building the grid and search part<br />
<a href="http://screencast.com/t/th7qWZiv">http://screencast.com/t/th7qWZiv</a><br />
<br />
Building and customizing detail view<br />
- Part1<br />
<a href="http://screencast.com/t/1vaK0ZU4Pgl2">http://screencast.com/t/1vaK0ZU4Pgl2</a> <br />
<br />
- Part2<br />
<a href="http://screencast.com/t/vEjEKsYgTb">http://screencast.com/t/vEjEKsYgTb</a><br />
<br />
- Part3 the finished product<br />
<a href="http://screencast.com/t/VACWnyRWnY">http://screencast.com/t/VACWnyRWnY</a><br />
<br />
<br />
<br />
</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-82824490123704468452013-08-13T08:51:00.001-07:002017-09-19T03:13:01.741-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<strong>Simple grid and simple a5w page to display the content:</strong><br />
<strong></strong><br />
Today we will be building a simple grid and place it on a a5w page which is shown in a browser window.<br />
Component:<br />
To build a component I have selected a simple table, TYPE from MySQL database. Start your alphafive and go to the workspace and select web components in the left menu. And then click new on the top. When the next dialog comes you can use that dialog or skip it. Today I will be using that dialog to select updatable grid with sql back end. Once done select the connection string and select the table. Then move all the fields you want to display.<br />
<br />
There are few items I do not like so I will be removing them. You don't have to. Like number of records per page, deleting records etc., Once done take a look at the preview and if you like save with an appropriate name. I gave type as it is on the type table.<br />
<br />
Once this is done, the next step will be to insert into an a5w page. That can be viewed via a browser interface.<br />
<br />
Next select a5w pages, click new on the top. When the page loads up select the WYSIWYG tab at the bottom ( for now at least ) then save the page with a reasonable name like type. Now click insert component and select the recently built type component. And save it again. Then you can check by clicking the lightning rod and if all goes well the page will be displayed in your default browser. Then you can publish right there by clicking the publish button or close the page and publish in the main window.<br />
<br />
Then start your browser and type in the address of the page. You will see your nice handiwork in full glory.<br />
<br />
Here are the videos showing the same.<br />
Building basic Type grid:<br />
<a href="http://screencast.com/t/q7Fjo8ZLt"><strike>http://screencast.com/t/q7Fjo8ZLt</strike></a><br />
Inserting into an alpha page and viewing via a browser:<br />
<strike><a href="http://screencast.com/t/bMiZUEplxD">http://screencast.com/t/bMiZUEplxD</a></strike><br />
Updated Video:<br />
Nov 19th 2017:<br />
<a href="http://www.youtube.com/watch?v=tVjQX3uqAik">http://www.youtube.com/watch?v=tVjQX3uqAik</a><br />
<br />
<a href="http://www.youtube.com/watch?v=eQ5LwMtqLzs">http://www.youtube.com/watch?v=eQ5LwMtqLzs</a><br />
<br /></div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0tag:blogger.com,1999:blog-7619250637793361403.post-83034241821756918872013-08-11T05:30:00.000-07:002013-08-11T05:30:17.491-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<b>Dialogs, Grids: What are they?</b><br />
<b><br /></b>
AlphaFive web interface is with grids and dialogs. Here is a short introduction before I build the first grid.<br />
<br />
Imagine your information is located in a central place managed by a supervisor and underneath the supervisor there are plenty of messengers. That's what you have. A database backend, web application server and unlimited licenses to access the application server.<br />
<br />
Whenever you request information from the central place ( database ) to the supervisor (web application server ) thru a messenger ( via a browser using your unlimited licenses ) the supervisor process the request and sends back the information thru the messenger.<br />
<br />
The grid is nothing but a representation of the information in a readable table format.<br />
<br />
When the requested information is just for reading only, it is sent over as read only and the messenger from the application server returns back to the supervisor.<br />
An example would be looking at some schedule, a list of assignments or googling for information etc., you can look but not change the information.<br />
When a requested information is for modification, then it is sent over with a messenger from the supervisor and was told to wait for sometime for the modifications to be done and bring the modified information back to the central place to be updated. If the information is modified within the specified time then the modified information is taken back and the central place is updated. But if the waiting time elapses before the changes are made and be ready to send back the messenger leaves the scene, so you get an error stating that there is no connection or no active grid etc.,<br />
A grid can run into many pages.<br />
<br />
The dialog on the other hand, you say knock knock to the supervisor and you get back a form to fill out and the messenger leaves behind instructions to send that back. When the form is filled out you return to the supervisor as instructed and the request is processed. This could be insertion or update of information. The supervisor will then process the information. Time is not essential here.<br />
A dialog is usually single page.<br />
<br />
So as you can see the grids depend on connection to the server available all the time and the dialog does not. So there is an advantage and disadvantage to both. Careful use of either one will improve the function of your website.<br />
<br />
So tomorrow we will build our first simple grid.</div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com1tag:blogger.com,1999:blog-7619250637793361403.post-38606574035418505812013-08-09T10:01:00.000-07:002017-09-19T02:29:31.422-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<b>Connection Strings:</b><br />
<br />
Good Morning.<br />
<br />
The next step in building a website with AlphaFive is to build connection strings. The connection strings are the method with which AlphaFive connects to the backend database source and builds the grids and dialogs etc.,<br />
<br />
Basically, Alpha can connect to many popular SQL databases. But I am using MySQL for my purpose. So I am going to show you the connection string for MySQL. Also I have included the connection strings for Access and Microsoft SQL Express 2012.<br />
<br />
You can build the connection strings by clicking on the "Tools" on the main menu or when you create a component then you can define the new connection string or edit the one you have already created.<br />
<br />
Click Tools and ten click on AlphaDAO connection strings.<br />
On the next dialog click New to create a new Connection string.<br />
On the next dialog, you can give some name that you can relate to easily.<br />
Then click on the button that says "Build"<br />
On the next dialog fill in the information needed and click on the test connection button. If the connection succeeded, then click "Refresh" to fresh the database schema. Then select the proper database.<br />
Again test the connection. If successful, save it.<br />
<br />
For my project I have the connection string named as "AlphaWeb" and the databse backend is MySQL.<br />
<br />
Here is the screencast of the connection strings:<br />
<br />
<strike><a href="http://screencast.com/t/X9ieiJ6xHg">http://screencast.com/t/X9ieiJ6xHg</a></strike><br />
Updated Video:<br />Nov 19th 2017<br />
<a href="http://www.youtube.com/watch?v=X8arEVAUtr0">http://www.youtube.com/watch?v=X8arEVAUtr0</a></div>
Govindan Gandhihttp://www.blogger.com/profile/00888146522559518976noreply@blogger.com0