Forum consepet
You are not logged in. Please Login.

Forum consepet > Using AI software > Ui builder instruction book summarized Perplex AI
Announcements
If you don't want to register but you would like to comment login using the temp account. ID sp_cc Password 12345678. If you want me to know who you are leave your first name or handle at the end of your post. http://tiny.cc/energ.


Posted: Aug 19, 2025 5:37:43 am
cgetty



Posts: 137
Registered:
2013-12-25


LINB 3.0 Cookbook – Getting Started Guide

(jsLinb + Visual JS framework for rich web application development)
Preface

    Introduces jsLinb, a cross-browser javascript framework for rich web applications.

    Visual JS: web-based UI builder tool (WYSIWYG, drag/drop, scripting like VB/Delphi).

    Key features: 40+ common UI controls, integrated code editor, broad backend support (PHP, .Net, Java, Python, static HTML), cross-browser compatibility (IE6+, Firefox, Chrome, Safari, Opera).

    Documentation includes Getting Started, Improved Tutorial, Advanced Tutorial.

Chapter 1: Preparation

    Download jsLinb 3.0 from Google Groups or SVN repository (TortoiseSVN recommended for source control).

    Extract package locally or access code directly from SVN.

    Some examples require Apache+PHP+MySQL backend; copy package to Apache web root (default assumed http://localhost/jsLinb/).

    Explore examples (/Examples/) and API documentation (/API/) in browser after setup.

Chapter 2: Hello World

    Setup project folders; create basic helloworld.html with jsLinb code.

    Three ways to render controls onto HTML nodes—recommended is new + property setters + renderOnto().

    Using Designer (simplified and advanced versions) to drag/drop TreeGrid and generate UI code.

    Splitting code for scalable applications: separate HTML from JS source.

    Code Editor features: class outline for navigation, code folding, three modes of code Intellisense, automatic event generation for controls.

Chapter 3: Controls Facebook

    Extensive overview of UI controls: buttons, labels, inputs, lists, containers, dialogs, layouts, menus, trees, grids, and more.

    Key Input behaviors: UI value vs. control value, dirty mark indicator, mask input characters, validation including real-time dynamic validation, error marks and custom error tips.

    ComboInput supports pop-up lists, date/time/color/file pickers, and command buttons.

    Lists and RadioBoxes support item selection with event triggers.

    Containers (Group, Pane, Panel, Block) support nesting child controls.

    Dialog controls with normal, minimized, maximized, and modal modes.

    Layout and multi-page controls (Tabs, Stacks, ButtonViews) with dynamic page loading and control via APIs.

    Menus and toolbars for commands.

    TreeBar/TreeView with selection modes (none, single, multi), group items, expand/collapse behaviors, dynamic loading and destruction.

    TreeGrid: complex grid with headers, rows, sub-rows, multiple display and selection modes.

Chapter 3.13: TreeGrid Details

    Active Modes: none (non-active), row-active, cell-active appearances.

    Selection Modes: none, single/multi row, single/multi cell — selection appearance distinct from active appearance.

    TreeGrid example with hierarchical rows (parent with subrows).

    Columns: configuration of width, movable/resizable columns via drag & drop with prior rules.

    Sorting: default and custom sorting functions.

    Hide/show columns dynamically, customize column headers (style, icon).

    Rows: configure height, styles, row numbers (auto/custom), alternate colors, grouping, preview areas, dynamic updates.

    Cells: support many cell types—label, button, input, textarea, number, currency, progress bar, combo/list/lookup inputs, date/time/color pickers, command/pop boxes.

    Cell styles and dynamic updating.

    Editable states controlled with fine-grained priorities at grid, row, column, cell level; cell editors vary by type (textbox, combobox, date picker, etc.).

    Add/remove rows dynamically.

Chapter 3.14: Other Controls

    ProgressBar with customizable captions.

    Slider, Image, PageBar controls.

Chapter 4: Data Exchanging (Ajax)

    jsLinb is client-side agnostic—works with any backend.

    AJAX wrappers:

        linb.Ajax: xmlHTTPRequest wrapper (same domain, sync/async, get/post, string response).

        linb.SAjax: script tag injection (cross-domain, async only, no POST, returns JS object).

        linb.IAjax: iframe-based (cross-domain, async, get/post, file upload support, returns JS object).

    Automatic selection of AJAX method based on context.

    Using Fiddler for HTTP request debugging recommended.

    File upload supported via linb.UI.IAjax (upload input type).

    Provides request wrapper code example and xml to JSON converter linb.xml.

    Full example included.

Chapter 5: Distributed UI

    For large apps, infrequently used UI modules can be loaded separately (local or remote).

    Using linb.Com and linb.ComFactory for managing distributed UI components and dynamic loading.

    Configuring ComFactory in a config file, loading classes by name, caching singleton instances.

    UI.Tag for automatic child component management.

    Manual component destruction and memory cache clearing.

Chapter 6: Fundamentals

    Popup Windows: alert, confirm, prompt, and custom pop windows.

    Async Execution: wrappers asyRun and resetRun for timed asynchronous calls.

    Skin Switching: three built-in themes (default, vista, aqua) with API to switch globally or per control; supports adding custom skins by copying/modifying skin folders.

    Locale Switching example provided.

    DOM Manipulation via linb.Dom: create/remove nodes, manage attributes and CSS classes, manage events with groups (before, on, after), class name management utilities.

    Drag&Drop: detailed profile object configuration (drag type, shadows, magnetic lines, increments, restricted regions), event handlers for drag lifecycle.

    linb.Template: independent UI wrapper example, creating custom controls via template system.

    Debugging: debug builds, Firebug/DevTools usage, linb.log monitor tool.

Chapter 7: Typical Issues

    Advanced layout examples: docking, linb.UI.Layout, relative layout.

    Drag&Drop issues and solutions, including control dragging among containers.

    List sorting examples.

    Forms: form creation using DataBinder for data-binding and validation; example form with labels, inputs, combo inputs, checkbox, submit handler with validation.

    Custom UI styles: fine-grained CSS style overrides for single instances, per-class styles, global skins with incremental customization of images and CSS.

This summary condenses the entire 138-page tutorial contents into major concepts and actionable points for quick reference and learning.

Profile

Posted: Aug 19, 2025 6:06:02 am
cgetty



Posts: 137
Registered:
2013-12-25


This is part one

This is the entire text version of the limb visual builder 3 text file. I have to paste it in two parts to keep the size under 50,000 bytes. So I need to do it in two parts this is part one.

LINB3.0 Cookbook - Getting Started Guide
linb 2010-7-21 All rights reserved.
Preface 7
Chapter 1. Preparation 8
1.1. Download the package 8
1.2. The package folder 8
1.3. Glance at examples and API 9
Chapter 2. Hello World 10
2.1. The first application 10
2.2. Render onto a html node 11
2.3. Do it in Designer 12
2.4. Application loading process 17
2.5. Code Editor 19
2.5.1. Highlight code from Outline window 20
2.5.2. Code Folding 20
2.5.3. Code Intellisense 20
2.5.3.1. When context doesn't recognize the input string 21
2.5.3.2. Type dot after a recognizable variable 22
2.5.3.3. When use shortcut [Alt+1 ], or dbclick 23
2.5.4. Find the object definition code 23
2.5.5. Generate event code automatically 24
Chapter 3. Controls Facebook 25
3.1. script testing environment 25
3.2. "Hello world" in env.html 26
3.3. Control creation and runtime update 27
3.4. Button related 27
3.4.1. onclick event 28
3.4.2. Boolean Controls 29
3.4.3. link Control 29
3.5. Label related 30
3.6. Input related 30
3.6.1. setValue/setValue/getUIValue/setUIValue 30
3.6.2. Dirty Mark 31
3.6.3. Password Input 31
3.6.4. Multi-lines 32
3.6.5. Input validation 32
3.6.5.1. valueFormat property 32
3.6.5.2. beforeFormatCheck event 33
3.6.6. Dynamic input validation 33
3.6.7. Error Mark 33

3.6.7.1. Default Error Mark 33
3.6.7.2. Validation Tips 34
3.6.7.3. Binding Validation 34
3.6.7.4. Custom Error Mark 34
3.6.8. Mask Input 35
3.6.9. linb.UI.ComboInput 36
3.6.9.1. Pop list for selection 36
3.6.9.2. combobox, listbox and helpinput 36
3.6.9.3. Date Piker 37
3.6.9.4. Time Picker 38
3.6.9.5. Color Picker 38
3.6.9.6. File Picker 39
3.6.9.7. Getter 39
3.6.9.8. Custom Pop Window 40
3.6.9.9. Command Buttons 41
3.6.10. RichEditor 41
3.7. List related 42
3.7.1. A Simple one 42
3.7.2. A little bit complicated 43
3.7.3. RadioBox 44
3.7.4. IconList and Gallery 44
3.7.5. Item selection 45
3.7.6. Container related 45
3.7.7. Pane and Panel 46
3.7.8. Block 47
3.8. Dialog related 47
3.8.1. Normal state 47
3.8.2. Min and Max status 48
3.8.3. Modal Mode 49
3.9. Layout Control 50
3.10. Multi-pages Controls 51
3.10.1. noPanel property 52
3.10.2. ButtonViews types 53
3.10.3. Page selection. 53
3.10.4. Pages 54
3.10.4.1. Close and options Button 54
3.10.4.2. Add/Remove Pages 56
3.10.5. Dynamic content loading 57
3.10.5.1. onIniPanelView 57
3.10.5.2. beforeUIValueSet/afterUIValueSet 57
3.11. Menus and toolbars 58
3.11.1. Pop Menu 58
3.11.2. MenuBar 59
3.11.3. Toolbars 60
3.12. TreeBar and TreeView 61
3.12.1. Three selection mode 61
3.12.1.1. No-selection 61
3.12.1.2. Single-selection 62
3.12.1.3. Multi-selection 62
3.12.2. Group Item 63
3.12.3. Expand all nodes by default 63
3.12.4. Mutex Expand 64
3.12.5. Dynamic Destruction 65
3.12.6. Dynamically loading 65
3.13. TreeGrid 66
3.13.1. Header and Rows 66
3.13.1.1. Sets standard format 67
3.13.1.2. Sets simplified format 67
3.13.2. getHeader 67
3.13.3. getRows 68
3.13.4. Active Modes 69
3.13.4.1. non-active appearance 70
3.13.4.2. row-active appearance 70
3.13.4.3. cell-active appearance 71
3.13.5. Selection Mode 71
3.13.5.1. Non-selection 71
3.13.5.2. Single row selection 72
3.13.5.3. Multi-row selection 73
3.13.5.4. Single cell selection 73
3.13.5.5. Multi-cells selection 73
3.13.6. The Tree Grid 74
3.13.7. Column config 75
3.13.7.1. The first column 75
3.13.7.2. Column width. 76
3.13.7.3. Drag&Drop to modify column width 76
3.13.7.4. Drag&Drop to modify column position 77
3.13.7.5. Default Sorting 77
3.13.7.6. Custom Sorting 78
3.13.7.7. Hide columns 78
3.13.7.8. Setting Cell Types in column header 79
3.13.7.9. column header style 79
3.13.7.10. column header icon 80
3.13.7.11. Update column header dynamically 81
3.13.8. Row config 81
3.13.8.1. Row height 81
3.13.8.2. Drag&Drop to modify row height 82
3.13.8.3. Setting cell type in row 82
3.13.8.4. Row style 83
3.13.8.5. Row numbers 83
3.13.8.6. Custom row numbers 84
3.13.8.7. Alternate Row Colors 85
3.13.8.8. Group 85
3.13.8.9. Preview and Summary region 86
3.13.8.10. Update row dynamically 87
3.13.9. Cell config. 88
3.13.9.1. Cell types 88
3.13.9.2. Cell style 89
3.13.9.3. Update cell dynamically. 90
3.13.10. Editable 90
3.13.10.1. Editable TreeGrid 91
3.13.10.2. Editable column 91
3.13.10.3. Editable row 92
3.13.10.4. Editable cell 92
3.13.10.5. The Editor 93
3.13.10.6. Custom the editor 94
3.13.11. Add/Remove rows 95
3.14. Other standard controls 96
3.14.1. ProgressBar 96
3.14.2. Slider 97
3.14.3. Image 98
3.14.4. PageBar 98
Chapter 4. Data exchanging(Ajax) 99
4.1. Fiddler 100
4.2. To get the contents of the file 100
4.3. Synchronous data exchange 100
4.4. Cross-domain 101
4.4.1. To monitor SAjax 101
4.4.2. To monitor IAjax 102
4.5. File Upload 103
4.5.1. Selecting upload file with ComboInput 103
4.5.2. Upload by IAjax 104
4.6. A request wrapper for real application 104
4.7. xml Data 105
4.8. An overall example 106
Chapter 5. Distributed UI 107
5.1. Shows dialog from a remote file 107
5.2. linb.Com and linb.ComFactory. 108
5.2.1. linb.ComFactory config 108
5.2.2. linb.Com.Load 109
5.2.3. newCom and getCom 110
5.2.4. linb.UI.Tag 111
5.2.5. Destroy com 111
5.2.6. If com exists in memory 111
Chapter 6. Some fundamental things 112
6.1. Pop-up window 112
6.1.1. alert window 112
6.1.2. confirm window 112
6.1.3. prompt window 113
6.1.4. pop window 113
6.2. Asynchronous execution 113
6.2.1. asyRun 113
6.2.2. resetRun 114
6.3. Skin switcher 114
6.3.1. Switch skin for whole application 114
6.3.2. Change skin for a single control 114
6.4. Locale switcher 115
6.5. DOM Manipulation. 115
6.5.1. Node generation and insertion 116
6.5.2. Attributes and CSS 116
6.5.3. className 117
6.5.4. Dom events 117
6.5.5. Node Drag&Drop. 118
6.5.5.1. Drag&Drop profile 119
6.5.5.2. Events in Drag&Drop 120
6.6. linb.Template 121
6.6.1. example 1 121
6.6.2. example 2 122
6.6.3. A SButton based on linb.Template 123
6.7. About Debugging 124
6.7.1. The code package for debugging 124
6.7.2. Debugging Tools 124
6.7.3. jsLinb Monitor Tools 125
Chapter 7. Some typical issues 126
7.1. Layout 126
7.1.1. Docking 126
7.1.2. linb.UI.Layout 126
7.1.3. Relative Layout 127
7.2. UI Control's Drag&Drop 129
7.2.1. Drag&Drop control among containers 129
7.2.2. List sorting 1 129
7.2.3. List sorting 2 130
7.3. Form 131
7.3.1. Form 1 131
7.3.2. DataBinder 132
7.4. Custom UI styles 133
7.4.1. Custom only one instance only - 1 133
7.4.2. Custom only one instance only - 2 134
7.4.3. Custom only one instance only - 3 134
7.4.4. Custom only one instance only - 4 134
7.4.5. Custom only one instance only - 5 135
7.4.6. Custom only one instance only - 6 135
7.4.7. Custom style for an UI Class 136
7.4.8. Custom style for all UI Class - skin 136
7.4.8.1. First: Copy 136
7.4.8.2. Second: Little by little, modify pictures and CSS 137
The end 138

Preface

"jsLinb" is a Cross-Browser javascript framework with cutting-edge functionality for rich web application. And "Visual JS" is a web based tool for AJAX RIA application UI rapid design and involved scripts programming. With this powerful builder, developers can build your web application just like what you do in VB or Delphi.

Features & Resource

1. WYSIWYG GUI builder. Do everything by drag & drop. Significant development time reduction.
2. Source code editor Integrated (Code Intellisense, Code folding, Syntax Check and Undo/Redo).
3. More than 40 common components, including Tabs, Dialog, TreeGrid, TimeLine and many other web GUI components.
4. Rich client-side API, works with any backend (php, .Net, Java, python) or static HTML pages. Extremely easily to build php application with php server side wrappers.
5. Wide cross-browser compatibility, IE6+, firefox1.5+, opera9+, safari3+ and Google Chrome.
6. Detailed Manual and Full API Documentation with tons of samples. Ever increasing code snippets.
7. Compatible with jquery, prototype, mootools and other frameworks.
8. Dual licenses - Commercial License and LGPL license both available.

Cookbooks are expected to include three parts: Getting Started Guide, Improved Tutorial, and Advanced Tutorial.

This tutorial is the first part: Getting Started Guide. Go to http://www.linb.net for the latest information.
If you have any good suggestions, you can contact me at linb.net [at] gmail.com

Chapter 1. Preparation

First of all, note that all instances of this tutorial are based on version 3.0. Therefore, our first task is to download the 3.0 release package, and to establish the local environment.

1.1. Download the package

3.0 Release package can be downloaded from http://groups.google.com/group/linb/files. It's the latest stable 3.0 version, but not the latest code. I suggest you get the latest 3.0 code from SNV. For those who are not familiar with SNV, should learn how to use SNV first. After all, a lot of open-source projects use SNV to manage code.  SNV requires a client program to connect to what is called a "repository" where the files are stored. On commonly used SNV client is called TortoiseSNV, which is freely available. Other clients exist, but TortoiseSNV is recommended due to its simplicity of use.

3.0 version "repository" URL: http://linb.googlecode.com/svn/trunk/jsLinb3.0/ .

1.2. The package folder

If you downloaded package from google group, extract the package to a local folder. If you fetch the code from SVN, does not need to extract.

The contents of the package folder

By default, most of the examples in the package can be run in local disk directly, but a small number of examples need php background environment, or mysql database. In this case, you need to prepare

Apache server (version 2 and above), php (version 5 and above) and mysql (version 5 and above). At last, copy the package to apache web directory.

1.3. Glance at examples and API

If your Apach/php environment works well, after you copied the package folder to Apache's web directory (this tutorial assumes that your root directory is http://localhost/jsLinb/), you should be able to open the page with your browser: http://localhost/jsLinb/.

You can browse http://localhost/jsLinb/Examples/ for examples, and http://localhost/jsLinb/API/ for API.

A simple glance at API is strongly recommended. Learn about how to search a specific API, and how to run the inner code examples.

Chapter 2. Hello World

2.1. The first application

As many would expect or not expect, the first example is "Hello World".

Now, create a new folder "mycases" in the package folder (again, (this tutorial assumes that your root directory is http://localhost/jsLinb/), add a sub folder "chapter1" in it, and create a file named "helloworld.html" in "chapter1". Enter the following code:

cases/chapter1/helloworld.html

There is a cases folder in the package folder. You can find the source code for each example in this tutorial.

You can double-click the helloworld.htm1 to open the file.
Or open URL http://localhost/jsLinb/cases/chapter1/helloworld.html in your browser (firefox or chrome is recommended here). And you can see the following result:

You may have noticed, no lib CSS file was included in the html file. Yes, jsLinb generate CSS automatically, no lib CSS.
File "linb-all.js" contains all codes except several advanced controls (Button, Input, CombInput,

Tabs, TreeBar, and TreeGrid etc.). This file can be found in "runtime/js" folder.

2.2. Render onto a html node

"Replace an html node (such as a div) with an advanced control." A project manager said. "Our web page engineer is responsible to design an html file including a DIV with a unique ID, and javascript engineer is responsible to build an advanced UI control, and replace that DIV."

The following example in file chapter1/renderonto.html:

cases/chapter1/renderonto.html

The result is:

There are two ways to get the same result; codes were in renderonto2.html and renderonto3.html.

renderonto2.html :


linb.main(function(){
(new linb.UI.TreeGrid({ gridHandlerCaption:'grid', rowNumbered:true, header:['col 1','col 2','col 3'],

Gives properties directly

});

rows:[['a1','a2','a3'],['b1','b2','b3'],['c1','c2','c3'],
['d1','d2','d3'],['e1','e2','e3'],['f1','f2','f3']]
})).renderOnto('grid');

cases/chapter1/renderonto2.html

renderonto3.html :

cases/chapter1/renderonto3.html
These three approaches generated the same result. You can use any of those in your project according to your habits. But the first approach (using new and setXX) is recommended.

2.3. Do it in Designer

There are two types of designer in jsLinb: One is a simplified version, the other one is an advanced version integrated with document management features. The purposes of the two designers are to reduce development time on UI layout. We only use the simplified version in this introduction

tutorial.

Go to http://localhost/jsLinb/VisualJS/UIBuilder.html for the simplified one.

Now, we are trying to create the previous section's grid example in Designer.

1. Open the navigators group in "Tools Box", and drag the "TreeGrid" control to the Canvas area.

2. Click to select the "treegrid"

3. Sets this grid's properties according to the following picture.
* Sets dock to 'none';
* Sets rowNumbered to false;
* Sets gridHandlerCapion to 'gird'.

4. Sets header and rows

Sets header data

Sets rows data
5. Click to select the grid, adjust its position and size
6. Now, switch to "Code" view

Above code is serialized by Designer. Header data and rows data will not look the same as your setting.
7. Click "Run" Button to open the test window, you will see the same result with section 2.2.

8. Copy the code from this test page, and paste to a new file designer.grid.html.

cases/chapter1/designer.grid.html

2.4. Application loading process

In section 2.3, we put all html and javascript code in a single file. For a bigger application, it's not a wise solution. A real application may be include dozens of classes. For a developer, maintaining each class in a separate file is always a must.
OK. Let's separate "designer.grid.html" into two files --> designer.grid.standard.html, and

App/js/index.js.

designer.grid.standard.html is:

cases/chapter1/designer.grid.standard.html
App/js/index.js is:

cases/chapter1/App/js/index.js

When we open designer.grid.standard.html in Browser, the loading process will be:

2.5. Code Editor

By the way, in order to get better performance, firefox and chrome are recommended here.

There are two views in Builder: "Design view" and "Code" view. The default view is "Design view". Click "Code" tab to switch to "Code" view.

2.5.1. Highlight code from Outline window

"Class Outline" is located in the left side of "Code" view. By clicking any member or method name in "Class Outline", Builder will highlight its code in "Editor window", and scroll "Editor window" to show the code.

2.5.2. Code Folding

To make your code view more clear to read and understand, jsLinb Builder lets you fold certain parts of it. Click the left side "plus" or "minus" will fold or expand the block code.
Note: Due to the browser's poor performance on iframe, please try not to frequent collapse or expand the large body function or object. Chrome's performance is better than others.

2.5.3. Code Intellisense

Three types Code Intellisense are supported.
* When context does not recognize the input string;
* Type dot after a recognizable variable

* When use shortcut [Alt+1 ], or dbclick a recognizable variable

Keyboard actions for Code Intellisense pop Window:
* "up": Focus to next item in code list
* "down": Focus to previous item in code list
* "enter": Select the current focused item, and input to editor window
* "esc": Close the pop window
* Other visible chars: Find and focus the first matched item

2.5.3.1. When context doesn't recognize the input string

When you input a string, if editor doesn't recognize this string, it will pop a list window including local variables, global variables, global functions and javascript reserved keywords. In the below picture, type 't' will trigger editor to pop a list window, "this" is the default focused item.

If the input string is "fo", the "for loop statement" will be the default focused item.

In this case, "Enter" keypress will cause "for loop statement" code to be inserted into the editor automatically.

2.5.3.2. Type dot after a recognizable variable

After an editor recognizable variable, if you type char ".", editor will pop an available members and functions list for the variable.
Chainable methods can show Code Intellisense window too.

2.5.3.3. When use shortcut [Alt+1 ], or dbclick

When a variable was focused, press shortcut [Alt+1] will trigger editor to pop the Code Intellisense window. Double click this variable string will get the same result.

2.5.4. Find the object definition code

In "Design View", double click a control will cause:
1) Switch to "Code" view;
2) Highlight the control's definition code;
3) Scroll the definition code to view.

2.5.5. Generate event code automatically

In the "Design View", select a control; the right side "Component config" window will be refreshed. Find an event (e.g. onclick event), click its event button will cause:
1) Switch to "Code" view;
2) Create event code, and insert into the editor;
3) Scroll the event code to view.

Chapter 3. Controls Facebook

Many beginners are particularly interested in UI controls. In this chapter we'll give a rough look at the basic controls. Since each control has a lot of functions, here is a brief introduction, it is impossible to explain all the functions. You can browse API to understand the specific function of each control in detail!

3.1. script testing environment

At first, we have to build a testing environment for executing example codes . About Browsers, firefox is recommended, if it does not like firefox, ie8 or chrome is ok too.

For firefox:
1. You need firefox and firebug;
2. Open URL cases/env.html in firefox;
3. Open firebug console, switch to the multi-line mode

For IE8:
1. You need IE8;
2. Open URL cases/env.html ;
3. Open developer tools, switch to the multi-line mode

For IE8:
4. You need the latest Chrome;
5. Open URL cases/env.html ;
6. Open developer tools

There's a "Clear" button in cases/env.html, You can click this button to clean up the current page's DOM. In some cases, you want to clean up both DOM and memory, press 'F5' to refresh your browser.

3.2. "Hello world" in env.html

Inputs the following code into script window, and run it.

Output:

Click "Clear" button to clean the DOM.

3.3. Control creation and runtime update

There are three approaches to create jsLinb control.

// Approach 1 linb.create("SButton", {
caption: "Using linb.create function", position: "relative"}
).show();

// Approach 2
(new linb.UI.SButton({
caption: "Using new and key/value pairs", position: "relative"
})).show();

// Approach 3
(new linb.UI.SButton())
.setCaption("Using new and get/set")
.setPosition("relative")
.show();

We use new/setXX mode in Desinger

The above three approaches will create entirely consistent UI.

You can use setXXX function to update the control after it was rendered into DOM (runtime update).

3.4. Button related

This section relates to the following controls: linb.UI.link, linb.UI.SButton, linb.UI.Button, linb.UI.SCheckBox and linb.UI.CheckBox.

3.4.1. onclick event

var btn=new linb.UI.SButton(); btn.setCaption("Click Me")
.onclick(function(){ linb.alert("Hi","You are great!");

Sets caption

Adds onclick evnet

});
btn.show();

Output:

Input:

Output:

3.4.2. Boolean Controls

There are three controls can represent and modify Boolean value:
Input:

var btn= (new linb.UI.Button({position: "relative", caption:"Button", type:"status"})).show(); var scb= (new linb.UI.SCheckBox({position: "relative", caption:" SCheckBox"})).show(); var cb= (new linb.UI.CheckBox({position: "relative", caption:" CheckBox"})).show();

_.asyRun(function(){ btn.setValue(true,true); scb.setValue(true,true); cb.setValue(true,true);
},1000);

Output:

Sets position to 'relative'


Sets values to true after 1 second

3.4.3. link Control

You can take linb.UI.link as a simple button.

3.5. Label related

This section relates to the following controls: linb.UI.SLabel, linb.UI.Label and linb.UI.Div. These three controls can be used as "label", linb.UI.SLabel is the simplest one, but it's enough for most cases; If you need more complex feature like shadow, resizer or border, you should choose linb.UI.Label; Or if you want to input more complex html code in the control, linb.UI.Div is better. Input:
Output:

3.6. Input related

This section relates to the following controls: linb.UI.Input, linb.UI.ComboInput and linb.UI.RichEditor. linb.UI.ComboInput is an enhanced version of linb.UI.Input, it can input/edit value through a pop window; linb.UI.RichEditor is a rich text input/edit control.

3.6.1. setValue/setValue/getUIValue/setUIValue

From the users point of view, value controls (all derived from the linb.absValue control) in jsLinb has two values has two values: the "UI value"(getUIValue/setUIValue) and the "control value"(getValue/setValue).

"UI value" dose not always equal to "control value". For example, for an empty input control
1. Keyboard inputs "abc": "UI value" is "abc", "control value" is empty;
2. Calls "updateValue" function: "UI value" is "abc", "control value" is "abc";
3. Calls "setValue('bcd')": "UI value" is "bcd", "control value" is "bcd";
4. Calls "setUIValue('efg')": "UI value" is "efg'", "control value" is "bcd"
5. Calls "resetValue('x')": "UI value" is "x", "control value" is "x";

3.6.2. Dirty Mark

If the control's dirtyMark property is set to true, when "UI value" does not equal to "control value", a "Dirty Mark" will appear. The "Dirty Mark" will disappear when "UI value" equals to "control value".

var input = (new linb.UI.Input()).show();
_.asyRun(function(){ input.setUIValue('uivalue');
},1000);

Dirty Mark appears

_.asyRun(function(){ input.updateValue(); input.setDirtyMark (false);
},2000);
_.asyRun(function(){ input.setUIValue('uivalue 2');
},3000);

Dirty Mark disappears

If DirtyMark is disabled Nothing happen


3.6.3. Password Input

Sets Input's type property to "password".
Input:

Output:

3.6.4. Multi-lines

Sets Input's multiLine property to true.
Input:

Output:

3.6.5. Input validation

3.6.5.1. valueFormat property

"valueForamt" property represents a regular expression.

Input:

Executes the above code, inputs some charts, and let it lose the mouse focus, the "Error Mark" will appear.

3.6.5.2. beforeFormatCheck event

Input:

In above methods, "beforeFormatCheck" has priority. That means, when "beforeFormatCheck" returns 'false', "valueFormat" property will be ignored.

3.6.6. Dynamic input validation

In previous section examples, "Error Mark" appears only when the control loses focus. If you want to a real-time input validation , you need to set dynCheck property to true.

3.6.7. Error Mark

3.6.7.1. Default Error Mark

The default "Error Mark" is an icon at the right side of Input.

3.6.7.2. Validation Tips

There are three tool tips in linb.UI.Input control:
* tips: the default tool tips
* tipsOK: the valid tool tips
* tipsErr: the invalid tool tips
Input:

Output:
3.6.7.3. Binding Validation

You can bind the validation tips to a linb.UI.Div, linb.UI.SLabel or linb.UI.Span.
Input:

Output:
3.6.7.4. Custom Error Mark

We can custom "Error Mark" in beforeFormatMark event.
Input:
Output:

3.6.8. Mask Input

Mask Input examples:

In chapter2Inputindex.html

There is a mask property in linb.UI.Input control. It's a string. In this string,
* '~' represents [+-]
* '1' represents [0-9]
* 'a' represents [A-Za-z]
* 'u' represents [A-Z]
* 'l' represents [a-z]
* '*' represents [A-Za-z0-9]
* Other visible char represents itself
Input:

Output:

3.6.9. linb.UI.ComboInput

linb.UI.ComboInput is an advanced Input.


3.6.9.1. Pop list for selection

When type property was set to "combobox", "listbox" or "helpinput", click the command button will trigger to pop a list window for selection.

3.6.9.2. combobox, listbox and helpinput

There's an items property in linb.UI.ComboInput (And all list related controls have this property too). Usually, we set items as an simple single layer array (like "[ia', 'ib', 'ic']"). The lib? will convert this simple array to inner format:

1) combobox: Not readonly. The pop List shows "caption"; Input box shows "caption"; getValue returns "caption".
2) listbox: Readonly. The pop List shows "caption"; Input box shows "caption"; getValue returns "id.
3) helpinput: Not readonly. The pop List shows "caption"; Input box shows "id"; getValue returns "id".
Input:

3.6.9.3. Date Piker

Sets type property to "date".
Input:

Output:

3.6.9.4. Time Picker

Sets type property to "time".
Input:

3.6.9.5. Color Picker

Sets type property to "color".
Input:

Output:

3.6.9.6. File Picker

Sets type property to "upload".

Note: use getUploadObj function to get the file's handler

3.6.9.7. Getter

Sets type property to "getter".
Input:

var ctrl=linb.create('ComboInput')
.setType('getter')
.beforeComboPop(function(profile){ profile.boxing().setUIValue(_.id())
})
.show();

Sets value in beforeComboPop event

3.6.9.8. Custom Pop Window

Sets type property to "cmdbox", or "popbox".

3.6.9.9. Command Buttons

You can use commandBtn property to add an command button into ComboInput control. The following types are available for commandBtn property:
* "none": no command button
* "save": It's a save button
* "add" : It's a add button
* "remove" : It's a remove button
* "delete" : It's a delete button
* "custom" : custom button ( sets imageClass or mage,/imagePos to custom it)

3.6.10. RichEditor

3.7. List related

This section relates to the following controls: linb.UI.List, linb.UI.RadioBox and linb.UIIconList and linb.UI.Gallery.

3.7.1. A Simple one
linb.create("List")
.setItems(["Item one","Item two","Item tree"])
.onItemSelected(function(profile,item){ linb.message(item.id);
onItemSelected event

})
.show();

3.7.2. A little bit complicated

The above special render function applies to any control's caption property (e.g. linb.UI.Button, linb.UI.Label); and any control's sub item caption property (e.g. linb.UI.List, linb.UI.TreeBar) .

3.7.3. RadioBox

linb.UI.RadioBox is derived from linb.UI.List.

3.7.4. IconList and Gallery

Both are derived from linb.UI.List.

3.7.5. Item selection

You can use "setUIValue" function to select a item in List, or use "fireItemClickEvent" function to get the same result. "fireItemClickEvent" function will trigger "onItemSelected" event, "setUIValue" won't.


3.7.6. Container related

This section relates to the following controls: linb.UI.Group, linb.UI.Pane , linb.UI.Panel,

linb.UI.Block.

linb.UI.Dialog, linb.UI.Layout and linb.UI.Tabs /Stacks/ButtonViews are container controls too, we will give an example? these controls in separate sections.

Container is those controls that can have child controls. In jsLinb Designer, you can drag a child control and drop it into a container control. Just like this,

linb.create({
key:"linb.UI.Group", children:[[{key:"linb.UI.SButton"}]]
}).show();

In children object

3.7.7. Pane and Panel

linb.UI.Pane is a single node control. It's derived from linb.UI.Div. linb.UI.Panel has a border and a

title bar.
Input:


(new linb.UI.Pane)
.append(new linb.UI.SButton)
.show()

You can't see output, It's transparent
3.7.8. Block

3.8. Dialog related

3.8.1. Normal state

3.8.2. Min and Max status

3.8.3. Modal Mode

3.9. Layout Control

var block=linb.create("Block").setWidth(300).setHeight(300); var layout=linb.create("Layout",{items:[
{id:'before',
pos:'before', size:100, cmd:true
},{id:'after',pos:'after',size:100}

Append into a block

]});
block.append(layout).show();

3.10. Multi-pages Controls

Three multi-pages controls: linb.UI.Tabs, linb.UI.Stacks and linb.UI.ButtonViews.

3.10.1. noPanel property

For linb.UI.Tabs and linb.UI.ButtonViews, when "noPanel" property was set to true, they no longer are the container control. So, don't append any children control to tabs in this case.

3.10.2. ButtonViews types

There are three properties used to define the ButtonViews' layout:

* barLocation: Used to set the location of the command button bar. In 'top','bottom','left','right'.
* barHAlign: Used to set command buttons horizontal alignment In 'left', 'right'. Only for barLocation is 'top' or 'bottom'
* barVAlign: Used to set command buttons vertical alignment In 'left', 'right'. Only for barLocation is 'left' or 'right'

The below picture shows all the eight possible ButtonViews layouts:

In chapter2ButtonViewsindex.html

3.10.3. Page selection

You can use "setUIValue" function to select a page, or use "fireItemClickEvent" function to get the same result. "fireItemClickEvent" function will trigger "onItemSelected" event, "setUIValue" won't.

3.10.4. Pages

3.10.4.1. Close and options Button

Each page can hold a "close" button and a "options" button. Click this button will close the page.

Two events can be fired when "close" button was clicked:
* beforePageClose: Fired before user clicked the close button on a page. If returns false, the page won't be closed.
* afterPageClose: Fired after user clicked the close button on a page.

3.10.4.2. Add/Remove Pages

3.10.5. Dynamic content loading

3.10.5.1. onIniPanelView

3.10.5.2. beforeUIValueSet/afterUIValueSet

It's a fine-grained mechanism.

3.11. Menus and toolbars

3.11.1. Pop Menu

3.11.2. MenuBar

3.11.3. Toolbars

3.12. TreeBar and TreeView

3.12.1. Three selection mode

All controls derived from linb.UI.absList have three options mode.

3.12.1.1. No-selection

3.12.1.2. Single-selection

3.12.1.3. Multi-selection

3.12.2. Group Item

3.12.3. Expand all nodes by default

3.12.4. Mutex Expand

3.12.5. Dynamic Destruction

3.12.6. Dynamically loading

3.13. TreeGrid

3.13.1. Header and Rows

The header property and rows property in TreeGrid are Array of key/value pairs, like,

It can be written as a simplified format,

When call setHeader/setRows, the simplified format can be convert to,

3.13.1.1. Sets standard format

3.13.1.2. Sets simplified format

var block=new linb.UI.Block({width:200,height:200}).show();

var tg=new linb.UI.TreeGrid; tg.setRowHandler(false)
.setHeader(["Name", "Age"])
.setRows([['Jack', 23], ['John', 32]])
.show(block);

Only id input

Only value input

3.13.2. getHeader

Calls getHeader function to return the header data. There are three format,
* getHeader(): returns memory data;
* getHeader("data"): returns the standard format data;
* getHeader("min"): returns the simplified format data;

3.13.3. getRows

Calls getRows function to return the rows data. Similarly, there are three format,
* getRows (): returns memory data;
* getRows ("data"): returns the standard format data;
* getRows ("min"): returns the simplified format data;
The rows memory data in firebug:

3.13.4. Active Modes

There are three active modes for TreeGrid:
* non-active appearance : activeMode is "none";
* the row-active appearance: activeMode is "row" ;
* the cell-active appearance: activeMode is "cell";

3.13.4.1. non-active appearance

non-active appearence

3.13.4.2. row-active appearance

3.13.4.3. cell-active appearance

3.13.5. Selection Mode

There are five selection modes for TreeGrid:
* Non-selection: activeMode is "none", or selMode is 'none'
* Single row selection: activeMode is "row", and selMode is 'single'
* Multi-rows selection: activeMode is "row", and selMode is 'multi'
* Single cell selection: activeMode is "cell", and selMode is 'single'
* Multi-cells selection: activeMode is "cell", and selMode is 'multi'


3.13.5.4. Single cell selection

3.13.5.5. Multi-cells selection

3.13.6. The Tree Grid

var block=new linb.UI.Block({width:200,height:200}).show();

var tg=new linb.UI.TreeGrid; tg.setRowHandlerWidth(20)
.setHeader([
{id:"col1", caption:"Name"},
{id:"col2", caption:"Age", width:40}
]).setRows([
{id:"row1",cells:['Jack',23]},
{id:"row2",cells:['John',32],
sub:[{id:"row21",cells:['Tom',24]},
{id:"row22",cells:['Bob',25]}

Row header is a must for tree grid

A row has sub rows

]}
]).show(block)

3.13.7. Column config

3.13.7.1. The first column

In order to show the first column, you have to set rowHandler to [true].
Input:

var block=new linb.UI.Block({width:200,height:200}).show();

var tg=new linb.UI.TreeGrid; tg.setRowHandlerWidth(80)
.setGridHandlerCaption("Name")
.setHeader([
{id:"col1", caption:"Age", width:40}
]).setRows([
{id:"row1",caption:'Jack',cells:[23]},
{id:"row2",caption:'John',cells:[32],

Sets row handler's width

sub:[{id:"row21",caption:'Tom',cells:[24]},
{id:"row22",caption:'Bob',cells:[25]}
]}
]).show(block)

3.13.7.2. Column width

3.13.7.3. Drag&Drop to modify column width

"colResizer" property in TreeGrid determines whether the column width can be modified with Drag&Drop. Each column can include a "colResizer" property too. The "colResizer" property in column has higher priority than in TreeGrid.
In jsLInb, "fine-grained Setting has higher priority than coarse-grained" is a base rule.

3.13.7.4. Drag&Drop to modify column position

var block=new linb.UI.Block({width:240,height:200}).show(); var tg=new linb.UI.TreeGrid;

tg.setRowHandlerWidth(80)
.setColMovable(false)

End of part one


Last edited by: cgetty on Aug 19, 2025 6:17:54 am
Profile

Posted: Aug 19, 2025 6:15:42 am
cgetty



Posts: 137
Registered:
2013-12-25


This is part two of the instruction manual free oi builder
coarse-grained setting

.setGridHandlerCaption("Name")
.setHeader([
{id:"col1", caption:"Age", width:40},
{id:"col2", caption:"Part-time", width:90,colMovable:true}
]).setRows([
{id:"row1",caption:'Jack',cells:[23, true]},
{id:"row2",caption:'John',cells:[32, false]}
]).show(block)

fine-grained setting

3.13.7.5. Default Sorting

3.13.7.6. Custom Sorting

var block=new linb.UI.Block({width:240,height:200}).show(); var tg=new linb.UI.TreeGrid;
tg.setRowHandlerWidth(80)
.setGridHandlerCaption("Name")
.setHeader([
{id:"col1", caption:"Age", width:40},




Custom sorting function

{id:"col2", caption:"Part-time", width:90,sortby:function(x,y){return -1}}
]).setRows([
{id:"row1",caption:'Jack',cells:[23, true]},
{id:"row2",caption:'John',cells:[32, false]}
]).show(block)

3.13.7.7. Hide columns

3.13.7.8. Setting Cell Types in column header

3.13.7.9. column header style

3.13.7.10. column header icon

3.13.7.11. Update column header dynamically

3.13.8. Row config

3.13.8.1. Row height

Input:
3.13.8.2. Drag&Drop to modify row height

3.13.8.3. Setting cell type in row

3.13.8.4. Row style

3.13.8.5. Row numbers

3.13.8.6. Custom row numbers

3.13.8.7. Alternate Row Colors

3.13.8.8. Group

var block=new linb.UI.Block({width:240,height:200}).show(); var tg=new linb.UI.TreeGrid;
tg.setRowHandlerWidth(80)
.setGridHandlerCaption("Name")
.setHeader([
{id:"col1", caption:"Age", width:40, type: "number"},
{id:"col2", caption:"Full-time", width:90, type: "checkbox"}

]).setRows([
{id:"row1",caption:'Jack',cells:[23]},
{id:"row2",caption:'John',cells:[32],group:true,
sub:[{id:"row21",caption:'Tom',cells:[24]},
{id:"row22",caption:'Bob',cells:[25]}

It's a group row

]}
]).show(block)

3.13.8.9. Preview and Summary region

3.13.8.10. Update row dynamically

3.13.9. Cell config

3.13.9.1. Cell types

These types are support:
* 'label': readonly text;
* 'button': the button;
* 'input': single line input;
* 'textarea': multi lines input;
* 'number': number only input;
* 'currency': currency only input;
* 'progress': the progress appearance;
* 'combobox': combo input;
* 'listbox': readonly combo input;
* 'getter': for getting data;
* 'helpinput': help data input;
* 'cmdbox': command box input;
* 'popbox': pop box input;
* 'time': time input;
* 'date': date input;
* 'color': color input;

var block=new linb.UI.Block({width:240,height:200}).show(); var tg=new linb.UI.TreeGrid;
tg.setRowHandlerWidth(80)
.setColSortable(false)
.setGridHandlerCaption("Name")
.setHeader([
{id:"col1", caption:"Age", width:40, type: "number"},
{id:"col2", caption:"Full-time", width:90, type: "label"}
]).setRows([
{id:"row1",caption:'Jack',cells:[23, true]},

Setting in column header data

Setting in cell (has priority)

{id:"row2",caption:'John',cells:[32, {value:false, type: "checkbox"}] }
]).show(block)

3.13.9.2. Cell style

3.13.9.3. Update cell dynamically

3.13.10. Editable

"editable" property in TreeGrid determines whether the TreeGrid is editable or not . Each column / row / cell has this property too. Those setting follow "Fine-grained priority principle".

* TreeGrid's editable =>false; cell's editable=>true: only this cell is editable
* TreeGrid's editable =>false; column header's editable=>true: only this column is editable
* TreeGrid's editable =>false; row's editable=>true: only this row is editable
* TreeGrid's editable =>true; cell's editable=>true: only this cell is uneditable
* TreeGrid's editable =>true; column header's editable=>false: only this column is uneditable
* TreeGrid's editable =>true; row's editable=> false: only this row is uneditable

It should be noted that, cells in Row handler are uneditalbe; cells with 'label' or 'button' type are uneditable.


3.13.10.1. Editable TreeGrid

3.13.10.2. Editable column

3.13.10.3. Editable row

3.13.10.4. Editable cell

3.13.10.5. The Editor

When a cell is set to editable, "active this cell" will show a corresponding editor. There are the following editors for different cell types.
* 'label': readonly; no editor
* 'button': readonly; no editor
* 'input': normal linb.UI.Input control
* 'textarea': multi lines linb.UI.Input control
* 'number': number only linb.UI.Input control
* 'currency': currency only linb.UI.Input control
* 'progress': linb.UI.ComboInput control, spin
* 'combobox': linb.UI.ComboInput control, combobox
* 'listbox': linb.UI.ComboInput control, listbox
* 'getter': linb.UI.ComboInput control, getter
* 'helpinput': linb.UI.ComboInput control, helpinput
* 'cmdbox': linb.UI.ComboInput control, cmdbox
* 'popbox': linb.UI.ComboInput control, popbox
* 'time': linb.UI.ComboInput control, time
* 'date': linb.UI.ComboInput control, date
* 'color': linb.UI.ComboInput control, color

3.13.10.6. Custom the editor

3.13.11. Add/Remove rows

3.14. Other standard controls

3.14.1. ProgressBar

linb.create('ProgressBar')
.setCaptionTpl("{value}% finished!")
.setValue(80)

Sets text display template

.show();

percentage
3.14.2. Slider

3.14.3. Image

3.14.4. PageBar

Chapter 4. Data exchanging(Ajax)

jsLinb is a client-side solution, it can work with any backend (php, .Net, Java, python) or static HTML pages. Client-side and backend is completely decoupled. Client-side does not need to care what kind of technique is used in the backend. Client-side sends request to, and gets response from a given backend service(e.g. JSON service, REST service) .

There are three IO class in jsLinb:
* linb.Ajax: An AJAX wrapper for xmlHttp object. It's features:
* Can only access the same domain by default;
* Works both synchronous and asynchronous;
* Works both 'get' and 'post' methods;
* Returns string.
* linb.SAjax: An AJAX wrapper for "script tag". It's features:
* Cross domain;
* Asynchronous only;
* Can not post data;
* Returned content is packaged as javascript's object
inb.SAjax  send  request data  includes  a  "callback"  parameter  (default  is
"linb.SAjax.$response"), and a "id" parameter ( the uniquely identify).
Server's return data must be the following format:


* linb.IAjax: An AJAX wrapper for "iframe". It's features:
* Cross domain;
* Asynchronous only;
* Can update file;
* Works both 'get' and 'post' methods;
* Returned content is packaged as javascript's object
inb.IAjax send request data includes an "id" parameter ( the uniquely identify).
Server's return data must be the following format:


"linb.request" function can choose an appropriate class from linb.Ajax, linb.SAjax or linb.IAjax automatically, according to requested domain, 'GET/POST' method and other information.

4.1. Fiddler

In order to understand the data exchanges process better, you need a tool like Fiddler to monitor network traffic.

Go to http://www.fiddler2.com/fiddler2/ to get Fiddler.

Fiddler can configure IE proxy automatically, but if you are in firefox, chrome or opera, you need to configure the proxy by manual (Fiddler proxy: 127.0.0.1:8888). Of course, you can find some firefox proxy plug-ins to help you.

4.2. To get the contents of the file

linb.Ajax can get file contents easily.


In Fiddler:

4.3. Synchronous data exchange

Only linb.Ajax support synchronous data exchanging.

In fiddler:
The request:

The response:

This is an asynchronous request:


4.4. Cross-domain

linb.SAjax and linb.IAjax can be used for calling Cross Domain Web Services. But only linb.IAjax can post data and upload file.

4.4.1. To monitor SAjax

Code:

In Fiddler:

4.4.2. To monitor IAjax

In Fiddler:

By default, IAajax use "POST" method, you can specify method in options.

4.5. File Upload

Only linb.UI.IAjax can upload file.
This code in this section is in "chapter3/upload/".

4.5.1. Selecting upload file with ComboInput

Sets ComboInput's type property to "upload": ComboInput

chapter3/upload/index.html


4.5.2. Upload by IAjax

4.6. A request wrapper for real application

In practical applications, you can choose linb.Ajax, linb.SAjax and linb.IAjax according to the

actual situation. Usually, we will wrap a common function or class to handle all data interaction with the backend service. This is an example wrapper. Just for your reference.

4.7. xml Data

If the server returns xml data, we can use linb.xml to convert the xml data into JSON data.

4.8. An overall example

The following is an overall example for data exchanging.

Chapter3/io/index.html

Chapter 5. Distributed UI

    Sometimes, especially in larger applications, we maybe save a large "not frequently used" UI Class into a separate file. This file will not be loaded at the beginning.
    When the application needs to show the UI, the program will automatically load code from the "separate file". It is so called "distributed UI". This "distributed UI" file can be in your server, or in different domain remote servers.

5.1. Shows dialog from a remote file

There's a file "Module3.js" in folder "caseschapter4distributedAppjs", "Module3.js" includes a Class named "App.Module3". Let's try to call it.

And try to load code and create UI from a difference domain.

5.2. linb.Com and linb.ComFactory

In fact, most of the actual business applications will not load code from a foreign domain. From another perspective, most of "Distributed UI" files are put in the application directory.
In this case, we can use linb.Com and linb.ComFactory to load those "distributed UI". In order to use this approach, all those Classes must be derived from the linb.Com, named according to specified rules, and put into the specified directory.

linb.ComFactory implements a management mechanism for the linb.Com. It can follow a specified rule (finding file path from the class name) to load code from a remote file.

There 's an overall example in "chapter4/distributed", we can browse it for detail.

5.2.1. linb.ComFactory config

In conf.js:

Loading this configuration to linb.ComFactory:

5.2.2. linb.Com.Load

In file index.html,


The above code will try to find file named "index.js" from "distributed/App/js/", create an instance (new App), and show the instance to DOM.
Output:

5.2.3. newCom and getCom

In index.js, onclick event for "Load module3 manually" button is:


[linb.CombFactory.newCom("App.Module3".. ], will:
* find file "Module3.js" in "distributed/App/js/"
* load code from file "Module3.js" ;
* create new instance,;
* call the callback function.

Note: newCom use "Class Name" to load code.

onclick event for "Load module1" button is:


[linb.CombFactory.newCom("module1".. ], will:
* find config from linb.CombFactory
* find file "Module1.js" in "distributed/App/js/"
* load code from file "Module1.js" ;
* create new instance,;
* call the callback function.

onclick event for "Load module2" button is:

By default, the instance created by "getCom" is singleton, and will be cached in inb.CombFactory.


5.2.4. linb.UI.Tag

There's a linb.UI.Tag object in file Module1.js:

Here, this Tag object configures size and position properties for module "tag_SubModule1". When the instance of Module1 was created, according to the Tag object' info, system will load the "tag_SubModule1" automatically, and set size and position properties to it. Then, system will replace the Tag object with "tag_SubModule1" object, and destroy the Tag object.

5.2.5. Destroy com

Call com's destroy() function to destroy the Class instance; Call Class.destroy("class name") to destroy the Class itself.
If  you  used  "getCom('module  name')"  to  create  an  com  instance,  you  have  to  call
"linb.ComFactory.setCom ( 'module name', null )" to clear that cache.

5.2.6. If com exists in memory

If a com exists in memory already, we can call it directly:

Chapter 6. Some fundamental things

6.1. Pop-up window

6.1.1. alert window

linb.alert('title','message',function(){ linb.message('You close this window!')
}, 'O K', 50, 100);

6.1.2. confirm window

Fired after user close the window
6.1.3. prompt window

linb.prompt('title', 'message','default content',function(msg){ linb.message('You input - ' + msg)
},function(){
linb.message(" You cancel it")

Fired when user click "YES"

},'YES', 'NO',50,100);

Fired when user click "NO" or click close button

6.1.4. pop window

6.2. Asynchronous execution

6.2.1. asyRun

_.asyRun is a wrapper for settimeout.

6.2.2. resetRun

_.asyRun is a wrapper for set timeout too. But it has an unique id. When you set another function with the same id, the latter will cover the former.

6.3. Skin switcher

6.3.1. Switch skin for whole application

There are three system skins in jsLinb3.0: default, vista and aqua. You can use linb.UI.setTheme to switch the skin.

6.3.2. Change skin for a single control

It's a fine-grained mechanism.

In this case, developer needs to define CSS class for this "custom".

6.4. Locale switcher

Example "chapter5lang" loading process:

6.5. DOM Manipulation

Class "linb.Dom" is a wrapper for cross-browser DOM Manipulation. It can: create / remove elements; manage elements' attributes; manage elements' CSS; manage elements' events.

6.5.1. Node generation and insertion

6.5.2. Attributes and CSS

6.5.3. className

There are five function to handle CSS className:
* hasClass: Determines whether a specified class exists or not
* addClass: Adds classes to the current DOM nodes
* removeClass: Removes classes from the current DOM nodes
* replaceClass: Replaces classes for the current DOM nodes
* tagClass: Adds/Removes a tag to all classes of the current DOM node

6.5.4. Dom events

There are three groups of event functions are designed for a DOM event in jsLinb: [before-], [on-] and [after-].
* linb(/**/).onclick([function], 'label') => adds the [function] to [onclick]group;
* linb(/**/).onclick([function]) => removes all event functions in [onclick] group, and adds the [function] to [onclick] group;
* linb(/**/).onclick(null, 'label') => removes the event function labeled with 'label' from the [onclick] group;
* linb(/**/).onclick(null) => removes all event functions in [onclick] group;

* linb(/**/).onclick(null,null,true) => removes all event functions in [beforeclick] group, [onclick] group and [afterclick] group;
* linb(/**/).onclick() => fire event, executes all event functions in [onclick] group in order. If any of those functions returns [false], the remaining functions will be ignored;
* linb(/**/).onclick(true) => fire event, executes all event functions in [beforeclick] group, [onclick] group and [afterclick] group in order;
6.5.5. Node Drag&Drop

6.5.5.1. Drag&Drop profile

The "draggable" function's second parameter is Drag&Drop profile object. It's a key/value pairs. In dragging process, the Drag&Drop profile object can be got by linb.DragDrop.getProfile(). The profile object:
* dragType: 'move','copy','deep_copy','shape','icon', 'blank' or 'none', Default is 'shape';
* shadowFrom: DOM element or linb.Dom object. It's valid when dragType=='icon';
* targetReposition: Boolean, does dd reset the target position, Default is [true];
* dragIcon: String, the drag icon image path, Default is [linb.ini.path+'ondrag.gif'];
* magneticDistance: Number, the magnetic distance, Default is 0;
* xMagneticLines: Array of Number, the magnetic line values in horizontal dir, Default is [];
* yMagneticLines: Array of Number, the magnetic line values in vertical dir, Default is [];
* widthIncrement: Number, the width increment in horizontal dir, Default is 0;
* heightIncrement: Number, the height increment in vertical dir, Default is 0;
* dragDefer: Number, when [linb.DragDrop.startDrag] is called, the real drag action will be triggered after [document.onmousemove] runs [dragDefer] times, Default is 0;
* horizontalOnly:Boolean, drag horizontal dir only, Default is [false];
* verticalOnly: Boolean, drag vertical dir only, Default is [false];
* maxBottomOffset</strong>:Number, the offset between [the restricted bottom] and [the current mouse Y], for mouse restricted region, Default is [null];
* maxLeftOffset</strong>:Number, the offset between [the restricted left] and [the current mouse X], for mouse restricted region, Default is [null];
* maxRightOffset</strong>:Number, the offset between [the restricted right] and [the current mouse X], for mouse restricted region, Default is [null];
* maxTopOffset: Number, the offset between [the restricted top] and [the current mouse Y], for mouse restricted region, Default is [null];
* targetNode: DOM element or linb.Dom object, the drag target node;
* targetCSS: Number, the drag target node's CSS key/value object, Default is [null];
* dragKey: String, the drag key, Default is [null];
* dragData: object, the drag data, Default is [null];
* targetLeft: Number, the drag target node's CSS left, Default is [null];
* targetTop: Number, the drag target node's CSS top, Default is [null];
* targetWidth: Number, the drag target node's CSS width, Default is [null];

* targetHeight: Number, the drag target node's CSS height, Default is [null];
* targetOffsetParent: linb.Dom object, the drag target node offsetParent node, Default is [null];
* dragCursor: 'none', 'move', 'link', or 'add', the drag cursor key; [readonly]
* x: Number, current X value of mouse; [readonly]
* y: Number, current Y value of mouse; [readonly]
* ox: Number, original X value of mouse; [readonly]
* oy: Number, original Y value of mouse; [readonly]
* curPos: {left:Number,top:Number}, current CSS pos of the dragging node [readonly]
* offset: {x:Number,y:Number}, offset from now to origin [readonly]
* isWorking: Boolean, is dd working or not? [readonly]
* restrictedLeft: Number, the calculated restricted left value; [readonly]
* restrictedRight: Number, the calculated restricted right value; [readonly]
* restrictedTop: Number, the calculated restricted top value; [readonly]
* restrictedBottom: Number, the calculated restricted bottom value; [readonly]
* proxyNode: linb.Dom object, the proxy object; [readonly]
* dropElement: String, the target drop element DOM id. [readonly]

There is an DD overall example in chapter3/dd/ddProfile.html.

6.5.5.2. Events in Drag&Drop

For that node in dragging,
* ondragbegin
* ondrag
        * ondragstop For that droppable node,
* ondragenter
* ondragleave
* ondragover
* ondrop

6.6. linb.Template

Linb.Template is a completely independent UI wrapper. It doesn't depend on linb.UI Class and all its derived Classes.


6.6.1. example 1

linb.Template includes three aspects: template, properties and events:

6.6.2. example 2

6.6.3. A SButton based on linb.Template

"chapter5SButton" is an example for creating a linb.UI.SButton like control based on linb.Template.
Output:

6.7. About Debugging

6.7.1. The code package for debugging

In folder "runtime/jsLinb/js/", All files ending with "-debug.js" are for debugging purpose.


6.7.2. Debugging Tools

You can use Firebug in Firefox, developer tool in IE8, chrome or opera10 to debug javascript.
FireBug:

Developer Tools in IE8:

6.7.3. jsLinb Monitor Tools

jsLinb has a variable monitor tools. It's cross browser. Call linb.log("xxx") to show the monitor window:


Chapter 7. Some typical issues

7.1. Layout

7.1.1. Docking

7.1.2. linb.UI.Layout

7.1.3. Relative Layout

7.2. UI Control's Drag&Drop

7.2.1. Drag&Drop control among containers

7.2.2. List sorting 1

7.2.3. List sorting 2

7.3. Form

7.3.1. Form 1

7.3.2. DataBinder

Class.destroy('App'); Class('App', 'linb.Com',{
Instance:{
iniComponents:function(){

Code created by Designer

Adds a DataBinder, sets name property

// [[code created by jsLinb UI Builder
var host=this, children=[], append=function(child){children.push(child.get(0))}; append((new linb.DataBinder).setHost(host,"binder").setName("binder"))

append((new linb.UI.SLabel)

Sets dataBinder and dataField

.setHost(host,"slabel1").setLeft(80).setTop(60).setWidth(44).setCaption("Name:") );

append((new linb.UI.SLabel)

to each control

    .setHost(host,"slabel2").setLeft(80).setTop(90).setCaption("Age:").setWidth(44)); append((new linb.UI.Input) .setDataBinder("binder").setDataField("name")
    .setHost(host,"iName").setLeft(130).setTop(60).setValueFormat("[^.*]").setValue("Jack")); append((new linb.UI.ComboInput) .setDataBinder("binder").setDataField("age")
                .setHost(host,"iAge").setLeft(130).setTop(90).setType("spin").setIncrement(1).setMin(20).s etMax(60).setValue("35"));
append((new linb.UI.SCheckBox) .setDataBinder("binder").setDataField("isfull")
    .setHost(host,"cFull").setLeft(130).setTop(130).setCaption("Full time")); append((new linb.UI.SButton)
.setHost(host,"submit").setLeft(130).setTop(170).setCaption("SUBMIT").onclick("_submit

_onclick"));


},


return children;
// ]]code created by jsLinb UI Builder

Form validation

_submit_onclick:function (profile, e, src, value) { if(!this.binder.checkValid()){

Collects data

linb.alert('One or some invalid fields exits!'); return;
}
linb.alert(_.serialize(this.binder.getValue()))
}}
});
(new App).show();

7.4. Custom UI styles

7.4.1. Custom only one instance only - 1

7.4.2. Custom only one instance only - 2

7.4.3. Custom only one instance only - 3

7.4.4. Custom only one instance only - 4

7.4.5. Custom only one instance only - 5

(new linb.UI.SButton)
.setCaption("Use getSubNode and css ")
.onRender(function(profile){ profile.getSubNode('FOCUS').css({
fontWeight:'bold', color:'#ff0000'

After it was rendered into DOM

});
})
.show()

7.4.6. Custom only one instance only - 6

7.4.7. Custom style for an UI Class

7.4.8. Custom style for all UI Class - skin

There are three system skins in jsLinb3.0: default, vista and aqua. You can use linb.UI.setTheme to switch the skin. You can also add your own custom skin easily. Only two steps:

7.4.8.1. First: Copy

All skins are in "runtime/jsLinb/appearance", you can create an new folder (e.g. 'myskin'), and copy all directories and files in an existing skin folder to it.

7.4.8.2. Second: Little by little, modify pictures and CSS

For example, we modifies corner.gif file in Button folder.
After that,

The end of Part two
Last edited by: cgetty on Aug 19, 2025 6:16:22 am
Profile

Powered by myUPB v2.2.7  ·   © PHP Outburst 2002 - 2026

Creative Commons License