Tutorial Webdev 18

GAF_WebDev.book Page 1 Mardi, 16. avril 2013 9:46 09

WebDev 18Documentation version 18.0(1) - 0313

Remember to visit our Web site (www.windev.com) on a regular basis to find out whether upgraded ver-sions are available.

Email address of Free Technical Support: [email protected]

This documentation is not contractually binding. PC SOFT reserves the right to modify or delete any topicdealt with in this document.

All product names or other trademarks mentioned in this publication are registered trademarks of their respective owners. PC SOFT 2013: This publication may not be reproduced in part or in whole in any form without the express permission of PC SOFT.


Table of contents 3

TABLE OF CONTENTS

IntroductionPreliminary points ................................................................................................................................................. 17Overview of the tutorial ........................................................................................................................................ 17How do I access the online help? ........................................................................................................................ 18Legend of symbols ................................................................................................................................................ 19If you are familiar with WebDev 17 ... ................................................................................................................ 20What is WebDev used for? ................................................................................................................................... 20

PART 1 - DISCOVERING WEBDEV

Lesson 1.1. Discover WebDevOverview ................................................................................................................................................................. 24Starting WebDev ................................................................................................................................................... 24Development environment .................................................................................................................................. 25

Lesson 1.2. My first pageOverview ................................................................................................................................................................. 29

Opening the project ................................................................................................................................ 29My first page: entering information .................................................................................................................... 30

Overview.................................................................................................................................................. 30Creating the first page............................................................................................................................ 30Input and display of the value entered ................................................................................................. 33Test of a page ......................................................................................................................................... 37Checks on the "FirstName" control ....................................................................................................... 38

Lesson 1.3. My first pagesOverview ................................................................................................................................................................. 41Doing calculations in server code ....................................................................................................................... 41

Overview.................................................................................................................................................. 41Implementation....................................................................................................................................... 41

Displaying the time in real time .......................................................................................................................... 44Overview.................................................................................................................................................. 44Adding the Time control ......................................................................................................................... 44Implementing the timer.......................................................................................................................... 45

List the files found in a directory ......................................................................................................................... 46Overview.................................................................................................................................................. 46Creating the page ................................................................................................................................... 47Create the looper.................................................................................................................................... 47Programming........................................................................................................................................... 49Using callback in your programs ........................................................................................................... 49Anchoring the page and the controls .................................................................................................... 51


4 Table of contents

Lesson 1.4. ConceptsMain concepts and terminology .......................................................................................................................... 54

Main concepts ........................................................................................................................................ 54Terminology............................................................................................................................................. 55

The different types of pages proposed by WebDev .......................................................................................... 56The different types of pages .................................................................................................................. 56The different types of sites .................................................................................................................... 59

A Web server and browsers ... ............................................................................................................................. 59The different browsers ........................................................................................................................... 59The different Web servers...................................................................................................................... 60Whats happening on the browser side ... ............................................................................................ 60Whats happening on the server side ... ............................................................................................... 60

Lesson 1.5. Programming conceptsIntroduction ........................................................................................................................................................... 63Server code and browser code ............................................................................................................................ 63

Server code ............................................................................................................................................. 64Browser code .......................................................................................................................................... 64

Declaring the different types of variables .......................................................................................................... 65Declaring the variables and their scope ............................................................................................... 65

Main statements of WLanguage ......................................................................................................................... 66Conditional statements (server code and browser code).................................................................... 67Loop statements (server code and browser code)............................................................................... 67Comments............................................................................................................................................... 68The MyPage keyword (server code and browser code)........................................................................ 69Practical example on the different main statements .......................................................................... 69

Main WLanguage operators ................................................................................................................................ 69Logical operators .................................................................................................................................... 70Comparison operators............................................................................................................................ 70Indirection operators .............................................................................................................................. 70

Procedures and functions .................................................................................................................................... 71Definition................................................................................................................................................. 71Local procedure...................................................................................................................................... 71Global procedure and set of procedures .............................................................................................. 71How to choose whether a procedure should be global or local? ........................................................ 72About passing parameters..................................................................................................................... 72Calling a procedure................................................................................................................................. 72Creating a procedure.............................................................................................................................. 72A practical example on the procedures and the functions.................................................................. 73

Processing the strings (server code and browser code) ................................................................................... 74Practical example ................................................................................................................................... 74Details (server code and browser code) ............................................................................................... 74

Processing the numeric values (server code and browser code) .................................................................... 76Practical example ................................................................................................................................... 76Details...................................................................................................................................................... 76

Processing the currencies (server code only) .................................................................................................... 78Practical example ................................................................................................................................... 78Details...................................................................................................................................................... 78

Processing the dates and times (server code and browser code) ................................................................... 79


Table of contents 5

The dates (server code and browser code) ........................................................................................................ 80Practical example ................................................................................................................................... 80Input mask and returned value ............................................................................................................. 80What is todays date?............................................................................................................................. 81What is todays date, with the day and the month in letters?............................................................. 82How many days between two dates?.................................................................................................... 82What is the day of the week corresponding to a given date? ............................................................. 83Practical exercise.................................................................................................................................... 83Handling Date types variables (server code) ........................................................................................ 84

The times (server code and browser code) ........................................................................................................ 85Practical example ................................................................................................................................... 85What time is it?....................................................................................................................................... 85How much time has passed between two given times?...................................................................... 86

Calculations with dates and times ...................................................................................................................... 87

PART 2 - SITE WITH DATA

Lesson 2.1. OverviewOverview of the site created in this part ............................................................................................................. 92

Lesson 2.2. Project and analysisOverview ................................................................................................................................................................. 94Creating the project .............................................................................................................................................. 94Creating the analysis ............................................................................................................................................ 96Creating the description of the data files ........................................................................................................... 97

Creating a data file and its items in the editor..................................................................................... 98Importing a CSV file ..............................................................................................................................102Importing files from the dictionary ......................................................................................................105Direct import of existing data files ......................................................................................................106

Creating the links ................................................................................................................................................107Generating the analysis .....................................................................................................................................109Configuring the analysis for RAD ......................................................................................................................110

Configuring the RAD in the description of the data files ...................................................................110Configuring the RAD in the description of items ................................................................................111

Lesson 2.3. The full RADWhat is RAD? ......................................................................................................................................................114Generating RAD ..................................................................................................................................................114Test of the site .....................................................................................................................................................116Customizing the generated site ........................................................................................................................117


6 Table of contents

Lesson 2.4. Edit pageOverview ...............................................................................................................................................................119Creating an edit page .........................................................................................................................................119Managing the addition of a record ...................................................................................................................122

Creating the add button .......................................................................................................................122Adding an input mask ..........................................................................................................................123Erasing the data after the addition .....................................................................................................124Viewing the records ..............................................................................................................................124Managing the upload of the book cover .............................................................................................125Closing button.......................................................................................................................................126

Managing the search and the modification .....................................................................................................127Exact-match search ..............................................................................................................................127Generic search......................................................................................................................................128Modifying the form displayed ..............................................................................................................129Browsing the forms...............................................................................................................................130

Lesson 2.5. Multi-criteria searchOverview ...............................................................................................................................................................133Creating a query with parameters ....................................................................................................................134Creating a page with a table based on the query ...........................................................................................136

Lesson 2.6. Printing the dataOverview ...............................................................................................................................................................139Creating a report .................................................................................................................................................139Starting the report print .....................................................................................................................................140

Lesson 2.7. The user groupwareOverview ...............................................................................................................................................................143Including the user groupware ............................................................................................................................143Configuring the user groupware ........................................................................................................................145

Lesson 2.8. The dashboardOverview ...............................................................................................................................................................147Automatic tests ...................................................................................................................................................147


Table of contents 7

PART 3 - PAGES AND CONTROLS

Lesson 3.1. PagesHow do I create a page? ....................................................................................................................................154Description of a page: 7 tabs are available .....................................................................................................155

Practical example .................................................................................................................................155"General" tab.........................................................................................................................................156"GUI" tab ................................................................................................................................................156"Details" tab ..........................................................................................................................................157"Frame" tab ...........................................................................................................................................157"Language" tab......................................................................................................................................157"Note" tab ..............................................................................................................................................157"Advanced" tab......................................................................................................................................158"Style" tab..............................................................................................................................................158

Lesson 3.2. The controlsIntroduction .........................................................................................................................................................160

Practical example .................................................................................................................................160The standard controls .........................................................................................................................................160

Type of control: Static...........................................................................................................................161Type of control: Edit control .................................................................................................................162Type of control: Button .........................................................................................................................166Type of control: Link .............................................................................................................................168Type of control: Image..........................................................................................................................168Type of control: Clickable image..........................................................................................................172Type of control: Radio button...............................................................................................................174Type of control: Check box...................................................................................................................175Type of control: List box........................................................................................................................176Type of control: Combo box..................................................................................................................181Type of control: Table ...........................................................................................................................182Type of control: Looper.........................................................................................................................186Type of control: TreeView .....................................................................................................................188Type of control: Cell ..............................................................................................................................188Type of control: Chart ...........................................................................................................................189Type of control: Rating..........................................................................................................................189

Specific controls ..................................................................................................................................................190Type of control: Calendar .....................................................................................................................191Type of control: Scheduler ...................................................................................................................191Type of control: Organizer ....................................................................................................................191Type of control: TreeView Table...........................................................................................................192Type of control: Captcha ......................................................................................................................192Type of control: Bar Code.....................................................................................................................192Type of control: HTML table .................................................................................................................193Type of control: Slider...........................................................................................................................193Type of control: Horizontal rule............................................................................................................193Type of control: HTML...........................................................................................................................194Type of control: Web Camera...............................................................................................................194Type of control: Java Applet .................................................................................................................194


8 Table of contents

Type of control: Flash and Flex ............................................................................................................195Type of control: Silverlight....................................................................................................................197Type of control: IFrame.........................................................................................................................197Type of control: Site map path.............................................................................................................198Type of control: Site map .....................................................................................................................198Type of control: Pager...........................................................................................................................198Type of control: Thumbnail...................................................................................................................199

Lesson 3.3. Ergonomics of the siteOverview ...............................................................................................................................................................201Handling the styles of the controls ...................................................................................................................201Defining the tab order of the controls ..............................................................................................................202Displaying a help in the pages ..........................................................................................................................203

The tooltip .............................................................................................................................................203Help message .......................................................................................................................................203Indication text .......................................................................................................................................203

Create your pages by using the zoning mode ..................................................................................................204Overview................................................................................................................................................204How to use zoning? ..............................................................................................................................205Practical example .................................................................................................................................206

Anchor the controls ............................................................................................................................................207Use the rulers and the alignment options ........................................................................................................208Use the tabs to group your controls ..................................................................................................................209Improve the navigation in your site ..................................................................................................................209Use modern dialog boxes ...................................................................................................................................210Interface of the site: Use the page templates .................................................................................................211

What is a page template?....................................................................................................................211How do I create a page template? ......................................................................................................212How do I apply a page template?........................................................................................................212Updating the template .........................................................................................................................213How do I dissociate a template imported into a page? .....................................................................213

Lesson 3.4. ReusabilityWhat does the reusability mean? .....................................................................................................................215Re-using a set of controls ..................................................................................................................................215

Practical example .................................................................................................................................215The supercontrol...................................................................................................................................215Internal page.........................................................................................................................................216Control template...................................................................................................................................217


Table of contents 9

Lesson 3.5. Questions/AnswersHow do I display a page in a new window of the browser? ...............................................................219How do I modify the color of a static by programming?.....................................................................220How do I make a button invisible? ......................................................................................................221How do I create a vertical menu in a WebDev page? ........................................................................221How do I add a popup menu to a table or to a looper? .....................................................................222How do I pass parameters to a page? ................................................................................................222How do I group the controls in order to modify their properties by programing? ............................223How do I transform a check box into a radio button?........................................................................223How do I add an image to the page background? .............................................................................223How do I display the date of site update? ..........................................................................................224

PART 4 - DATABASES AND ANALYSES

Lesson 4.1. IntroductionOverview ...............................................................................................................................................................228The different modes for accessing databases ................................................................................................229

Native Access........................................................................................................................................229Direct ODBC access..............................................................................................................................229OLE DB access......................................................................................................................................229ODBC access via OLE DB .....................................................................................................................230

Lesson 4.2. Browsing the data files and the queriesHReadFirst browse ..............................................................................................................................................232HReadSeek browse ............................................................................................................................................232FOR EACH browse ...............................................................................................................................................233FOR EACH WITH browse .....................................................................................................................................233What type of browsing command should I choose? .......................................................................................234

Lesson 4.3. Managing the errorsOverview ...............................................................................................................................................................236

Practical example .................................................................................................................................236Managing the errors in automatic mode .........................................................................................................236Managing the errors in advanced programmed mode ...................................................................................238

Lesson 4.4. Data encryptionWhat is data encryption used for? ....................................................................................................................241How do I encrypt the data files? ........................................................................................................................242

Implementing the encryption of the data files ...................................................................................242Managing the encryption in WLanguage ............................................................................................244


10 Table of contents

Lesson 4.5. Advanced conceptsOverview ...............................................................................................................................................................246The log process ...................................................................................................................................................246

What is the log process used for?.......................................................................................................246The transactions .................................................................................................................................................246

A simple example of the need for transactions in some types of processes...................................246The transactions on HyperFileSQL ......................................................................................................247

The replication ....................................................................................................................................................248The triggers ..........................................................................................................................................................248

Lesson 4.6. External databasesOverview ...............................................................................................................................................................250Connecting to a database in the data model editor .......................................................................................250Connecting to a database by programming ....................................................................................................253

Creating the connection: HOpenConnection ......................................................................................253Associating the connection with the data files: HChangeConnection ..............................................254

PART 5 - MANAGING A HYPERFILESQL CLIENT/SERVER DATABASE

Lesson 5.1. IntroductionOverview ...............................................................................................................................................................258Why switch a site to HyperFileSQL Client/Server? .........................................................................................259

Lesson 5.2. Implementing a HyperFileSQL Client/Server siteOverview ...............................................................................................................................................................261Installing a local HyperFileSQL server ..............................................................................................................261Creating a site in HyperFileSQL Client/Server mode ......................................................................................261Migrating a site from HyperFileSQL Classic to HyperFileSQL Client/Server ................................................262

Overview................................................................................................................................................262Migrating the example..........................................................................................................................262

Features available in HyperFileSQL Client/Server mode ...............................................................................264

Lesson 5.3. Managing a Client/Server databaseOverview ...............................................................................................................................................................266Configuring the computers ................................................................................................................................266The HyperFileSQL Control Center ......................................................................................................................266Creating a user account in the HyperFileSQL Control Center ........................................................................268Saving the database ...........................................................................................................................................271Conclusion ...........................................................................................................................................................271


Table of contents 11

PART 6 - QUERIES

Lesson 6.1. Create your first queryIntroduction .........................................................................................................................................................276Your first query ....................................................................................................................................................276

Lesson 6.2. Queries with countCreating a query with count ...............................................................................................................................283

Lesson 6.3. Sum queriesCreating a "Sum" query ......................................................................................................................................286

Lesson 6.4. The SQL languageSource code of a query .......................................................................................................................................290The SQL commands ............................................................................................................................................291

The SELECT statement.........................................................................................................................291The FROM statement ...........................................................................................................................291The WHERE statement .........................................................................................................................291The GROUP BY statement ....................................................................................................................292The ORDER BY statement ....................................................................................................................292

Lesson 6.5. Using queriesUsing a query from a report ...............................................................................................................................294Using a query from a table or from a looper ....................................................................................................294Using a query from WLanguage ........................................................................................................................294

PART 7 - REPORTS

Lesson 7.1. IntroductionPrinciples for printing on Internet .....................................................................................................................298

Direct print ............................................................................................................................................298Generation of documents (HTML, PDF, XML), ... ................................................................................298

Basic vocabulary .................................................................................................................................................299

Lesson 7.2. Your first reportOverview ...............................................................................................................................................................302

The reports to create............................................................................................................................302Creating your first report ....................................................................................................................................303

Creating the report: List of customers sorted by city .........................................................................303

Lesson 7.3. Statistical reportsOverview ...............................................................................................................................................................312Step by step .........................................................................................................................................................313



Lesson 7.4. Crosstab reportsOverview ...............................................................................................................................................................319Step by step .........................................................................................................................................................320

Lesson 7.5. Running reportsRunning reports in WLanguage .........................................................................................................................324

iDestination function............................................................................................................................325iPrintReport function ............................................................................................................................325

PART 8 - ADVANCED PROGRAMMING

Lesson 8.1. Web featuresOverview ...............................................................................................................................................................330

Practical example .................................................................................................................................330The cookies ..........................................................................................................................................................330

What is a cookie made of?...................................................................................................................331Managing the cookies with WebDev ...................................................................................................331Practical example .................................................................................................................................332

Uploading files .....................................................................................................................................................333Managing the upload with a single-file or multi-file upload control ..................................................333Practical example .................................................................................................................................334

The file download ................................................................................................................................................334Managing the download.......................................................................................................................335Practical example .................................................................................................................................335

Securing the pages .............................................................................................................................................336Protecting the access to your pages by a password..........................................................................336Practical example .................................................................................................................................336

Securing the data and the pages via TSL/SSL ................................................................................................338Implementing secured transactions via the TLS/SSL protocol.........................................................338Transactions secured by TLS\SSL in a WebDev site .........................................................................338

Secured payment ................................................................................................................................................338System for secured payment in a WebDev site..................................................................................340

Ajax .......................................................................................................................................................................341What are Ajax benefits? .......................................................................................................................341How to program AJAX in WEBDEV? .....................................................................................................341Practical example .................................................................................................................................342

Lesson 8.2. Automatic error managementOverview ...............................................................................................................................................................345

Operating mode ....................................................................................................................................345Implementation.....................................................................................................................................345Types of errors ......................................................................................................................................345

Using the automatic error management .........................................................................................................346



Lesson 8.3. Email managementOverview ...............................................................................................................................................................348The POP3 and SMTP protocols: Principle ........................................................................................................348

Practical example .................................................................................................................................349Sending an email: the steps ..............................................................................................................................349

Opening an SMTP messaging program...............................................................................................349Preparing the email ..............................................................................................................................350Send the email......................................................................................................................................350Disconnect ............................................................................................................................................350

Other possibilities ...............................................................................................................................................350

Lesson 8.4. OOPConcepts ..............................................................................................................................................................352

The classes............................................................................................................................................352The objects............................................................................................................................................352The members ........................................................................................................................................352The methods .........................................................................................................................................352Concept of inheritance.........................................................................................................................352Constructor and Destructor .................................................................................................................352Data encapsulation ..............................................................................................................................353Creating an object-oriented program ..................................................................................................353Declaring a class...................................................................................................................................353Describing the methods.......................................................................................................................354Declaring and handling objects...........................................................................................................354

PART 9 - ADVANCED PROJECT MANAGEMENT

Lesson 9.1. DashboardOverview ...............................................................................................................................................................358

Example.................................................................................................................................................358The different elements of the dashboard ........................................................................................................358

The lists .................................................................................................................................................359The buttons ...........................................................................................................................................360The counters in relation with the Control Centers..............................................................................362

Configuring the dashboard ................................................................................................................................363



Lesson 9.2. SCMIntroduction .........................................................................................................................................................365SCM (Source Code Manager) .............................................................................................................................365

Principle of SCM ...................................................................................................................................365Creating the SCM database.................................................................................................................366Including a project in the SCM.............................................................................................................367Opening a project from the SCM .........................................................................................................370Configuring the SCM.............................................................................................................................370Checking out an element .....................................................................................................................372Modifying the checked-out element....................................................................................................373Checking in the checked-out element.................................................................................................373Synchronizing the project.....................................................................................................................374Off-line mode (or mobile mode) ...........................................................................................................375SCM administrator................................................................................................................................375

Lesson 9.3. Control CentersOverview ...............................................................................................................................................................377The Project Monitoring Center ...........................................................................................................................377Managing your time ............................................................................................................................................379The other Control Centers ..................................................................................................................................380

Lesson 9.4. Business rulesOverview ...............................................................................................................................................................382

Example.................................................................................................................................................382Application on a real example ...........................................................................................................................382

Creating a business rule ......................................................................................................................382

Lesson 9.5. Internal componentsOverview ...............................................................................................................................................................386

Teamwork..............................................................................................................................................386The databases accessed by several projects..................................................................................... 386The processes used in several projects..............................................................................................386The ability to distribute a feature or set of features ..........................................................................387Multi-product component.....................................................................................................................387

Step by step .........................................................................................................................................................387Step 1: Creating an internal component.............................................................................................387Step 2: Using the internal component ................................................................................................390

Lesson 9.6. Multi-configurationOverview ...............................................................................................................................................................394Creating a project configuration .......................................................................................................................394Managing the project configurations ................................................................................................................396Multiple generation ............................................................................................................................................396



Lesson 9.7. The debuggerOverview ...............................................................................................................................................................398Debugging a page ...............................................................................................................................................398

Starting the debugger...........................................................................................................................398Viewing the information in the debugger............................................................................................399

Trace window of the debugger ..........................................................................................................................400Debugging a project ...........................................................................................................................................401

Lesson 9.8. The performance profilerOverview ...............................................................................................................................................................403Using the performance profiler .........................................................................................................................403Optimizing a process with the performance profiler ......................................................................................404

Reading the result of the performance profiler..................................................................................404Choosing a process to optimize...........................................................................................................404Optimizing a process ............................................................................................................................404

Lesson 9.9. Import/ExportImporting elements ............................................................................................................................................407Exporting elements .............................................................................................................................................408Specific import operations .................................................................................................................................409

Importing a WinDev project..................................................................................................................409Importing an HTML page......................................................................................................................410

Lesson 9.10. UML and 3-tierWhat is the UML? ................................................................................................................................................412Diagrams managed by WebDev .......................................................................................................................412

Class diagram .......................................................................................................................................412Use case diagram.................................................................................................................................412Object diagram......................................................................................................................................412Component diagram.............................................................................................................................412Activity diagram.....................................................................................................................................412Sequence diagram ...............................................................................................................................412Collaboration diagram..........................................................................................................................412State-transition diagram ......................................................................................................................413Deployment diagram............................................................................................................................413

3-tier .....................................................................................................................................................................413What the 3-tier is? ................................................................................................................................413How do I implement the 3-tier? ...........................................................................................................414Handling the different layers ...............................................................................................................414

Lesson 9.11. Flexible modelingPrinciple ...............................................................................................................................................................416Operations ...........................................................................................................................................................416



Lesson 9.12. MultilingualWhat is a multilingual site? ...............................................................................................................................420Choosing the project languages ........................................................................................................................420

Opening the example ...........................................................................................................................420Configuring the project.........................................................................................................................420

Localizing the analysis .......................................................................................................................................422Localizing the project elements ........................................................................................................................424

How do I translate this information?...................................................................................................425Direct input of the translations............................................................................................................425Special cases ........................................................................................................................................426Translation with WDMSG and WDTRAD..............................................................................................427

Programming the change of language ............................................................................................................428Managing the Unicode and the specific character sets .................................................................................428

PART 10 - DEPLOYING SITES

Lesson 10.1. Deploying a dynamic siteOverview ...............................................................................................................................................................434Required configuration ......................................................................................................................................434

Installing the "WebDev Application Server - 10 connections" ...........................................................435Configuring the WebDev account for deployment..............................................................................435Creating a Windows user account.......................................................................................................436

Deploying your dynamic site .............................................................................................................................437Preparing the setup..............................................................................................................................437

Lesson 10.2. Remote managementOverview ...............................................................................................................................................................443Using WDAdminWeb180 ...................................................................................................................................444

Lesson 10.3. Site statisticsIntroduction .........................................................................................................................................................446Configuring the server ........................................................................................................................................446Using WDStatistic ...............................................................................................................................................447

Starting WDStatistic .............................................................................................................................447Setting ...................................................................................................................................................447

Lesson 10.4. WinDev Back OfficeOverview ...............................................................................................................................................................449

Conclusion


Introduction 17

INTRODUCTION

Preliminary points

Caution: this manual is a tutorial. You should consult the online help when using WebDev.The purpose of the tutorial is to help you discover WebDev, become familiar with the editors andteach you the concepts of WebDev.This manual does not cover all the features of WebDev.

You should plan on spending two days to follow this course and to learn WebDev: youll find it wellworth it! If you try to develop a WebDev site before following this course, you will loose time, and a lot morethan two days.

This course was designed so you can approach it in two different ways: either you follow all the detailed exercises in each lesson (recommended method). or, if you are in a hurry and already experienced, you can read through it without doing the

exercises, as all the exercises have screen shots. However, in order to quickly assimilate themain concepts, we recommend that you follow the course step by step.

WebDev evolves all the time, therefore the screen shots found in this guide may differ from theones found in your product.

Overview of the tutorial

The tutorial has been designed to progressively teach you how to use WebDev. By following thiscourse:

you will discover the main concepts explained informally; these are the concepts you mustlearn and understand.

you will also be asked to perform operations that illustrate the concepts just explained.

As you progress through the tutorial, if you want to take a closer look at a concept or if you want toget more details about a programming function, see the online help (directly accessible from theeditors).We remind you that most of the information found in this tutorial can be accessed from the onlinehelp.The size of a lesson is not necessarily proportional to its relevance, ...

Dont forget to also take a look at the examples supplied with WebDev: they are very instructive!

Tip

The Tutorial may have evolved since this document was published. Dont hesi-tate to check the electronic version of this tutorial (PDF file accessible directlyfrom the WebDev menu: on the "Home" pane, in the "Online help" group, expand"Tutorial" and select "Tutorial (PDF)").


18 Introduction

How do I access the online help?

The online help of WebDev enables you to get detailed information about the 2500 WLanguagefunctions. The online help also contains the help about the editors, controls, tips, ...The online help is available at any time in WebDev:In the code editor, a specific help is available for each function via the [F1] key.Each dialog box displayed by WebDev offers a "?" button allowing you to access the correspon-

ding help page.The editor help menu ("Help" option available on the "Home" pane, in the "Online help" group of

the WebDev menu) allows you to start the online help.

4 The help can be displayed: in a specific "help browser".

in an Internet browser if you have Internet access:


Introduction 19

To start the Internet online help from the product:1. On the "Home" pane, in the "Environment" group, expand "Options" and select "General options of WebDev".2. In the "Help" tab, select:

the access mode to the help database (local or Internet help)the content of the help: common help or help for the product being used.

Legend of symbols

Not

es

The online help of WinDev, WebDev and WinDev Mobile is available on Internetfrom any computer equipped with an Internet access, without the product beingnecessarily installed. This help is updated on a regular basis.Each Web user can add comments about the documentation pages: personalnotes, examples, links, ...

This symbol indicates the duration of the lesson. Please note that the actual time mayvary according to your level of experience.

An example is available to complement the lesson.

This symbol introduces a "Tip", we advise you to read the associated text.

This symbol introduces a "Warning", reading the associated text is extremely important.

This symbol introduces a "Note", we advise you to read the associated text.


20 Introduction

If you are familiar with WebDev 17 ...

If you are familiar with WebDev, following this course will do no harm: its a good opportunity to"review" the features of WebDev!

What is WebDev used for?

WebDev is an IDE (Integrated Development Environment). It enables you to develop Internet andIntranet sites in many fields:

E-commerce (sales, rentals, bookings, ...) Multimedia (description of companies, "showroom" sites, ...) Intranet (logins, secured accesses, ...) ...

WebDev is a complete development environment that includes all the tools required for developingand maintaining Internet or Intranet sites.Unlike other programming languages, you dont need to find and add modules to be able todesign, test and online (or "deploy") a site.The WebDev 5GL (5th Generation Language), the WLanguage, will surprise you by its simplicity: afew hours are all you need to get the hang of it, a week is usually all it takes to fully master itspotential!No more programming hassle, WLanguage is available in English and in French!

This symbol introduces a feature specific to Internet, we advise you to read the associa-ted text.

Intended for developers who are already familiar with the earlier versions of WebDev.


PART 1

Discovering WebDev



Part 1: Discovering WebDev 23

LESSON 1.1. DISCOVER WEBDEV

This lesson will teach you the following concepts ...

Starting WebDev

Estimated time: 5 min


24 Part 1: Discovering WebDev

Overview

WebDev is an IDE (Integrated Development Environment) targeted for Internet/Intranet develop-ment: e-commerce, multimedia, ... The developed sites can provide access to the information stored in the databases.WebDev enables you to create:static Internet/Intranet sites. These sites manage data that does not change (corporate sites,

sites available on a CD-ROM, ...). dynamic Internet/Intranet sites, that manage data. The WebDev sites access all the databases,

relational or not, available on the market. All the databases are supported.In this tutorial, you will learn how to create your sites (with or without database) and how toimprove them by using the features proposed by WebDev.

Starting WebDev

4 Start WebDev 18 (if not already done).4If youve never started WebDev 18 before, a wizard comes up. This wizard allows you:

If you own an older version of WebDev, to retrieve existing configurations. If you are a new user, configure your environment. This way you can choose the screen confi-

guration to use and configure the Control Centers (well see the Control Centers in moredetails in Control Centers, page 376).

4If youd previously started WebDev 18, identify yourself if needed. The development environ-ment starts. The home window is opened.

Lets stop for a minute on the WebDev development environment.



Development environment

The editorThe development environment of WebDev includes a specific interface and several editorsallowing you to create the different elements of your applications.For example, the page editor is used to create pages, the report editor is used to create reports, ...All the editors use the same environment:

1. Menu of editors, displayed in the format of a ribbon (well see how to use it in the next para-graph).

2. Current editor (here, the page editor). This space allows you to view the element currently crea-ted or modified in WYSIWYG (What You See Is What You Get).

3. Panes. The WebDev interface includes several panes allowing you to quickly access differenttypes of information. Some examples:The "Project explorer" pane (displayed on the right) is used to list all the project elements by cate-

gory.The "Wizards, Examples and Components" pane (at the bottom) is used to quickly access the full

examples, sample pages, controls that can easily be included in your sites.If necessary, these panes can be hidden by pressing [CTRL] + [W].

4. Bar of opened documents. This bar is used to quickly view all the opened elements. A simpleclick on the button corresponding to the element displays it in its own editor.



The menu bar (ribbon) in detailsThe menu bar of WebDev is presented like a ribbon. This ribbon includes panes in which theoptions of the editors are grouped.We are going to take a closer look at the main elements of the ribbon, as well as how we will inte-ract with it in this tutorial.

The different ribbon elementsThe ribbon includes three areas:the button area, on the left. the pane area, at the top. the option area.Lets take a closer look at these areas.

The button areaThe button area groups the quick access buttons. These buttons are used toperform the most usual operations, common to all the editors: save, open,create, ...The 3 buttons at the top of this area are also specific:The 18 logo is used to display the "About" window and the custom-menus.The 2 other icons are used to restore the toolbars and the menus found inthe earlier versions.

The pane area

The ribbon panes are used to access the options of the different editors. Several types of panesare available:the current pane: The pane tab appears in light gray and an orange line is displayed at the top of

the tab.the popup panes, specific to the current element: The name of the pane is displayed in blue. the available panes: The name of the pane appears in white.

The option area



The options displayed in the ribbon differ according to the selected pane. Several types of optionsare available:Options to checkButtons to clickButton with arrow used to expand the options. Two types of buttons with arrow are available:

the buttons with arrow used to expand a menu the buttons with arrow used to expand a menu (click on the arrow) or to perform a default

action (click on the button icon).The options are organized by group. Each group of options has name and it can have a group but-ton . This button is used to perform a specific action according to the current group: displayingthe description of the current element, displaying the help, ...

In this tutorial, to identify a menu option, we shall be talking about panes, groups and options.For example:To display the help, on the "Home" pane, in the "Online help" group, click "Help".



LESSON 1.2. MY FIRST PAGE

This lesson will teach you the following concepts ...

How do I create a page How do I enter and display information What are the server code and the browser code used for

Estimated time: 40 min



Overview

To start working with WebDev, we are going to create pages.

These examples will enable you to understand how Internet sites operate and to get familiar withthe programming concepts used in WebDev. More complex topics will be presented later.The lessons found in this first part will allow you to:

create simple pages, handle strings, numeric values, currencies, handle the dates and times.

Opening the project

4Start WebDev 18 (if not already done). Close (if necessary) the current project to display the home window.

4Open the project named "WW_My_First_Pages". To do so, in the home window, click "Tutorial" and select the project named "My first pages (Exercise)". Tip: if the home window is not displayed, on the "Home" pane, in the "Online help" group, expand "Tutorial" and select "My first pages (Exercise)".

Not

e Pages are used to display or enter information on the screen. The Web user canact on the pages via controls, buttons, ...

Impo

rtan

t

In this part, we will focus on the creation of simple pages. The"WW_My_First_Pages" project is an empty project that has already been created.The creation of a project will be presented in another lesson.

Not

e A corrected project is available. This project contains the various pages created inthis lesson. To open the corrected project, on the "Home" pane, in the "Onlinehelp" group, expand "Tutorial" and select "My first pages (Answer)".



My first page: entering information

OverviewYou are going to create the following page:

This page allows the Web user to identify himself and displays the data entered.You may think this is a pretty basic idea, ... but we recommend that you create this page. You maywell be surprised by how intuitive and easy it is to use the WebDev editor.Furthermore, this page will teach you principles that are fundamental for the rest of this tutorial.

Creating the first page

4 To create the page:1. Click among the quick access buttons of the WebDev menu:

2. A window shaped like a wheel is displayed. This window is used to create all the elements that can be associated with a project.



3. Click "Page". The wizard for page creation is displayed.

4. Select "Page" on the left of the window, then the "PAGETPL_Simple" template in the list of project templates.

5. Validate (green button at the bottom of the screen). The page is automatically created in the editor.

4Were going to enter the pages main characteristics: its name and the title that will be dis-played in the browser title bar (or the tab).Double click the page that was just created. The pages description window opens on the "General" tab. The page name offered by default is "PAGE_NoName1".

Not

e Templates are used to define the look of the pages. We will revisit this conceptlater in this tutorial.

Not

e

Study the name of the page proposed by WinDev: this name starts with the let-ters "PAGE_". This prefix is automatically added because the project uses a pro-gramming charter.The programming charter is used to define a prefix for each type of object,allowing you to quickly identify the element handled:a page starts with PAGE,a button starts with BTN, etc.If you dont want to use this charter, all you have to do is disable it: on the "Pro-ject" pane, in the "Other actions" group, expand "Charter" and uncheck "Use thecharter".



4 Enter the following information:

1. The name of the page: replace "PAGE_NoName1" by "PAGE_Identification". This name will correspond to the name used to save the page on disk (with the "WWH" exten-sion) in the directory of the project sources. This name will also be used to handle the page by programming.2. The title of the page: "Hello, identify yourself". This title is displayed in the title bar of the browser. This title is used to inform the Web user about the features of the page.

4 Validate. The name of the page is displayed in the title bar of WebDev.

4 To save the page, click among the quick access buttons of the WebDev menu. By default: the page title corresponds to the title defined in the description window, the pages name corresponds to the name defined in the description window, the proposed location corresponds to the project directory.

4 Validate by clicking the green button.



Input and display of the value enteredTo manage the input and display of the value entered, youre going to create:a control where the user will enter his or her name. Therefore, this type of control is an "edit con-

trol".a button used to display the name entered.

4 To create the edit control:1. On the "Creation" pane, in the "Usual controls" group, expand "Edit" (click the arrow)

Documents

Tutorial Webdev 18