Jump to content


Photo

Business Web App Demo with jQuery UI


  • Please log in to reply
12 replies to this topic

#1 markus_ja

markus_ja
  • Members
  • 319 posts
  • LocationAustria

Posted 29 January 2016 - 05:38 PM

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/

 

Attached File  sms-jqueryui.jpg   148.34KB   6 downloads


  • ielite, Nico Wouterse, BobLawrence and 1 other like this

#2 BobLawrence

BobLawrence
  • Members
  • 78 posts
  • LocationBeaver Bank Nova Scotia Canada

Posted 29 January 2016 - 06:28 PM

Nice Work!!



#3 ielite

ielite
  • Members
  • 701 posts

Posted 29 January 2016 - 08:16 PM

I am, keep us updated!



#4 markus_ja

markus_ja
  • Members
  • 319 posts
  • LocationAustria

Posted 23 February 2016 - 04:27 PM

Added:

  • jQuery UI Dialog
  • My Own Pager with jQuery UI sortable and jQuery UI theming

sms_pager.jpg



#5 Laksekjønn

Laksekjønn
  • Members
  • 440 posts

Posted 23 February 2016 - 07:46 PM

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?



#6 markus_ja

markus_ja
  • Members
  • 319 posts
  • LocationAustria

Posted 23 February 2016 - 08:43 PM

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.



#7 BobLawrence

BobLawrence
  • Members
  • 78 posts
  • LocationBeaver Bank Nova Scotia Canada

Posted 24 February 2016 - 12:11 AM

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?



#8 markus_ja

markus_ja
  • Members
  • 319 posts
  • LocationAustria

Posted 24 February 2016 - 09:30 AM

Here you can download:

http://www.file-uplo...utTest.zip.html
 

If you have some comments or improvements just let me know.



#9 Laksekjønn

Laksekjønn
  • Members
  • 440 posts

Posted 24 February 2016 - 09:26 PM

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);


#10 markus_ja

markus_ja
  • Members
  • 319 posts
  • LocationAustria

Posted 25 February 2016 - 10:04 AM

Thanks, for the tip. I was not able to find out the reason :)



#11 markus_ja

markus_ja
  • Members
  • 319 posts
  • LocationAustria

Posted 25 February 2016 - 10:10 AM

Not included in that project, but I use jQuery UI together with font-awesome. Haveing free and great looking icons.

https://fortawesome....o/Font-Awesome/

 

For the TW3Button I just use:

btnBack.InnerHTML := '<i class="fa fa-chevron-left"/>';
jQuery(btnBack).button();


#12 Nico Wouterse

Nico Wouterse
  • Moderators
  • 249 posts
  • LocationAustralia

Posted 10 January 2017 - 04:13 AM

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
 
.

  • Jørn E. Angeltveit and ielite like this
Nico Wouterse

#13 dymatrix

dymatrix
  • Members
  • 6 posts

Posted 06 April 2017 - 09:02 PM

Cool stuff!  what ever happened to it?






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users