Category Archives: Javascript

Native Browser Wrapper with HTML5 & CSS3

Posted on by
Reply

This blog is due for an update and I’ve got a good one finally.  There’s this open-source project called OpenWebKitSharp that’s so heavily underrated, it’s ridiculous.  Apparently it’s run by GT Web Software, which is surprising — I don’t mean to undercut them, but their projects are great, they just don’t look like much at first glance.  They have something truly valuable to many developers on their hands and I don’t think they even realize it.

Now back to reality, OpenWebKitSharp is just a wrapper for WebKit to be used in [C#] .Net, it’s nothing unexpectedly original except for the fact there’s very little like it.  You have one commercial solution called Awesomium (almost $3k for a license? that insane for new ventures for a medium sized company) and then another called Berkelium (looks great, but interfaces directly with Chromium).

So why do I chose OpenWebKitSharp?

  • No ridiculous licensing.  Though Awesomium may be great to look at for the future, but too costly for a new venture.
  • It interfaces directly with WebKit nighties, I know for a fact the browser itself can’t be easily hijacked.  I’m not saying Berkelium in insecure, but it definitely looks to add another layer rather than creating it’s own rendition of the browser document.
  • I can download the code and have an easily-understood example up and running in minutes.  There’s a solution in their sources prepackaged for Visual Studio.
  • HTML5 & CSS3 Support!  You have all the latest features of the WebKit engine, essentially it’s the same as running Chrome or Safari!
  • It’s simple!
Lastly, why would anyone want this?  It allows a controlled browser environment.  This can be used for a number of applications in which the developer desires to use web technologies to build applications that look and feel native to Windows.  It’s an easy alternative to Adobe Air and other related technologies.

Injecting jQuery: Just for Fun

Posted on by
Reply

I’ve put together a small snippet you can enter at the top of any page. Use it to inject the jQuery library into the page, and optionally run a small script of mine which will create a small debugging tool. It’s like Firebug Lite, except much smaller and less useful.

Just type this into the address bar after you’ve loaded a page:

javascript:var i,s,ss=['http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js','http://extraordinarythoughts.com/toybox.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

Want only jQuery? Use this:

javascript:var i,s,ss=['http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

ExtJS GridView autoFill & forceFit

Posted on by
Reply

It’s no surprise grid layouts can be tricky in ExtJS. After much struggle, I’d like to point out an obvious that isn’t well documented – ExtJS GridPanels scrollbars, and those scrollbars are always accounted for unless configured otherwise.

If you happen to be using autoFill & forceFit with autoHeight, you’ll notice there’s still a gaping void of 10 pixels or so to the side of your columns, this is where scrollOffset comes in. scrollOffset is used to predict where a scrollbar would be, just set it to 0 and enjoy your new, nicely formatted, grid! This also works with Ext.grid.EditorGridPanel, of course.

// Perfect full-width columns!
new Ext.grid.GridPanel{
	autoHeight: true,
	viewConfig: {
		autoFill: true,
		scrollOffset: 0
	}
});

Understanding jQuery Plugins

Posted on by
9

jQuery Logo

If you’re here, I’m sure it’s no surprise jQuery is an easy library to use. jQuery may be easy, but it still has its quirks and can be difficult for some to grasp beyond basic functionality and concepts. No worries, I’ve got a simple guide here to help break down code, that may seem like overly complex syntax, into simple thoughts and patterns that can be easily understood.

Here, we’ve got a basic plugin layout:

// Shawn Khameneh
// ExtraordinaryThoughts.com
 
(function($) {
	var privateFunction = function() {
		// code here
	}
 
	var methods = {
		init: function(options) {
			return this.each(function() {
				var $this = $(this);
				var settings = $this.data('pluginName');
 
				if(typeof(settings) == 'undefined') {
 
					var defaults = {
						propertyName: 'value',
						onSomeEvent: function() {}
					}
 
					settings = $.extend({}, defaults, options);
 
					$this.data('pluginName', settings);
				} else {
					settings = $.extend({}, settings, options);
				}
 
				// run code here
 
			});
		},
		destroy: function(options) {
			return $(this).each(function() {
				var $this = $(this);
 
				$this.removeData('pluginName');
			});
		},
		val: function(options) {
			var someValue = this.eq(0).html();
 
			return someValue;
		}
	};
 
	$.fn.pluginName = function() {
		var method = arguments[0];
 
		if(methods[method]) {
			method = methods[method];
			arguments = Array.prototype.slice.call(arguments, 1);
		} else if( typeof(method) == 'object' || !method ) {
			method = methods.init;
		} else {
			$.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
			return this;
		}
 
		return method.apply(this, arguments);
 
	}
 
})(jQuery);

You may notice the structure I’ve provided is significantly different from others. Plugins can vary depending on usage and needs. Here, it is my goal to explain the concepts in code well enough for you to understand and author a plugin in such a way that suits you best.

So, let’s break it down!
Continue reading →

ExtJS Snapping Windows

Posted on by
6

There’s a really useful feature in Windows 7 that allows windows to be resized just by dragging them to edges of the screen.  Well, I wanted that feature for an ExtJS desktop environment, so here’s my solution for Windows 7 style window dragging.

The following code overrides some functionality in ExtJS and allows windows to be resized in the same manner.

Features:
  • Windows can be dragged when maximized and will resize when dragged.
  • Dragging a window (cursor within 20 pixels) to top of container will maximize it.
  • Dragging a window (cursor within 20 pixels) to left or right of container will resize it to that half of the container.
  • The window ghost will indicate its new size according to placement when dragging.
  • Windows will restore to their original size before being snapped. (Not working in ExtJS 4 version)
  • Adds snapLeft() and snapRight() functions to the Ext.Window component.
  • Unsnapping windows will position them relative to the original cursor position on the title bar. (v2 only)
  • Supports autoloading (v2 only)
Bugs / Quirks:
  • Windows that initialize maximized will restore to 800×400
  • Windows that initialize with resizable = false cannot be dragged when maximized. (Only ExtJS 3.3.1 version)
  • Maximizing a window when snapped to half the screen will make it resize to half of the screen.  (only ExtJS 3.3.1 version when using resize button)
Yeah, the quirks can be easily fixed, I just have no immediate need to fix them.

Continue reading →

ExtJS Window Reference & Focus

Posted on by
Reply

I’ve got a short & sweet code snippet to provide provide more usable functionality in ExtJS 3.3.1.

This code snippet solves two minor drawbacks in Ext that I felt the need to address:

  1.  To reference a [nested] component’s window in ExtJS, you must explicitly pass a reference to the window or obtain the window component by means not recommended to be practiced in production-level code.
  2. Selecting an item in a list grid does not always give the parent window focus.

To solve this, I’ve created a snippet of code to give each component a property called “ownerWindow” and components containing a “dynamicGrid” will focus the parent window when clicked.

Components that aren’t rendered or have no containing window will default the “ownerWindow” property to false for convenience.

// Shawn Khameneh
// GFX International
// www.gfxi.com
 
Ext.Component.prototype.initComponent = Ext.Component.prototype.initComponent.createSequence(function(){
	this.ownerWindow = this.ownerWindow || false;
});
 
Ext.Component.prototype.afterRender = Ext.Component.prototype.afterRender.createSequence(function(){
	if(!this.ownerWindow) {
		if(this.ownerCt && this.ownerCt.ownerWindow) {
			this.ownerWindow = this.ownerCt.ownerWindow;
			if(this.dynamicGrid || this.root) {
				this.el.on('click', function(){
					this.ownerWindow.show();
				}, this);
			}
		} else {
			this.ownerWindow = this;
		}
	}
});