By default, ApplinX uses a monospaced, fixed font (Courier New) for displaying instant HTML pages. However, it is possible to use a proportional (non-fixed) font, to achieve a more modern, Web-like look & feel. Since the rendering of the HTML screen is based on absolute positioning, using a proportional font usually does not damage the correct alignment of the host fields (although some data may appear misaligned).
To use a proportional font in Web pages (JSP & .NET):
In the file \css\styles_instant.css, change the following classes to use a proportional font of your choice, for example:
#gx_screenArea { position:relative; font-family: "Verdana"; height:0px; /* make scrolling when needed*/ } #gx_screenArea input, #gx_screenArea select { font-family: "Verdana"; position:absolute }
Or:
In the file \css\styles_generated.css, in a similar manner as for instant HTML pages, change all the classes that use the font "courier new" to a proportional font.
It is possible to set various display properties of instant HTML pages, such as colors, fonts, etc. This is usually done in order to apply a Web look & feel to the ApplinX Web application.
Most of these settings are done in the style sheet file. Specific settings are set in other files. Refer to the relevant tasks for more details.
To control instant display properties (JSP and .NET):
The css\styles_instant.css file contains all CSS classes used for rendering instant HTML pages. Change them as necessary to affect the colors and fonts used for the pages.
To find out which CSS class is used for a specific element or field in the instant HTML page, it is possible to use the Browser view source option to view the generated HTML source, and then look for the element and extract its CSS classes.
Note:
This style sheet applies only to instant HTML pages. For modifying
the styles used for generated web pages (JSP, ASPX), use the
\css\styles_generated.css file.
A Code Transformation (or Code Transform) is a code class (written in Java, C# or VB.NET for JSP or .NET frameworks respectively), that is executed on all host screens or on a specific group of screens (i.e. an ApplinX Screen Group) and modifies the rendered instant HTML page for the current host screen it is executed on.
Refer to
Manipulating Host Keys
In most cases, transformations are defined using the Transformation Wizard . However, when due to limited flexibility, it is not be possible to define certain required transformations using the wizard, complement the wizard-defined Transformation entities with code-defined Transformation classes.
Creating a new Instant transformation is carried out by using the
provided template transformations (UserTagTransform1
,
UserCompletionTransform1
, UserHostKeysTagTransform
).
UserTagTransform1
contains events for each individual
rendering event and should be used for new transformations that manipulate
specific tags (input fields, output fields, GUI elements, etc.) - for example,
adding images or repositioning fields.
UserCompletionTransform1
is called upon completion of the
entire rendering process and should be used for new transformations that
manipulate the entire rendered HTML - for example, a transformation that
converts a host menu screen to a list of hyperlinks.
To create a new transformation (JSP):
Copy one of the template transformations from \web-inf\classes\transforms and rename the file and the class:
public class SampleTransform extends GXTagListener{
Add code in the relevant stub methods.
To apply the transformation, see the tasks Applying a New Transformation to all Screens and Applying a New Transformation to a Screen Group.
To create a new transformation (.NET):
Copy one of the template transformations from the transforms directory and rename the file and the class:
public class SampleTransform: GXTagListener
Add code in the relevant stub methods.
To apply the transformation, see the Applying a New Transformation to all Screens and Applying a New Transformation to a Screen Group.
This task applies an existing transformation. To create a new transformation, see the task Creating a New Transformation.
To apply a new transformation to all host screens (JSP):
In the file
web-inf\classes\contexts\GXInstantLogicContext.java,
uncomment the code in the function registerInstantTransforms
and
register the new transformation class:
public void registerInstantTransforms() { GXRenderConfig instantConfig = getGXAppConfig().getInstantConfig(); instantConfig.addTagListener(new UserTagTransform1()); // add here more transform registrations }
UserTagTransform1
being the name of the new
transformation class.
To apply a new transformation to all host screens (.NET):
In the file GXInstantLogicWebForm.cs, uncomment
the code in the function registerInstantTransforms
and register
the new transformation class:
public virtual void registerInstantTransforms() { gx_appConfig.InstantConfig.addTagListener(new UserTagTransform1()); // add here more transform registrations }
UserTagTransform1
being the name of the new
transformation class.
This task applies an existing transformation. To create a new transformation, refer to Creating a New Transformation.
It is possible to apply a transformation only for a specific Screen Group (or several Screen Groups). For example, a transformation that handles the command line field should be applied to the screen group of all screens containing this field.
To apply a new transformation to a screen group (JSP):
If the screen group has its own generated Web page, add the
registration function to the file
web-inf\classes\contexts\screenGroupName.java, to the
function registerInstantTransforms:
public void registerInstantTransforms() { super.registerInstantTransforms(); GXRenderConfig instantConfig = getGXAppConfig().getInstantConfig(); instantConfig.addTagListener(new MyTagTransform()); instantConfig.addCompletionListener(new MyCompletionTransform()); }
Where MyTagTransform
is the name of the new
transformation class and MyCompletionTransform
is the name of a
new completion transformation class.
If the screen group does not have its own generated Web page, register it in web-inf\classes\contexts\GXInstantLogicContext.java, and add code that will register it only for the appropriate screen group:
public void registerInstantTransforms() { GXRenderConfig instantConfig = getGXAppConfig().getInstantConfig(); try { if (getGXSession().getScreen().isMemberOf("MyScreenGroup")) { instantConfig.addTagListener(new MyTagTransform()); instantConfig.addCompletionListener(new MyCompletionTransform()); } } catch (GXGeneralException e) {} }
Where MyScreenGroup
is the name of the screen group,
MyTagTransform
is the name of a new tag transformation class and
MyCompletionTransform
is the name of a new completion
transformation class.
It is also possible to add code in the transformation class itself that will activate it only for the appropriate screen group(s).
To apply a new transformation to a screen group (.NET):
If the screen group has its own generated Web page, add the
registration function to the file screenGroupName.aspx.cs,
to the function registerInstantTransforms
:
public override void registerInstantTransforms() { base.registerInstantTransforms(); gx_appConfig.InstantConfig.addTagListener(new MyTagTransform ()); gx_appConfig.InstantConfig.addCompletionListener(new MyCompletionTransform()); }
Where MyTagTransform
is the name of the new
transformation class and MyCompletionTransform
is the name of a
new completion transformation class.
If the screen group does not have its own generated web page, register it in web- GXInstantLogicWebForm.cs, and add some code that will register it only for the appropriate screen group:
public virtual void registerInstantTransforms() { if (gx_session.getScreen().isMemberOf("MyScreenGroup")) { gx_appConfig.InstantConfig.addTagListener(new MyTagTransform ()); gx_appConfig.InstantConfig.addCompletionListener(new MyCompletionTransform()); } }
Where MyScreenGroup
is the name of the screen group,
MyTagTransform
is the name of a new tag transformation class
and MyCompletionTransform
is the name of a new completion
transformation class.
It is also possible to add code in the transformation class itself that will activate it only for the appropriate screen group(s).
The following tasks handle manipulation of specific host fields. The common methodology for such manipulation is identifying the screen groups including these fields, mapping the relevant fields as application fields and writing custom transformations for handling the mapped fields. See also Instant Web Application Development Methodology.
Note:
It is possible to carry out basic manipulation of fields using the
Transformation
Wizard.
It is possible to reposition a specific field in a different position in the Web page (instead of in its original host position). It is also possible to display a field in one of the template sections.
Note:
It is recommended to map the fields as application fields. Refer to
the Instant Web Application Development Methodology section for general
instructions on mapping fields to screen groups.
Note:
It is possible to carry out basic manipulation of fields using the
Transformation Wizard, Text to Text transformation or Input Field to Text Field
transformation (detailed in the
Transformations).
To position a specific field:
To reposition a field, create a new tag transformation and register it to the relevant screen group(s) or to all screens. Refer to Creating a New Transformation, Applying a New Transformation to all Screens and Applying a New Transformation to a Screen Group.
In the transformation class, add code that will reposition the
field in the appropriate method. It will usually be onNewLabel
(for output fields) or onNewTextField
(for input fields):
public void onNewLabel(GXRenderEvent event, GXILabelTag label) { if (label.getId().equalsIgnoreCase("MyAppField")) { label.setPosition(new com.sabratec.util.GXPosition(3,30)); } }
Where MyAppField
is the name of the mapped application
field to reposition and 3,30 is the new position, in host units.
public override void onNewLabel(GXRenderEvent e, GXILabelTag label) { if (label.getId() == "MyAppField") { label.setPosition(new com.sabratec.util.GXPosition(3,30)); } }
Where MyAppField
is the name of the mapped application
field to reposition and 3,30 is the new position, in host units.
It is possible to display specific host fields in specific styles. For example, displaying the message line field in a large, red font. This is done using the style sheet (CSS) classes.
Note:
It is recommended to map the fields as application fields. Refer to
the Instant Web Application
Development Methodologysection for general instructions on mapping
fields to screen groups.
Note:
It is possible to carry out basic manipulation of fields using the
Transformation
Wizard, Text to Text transformation or Input Field to Text Field
transformation (detailed in the
Transformations).
To format a specific field:
Create a new tag transformation and register it to the relevant screen group(s) or to all screens. Refer to Creating a New Transformation, Applying a New Transformation to all Screens and Applying a New Transformation to a Screen Group.
In the transformation class, add code that will reposition the field
in the appropriate method. It will usually be onNewLabel
(for
output fields) or onNewTextField
(for input fields). The following
code demonstrates replacing a field with a hyperlink:
public void onNewLabel(GXRenderEvent event, GXILabelTag label) { if (label.getId().equalsIgnoreCase("MyAppField")) { label.removeAttribute("class"); //Needed for removing all css classes label.setAttribute("class","MyCSSClass"); } }
Where MyAppField
is the name of the mapped application
field to format and MyCSSClass
is the name of the CSS class that
contains the required formatting.
public override void onNewLabel(GXRenderEvent e, GXILabelTag label) { if (label.getId() == "MyAppField") { label.removeAttribute("class"); //Needed for removing all css classes label.setAttribute("class","MyCSSClass"); } }
Where MyAppField
is the name of the mapped application
field to format and MyCSSClass
is the name of the CSS class that
contains the required formatting.
It is possible to replace the original host text of a specific field with other text.
Note:
It is recommended to map the fields as application fields. Refer to
the Instant Web Application
Development Methodologysection for general instructions on mapping
fields to screen groups.
Note:
It is possible to carry out basic manipulation of fields using the
Transformation
Wizard, Text to Text transformation.
Create a new tag transformation and register it to the relevant screen group(s) or to all screens. Refer to Creating a New Transformation, Applying a New Transformation to all Screens and Applying a New Transformation to a Screen Group.
In the transformation class, add code that will replace the field's
text. It will usually be onNewLabel
(for
output fields) or onNewTextField
(for input fields):
public void onNewLabel(GXRenderEvent event, GXILabelTag label) { if (label.getId().equalsIgnoreCase("MyAppField")) { String text = label.getContent().trim(); if (text.equalsIgnoreCase("HostText1")) { label.setText("NewText1"); } else if (text.equalsIgnoreCase("HostText2")) { label.setText("NewText2"); } //... }
Where MyAppField
is the name of the mapped application
field that its text is to be replaced, HostText1, HostText2
are
two original host texts and NewText1, newText2
are two new texts.
public override void onNewLabel(GXRenderEvent e, GXILabelTag label) { if (label.getId() == "MyAppField") { String text = label.getContent().Trim(); if (text == "HostText1") { label.setText("NewText1"); } else if (text == "HostText2") { label.setText("NewText2"); } //... } }
Where MyAppField
is the name of the mapped application
field that its text is to be replaced, HostText1, HostText2
are
two original host texts and NewText1, newText2
are two new texts.
It is possible to replace a specific field with a Web element such as a button, a hyperlink, an image etc.
Note:
It is recommended to map the fields as application fields.
Instant Web Application
Development Methodology section for general instructions on mapping
fields to screen groups.
Note:
It is possible to carry out basic manipulation of fields using the
Transformation
Wizard, Text to Hyperlink transformation or Text to Image
transformation or Text to Button transformation.
To replace a field with a Web element:
Create a new tag transformation and register it to the relevant screen group(s) or to all screens. Refer to Creating a New Transformation, Applying a New Transformation to all Screens and Applying a New Transformation to a Screen Group.
In the transformation class, add code that will reposition the
field in the appropriate method. It will usually be onNewLabel
(for output fields) or onNewTextField
(for input fields). The
following code demonstrates replacing a field with a hyperlink:
public void onNewLabel(GXRenderEvent event, GXILabelTag label) { if (label.getId().equalsIgnoreCase("MyAppField")) { GXILinkTag myLink = com.sabratec.applinx.presentation.tags.html.GXHtmlTagFactory.instance().newLink("Software AG"); myLink.setTarget("http://www.softwareag.com/"); event.getScreenTagModel().replace(label, myLink); } }
Where MyAppField
is the name of the mapped application
field to replace.
public override void onNewLabel(GXRenderEvent e, GXILabelTag label) { if (label.getId() == "MyAppField") { GXILinkTag myLink = com.sabratec.applinx.presentation.tags.html.GXHtmlTagFactory.instance().newLink("Software AG"); myLink.setTarget("http://www.softwareag.com/"); e.getScreenTagModel().replace(label, myLink); } }
Where MyAppField
is the name of the mapped application
field to replace.
It is possible to manipulate host characters, for example, removing unnecessary characters such as dots (.) or dashes (-), and replacing them with other text or HTML elements, etc.
Note:
It is possible to carry out basic manipulation of fields using the
Transformation
Wizard, Text to Text transformation.
To handle host characters:
Create a new tag transformation and register it to the relevant screen group(s) or to all screens. Refer to Creating a New Transformation, Applying a New Transformation to all Screens and Applying a New Transformation to a Screen Group.
In the transformation class, add code that will manipulate the host
characters as required. It will usually be onNewLabel
(for output
fields) or onNewTextField
(for input fields). The following code
demonstrates removing dashes (-):
public void onNewLabel(GXRenderEvent event, GXILabelTag label) { if (label.getContent().indexOf("--") > -1) { String text = label.getText(); text = com.sabratec.util.GXStringUtil.replaceAll(text,"-",""); label.setText(text); } }
public override void onNewLabel(GXRenderEvent e, GXILabelTag label) { if (label.getContent().IndexOf("--") > -1) { String txt = label.getText(); txt = com.sabratec.util.GXStringUtil.replaceAll(txt,"-",""); label.setText(txt); } }
It is possible to change the way host keys are displayed, add additional host keys and remove host keys.
To manipulate host keys
Refer to the commented sample code in any ApplinX new application, UserHostKeysTagTransform.java/cs/vb.
Wrapping the GXPlaceHolder
component in the template page
with a Partial Page rendering capablility control such as a gx:div, will reduce
the traffic between the web application server and the user client , since only
the Instant part of the page will be transferred rather than the whole page.
This will result in a slightly better performance and smoother transition
between screens.
JSP:
In the Template.JSP file, find the following control:
<gx:placeholder id="GXPagePlaceHolder">Design time page content</gx:placeholder>
Place a gx:div
tag around the
GXPagePlaceHolder
:
<gx:div id="instantPanel"> <gx:placeholder id="GXPagePlaceHolder">Design time page content</gx:placeholder> </gx:div>
Override the default behavior of each PF button on your keyboard.
In js/userExits.js, change the
globalOnKeyDown
function to be of the following structure, where
the if statement is before the activateifexists
JavaScript
code:
function globalOnKeyDown(gx_event){ // use win.<SOMETHING> to access the page tags // for example: win.document.GX_form var win = gx_event.window; // if the key a PF key or ENTER if ((gx_event.keyCode>111 && gx_event.keyCode<124) || gx_event.keyCode==13 ){ // Update only the instantPanel part of the page gx_updatePagePart('instantPanel'); } // activate page scope function if exits activateIfExists(gx_event,gx_event.window.pageOnKeyDown); //gx_event.cancel(); // for cancel the event }
.NET:
In the Template.master file, find the following control:
<asp:ContentPlaceHolder ID="GXPagePlaceHolder" runat="server"/>
Place a div
tag around the
GXPagePlaceHolder
:
<div runat="server" id="instantPanel"> <asp:ContentPlaceHolder ID="GXPagePlaceHolder" runat="server"/> </div>
Override the default behavior of each PF button on your keyboard.
In js/userExits.js, change the
globalOnKeyDown
function to be of the following structure, where
the if statement is before the activateifexists
JavaScript
code:
function globalOnKeyDown(gx_event){ // use win.<SOMETHING> to access the page tags // for example: win.document.GX_form var win = gx_event.window; // if the key a PF key or ENTER if ((gx_event.keyCode>111 && gx_event.keyCode<124) || gx_event.keyCode==13 ){ // Update only the instantPanel part of the page gx_updatePagePart('instantPanel'); } // activate page scope function if exits activateIfExists(gx_event,gx_event.window.pageOnKeyDown); //gx_event.cancel(); // for cancel the event }