Nabble - jsLINB

You can download Visual JS from google code

2007-07-10T21:08:46Z

Go to http://code.google.com/p/linb/downloads/list for download all the source code of Visual JS

If you have gmail, go to http://groups.google.com/group/linb to join Viausl JS group

And, Visual JS online demo: http://www.linb.net/VisualJS

From forum: Visual JS

Re: Timeline widget

2007-04-16T05:16:39Z

Thanks for that! I think the issue was more of a CSS problem so I've got something happening.
Adding the timeline to the RAD IDE sounds like a great development.
Thanks again,
Tony

linb wrote:

Go to http://www.linb.net/docs/examples/linb.UI.TimeLine2.php for the only one line code:

linb('content').addLast(linb.create('TimeLine', null, {width:'800', height:'300'}));

And maybe you haven't download the file: http://www.linb.net/js/linb/date.js , that is loaded dynamic by function 'SC' in the TimeLine widget.

And, I am working on adding the timeline widget to RAD IDE at http://www.linb.net/dev/builder/, I think it will be launched in a month.

Re: Timeline widget

2007-04-15T23:04:32Z

Go to http://www.linb.net/docs/examples/linb.UI.TimeLine2.php for the only one line code:

linb('content').addLast(linb.create('TimeLine', null, {width:'800', height:'300'}));

And maybe you haven't download the file: http://www.linb.net/js/linb/date.js , that is loaded dynamic by function 'SC' in the TimeLine widget.

And, I am working on adding the timeline widget to RAD IDE at http://www.linb.net/dev/builder/, I think it will be launched in a month.

Re: Timeline widget

2007-04-15T22:47:24Z

Sorry if I'm becoming a pest but I tried your suggestion and still end up with a 't has no properties' error in linb.js.
Could you possibly send me (directly if you like) a page with nothing but a working timeline??
If you could that would be excellent !!
Thanks again,
Tony

linb wrote:

Sorry for the documentation. I do not have enough time, and my English is not good enough!

First make sure you loaded those js files,

then,

--------------------------------------------------------------------------
linb(document.body).addLast(linb.create('TimeLine'))
--------------------------------------------------------------------------

Re: Treebar look'n'feel problem

2007-03-24T22:53:45Z

Just an extra css class 'linb-ui-treebar-bar-group' was added to the element. Since you use the compressed code, it's not easy to find the problem.

And, I'll change some code in the future 0.3Beta.

A temporary way(if you don't use group mode of treebar):
remove 'linb-ui-treebar-bar-group*' from ..\css\linb\UI\TreeBar\css.css

From forum: UI

Treebar look'n'feel problem

2007-03-24T13:37:58Z

I'm creating my new home page using linb (0.3beta from IDE sources).
When I create Treebar using this code:
----------------------------8<-----------------------------------
this.template = '';
this.appearance = '';
this.behavior = '';
self = this;

var onMenuRequest = function(menu, value, threadid, mptr){
if(value == null) return;
path = self.lang+value;
linb.ajax('request.php','menu='+menu+'&path='+path,function(msg){
var menu;
eval('menu = '+msg);
menu.sort();
self.menuCache[path] = menu;
linb.thread(threadid).setCache('response',menu);
},function(msg){
self.printPage([{title:'Error',content:'Error requesting data<br/>'}]);
},false,'GET');
}

this.projectsMenuContent = linb.create('TreeBar',{
multi : false,
items : [
{id : '/projects/linb',caption : 'LINB', sub:[]},
{id : '/projects/configure', caption : 'Simple makefile generator'}
]
},null, this.template, this.appearance, this.behavior);

this.mainMenuContent.onRequestData(function(value, threadid){
onMenuRequest('main',value,threadid, self.mainMenuContent);
});
----------------------------8<-----------------------------------
That gives me a flat tree look of Treebar. But when Treebar is expanded, then if there is another expandable bar then it is rounded.

First example code of Treebar gives me 'flat' version of Treebar and second 'rounded'.

I'm using Linux Fedora Core 6.91 x86-64 with Firefox 2.0.0.2

full source code can be downloaded from:
http://student.if.uj.edu.pl/Marek.Skorkowski/js/page.linb
page can be seen (page is in 'alpha' state. I have reports that it isn't working with IE)
http://student.if.uj.edu.pl/Marek.Skorkowski

From forum: UI

Re: Timeline widget

2007-03-21T01:07:02Z

Sorry for the documentation. I do not have enough time, and my English is not good enough!

First make sure you loaded those js files,

then,

--------------------------------------------------------------------------
linb(document.body).addLast(linb.create('TimeLine'))
--------------------------------------------------------------------------

Timeline widget

2007-03-20T20:52:41Z

jsLinb looks pretty good but I am mostly impressed by the timeline widget. I've been going through the code in the example but am having a few troubles getting it to run locally.
Is there a simple example to get a quick and easy timeline application going?

Thanks for any help!

Regards
Tony

Re: Debug window change proposal

2007-02-17T05:48:54Z

Yeah, JavaScript isn't the best at dealing with files.

From forum: Visual JS

Re: Debug window change proposal

2007-02-16T21:00:30Z

I have this version too, but only server version can stimulate "compile" -- select certain files(according to name space) and copy them to release path , or pack them to one html file(stand alone mode).

From forum: Visual JS

Debug window change proposal

2007-02-16T05:12:37Z

In line 558 in Linb Studio there is:
--------------8<---------------------

557.   if(curId =='debug'){ 
558.       linb.dom.doForm('launch.php', {key:'launch', para: _.serialize({content:str, fileName: self.fileName, pack:self.pack})} );
559.
560.       return false;

--------------8<---------------------
I propose changing it to something like this:
--------------8<---------------------

557.     if(curId =='debug'){ 
558.       var newWindow = window.open('','');
559.       newWindow.document.write(str);
560.       newWindow.document.close();
561.//     linb.dom.doForm('launch.php', {key:'launch', para: _.serialize({content:str, fileName: self.fileName, pack:self.pack})} );
662.
563.       return false;

--------------8<---------------------
Changing to this method give a possibility to inform IDE when some changes appear in tested app. For example it can be useful for creating generic debug console for application.
When testing app only downloads linb.js and UI.js files. So it is loaded faster
There is no name space collision because everything what was created in IDE is accessed with parent.*. Making this change will also require changing linbPath on line 41 from "../../../" to "../".

From forum: Visual JS

Re: Error in new dialog widget

2007-02-15T16:54:31Z

It's just a developping version. You can download all the source code from website after jsLINB 0.3 launch.

If you really want the raw source code before that, I can email it to you after the Chinese New Year. You can remind me after two weeks.

From forum: UI

Error in new dialog widget

2007-02-15T14:43:20Z

In new implementation of linb.UI.Dialog (I have downloaded the UI.js which is used by IDE) frame doesn't resize with border, so it is possible to resize dialog so much, that it is impossible to resize it once again.

Ex:
--------8<----------------------------
var d = new linb.UI.Dialog();
d.setWidth(300);
d.setHeight(300);

d.create();

var root = linb([document.body],null);

root.attach(d,null);
--------8<----------------------------

PS.
I found a new method of showing widgets better then old one.

PSS.
I's it possible to get somewhere unpacked version of linb.js and UI.js?

From forum: UI

Re: problem with viewing main page

2007-02-14T10:30:02Z

now It is working again

problem with viewing main page

2007-02-14T07:34:34Z

I'm unable to view www.linb.net/index.php. I've checked that ohter pages (www.linb.net/docs, and ide are loading properly).

LINB Studio developping online

2007-01-28T19:47:47Z

video show: http://neptuned.chinamofile.com/3853840242314363/8877782276005731/10/9AB5E2C663F43DBA047CAFB168F93C7F/demo.wmv

linb studio online : http://www.linb.net/dev/builder

Notice:

It's just a half form design inlcuded, which needs test, debug, optimize... It works 'OK' in firefox at least now.

From forum: Visual JS

Re: OOP adding properties

2007-01-06T23:51:14Z

The 'this' will be window object in your mouseHarverster function.
In attachMouse, your only attach this.mouseHarverster as a function object to onMousemove of document.body.

Class("linb.crypt.Entropy",null,{
Constructor:function(){
this.attachMouse();
this.mouseSkip = 0;
},
Instance:{
mouseHarverster:function(e){
alert(this.mouseSkip);
},
attachMouse:function(){
// here:
var self=this;
linb(document.body).onMousemove(function(e){
self.mouseHarverster.call(self,e);
});
}
}
});

OOP adding properties

2007-01-06T18:02:13Z

I have created class for entropy harvesting (this is simplified version which is able to reproduce behaviour):

---------------------------------------------8<------------------------------------------------
1. CLASS("Entropy",null,{
2. constructor:function()
3. {
4. this.attachMouse();
5. },
6. instance:{
7. mouseSkip : 0,
8. mouseHarverster:function(e){
9. alert(this.mouseSkip); //gets undefined or NaN
10. },
11. attachMouse:function(){
12. alert("attach");
13. linb(document.body).onMousemove(this.mouseHarverster);
14. }
15. }
16. });

---------------------------------------------8<------------------------------------------------

when I use try use this class I'm getting undefined (firstly) or NaN (after) when I reach 9th line of this code.
Moving mouseSkip to constructor like this (line 5):

---------------------------------------------8<------------------------------------------------
1. CLASS("linb.crypt.Entropy",null,{
2. constructor:function()
3. {
4. this.attachMouse();
5. this.mouseSkip = 0;
6. },
7. instance:{
8. mouseHarverster:function(e){
9. alert(this.mouseSkip); //gets undefined or NaN
10. },
11. attachMouse:function(){
12. alert("attach");
13. linb(document.body).onMousemove(this.mouseHarverster);
14. }
15. }
16. });

---------------------------------------------8<------------------------------------------------

didn't change anything. So my question is how can I add properties to class? Is using closure only solution?
Below is first version of code without line numbering.

---------------------------------------------8<------------------------------------------------

CLASS("linb.crypt.Entropy",null,{
constructor:function(){
this.attachMouse();
this.mouseSkip = 0;
},
instance:{
mouseHarverster:function(e){
alert(this.mouseSkip); //gets undefined or NaN
},
attachMouse:function(){
alert("attach");
linb(document.body).onMousemove(this.mouseHarverster);
}
}
});

---------------------------------------------8<------------------------------------------------

Re: Switching events off

2007-01-01T20:57:19Z

Yeah, It should be:

linb(document.body).onMousemove(null); => clear all onMousemove events(not include beforeMousemove or afterMousemove)

But there's a spelling mistake bug in 0.2beta, before the newer version, you can use

$widget.onMousemove(null,null,true); => clear all beforeMousemove/onMousemove/afterMousemove events.

From forum: Framework

Switching events off

2007-01-01T17:49:45Z

I'm writing entropy harvesting class using linb event model, so I need from time to time connect to mouse and keyboard's events and after gathering enough entropy disconnect. How can I switch off events to which I have been connected?

EX:
-------------------------8<-------------------------------------------------------------------------------------
linb(document.body).onMousemove(function(e){alert(linb.event.getPos(e));});
-------------------------8<-------------------------------------------------------------------------------------

How can I disconnect this? I have tried tips from manual, but I weren't able to stop event. Only if I pass function(){} as callback function it "stops" to trigger an event.

-----------------------------------------------------------------------------------------------------------------------------------
Happy New Year

From forum: Framework

测试一下

2006-12-23T00:17:13Z

test 测试一下

Re: Class inheritance diagram

2006-12-19T18:57:17Z

Great!

I'll give a simple "visual linb" in version 0.21, which includes a simple "form designer", maybe includes a "widget designer" too. And the "Class inheritance diagram" will changed.

There are some new standard widgets added: shadow, resizer, grid, Dialog(new), layout(split), timeline(in the web site now)...

From forum: Framework

Re: onMouseOver - widget behavior

2006-12-19T18:40:39Z

There are four events in linb.UI used shortcut exp : onMouseover onMouseout onMousedown onMouseup.

"_hover:{ITEM:['ITEM','BOX']}" means "when mouseover/mouseout ITEM , ITEM and BOX will change css"; "_click:{ITEM:['ITEM','BOX']}" means "when mousedown/mouseup ITEM , ITEM and BOX will change css".

for example:

onmouseover
linb-ui-xx-item -> linb-ui-xx-item-mouseover
onmouseout
linb-ui-xx-item-mouseover -> linb-ui-xx-item
onmousedown
linb-ui-xx-item -> linb-ui-xx-item-mousedown
onmouseup
linb-ui-xx-item-mousedown -> linb-ui-xx-item

If you want to add mouse effect to widgets, use the shortcut "_hover" or "_click" like those, or, you can use the following events:

beforeMouseover/afterMouseover
beforeMouseout/afterMouseout
beforeMousedown/afterMousedown
beforeMouseup/afterMouseup

By the way, I'll change the shortcut to afterMousexxx in the next version.

From forum: UI

onMouseOver - widget behavior

2006-12-19T16:52:14Z

How can I add new event responses to widgets, for example onMouseOver?
I have tried to add onMouseOver event to Button by writing function onmouseOver, but it didn't make a trick. When I copy the linb generated code to page and edit actions by hand then it works.

From forum: UI

Re: progress bar

2006-12-04T08:07:55Z

Very good! everything is ok, except for this line:

-------------------------------------------------------------------------
linb('linb.UI.ProgressBar-PROGRESS'+this.getSubDomId(this.box.BAR.PROGRESS)).reBoxing('dom').width(pWidth+'px');
-------------------------------------------------------------------------

here is better:
--------------------------------------------------------------------------
this.getSubNode(this.box.PROGRESS).width(pWidth);
--------------------------------------------------------------------------

From forum: UI

progress bar

2006-12-02T09:51:57Z

I have wrote another widget. :) I have tested it only in Firefox 1.5 and Konqueror 3.5.

widget code:
[EDIT: 04 dec 2006] Changed line like proposed by linb
---------8<-------------------------------------------------------------
CLASS('linb.UI.ProgressBar', 'linb.UI',{
initialize:function(){
this.setTemplate('',{
_tagName : 'div',
BOX : {
_tagName : 'div',
PERCENT : {
_tagName : 'div',
html : '{percent}',
_order : 0
},
CAPTION : {
_tagName : 'div',
html : '{caption}',
_order : 1
},
BAR : {
_tagName : 'span',
_order : 2,
PROGRESS : {
_tagName : 'span',
_order : 0,
width : '0px'
}
}
}
});
this.setDataModel({
caption: {
ui:function(value){
this.getSubNode(this.box.CAPTION).html(value);
}
},
percent: {
ui:function(value){
if(value>100) {value = 100;}
if(value<0) value = 0;
this.getSubNode(this.box.PERCENT).html(value+'%');
var pWidth = Math.round((value*422)/100);
this.getSubNode(this.box.PROGRESS).width(pWidth);
}
}
});
}
});

---------8<-------------------------------------------------------------

css:
---------8<-------------------------------------------------------------
.linb-ui-progressbar { position:absolute;
width:400px;
height:45px;
background-color:#EDECDE;
padding:20px;
border-width:2px;
border-left-color:#E9E9ff;
border-top-color:#E9E9ff;
border-right-color:#666666;
border-bottom-color:#666666;
border-style:solid;
z-Index: 100;
}

.linb-ui-progressbar-percent { position:absolute;
left:211px;
top:47px;
font:12px Verdana, Helvetica, sans-serif bold;
z-Index:104;
}

.linb-ui-progressbar-caption { position:absolute;
left:10px;
top:10px;
font:18px Verdana, Helvetica, sans-serif bold;
z-Index: 101;
}

.linb-ui-progressbar-bar { position:absolute;
left:10px;
top:45px;
width:420px;
vertical-align:middle;
height:22px;
background-color: #ffffff;
border:1px solid #000000;
z-Index: 102;
}

.linb-ui-progressbar-progress { position:absolute;
left:-1px;
top:0px;
height:22px;
background:url(bar.png) no-repeat left top;
z-Index: 103;
}
---------8<-------------------------------------------------------------

image (called 'bar.png'):
---------8<-------------------------------------------------------------

---------8<-------------------------------------------------------------

Example:
This example creates progress bar and button. When you click on the button progress bar will be updated for next 10%.
---------8<-------------------------------------------------------------
$widget = linb.create('ProgressBar').setPercent(0).setCaption('Please wait...');
$widget.reBoxing('dom').top(100).left(100);
linb(document.body).addLast($widget);

var i = 0;

linb(document.body).addLast(linb.create('Button')
.setCaption('make 2 progress')
.onButtonClick(function(){$widget.setPercent(i+=10);}));
---------8<-------------------------------------------------------------

From forum: UI

Class inheritance diagram

2006-12-01T10:56:52Z

I have made this diagram for linb 0.2. I have found this image quite useful together with manual.

From forum: Framework

Re: Problem with Dialog widget - workaround

2006-11-25T17:39:19Z

linb.box.create = function(tag, id, data, template, behavior, appearance, flag)
linb.UI.create = function(id, data, template, behavior, appearance, flag)

data is a hash (javascript object), not an instance of linb.box. It's a pre bind for 'addItems' (For an example, linb.UI.CheckBox) .

There's a function named 'attachItem' (For an example, linb.UI.Group), too. Maybe I should add interface for attachItem in 'create' function.

I'll give an menu widgets later, I would apperciate your feed back.

From forum: UI

Problem with Dialog widget - workaround

2006-11-21T16:44:27Z

Lots of tests later...
I think only way to make it is during linb.create past third argument which will contain description of widgets not them itself, so during creation of dialog I can recreate all widgets. Why? Is it problem with unique id?

From forum: UI

Re: password input

2006-11-21T10:37:51Z

Looking at the second solution isn't be better to put password widget as additional generic template to Input? It will reduce number of css files (reduce amount of css code to manage), because for most situations the same css will be used for Input and Password.

From forum: UI

Problem with Dialog widget

2006-11-19T20:51:58Z

Edit (21 Nov):
I have found simpler way to get the same behaviour. After scaling first dialogue so both are visible it can be seen that only first has the button.

------------------8<-------------------------------
var $b = new linb.create('Button').setCaption('$b');

for(var i=0; i<2; i++)
{
var $d=linb.create('Dialog').fill($b);
linb(document.body).addLast($d);
}
------------------8<-------------------------------

Adding clone method like below doesn't change anything.

------------------8<-------------------------------
var $d = linb.create('Dialog').fill(_.clone($b));
------------------8<-------------------------------

Excuse me for posting such long and partially unrelated (now I know it) question, but I weren't able to find easier problem reproducing code.

Original:
I'm trying to hack kind of 'menu button' widget.
Project description:
(1) it should contain something on which I can click so menu appears.
(2) menu should be highly configurable
How achieved:
(1) I use linb.UI.Button by inheriting Menu class from it. That make easy to achieve first goal because only thing required to make menu available is change onClick function from Button's behaviour section.
(2) It can be done if during creation of widget I pass other widgets as the data. I'm not using tree widget because it returns value after selecting, and menu doesn't have value itself. Menu should run some command which is menu independent.
ex:
------------------8<-------------------------------
$widget = linb.create('Menu', null, {items:[
linb.create('Button').setCaption('MenuButton1').onButtonClick(function(){alert('MenuButton1')}),
linb.create('Button').setCaption('MenuButton2').onButtonClick(function(){alert('MenuButton2')}),
linb.create('Input')]
}).setCaption('Menu');
------------------8<-------------------------------

Code of Menu class:
------------------8<-------------------------------
CLASS("linb.UI.Menu", "linb.UI.Button",{
instance:{
beforeBuild:function(profile){
var data = profile.data;
data.iconwidth=data.icon?'16px':'0px';
data.width = data.width?_.str(data.width):'auto';
}
},
initialize:function(){
var template = _.clone(linb.UI.Button.getTemplate(''));
this.setTemplate('',template);
this.setBehavior('',{
_hover:{KEY:['KEY', 'BOX']},
_click:{KEY:['KEY', 'BOX']},
onClick:function(e, profile, src){
var o = linb.create('Dialog',null,{pop:true})
var pos = profile.boxing().reBoxing().absPos();
var size = profile.boxing().reBoxing().size();
pos.y += size.h;
o.reBoxing().cssPos(pos);
var data = _.clone(profile.data.items);
//TODO: better method of iterating through data is needed
for(var i in data)
{
if(i!=='each' && i!=='exists' && i!=='insert' && i!=='copy' && i!=='merge'
&& i!=='clean' && i!=='swap' && i!=='remove' && i!=='removeValue')
{
//alert(i); //informs what have passed if statement
o.fill(data[i]);
}
}
linb(document.body).addLast(o);
}
});
this.setDataModel(_.clone(this.getDataModel()));
}
});
------------------8<-------------------------------

Problem:
When I click for the first time on "Menu" button menu appears correctly, every widget inside look as if it is working. But when I click on the "Menu" empty Display widget appears.

After first click:

After second click:

From forum: UI

Re: password input

2006-11-19T06:07:59Z

Great!
-----------------------------------------------------------
CLASS("linb.UI.Password","linb.UI.Input",{
initialize:function(){
var template = this.getTemplate('');
template.BOX.INPUT.type='password';
this.setTemplate('',template);
}
});
-----------------------------------------------------------
or,
-----------------------------------------------------------
var template = _.clone( linb.UI.Input.getTemplate('') );
template.BOX.INPUT.type='password';
this.setTemplate('password',template);
-----------------------------------------------------------

From forum: UI

password input

2006-11-13T14:51:56Z

I have been playing with LINB for a few days and I have noticed that there isn't password field. At the basis of linb.UI.Input I have written one.

--------------------------------8<------------------------------------------------------
CLASS("Password","linb.UI.Input",{
initialize:function(){
var template = this.getTemplate('');
template.BOX.INPUT.type='password';
this.setTemplate('',template);
}
});
--------------------------------8<------------------------------------------------------

I have post it because one can need it.

From forum: UI

Re: jsLINB 0.2 is coming

2006-11-03T19:09:25Z

不错。