Latest - Javascript

Free your data... seed webkit browser mirror button

Barcamp Hong Kong 2010

Javascript Packer

app.Builder.js - First release

Using WebKit Inspector with seed

Application Builder slowly growing

Git Live

Seed doc updates, and Gio async directory listing

RSS and Categories

All Categories

PHP

PHP-GTK

PEAR

Hong Kong

Linux

General Crap

XUL

Digitalmars D

Javascript

Gtk

Roo Javascript

Xtuple ERP

Javascript

14 Jan 2012

Free your data... seed webkit browser mirror button

One of the great things about the internet is the availability of cheap or free services online, so many clients are using gmail, dropbox, github etc. for their business operations. But all to often they forget that these services are often playing the oldest game in the technology industry. "Vendor Lock-in".

While the ones I mentioned are not to bad, you can cheaply and easily rescue or backup your data to another location, or move to an alternative provider. Not all of them are like that. 

We are in the middle of a migration project from Netsuite (It's a SAS Oracle based ERP system) to Xtuple, which is a open source ERP system, based around postgresql. This is a slow and painfull migration, as there is no standard for ERP data, and exporting is slow and clumsy over SOAP. Anyway, as a plesant distraction from this large migration, the same client also wanted us to look at migrating from backpack, a 37 signals product.

Backpack, unlike all the SAS systems I mentioned has deliberately made it hard, or practically impossible to migrate from their services. The primary offering of backpack is a online file storage service that you can permit clients or suppliers the ability to do share files and folders. It is only web based (unlike dropbox or box.net), and there is no desktop client that you can use to access the files other than the web interface.

When I started looking at how the company could extract the data, I tried out a few of the classic tools, like wget and httrack however the strong use of javascript, and the convoluted login system with login keys ensured that those kind of tools did not work. The other requirement was the ability to organise the files into folder, by just mirroring the site, you would just end up with thousands of folders called asset/123123/ where the number is probably the UID of the database record.

So how to rescue the data... Read on for the trick..

19 Sep 2010

Barcamp Hong Kong 2010

Had a great time at Barcamp Hong Kong yesterday, Saw some really good talks on Y-Combinator , portable Mobile app development with a Webkit wrapper and gave a rather disastrous talk on Javascript (due to technical problems with my laptop, nvidia cards and projectors...)

Anyway here's the slideshow I gave in full..

I will update this post later - with a few more details

11 Aug 2010

Javascript Packer

Javascript packer in Javascript, with full scoped variable replacement

Source:

git clone http://git.roojs.org/gnome.introspection-doc-generator

http://git.roojs.org/?p=gnome.introspection-doc-generator;a=tree



05 Jul 2010

app.Builder.js - First release

A Release!!! - Well Idle hands make cool stuff...


What is It?

Basically Glade on steriods. (and it needs a good name!!)

What?

Well Glade the UI builder is great for what it does, however app.Builder.js attempts to solve a few roadblocks in Glade

  • Moving stuff around is klumsy - no drag drop - It's not very good for prototyping layouts...
  • It's limited in what widgets can be added
  • Coding (when used as an Ajunta addon) is just downright messy.
  • It's difficult to extend/modify (and in some cases next to impossible)
  • Adding additional properties to widgets is difficult
  • Information is often hidden from display (how many clicks to find out what signals are connected)
  • There is no 'run it and see' option.

So what makes this different..?

  • It's all done in Javascript - using a tree like structure (and it's fully self hosting) - the application is used to modify it'self.
  • It uses GObject Introspection. which solves a number of issues
    • All available properties can be set (and quickly listed, with documentation)
    • how widget's can be packed, can be determined from introspection of the methods.
    • all signals are available, and stubs are created for you to start implementing.
  • Making extra widgets to the application is just a matter of editing files (eventually a UI will enable you to pick from a list of available Introspection elements... )
  • You can build web Applications (using toolkits like RooJS) - ExtJS, Moo etc. could be easily added..
  • It should be quite easy to build Clutter applications...

Do I need to know anything to use it.

Yes, one of the core concepts behind the builder is understanding XObject, a simple Javascript wrapper around GObjects
that enables you to create a JSON like tree, and XObject will turn your tree into an application.

Key features of the XObject are
  • xtype - the name of the GObject (eg. Gtk.Window)
  • packing - the pack property, can be a string (comma seperated indicating how an element is packed to it's parent)
  • id - all objects can have ID's you can fetch any object using this.get('the_id') as long as it's a child of the current element. To look up the tree, use a '.' at the start, or to start at the top of the tree use '/', eg. this.get('/Window') get's you the window. this.get('/Window.toolbar') get's you the first toolbar in the window.
  • el - when an element is created, the GObject is always stored in this.el
  • |pipe - properties - currently the editor uses '|' as a prefix to indicate the value is raw Javascript (eg. a function or Value, that when used should not be quoted as if it was a string.

What state is it in?

Well, It's self editing.. - The application is used to create it's self, just create a new Gtk Project, and point it at the Sample directory, and you can edit the current codebase. (copying it to the Builder directory when you have a stable build)

What's to do...

Quite a few tweaks.. It works, but could do with more time in polishing the interface. My personal goal is to save time using it as a productivity tool, for development. Which is basically where it's at..

Where do I get it?

Download a tarball app.Builder.js.2010-05-25.tgz
or
git clone http://git.akbkhome.com/app.Builder.js

once unpacked/cloned.
run install_gir.sh - to update your gir files.
If you want to try RooJS editor - you need git then
run update.sh

What do I need to get it to work?

basically a working gobject instrospection installation (.gir files and .typelib files) and the latest version of the Gnome seed interpreter
- I know it works on Linux. I would be interested to hear if it works on other platforms.
Note: there is a update script in the distribution which fixes the currently available Gtk gir's (please read the readme.txt for more info)


11 Jun 2010

Using WebKit Inspector with seed

One of the key reasons to create the app.Builder, was so I could speed up the development of Web applications using the Roo library. The web based version saved considerable time, and led to quite an improvement in delivery times for projects. 

It's key drawback was the very limited editing enviroment offered by web based textarea, the slight latency and klunky file writing method. However the ability to use Firebug or Webkit inspector was very usefull in debugging in-development applications.

As I eat my own dogfood by developing with the desktop version, most of the previous issues with the development platform had been solved, however debugging was very difficult - I effectively had to run the application in a browser to get debugging information. So after a day of fustration with that, I decided to investigate the Webkit API a bit further, and to my delight discovered that the Inspector you see in Chromium / Chrome is just a few lines of code away.


As you can see above, I can fully debug the application as it's being modified.

The basic code to do this was quite simple. It needs a couple of fixes to the WebKit Gir file, (which has been submitted as a bug report to Webkit), but this simple bit of code should illustrate how to use it in seed.

//<Script type="text/javascript">

/**
 *  Test of web kit inspector.
 *  create a window + 2 webviews. inside scrolled window.
 *     load google in first, then hook in the inspector..
 * 
 * needs the transfer ownship fixing on return value in  WebKit-1.0.gir
 * 
 *  <method name="get_inspector"
 *             c:identifier="webkit_web_view_get_inspector">
 *       <return-value transfer-ownership="none">
 *         <type name="WebInspector" c:type="WebKitWebInspector*"/>
 *       </return-value>
 *     </method>
 *
 * then compile it..
 * g-ir-compiler /usr/share/gir-1.0/WebKit-1.0.gir -o /usr/lib/girepository-1.0/WebKit-1.0.typelib 
 *
 */
 
 
Gtk = imports.gi.Gtk;
WebKit = imports.gi.WebKit;

Gtk.init(null,null);

// build the UI..
w = new Gtk.Window.c_new( Gtk.WindowType.TOPLEVEL);
v = new Gtk.VBox();
s1 = new Gtk.ScrolledWindow();
s2 = new Gtk.ScrolledWindow();
w1 = new WebKit.WebView();
w2 = new WebKit.WebView();
s1.add(w1);
s2.add(w2);
v.add(s1);
v.add(s2);
w.add(v);

// enable inspector..
w1.get_settings().enable_developer_extras = true;

// load google on show..
w1.signal.show.connect(function() {
    w1.load_uri("http://www.google.com");
});

// load the inspector when loading has finished!
w1.signal.load_finished.connect(function(wv) {
    w1.get_inspector().show();
});

// return the bottom window as the inspector..
w1.get_inspector().signal.inspect_web_view.connect(function() {
    return w2;
})

// show and go..
w.show_all();
Gtk.main();

14 May 2010

Application Builder slowly growing

While paid work is still horribly quiet, my little application builder is getting closer to usable.

I posted a video a while back showing the web version of the Application builder, this is the next generation, a desktop version all done in Javascript using Seed. Not only can it build Roo applications, but also Gtk ones.. (and in theory maybe JQuery/Prototype etc..)

The main reason to switch to a desktop version was the addition of GtkSourceView, which will enable autocompletion and proper code editing.

It's really a proof of concept, but I can easily move it out to github from it's current home - http://git.akbkhome.com/?p=app.Builder.js if anyone want's to help out.

download:

git clone http://git.akbkhome.com/app.Builder.js

run update.sh once download to get the roo library


11 May 2010

Git Live

Inotify and Git auto commit then push using Gnome Seed

08 Mar 2010

Seed doc updates, and Gio async directory listing

The documentation for seed gobject introspection is improving continually, I now have a jhbuild virtual machine, which is picking up the latest versions from git.

In addition many of the documentation details have been expanded, including
  • Interfaces, Enums
  • callback methods are now documented
  • More libraries have been added.
  • More doc comments can be picked up
With better documentation it's finally possible to figure out how to use the API. A classic example of this was a small problem I tried to solve before the API documentation was available. Listing a directory asynchronously, It took me over an hour to get close to figuring out how to do this, I eventually had to give up. as digging through the source, C reference and GIR files took so long.

However within 5 minutes with the documentation, I was able to write a small script to do this.
Gio = imports.gi.Gio;
Gtk = imports.gi.Gtk;

var f = Gio.file_new_for_path('/home/');
f.enumerate_children_async (
        "*",  
        Gio.FileQueryInfoFlags.NONE, 
        GLib.PRIORITY_DEFAULT, 
        null, 
        function(o,ar) {
          // listing completed..
           var fe = f.enumerate_children_finish(ar);
           var ch = false;
           while (ch = fe.next_file(null)) {
               Seed.print(ch.get_name());        
           }
           Seed.quit();
    
        },
        null);

Gtk.main();



25 Feb 2010

Generating Seed Documentation from Gobject introspection

Job hunting is going pretty slowly (if anyone at ubuntu is listening hint hint ;) , and projects are pretty much done, so I get to work on really cool stuff.

While developing in seed is pretty productive, hunting down the documentation, or discovering the right method to use has been one of the roadblocks I have been bumping up against. So wondered yesterday how well the introspection code in seed works.

Turns out, that the built in Seed.introspection() method is pretty pointless, even after committing a few extra features, I discovered it was never going to be much help. However girepostory has it's on gir/typelib file, so you can call introspection directly.

After a few experiments, I worked out to inspect basically every method, and class in Gnome. Hence there is now full documentation for every Gnome Class that seed can talk to (this does not include libxml however, as it does not use gir to talk to that.

Support for doc comments (by parsing the gir files) is there, but the machines I build on unfortunately have rather old gir files, which do not include all the docs comments.

This code could be very easily refactored to generate docs for pygi, gjs or vala.. or any other gir based binding..

For your viewing pleasure..


If it's not working, it's probably as I'm working on it and have broken it.

The code is in my seed subversion repo the key files that do all the work are JSDOC/Introspection.js, and docs.js The rest of the code just deals with Template parsing and handling (/docs/* are the templates)

To run it you need cutting edge seed (which can take quite a while to set up as it depends on a recent webkit build)

Enjoy.

17 Feb 2010

Drag and Drop with seed (Javascript) and Gtk

As part of my, "What to do while looking for a Job" project, I'm exploring the Gtk/Gobject introspection bindings in seed.

It's one of those fun, not documented anywhere, and you have to dig around all the source to understand how to do things projects. And part of a grander plan to develop a generic application builder loosely based around the RooJs builder application I blogged about previously.

The idea is that using Gtk, GtkSourceView, and the concepts I developed in the RooJS Builder, I would be able to create Dynamic Web applications (and eventually Gtk ones) very rapidly due to the ability to closely tie the action code to the interface design.

The core reasons why it speeds up development are:
- Syntax checking is feasible when creating code.
- Adding, editing and selecting properties and event handlers is faster, less error prone, and access to documentation is instant. 
- Visually changing and seeing the effect of a change (the change - reload - test cycle) is reduced to milliseconds rather than tens of seconds.

So far most of the application is mocked up, (and relivant patches have been submitted to seeds' bugzilla for review). However one of the key components I was looking at over the Chinese New Year Break was drag and drop of Palete Items onto the Rendered View of the application (Webkit embedded), (and eventually the tree that makes it up). To do this involved seriously testing the Gobject introspection bindings and how the interact with the drag and drop methods in Gtk.

So Read on if you are interested in how it all comes together.

   (Page 1 of 4, totalling 34 entries)    next page »

Follow us