PDA

View Full Version : What is the role of JSBuilder2 and how to use it ?



dm520
13 Jul 2009, 6:40 PM
What is the role of JSBuilder2 and how to use it?

I would like to know the use of specific

Condor
14 Jul 2009, 5:06 AM
JSBuilder2 can copy, combine and compress multiple .js and .css files, thereby making your website load faster.

All relevant info can be found on the JSBuilder2 download page (http://extjs.com/products/jsbuilder/).

JSBuilder2 needs a .jsb2 file which describes the files to process. The ext.jsb2 to build the Ext JS library is included in the Ext JS SDK.
The only exception is Ext 3.0.0 SDK. You can download the ext.jsb2 file for Ext 3.0.0 here (http://extjs.com/forum/showthread.php?p=354473#post354473).

xiaoou22
29 Jul 2009, 5:13 AM
well , I just download the JSBuilder2.jar, and reinstalled jdk. But I can not execut the jar program.
How to use the builder?
Are there any docs for the builder or some screen shoot for me?
thanks

xiaoou22
29 Jul 2009, 5:22 AM
all right, i just miss the jsb2 file.
thanks anyway

sreekanthjup
16 Aug 2009, 11:45 PM
Hi Condor,

After executing the JSBuilder2.jar what is the output i get? and how would i use it in my webpage for a faster run?

Regards,
Sreekanth.

Condor
17 Aug 2009, 1:31 AM
Create a .jsb2 file that includes the Ext files you need (you probably don't need all of them) and your own .js and .css files.

Build a single compressed .js and a .css file that includes everything and use them on your website.

sreekanthjup
17 Aug 2009, 1:50 AM
Hi,

Thankyou for the reply condor, now this is very clear that the output i get is a single .js file and a single .css file, and JSBuilder2 would pick up the (source .js files) and (source .css files) i need from the .jsb2 file i create.

and after creation of .jsb2 file i use JSBuilder2.jar to get a single .js and single .css file and then i shall include those generated .js and .css in my html.

I m a newbie user of extjs could you tell me How to create that jsb2 file of my own compilation?

Thanks in advance,
Sreekanth.J.U.P

Condor
17 Aug 2009, 2:31 AM
Currently there is no .jsb2 editor, so you'll have to use a simple text editor.

Look at the current Ext 3.0.0. ext.jsb2 file (http://extjs.com/forum/showthread.php?p=354473#post354473) and read the .jsb2 file format (http://extjs.com/deploy/JSBuilder2/JSB2FileFormat.txt) description.

sreekanthjup
17 Aug 2009, 3:53 AM
Thankyou Condor, now i got the complete picture.

g2mac
12 Jan 2010, 6:15 AM
Hallo,

I'm wondering how to find out all dependences I need for my application. For development I used all-debug.js, so how can I shorten this big all.js?

Condor
12 Jan 2010, 8:10 AM
It's a bit trial & error.

1. Create a new .jsb2 file.
2. Copy the content from ext.jsb2.
3. Add your own application.
4. Build your application and test if it works.
5. Delete the packages that you don't need.
6. Build your application and test if it works.
7. Delete individual files that you don't need.
8. Build your application and test if it works.

(I never do steps 7 and 8)

g2mac
12 Jan 2010, 12:28 PM
Thank's a lot! )

MrRoyce
10 Mar 2010, 7:04 AM
For us folks that are completely new to the 'build' process. Which build tool are you referring to? Ant? If so, do you have any suggestions for a simple intro to the process?

regards,
Royce

MrRoyce
10 Mar 2010, 8:13 AM
Ok, some more information for newbies like me (for windows users). If I could do it, you can too!

The basic idea is to create a custom version of the combination of ExtJS and your application. That is, of course, to reduce the file size by not including the entire ExtJS application and to combine that with your application specific .js and .css files. The reduced file is a compressed (minified) set of files that can be used to speed up your production system.

The .jsb2 file which is produced by jsbuilder2 is a JSON representation of the files to be built. This is the input file to the 'build' process. The .jsb2 file that is included in the root of your ExtJS directory is an example of this.

Open that .jsb2 file in a text editor to get an idea of the files that are included in the basic d ExtJS deployment. As far as I can tell, there is no automated way to create the .jsb2 file. So you will have to hand code your project's files! If I'm wrong on this, hopefully someone else will step in.

Ok, now on to the build process. Here is the very simple version of this process.

Download and install the JSBuilder2 from http://www.extjs.com/products/jsbuilder/ (http://www.extjs.com/forum/../products/jsbuilder/)
One of the tricks to get this process working is to have your ExtJS application in a directory where the builder can find it. I've found it works best if you have a COPY of your downloaded ExtJS directory structure (just the included files and directories - adapter, docs, examples, etc, not the root Ext-3+!) in a directory just above where theJSBuilder2.jar file is. There are several forum threads that try to explain this structure Here is one of them, look around if you want more.
http://www.extjs.com/forum/showthread.php?t=74906

Also, copy the .jsb2 file from the ExtJs package to the directory where you installed JSBuilder2. That will be used as the input file when we do the actual build.

The JSBuilder2.jar file is a java file, so make sure your java implementation is installed and running correctly. If you aren't sure, try running it and you will probably be ok, if not, Google around to get your environment set up). The simplest way to check is to type 'java' from the command line. If you get the 'man' page description of the available java options, then you should be good to proceed. This means that Windows can find your 'java' implementation which is a good first step.

Change directory (cd) to the directory where you installed the JSBuilder2.jar file. I have it in 'C:\download\jsb2'. A copy of my ExtJS directories (adapter, docs, examples, pkgs, resources, src, etc, etc, etc) is in 'C:\download'. Here is the command I used.


java -jar JSBuilder2.jar --projectFile C:\download\ext.jsb2 --homeDir C:\download\jsb2That uses the ext.jsb2 file that came with the ExtJS package (its in the root directory) as an input to rebuild the entire application in the C:\download\jsb2 directory. The ext.jsb2 file has a 'deployDir' of 'ext-e.1+', so the JSBuilder2.jar creates a directory with that name. That is where the rebuilt application resides.

To get a feel for the entire process, I would suggest just re-building the ExtJS application as is to make sure your command and directory structure are correct. If you do this correctly, your result will be the same as the ExtJS application that you downloaded! After you are confident you can do that, then you can start to remove the packages you don't need (e.g. jQuery/YUI/Prototype adapters, etc.) So, if you don't use Drag and Drop/Direct/Blue Theme in your application, you can remove it to reduce your file size.

Last thoughts:

For ExtJS 3.1+, ignore all the stuff you read about using JSBuilder on http://www.extjs.com/learn/Tutorial:Building_Ext_From_Source#A_Note_Regarding_JS_Compression (http://www.extjs.com/forum/../learn/Tutorial:Building_Ext_From_Source#A_Note_Regarding_JS_Compression) . That is for the outdated version of the .jsb XML file. We now use .jsb2 JSON and, again, there doesn't seem to be an automated tool to create the .jsb2 JSON files.

Check this thread: http://www.extjs.com/forum/showthread.php?t=64920 for information on building a better debug version of ExtJS. Saki's code is designed to allow firebug to more easily step through the large file and it leaves in the comments which helps a lot in debugging.

Enjoy your newly built and minified application!

g2mac
11 Mar 2010, 8:34 AM
After building process I have my all.js file like this:



/*
* Text of license from .jsb2 file
*/
/*
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.DomHelper=function(){var s=null,j=/^(?:br|frame|hr|im....
/*
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.apply(Ext.DomHelper,function(){var d,...
/*
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.Template=function(d){var e=this....


And I have no idea how to get rid of this additional license text.

PS: I don't want to edit every source file and to cut it's header. Is there any solution to make result js just like ext-all.js, without additional license textes and all code in one line?

Condor
12 Mar 2010, 12:50 AM
Are you using JSBuilder2 or the old JSBuilder (v1)? This looks like v1 output!

g2mac
12 Mar 2010, 6:07 AM
I'm using JSBuilder2.jar (7 jul 2009)

Condor
12 Mar 2010, 6:17 AM
And how does your .jsb2 file look?

g2mac
12 Mar 2010, 6:20 AM
For example I have built an ext-core application:


C:\webtemp\JS_framework\build\svn>java -jar JSBuilder2.jar --projectFile C:\webtemp\JS_framework\build\svn\ext-core.jsb2 --homeDir c:\webtemp\JS_framework\build\


And the result is the same:


/*
* License text from .jsb2 file
*/
/*
* Ext Core Library 3.0
* http://extjs.com/
* Copyright(c) 2006-2009, Ext JS, LLC.
*
* MIT Licensed - http://extjs.com/license/mit.txt
*/
window.undefined=window.undefined;Ext={version:"3.1.0"};...
/*
* Ext Core Library 3.0
* http://extjs.com/
* Copyright(c) 2006-2009, Ext JS, LLC.
*
* MIT Licensed - http://extjs.com/license/mit.txt
*/
Ext.util.TaskRunner=function(e)....
/*
* Ext Core Library 3.0
* http://extjs.com/
* Copyright(c) 2006-2009, Ext JS, LLC.
*
* MIT Licensed - http://extjs.com/license/mit.txt
*/
and so on...

g2mac
12 Mar 2010, 6:22 AM
my ext-core.jsb2 is:


{
projectName: 'Ext Core',
deployDir: 'ext-core-test',
licenseText: "License text from .jsb2 file",
pkgs: [{
name: 'Ext Core + My app',
file: 'ext-core-custom.js',
isDebug: true,
fileIncludes: [{
text: 'Ext.js',
path: 'src/core/'
},{
text: 'TaskMgr.js',
path: 'src/util/'
},{
text: 'DelayedTask.js',
path: 'src/util/'
},{
text: 'ext-base-begin.js',
path: 'src/adapter/'
},{
text: 'ext-base-dom.js',
path: 'src/adapter/'
},{
text: 'ext-base-event.js',
path: 'src/adapter/'
},{
text: 'ext-base-ajax.js',
path: 'src/adapter/'
},{
text: 'ext-base-anim.js',
path: 'src/adapter/'
},{
text: 'ext-base-anim-extra.js',
path: 'src/adapter/'
},{
text: 'ext-base-end.js',
path: 'src/adapter/'
}, {
text: 'Observable.js',
path: 'src/util/'
},{
text: 'DomHelper.js',
path: 'src/core/'
},{
text: 'Template.js',
path: 'src/core/'
},{
text: 'DomQuery.js',
path: 'src/core/'
},{
text: 'EventManager.js',
path: 'src/core/'
},{
text: 'Element.js',
path: 'src/core/'
},{
text: 'Element.traversal.js',
path: 'src/core/'
},{
text: 'Element.insertion.js',
path: 'src/core/'
},{
text: 'Element.style.js',
path: 'src/core/'
},{
text: 'Element.position.js',
path: 'src/core/'
},{
text: 'Element.scroll.js',
path: 'src/core/'
},{
text: 'Element.fx.js',
path: 'src/core/'
},{
text: 'Fx.js',
path: 'src/core/'
},{
text: 'CompositeElementLite.js',
path: 'src/core/'
},{
text: 'MyApp.js',
path: 'src/'
}]
}],
resources: []
}

g2mac
12 Mar 2010, 6:28 AM
I have an impression that JSBuilder just concatenates minified source files. Every /src/*.js has license text in header.

g2mac
16 Mar 2010, 12:47 PM
Is that really so, that only I have such problem?

dherbolt
22 Jun 2010, 12:51 AM
I have this problem too. My ext-all.js also contains comments.

g2mac
23 Jun 2010, 1:20 AM
I have this problem too. My ext-all.js also contains comments.
And nobody can explain yet why... ))))

r.federiconi
23 Jun 2010, 1:33 AM
I dont understand whats mean "pkgs" in Package Descriptors, this property it isn't referenced in the .jsb2 file format description (http://www.sencha.com/deploy/JSBuilder2/JSB2FileFormat.txt):

Example in ext.jsb2:

{
"name": "TabPanel",
"file": "pkgs/pkg-tabs.js",
"isDebug": true,
"pkgs": ["pkgs/cmp-foundation.js"],
"fileIncludes": [{
"text": "TabPanel.js",
"path": "src/widgets/"
}]
}

dherbolt
14 Jul 2010, 1:54 AM
Comments are not removed by YUI Compressor because they strats with /*!, see http://www.julienlecomte.net/yuicompressor/README

franklt69
19 Jul 2010, 9:27 AM
Hi I need some help with deploy extjs using JSBuilder2.jar I don't understand the behavior of this application, for instances I copied the ext.jsb2 to other file myext.jsb2 in it I begun to remove files, for instance this is my User Extension JS Pack:


{
"name": "User Extension JS Pack",
"file": "examples/ux/ux-all.js",
"isDebug": true,
"fileIncludes": [{
"text": "GridFilters.js",
"path": "examples/ux/gridfilters/"
},{
"text": "Filter.js",
"path": "examples/ux/gridfilters/filter/"
},{
"text": "BooleanFilter.js",
"path": "examples/ux/gridfilters/filter/"
},{
"text": "DateFilter.js",
"path": "examples/ux/gridfilters/filter/"
},{
"text": "ListFilter.js",
"path": "examples/ux/gridfilters/filter/"
},{
"text": "NumericFilter.js",
"path": "examples/ux/gridfilters/filter/"
},{
"text": "StringFilter.js",
"path": "examples/ux/gridfilters/filter/"
},{
"text": "ListMenu.js",
"path": "examples/ux/gridfilters/menu/"
},{
"text": "RangeMenu.js",
"path": "examples/ux/gridfilters/menu/"
},{
"text": "RowExpander.js",
"path": "examples/ux/"
}]
},.......

when I build I can read in the console:


Building the 'User Extension JS Pack' package as 'examples/ux/ux-all-debug.js'
- There are 10 file include(s).
- - examples/ux/gridfilters/GridFilters.js
- - examples/ux/gridfilters/filter/Filter.js
- - examples/ux/gridfilters/filter/BooleanFilter.js
- - examples/ux/gridfilters/filter/DateFilter.js
- - examples/ux/gridfilters/filter/ListFilter.js
- - examples/ux/gridfilters/filter/NumericFilter.js
- - examples/ux/gridfilters/filter/StringFilter.js
- - examples/ux/gridfilters/menu/ListMenu.js
- - examples/ux/gridfilters/menu/RangeMenu.js
- - examples/ux/RowExpander.js
Building the 'User Extension CSS Pack' package as 'examples/ux/css/ux-all.css'
- There are 2 file include(s).
- - examples/ux/gridfilters/css/GridFilters.css
- - examples/ux/gridfilters/css/RangeMenu.css
.......

Compressing output files...
- - ux-all-debug.js -> ux-all.js

and when I watch inside the file ux-all-debug.js it contains the others extension, I mean, it have the content of
BufferView.js, ColumnNodeUI.js is that normal, all time the ux-all.js have the same size 149k any help please

regards
Frank

Condor
19 Jul 2010, 10:44 PM
Are you sure you are looking at the correct output file? Your build process clearly doesn't include any other files.

nidea123
1 Aug 2010, 9:24 AM
Hi everybody, I am trying to use the JSbuilder2, but I have a problem and I am not an expert. First I try to generated a normal version of EXT (With all libraries) y just replace the ext-all.js and reload my Page and I have this error:

G is undefined
[Break on this error] window.undefined=window.undefined;Ext=...window.attachEvent("onunload",a)}})(); ext-base.js (línea 7)
Ext.onReady is not a function [Break on this error] Ext.onReady(function() { extprincipal.php (línea 57)

I do not know if I added in the right way the libraries, right now I have:

<link rel="stylesheet" type="text/css" href="ext-all.css"/>


<script type="text/javascript" src="ext-base.js"></script>

<script type="text/javascript" src="ext-all.js"></script> <!-- This is my new Ext version-->

Thanks for all your answers

FG

infojin
9 Nov 2010, 7:50 PM
Problem with chinese character

Hello all,

I use JSBuilder to compress some JS files. And some of it have chinese character. After compressed, the generated XXX-debug.js can not display chinese character correctly. Exactly said, some character are correctly displayed, and some not.

Text encoding uses utf-8.

how to fix it?

thanks

kevinkx7
3 Dec 2010, 9:21 AM
thanks conder for this much information...

[/URL][URL="http://ugly-betty.otavo.tv/"]
(http://stargate-atlantis.otavo.tv/)

Beeaar
7 Feb 2011, 9:29 AM
This is a bit late in the game.. but there is a version I made of JSBuilder2 that takes care of nearly all the issues mentioned in this thread that are related to the tool itself, such as encoding issues and all that. See the JSBuilder2 Bugs thead.

This will be what im using until 4.0 is fully baked. And I may still back port soem of the changes into the JSB 3.x line for things i cant do with out.

The readme is is chock full of advice for minimizing and preparing deployment builds of Ext as well.

tinabucur
30 Mar 2011, 6:01 AM
Just try to use JS Builder 2 , the command line version with JDK 1.5 and also 1.6 , but it does not work. It seems like the jdk version is not ok.
So what is the recommened version , and ant one ?

Thanks,
Cristina

toas1
28 Apr 2011, 6:42 AM
Hi,

I am using JSBuilder to build a set of files that are located on a subversion server. Everytime I run my build script the directory get obstructed. Is there away for me to control they way JSBuilder work so it doesn't recreate the file structure on every build?

Mycoding
6 May 2011, 9:44 AM
Sorry for doubling post
http://www.sencha.com/forum/showthread.php?132590-ext-3.3.1-and-JSBuilder
Could you be so kind to help me do ext.jsb2 file that generate this
ExtCore(from ExtJS 3.3.1) with only one widget Ext.Window

Actiolly I even can't to do add XTemplete.
Error occurs.
I can add XTemplate in Ext Core just by paste it, but I want over JSBuilder.

I do this


{
"projectName": "Ext JS",
"deployDir": "ext-3.3+",
"licenseText": "Ext JS Library 3.3.1\nCopyright(c) 2006-2010 Sencha Inc.\nlicensing@sencha.com\nhttp://www.sencha.com/license",
"pkgs": [{
"name": "Ext Core",
"file": "ext-core-all.js",
"pkgDeps": [
"adapter/ext/ext-base.js",
"pkgs/ext-core.js"
],
"fileIncludes": []
}]
}

rahst12
5 Dec 2012, 6:57 AM
Breaking open a super-old thread here... In the past couple years - have there been any automated scripts to generate the jsb2 file?