ajax tutorials - am i missing something

[richard2007]

i am trying to start working with Ajax, and i must either be blind or dense (let me choose).

i have had a look at the tutorials, but they seem more examples than tutorials, they show you what it can do, but dont show me how to do it in a step by step guide (which is what i consider a tutorial to be)

i have no idea where or even how to start with ajax.

building a web component is easy, i follow the steps required to create a component, select the table, fields and properties. this is all set out in a logical format, but i just dont see this with ajax.

where is it? how do i implement it? how do i set up a callback page? do i put the ajax code on the web component or the a5w page or the callback page.

my questioning might demonstrate my ignorance.

thanks in advance

richard

[NoeticCC]

Re: ajax tutorials - am i missing something

My suggestion is to get yourself familiarised with A5 web pages and components first, and read up a tiny bit on Javascript... hopefully by that point, some of the documentation will have caught up with the scripts!

I don't know how much Xbasic programming you have done, either?

At any rate, there are no genies for the AJAX stuff just yet, but Alpha have written extensive Javascript libraries that let you access a lot of Javascript functions using Xbasic, and lets you generate and modify HTML web/form components using functions in these libraries.

I sent you a complete user administration module (with all the AJAX links and functions included) that is adapted from the sample in the WAS pages, it's not much but it's a start... did those help at all?

[drgarytraub]

Re: ajax tutorials - am i missing something

Hi Andrea,

I think his questions are actually right on the money. I sure would appreciate some step by step instructions.

As simple as, for example, to use the a5_msg_box function, do this:

1. put this code in the header of the page so and so.

2. then put this here and that there

Also, you refer to "complete user administration module" - is that the sample web pages? If so, I find them rather confusing. Again, just a step by step of how to do one's first AJAX thingy or two would be a great step toward trying to get our arms around this thing. Any further help would be appreciated LOTS!

Gary

[mmaisterrena]

Re: ajax tutorials - am i missing something

A step by step tutorial on how to use Ajax is a must, Alpha should publish one soon, right now theres a lot of confusion regarding Ajax

[Rich Hartnett]

Re: ajax tutorials - am i missing something

I'd love to see simple step-by-step instructions consisting of building a simple grid with just one or two fields. Then after testing it to make sure it works as designed, we learn how to add in the appropriate ajax code to allow the page to change just the field data, without refreshing the entire screen. (This gives the appearance of a super-fast desktop application.)

We test that to make sure it works as designed, then learn how to place a validation on the one or two fields using the ajax callbacks, so that if the entered data is wrong, a red box is placed around the problem field and the "error is listed next to it," rather than forcing the user to leave the web page. (As demonstrated on the A5 Ajax demo page. Very cool by the way.)

As simple as two fields in a grid sounds, if I learned how to do just that, I could probably take what I've learned and incorporate Ajax into 75% of my WAS applications, since most of them are built on grids. I just need some basic instructions. Unfortunately the A5 Ajax libraries don't help much if you don't know where to start.

As Alpha Five prides itself on being software that allows users to build complex applications *without* having to know how to write code, it seems unfair for those of us who have in fact done just as the advertisements claim - built very nice applications by using the component builders only - to then have the "carrot of Ajax dangled in front of our faces," only to find out that to add in this fantastic new process, we (in fact) have to know how to write at least a certain amount of code, which in hindsight, seems contradictory to the very foundation of Alpha 5 software.

I love Alpha Five software, and wouldn't use anything else. But the main reason I'm sold on it, IS because of its ease of development. From the company end, there's no point in "bragging" about something new (Ajax), if half of the customers (or more) using the product don't know how to implement it. As stated above, since there are no "genies" for Ajax yet, some simple step-by-step instructions would probably go a long way.

I think for a lot of us, if we could just get through the basics, we could "run with that," and learn the rest by trial and error. I for one, am dying to learn.

Just My 2 cents.

[FrankR]

Re: ajax tutorials - am i missing something

If there was only time to do what was done for this latest release, wasn't it better to offer it to the experienced developers than not at all?

I'm sure this is not the last effort from the company on Ajax support.
Maybe if someone from the company indicated this, it would make others feel better about the current support.

[Rich Hartnett]

Re: ajax tutorials - am i missing something

If there was only time to do what was done for this latest release, wasn't it better to offer it to the experienced developers than not at all?

I certainly wouldn't argue with you there Frank, and I KNOW this is not the last we've heard from Alpha on the subject, in fact I can almost guarantee that they are working on ways to build genies for Ajax as we speak, although most likely we won't see them until the release of Version 10.

I'm just saying that Alpha's entire premise is its "ease of development," and I agree with that. So all I'm asking for is some basic instructions to get us less technically savvy folks a chance to experiment. A "cheat sheet" of sorts for the incorporation of Ajax. (It might not end up being as hard as we think.)

Incidentally, in case anyone misundersood, my post was not in any way meant to be a "bashing" of Alpha software, to the contrary, I think they've got a great team of experts working on their products. I was just hoping that they (or maybe another more experienced developer) could "throw us a bone, to get us pointed in the right direction." LOL

[NoeticCC]

Re: ajax tutorials - am i missing something

I think his questions are actually right on the money. I sure would appreciate some step by step instructions.

Sure, things like omitting to mention that the Javascript libraries used in the examples must be linked in the .a5w page you want to use the Ajax code from was an oversight on Alpha's part, but IMHO, speaking as someone who is very much still NEW to Alpha 5, I really have to say that they have provided enough examples to get the message across as long as you are able to get to grips with basic Xbasic. (You don't need to know any Javascript beyond the simplified functions explained in the tutorials and on the sample pages)

First off, if you want to start with AJAX, start with the most straightforward example, e.g. AJAX_UnderstandingTheBasics.a5w

I do hope they add a bit more info to the Ajax sample pages, along the lines of the bullet point lists at the bottom of the older WAS sample pages, where they list functions etc. used in the components and outline what is going on, but as long as you have a bit of time to read through the explanations and are able to read the code provided in the sample web components and pages (I mean the source code, what you install when you run the sample web app demo DB and open the corresponding web project), there is plenty there to get on with!

If you want/need a genie to generate everything for you, you gotta wait a bit more, and for someone just starting out in A5, they REALLY should get to grips with basic web techniques before expecting to master AJAX - but at the end of the day, you have

a) Instruction videos on some of the earlier Ajax examples provided in the WAS example pages and

b) The complete code used in the examples, both the .a5w page and the AJAX.a5w page used in each example (where applicable). OK, so the very recent additions, like the grid example, might be a bit much to START with, and are not as documented as other features... but if you just LOOK at the message box example page* and look at where the code is placed, and try a few of the examples, there really isn't much more you can expect until the help files have been fully updated.

* and if you have the latest versions of the Javascript libraries, you should do if you have installed the latest patch - although there are 3 files that still use the old image syntax for referencing internal A5 images, but unfortunately Lenny deleted my attachment with the fixed versions so you'll have to make do with missing images for now - and have re-opened a new sample with the WAS demo and published it fully, according to the instructions

Also, you refer to "complete user administration module" - is that the sample web pages? If so, I find them rather confusing.

That is what I adapted it from, yes. But both my Ajax version and the sample that just uses dialogs, use built-in Alpha 5 functions that should, if security is actually set up properly (e.g. you have groups and users set up for it to pull up and display), work without you needing to change anything.

If you "must" understand what the user admin sample on the WAS demo page does (and to be able to use it, you don't), look at the events for the dialogs in the user admin components in the sample WAS Demo database and search for the functions used there (or even just start typing a5ws_ in the HTML editor in Alpha Five - basic info on the functions pops up in the bubble help - this should make a bit more sense.

Here is a list of the web app functions from the help file: http://support.alphasoftware.com/alp..._Functions.htm

Speaking of which, it may not be fully up to date, but a lot of the web techniques used in the samples, especially - for someone just starting out on Alpha 5 WAS, and especially Xbasic & how to use it in a web page, this is essential! - *are* documented in the help file: http://support.alphasoftware.com/alp...l/Contents.htm

[richard2007]

Re: ajax tutorials - am i missing something

Andrea,

you mentioned to me in the past that the ajax libraries are in c :/program files, /alpha v9 /java

but i see nothing there, what should i be looking for?

i am quite ok with building components and pages, i was just really unsure where to start with ajax.

gary hit the nail on the head, if someone would take 1 example/tutorial and post saying

this is where you will find the code/library (as i only see the code available from the samples)
this is where you put the code (and maybe the reason why if applicable, help with understanding)

just these few simple steps would be a great help. i have watched every video, thoroughly examined the tutorial, and i am still no clearer on the 2 points raised above.

like everyone else, love alpha, not ungrateful, ajax seems to be the main reason to upgrade to v9 and from what i have read it seems worth the spend. just need a little more guidance.

[NoeticCC]

Re: ajax tutorials - am i missing something

Andrea,

you mentioned to me in the past that the ajax libraries are in c :/program files, /alpha v9 /java

but i see nothing there, what should i be looking for?

I attached a screen shot, it's program files/a5v9 (or wherever you installed Alpha 5 to!) and the folder is JavaScript - not all of these are Ajax scripts, a lot have been part of A5 for years. The dates on yours may vary as I have edited a few of them, especially the menu one, as I don't like the hiding of dropdown boxes when menu items are expanded etc.

But you do NOT need to do anything with thes Javascript files as long as you have the latest build of Alpha 5 - the Javascript folder gets published to the web root of your project automatically, or at least it SHOULD if you make sure to clear the publishing history first in the publishing dialog.

this is where you will find the code/library (as i only see the code available from the samples) this is where you put the code (and maybe the reason why if applicable, help with understanding)

You don't need to find the code or do anything with it except make sure that if you use a feature from a sample page, you include the same .js and "a5System" .css files that are linked in the header of the .a5w page in the sample files, and that if you use the elements where the style or javascript is declared in the a5w page, you include the same file references in the header of your page.

As an example, see in red below the elements from the Ajax_EditCombo.a5w page that you MAY need to include, depending on which parts of the page you want to adapt (light red for general files, dark red for the two CSS a5System files that I am NOT sure are included in the update/patch).

The easiest way to get to grips with this is to just copy the file or files (the .a5w page and if there is a corresponding AJAX.a5w page, that as well) from the WAS sample pages into your own project and try to modify them. That way you are guaranteed to have all the necessary scripts etc. included in the a5w page in the first place.

[COLOR="Red"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/COLOR]

<html>
<head>
<title>Edit-Combo Tutorial</title>

[COLOR="red"]<script type="text/Javascript" src="Javascript/core.js"></script>
<script type="text/Javascript" src="Javascript/aui.js"></script>
<script type="text/Javascript" src="Javascript/AjaxFormLibrary.js"></script>[/COLOR]

[COLOR="DarkRed"]<script type="text/Javascript" src="CSS/A5System/Vista/theme.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/A5System/Vista/theme.css" />[/COLOR]

[COLOR="Red"]<style type="text/css">

body, table {
font: 9pt Calibri, Arial;
}

dt{
font: 10pt Calibri, Arial;
font-weight: bold;
}
dd{
margin-left: 10px;
}

.codeBlock {display: block; padding: 4px; border: 1px solid threeDFace; background: #f9f9ff;}
.codeKeyWord {color: #00007F;}
.codeArgType {color: #007F00;}
.codeString {color: #7f007f;}
.codeNumber {color: #007f7f;}
.codeComment {color: #007f00;}


.mainMore{
padding: 4px;
border: 1px solid ThreeDFace;
background: #f9f9ff;
}

.treeHelp{
margin-top: 2px;
border: 1px solid threeDShadow;
background: #f9f9ff;
}
.treeHelpHeading{
font: 11pt Calibri, Arial;
font-weight: bold;
margin: 0px;
border-bottom: 1px dotted #d0d0d9;
}

p {
width: 7in;
text-align: left;
}

</style>

<script type="text/Javascript">

function toggleVisibility(ele) {
	ele = $(ele);
	if(ele.style.display == 'none') ele.style.display = '' ;
	else ele.style.display = 'none';
}

function changeEditComboChoices() {
	/*
	This function shows how the choices in the edit combo can be set to a hard coded list of choices.
	*/
	editComboExp.data = ['Choice1', 'Choice2', 'Choice3', 'Choice4'];
	}

function changeChoicesUsingCallback() {
	/*
	This function shows how the choices in the edit combo can by dynamically set using an AJAX callback.
	*/
	a5_AJAX_Callback('AJAX_editCombo.AJAX.A5W','action=poulateList&listID=editComboExp');
	}

</script>[/COLOR]
<%a5
dim tablePath as c 
tablePath = _A5_Aliases.get("PathAlias.ADB_Path")
dim tableFN as c 
tableFN = tablePath + chr(92) + "customer.dbf"
dim lastnames as c 
lastnames = table.external_record_content_get(tableFN,"alltrim(lastname)","lastname","unique_key_value()")
'turn the CR-LF delimited string into a Javascript array. e.g. ['choice1', 'choice2', 'choice3']
lastnames = JS_list_to_array( lastnames)

%>


</head>
<body>

<%a5
a5w_include("DemoNavigator.a5w")
%>

	<h1>Edit Combo Tutorial</h1>
	<p>An 'edit combo' box is like a standard HTML dropdown box in that you can click a button to display a drop down list of choices.
		But, unlike a standard HTML dropdown box, you can type any value into the input control. 
		You are not limited to selecting values in the drop down list. Unfortunately, there is no standard HTML version of an
		'edit combo' box, and so it is necessary to use Javascript to create one. The Alpha Five AJAX Forms library contains functions that 
		allow you to create an 'edit combo' box.
	</p>

	<p>
		The Alpha Five AJAX Forms library allows you to create a Javascript object, 'a5_AJAX_editCombo', which allows you to convert
		an INPUT and an element (which acts as the dropdown button) in your HTML into a control that acts like an 'edit combo'.
	</p>
	<p>

		The 'a5_AJAX_editCombo' Javascript object takes an array of data, much the same as 'a5_AJAX_autoSuggest' (see examples 10.5 and 10.6).
		However, unlike 'a5_AJAX_autoSuggest', the data is assumed to come from a fixed sized list, and therefore the 
		'a5_AJAX_editCombo' Javascript object does not make AJAX callbacks to dynamically, or incrementally get the data as the user 
		types into the input box.
	</p>

	<p>Note: It is possible however, to make an AJAX callback to repopulate the list of choises, and we show an example of this.
	</p>

	<p>
		Below is an example where we are using the 'a5_AJAX_editCombo' Javascript object to create a 'edit combo' for the 
		'Last Name' field. The list of last names is generated by querying the sample 'Customer' table.
	</p>
	<p>
		Note that the edit combo has an auto-complete feature, so that when you start typing it provides a 
		list of matches from the data array. 
	</p>

	<p>
		If you view the source of this page, you will see that following the 'Last Name' INPUT, there is a &lt;script&gt; tag
		that contains the Javascript to create an instance of the 'a5_AJAX_editCombo' object.
		The a5_AJAX_editCombo() function in the Alpha Five AJAX Forms Library is used to create the object. The syntax for this function is:
	</p>

	<code class="codeBlock">
		<span class="codeKeyWord">var</span> EditComboObject = <span class="codeKeyWord">new a5_AJAX_editCombo(<span class="codeArg">InputID</span><span class="codeArgType"> as String</span>, <span class="codeArg">ButtonID</span><span class="codeArgType"> as String</span>, <span class="codeArg">Settings</span><span class="codeArgType"> as Object</span>);</span>
	</code>

	<br />

	<div style="border: 1px solid ThreeDShadow; padding: 4px;">

		<label>Last Name:</label>
		<input id="ec" style="width: 2in;" />
		<button id="ecButton" class="A5EditComboButton" style="position: relative; margin-top: -3px;">
			<img src="images/$$navigate.move.down.png.a5image" hspace="0" style="margin: 0px -3px; padding: 0px;" />
		</button>

		<script type="text/Javascript">
		var editComboExp = new a5_AJAX_editCombo('ec','ecButton',{
			width: '2.0in',    //If we don't set the width of the list, it will have a default size.
			height: '3in'
		});

		editComboExp.data = <%a5 ?lastnames %>;
		editComboExp.fixButtonPosition(); //adjust the appearance of the button so that it appears to be part of the edit control.

		/*
		---- Comments about the 'editComboExp.data' command -------
		This command sets the list of choices to the 'lastname' Xbasic variable computed earlier in the page.
		'lastnames' is a string in Javascript array notation (e.g. ['Abbot', 'Callahan', 'Smith'].
		Had we wanted to set the choices to a hard-coded list, we would have could have set the 'data' property either
		in the object constructor withused a command like this:
				data: ['Choice1','Choice2','Choice3'],
		or, after the object had been instantiated, like this:
			editComboExp.data = ['Choice1','Choice2','Choice3'];


		---- Comments about the .fixButtonPosition() method -------
		The appearance of the button for the edit combo needs to be adjusted so that it appears to be part of the edit control.
		The .fixButtonPosition() does this. 
		Note that this method makes certain assumptions about the button:
		1) the button directly follows the INPUT control
		2) the button is 'relatively positioned'. i.e. it must have a 'style' attribute of 'postion: relative'
		
		The .fixButtonPosition() method assumes that you want the button height to be the same as the height of the INPUT.
		
		The .fixButtonPosition() method can take 4 optional arguments:
		a) width adjustment (in pixels)  (default -3 )   - Width is set to same as height by default. This allows you to alter the default width of the button.
		b) height adjustment (in pixels) (default 0) - Height is set to the same as the INPUT height by default. This allows you to alter the default button height.
		c) x adjustment (in pixels) (default -2)  - Default x position is adjacent to right hand edge of the INPUT. This allows you to adjust the x position of the button.
		d) y adjustment (in pixels) (default 0) - Default y position is adjacent to the top edge of the INPUT. This allows you to adjust the y position.
		
		*/

		</script>



		<br />
		<br />
		<a href="#" onclick="changeEditComboChoices(); return false;">Dynamically Change the Choices in the List</a>  &nbsp;
		(to a hard coded list of choices)<br />
		<br />
		<a href="#" onclick="changeChoicesUsingCallback(); return false;">Dynamically Change the Choices using an Ajax callback</a>
		&nbsp;
		(to a list of lastname and firstnames from the sample 'Customer' table) 

	</div>

	
	<p>
		The code used to create this example looks like this:
	</p>

	<code class="codeBlock">
		
		<span class="codeKeyWord">var</span> editComboExp = <span class="codeKeyWord">new</span> a5_AJAX_editCombo(<span class="codeString">'ec'</span>,<span class="codeString">'ecButton'</span>,{<br />
		&nbsp;&nbsp;&nbsp;&nbsp;width: <span class="codeString">'.5in'</span>,<br />
		&nbsp;&nbsp;&nbsp;&nbsp;height: <span class="codeString">'3in'</span>,<br />
		});
		<br />
		editComboExp.data = &lt;%a5 ?lastnames %&gt;;
	</code>

	<br />
		<p>
		The object's .data property is set to the Xbasic variable 'lastnames' which was computed by doing a query against the sample
		'Customer' table to get a CR-LF delimited list. This list was then transformed into Javascript array notation. E.g.<br />
		['Abbot', 'Callahan', 'Smith'] <br />
		</p>

	<p>
		Below is a list of proprties that can be set in the settings object (third parameter).
	</p>

	<div id="editComboSettingsHelpCont" class="A5Tree" style="width: 5in; height: 200px;"></div>
	<div id="editComboSettingsHelpText" class="treeHelp" style="width: 5in; height: 100px;"></div>
[COLOR="red"]	<script type="text/Javascript">

		var editComboSettingsHelp = new a5_AJAX_tree('editComboSettingsHelpCont',[
			{html: 'data', desc: 'The array of data that is used for the list. It can either be an array of strings, or if you want to have multiple columns, it can be an array of arrays.'},
			{html: 'width', desc: 'Width of the list.'},
			{html: 'height', desc: 'Height of the list.'},
			{html: 'columns', desc: 'Array of columns. An entry in the array can eiher be a string (the column title), or a Javascript object. The Javascript object is expected to have a property named "title" for the title of the column, and an optional property named "key" which is a true/false value to indicate whether the column is the key column (the column value used to fill in the INPUT).'},
			{html: 'className', desc: 'CSS class name of the list.'},
			{html: 'item', desc: 'This contains properties for an item in the list.', children: [
				{html: 'className', desc: 'CSS class name for an item in the list.'},
				{html: 'selectedClassName', desc: 'CSS class name for a selected item in the list.'},
				{html: 'keyClassName', desc: 'CSS class name for a the "key" column in the list. If the list has more than one column, the value in the "key" column will be used to fill the INPUT when a selection from the list is made.'}
				]},
			{html: 'title', desc: 'This contains properties the column titles.', children: [
				{html: 'className', desc: 'CSS class name for a column title.'},
				{html: 'location', desc: 'Location for the column titles ("top", "bottom", or "none").'}
				]},
			{html: 'onSelect', desc: 'Javascript function to call when user makes a selection from the list.'}
		],{
			onNodeSelect: function(dn){
				$('editComboSettingsHelpText').innerHTML = '<div style="padding: 4px;"><h2 class="treeHelpHeading">'+editComboSettingsHelp.value[0]+'</h2>'+dn.desc+'</div>';
			}
		});
	</script>[/COLOR]

</body>
</html>

(The Message Box example is a bad one to start on, as it doesn't follow the standard AJAX structure of having an a5w page and an AJAX.a5w page, but relies solely on the AjaxFormLibrary and Javascript within the page itself - bit overwhelming if you're not very well versed in Javascript!!!)

[NoeticCC]

Re: ajax tutorials - am i missing something

FYI see Lenny's post in the "Thanks to Alpha ... " thread - it appears that you do NOT need the AjaxFormLibrary.js file - I only had to download that to check something to do with the image reference syntax, but the latest build should work without that file.

[richard2007]

Re: ajax tutorials - am i missing something

andrea,

starting to make sense already.

thanks

richard

[NoeticCC]

Re: ajax tutorials - am i missing something

Sorry about the confusion with the AjaxFormLibrary file - when I got that off the afas site it was late at night & I had spent ages trying to figure out how I could get a Javascript error (in Opera) when the file that is supposed to be faulty isn't even in the directory it is supposed to be in... next day I had all but forgotten about it! ;-)

[richard2007]

Re: ajax tutorials - am i missing something

i think this is starting to make sense,

i need two pages instead of 1 page, so i would have

contact.a5w and contact.ajax.a5w

the contact.a5w would be the page the user would see and would hold the usual html, web components and javascript.

the page contact.ajax.a5w would only hold xbasic code and work with the conatct.a5w page, storing data and executing commands.

am i right?

so to start implementing ajax, i need to select the function i need, copy both the a5w and the ajax.a5w pages to my project and then adapt as required.

am i right?

[NoeticCC]

Re: ajax tutorials - am i missing something

i think this is starting to make sense,

i need two pages instead of 1 page, so i would have

contact.a5w and contact.ajax.a5w

the contact.a5w would be the page the user would see and would hold the usual html, web components and javascript.

the page contact.ajax.a5w would only hold xbasic code and work with the conatct.a5w page, storing data and executing commands.

am i right?

Yep that's pretty much spot on :)

so to start implementing ajax, i need to select the function i need, copy both the a5w and the ajax.a5w pages to my project and then adapt as required.

am i right?

Yes that is the best way of going about it :)