Brochure of new features: New WEBDEV features
Benefit from the 180 new features of version 23
WEBDEV benefits from the common new features of version 23.
WEBDEV 23 benefits from the evolution of development environment such as the new Layout control, the evolutions of WLanguage, HFSQL, and the compatibility with WINDEV and WINDEV Mobile.
Principle of Image Gallery control
WEBDEV proposes the new "Image gallery" control in version 23.
This control, based on a Looper control, is used to manage the display of several images without programming.
The images can have differents sizes and proportions: the Image Gallery control performs a harmonious display.
The navigation between images is automatically managed.
The control displays the images found in a directory, coming from a database or defined by programming.
This control allows you to save weeks of development.
Features proposed by the image gallery
An image is displayed in a cell.
In this cell, other controls can be inserted into the image and/or stacked to the image: static, button, ...
The other controls can be displayed permanently or when hovering the image.
When enlarging the browser, the number of images is increased or the size of images is increased, depending on the choice specified in the 7-tab window.
The maximum number of rows or columns can be defined.
The image size can be limited by minimum and/or maximum dimensions.
The presentation is always harmonious.
Gallery in rows
A gallery can be organized in rows or in columns.
A gallery in rows proposes the same height for all images found on the same row.
The rows do not necessarily have the same height: this height is automatically defined according to the images found on the row.
The gallery in rows automatically adapts the width of each cell to respect the image proportions.
Gallery in rows
Gallery in columns
A gallery in columns (like in the example on the left page) proposes the same width for each image of the same column.
The gallery in columns automatically adapts the height of each cell to respect the image proportions.
Three options are proposed when the browser is enlarged:
- the number of columns remains fixed, the size of images remains fixed,
- the number of columns remains fixed but the size of images is increased,
- the size of images remains fixed but the number of columns is increased.
The gallery is responsive
When a gallery is created in a responsive page, the gallery is responsive!
For example, the size of cells and the number of columns can be defined for each blade.
In mobile blade, the display in rollover will be replaced by a permanent display (because the rollover does not exist on a phone!)
How to create the gallery?
A gallery is a looper of "Gallery" type.
All you have to do is choose this type in the ribbon!
This cell is configured by default but everything can be modified and configured.
Gallery: where are the images stored?
The images found in a gallery are stored wherever you want!
The images can be found in a HFSQL database, in an external database, in a specific directory, one one or more remote storage servers (CDN, ...).
The same image can be stored with different sizes on different servers.
For example, the images used in the gallery are stored on the Web server of site while the high-definition images are hosted by a hosting company (that will eventually replicate the images on sites distributed all over the world to be near the Web users).
Navigation in the gallery
The navigation in the gallery is automatically managed.
By default, a pager or browser buttons are automatically found at the bottom of viewing page.
The high-definition viewer is also automatic.
Navigation in high-definition images (popup)
One of the modes of image gallery is the viewer, that allows you to automatically navigate between enlarged images ("details" or "high definition" mode).
Clicking a gallery image is used to enlarge it (as well as the controls found in the cell) and to display the "Next" and "Previous" arrows on the sides, to navigate from image to image.
The popup window can be customized: icons, arrays, additional icons or texts, size, processes, ...
Layout control in WEBDEV
The Layout control is also available in WEBDEV.
It is used to simplify the complex layouts.
Very useful: The orientation of Layout control can be changed by blade. Example: horizontal on PC, vertical on phone!
Each group of controls in a Layout area (materialized in red) can be made visible or invisible; the areas found around it are shifted so that there is no hole
Table: automatic adaptation in Responsive
In version 23, the behavior of Table control is adapted to Responsive mode.
When the page width is not sufficient to display all the table columns, the table representation changes on the screen. No programming is required.
The presentation switches to "vertical" mode when necessary (see screen shot below).
Everything is automatic.
This case occurs when a page is displayed on a phone.
Tables: titles of columns containing an Image control and a Link control
In version 23, the titles of columns can contain links and/or images.
Titles of columns containing a link
Tables and Loopes: easy edit
In version 23, the description window of Table and Looper controls evolves for better ease of use and efficiency.
Creating columns in the tables is simplified.
Creating attributes in the loopers is also simplified via a more intuitive representation.
Dynamic homothetic image
In version 23, the dynamic images can be homothetic images.
In this mode, the image that is passed by its link or by its path will respect the homothety inside the control defined in the editor.
The other page controls will not be moved.
Input: password preview (eye)
In version 23, the "possible view of password" property becomes available for the edit controls.
An eye is displayed at the end of input area.
A click on the eye allows the Web user to see the password in clear.
This is useful to avoid the typos.
A click on the eye allows you to see the password typed (if nobody is watching you!)
Customize the appointment styles in CSS
In version 23, you have the ability to define a CSS style for the appointments in the Organizer and Scheduler controls.
All the CSS features are accessible.
The definition of CSS styles is performed in the "7-tab" window.
Styled appointments with styles
Organizer/Scheduler: various improvements
in an Organizer control or in a Scheduler control, a "Delete" box appears on the left of appointment when it is hovered by the mouse cursor. This box is used to delete the appointment.
In version 23, you have the ability to customize the image of "Delete" box.
You also also have the ability to choose its position in the appointment (top right, bottom, etc.).
Edit control: caption above
In version 23, you have the ability to create edit controls with the control caption positioned above the input area (and not necessarily on the left).
This layout is very useful to save space in width in a page intended to be displayed on a phone.
Edit control: the indication text switches to caption during the input
The edit control can contain an indication text.
This indication text indicates the content to type, the format to use...
In version 23, when the Web user types in the control, the indication text can become a caption above the input area.
Therefore, the Web user can always read this indication during the input.
The edit control when idle
... during the input: the indication text is reduced and it is positioned above the text typed
Refactoring in the editor: extract the caption from an edit control
In version 23, the page editor proposes a new feature for control refactoring: creating 2 controls from a single edit control.
The edit control will be divided into 2 controls:
- static control,
- edit control (without caption).
The Static control contains the same text as the former caption found in the edit control but with the same properties: multilingual rich text, style, ...
The edit control keeps its properties but the caption is erased from the control (the caption of the edit control is empty).
This dissociation allows you to position the caption anywhere (and not necessarily on the left or above!)
Merging captions into Rich Text Area (RTA)
Version 23 allows you to merge two or more captions into a single one.
This feature is available for the "standard" caption and for the rich text areas.
This is used to switch older pages into modern technology.Three captions have been merged into a single one: It's easier to use
High-quality animated progress bars
In version 23, WEBDEV proposes image sheets that are used to defined animated images.
These images can be used in an Image control or in a Button control.
These images are used to create endless progress bar or hourglasses, with a definition greater than Gifs.
With CSS, cells have style (cascading)
In version 23, all the container controls (especially the Cell control) accept a CSS style.
Even more interesting, the container properties can be automatically assigned to each element found in a container.
To do so, the style characteristic must be left empty ("undefined" choice).
For example, if no text color is specified for an element found in the cell, the text color specified in its parent container will be assigned to it.
Inserting HTML tables into a rich text
In version 23, an HTML table can be inserted into a Rich Text Area.
This allows you to benefit from the positioning in stream mode.
The HTML tables are responsive
The HTML Table control is used to display tables in a page.
The HTML Table control can also simplify the formatting by positioning the page elements in a table.
In version 23, the behavior of the HTML Table control is adapted to Responsive mode.
The HTML Table control adapts to the width of the page where the navigation is performed.
The display remains consistent regardless of the device: mobile, tablet or desktop.
The widths of columns remain proportional to the reference layout.
If the width is reduced, the height is increased in order for the content to be displayed.
HTML table displayed on PC
The same HTML table displayed on phone
Simplified edit of HTML tables: selection
Using HTML tables is simplified in version 23.
Selecting an HTML table is performed via a simple click.
Additional handles appear around the objects.
The changes of size are performed via the mouse, for the HTML table itself and/or for its cells.
When resizing the HTML table or cells with the handles, an algorithm checks the consistence of HTML table and avoids the appearance of holes between the cells.
Simplified edit of HTML tables: non-modal 7-tab window
The 7-tab window for defining the HTML Table control is a non-modal window.
This allows you to directly view the effect of each parameter modification.
You also have the ability to modify the same property on several HTML tables at the same time.
Simplified edit of HTML tables: modifier
In version 23, the HTML tables can also be used via the modifier.
The modifier acts on the HTML table itself and/or on its cells.
Enhance your HTML tables: margins and spaces
In version 23, you have the ability to specify inside and outside margins for the cells found in HTML tables.
These margins are automatically applied to all the cells found in the HTML table.
Margins and spaces in the HTML tables for an improved layout
The outside margin is used to evenly space all the cells found in the HTML table, offering new layout possibilities.
The inside margin is used to reserve a space (turning white) between the cell content and the borders.
Moving HTML tables by coordinates
Some computer graphics position (move) the page elements by typing the positioning coordinates in the page directly.
This allows for a very precise positioning.
In version 23, an HTML table can be positioned by coordinates.
The coordinates can be typed in the status bar directly.
You also have the ability to perform a move to the pixel with the arrow keys on the keyboard.
Pinterest comes in addition to Facebook, Twitter,...
WEBDEV proposes a Social Network control that is used to interact with the main social networks on Internet.
When creating the control, all you have to do is choose a social network and the type of action to perform ("I like" on Facebook, Tweet on Twitter, Share on Linkedin, etc.), and specify the action parameters (if necessary).
WEBDEV automatically creates a button with the relevant picto and link.
In version 23, WEBDEV proposes an interaction with the Pinterest network via a new action "subscribe to a Pinterest profile".
The Web user can subscribe to a Pinterest profile in a single click.
New action: display the profile
In version 23, a new action appears in the Social Network control: "Display the profile page".
This is a generic caption for an action whose name differs according to the social network.
This action is used for example to dis play the wall of a person on Facebook, the Twitter profile, the Pinterest table, etc.
New chart: composite chart
In version 23, the composite charts have been added to the list of existing charts.
The composite chart is an association between several types of charts.
For example, you have the ability to combine a bar chart with a line chart, several line charts with a bar chart, a candlestick chart with an area chart, etc.
Smoother charts: sub-sampling
The charts in version 23 propose a sub-sampling.
When the amount of data to display is too important to be legible, a sampling algorithm limits the data to display while giving a faithful rendering to the initial chart. This operation is performed on the browser, allowing the chart to adapt immediately, without having to go back to the server (zoom, ...).
Zoom with finger and mouse on the charts
In version 23, you have the ability to perform a zoom on the interactive charts displayed by WEBDEV.
The zoom is performed with the mouse (CTRL + wheel) or with the finger on the devices equipped with a touchscreen.
Orthonormal display marker
The version 23 allows you to specify that a chart is using an orthonormal marker, which means that its scale is identical on both axes.
The scale and the marks are automatically calculated by the chart.
Chart controls: various new features
New functions specific to the charts are being introduced in version 23: grZoom
The Line Type property is also introduced.
The Procedure type is being introduced in browser code.
The Procedure type, associated with the internal procedures, is used to implement the concept of "closure".
Browser code: 23 new properties
In version 23, 23 new properties are being introduced in WLanguage browser.
To benefit from these new properties, the framework "version 2" must be enabled.
Reminder: switching to framework "version 2" is performed by modifying the generation options of project.
WLanguage: 4 new browser functions
4 new WLanguage functions are being introduced in browser mode in WEBDEV version 23:
Server variable updated in case of browser modification
Global variables can be declared in server code.
These global variables can only be accessed in read-only in the browser code. It is the default mode.
For security reasons, you can forbid the reading (and therefore the transfer of this variable browser side) by declaring the global variable with the server attribute only.
This is essential for a Server variable that would contain a connection password for example.
// The private key must not be transmitted to the browser
gsPrivateKey is string <server only> = "1234657841549573541"
In version 23, the server variables shared with the browser code can also be in write mode.
When the variable is modified on the browser, the variable will be automatically updated on the server.
You will notice that the variable will be synchronized on the server during the next HTTP request.
The new attribute is being introduced.
No need to create hidden controls to return values to the server!
// The list of customers must be synchronized between the server and the browser
gsListCustomers is string <synchronized browser>
45 new WLanguage functions in server code
45 new WLanguage functions are being introduced in server code in version 23.
The "BACK" key is operating in the SPA site
When the Web user is pressing the browser "Back" key, the browser goes back to the previous page.
But a SPA application includes a single page!
Therefore, the Back key goes back to the page displayed before starting the application!
In version 23, WEBDEV allows you to give the expected operating mode to the Previous key.
This mechanism fills the navigation history and it intercepts the "Previous" (or "Next") event to check the display.
This is used to display the page of SPA application in its previous status.
This management is performed by programming.
Each application status can be stored in the navigation history via new WLanguage browser functions: BrowserHistoryAdd
A new browser process ("Move into the navigation history") is also available in version 23.
This "Move into the navigation history" process is called when the Web user is pressing the "Back" or "Next" keys.
For more details, see:
Opening: re-use existing resources of all technologies
Some Web developers like to use external resources.
Several re-usable Web resources are available on Internet: Bootstrap snippets, JQuery.UI components, Angular.JS components, ...
As you already know, WEBDEV allows you to use external resources presented in the following format:
- an HTML code,
- a CSS code,
With WEBDEV, you are opened to available resources.
Sass converter (Syntactically Awesome Stylesheets)
Caution: do not confuse Sass (this new feature) with SaaS (Software as a Service).
Sass is a metalanguage, which means a language more generic than CSS.
In most cases, the CSS section is made available in the format of Sass metalanguage.
In version 23, WEBDEV allows you to copy/paste Sass code into the CSS tab of Web Component control.
The editor performs the conversion from Sass to native CSS.
Webservice: SOAP or REST?
The two most common methods for implementing Webservices are the SOAP protocol (Simple Object Access Protocol) and the REST architectures (REpresentational State Transfer).
As you already know, WEBDEV allows you to create SOAP Webservices and REST Webservices.
Automatic generation of entry points and procedures (REST)
In version 23, WEBDEV proposes a wizard that automatically creates the entry points and the procedures of a REST Webservice.
To do so, Drag and Drop a data file from the data analysis to the Webservice.
For example, for a CUSTOMER data file, the entry points used to add, modify or delete a customer are added as well as the corresponding procedures.
Automatic management of POST parameters (REST)
In a REST Webservice, an entry point can have several types: GET, POST, DELETE, ...
The POST entry point receives a parameter that can have different types: Text string, JSON, Binary buffer, ...
In version 23, this parameter is automatically passed to the WLanguage procedure linked to the entry point.
The deserialization is automatically performed according to the type of parameter used and no code is required.
Serialization/Deserialization of associative arrays in JSON
In version 23, the serialization and deserialization of associative arrays in JSON are available in browser code.
This allows you to easily transmit an associative array between the server and the browser.
This new feature is very useful in an Ajax query.
Automatic transmission of complex variables from the server to the browser
In version 23, there is no need to serialize complex variables (array, array of structures, associative array, ...) in JSON to transmit them to the browser code.
WEBDEV automatically performs the serialization and the deserialization.
The affected server variables are available in browser code.
Using the developer version of Analytics
Google Analytics is a very popular tool for measuring site traffic.
WEBDEV automatically includes in your sites the trackers required to collect statistics in Google Analytics.
Google Analytics exists in "developer" version that is used to trace additional information in the debug console of browser.
In version 23, during a site test (GO in the editor), the developer version of Google Analytics is used in the site pages.
This feature is very useful for an advanced use of WLanguage GglAnalytics functions (GglAnalyticsAdd, GglAnalyticsAddEvent), ... or during a direct call to the API of Google Analytics.
The developer can see specific information in the browser console such as:
- the calls to Google Analytics,
- the nature of calls,
- the parameters sent.
New Layout control: simplified responsive!
In version 23, the new Layout control simplifies the Responsive page.
It becomes very easy to create an input form in columns, with a section that can be conditionally added according to the responses of Web users.
The Layout control will soon become an essential control in Responsive!
Layout control: fixed-width elements in the responsive pages
The new Layout control found in version 23 is a "Container" control.
The Layout control contains cells that contain one or more controls.
These cells can have a fixed width or a variable width.
It becomes easy to create behaviors that mix fixed width and variable width in a Responsive page.
Layout control: fixed position in the responsive pages
A cell found in a Layout control can remain empty.
In a Responsive page, it acts like a fixed positioning tool for the other line controls found on its right.
Menu on mobile: automatic sliding menu
On mobile, the menus are often replaced by "hamburger" buttons.
Pressing this button opens the menu. In version 23, this menu can also be directly opened like a sliding menu via a finger swipe from left to right.
Automatic sliding menu
Editor in RWD mode: clearer property overloads
In version 23, the description window of controls (7 tabs) evolves for better management of RWD (Responsive Web Design).
When editing a control, the properties that cannot be modified in the current blade are grayed.
The blade that is currently edited is identified in the 7-tab window via its color code.
Editor in responsive mode: improves edit
In the page editor in Responsive mode, the Web designer moves the "browser width" tag to check the page behavior in the different display widths of the page.
In version 23, during the page edit, the "browser width" tag automatically goes bagck to the reference position of current blade.
This allows you not to modify positioning by mistake.
Editor in responsive mode: alerts when moving controls impacting the reference blade
In a Responsive page, a confirmation is requested when modifying the position or size of a control in a blade other than the reference blade.
No more trap!
This is used not to modify the control position or size in a secondary blade while we thought we were working in the reference blade!
Websockets: voluntary closing or error?
WEBDEV simplifies the use of Websockets.
From the browser code, you have the ability to interact with a socket server via the family of Socket functions: SocketConnect, SocketWrite, SocketExist, SocketClose.
The process for communicating by sockets asynchronous.
It is performed by a WLanguage procedure (callback procedure) called for each event.
In version 23, on the event for closing sockets, the procedure for processing events receives in parameter the code that identifies the reason for closing: voluntary closing, server reboot, internal error, syntax problem, etc...
Therefore, the application can define the action to perform: end the communication, display an error and end the communication, restart a new connection, modify parameters, ...
Choosing the default styles for the project
A skin proposes a set of harmonious styles for each type of control.
A style is defined "by default" among these styles.
This default style is used by when creating a new control.
In the earlier versions, it was not possible to specify the default style to use.
In version 23, you have the ability to specify the default style.
You even have the ability to add a style that is not found in the skin.
The saving of time in manipulations is appreciable!
Defining a default height for each type of control
In version 23, a default control height can be defined for each type of control.
This avoids several modification operations during the creation.
The default control height can also be specified in the style.
Ability to specify the margins and the spacing between controls per project/page
In version 23, the margins and the spacing between controls can be defined for the entire project or for a given page.
Then, the editor applies a magnetism according to these parameters.
List of page popups: fast popup
In the WEBDEV environment, the page popups appear in a list in thumbnail format.
In version 23, this list can be quickly displayed regardless of the number of popups in the page.
Simplified edit of anchors
In version 20, the edit window of anchors becomes a non-modal window that can remain opened during page edit.
This allows you to quickly modify the anchors of several controls or to proceed by multi-selection.
Version 23 also allows you to modify the anchors of selected controls from the modifier.
Improved fluidity and precision in the editor regarding the moves
Version 23 improves the fluidity of page editor regarding the moves, when resizing and positioning controls.
The impact of magnetism is optimized.
The load of pages in the editor is also increased by a factor from 20 to 80% according to pages.
Edit of fonts: new user-friendly GUI
In version 23, the window for editing fonts evolves for better ease of use.
Creating sets of fonts is simplified.
The wizard for creating sets of fonts containing both standard fonts and downloadable fonts (Google Font, etc.) is more user-friendly.
Sets of fonts: automatic substitution font
In Web, we talk of "sets of fonts".
A set of fonts contains several close fonts. For the controls, the browser is using the first font found in the specified set. If this font is not available on the computer of Web user, the browser is using the next font, and so on.
Three fonts are specified in most cases, the 3rd font being a standard font.
In version 23, a substitution font close to the reference font is automatically proposed when creating a new set.
The "real estate" RAD generates an RWD site
In version 23, the "Web-RealEstate" Application RAD becomes a Responsive Web Design version to allow the navigation on phones.
1 click and it's done!
Preset page templates
In version 23, the preset RWD templates Responsive Business, Responsive Blog, Responsive Mobile, Responsive Presentation and Responsive Management evolve to include the new Layout control.
The layout is simplified and the templates a easier to use.
Style books: 2 new skins
Two new skins are being introduced in WEBDEV 23:
- a Ztim skin
- a Spatiumn skin.
This adds new choices for the possible style books that can be immediately used for your projects.
PHP: Benefit from the common new features
As you already know, WEBDEV can generate a site in PHP.
Most of the new features presented in WEBDEV as well as the common new features are available for the PHP sites.
The new PHP controls
The new controls available in WEBDEV are also available in PHP:
- Gallery control
- Layout control
- Responsive Web Design Table control
- evolution on controls
PHP: interactive charts
In version 23, the charts appear in PHP.
All types of interactive charts are available: Pie, Bar, Line, Area, Scatter, Donut, Semi-circular, Radar, Japanese Candlestick, MinMax, BarChart, Funnel, WaterFall, Bubble, HeatMap.
These charts can be described in edit in the 7-tab window and they can be modified by programming.
60 new functions in PHP
60 new WLanguage functions for chart management are being introduced in PHP in version 23.
Benefit from the common new features in Linux
Reminder: a site developed with WEBDEV can also be deployed on a WEBDEV application server in Linux version.
The sites created to be hosted on Linux servers benefit from the common new features of version 23.
The new controls of version 23 are supported by the Linux application server.
New functions in Linux in WEBDEV
55 new WLanguage functions have been introduced in WEBDEV Linux in version 23.
SaaS: maintaining the SaaS database from the SaaS administrator
In version 23, the database of SaaS module can be reindexed from the administrator.
AWP site: parallel Ajax calls
In version 23, in an AWP site with context, the Ajax calls can now be parallelized on the server.
You have the ability to specify that the Ajax call will not use the AWP context and therefore will not lock it.
For more details, see:
Friendly remote mobile WEBDEV administrator
In version 23, a WEBDEV application server can be easily managed from a tablet or a smartphone: the administrator becomes mobile-friendly.
Ability to receive a notification by email if an error occurred
If an error occurred on the application server: site, server,... the WEBDEV administrator generates a log file.
In version 23, you can ask to receive an email if the log file contains errors.
You are informed!
The remote site deployment is using the HTTP or HTTPS protocols as well as FTP or FTPS.
Depending on the network configuration (firewall, proxy, anti-virus) of client computer (developer computer), you may have to use the passive FTP mode or the active FTP mode to allow the access to the server.
In version 23, the installer automatically selects the suitable FTP access mode for deploying sites from the development computer!
Click [Add] to post a comment