4D Ajax for Dream Weaver Guide

18
4D Ajax for Dreamweaver Windows ® /Mac OS ® © 2007 4D SAS / 4D, Inc. All Rights Reserved

Transcript of 4D Ajax for Dream Weaver Guide

4D Ajax for Dreamweaver

Windows®/Mac OS®

© 2007 4D SAS / 4D, Inc. All Rights Reserved

4D Ajax for DreamweaverFor Windows® and Mac OS®

Copyright© 2007 4D SAS/ 4D, Inc.All rights reserved.

The software described in this manual is governed by the grant of license provided in this package. The soft-ware and the manual are copyrighted and may not be reproduced in whole or in part except for the personal licensee’s use and solely in accordance with the contractual terms. This includes copying the electronic media, archiving, or using the software in any manner other than that provided for in the Software license Agreement.

4D, 4D Draw, 4D Write, 4D View, 4D Insider, 4th Dimension®, 4D Server and the 4th Dimension and 4D logos are registered trademarks of 4D SAS.

Microsoft, Windows and Windows NT are registered trademarks of Microsoft Corporation.

Apple, Macintosh, Power Macintosh, Mac OS and QuickTime are trademarks or registered trademarks of Apple Computer Inc.

Mac2Win Software Copyright © 1990-2007 is a product of Altura Software, Inc.

ACROBAT © Copyright 1987-2007, Secret Commercial Adobe Systems Inc. All rights reserved. ACROBAT is a registered trademark of Adobe Systems Inc.

This product includes software developed by the Apache Software Foundation (http://www.apache.org/). 4th Dimension includes cryptographic software written by Eric Young ([email protected])4th Dimension includes software written by Tim Hudson ([email protected]).

Spellchecker © Copyright SYNAPSE Développement, Toulouse, France, 1994-2007.

All other referenced trade names are trademarks, registered trademarks, or copyrights of their respective holders.

IMPORTANT LICENSE INFORMATION

Use of this software is subject to its license agreement included with the software. Please read the License Agreement carefully before using the software.

Contents

Chapter 1 Introduction. . . . . . . . . . . . . . . . . . . .5

Chapter 2 Installation . . . . . . . . . . . . . . . . . . . .7Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Install Steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Verify Installation . . . . . . . . . . . . . . . . . . . . . . . . . 9

Chapter 3 Using the Extension. . . . . . . . . . . . . . . 11Meet The Buttons . . . . . . . . . . . . . . . . . . . . . . . . 11Setting Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Getting Started. . . . . . . . . . . . . . . . . . . . . . . . . . 12Embedding 4D Ajax Objects. . . . . . . . . . . . . . . . . . . 13

The Data Grid . . . . . . . . . . . . . . . . . . . . . . . . 13The Calendar . . . . . . . . . . . . . . . . . . . . . . . . 14The Data Tree . . . . . . . . . . . . . . . . . . . . . . . . 15The Data Matrix . . . . . . . . . . . . . . . . . . . . . . . 16The Image Matrix . . . . . . . . . . . . . . . . . . . . . . 17

Deleting/Editing 4D Ajax Objects . . . . . . . . . . . . . . . . 18Saving and Previewing the HTML Page . . . . . . . . . . . . . 18

34D Ajax for Dreamweaver

Contents

4 4D Ajax for Dreamweaver

1 Introduction

The 4D Ajax for Dreamweaver extension allows 4D developers to create custom HTML pages with 4D Ajax embedded objects. Furthermore, the biggest benefit is that 4D developers can create these pages without having to write a single line of Javascript or HTML code. Thanks to the 4D Ajax for Dreamweaver extension, developers only need to be con-cerned with appearance and customizable functionality.

Examples of custom web pages with embedded 4D Ajax Objects:

Note The 4D Ajax objects (ie. Tables, Views, DDWs, DCSs) that will be embedded must already exist in the 4D Ajax Framework client. This manual assumes that the 4D developer is familiar with creating and modifying such objects in the 4D Ajax Framework client environment.

Demo.4d.com 4DAF Video Player Technical Note

54D Ajax for Dreamweaver

Chapter 1 Introduction

6 4D Ajax for Dreamweaver

2 Installation

Installation will be covered in three sections:

� Requirements

� Install Steps

� Verify Installation

Requirements

Note Dreamweaver CS3 must be closed in order to install the 4D Ajax for Dreamweaver extension.

74D Ajax for Dreamweaver

Chapter 2 Installation

Install Steps1 Launch the Adobe Extension Manager.

Note The 4D Ajax for Dreamweaver extension is only compatible with Dreamweaver CS3.

2 Click the Install icon.

3 Browse and select the “4D Ajax.mxp” file.

4 Accept the License Agreement.

5 The successful installation dialog appears. Click OK.

The Adobe Extension Manager

Make sure Dreamweaver CS3 is selected

8 4D Ajax for Dreamweaver

Verify Installation

6 The 4D Ajax for Dreamweaver extension is now listed in the Adobe Extensions Manager.

7 Quit the Adobe Extensions Manager.

Verify Installation1 Launch Adobe Dreamweaver CS3.

2 Create a new document of type HTML.

3 There is now a “4D AJAX” tab in the Insert Bar with the following buttons:

94D Ajax for Dreamweaver

Chapter 2 Installation

10 4D Ajax for Dreamweaver

3 Using the Extension

The 4D developer is now able to embed 4D Ajax objects into HTML pages using the extension. We will begin with a quick introduction to the buttons in the insert bar.

Meet The ButtonsHere is a quick introduction to the buttons of the 4D Ajax Insert Bar in Dreamweaver CS3:

Import Structure button Import the XML structure of the 4D database.

Insert Login button Specify login information as users access the page.

Data Grid button Embed a Data Grid object to the HTML page.

Calendar button Embed a Calendar object to the HTML page.

Data Tree button Embed a Data Tree object to the HTML page.

Data Matrix button Embed a Data Matrix object to the HTML page.

Image Matrix button Embed an Image Matrix object to the HTML page.

114D Ajax for Dreamweaver

Chapter 3 Using the Extension

Setting UpBefore we embed 4D Ajax objects into custom HTML pages, some prep-arations are in order.

1 Start up the 4D Web server (if it is not running already). To start it up:

� In 4D, go to Design mode.

� Select Run->Start Web Server.

Note Now would be a good time to test the connection (ie. connecting to http://localhost:8080 via web browser). It should load the 4D Ajax Framework Welcome Page.

2 Make sure that the 4D Ajax objects (ie. Tables, Views, DDWs, DCSs) that will be embedded already exist in the client side of the 4D Ajax Framework.

Note The objects that can be embedded are listed in the Portal of the 4D Ajax Framework client.

3 Launch Dreamweaver CS3. Make sure to create/modify an HTML document.

Getting StartedIt is now time to start using the 4D Ajax for Dreamweaver extension. Two quick steps follow:

� Importing the structure

� Entering login information

1 Click the Import Structure button.

Select the Support folder in the Extras folder next to the 4D database.

This will parse your current settings and retrieve the 4D Ajax objects.

Select the Support folder Import Success dialog

12 4D Ajax for Dreamweaver

Embedding 4D Ajax Objects

2 Click the Insert Login button.

More information on user authentication can be found here:

http://daxipedia.4d.com/index.php/Developer_Hooks#User_Authentication

Page Style can also be customized in this window like the correspond-ing themes in the 4D Ajax Framework client environment.

Embedding 4D Ajax ObjectsNow it is time to pick and choose 4D Ajax objects to embed. What fol-lows are summaries of each type of 4D Ajax object.

3 Choose a 4D Ajax object to embed.

The Data Grid

Basic SettingsAdvanced Settings

134D Ajax for Dreamweaver

Chapter 3 Using the Extension

� Basic Settings:

� Choose the Selection to be displayed in the Data Grid object.

� Check “Anchor Window” to have the object anchored in the HTML page. Uncheck if you want the object in its own window.

� Specifying a width and height can modify size of the Data Grid.

� Advanced Settings:

� These options are actually parameters in the Datawindow and .custo-mize functions as described in the online documentation: http://daxipedia.4d.com/index.php/Data_Window

The Calendar

� Basic Settings:

� Choose the Selection to be displayed in the Calendar object.

� Check “Anchor Window” to have the object anchored in the HTML page. Uncheck if you want the object in its own window.

� Specifying a width and height can modify size of the Calendar.

� Advanced Settings:

� These options are actually parameters in the calendarView, .setWeek-Start, .setBlankValue and .customize functions as described in the online documentation:http://daxipedia.4d.com/index.php/Calendar_View

Basic Settings

Advanced Settings

14 4D Ajax for Dreamweaver

Embedding 4D Ajax Objects

The Data Tree

� Basic Settings:

� Choose the Selection to be displayed in the Data Tree object.

� Check “Anchor Window” to have the object anchored in the HTML page. Uncheck if you want the object in its own window.

� Specifying a width and height can modify size of the Data Tree.

� Advanced Settings:

� These options are actually parameters in the HGrid, .showBreakCount and .customize functions as described in the online documentation: http://daxipedia.4d.com/index.php/Data_Tree

Basic SettingsAdvanced Settings

154D Ajax for Dreamweaver

Chapter 3 Using the Extension

The Data Matrix

� Basic Settings:

� Choose the Selection to be displayed in the Data Matrix object.

� Check “Anchor Window” to have the object anchored in the HTML page. Uncheck if you want the object in its own window.

� Specifying a width and height can modify size of the Data Matrix.

� Data Output, Display, and Toolbar:

� These options are actually parameters in dataMatrix and .customize functions as described in the online documentation:http://daxipedia.4d.com/index.php/Image_Browser

Basic Settings

Display

Data Output

Toolbar

16 4D Ajax for Dreamweaver

Embedding 4D Ajax Objects

The Image Matrix

� Basic Settings:

� Choose the Selection to be displayed in the Data Matrix object.

� Check “Anchor Window” to have the object anchored in the HTML page. Uncheck if you want the object in its own window.

� Specifying a width and height can modify size of the Data Matrix.

� Data Output, Display, and Toolbar:

� These options are actually parameters in dataMatrix and .customize functions as described in the online documentation:http://daxipedia.4d.com/index.php/Image_Browser

Basic Settings

Display

Data Output

Toolbar

174D Ajax for Dreamweaver

Chapter 3 Using the Extension

Deleting/Editing 4D Ajax Objects4D Ajax objects can be modified and/or deleted by clicking within the <div> attribute of the specific object. The <div> attributes are within the <body> element of the HTML page.

The option to delete or modify appears within the Properties window of Dreamweaver CS3.

Saving and Previewing the HTML PageIt is best to save the HTML page in the dax folder next to the 4D struc-ture. That way, the 4D developer can append the name of the HTML file after the address of the 4D web server. For example (if the file is named custom_page.html):http://localhost:8080/custom_page.html

Note In 4D go to Preferences->Web to modify appropriate settings such as TCP port and Default HTML root.

18 4D Ajax for Dreamweaver