Hi in this demonstration, we are going to take you through the new HTML page editor features of Project Zero.

What I have done here is started up the zero application builder in my browser and I am going to go into one of the new applications.

In this application I only have my configuration files, my ivy.xml file that has my project dependencies, the php.ini file, and zero config. So other than that I don't have any content.

Let's say I want to start by building a web page or a forum. What I can do is go to the new file option, select HTML page in /public. Get in the public folder is your public web group, then type in the name of the page, let's call it testpage.html. Then you can select from the templates, we are just going to use the default template which is a blank HTML page.

This is going to create the HTML page and bring up the HTML page editor or page designer. You'll notice that there are two different tabs at the bottom of the screen. A design tab is your visual GUI designer and the source tab takes you to the source code editor for this page. You can flip back and forth between the visual view and the source view at any time.

On the right hand side of the page editor is a set of palettes. You'll notice that there are three tabs.

The create tab is where you can find various widgets. By default we have loaded in all of the HTML elements and many of the widgets out of the dojo 1.1 package.

On the structure view, this will show you the outline or structure of your page. This is where you can go to see visual and non visual elements that have been added to the page.

And finally, on the data tab, the data tab is where you can create new sources . This is how you can access services and data from back end systems and display and bind the data into your widgets.

So what we'll do is start with a simple example. Let's go to the create tab and we'll put together a content pane. Let's do a border container to start with. So I clicked on the palette, then drag and drop the border container onto the page and by default this is using absolute positioning. If you want to change the positioning you can go into properties, preferences, and change it to flow layout. You can also show a grid and by default it is snapping to a grid.

The next thing that we are going to do is show you the CSS style sheet. So I have selected the outer border container, I am going to go and select styles. This brings up the styles dialog. Now inside here, you can see various classes that have been defined in style sheets if you want to style it with a class. But in this example I am going to style directly on the elements.

So, for the border container, we want to make it take up the entire page. So we'll set the top to be 0 pixels. The left hand side to be 0 pixels. And then we will go to the size and set the width and the height to %100.

There are many other styles on here and currently this whole tool is a work in progress. Our goal is to continue to add additional usability improvements inside here so it is not just giving you type assistance here but it is validating things like font size, units, and other things that are in CSS that you will currently have to go over and memorize the CSS spec. to know what to put into these fields. So we want to try and alleviate that and make it simple for you to style your elements.

At this time, the style sheet editor actually is only editing the style tag on the element for the currently selected widget. In the future, this will also allow you to edit the style tags in line or the style directly embedded or directly linked to the page.

So I am going to hit OK and you'll notice that it automatically applied the styles and laid out the border container. If I go to the source tab, you'll see that the page has been serialized using normal declarative from DOJO toolkit. So the tool has automatically pulled in the border container and in each of the slots for the border container, border container takes content panes. So it has automatically put four different content panes in those different positions.

I'll go back. So the content pane is being used in DOJO, we've added DOJO require automatically. Now if we go to delete the border container, it would remove these requires for us. You also notice that it is automatically loaded in soria style sheet and the base DOJO CSS style sheets for us. And it has set the theme class for us on the body element here. I'll show you in a second how you can change that.

But then you can see here it has automatically serialized the border container plus the child content panes inside of here. So if we want to add buttons or forms into the content panes, you'll see the additional elements appear nested under this content pane.

Let's go do that real quick. We'll go to the design tab and well put a couple of buttons on this page. Flip back to source and now you see in the center content pane two of the buttons that we have added.

OK. The last basic dialog that I wanted to show you is the property dialog. So for these button widgets, there are various attributes on these widgets to control their behavior and what you can do is go to the properties tab and select properties or you can right click on the button.

It brings up the properties of the widget. So these are different than the styling, these control the behavior. So let's set the label to this button as OK and let's make it a submit. Now we've got our OK button.

Cancel, we are just changing the label property of these buttons.

So that's how you can go and change the actual properties of these buttons. Now let's go ahead and put a data grid on here and create some CS feed data that we can bind the data grid to.

What I am going to do is create a new file and say other file in public. We'll call it contacts.csv this just kind of separates values. Now you'll notice that zero automatically saves page we were editing as testpage.html over here so we can get back to it very quickly.

And it has opened up the source editor on an empty file. So here we are going to put in some field names. Let's put in lastName, firstName, and phone and then we'll add some dummy data. Let's see Mitchell, Chris, 555-0398. There we go, and Jones, Carol, 555-9383.

So we've got two entries in here and we have defined the field names for the csv file. Let's flip back to testpage.html. Zero automatically saves that file in the background. You'll see contact.csv is here in the recent files list.

So I am going to go down here and grab a grid. Notice that I have to scroll down to find the grid, instead of doing that can just go here and type g and that narrows the set of widgets we can get to.

And by default it creates a grid with one field. So in this example, what we are going to do is go over to the data tab and we are going to connect to that file using the CSV data store. So we are going to create a new CSV store, call this contactData, and give it a URL to contactdata.csv.

OK, so that's created a new data store. If we look at the structure of the page, we can see that there is a hidden CSV store, a non visual CSV store defined by the page. Since we have defined that data store connection, we can now go into the properties of the grid, and bind it to the data.

So if I go to properties, data, we are going to select from the data store contactData, and here we put in a DOJO query string. In this case we want last name, we just want to find everything so we I am going to put lastName *. That tells how we are going to filter out the data. It's automatically created one empty field for field zero. This is using field offsets, so if we do Last Name, that's the label. We can add another field, this will be field number 2 and it's going to be First Name. And field number three is going to be phone.

OK, so we have set up our three columns. Now I could use field names here, since we have defined field names in our CSV file, we can just say lastName so that it is very clear on whether it is using the indexes. But the default way that the grid data binding works is by indexes.

Now I hit OK and now I have data in our grid.

So hopefully this has given you a very quick introduction to some of the capabilities that are in the HTML Page Editor inside of project zero. This is a work in progress and you should see lots of improvements. We are currently working on DOJO 1.2 support and adding more widgets and more capabilities into the editor.

Thank you.