element4solution tutorial overview

Example/Tutorial Solution Cases: This section includes small pieces of code, based on element4solution, that show particulary implementations of common tasks.
Hello World [Run Example] [View Sourcecode]	No tutorial without an Hello World example. Start here.

Contact Us
Method Reflection
[Run Example]
[View Sourcecode] This is an example how to deal with E4Methods. E4Method cover the messaging of your application and each E4Method is associated with a Java function. So we can treat them as "normal" arguments in our application, for example if we want an Anchor () tag to call another function. It is typically for web applications, that either a form (

) or an anchor will make branches to other functions. This example does not make use of E4CSS definitions, so font attributes are included in the application now. Contact Us
Biorythm using Ajax
[Run Example]
[View Sourcecode] This is a full example of a small application.

The user must enter 3 values (day, month, year) and using an Ajax element and a dynamic generated image a biorythm is calculated and drawn. Please note, that most code of this example is dedecated to calculate and draw the image which is not core part of the E4S framework.

Contact Us
<HTML>
[Run Example]
[View Sourcecode] A simple class, that demonstrates the use of text output to HTML pages. E4S consists of a class for each HTML tag, for example you could write in your code html.B().I().print("Hello") which results in <Bgt;<Igt;Hello</I></Bgt;. But at any certain point, you need to print out the "real" content which is not a HTML tag and this can be done using the print() or println() functions provided by almost all HTML tag objects.

Contact Us
<BODY>
[Run Example]
[View Sourcecode] Using the BODY tag

Contact Us
<TITLE>
[Run Example]
[View Sourcecode] How to open a window and how to use the <TITLE> tag.

Contact Us
<FONT>
[Run Example]
[View Sourcecode] Using fonts in texts. This example demonstrates how font declarations are beeing used - in the case that they are not defined by a E4CSS this kind of mechanism can be used.

Contact Us
<A>
[Run Example]
[View Sourcecode] A very important chapter. The A-tag is fundamental in changing any content on the user's clicks. It can be an outside branch (new A("http://www.yahoo.com"), or it can involve a E4JavaScript that is provided by the servlet and declared as an E4EventHandlerA or - in many cases - links direct back to your Java code with the quite simple mechanism of the E4Method classes. A E4Method is a declared variable, no value will be assigned. E4S analyzes your class on startup and will automatically find the associated Java function, declared by the same name within the same module. This is very fundamental to E4S programming, you might like it or not, but on the end of the day your project development will be very much faster relying on that simple mechanism because there is no overheady, the code can be readden very easily and everything is on one place.

Contact Us
simple table
[Run Example]
[View Sourcecode] Using <TABLE>-tags. A TABLE tag is created based on other HTML tags, e.g. the <HTML> or <BODY>-tags. Based on the TABLE tag, you can create TR elements and based on these you create your TD elements. Output can be sent directly using the print(String) or println(String) function to the TD elements, or you construct further elements within the TD cells.

Contact Us
Image in Table
[Run Example]
[View Sourcecode] A simple class, that demonstrates the use of the image tag within an E4S application.

Contact Us
Highlight Row
[Run Example]
[View Sourcecode]

Contact Us
Sorted List
[Run Example]
[View Sourcecode] Create a table with dynamic sorting capabilities.

Contact Us
Dynamic Ajax Table
[Run Example]
[View Sourcecode] Example for E4AjaxTable.

Contact Us
<IMAP>
[Run Example]
[View Sourcecode] Image-MAP Example.

Defines an image with different areas (rectangle, cirlce and polygon) and shows hoe to combine an area with a E4Method or a E4JavaScript call.

Contact Us
ImageResizer
[Run Example]
[View Sourcecode] Usage of the ImageResizer class to change the width and height of images.

Contact Us
Visibility onClick
[Run Example]
[View Sourcecode] Using the DIV element and dynamically hide or show contents of your page.

Contact Us
Visibility onChange
[Run Example]
[View Sourcecode] Show/Hide DIV elements based on a SELECT field using the onChange() function.

A selection is performed, giving a value of 1,2 or 3. In a E4JavaScript, depending on these values when the select changes - using an event handler associated with the onChange() function - different DIV elements will be switched hidden or visible. Please note, that a DIV element does provide this as basically E4JavaScript functionality, all you have to do is call the functions in your event-handler script.

Contact Us
Own E4HtmlElement_Intf based on DIV
[Run Example]
[View Sourcecode] This example demonstrates a combination of elements that are reusable and offer a show/hide button to change the visibility of a DIV element. It also illustrates the usage of E4JavaScript in combination with the 'onClick' event handler.

Contact Us
Output to DIV
[Run Example]
[View Sourcecode] Write Text to a DIV element using a Java-Script.

Contact Us
popup information
[Run Example]
[View Sourcecode] A simple class, that demonstrates the use of popup elements in HTML pages.

Contact Us
Simple parameter handling
[Run Example]
[View Sourcecode] How to handle parameters when calling functions.

Contact Us
Object parameter handling
[Run Example]
[View Sourcecode] Handling object parameters from one CGI call to another.

Contact Us
Ajax activation
[Run Example]
[View Sourcecode]

Contact Us
<FRAME>
[Run Example]
[View Sourcecode] Creating and using frames.

Contact Us
<IFRAME>
[Run Example]
[View Sourcecode] Creating and using IFRAME elements.

Contact Us
Smooth-Resize
[Run Example]
[View Sourcecode] Creating and using frames with the "Smooth-Resize" capability.

Contact Us
Java-Script
[Run Example]
[View Sourcecode] E4JavaScript and event-handler examples. Java-Scripts can be used wherever required, Event-Handlers are "bound" to their base types, e.g. has the E4EventHandlerBODY functionality for bindings with onLoad() or onUnLoad(). Scripts as well as event handlers can either have an explicit name or they get assigned an generic name. Scripts are collected throught the object-tag chain within the HTML output (except Ajax, it always starts on HTML level) and included in the header section of the HTML file. It is also possible to use referenced scripts (stored outside as .js file), but the elegance is the possibility to include certain topics in the script, for example a localized text message.

Contact Us
Simple Menu
[Run Example]
[View Sourcecode] A menu for navigation.

Contact Us
Different Styles
[Run Example]
[View Sourcecode] Style examples for menus.

Contact Us
Windows Style - A
[Run Example]
[View Sourcecode] Useing a simple tree navigation.

Contact Us
Generated Select class
[Run Example]
[View Sourcecode] Database example.

Contact Us
automated
[Run Example]
[View Sourcecode] Demonstrates the usage of table-style objects that can be used for data retrieving out of database tables and generalized data editing.

Contact Us
user created
[Run Example]
[View Sourcecode] Demonstrates the usage of table-style objects that can be used for data retrieving out of database tables and generalized data editing.

Contact Us
Simple input form #1
[Run Example]
[View Sourcecode] A form for entering values using different types of fields.

Contact Us
Multiple form
[Run Example]
[View Sourcecode] Multiple form - a form with an input field that becomes visible depending on some other values.

Contact Us
OPTION/SELECT
[Run Example]
[View Sourcecode] A simple class, that demonstrates the use of select fields in form elements. SELECT fields are based on the E4SelectValues collection that holds - plain or structured - options for the selection. Special input behavior enables entering values while selecting the drop-down (place focus on the city list and type some some characters).

Contact Us
CHECKBOX
[Run Example]
[View Sourcecode] CHECKBOX Input element example. Shows how to use checkboxes and changing their values by the onclick. Contact Us
Validation
[Run Example]
[View Sourcecode] A form for entering values using different types of fields.

Contact Us
Tabbed form
[Run Example]
[View Sourcecode] Layout input fields on multiple forms, related together by a cascading menu. This is useful when larger input forms are required that would result in loss of oversight. You can divide the whole form into different pages, but treat them as one form without having the neccessarity of taking care of changes in the subforms. Each subform is represented by a menu bar on the top of the frame/page.

Contact Us
Pickup a value
[Run Example]
[View Sourcecode] Pick up a value (e.g. a date from a calendar) while editing a form.

Contact Us
File Pickup
[Run Example]
[View Sourcecode] Pickup a file during editing a form.

Contact Us
Image-Field
[Run Example]
[View Sourcecode] A simple class, that demonstrates the use of images. Define input fields in a form that represent images which can be selected by a pickup from a directory on your server with uploading capabilities.

Contact Us
E4InputMultiState
[Run Example]
[View Sourcecode] A simple class, that demonstrates the use of multistate buttons. A multistate button is an image that changes on every click, it can be treatened as normal input field in FORM or E4Fieldset elements.

Contact Us
FILEUPLOAD
[Run Example]
[View Sourcecode] Example on image uploading capabilities.

Simply create a form containing an IMAGEFIELD element, a pickup mechanism provides also uploading and selection of images.

Contact Us
Input-List
[Run Example]
[View Sourcecode] Using input list for multiple input rows.

Contact Us
Grid
[Run Example]
[View Sourcecode] A grid example (editing several rows/columns of data).

This example shall demonstrate a grid which holds data for each country (vertically) within 2 years (horizontally). This could be some comercial data about sales figures. What we what we want to do here is a input of this data (but it would be too huge to be edited on one screen completley, so we use the Grid element).

Contact Us
Line-Input
[Run Example]
[View Sourcecode] Multiple input lines based on simple input elements (only one row per time available for editing) Contact Us
Ajax
[Run Example]
[View Sourcecode]

Contact Us
E4CSS & <TABLE>
[Run Example]
[View Sourcecode] Cascading style sheet handling.

Contact Us
Input Fields
[Run Example]
[View Sourcecode] A simple class, that demonstrates the use of images.

Contact Us
<FORM> and <SELECT>
[Run Example]
[View Sourcecode] This example shows how a SELECT element can be filled up without reloding it completley.

Contact Us
<FORM> and TEXTFIELD
[Run Example]
[View Sourcecode] This example shows how Ajax can change the value of an input field.

Contact Us
Timer
[Run Example]
[View Sourcecode]

Contact Us
Dynamic Diagram
[Run Example]
[View Sourcecode] Draw a circle diagram based on some dynamic input values using Ajax activation.

Contact Us
display an error
[Run Example]
[View Sourcecode] Error handling.

Contact Us
Session objects
[Run Example]
[View Sourcecode] This example illustrates the usage of a module, that is called several times by the e4s framework. Each call causes the framework to create a new instance of this module, so any values stored in member variables are lost after each call.

There are workarounds throught that:

1) Make a variable static, but you loose the ability to hold different values for each user. Anyway, it can make sense, e.g. when using image or font objects that are independent of the user.

2) Declare the whole module as session object (see other example in this tutorial).

Or covered here:

3) You can concentrate data in one or more classes (objects) and use the {@link e4s.servlet.E4ServletImplementation_Intf#setSessionObject} or {@link e4s.servlet.E4ServletImplementation_Intf#setSessionObject} which is basically also the mechanism how more complex objects (trees, sorted lists) in the e4s environment are working.

Contact Us
Persistant module
[Run Example]
[View Sourcecode] This example illustrates the usage of a module, that is called several times by the e4s framework. Normally, each call causes the framework to create a new instance of this module, and by that you loose the possibility to store local values in the module and re-use them the next time a function out of this module would be called.

There are workarounds throught that:

1) Make a variable static, but you loose the ability to hold different values for each user. Anyway, it can make sense, e.g. when using image or font objects that are independent of the user.

2) You can concentrate data in one or more classes (objects) and use the {@link e4s.servlet.E4ServletImplementation_Intf#setSessionObject} or {@link e4s.servlet.E4ServletImplementation_Intf#setSessionObject} which is basically also the mechanism how more complex objects (trees, sorted lists) in the e4s environment are working.

Or there is an alternative (which is covered here):

3) You can make your whole module "persistant" as an session object, by instancing the {@link e4s.servlet.E4ModuleImplementation} class using the secons boolean parameter in the constructor. This mechanism works simple, but be careful when having a large number of users, as one object is hold in memory for each user. The size of the object depends on your private/public/protected fields.

Contact Us
Custom HTML element
[Run Example]
[View Sourcecode] Define a reusable element of HTML tags that covers some specific layout or logic and add it to other elements within the HTML output context.

Contact Us
User Information
[Run Example]
[View Sourcecode] How to open a window.

Contact Us
Permissions
[Run Example]
[View Sourcecode] Show how to define, register and deal with permissions. They also can be combined.

Contact Us
Info-Box
[Run Example]
[View Sourcecode] Info-Box example. A Box element can be found in the E4S framework, containing possibilities for rounded corners or normal corners. It is just a table, but very simple to use without any unneccesary behavior.

Contact Us
Round-Corners
[Run Example]
[View Sourcecode] Draw a box with rounded corners.

Contact Us
E4Message
[Run Example]
[View Sourcecode] E4Messages example.

Contact Us
Buttons
[Run Example]
[View Sourcecode] Create BUTTONS that reference to a function within your code, assigning buttons with E4JavaScript functionality or placing images on buttons.

Contact Us
sending
[Run Example]
[View Sourcecode] Sending eMails from your servlet.

Contact Us
receiving
[Run Example]
[View Sourcecode] $LastChangedDate:$ $LastChangedRevision:$ $LastChangedBy:$ (C)door2solution software gmbH Contact Us
Translations
[Run Example]
[View Sourcecode] Create a table with dynamic sorting capabilities.

Contact Us
Browser's status line
[Run Example]
[View Sourcecode] Display a string in the Browser's status bar.

Contact Us
Silent output
[Run Example]
[View Sourcecode] Silent-Output example. This example demonstrates how to generate outputs without any additional information to be used directly for XML input streams or other purposes. In this case, a VCARD is created which will go directly into the client's mail application (e.g. MS-Outlook).

Contact Us
Dynamic Image
[Run Example]
[View Sourcecode] Generate graphic's on the fly by your servlet.

This example lines out how images can be produces by a servlet and how these images can be integrated dynamically into your HTML output. It is based on HttpServletResponse. There is another example showing this together with an Ajax refresh mechanism in the tutorial.

Contact Us
Pickup multiple values
[Run Example]
[View Sourcecode] Multiple Pickup example, demonstrates how to open a window and select one or multiple values (e.g. out of a CHECKBOX) and instantially overtake the values to the calling input field. This mechanism is useful to implement user selections out of a variety of possibilities.

Contact Us
Country-Codes
[Run Example]
[View Sourcecode] Usage of Language-Codes.

Contact Us
Currency-Codes
[Run Example]
[View Sourcecode] Usage of CurrencyCodes. Currency codes are defined within E4S and there is a mechanism implemented which reads the current exchange rates automatically from the European Central Bank (ECB).

Contact Us
Languages
[Run Example]
[View Sourcecode] Usage of Language-Codes.

Contact Us
Contact Us