Brochure of new features: New WEBDEV features
WEBDEV 26: Benefit from the 170 common new features of version 26
WEBDEV 26 benefits from most of the 170 new common features of version 26.
WEBDEV 26 most notably benefits from the new Smart controls, HTML programming, new environment, new Map control, simplified style sheets, asynchronous HFSQL queries...
And in addition to all these new features, WEBDEV 26 benefits from new features specific to the Web to be discovered in the following pages.
4 Smart controls for WEBDEV
4 new Smart controls are available in WEBDEV 26:
- Password creation help
- Google reCaptcha
- Bank-type PIN code input
- Context menu button.
New Smart control: Password creation help
The "Password creation help" Smart control displays the list of criteria that the password must meet, and indicates which criteria have not been met.
New Smart control: Google reCaptcha
The "Google Captcha" Smart control allows you to integrate a Google reCaptcha with ease.
Captchas are used to prevent spam robots from using a website: denial of service, brute-force attacks, or simple data mining...
New Smart control: Context Menu Button
The "Context Menu Button" Smart control (three vertical dots) opens a ready-to-use context menu. Clicking on the button expands a popup menu.
New Smart control: PIN code edit
The "PIN code input" Smart control is available in WEBDEV.
Numbers are automatically displayed in random order.
An Image Editor in your websites
By using the new Image Editor control in you websites, you will allow users to create and edit images or photos.
The control, icon bars and available actions have been designed for use on mobile devices as well!
Image Editor control: The features your users expect
The features of the new Image Editor control respond to the needs of Web users:
- text insertion
- line, arrow
- basic shapes: circle, rectangle...
Users can paste an image in the control, or select a file from the disk.
They will then be able to save changes.
Navigation Bar control: Also available in standard mode (zoning)
In earlier versions of WEBDEV, the Navigation Bar control was only available in Responsive Web Design mode (RWD).
In version 26, this control is available in standard mode (Zoning) and is therefore also available in the Layouts. In Layout mode, you can define how the bar will be displayed (expanded or collapsed) in each layout.
Static control: Automatic ellipsis
The Static control in WEBDEV 26 now uses an ellipsis: the text is truncated if it overflows the control, and an ellipsis automatically appears at the end.
Check Box control: CSS style
Check Box controls now support CSS styles.
There are many more styling possibilities.
Layout control: Minimum height per cell
Reminder: The Layout control adapts the page layout in real time, automatically removing any "gaps" created after a control is removed.
The size of a cell in a Layout control varies according to its content. With a small content, cells would become too small.
The Layout control now allows you to set a minimum cell height: this is useful for clean layouts.
Image control: WEBP format supported
The Image control already supports standard formats: JPG, GIF, PCD, PCX, PNG, PSD, TGA, TIF, BMP, EMF, WMF, ICO, ICW, CUR, PDF, SVG, WDPIC...
In version 26, the WEBP format, mainly used for the Web, is also supported.
Cell control: Procedure local to the cell
The Cell control can now contain local (Server or Browser) procedures.
The scope of these procedures is limited to the cell.
This makes it possible to better encapsulate the processes of this cell, rather than defining them at the page level.
See also glocal variables and procedures.
Practical font size input
A small, but essential new feature: It is now possible to enter a font size and unit in the same control.
You no longer need to enter the size, change to another control and then enter the unit.
Easily view and select skins
In version 26, the thumbnails in the skin selection window accurately represent how the skin will look when used with the controls.
You will get a better idea of the result of the selected skin.
Page settings on mobile: New user-friendly UI
The page settings UI for mobile has been revised: it's much more intuitive, and that changes everything!
Style editing: Real-time preview
When you modify a control style in the 7-tab window, these changes are displayed directly in the page.
CSS style editing: Ability to paste a CSS block
You can now paste CSS blocks in a single operation when editing CSS styles:
- CSS elements are automatically transformed into properties suited for 7-tab windows.
- elements for which there is no property in the 7-tab windows are also taken into account and automatically inserted in the "custom input" section.
Page editor: 15 other improvements
Among the other new features of the editor, you will find:
- "Borders" option: it also displays the borders of zoning areas. No need to switch between the "Page/Zoning" panes
- Tooltip: it indicates if the selected control is different from the control being hovered over
- Easier alignment of numeric or currency values
- New options in the popup menu of a control, to set the visibility of this control by layout (same as RWD)
- If a multiple selection contains non-moveable controls from templates, you can still move the rest of the selected controls
- Deployment of a site in the Cloud with 1 click
- If the page and browser background colors are identical, the page frame is represented with a dotted line
- Editor: images on pages are automatically updated if they have been edited with an external tool
- Easier editing of cells with relative positioning
- Better management of 4K screens in edit mode
- Improved editing of Layout controls
- Import fonts: you can use fonts from the Google Fonts server, so you don't have to copy them to your source locations and servers
- RWD: the size of a supercontrol adapts to all the slices when applying refactoring options
- You can now select colors in the palette editor using a color dropper
- In version 26, you can dissociate CSS styles with one click, without leaving the style editor.
the returned HTML is readable!
WEBDEV automatically generates the HTML code of WEBDEV pages.
For aesthetic purposes, the HTML page returned by the WEBDEV 26 Application Server can now be formatted (with indentation).
2 New skins
2 new skins are provided in version 26: Jupiter and Suki.
Use these skins for your sites as you like!
Standard mode (Zoning): Positioning TreeView
In version 26, you can view the positioning tree of the controls in a page.
This TreeView allows you to understand how the browser will position the controls.
Standard mode (Zoning): Hovering over a control shows the layout box that contains it
WEBDEV uses virtual layout boxes to automatically manage the positioning of each control or group of controls
controls. At runtime, layout boxes "push" the other controls/boxes.
WEBDEV 26 allows you to view these virtual layout boxes in the editor and makes everything clear!
For example, when you resize a control, you can see the implications this may have on the positioning of other controls in the page. This will allow you to better understand the shifts that can occur when a control is moved or resized by a single pixel!
If a layout box is not positioned the way you want, simply create and position a cell and place the desired controls in it.
Example of positioning defined with layout boxes
The example illustrates a problem that occurs from time to time: at runtime, a control appears at an unexpected position. This problem can now be easily fixed by making the layout boxes visible.
You create 2 buttons (Add and Delete) next to a control that can be extended vertically.
Surprise: at runtime, the 2nd button is displayed below the control!
Now, using the new feature from version 26, you can view the layout boxes that contain these controls
By viewing these boxes you can easily identify the cause of the problem: as the control became larger, the top box pushed the bottom box, which contains the Delete button!
So we create a "cell" (in green) and we place the 2 buttons inside it. This modification automatically triggers a new calculation of the boxes.
Thus, at runtime, using the cell and the new boxes, the 2 buttons remain correctly positioned one above the other
Nowadays, most applications and websites allow you to print the content of their pages.
However, the print layout is often different from the page displayed
- a black background will be removed so as to save ink, and white text will become black
- ad banners will not be printed
- alignment will be optimized to get an ideal print layout
In version 26, WEBDEV makes it easy to create print-ready pages from a web page.
WEBDEV 26 uses the "Media query" mechanism supported by browsers to automatically switch to the printable page.
Everything is automatic with WEBDEV 26.
New layout: Print
WEBDEV 26 offers an easy way to define layouts: simply create a new Layout for the page.
Thus the page and its content are not duplicated: easier maintenance, high-quality sites...
A new layout is introduced in version 26: Print layout.
In this layout, you can simply:
- hide unwanted controls
- reposition the desired controls
- optimize the colors for printing.
The layout of the original page is not changed.
If the original page is changed, depending on your choice, the changes can be automatically applied (or not) to the print layout.
You can dissociate the desired properties of each control.
No programming required!
Layout: New operating mode
WEBDEV 26 allows you to create layouts in no time.
Now you can easily modify the parameters of a set of controls: for example, remove a black background, or change the font color from white to black.
Powerful style sheet management
In version 26, WEBDEV simplifies the creation and management of style sheets.
In version 26, style sheets are completely independent and can be shared between several projects, locally or via the SCM.
Each style sheet has a name.
A project can use multiple style sheets.
And the same style sheet can be used in several projects.
Of course, when a style from the style sheet changes, these changes are automatically applied to all the pages that use the style sheet.
For more details, see Importing styles from a WordPress theme with WEBDEV
Select styles: A refined operating mode
In the 7-tab window, you can now choose which style sheets are shown in the style presentation window.
This allows you to view only the styles you actually use.
The filter allows for multiple selection: you can select various style sheets.
Automatically import styles and images from a Wordpress template
When importing styles from a Wordpress Template, WEBDEV 26 analyzes the content of the template, extracts and generates the styles used. WEBDEV also imports images from pages in the template.
The import creates the style sheet based on the template, and allows the import of images used in the examples provided with the template.
Please refer to the license of each template to make sure you can import these elements.
You can import multiple templates into the same project: each style sheet remains independent of the others.
Creation of a style sheet
When the import is validated, a style sheet containing all the styles of the template is created.
You can then use these styles to create your WEBDEV pages.
Styles are created for the following controls:
An example page containing all the imported styles is created: you can view the style in a real use case.
The TypeScript language is more and more widely used.
In version 26, you can write (or paste) TypeScript code in WEBDEV pages.
TypeScript compilation errors appear in the WEBDEV project's list of compilation errors.
TypeScript: Examples of use
You can use TypeScript code in different ways:
- Copy/paste TypeScript code
- Write TypeScript code
This open approach brings many advantages.
Looper: Select mode supported
The selection of rows from Looper controls is now automatically managed.
This feature greatly simplifies programming and offers rich functionalities:
- hover bar
- selection bar
- hover bar style
- selection bar style
- return selected row number The expected UX behavior is now automatic.
In version 26, the WEBDEV Application Server includes a Websocket server as standard.
A socket use case
Let's suppose you want to display stock levels in real time on a site.
You have 2 main possibilities to program this feature:
1 - Set up a timer in the page that calls the server at regular intervals to read the stock value of a given article, and display this value if it has changed.
2 - Use a Websocket: if the stock changes, and only in this case, the server sends the new value to the page.
In the first case, with a timer, a large number of requests will be sent to the server. This, multiplied by the number of web users, will end up creating a lot of pointless traffic...
This can cause a huge server load and unnecessary bandwidth consumption.
In the second case, with WebSockets, there will be communication only when the value of the stock changes: this is clearly a better option.
New events are introduced to program Webservices in server code.
- Connection of a new client
- Receiving data from a client
- Disconnection of a client.
A "client" is, for example, a session of a web user.
New WLanguage functions have also been introduced.
To write to the client, simply use the new WebSocketSend
The new websocketClient
WLanguage type contains information about the connected client: IP, ...
The new WebSocketListUser
function returns an array containing a list of all connected clients.
The following elements can trigger the sending of a WebSocket: a trigger, a data modification detected by HTrack
, a WebSocket sent to another server, the presence of a new file on the disk, or a trigger in the new GlobalService event executed on the server in a loop.
By using WebSockets, you limit the web server load.
A popup can be an independent page
A Popup control can now be an independent, easy-to-reuse page.
PopupDisplay(MyPage) is now a valid syntax!
The Popup control no longer has to be saved in the calling page.
Temporary popup: Closed when the user clicks elsewhere
For web users, a common way to close a popup is to simply click outside the Popup (or press Esc).
In version 26, this behavior is available as standard.
You can find it in the 7-tab window, or by programming, with the popupDiscardable parameter of the PopupDisplay
Select elements easily in the project explorer
A new element is added to the list in the project explorer: Popups.
It is now easy to find and select your Popups.
Quick Popup creation
Popups can now be created quickly via the drop-down menu that contains the list of popups in the page.
- The PopupClose function is now available in server code. This simplifies the code.
- In edit mode, Popups now have their own close button. This allows you, for example, to open several Popups simultaneously..
Webification made easier and easier
Transforming your existing WINDEV applications (or parts of applications) into websites is easier than ever before.
The new environment with split view allows you to edit windows and pages at the same time, which makes everything easier.
The migration wizard helps you even more during the webification process.
Dissociation of control size and position
In Responsive mode, you can quickly dissociate the size and position of a control from the main resolution slice, via the context menu.
It is no longer necessary to repeat this operation in each slice.
Chart in WEBDEV: New automatic time scale
In version 26, WEBDEV offers an automatic time scale for times in charts.
The data is positioned according to the time scale.
Everything is automatically managed.
The SaaS site has been revamped to meet today's web fashion demands!
SPA: Easy programming
The improvements made in version 26 allow you to develop Single Page Applications (SPA) more easily:
- new features of Popups
- synchronization of global variables during Ajax calls
- selection in looper controls
- Websocket server
- simultaneous display of the different layers of a cell/page
Pin to Pinterest
You can set images to be pinned in Pinterest.
Version 26 includes a button with all the necessary code.
New process in browser code: change page size
The "Change page size" event allows running a process in Browser code when the user resizes the browser.
This makes it possible to:
- change font sizes,
- modify controls by programming
- change or resize an image
WLanguage function: SelectColor in browser code
New Buffer type in browser
The Buffer type is available in Browser code.
This type makes it possible to use binary data.
20 new browser WLanguage functions
Delete cookies by programming
The new CookieDelete
WLanguage function allows you to delete cookies!
Note that this function is available both in Server and Browser code.
Server code: 55 new functions
55 new WLanguage functions are available in Server code:
Use via HTML pages: map your Active WEBDEV Page with a third-party page
Bootstrap, Angular, React, Vue.JS, etc. are some of the most widely used frameworks used to create pages.
In version 26, you can easily use pages created with these frameworks in a WEBDEV site.
You can thus benefit from both the power of the WEBDEV Application Server and from your experience with these frameworks.
WLanguage communicates with the code that uses these frameworks via procedure calls.
In the Active WEBDEV Page, you can use Browser and Server procedures. You can call these WLanguage procedures from the JS code of the HTML page that uses the third-party framework.
This means you can always take advantage of the power of WLanguage on the Application Server.
You can use your existing elements.
A simple operating mode
The operating mode is simple:
- Create an Active WEBDEV Page without interface, and write the WLanguage code in this page: Browser and Server procedures.
- In the HTML page created with the third-party framework (Bootstrap, etc.), integrate a tag of the following type
- In the JS code of this third-party page, call the procedures written in WLanguage.
Ajax synchronized variables
Variables automatically synchronized between Server and Browser are managed during Ajax calls.
AWP and Ajax call: Specific initialization
In AWP mode, each Ajax call reloads the page on the server, and executes the page initialization event (Declarations of the global variables and Page initialization).
In version 26, you can determine whether the page has already been loaded, therefore not re-running some initializations.
The function is called AJAXCallInProgress
IF AJAXCallInProgress() THEN
//Ajax call, the page has already been loaded for the first time
//=> no action
//The page is loaded for the first time
//=> fill the charts displayed in the page
Assigning values to JSON variables: 2 X faster
The assignment of content to JSON variables is now twice as fast.
In some cases it is even five times as fast!
Powerful new features
OCR and Websocket functions are available in WEBDEV for Linux. These powerful features are particularly useful.
51 new WLanguage functions on Linux
51 new functions are available Linux:
New syntax in PHP
The WLanguage syntax FOR EACH STRING with position and counter is now supported in PHP.
JSON serialization in PHP
JSON serialization is available in PHP.
5 new WLanguage functions for PHP
5 new functions are available in PHP:
Account management and server administration: All in one tool
In version 26, there is only one server administration tool: WDCompte has been merged into the Hosting Control Center.
Managing accounts is now much easier!
Navigation in the administrator is more fluid.
Server sites : Easy access
When entering the address of a WEBDEV application server, a new option allows you to display all the sites available on the server, including the administration sites.
This option should be used only in secure environments.
For security reasons, the standard method (full path) is still available.
Installing the application server: Simplification
The standard setup mode with account management is still available.
However, a new simplified setup mode that manages only one account has been introduced.
This simplified mode... simplifies the administration and deployment of a server within a small private structure.
Rest webservices editor
In version 26, the REST Webservices editor has been revamped: Cleaner UI, ability to sort entry points, creation of entry points from a set of procedures...
Webservice parameter: Automatic JSON type
In version 26, Webservice procedures directly accept JSON variables.
JSON elements are automatically extracted from the content of the request.
2x faster application server: 100% faster
In version 26, the Application Server uses FastCGI and is on average twice as fast as in version 25.
Of course, speed may vary depending on the code of the site, but the difference is mind-blowing when it comes to simultaneous accesses to the server.
Session HeartBeat: More efficient than timeouts when the user closes the browser
Each web user's session has a timeout: the session will be automatically closed if the user remains inactive and the timeout is reached.
Even if the user has closed the browser, resources are consumed on the server until the timeout is reached. Too bad!
The HeartBeat feature is an automatic process on the browser that regularly sends information to the server (e.g. every 5 minutes) to indicate that the browser is open.
Once the user has closed the browser, the server no longer receives this HeartBeat and can therefore close the session immediately, without waiting for the timeout.
The HeartBeat is usually 5 minutes, while timeouts often take tens of minutes.
If the timeout is set to 60 minutes, the server saves 55 minutes per closed browser, which is significant.
Security: Refuse to respond to HTTP requests or server code triggers (Prologue function)
Reminder: the browser sends HTTP (or HTTPS) requests to the server to get the page, images, or to trigger the execution of an Ajax process, etc.,...
In some cases, the server may have to refuse to execute incoming HTTP requests:
- denial-of-service attack
- security against suspicious requests
- filter criteria
In version 26, the new SessionPrologue
WLanguage function allows you to specify a procedure that will be called each time an HTTP (or HTTPS) request is received.
This procedure will check the HTTP request (IP, content, etc.) and will decide whether or not to execute it.
This procedure is coded by the author of the site.
64-bit test application server
The application server for tests and access to less than 10 simultaneous connections is now also available in 64-bit.
Docker image of a site: Better configuration
In the generated Docker image, the root of the website points to the site included in the image (_web directory).
By simply entering the address (IP or DNS name) of the deployed docker image, the user accesses the website directly.
No need to enter the full address of the site on the server.
3X faster deployment
The deployment of large sites has been optimized, and is now three times faster.
In version 26, you can deploy sites via a new action in the Continuous Integration: "Site deployment".
And numerous other features
Version 26 offers many other new features that you will discover once you have ordered and received your product...
Click [Add] to post a comment