Sam Beauvois | general dev, .net and other stuff

I want a simpler way to assign icons to my jquery ui buttons

JQuery UI has a nice widget for the buttons, problem is, imoh, that when I want to assign an icon for a button I have to do it for each button separatly.

Here is the sample from the jquery ui website :

<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>jQuery UI Button - Icons</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
 <script>
 $(function() {
 $( "button:first" ).button({
 icons: {
 primary: "ui-icon-locked"
 },
 text: false
 }).next().button({
 icons: {
 primary: "ui-icon-locked"
 }
 }).next().button({
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 }
 }).next().button({
 icons: {
 primary: "ui-icon-gear",
 secondary: "ui-icon-triangle-1-s"
 },
 text: false
 });
 });
 </script>
</head>
<body>

<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>

</body>
</html>

jquerysample

It works but I think it’s not the easiest way, I would prefer to configure the html tag with a property to say what is the icon I want.

So my solution is to use the data attribute of the element on which we want the button widget to be applied


<a href="#" class="button" data-icon="ui-icon-pencil" id="myid">my text button</a>

and in the document ready of the page

 $(document).ready(function () {

 $(".button").button({
 create: function (event, ui) {
 var icon = $(this).data("icon");
 if (HasValue(icon)) {
 $(this).button("option", "icons", { primary: icon });
 }
 }
 });
});

Basicly, when a button is created, I check if I have a data-icon property setted, and if so I use it to set the primary icon property of the button.

I’m working with ASP.NET, so if I use WebForms I put that little piece of code in my master page, and if I’m workgin with MVC, I put the code in the _layout.cshtml file.
This way I don’t have to worry about setting the icon for each button.

But where are the icons defined ?

The example I used sooner (ui-icon-pencil) is a class of the icon set of a jquery mobile theme (you can see what’s available on the� themeroller page).

If I want to define a custom icon, I do it this way

in the CSS:

.ui-icon.ui-icon-xlsx
{
 background: transparent url('images/xlsx.png') no-repeat;
}

and in the html:

<a href="#" class="button" data-icon="ui-icon-pdf">XLSX</a>

xlsxbbbb

MVC and Entity Framework : Unable to retrieve the metadata for the model

Let’s say you are developing an MVC application and you want to add a generated controller with the associated views.

You do this:

Setting the controller’s name
Choosing the template: mvc controller with read/write actions and views, using Entity Framework
Choosing the model class
Choosing the data context
Clicking “Add”

It’s possible that you get this error:

The solution is quite simple:

Just go in the web.config file and comment the connection string

Then try again

It works!

Don’t forget to uncomment your connection string and you are done.

Quick tip : avoid .Parent.Parent.Parent…..

A simple way to avoid things like this :

HiddenField ct = (HiddenField)((Button)sender).Parent.Parent.Parent.Parent.Parent.Parent.Parent.FindControl("thehiddenidentifier");

is a simple loop


Control parent = ((Button)sender);
 do
 {
   parent = parent.Parent;
   ct = (HiddenField)parent.FindControl("thehiddenidentifier");
 }
 while (ct == null && parent != null);

You can make it an extension :


public static class ControlsXT
 {
 public static Control FindInParents(this Control ctrl, string searchidentifier)
 {
 Control foundControl;
 do
 {
 ctrl = ctrl.Parent;
 foundControl = ctrl.FindControl(searchidentifier);
 }
 while (foundControl == null && ctrl != null);
 return foundControl;
 }
 }

and use it this way :


HiddenField ct = null;
Control searchedControl = ((GroupRadioButton)sender).FindInParents("thehiddenidentifier");
if (searchedControl != null && searchedControl is HiddenField)
{
ct = (HiddenField)searchedControl;
}

what do you think ? do you have any other solutions ?

Quick tip: list all poco’s properties and their values

Let’s say you have a poco and you want to list all its properties whith their values for debug purpose (or other purposes : logs, …)

You can write something like this :


string porperties = "property1 : " + this.property1;
porperties+="property : " + this.property2;
// ..
porperties+="propertyn : " + this.propertyn;

but it’s long and painful, plus you can forget some properties

The reflection can help us here :


string porperties = "";
 foreach (System.Reflection.PropertyInfo f in this.GetType().GetProperties())
 {
porperties += f.Name + " : " + f.GetValue(this, null) + Environment.NewLine;
 }

And if you want to be a bit clever, you create a base object and redefine the ‘ToString() method like this:


public class POCOBase
{
public override string ToString()
{
string ret = "";
foreach (System.Reflection.PropertyInfo f in this.GetType().GetProperties())
{
ret += f.Name + " : " + f.GetValue(this, null) + Environment.NewLine;
  }
  return ret;
 }
}

Then just inherit from POCOBase and call the ToString() method

The output should be something like this :

AccountID : 10
ExternalREF : 090xfe
FIRSTNAME : USER 1
LASTNAME : TEST
PHONE : 00044440000
RegisterDate : 30/09/2009 16:20:02
Remark :

I think it’s quick, easy and useful

A simple local storage explorer

When building web apps using the html5 local storage, it’s sometimes hard to check what is actually stored in the browser’s local storage

Of course the chrome resources explorer is nice, but there is no formatting when we want to see datas stored as json

And the technique used to see what’s in the local storage is not the same in all browsers

So I ended up with creating a small html page using some javascript projects such as jQuery, highlight� and� vkbeautify

It’s not really beautiful, but I think it might be helpful

You can download it here if you want to use it :� http://www.sambeauvois.be/codes/20120611.sbe.LocalStorageExplorer.zip

Older Posts »