Jump to content
Sign in to follow this  
lynkfs

JQWidget integration

Recommended Posts

I got asked to have a look at how to integrate jqxWidgets in SMS

There are a heap of ready-made widgets under the name of jQuery UI Widgets, ranging from grids to calendars to tooltips and many more.

The example here is a jqxButton with an image in the left top corner.

The vanilla html file for this looks like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Button, CheckBox, Toggle Button, Repeat Button, Radio Button, Link Button, Button" />
    <meta name="description" content="The jqxButton widget allows you to display a button on the Web page." />
    <title id='Description'>The jqxButton widget allows you to display a button on the Web
        page.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    
    <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            // Create jqxButton widgets.
            $("#jqxButton").jqxButton({ width: 120, height: 40 });
            // Subscribe to Click events.
            $("#jqxButton").on('click', function ()
            {
                $("#events").find('span').remove();
                $("#events").append('<span>Button Clicked</span');
            });
        });
    </script>
</head>
<body class='default'>
    <div>
        <input type="button" value="Button" id='jqxButton' />
    </div>
    <div style='font-size: 12px; font-family: Verdana; margin-top: 10px;'>
        <div>Events:</div>
        <div id='events'>
        </div>
    </div>
</body>
</html>

which requires a number of external js and css files. These can be local or reside on a cdn server somewhere. Make sure they are served from either http or https, same as the platform the app is executed on.

The widgets are created first, immediately after the document is dom-ready, and they will be rendered on a placeholder element with the same element.id as the created widgets.

This can be simplified considerably in SMS :

All functions can be recoded using this function tied to the ubiquitous jQuery "$" directive :

function jqxQuery(aTagObj: string): Variant; external '$';

which results in this code :

    var props : variant := new JObject;
    props.height := 40;
    props.width  := 120;
    props.imgSrc := "https://www.jqwidgets.com/jquery-widgets-demo/images/twitter.png";
    props.imgPosition := "topLeft";

    jqxQuery( "#jqxButton1" ).jqxButton(props);
    jqxQuery( "#jqxButton1" ).on('click', procedure() begin
      browserapi.window.alert('clicked button1');
    end);

and the placeholder element 

  jqxButton1 := TW3Panel.Create(self);
  jqxButton1.SetBounds(30,20,126,46);
  jqxButton1.handle.style.border := '1px solid grey';
  jqxButton1.handle.innerHTML := '<input type="button" value="Button" id="jqxButton1" />';

Sort of a rough and tumble approach, but it does work.

 

A better way is to encapsulate these widgets in a dedicated component :

unit jqxButton;

{ **************************************************************************** }
{                                                                              }
{ Smart Mobile Studio                                                          }
{                                                                              }
{ **************************************************************************** }

interface

{$I 'Smart.inc'}

uses
  System.Types,
  {$IFDEF THEME_AUTOSTYLE}
  SmartCL.Theme,
  {$ENDIF}
  SmartCL.System,
  SmartCL.Components;

type

  TJQXButton = class(TW3CustomControl)
  protected
    function  MakeElementTagObj: THandle; override;
    procedure InitializeObject; override;
  published
    property caption: string;  // read GetCaption write SetCaption;
  end;

function jqxQuery(aTagObj: string): Variant; external '$';

implementation

//#############################################################################
// TJQXButton
//#############################################################################

procedure TJQXButton.InitializeObject;
begin
  inherited;

  Caption := 'Button';     //default

  Handle.ReadyExecute( procedure ()
  begin
    var Script := browserapi.document.createElement('script');
    Script.src := 'https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js';
    browserapi.document.head.appendChild(Script);
    Script.onload := procedure
    begin
      writeln('jqxcore loaded');
      var props : variant := new JObject;
      props.height := self.height-2;
      props.width  := self.width-2;
      props.imgSrc := "https://www.jqwidgets.com/jquery-widgets-demo/images/twitter.png";
      props.imgPosition := "topLeft";

      jqxQuery( "#jqx" + self.handle.id ).jqxButton(props);
    end;

    handle.innerHTML := '<input type="button" value="' + Caption + '" id="jqx' +
      self.handle.id + '" />';
  end);

end;

function TJQXButton.MakeElementTagObj: THandle;
begin
  result := w3_createHtmlElement('div');
end;

end.

which can be instantiated as simple as

  jqxButton2 := TJQXButton.Create(self);
  jqxButton2.SetBounds(230,20,130,50);
  jqxButton2.Caption := 'Button2';
  jqxButton2.OnClick := procedure(Sender:TObject) begin
    browserapi.window.alert('clicked button2');
  end;

Project demo here and source code here

 

 

Share this post


Link to post
Share on other sites

and here is the Grid - JQWidgets implementation

image.png

 

working sms demo here

 

Notes :

  • there are 2 different formats of defining the grid, one using jQuery explicitly and one as a web-component. The latter format has a bug somewhere and comes up consistently with a runtime error. The former format works fine.
  • the 'export to Excel' button actually fires up Excel if installed and run locally (sms demo is grid only but take my word)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×