Jump to content
markus_ja

Business Web App Demo with jQuery UI

Recommended Posts

If somebody is interested. I am currently develping a demo on how I can use SMS with some external UI javascript libraries for business web applications. In that case I used the open source library jQuery UI.

 

The 'content' can be visually constructed in a seperate form. That form is then loaded into the main page. So you can design each content page well organized in one unit (form).

 

For customized theming you can use the jquery ui ThemeRoller.

http://jqueryui.com/themeroller/

 

post-933-0-62809300-1454078327_thumb.jpg

Share this post


Link to post
Share on other sites

Any code to share?

 

Looking at the pictures, I guess you're using Smart HTML DIV/FrameElement to inject the pages using innerHTML, each form have its own DIV, I bet you are using the layout manager to resize this DIV, looks like you're using an IFrame element.

How have you created the views? Using the built-in SmartMS components (Panel, label, button, check box, edit box, memo). 

 

...but I'm just curious to know what's the approach at the controller side, how do you bind the views?

Share this post


Link to post
Share on other sites

Sure, I can share my code, but it's a lot of prototyping. Not very well formated and optimized code. It's just a attempt to see, if it possible to create Single Page Web apps in SMS. Do you have a place where I can share my code?

 

I use Forms to create the layout of my content. For the jQuery controls I just use TW3DIVHtmlElement, TW3Button, TW3Edit components, place it on the form, and use jquery to initialize that div element. E.g.:

function jQuery(aTagObj: TW3TagObj): Variant;
function jQueryExternal(v: Variant): Variant; external '$';

props := new JObject;
props['icons'] := new JObject;
props['icons']['primary'] := 'ui-icon-locked';
props['icons']['secondary'] := 'ui-icon-gear';

jQuery(btnIcon).button(props);
jQuery(divSortable).sortable();

Then I create and load the content Form and use it in the main Form. For the runtime layout I use TLayout.

 

That is the big advantage using SMS, I can design my Form in a seperate window, and don't need to put all the code in the HTML file at once.

 

The cool thing is, that I can use any 3rd party javascript library, to create an app. I don't need a server side web architecture, like ASP.NET or PHP.

Share this post


Link to post
Share on other sites

re:Sure, I can share my code, but it's a lot of prototyping. Not very well formated and optimized code. It's just a attempt to see, if it possible to create Single Page Web apps in SMS. Do you have a place where I can share my code?

 

That`s fine . Most of us are just trying to understand the concepts and learn a few new tricks.

 

:D

 

re: Do you have a place where I can share my code?

 

Do you have Google Drive?

Share this post


Link to post
Share on other sites

Thanks for sharing.

 

When I launch the app I've get  Uncaught #<Object> 

 

Go to "Project Options" and "Forms" uncheck auto for all forms except the MainForm; and

 
comment the initialization section for all forms except the Mainform
 
initialization
  //Forms.RegisterForm({$I %FILE%}, TContent_Anchor_Form);

Share this post


Link to post
Share on other sites

The code file donated by Markus (see previous threads) is not available anymore

However, he left enough snippets to be able to re-create the basics

 

Code below uses his ideas to render a bare bones jQuery-datepicker 

unit Form1;
 
interface
 
uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application,
  SmartCL.Controls.EditBox, system.types;
 
type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
    MyBox    : TW3EditBox;
  end;
 
function jQuery(aTagObj: TW3TagObj): Variant;
function jQueryExternal(v: Variant): Variant; external '$';
 
implementation
 
{ TForm1 }
 
function jQuery(aTagObj: TW3TagObj): Variant;
begin
 
  result := jQueryExternal(browserapi.Document.getElementById(aTagObj.TagId));
 
end;
 
procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
 
  MyBox := TW3EditBox.Create(self);
  MyBox.Text := 'Date';
  MyBox.Font.Size := 14;
  MyBox.SetBounds(20,20,200,40);
 
  var props : Variant := TVariant.Create;
  props['dateFormat'] := 'dd/mm/yy';
  jQuery( MyBox ).datepicker(props);
 
end;
 
 

Building upon that find two packagable components :

 

- TjQDatePicker          code        demo

- TjQButton                 code        demo

 

 

Note 

change app.manifest to

 

CACHE:
res/app.css
res/jquery-ui.css
res/jquery-1.12.4.js
res/jquery-ui.js
 
.

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

×