IntraWeb Studio is actually a tool for maintaining the content of web sites, but you can also “abuse” it to manage HTML templates for IntraWeb or WebSnap applications. This becomes even more handy, if your templates are in multiple languages.
Over the next few weeks I’ll post some articles here about InztraWeb Studio.
This article is kind of “out of order”, as it demonstrates what to do with IWS
besides its original domain – which is managing web site content.
HTML Templates
IntraWeb Studio supports templates to make your web site look consistantly,
but these templates will be covered in a later article. Today I’ll show how to
create and maintain templates for IntraWeb and WebSnap applications.
IntraWeb
When you start with an IntraWeb application, then you will usually start with
IntraWeb’s unique Form Layout mode. This mode allows you to design your Web
forms almost like any other Windows form. You just drop edits,
buttons, memos, etc where you want them on your form. Then you set anchors
and aligns and use regions (panels) to make your form look nicely. This
really works great and is one of the reasons why IntraWeb is so successful
- it completely abstracts you from HTML (if you want).
But there is one disadvantage of this design method: The layout of all
your forms is compiled into your application’s exe/dll. Well, for Windows
applications you ususally don’t mind that, so why should you for web
applications?
There are two answers:
- You don’t care about it, because you just want to get your “old
Win32″ applications to the web, and you want to work on them like you did
in Win32. - You care about it, because you found that designing GUI’s is not really a
programmer’s discipline, but something for artists.
If you are following answer 2, then you most likely do not want an “artist”
to touch your code, to have him the layout changed. This is the point
where templates are getting into interest.
Layout Managers
IntraWeb’s default layout manager for all forms is the
IWLayoutManagerForm. This is used with any freshly created IWForm. You
can control the used LayoutManager by setting the corressponding property
in your IWForms:
In this default case the LayoutMgr property is left empty, wich
means it will use IWLayoutMgrForm. You can explicitly assign
IWLayoutMgrForm, just by dropping it from the IWControl toolbox
onto your form and assigning it:
Now drop an IWTemplateProcessorHTML onto your form and
assign it as LayoutManager:
When you now compile and run your IntraWeb application you won’t see any
difference – apparently IW still uses the FormLayout manager. This is
“normal”, as we don’t have any templates created yet.
Templates
IntraWeb Templates are expected in the “TemplateDir” of the application,
and the templates have to be named corresponding to the IntraWeb forms.
Suppose you have an “LoginForm” in IntraWeb, with a TemplateProcessor assigned,
then IW will look for LoginForm.html in /templates.
The template files should contain standard HTML 4.0, just like your
artist would design his “fancy” web pages. (If you need HTML 3.2 then you would
use IW’s PDA mode, which supports templates as well).
To get the IW ‘magic’ in you (or actually your artist) hast to put special
tags into the HTML, exactly at those places where the IW controls should appear.
In a trivial example the LoginForm.html would look like this:
<HTML>
<HEAD>
<TITLE>Login</TITLE>
</HEAD>
<BODY>
User: {%EditUser%}<br>
Passwd: {%EditPasswd%}<br>
<br>
{%ButtonLogin%}
</BODY>
</HTML>
Please note, that two IWEdits and one IWButton are inserted by using the
{%IWControlName%} syntax. IW will pick up these variables and
attach all the necessary events and JavaScript to make the form working. Your
artist does not need to worry about form tags, actions etc.
Putting IntraWeb Templates into IntraWeb Studio
When your application starts growing and you got several dozens of forms,
then it might get nasty to manage the templates, esp. when your artist works off
site. This is the point where IntraWeb Studio will be helpful.
Install IWS
target=_Blank>Business edition, which features a Remote Repository.
This allows you to access all IWS managed files even from remote locations (if
you configure your firewall to allow so). Then create a new project for
your IntraWeb application, and setup a deployment location that just copies
all the managed files to the location where your IntraWeb application runs. Here
are some hints
target=_Blank>how to get started.
As deployment mode you would choose “Static” with “.HTML” extension, because
we want plain html template files to be deployed:
Note, that we don’t want this new project to be a real Website, we are
just deploying the template files to our IntraWeb’s template directory. Your IWS
project might look like this now, after adding the first template:
The LoginForm template (note that it has no html extension – it will get its
html extension during deployment) is already added. In IWS’s terminology its a
“Document”. You can edit it, and your artist can edit it from his
remote loction, if you supply him credtials to this project.
There is one important thing to obey: IWS uses
the {%VarName%} syntax itself, that is it will eat up your IW
control variables, therefore you have to enter them twith double
percentages:
<HTML>
<HEAD>
<TITLE>Login</TITLE>
</HEAD>
<BODY>
User: {%%EditUser%%}<br>
Passwd: {%EditPasswd%%}<br>
<br>
{%%ButtonLogin%%}
</BODY>
</HTML>
IWS will output these correctly then.
Now see the languages tab in the image above! This is one of the cool
things that IWS offers: It maintains lanugae versions for all documents. I’ve
added just English and German to this sample project, you can add as many
languages as you want of course.
These language versions will get deployed as LoginForm.En.html,
LoginForm.DE.html – which is the same format as IntraWeb needs for
multi-language template files.
Using IWS templates
To make the whole thing even more flexible, you can use IWS’s templates to
provide the general look and feel of all of your IntraWeb templates. For example
in the LoginForm example above you want the background to be blue – as on all
other forms of your Web application. Then you would assign the background color
in the IWS Template – and not in every single IW template
file. This makes it very easy to
change the background color to red in all of your 50 template files – if you (or
your artist) later decides to.
Here is a starter about
target=_Blank>IWS Templates.
WebSnap
Templates for WebSnap work a bit differntly than those for IntraWeb. Matthijs
ter Woord, one of our Indy
Experts described the required steps in this
article.
Entries (RSS)