Code Share - Custom Widgets - Font Awesome CSS Buttons

[Mark Smart]

Hi all,

I thought I'd share some custom CSS buttons with the community.
They're simple buttons intended for mobile use, and use the free Font Awesome icon font http://fortawesome.github.io/Font-Awesome/ which I've included in the downloadable folder which has a link below.

The buttons are: Exit, Back, Refresh, Tick/Check, Pause and Play.
Each button has a response field, along with a couple of Font Awesome properties. Example images here:
https://plus.google.com/photos/10064237 ... n5WDlYv-KQ

A folder with a similar structure to the ProfoundUI/userdata folder can be downloaded from here: https://onedrive.live.com/redir?resid=9 ... 293%211841 (right click/download) and the contents copied to your own userdata folders.

I've tried the widgets in browser-based pages and all seems fine. However, they don't display in the mobile client. I'm currently trying to work out why (I'm having lots of problems with jQuery.children and .attr functions in the mobile client too, but that's probably for a different post). If anybody can give me a couple of pointers as to what I'm doing wrong in this respect, I'd be very grateful.

Any feedback welcome, especially if it's to tell me a "best practice" way of doing things.

Cheers,

Mark

[Scott Klement]

When running from the PUI session controller (i.e. running from browser without Genie) we automatically load JavaScript and CSS files from the profoundui/userdata/custom directory and it's subdirectories.

However, this is not done in the mobile client. Could that be why your custom widgets do not work?

If so, you could manually include them in your display file by using the 'external javascript' and 'external css' properties of the record format.

jQuery will be much more difficult. My experience is that jQuery requires changes to the start.html file because you need to force the JS to load in a particular order. In that case, you will not be able to use jQuery with the Profound UI Mobile Client, since the start.html is embedded inside the mobile client itself, and you therefore cannot modify it. You could, however, create your own client with PhoneGap where you include jQuery and link it in properly.

[Mark Smart]

Thanks Scott,

I'll try referencing the js/css via the "external file" properties. Do the custom widget .js files also need to be referenced or are they only used by the editor/compiler?

Are there plans to make jQuery, and/or other js frameworks, available in the Mobile Client?

Regards,

Mark

[Mark Smart]

Hi Scott,

I think I've resolved the Mobile Client jQuery issue by checking it's loaded before trying to use it.

In this example, a grid row data gets faded out/in while a "tap again" message gets faded in/out when the user first taps a subfile record, thus requiring a double tap by the user to start their pick.

Code: Select all

// Called when a subfile row is clicked/tapped
function pickSelSubfileRowClick(row) {

  // Load jQuery, if not already loaded, then call doClick function.
  // If jQuery already loaded, go straight to doClick fucntion.
  if(!jQuery) {

    pui.loadJS({
      path     : pui.normalizeURL("/profoundui/userdata/custom/js/jquery-1.11.2.min.js"),
      callback : doClick(row)
    });
  } else {
    doClick(row)
  }
}

// perform the subfile row fade out/in and the "Tap Again" message fade in/out.
function doClick(row) {

  // Get the parent class of the pick number on the selected row
  var parent = $("#pickNum\\."+row).offsetParent();
  var parentClass = $(parent).attr("class");

  // if a selected row class. take this as second click.
  if (parentClass == 'cell odd selected' || parentClass == 'cell even selected') {
	pui.click();
  } else {
        
    // Fade out row, fade in action text, then reverse.
    $(".rowData"+row).fadeTo("slow", 0).fadeTo("slow", 1);
    $("#lblAction\\."+row).fadeTo("slow", 1).fadeTo("slow", 0);

  }      
}

This seems to work well, though I still haven't managed to sort out the Font Awesome issue. The clickable button divs are there, but the icons aren't displayed.
I'll let you know when I've found a solution.

Regards,

Mark

[Mark Smart]

Firstly, apologies to anybody who may have tried my custom widgets, only to find out that the Response property of existing widgets no longer saved the response field to the DDS.

I'm sure one of the Profound Team will correct me if I'm wrong, but it appears that custom widgets can't have properties that are already being used by base widgets.

To resolve this, I renamed the response property to responseInd in all the css*.js files as well as the property itself in the addCustomProperty of cssbuttonproperties.js, as below:

cssbuttonproperties.js
response is now responseInd

Code: Select all

pui.addCustomProperty({
	name: "responseInd",
	type: "long",
	controls: ["css back button", "css exit button", "css pause button", "css play button", "css refresh button", "css accept button"],
	category: "Identification",
	help: "Specifies a response indicator that is returned to your program when the element is clicked.",
});

Changes made to cssacceptbutton.js
response is now responseInd

Code: Select all

// Define Base widget
pui.widgets.add({
	name: "css accept button",
	newId: "cssAcceptButton",
	menuName: "CSS Accept Button",

	// additional default property values can be specified here
	defaults: {
		"width": "48px",
		"height": "56px",
		"background position": "center",
		"background repeat": "no-repeat",
		"z index": "99999",
		"field type": "image",
		"responseInd": { "fieldName": "btn_go", "customTrue": "", "customFalse": "", "dataType": "indicator", "formatting": "Indicator", "indFormat": "1 / 0" },
		"tool tip": "Accept/Confirm/Go",
		"css class": "ankerCSSButton",
	},
	
	propertySetters: {
		"field type": function(parms) {
			if (parms.design) {


		        // design mode content creation code goes here
		        // add preview image
				var img = document.createElement("img");
		        img.src = "/profoundui/userdata/images/icons/DesignerIcons/cssAcceptButton_DesignerIcon.png";
				img.style.position = "absolute";
		        img.style.left = "0px";
				img.style.top = "0px";
				img.style.width = "100%";
		        img.style.height = "100%";
				parms.dom.appendChild(img);
		        parms.dom.style.overflow = "hidden";
				
			}
			else
			{
				
				// code here will define how the widget appears at run-time
				parms.dom.innerHTML = "";
				
				var fontSize = parms.properties["font-size"];
				var fontAwesomeFontSize = parms.properties["Font Awesome Size"];
				var fontAwesomeFontScale = parms.properties["Font Awesome Scale"];
				var html = addButtonMarkup("accept", fontSize, fontAwesomeFontSize, fontAwesomeFontScale);
				parms.dom.innerHTML = html;
			}
		}
	},
});


// Now, add an entry to the Widgets Toolbox
pui.toolbox.add({
	category: "Anker Widgets",
	widget: "css accept button",
	text: "CSS Accept Button",
	icon: "/profoundui/userdata/images/icons/DesignerIcons/cssAcceptButton_DesignerIcon.png",
	
	// this determines the look of the drag/drop proxy as we drag the widget element off the toolbox
	proxyHeight: 30,
	proxyWidth: 30,
	proxyHTML: '<img src="/profoundui/userdata/images/icons/DesignerIcons/cssAcceptButton_DesignerIcon.png" style="width: 30px; height: 30px;">',
	
	defaults: {
		"width": "48px", 
		"height": "56px", 
		"responseInd":{
          "fieldName":"btn_go",
          "customTrue":"",
          "customFalse":"",
          "dataType":"indicator",
          "formatting":"Indicator",
          "indFormat":"1 / 0"
		 }
	}
});

The js files have been updated in the onedrive share posted yesterday.

Again, apologies if this has caused you any issues.

Regards,

Mark