Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
TUTORIAL
TABLE OF CONTENTS
Intended Audience 8
1 Overview Of The Revize 9
1.1 What Is Revize? 9
1.2 Revize Components 9
1.3 How Revize Works 10
1.4 Understanding Templates 10
1.4.1 The Template Advantage 10
1.4.2 Templates and their Types 11
1.5 What is Revize-Enabling? 11
1.6 Revize Glossary Reference 12
1.6.1 Content Editor(s) 12
1.6.2 Editable Content 12
1.6.3 Revize Document Types 12
2 How to install dreamweaver Extension 14
2.1 Opening Extension Manager 14
2.2 Installation Process 14
3 Testing the Installation 17
3.1 Setting up Dreamweaver Preferences: 18
Suggested Dreamweaver Configuration Settings 18
3.1.1 Preference Changes: 18
4 Getting Started with the Revize Dreamweaver Extension 20
4.1 Knowing your Components 20
4.1.1 Components of the Revize Dreamweaver Extension 20
4.1.2 The Revize Menu 20
4.1.3 Revize Objects 21
4.1.4 Revize Property Inspectors 22
4.1.5 Getting to know the 10 steps of Revize Enabling 22
INTENDED AUDIENCE
DIAGRAM 1
Reminder: As was shown above in the diagram 1, Templates give you the ability
to see where your content will go on your publish pages.
Type: Templates
Developer’s Note: Templates are stored within the Revize database, whereas Edit
Pages are stored outside the database in files with the extension .jsp. Thus, content
in Edit Pages may be modified on the local host and sent via FTP to the remote
server.
Developer’s Note: Because the extension is rather large, you will need to
uninstall, and reinstall when updating your Revize extension.
Select:
File>Install Extension
2. The select extension to install screen will appear. Find and select
the Dreamweaver Extension listed as:
revize.mxp
Click Install.
Developer’s Note: The Installation should begin immediately but may take a few
moments for the extension to install.
Click OK.
If you are running it with Dreamweaver MX, than your menu bar will
look something like Figure: Dreamweaver MX, below.
Figure: Dreamweaver MX
Developer’s Tip: You will have to navigate through the Objects window
categories to obtain the image shown.
Category: General
Category: Site
ALWAYS STORE LOCAL FILES ON THE LEFT. This lays out the
Dreamweaver site window to look like a standard FTP program
This tutorial site is what demositeIII looked like before it was Revize-
enabled.
This tutorial will walk you through the process of Revize-enabling this
site. Because a copy of the demositeIII is also installed on your
computer, you can refer to it to see how you are doing with the lessons
or use it as a reference to correct any errors you may encounter.
Developer’s Note: A copy of the tutorial directory is included on the Revize CD and
can be used to reset the tutorial to its original condition, it is also provided as a zip
file in the tutorial directory.
For the most part you will be hosting your web site on a remote Revize
hosting server, by filling in the Remote Info, the information that is
provided will be used by your IT Department, web hosting, or service
provider so you can easily transfer working copies of your pages and
or edit pages to the remote host.
The webSpace name will default to the name of the base directory
(tutorial) and the location will default to the directory you just specified
when you created the Dreamweaver site.
From the top Dreamweaver Menu, click the REVIZE menu, and select
REVIZE ENABLE DOCUMENT. When the Revize Enable screen appears
make sure that all the fields are filled out as follows.
Click OK.
You are creating a Unique Template because this page does not
depend on information on another page to exist. Make sure to verify
the default information.
You will have now created a Revize Template named index.rzt in the
local file system. Your original page layout is saved as index-
beforerevize. The original index.html page still exists, but as soon as
the Revize publishing engine is triggered, it will be overwritten. Return
to the Dreamweaver site menu and you will see these new files.
DEVELOPER’S Note: Underscores are used for spaces. Revize does not allow
you to use spaces in either Modules or field names.
For example, the contact page may contain the fields name, address,
city, directions, office_image, or any other fields that pertain to the web
page Contact Us. This is usually how Modules are used, but you can
use them in other ways as well.
The Text field type is for text that you want to change. This is the most
widely used field type. The Long Text field type is a variation of the
text field type but it allows more text to be inserted. The Image field
type is used for images that you want to make changeable. Reference
File is for referencing an uploaded file that you want linked to a certain
area of a page. Word docs, pdf files, or any other type of file can be
uploaded and referenced by this field type. All of this will become
clearer as you work through the examples in the rest of this tutorial.
Now that you understand what makes up a module, let’s create the
home module, an easy task.
Use the following Module and field names for the index page.
mission_text Text
tip Text
home_image Image
DEVELOPER’S SUGGESTION: always use lowercase for module names and use
name that are easy to remember or relevant to the information that is being edited.
This avoids remembering naming conventions that often vary between people.
DEVELOPER’S NOTE: Revize does not allow spaces in field names so use _
(underscore) for spaces.
Add:
Module name = home
Then move down to the field information area and add the
following fields:
Name= mission_text
Field Type = Text
Select: ADD FIELD
Name= tip
Field Type=text
Select: ADD FIELD
Name=image
Field Type=image
Select ADD FIELD
Click OK on the Module Properties Screen
This is how your Create Modules and/or Field Menu should look
bDEVELOPER’S CHECK: Make sure the Dreamweaver Objects window is open (use
window menu to open).
1. Using your mouse, select one of the pieces of text you want to
make editable. For this exercise, select the text shown in the figure
below.
Developer Tip: Do not select all the text at once (as shown
above), as you may lose the formatting.
Select:
Module = home. The fields for this Module are displayed.
field name = mission_text.
Click OK.
Delete the extra text that you did not select to retain formatting
CAUTION: It is a good idea to store your template, and view the published page in the
browser before proceeding. To do this click Revize> Store Updated Template. Then go
to the page’s URL in your browser. Testing the page after adding the first Revize field
will help to catch setup and configuration problems at an early stage, saving a lot of time
in the long run.
2. Repeat steps the steps that you went trough to enable the “Mission
Text” for the tip of day area of the page. Be sure to delete the
quotes before enabling as leaving them will make Revize think
that its part of a jsp tag and generate an error.
The truck image on the page has now changed to a Revize image
placeholder indicating the Module and field name containing the image
URL, See figure: RZ.Image placeholder below, which is below.
DEVELOPER’S NOTE: Don’t worry about getting the image URL into the
Module field – you will see how this is done automatically later in the tutorial.
Go to the Revize Object Menu, Select “RZ button” on the menu, when
the Revize Button Menu appears:
Your filled in REVIZE button window should look like the figure below:
DEVELOPER’S NOTE: After you have clicked on the object, a Revize window
displays. The default selections are context sensitive based on the type of Revize
document you are currently working on.
1. Notice and verify the following default selections are as shown above.
2. After verifying the options, click OK.
You now should have the home page completely Revize Enabled. The
Global Information on the home page will be covered in a future
lesson. Your page should look like the one in Figure: completed index.html
page. If it does, then you are ready to create an Edit Page to edit
content for this page. If it does not, please go back and see what you
may have done wrong.
IMPORTANT DEVELOPER’S NOTE: If the page you are transforming into an Edit
Form already contains a non-Revize form of any sort, Dreamweaver will not render
the Edit Form page correctly. If you are not familiar with HTML, you will need help
from Technical Support to correct this problem. If you are familiar with HTML, the
process for correcting this problem is fairly simple. You simply need to delete the
existing form tags and submit button, so the Revize form objects will work correctly.
DEVELOPER’S NOTE:
4. For Edit Module, select home (the Module containing home page
content). At this point, this is probably the only Module you have
defined.
If your screen looks like Figure: Document Window (Edit Form) that is
below, click OK. If not, review the steps above.
Figure: Document Window (Edit Form)
5. The following prompt will then appear. This simply asks you if you
want to make a edit page based on the template you are working
on. This is correct, so click OK again.
Developer’s Note: The left boxes reference the Module and field names.
Clicking on the question mark in the upper right corner displays a help screen
explaining all the options in more detail.
8. Repeat this step for the rest of the editable TEXT objects on the
page.
Developer Tip: Be somewhat patient when you are making changes to the
Revize objects within Dreamweaver, as the program is in continuous
communication with the local web application server to reflect the changes
you make.
Developer’s Note: The Revize enabled image that is displayed in front of you
on your edit form should display a “change_image” button inside. If it does not,
then follow the steps below. If it does then it has changed automatically to an
editable image object and therefore needs no further involvement by you to
allow the editor to make changes to the page.
The instructions below walk you though re-revize enabling an image on the
edit-form if it is needed.
Developer’s
2001-2002Note: theSoftware
Idetix text fields don’t appear because they cannot be
Systems Page 45
displayed as images.
Dreamweaver Tutorial
Developer’s Note: You have the choice to locate the CHANGE IMAGE button on
top of the image or to the right of the image.
The Image Location is enabled at the bottom of the screen. Use this
area to group images into a specific image folder or leave blank to
place images in a common image folder. Similar images can share
folders. . Leave this folder blank for this tutorial image.
Click OK.
You should now see that the image object has a CHANGE IMAGE button
displayed (if it didn’t before).
5.1.11 Action Buttons: Save & Cancel
This page will need a Save button to save the updated content and a
Cancel button to return to the prior page without saving any changes.
Follow the instructions below to add the save and cancel buttons to
your edit page.
1. Delete the EDIT THIS PAGE button, as it will not be needed on the
Edit Page.
Developer’s Note: The default selections are context sensitive based on the type
of document you are creating. Click OK to accept the default options and place a
SAVE button on the page.
Repeat the same steps for the CANCEL as button as did for the SAVE
button.
Before moving on to the next lesson, check to see that this page works
properly.
3. Revize Enabling Step 8:
Point your browser to: http://localhost:8080/revize/tutorial
Your homepage should display.
4. Log in as a content editor by clicking on the “Demo Site Login”
image at the top of the page. If security is enabled (which it is by
default), you must enter the username root and password revize
to log in.
After the updated content is saved, the home page should reappear.
You may need to REFRESH or RELOAD your home page to see the
changes. If they appear, you did everything correctly.
Once you have enabled other templates in your tutorial site. You will
want repeat these steps on all the tutorial templates you have created.
The easiest way to do this is to open each Template, extension .rzt,
from the Dreamweaver Site window. If you wish to save time, wait to
duplicate this process until it is time to insert global edit buttons on the
various Template pages.
Developer’s Note: The second and third rows contain two cells. All these
parameters may be found in the properties window, and all may be changed to taste
when you work with your own website.
Click OK.
Your tabular Edit Form should now look something like this figure below
Once you have saved your global Edit Form page, return to the
“index.rzt” page within Dreamweaver. The Edit Global Information
button may be placed anywhere on the page.
To create our example:
8. Click inside the table cell to the right of the Revize enabled hours
that we setup a few minutes ago.
9. Click on the RZ Button icon in the Revize Objects Menu.
Under “What happens when button is clicked?”
Select: Edit Global Information under the Other Actions menu.
Under “How should the button be displayed?”
Select: The Edit Global Information Revize button under the
Revize
Type in:
popup width = 375
height = 225.
The Revize Module screen will appear as shown in, Figure: Create Modules and/or
Fields below:
Now that we have “Revize-Enabled” all the text on the template, and
we have given the editor a way to get to an edit page. We can store
the updated template into the Revize database.
Because our template newsdetail has all of our fields on it already that
the editor will be editing and is a better fit then the unique template that
we will be creating (based on news.html) we will go ahead and create
an edit form for our news releases now. Following the instructions
below to complete the edit form.
If your screen looks like the one in Figure: Revize Enable Document: Edit Form, if not,
review the steps above.
The following prompt will then appear. Click the OK button again as yes you
want to use your template as a basis for the edit form.
You should now see a red line around your entire page indicating that
everything is inside an edit form.
Developer’s Note: that the default selections are context sensitive based on the
type of document you are creating. Click the OK button to accept the default
options and place a save button on the page.
You will notice the Standard Revize Image changes to match your
selection.
Click OK.
4. The last thing we need to do is to remove the button we added to
the template to forward to this page. Select the Edit This Page
button by clicking on the icon and then press the Del key.
5. Save your updated Edit Form page by clicking on the “File” menu
at the top of the document and clicking on “Save”.
Your Edit Form should now look something like the figure below:
If your form looks like the figure above then your are ready to move on
to enabling the news.html page that will display a list of our news
releases.
Once you have Revize-Enabled your new Unique Template, delete all
the rows in the table but one by clicking inside each row, clicking on
the <tr> tag at the bottom of the screen, and typing the “Del” key.
You may want to take our any unnecessary spacing that the page has
in it from the other rows you deleted.
You should now see begin list and end list Revize tags above and below the
row. The row should look something like the figure below:
The next step is to Revize-Enable the text areas we want used on the
news list.
5. Continue Revize Enabling Step 6:
First, Revize-Enable the date by highlighting the text (not all of it,
to retain formatting), then click on the RZ Text Object in the
Objects Menu. When the Revize Text window appears, click on
the “news” Module and the “Date” field, and the OK button.
Developer’s Note: Before proceeding, delete the link assigned to this text from the
HTML code (if this step is omitted, the Revize Text object will not function properly).
1. Highlight most of the text of the subject line with your mouse.
2. Click on the RZ Link button in the Objects Menu. This will bring up
the Revize link window. Fill in the information as described below:
Link Target: NOT USED (if you wanted all your links to open in a
different window you could fill then in)
All other options on the RZ Link window: NOT USED FOR LINK
MANAGER (Final Chapter)
You RZ Link screen should look like the figure below. If it does click
OK.
The result of this process is to link the subject line on the news page
list to the “newsdetail” Dependent Template.
contactsbydept
template
contacts
template
depts contacts
module module
depts.recordid = contacts.dept_id
Using a dept_id field in the contacts module and setting it whenever
new contact records are added enforces the relationship between
these two modules and related templates. Details will be unveiled
during the Revize enabling process of these templates.
5.5.2 Revize Enabling the Related Templates
Even though this area of the web site involves multiple pages based on
two templates, we still essentially follow the 10-step Revize enabling
process one template at a time.
The Dreamweaver Site (step 1) and Idetix webSpace (step 2) should
have already been created when the home page was first Revize
Enabled. If not, refer back to that chapter; otherwise let’s get started
with step 3.
DEVELOPER’S NOTE: Be sure the bullets and links tags are all selected.
Clicking on any link and then selecting the <ul> tag at the bottom of the
window is probably the easiest.
4. Use defaults for all other options and click the OK button.
5. The template should appear as shown below. The bullets should
be inside two Revize list tags. If not press Ctrl-Z and repeat the
previous step.
6. Since only one item is needed inside the list, select Human
Resources and Public Relations and press the Delete key.
Of course you need to delete the “I” and “y” not selected to retain
formatting.
14. Next we will add Revize Edit Controls: edit, delete and new
• For the delete button, position the cursor to the right of the edit
button, click RZ button and accept the default options.
• For the new button, position the cursor after the “Department
Contacts” heading, but before the Begin List tag, then select
the RZ button object, and use the options shown below
The charts below show the relationships between the tables after a few
contacts have been entered:
depts module
Id dept_name
0 Human Resources
1 Information Technology
2 Public Relations
contacts module
Relationship
defined here
Any field can be used for filter (i.e. relationship) however, id fields are
preferred because text fields could change and break the relationship.
4. When all options are properly select, Click on OK
Note: The “No Display Only” option will insert the long form
of version of Revize code that can be manipulated as
described below to accommodate an email link.
• In the HTML code view, highlight: <%=rz.content%> then Cut
10. Use RZ Text object in the normal manner for the phone and title
text areas of the contact information table
11. You can replace the table at the bottom of the page containing
business hours with a table from an earlier Revize Enabled
template. (See Revize Enabling Global Areas)
DEVELOPER’S Note: No special action is required on the edit button to utilize the
Relational Capability when there is an associated new button and content is
displayed in a list. (The Revize list already contains a filter) When there is not
an associated new button and only a single record is displayed, the edit button can
effectively act as a new button and the Related List properties MUST be defined.
There is never any harm in defining the Related List properties for
an edit button (they are only used when a new record is created).
When in doubt, define the Related List properties. However
remember, the Effected Module must be selected in order to define
these properties.
3. To add the Delete button, position the cursor after the Edit Button
select: RZ button
When the button window opens, select the following options:
List Item Action: Delete a List Item
Accept remaining default values.
DEVELOPER’S Note: None of these fields have where attributes but they must be
removed from any fields used on edit forms used to input content. For example:
change:
<rz:fetch module="jobtitle " field="title" output="html"
where=”jobtitle._recordid=contacts.jobtitle_id”
options="size=30,wrap=Virtual"/>
to:
<rz:fetch module="jobtitle " field="title" output="html"
options="size=30,wrap=Virtual"/>
Before we move on to the products area of our tutorial site, which will
cover our “Link Manger” feature. We have one final template to enable
in our contacts area. This template will list all contacts on one page
and group them by their respective departments.
This feature in Revize is called “Group By” it is part of the RZ List
object in Revize. See the figure below for reference.
We will enable this page as we have all the others in our tutorial by
following the 10 steps of Revize enabling. Steps 1 and 2 have already
been done in lesson 1 so we can start with Step 3: Open Template
(Page Design).
Click OK
Select both the first department header table and the first contact
information table as shown in the figure below:
Click OK
3. You should now have your RZ List tags on the template. There
should a “// Begin List “ above your department header table and
an “// End List” after your contact information table.
4. If you have put the list on the template. Delete all other department
header and contact information tables on the page.
5. Next to your “//Begin List” and you “// End List” tags your will also
see some hidden code tags that are marked “ASP”. These are
“group by” tags that Revize put in that we will modify in the html in
order to have Revize display our department header table only
when needed.
Click on the “// Begin List” Revize tag on your template and click
on the code view in Dreamweaver you should see the following:
You will notice that Revize has put in 2 sets of grouping tags as shown
in the figure above. One is for a group header (shown above) and the
other is for the group footer (placed before the end list tag).
We need to move our department header table code from where it is
and place it in between the group header tags telling Revize to display
that table for each group. Cut and paste your department header table
code so it looks like the figure below:
Once you have done this you can now go back to the design view.
Your template should now look like the figure below:
6. Now that you have your Revize list on your template and you have
setup the group by tags to display the department header table for
each department name, you are ready to Revize enable the text as
usual.
Revize enable the Name, Phone, and Title areas of the contact
information table as you did before. Then Revize enable the email
area as well using our little code trick from the previous lesson as
well.
You will notice that we filtered the department name by the exact
opposite filter we put on our contactsbydept template. This tells
Revize to only display the department name when the departments
recordid is equal to the contacts deptid of the contacts shown
below it.
8. Your template should look like the figure below. If it does you are
ready to store the template into the Revize database and see if it
works.
Click OK.
Free Form gives you the freedom to add less in the process of
setting up a Revize template, and more control for the Editor to add
what they want to the page.
13. With the products.rzt open, click the REVIZE menu, and
select REVIZE ENABLE DOCUMENT. When the Revize Enable
screen appears, select Document type: Editform. Select the
products module and click OK to continue.
14. You will now be asked if you want to convert your template into
an edit form page. Click the OK button (see window below).
15. You will notice now that the products_home.text you had
applied to the .rzt has now changed into a form text area. We
want the editor to have more options then just plain text so we
will use the Revize text editor here. To put the text editor in,
select the textbox, and then click the Revize Editor button from
the objects window. The Revize Editor window will now
appear.
Note: The check boxes that are under the Editor Options
allow for you to choose what control you would like the
editor to have.
Click OK.
16. Add some text above the editor to tell the editor what they are
editing:
Type: Products Page Content
If you were successful in editing your products.html page with the text
editor then you are ready to move on to adding the ability to add pages
to your tutorial site using Revize’s Link Manager component.
In the next few pages you will learn how to setup the link manager
component similar to what is shown in our demo site. At the end of this
lesson you should be able to add pages or simple links using the link
manager component in the products section of our tutorial site.
Let’s begin:
20. Click on the Revize menu, and select Create Modules and /
or Fields. Create a module called links.
Instead of entering each field name in for the module links, we will
click the add Link Manager Fields button to add all the necessary
field names for a pre-completed link manager edit form. These
distinct field names are needed for our pre-completed link
manager edit form that will show up in front of the editor. After
adding the fields, click OK to continue.
22. Click on the RZ.LIST button on the Revize object menu. When
the Revize List screen appears make sure that all the fields
are filled out as follows.
Click OK.
23. Select The “Brake Parts” link, then remove the hard coded link
from the text by deleting the text in link area of Dreamweaver
properties window
24. Select the Brake Parts Text, click on RZ.Link from the Objects
menu
25. When the Revize Link screen appears
The Place Holder allows you to pre-select a template that will later be created.
1. When the Create Place Holder window appears make sure that all
the fields are filled out as follows.
Select:
Template Type = Dependent Template
Name = products_list_template
Click OK.
The checkboxes give the rights to the editor to select image, file, or
standard text to be in place for the link displayed.
27. Select Text in front of the links tag, (highlighted – actual text
may read “product_links”), click Rz.text from your Revize
Objects Menu.
Select:
List Item action = Add New List Item
Standard Revize Item = New (small)
Click OK.
Select:
List Item action = Edit this List Item
Standard Revize Item = Edit (small)
Click OK.
Select:
List Item action = Delete this List Item
Standard Revize Item = Delete (small)
Click OK.
30. Try out your new editable products.html page by going to:
http://localhost:8080/revize/tutorial/products.html at this
point you can add links to the list, but adding a page based on
your place holder template won’t work because the template
doesn’t exist.
32. Click inside the table for the left navigation. In the bottom area
of the window menu, click the “<table>” to select this entire
table.
Name Text
Price Text
Description Text
Image Image
Linked Number
The below figure is how it should look when you have completed
entering the module, field names and types in Create Modules and
/ or Fields window.
When the Revize Enable screen appears make sure that all
the fields are filled out as follows:
Click OK to continue.
Your screen should now look like this. At this point we are now ready
to revize-enable our text, and image.
module = product_template
field name = name
click OK.
click OK.
Click OK.
Select:
List Item action = Edit this List Item
Standard Revize Item = Edit
Click OK.
Select:
List Item action = Delete this List Item
Standard Revize Item = Delete
Try out your new link manager enabled list and template by
going to:
http://localhost:8080/revize/tutorial/products.html
If you got link manager to add a new page for you, you are
ready to move on to creating and edit form for your
product_list_template.
Click OK.
The character width and Height may also be changed to better fix
the page layout.
Developer Tip: You may want to add text above these form areas
stating what they are. Because this is an Edit Form, the only way to
know what the form represents is to mark it.
Click OK.
It should look like this when completed
Developer Note: You may not like the way your Edit Form looks at
this point; it may be a good idea to create a better-looking and better-
organized Edit Form at this stage. You can create the look above by
adding in some table rows and then deleting some columns. After that
you can move your objects around to where they are better suited.
When completed it should look like the figure below:
50. Try to edit the page you created using link manager earlier by
going to:
If for some reason that the links or pages don’t work correctly you may
want to go and look at our pre-completed templates in the demositeIII
webSpace. The most frequent error is forgetting to add the id filter to
the new button or to the list on the product_list_template.