|
<< Click to Display Table of Contents >> Navigation: »No topics above this level« FAQ |
What is IntraWeb 17, and how is it different from previous versions?
IntraWeb 17 is a modern, lightweight framework for building dynamic web applications using a declarative markup language called IWML, paired with a logic layer written in JavaScript, TypeScript or even Delphi.
Compared to earlier versions of IntraWeb (such as IW14 and IW15), version 17 represents a complete rethinking of the architecture, with a strong focus on simplicity, performance, and flexibility:
•Simplicity – Applications are built from just a layout file (.iwml) and a logic file (.js, .ts or .pas for Delphi), without the need for compilers, bundlers, or transpilers.
•Multi-language support – Developers can use JavaScript, TypeScript or Delphi to write application logic, depending on their background and preference.
•Lightweight and dependency-free – IntraWeb 17 runs directly in the browser or on a server without requiring heavy installations or external dependencies.
•Clear separation of concerns – IWML handles UI layout while logic is cleanly isolated in code files.
•Quick start and easy deployment – Projects are easy to launch using tools like Visual Studio Code or Delphi IDE, and can be deployed by simply copying files.
•Efficient state handling – IntraWeb 17 offers a reactive model without the need for hooks or manual DOM updates.
What IDEs or programming languages can I use with IntraWeb 17?
IntraWeb 17 is designed to be flexible and accessible to developers from different backgrounds. You can use several popular programming languages and development environments, depending on your preferences and the kind of application you're building.
Supported languages:
•JavaScript – The most direct way to write logic for your application. Just create a .js file with a class that extends IntraWeb.Code. No additional tools required.
•TypeScript – For those who prefer static typing and a more structured development experience. TypeScript support is built-in and works seamlessly with modern editors.
•Delphi – If you are a Delphi developer, you can also use IntraWeb 17 for full-stack development. Delphi integration enables backend logic, and you can optionally use IWML for frontend layout.
Recommended IDEs and editors:
•Visual Studio Code (VSCode) – A lightweight, powerful editor with excellent support for JavaScript and TypeScript. It’s the recommended editor for most IW17 users.
•Delphi IDE (RAD Studio) – For Delphi users, the traditional IDE continues to support IW17 with familiar tools and project types.
•Any text editor – Since IntraWeb 17 does not require complex build steps, you can also use simple editors like Sublime Text or Notepad++ for small changes.
IW17 lets you work in the environment you're most comfortable with, whether that's a modern code editor, a classic Delphi IDE, or just a plain text editor and a browser.
What are the options for deploying an IntraWeb 17 application and how do I deploy to production?
IntraWeb 17 offers flexible deployment options that work with popular web servers such as Apache and Microsoft IIS, making it easy to integrate with your existing infrastructure.
For Apache, deployment involves a few simple steps:
1.Install Apache (64-bit version recommended for modern systems).
2.Configure the server by adding required MIME types (text/iwml and text/acorn) and setting up custom URL paths using Alias and <Directory> directives.
3.Point the server to your application directory (e.g., /demo/Guess/) by editing httpd.conf and including the IW17-specific configuration file (httpd-iw17.conf).
For IIS, deployment includes:
1.Installing IIS and enabling the required features.
2.Adding the necessary MIME types.
3.Placing your IW17 application files inside the C:\inetpub\wwwroot\IW17 directory.
4.Opening your app at a URL like http://127.0.0.1/IW17/.
In both cases, IntraWeb applications are deployed as static resources and rely on JavaScript and IWML to render and manage behavior in the browser. You can also bundle all required resources in a single folder, making deployment lightweight and highly portable.
For more details, refer to:
Can I use custom HTML/CSS or external JavaScript libraries (like Bootstrap or jQuery) with IntraWeb 17?
Yes, IntraWeb 17 is built with flexibility in mind, and it allows you to integrate any custom HTML, CSS, or external JavaScript libraries just like in traditional web development.
You can:
•Include external stylesheets like Bootstrap or your own .css files by adding <link> tags in your .html or .iwml layout files.
•Add JavaScript libraries (like jQuery, Chart.js, or others) using <script> tags or by referencing them through CDN links.
•Write custom CSS to style your components, either inline, in external files, or embedded in your layout.
•Mix raw HTML and IWML using the HTML or Markdown blocks inside your layout to precisely control rendering.
IntraWeb doesn’t restrict you to its own layout system — it enhances it by letting you mix and match whatever tools you prefer.
How do I navigate between pages or open new forms in IntraWeb 17 (since ShowModal isn’t available)?
In IntraWeb 17, traditional modal form methods like ShowModal from desktop frameworks are not used. Instead, navigation between pages or UI views is done using modern web-based mechanisms, which are more flexible and browser-friendly.
In IntraWeb 17, you can navigate between pages or display different parts of your application in several ways:
•The most direct approach is linking to another .iwml page using a standard hyperlink or a button that sets location.href to the desired path.
IWML
SimpleStack // Button with ID GoToPage and label "Open Page" Button:GoToPage Open Page |
JS
class Main extends IntraWeb.Code { // Method triggered when GoToPage button is clicked WhenGoToPageClicked() { // Perform full page navigation to another IWML page location.href = "/IW17/Demos/Page.iwml"; } } |
•Alternatively, you can use component actions or custom logic in your JavaScript class to dynamically load content using Page.Load.
IWML
SimpleStack Button:LoadDetails Load Details
// Container with ID ContentArea where the external IWML will be loaded LoadTarget:ContentArea |
JS
class Main extends IntraWeb.Code { // Method triggered when LoadDetails button is clicked WhenLoadDetailsClicked() { // Dynamically load the contents of Details.iwml into ContentArea this.ContentArea.Page.Load("/IW17/Demos/Details.iwml"); } } |
•For applications that need multiple views on a single page, you can define multiple layout containers in one .iwml file and toggle their visibility through logic.
IWML
SimpleStack // Horizontal stack of toggle buttons HStack Button:ShowHome Home // Button to show the Home view Button:ShowProfile Profile // Button to show the Profile view
// Stack container shown only when ShowingHome is true Stack:HomeView visible=this.ShowingHome Text Welcome to the Home Page!
// Stack container shown only when ShowingHome is false Stack:ProfileView visible=!this.ShowingHome Text This is your Profile. |
JS
class Main extends IntraWeb.Code { constructor() { super(...arguments); // Flag to track which view is currently shown this.ShowingHome = true; }
// Handler for the "Home" button click WhenShowHomeClicked() { this.ShowingHome = true; // Show the HomeView }
// Handler for the "Profile" button click WhenShowProfileClicked() { this.ShowingHome = false; // Show the ProfileView } } |
•Additionally, you can pass parameters between pages using WebParam() to access values from the URL, such as ?Page=Dashboard.
IWML
SimpleStack // Text element that displays the message based on the URL parameter Text =this.ParamMessage |
JS
class Main extends IntraWeb.Code { constructor() { super(...arguments); // Property that will hold the display message this.ParamMessage = ''; }
// Called when the page is fully loaded WhenPageHasLoaded() { // Get the value of the "Page" parameter from the URL const pageParam = this.Page.WebParam('Page');
// Display a custom message based on the parameter if (pageParam === 'Dashboard') { this.ParamMessage = 'Welcome to the Dashboard!'; } else if (pageParam === 'Settings') { this.ParamMessage = 'You are in the Settings page.'; } else { this.ParamMessage = 'No specific page requested.'; } } } |
IntraWeb 17 embraces a page-based model with support for partial loading, which offers more flexibility than modal dialogs and keeps the UI fully responsive.
Can I use IntraWeb 17 without any server (just static hosting)?
IntraWeb 17 applications require a server-side environment to properly function, even though much of the code (like layout and logic) runs in the browser. This is because IWML files (with .iwml extension) are not plain HTML: they need to be interpreted and transformed by the IntraWeb runtime engine, which acts as a bridge between the layout, logic, and browser.
If you try to open an .iwml file directly (e.g., by double-clicking or opening via file:// in the browser), it will not render correctly — the IntraWeb engine won’t be invoked, and you'll likely see raw text or an error.
To run an IW17 app properly, you need one of the following:
•A local web server, such as Apache or IIS, with correct configuration (e.g., MIME types and alias paths)
•A standalone HTTP server (can be built using Python, Node.js, or even IW itself in Delphi)
•Hosting it on a remote server with proper support for static file serving and MIME configuration
Does IntraWeb 17 support form validation or user input checking?
IntraWeb 17 supports form validation both on the client side (using IWML bindings and JavaScript logic) and the server side (if integrated with backend logic).
IW17 encourages a logic-driven approach, where input validation is handled in the .js file bound to your IWML layout. This allows you to validate user input, show helpful messages, and dynamically enable or disable buttons or controls, all with minimal code.
Let’s say we want to ensure the user enters a number between 1 and 100.
IWML
SimpleStack // Input field bound to this.InputValue (typed by user) Edit:UserInput placeholder="Enter number (1–100)" =this.InputValue
// Text field to show validation error messages Text =this.ErrorMessage
// Submit button is enabled only when there is no validation error Button:SubmitButton Submit enabled=!this.HasError |
JS
class Index extends IntraWeb.Code { constructor() { super(...arguments); // Stores the user input as a string this.InputValue = '';
// Message to show validation errors this.ErrorMessage = '';
// Controls whether the submit button is disabled this.HasError = true; }
// This method is triggered whenever the input text changes WhenUserInputChanged() { // Get the current value entered in the Edit control const val = parseInt(this.UserInput.Text.Value);
// If not a number, show error if (isNaN(val)) { this.ErrorMessage = 'Please enter a valid number.'; this.HasError = true;
// If the number is outside the valid range } else if (val < 1 || val > 100) { this.ErrorMessage = 'Number must be between 1 and 100.'; this.HasError = true;
// Valid input } else { this.ErrorMessage = ''; this.HasError = false; } }
// Triggered when the Submit button is clicked WhenSubmitButtonClicked() { // Show an alert with the entered number alert(`You entered: ${this.InputValue}`); } } |
For simple required checks, you can also use conditional messages or styles:
Text visible=!this.InputValue Please enter something!
IntraWeb 17 gives you full control over input checking:
•Use property binding (=this.Value) to track inputs
•Define error messages and validation logic in the JS class
•Control element states (enabled, visible, etc.) reactively
•You can combine with external libraries (like validator.js) if needed
How should I structure a large IW17 application?
When working on a larger IntraWeb 17 application, organizing your project files clearly and consistently becomes essential. IW17 is very flexible in how it handles structure, but the following best practices can help you keep things clean, scalable, and easy to maintain.
Recommended Folder Structure
You can organize your application into several logical folders within your project:
/YourApp
• /pages # IWML files for different views or screens
• /logic # JavaScript or TypeScript logic classes
• /components # Reusable UI fragments or sub-layouts
• /assets # Images, fonts, stylesheets
• /styles # Global or page-specific CSS
• /data # Optional mock JSON or static data files
Naming Conventions
•Match the name of the .iwml file with its logic class
•Use PascalCase for components and views: UserProfile, AdminPanel
•Use camelCase for variables and property names in logic
Reusing Components
For repeated UI elements (like headers, cards, buttons), create mini layouts in a separate folder (e.g. /components/Card.iwml) and load them inside pages using:
SimpleStack
Load "/IW17/components/Card.iwml"
You can pass data using bindings or parameters, just like normal elements.
Page Routing Strategy
For larger applications, consider:
•Using one IWML file per page and switching between them via location.href = "/MyPage.iwml"
•Or using layout containers and toggling visibility dynamically if you prefer a single-page model
Logic Separation
Keep your page logic simple. If your logic grows too large, extract helpers or services into separate files:
// /logic/api.js
export function getUserById(id) {
return fetch(`/api/users/${id}`).then(res => res.json());
}
Then import and use in your main page logic.