| 00:00:00 |
00:00:01 |
DW ADOBE DREAMWEAVER C53
|
| 00:00:02 |
00:00:06 |
Ok so this video is a demo tutorial,
for the 4D HX for Dreamweaver extension. |
| 00:00:08 |
00:00:11 |
We are assuming that the installation
was a success so that means, |
| 00:00:11 |
00:00:14 |
we can get along, and get started,
playing around in Dreamweaver. |
| 00:00:15 |
00:00:17 |
So to get started let's create
a new HTML document. |
| 00:00:20 |
00:00:25 |
Let me move this over.
Now we just open an HTML template, |
| 00:00:25 |
00:00:27 |
so really there's no content
in there right now. |
| 00:00:30 |
00:00:34 |
At the top, notice 7 buttons
from the 4DHX Extension. |
| 00:00:38 |
00:00:43 |
Now to embed a 4DHX object,
it really only takes 3 steps, |
| 00:00:43 |
00:00:50 |
to get that object into an HTML page.
The first step involves importing the structure, |
| 00:00:50 |
00:00:53 |
so let's do that. To do that,
we have to go to the, you have to select, |
| 00:00:54 |
00:00:57 |
the support folder, next to our
4D structure, |
| 00:01:02 |
00:01:07 |
Extra support and there it is.
Let's hit the select button. |
| 00:01:10 |
00:01:13 |
And our structure is imported.
The second step, |
| 00:01:14 |
00:01:19 |
is to enter Login information.
So here we have to enter, |
| 00:01:19 |
00:01:24 |
Login information as users
connect to the HTML page. |
| 00:01:25 |
00:01:29 |
For demonstration purposes,
let's have them login as administrator, |
| 00:01:33 |
00:01:37 |
and we'll click OK.
Now some code has been added to the page. |
| 00:01:38 |
00:01:45 |
The only code that concerns us
really is the function for DAX Load, |
| 00:01:46 |
00:01:52 |
and the code added
in the body helmet, for the onload event. |
| 00:01:55 |
00:02:01 |
Ok now the third and final step
is to just choose which object to embed. |
| 00:02:02 |
00:02:09 |
You can choose from a data grid,
a calendar, a data tree, |
| 00:02:09 |
00:02:12 |
a data matrix and
an image matrix. |
| 00:02:13 |
00:02:15 |
For today we are just going to embed
a data grid. |
| 00:02:16 |
00:02:20 |
So let's hit that button.
And this dial lock comes up. |
| 00:02:21 |
00:02:27 |
Here we can choose which table,
or DVW or DCS or view to embed, |
| 00:02:28 |
00:02:33 |
Today I'm going to choose the
customer table. |
| 00:02:35 |
00:02:37 |
We can also select
advanced settings, |
| 00:02:38 |
00:02:40 |
but I won't touch
any of that today. |
| 00:02:41 |
00:02:44 |
If anything, I will just change
the width and the height. |
| 00:02:52 |
00:02:54 |
So now some codes have been added,
in the body element, |
| 00:02:55 |
00:03:02 |
a DIV class to display the data grid,
and up top, under the job descript, |
| 00:03:02 |
00:03:06 |
you'll see where we traded
the data grid object. |
| 00:03:07 |
00:03:10 |
It's nice to show
where the code started, |
| 00:03:10 |
00:03:12 |
and where it ended.
|
| 00:03:13 |
00:03:16 |
And that's all we have to do.
Three steps to embed an object. |
| 00:03:16 |
00:03:22 |
So if we save this HTML file,
in our web route, I'll call it grid, |
| 00:03:25 |
00:03:32 |
we should be able to see our object.
So let's go to our browser, |
| 00:03:35 |
00:03:38 |
and connect to the HTML page
we just created. |
| 00:03:43 |
00:03:46 |
And there we go.
Our live data grid, |
| 00:03:48 |
00:03:54 |
in our HTML page.
All the functionality of, |
| 00:03:54 |
00:03:58 |
a normal data grid,
in the 4D Ajax client environment, |
| 00:03:59 |
00:04:07 |
You can edit a record,
and you can create one, |
| 00:04:08 |
00:04:13 |
and you can do live searching.
So, that's our demo tutorial. |
| 00:04:13 |
00:04:18 |
for the 4D Ajax Dreamweaver Extension.
We just displayed how to easily embed, |
| 00:04:18 |
00:04:22 |
a live 4D Ajax object
into a HTML page. |