Working with files in a Web target
When building a Web application that uses EAServer components
and DataWindows, you can use the Web target environment to develop
these separate components in the same workspace. A Web target lists
and tracks all of the files and folders in your Web site. The target
identifies the root directory used to store source files and specifies
build and deploy options.
Types of files
A Web target contains various types of files:
- HTML files
- Scripts
- Component files
- Accessory files, such as images and video files
HTML files
HTML files determine the presentation for your Web applications.
HTML files also provide the framework for adding components to your
Web pages. 4GL Web pages are HTML pages that use a server-side event
model and are customized for the EAServer environment.
Scripts
Scripts drive application behavior both on the client side
and on the server side. Web targets support writing and debugging
of client- and server-side scripts. You can write scripts in the
Script editor in a number of languages including JavaScript, DynaScript,
JScript, and VBScript.
Debugging your scripts You can debug only those scripts that are compatible with
DynaScript, the PowerDynamo scripting language. The PowerDynamo scripting
engine provides debugging capabilities for Web target client- and
server-side scripts.
Client-side scripting Client-side scripts contain instructions that the browser
executes on the user’s local machine. Client-side scripts
can use syntax, functions, and objects supported by the major browsers.
Server-side scripting Server-side scripts contain instructions that an application
server or Web server executes before sending a Web page to a client browser.
These scripts provide a way to include conditional execution, looping, and
other programming structures in your Web pages. They can also provide access
to integrated server systems such as a DBMS or EAServer.
Server-side scripts can take advantage of the Web Target object
model, which uses a set of language structures and objects. Although
many of the objects and programming structures are common to a number
of application server technologies, a subset is specific to the Enterprise Application Server environment.
The Web Target object model (with the exception of the 4GL
EAServer extensions) allows you to write server-side logic that
can be deployed to several server platforms from a single source.
The deployment engine converts the source to the appropriate syntax
for these target platforms:
- PowerDynamo dynamic
page server - Microsoft Internet Information Server (IIS) application
server using Active Server Pages
Components
You can include the following types of components in your
Web pages to deliver the content and functionality your site users
need:
- Web DataWindow DTCs
- EAServer components
- Java applet and JavaBean components
- Microsoft ActiveX controls
- Netscape plugins
Accessory files
Web sites include several other types of files, such as images,
video files, and audio files. You can import accessory files into
a Web target from another location. See “Importing files
or an existing Web site”.
Adding content
After you create a Web target, you are ready to begin developing
content. You should probably start by setting up the folder structure
for your target.
Adding new folders
When you add content to a Web target, you use folders to set
up a logical directory structure for the content. When you deploy
a Web target, the deployment engine replicates the folder structure
on the server system. A Web target keeps track of its HTML pages
and other application objects. When you deploy, the deployment engine
processes the content for the target Web server and application
server and rewrites link information to fit the directory structure.
To add a new folder to a Web target:
-
On the Workspace tab of the System Tree,
right-click a Web target (or a folder under a Web target), then
select New Folder from the popup menu. -
Right-click the new folder that displays under
your Web target and select Rename from the popup menu. - Type in the name you want to give to your folder.
Adding new HTML files
With a folder structure in place, you can begin adding files
to those folders. The Web page of the New dialog box has wizards
for creating the various types of files you can edit in a Web target.
To add new HTML files to a Web target:
-
Right-click a Web target, or a folder under
a Web target, then click New from the popup menu.The Web page of the New dialog box displays:
Selecting an item in the New dialog box launches a wizard
that helps you set up a new file.Select this To do this Quick Web Page Open a new, unnamed HTML page in the
HTML editorWeb Page Create a new HTML page, specify design
settings such as background color for the page, and open the page
in the HTML editor4GL Web Page Create a new 4GL Web page, specify design settings
such as the background for the page, select error reporting settings,
page parameters, and EAServer components, and open the page in
the HTML editorWeb DataWindow Page Create a new HTML page that contains
a Web DataWindow design-time control (DTC), specify design settings
such as the background for the page and configuration information
for the DTC, including the EAServer profileFrameset Page Open a new HTML file, and identify the
Frameset parameters the file usesScript Open a new, unnamed script file in the
standalone Script editorCascading Style Sheet Open a new external style sheet file
(and optionally reference an existing style sheet) in the Style
Sheet editor
Using the System Tree
The System Tree is an active resource for page development,
providing an organized framework for developing your targets, pages,
and components. Its four tab pages let you browse items available
to your Web pages.
| System Tree tab page | Displays this content |
|---|---|
| Workspace | Workspace contents — including targets, folders, files, and libraries |
| Language | HTML tags, client- and server-side object models (listing object properties, methods, and events), and scripting language elements (including JavaScript, DynaScript, and VBScript syntax elements) |
| Components | ActiveX controls, Plugins, Java Applets, JavaBeans, and Enterprise Application Server components available to your target |
| Page | The page components of the active page open in the HTML editor |
You can view the properties for any item in the System Tree
by right-clicking the item, and selecting Properties from the popup
menu. On the Language, Components, and Page tab pages you can view,
but not change, properties.
You can drag and drop HTML elements, scripting resources,
and other components from a System Tree tab page onto Web pages
open in the HTML editor.
Workspace tab
The workspace tab lets you manage your targets. From it you
change target properties, add, remove, and rename files and folders,
and build, deploy, and run targets. The popup menu for a Web target
gives you access to these features:
| Web Target popup menu item | Feature |
|---|---|
| New | Displays PowerBuilder New dialog box |
| New Folder | Creates new folder in target |
| Import Files | Allows you to select files to import to the target |
| Import Folder | Allows you to select a folder to import to the target |
| Incremental Build | Builds only files in the Web target that have changed since the previous build |
| Full Build | Builds all files in the Web target |
| Deploy | Deploys the target according to the deployment configurations selected in the Target Properties dialog box |
| Debug | Debugs the target if it is deployed to PowerDynamo |
| Run | Starts a browser that opens to the page you specify in the Start Page field on the Run/Debug tab page of the Target Properties dialog box |
| Remove Target | Deletes the target from the workspace |
| Show | Toggles display of items in the System Tree |
| Properties | Opens the Target Properties dialog box |
Page tab
The Page tab shows the hierarchy of objects on the current
page in the HTML editor. The page tab also lists properties, methods,
and events for:
- Predefined Microsoft Internet
Explorer page objects - Predefined HTML objects
- Predefined JavaScript objects
- User-defined objects
- Server-side EAServer components placed on the
Web page
To use an object on the Page tab, you drag it from the Page
tab to the Source view of the HTML editor.
Language tab
The language tab provides quick access to:
- HTML elements and attributes The most commonly used HTML elements appear in this list.
The elements are organized alphabetically as well as by category
to make browsing easy. Elements appear in categories such as format,
headers, image, and multimedia. Attributes appear alphabetically
under elements.
You can drag an HTML element or attribute from the Language
tab to the Page view or the Source view in the HTML editor, or to
the Script editor. - Script language syntax The syntax elements for JavaScript, VBScript, and DynaScript.
You can drag a script syntax element from the Language tab
to the Source view in the HTML editor, or to the Script editor. - Object models The objects, and their methods, properties, and events, for
the Microsoft and Netscape client-side object models, and the Web Target,
PowerDynamo, and Active Server Pages server-side object models.
You can drag an object model from the Language tab to the
Source view in the HTML editor, or to the Script editor.
Components tab
The Components tab of the System Tree lists client- and server-side
ActiveX controls, plugins, Java applets, and JavaBeans installed
on your system, and EAServer components accessible from your system.
Information about installed components A Web target gets information about installed components from
the Windows registry, browser plugin directories, MIME extensions
recognized by your primary browser, and user-specific folder lists.
It relies on the Java classpath, if set on your system, to find
Java applets and JavaBeans.
The list of servers on the Components tab is populated from
the EAServer profiles configured for PowerBuilder. A profile must
be configured for a server for it to appear on the Components tab.
The server must be running for you to see the components available
in its repository.
To give a page access to a component listed on the Components
tab, drag the component from the Components tab to the Page view
or Source view in the HTML editor.
Drag and drop
You can drag files, HTML tags, objects, and methods from the
System Tree into the HTML or Script editors, or you can copy from
the System Tree and paste into an editor window. The result depends
on the item you drag or copy, on the System Tree tab, and on the
editor view:
| From | To | Item | Result |
|---|---|---|---|
| Workspace tab | HTML editor (Page or Source view) | Text file (such as HTM, JS, ASP) | Creates a hyperlink to a file from the current page. If the HTML editor is not already open, opens the item dragged or copied in the appropriate editor |
| Workspace tab | HTML editor (Page or Source view) | Image file (such as GIF, JPG, and so on) |
Creates image element <IMG> with link to image file in its SRC attribute |
| (Current) Page tab | Source view or integrated Script editor | Object method, event, or property | Inserts the appropriate dot notation to fully qualify the object method, event, or property name |
| Language tab | HTML editor (Page or Source view) | HTML element (tag) that does not have an associated Web Target property sheet |
If no text is selected in the HTML editor, the element is inserted, but you must be in or switch to Source view to put the cursor between the start and end tags and add content. In Page view the editor formats selected text according to the element you dragged |
| Language tab | HTML editor (Page or Source view) | HTML element (tag) that has a Web Target property sheet |
Web Target property sheet displays. You can fill in property sheet fields before the element (control) is added to the open page in the editor |
| Language tab | HTML editor (Page or Source view) or Script editor |
Object model method, event, or property | Inserts the appropriate dot notation with text in brackets that you must replace to fully qualify the method, event, or property |
| Language tab | HTML editor (Page or Source view) or Script editor |
Scripting language function, keyword, operator, or escape sequence |
Inserts the appropriate dot notation to fully qualify the scripting language syntax |
| Component tab | HTML editor | EAServer component | Opens the Page properties dialog box to the EAServer page on which the control is associated with the page |
| Component tab | Script editors | EAServer component | Inserts the appropriate dot notation to fully qualify the component |
| Component tab | HTML editor | Plugin or ActiveX | Opens the Web Target property sheet associated with object |
| Component tab | Script editors | Applet or JavaBean method, Plugin, or ActiveX |
Inserts the object name or identifier |
Copying items
You can also copy items from the System Tree and paste them
to the Page view or Source view.
To copy items from the System Tree:
-
Right-click the item you want to copy and
select Copy from the popup menu. -
Right-click in the Page view or Source view, and
select Paste from the popup menu.