www.usoft.com To www.usoft.com

- - Knowledge base
Ideas
Events

Community
Search

Topics started by erikmarc.stellingwerf

211 Topics

Recently active

Most views Most replies

erikmarc.stellingwerf

published in Active web browsers

Active web browsers

In USoft Web Designer 9, the creation of HTML has moved to the client. The server has become a hatch that serves files on request. The advantages of this approach are:The processing power of the client is used. The client has knowledge of the local conditions like type of browser, available resolution, locally stored data, etc. JavaScript can be used, which is a much more powerful language than XSLT which was used in USoft 8 to produce HTML server-side. Network load is reduced.This innovation has been made possible by the recent sophistication of web client devices. The clients of today are no longer the simple machines they were a couple of years ago. Also, standards are now much better implemented, making it easier to create websites that can be interpreted by different browsers. Even smartphones have more than enough power to perform this task.In the processing that USoft Web Designer 10 expects clients to perform, aspects of data interaction are carefully separated from user interf

erikmarc.stellingwerf

published in Active web browsers

Frameworks

It is possible to use different HTML, CSS and JavaScript frameworks in your web application. There are various dependencies. For example, Bootstrap 4 CSS/JS requires jQuery.The framework(s) that your runtime application actually uses depend on:The resources you have made available. How these resources are referenced in the <head> element of the application.html file.However, USoft ships resources as part of the Web Designer product, and there is a Framework publication property in USoft Web Designer that allows you to select a framework through a single setting.You can find the Framework property by choosing Publish, Publication Configurations from the Web Designer menu. What matters at runtime is the Framework property of the configuration you have most recently been publishing against.USoft recommends using auto (the default):Framework Meaning auto USoft selects the most suitable framework. This is a recent framework that USoft includes. For USoft 10.0 new installations

erikmarc.stellingwerf

published in Active web browsers

Client sessions

In previous versions, when the user had no server requests for a longer period of time, it could happen that the session on the server was timed-out. The next server request resulted in a nasty error message and the login page was thrown into place discarding all uncommitted manipulations that were made.Although the functionality has changed, it is not fixed completely. What has been changed is that the application installs a timeout that logs out after a given period of time. By default this period is 15 minutes. This period can be altered by calling the following function:Syntax.setTimeout([options])where [options] are options passed to the function.Returns nothing.The setTimeout function changes what happens when a client session ends when the user has no server requests for a period of time. The [options] parameter is an object that can have the following items:minutes: Period of time in minutes. Default is 15. func: Function to be called when period of time is exceeded. Default i

erikmarc.stellingwerf

published in Active web browsers

Contexts

As of USoft 9, all pages and sub-pages exist within a single HTML document. They are not in different namespaces kept apart by named HTML frames. All data, variables and scripting operate in a single space. In most cases this will make life easier. There are, however, situations that can cause conflicts.Take for instance an application with multiple pages. The current view on the application shows pages that contain datasources with identical names. How can you distinguish one from the other?USoft Web Designer contains a mechanism to address this problem by means of contexts. When a user pushes a button or edits a text on a (sub-)page, it is likely that the data source that is addressed is also situated on that (sub-)page. This is also the idea behind contexts. The application remembers the trigger point of each event, and stores that information. When the event occurs and, as a result, a data source is addressed, the application will look for that datasource in the definition of the (

erikmarc.stellingwerf

published in Active web browsers

The application.html initial document

When a client connects to a USoft web application, it receives an initial HTML document that contains all the information needed to boot the application. This HTML document provides:The <html> and <head> tags that provide the overall structure of the browsed HTML. References to all the .js and .css files needed for the client to further interpret the delivered application and convert all the content to browsable HTML. Substitution variables that have global (= application-wide) scope, such as ${Encoding} and ${LogLevel}. LocationThe initial document is embodied by the file "application.html". This file can be found as a simple HTML text file in location:<installation-directory>\PageEngine\templates\WebSite\application.htmlwhere installation-directory is the local USoft installation directory.Each time you publish the application, a flat copy of this source file is written to:<publication-directory>\WebSite\application.htmlwhere publication-directory is the value

erikmarc.stellingwerf

published in JavaScript

The caller keyword

If you want to refer to an event target in a script, you can use the caller keyword. For example:doSomething( caller )The caller keyword is deprecated and provided only for backward compatibility with USoft 8. A better alternative is to use the standard this keyword.

erikmarc.stellingwerf

published in JavaScript

Host variables in Javascript

There are four methods available to handle hostvars in Javascript:The hostvars option of a $.udb function (if available). $.udb.hostvars. $.udb.genericHostVar(). $.udb.clearGenericHostVars().Use the $.udb.hostvars object ONLY if you are not scripting a $.udb function that has its own hostvars option (for example, $.udb.executeSQLStatement() or $.udb(datasource).executeQuery() ).The $.udb.hostvars object is for holding temporary host variables (ie., variables with one-time use) that have literal values. This object can be used in a SQL query triggered by an event that is fired after the value is set. That event can contain the ExecuteSQLStatement action, or any other action that queries data sources with host variable placeholders.You can also set host variables on the beforeexecutequery event of data sources.The object structure is of a structure of the form:{ name:value, name: value, ... }where name is the name of a host variable used in the SELECT or WHERE clauses of a data source, a

erikmarc.stellingwerf

published in JavaScript

How to change the parameters of an action

Some actions contain specific parameters. Help about these parameters can be found in the context-sensitive help.To change the parameters of an action:1. In the object tree, select the appropriate action object.2. Open the Property Inspector.3. Set or change the properties on the General tab page.

erikmarc.stellingwerf

published in JavaScript

Events and event listeners

This article discusses event handling in USoft web applications.Events and event typesIf a user does something in a web page, an event takes place. Each event is of a specific event type. For example, an event takes place:When the user clicks or double-clicks an object (this event is of the onclick or ondblclick event type). When the user presses a key over an object (this event is of the onkeypress event type). When the user moves the mouse over an object (this event isof the onmouseover event type). After the browser has finished loading a web page (this event is of the onload event type).Event handlersAn event handler is a piece of software code that executes when an event of a given type occurs within the scope or context for which the event handler is defined ("where it is placed”).A well-known example is an onclick event handler placed on a button control. This event handler executes when the user clicks that button, but not when he clicks a different button.It is common for many

erikmarc.stellingwerf

published in JavaScript

How to add a script to an object

Add a script to an object if you know or expect that it really belongs to that object and will not need to be callable from any other object in the application.To add a JavaScript script to an object:1. First, insert the appropriate event listener object.2. In this event listener object, insert a callClientScript action.3. For this action, set the Script property to the script text.4. Save work and (re-)publish.Instead of writing the script in the Script property, you can also write it in an external file and call that file by pointing to it from the Script Source property, but this is unlikely to be practical.

erikmarc.stellingwerf

published in JavaScript

How to add a script to a page

Add a script to a specific page class if you know or expect that the script will need to be called from various places on pages based on that page class (or on its descendent classes), but has no wider applicability.To add a user-defined JavaScript script that you want to be available from within a specific page:1. From the Pages tab of the catalog, open the page class corresponding to that page.2. From the Controls tab of the catalog, drag a ScriptControl class onto the Page node (the top-level node) in the object tree.3. Open the Property Inspector for the inserted ScriptControl object and set the Script Source property to the path that leads to the file that contains your script(s), for example:js/MyScripts.jsAlternatively, you can point to the file in the Script Source property of the Page object.If you prefer to code directly in Web Designer, you can write the script as a value of the Page's Document Script property.

erikmarc.stellingwerf

published in JavaScript

How to add a script to your application

To add a user-defined script that you want to be available from any point in your application:1. Code the script and place it in the appropriate subfolder of your Alternative Template Folder. For example, you could code additional JavaScript in a file called "MyScript.js" and place it in the appropriate "js" subfolder of the Alternative Template Folder.2. Find the name of the start page class of your publication. This is the name of the StartPage Property of the Publication Configuration that you use for publishing your application.3. From the Pages tab of the catalog, open this page class.4. From the Controls tab of the catalog, drag a ScriptControl class onto the Page node (the top-level node) in the object tree.5. Open the Property Inspector for the inserted ScriptControl object and set the Script Source property to the path that leads to the file that contains your script(s), for example:js/MyScripts.js6. Save work and (re-)publish.Alternatively, you can skip Steps 2-5 and use the

erikmarc.stellingwerf

published in JavaScript

Script scope

For a given script, script scope is the collection of classes and object in the application from which the script is available.Before adding a new script, ask yourself if you want to:Add a script available everywhere in the application. Add a script available to a specific page class. Add a script to a specific object in a specific page class. Add a script available to every occurrence of a control (eg., a button class or a grid class) in a page.

erikmarc.stellingwerf

published in JavaScript

Scripting example 2: Client-side check on a mandatory field

You can check mandatory columns before saving. Suppose an inserted person record cannot be saved if the Family Name field has no value. In this case, a message must be shown to prompt the user to enter a Family Name:1. From the catalog, open the appropriate page.2. For the SaveButton in the BottomButtonGroup, delete the existing commit action. Instead, for the onclick event listener, insert a callClientScript action.3. For the callClientScript action, set the Script property to:if ( getValue("PERSON","FAMILY_NAME") == "" )alert('Please enter a value for Family Name.')elsecommit()The getValue JavaScript method is defined in the publication-folder/js/interface.js file.4. Save your changes, and publish your application.In the corresponding web page, a message pops up if the user does not enter a value for Family Name and then clicks Save.

erikmarc.stellingwerf

published in JavaScript

Scripting example 1: The period case

If you want to query data within a period of time, you can for example enter a search condition in a DATE field:>01-jan-2006 & <31-dec-2006However, a more user-friendly way to let the end-user query data within a time period, is to define a VariableSetDataSource object with two variables that represents a period of time, with a from date and a to date.In two additional text fields, the user can then enter these dates.Suppose, the search group of an info page contains an S_BOOK_DATE field that is connected to a BOOK_DATE column of a RESERVATION table.To use variables to query data within a period of time, set up the data structure and configure the userface behavior:Setting up the data structure1. Open the appropriate page from the catalog.2. From the Controls tab page of the catalog, drag a VariableSetDataSource object to the Page object in the object tree.3. For the new VariableSetDataSource1 object, set the Name property to: period.4. Drag two Variable objects to the period

erikmarc.stellingwerf

published in JavaScript

Finishing your web application with JavaScript

You can finish your web application pages by adding JavaScript code. This is a programmer's task and consists of mixing manually coded scripts with code borrowed from selected libraries.USoft Web Designer has built-in libraries for scripting interaction with data (the USoft DB library) and for scripting surface interface behavior (the USoft UI Library).USoft Web Designer also facilitates the use of frameworks such as jQuery and bootstrap.You can include scripts in web pages that are executed with or without web server interaction.Before adding a script, you should:1. Identify, in functional terms, what the script should do: what action(s) it needs to execute.2. Identify the event that should dictate when the script is executed. For example:When the user clicks or double-clicks an object (the onclick event type). After the browser has finished loading a web form (onload). When the user presses a key over an object (onkeypress). When the user moves the mouse over the object (onmouseover)

erikmarc.stellingwerf

published in Cascading Style Sheets (CSS)

Reusing existing style sheets

To make it easier to integrate the generated web pages into an existing web site, you can reuse your existing style sheet rules. The selector of a style sheet rule; the part before the left curly brace, specifies what elements are affected by the declaration. If these elements occur in the generated web pages, these elements will get the required look-and-feel.Each Web Designer control has an internal ID and belongs to a Class. The default values are the internal Web Designer Class and ID, for example:Class: ContainerControl Id: SearchColumnGroupThese internal Class and ID can be changed by setting the XML Tag Name and Id properties.For example, suppose that an existing style sheet rule specifies that all buttons that belong to the ThreeDButton class have a three-dimensional outset border. Your current web site contains many buttons with this look. Here is the style sheet rule:.ThreeDButton { border-style: outset; border-width: 2pt}In Web Designer, for each individual button you

erikmarc.stellingwerf

published in Cascading Style Sheets (CSS)

CSS record colouring in grid controls and grid edit controls

In grid controls and grid edit controls, the selected record has a different color to the non-selected records.In the resulting HTML code, all <tr> elements within a grid control have a selectedRow CSS class value. All <tr> elements that are not selected have a notselectedRow CSS class value.The CSS classes SelectorControl, RecordNumberControl, GridCellEditControl and GridCellControl define the colors of a record displayed.Example.notSelectedRow td.SelectorControl{ background-color: rgb(90%, 90%, 90%)}.selectedRow td.SelectorControl{ background-color: rgb(80%, 80%, 80%)}

erikmarc.stellingwerf

published in Cascading Style Sheets (CSS)

CSS Example: Highlighting mandatory fields

Here is an example of a style sheet rule that applies to all HTML elements that belong to the mandatory class.td.mandatory, input.mandatory{ color:red;}The result is that the text in all mandatory fields and their labels become red. The Mandatory class is an example of a domain class.

erikmarc.stellingwerf

published in Cascading Style Sheets (CSS)

CSS Example: The InputControl class

Here is an example of some style sheet rules that apply to the input field of the InputControl class:input.InputControl{ background-color: white; color: black; border-width: 1px; border-color: black; padding-left: 5pt;}

erikmarc.stellingwerf

published in Cascading Style Sheets (CSS)

CSS Example: The ButtonControl class

Here is an example of a style sheet rule that applies to the ButtonControl class within the BottomButtonGroup that exists in the Web Designer repository:#BottomButtonGroup .ButtonControl{ background-color: blue; color: white; border: none; text-transform: uppercase; font-weight: bolder;}The following style sheet rules apply to the label objects between the navigation buttons:#SaveButton,#RollbackButton{ text-transform: uppercase; font-weight: bolder;}This example shows that selectors can be grouped in comma-separated lists.In "Web Designer Classes & IDs", all Web Designer classes that can be influenced by style sheet rules are listed.

erikmarc.stellingwerf

published in Cascading Style Sheets (CSS)

CSS Example: The DIV element as a custom header bar

In HTML pages, the DIV element marks the beginning of a new division. DIV elements let you organise web page content in rectangular boxes.DIV element as a custom header barFollow these steps to add a custom header bar like this:across the top of all the pages in your web application.Publication configurationThese steps assume that you use the following settings (which are default in USoft 10) in the publication configuration that you publish against:Property Value Framework auto StartPage ApplicationPage ApplicationPageIn Web Designer, open the ApplicationPage class. Make the following changes to the object tree:In ApplicationPage, insert a DIV. Set its Id and Name properties to: myHeader. In the DIV, insert an ImageControl. Set its Id and Name properties to: myLogo. Set its Image property to: usoft-header-logo.png.The default ApplicationPage is set up in such a way that elements appear side-by-side. This is what causes the menu to appear to the left side of the page contents.

erikmarc.stellingwerf

published in Cascading Style Sheets (CSS)

CSS Example: The BODY element

Here is an example of a style sheet rule that applies to one specific HTML element; the BODY element.body{ background-color: #FFFFEE; /* almost white */ background-image: url(../images/CompanyLogo.gif); background-position: 98% 2%; background-repeat: no-repeat;}The background color is set to almost white, and a company logo image is displayed at the right top of each document.This example also shows how declarations can be grouped, and how comments can be added. Each declaration must be terminated with a semicolon.

erikmarc.stellingwerf

published in Cascading Style Sheets (CSS)

How to define CSS stylesheet rules in USoft

In order for a CSS stylesheet rule to have an effect on the published web page(s), the HTML documents that are the base for the web pages must be linked to the CSS stylesheet file that contain the stylesheet rule.The following steps use of the fact that the application.html file contains by default the following instruction:<link rel="stylesheet" href="css/CustStyle.css" type="text/css"/>Defining an individual CSS stylesheet ruleTo define a CSS stylesheet rule that has an effect on published USoft web pages:1. Publish your web application, or a page or a page set in your web application.2. Copy the file:publication-folder\WebSite\css\CustStyle.cssto:alternative-template-folder\WebSite\css\CustStyle.cssExplanationWhatever you place in the alternative template folder is written to the publication folder every time you run Publish. The "CustStyle.css" file is an empty shell intended for you to add custom stylesheet rules. Each time you run Publish, the following file is first copied

erikmarc.stellingwerf

published in Cascading Style Sheets (CSS)

CSS selectors in stylesheet rules

A selector in a style sheet rule (the part before the left curly brace) may be:An HTML element. A Web Designer class. A Web Designer domain class. A Web Designer ID. An inline style attribute.Selectors can be contextual: apply in certain contexts only.HTML Elements as SelectorAll HTML element types are possible selectors within style sheet rules.To set a "default" style property for a document, you can set the property on an element from which all visible elements descend. In HTML documents, the BODY element serves this function. For example, the style sheet rule below specifies a blue, italic, Helvetica font for the whole document:body{ font-family: helvetica; font-style: italic; color: blue;}Web Designer Classes as SelectorTo make it possible to define specific style sheet rules for typical Web Designer objects like buttons, groups, or grids, all Web Designer objects are classed.For each object, the XML Tag Name property specifies this class. For example, the SaveButton in

1
2
3
4
...
9

Page 1 / 9

Badge winners

Rens Kersbergenhas earned the badge Explorer
rene.de.bruinhas earned the badge Explorer
rene.de.bruinhas earned the badge Scout
Janhas earned the badge Explorer
kesselringjhas earned the badge Explorer

Show all badges

Powered by Gainsight

Terms & Conditions Cookie settings

Sign up for the USoft Community

Already have an account? Login

Username *

E-mail address *

First name *

Last name *

Company

Password *

I accept the terms & conditions

loginBox.register.email_repeat

Login into the USoft Community

No account yet? Create an account

Username or Email

Password

Remember me

Forgot password?

Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.

Username or e-mail

Back to overview

Scanning file for viruses.

Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.

OK

This file cannot be downloaded

Sorry, our virus scanner detected that this file isn't safe to download.

OK

CONTACT

USoft B.V.
IJsselmeerweg 1
1411 AA Naarden
The Netherlands

+31 (0)35 699 0699
info@usoft.com
www.usoft.com

© Copyright 2024 Privacy Policy

EXPLORE MORE

About USoft
Working at USoft
Success stories