Tag Archives: widgets

Gitview – JS Widget To List GitHub Repositories

Posted on by
3

image

If you’re an active user of GitHub and work on any open-source projects then may want to show off your projects and activity on your own website.  This is where Gitview comes in.

image

Gitview allows you to display all your GitHub repos, and gives the option to display a detailed version including a graph of your project activity, or a simple compact version if you prefer.  Not only that, but all the information displayed is live.

The full feature list is:

  • Asynchronous loading of all date
  • All data is 100% live
  • The Activity Graph uses the Canvas element
  • You can toggle the regular or small version
  • No need for additional styles
  • Works with all JS frameworks (jQuery, Prototype, Mootools, etc)
  • WTFPL license

Continue reading →

jQuery UI Bootstrap – A Bootstrap-themed kickstart for jQuery UI widgets

Posted on by
1

jQuery UI Bootstrap

jQuery UI Bootstrap is an open-source effort by @addyosmani to introduce the Bootstrap styling into the standard jQuery UI widgets.  It covers many of the widgets available on the jQuery UI website including:

  • Accordion
  • Tabs
  • Buttons and Button Sets
  • Horizontal slider
  • Progress Bar
  • Dialogs
  • Icons
  • Date Picker

bootstrapui

Whilst it’s still a work in process, what’s available already is fantastic and I’d love to see where this project goes.  It’s the next logical step for the Bootstrap framework; we have the standard web elements and layouts, now it’s about making those pages interactive using one of the most popular widget libraries available, jQuery UI, and making that look like the rest of the site…well it just makes good sense.

Bootstrap

Here’s a quick introduction to Bootstrap for those that haven’t yet heard of it, or aren’t sure what it does.

Bootstrap is a prototyping framework introduced by Twitter in mid-2011.  It’s aimed at making more consistent browsing experience for users as they browse various sites and applications on the web.  It’s free, open-source, and uses LessCSS making it a breeze to modify to suit your own needs.

Since it’s launch, it has been very well received by the developer community, and I’ve noticed it being adopted by many popular websites and open-source software including:

I’ve even used it on the Cube Websites website for the form elements and as a grid system.

Get Started

jQuery UI Bootstrap seems like a great idea, and has a lot of potential for making Bootstrap even better.  I’ll definitely be trying it on my next project involving UI widgets.  Whilst it looks fantastic already, I’d love to see where it goes from here.  One of the things I’d like to see is the stylesheets done in Less so that the widgets can be customised to look exactly how the web designer wants.

HOW TO: Correctly Set Source Model In A Magento Widget

Posted on by
1

I just started writing a custom Magento widget for an upcoming Magento Template following the tutorial in the Magento knowledgebase.

As one of the options for the widget I needed a custom value provider, so decided to use the instructions provided to specify a source model using the source_model parameter.

However, by using the given format the widget options just wouldn’t load in the admin area.

<source_model>widgettwo/services</source_model>

I couldn’t easily find any results by searching Google for help, so after spending a bit of time with trial and error I found the solution to this problem. Instead of using the module/model structure, you actually need to provide the class name of your model e.g.:

<source_model>Cube_CategoryFeatured_Model_Categories</source_model>

After updating my widget.xml file to use the new source model parameter everything worked smoothly.

The widget I’m creating will be included in the next commercial Magento template, and I’ll also make it available on Magento Connect for free of charge!