• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

html widgets

 
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi all
I am new to the web programming world and was tasked with creating new widgets . These would be html widgets. But am not sure on how to proceed. Would any kind soul provide any information on how one would go about creating/building html widgets.
Is there a framework to build html widgets ? If you had a war file could you also create a widget for it.
thanks in advance
James



 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Welcome to the Ranch!

Based upon your description I've moved this to the HTML forum as it sounds like you are wanting to build client-side "widgets".

Bear in mind that there's really no such thing as "HTML widgets". HTML on provides structure. You'll also need CSS for styling, and JavaScript for behavior.

And just to be sure we're all on the same page (so to speak), we're talking about the type of widgets such jQuery UI provides, right?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I would say that jQuery as a core platform is almost essential. Whether you want to pattern your widgets on the jQuery UI set is entirely another matter. (Note they jQuery UI is a widget set based on jQuery, not to be confused with jQuery itself.)

 
James Whitemore
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Bear for your prompt reply ,appreciate the link to jQuery UI, it appears to be more in line with what I am trying to achieve. How will this also help me building a portable widget. For example lets say I built a web app that displays the temp and I have a war file . How do I reuse this component/web widget on different jsps? A classic example would be the date widget , which already has built in functionality.
Cheers
-James
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

How will this also help me building a portable widget.


Probably won't. I just pointed to them to make sure that was the type of thing you were talking about.

For example lets say I built a web app that displays the temp and I have a war file . How do I reuse this component/web widget on different jsps?


If we are truly talking about client-side widgetry, then the fact that there is a war file, and that the HTML is generated from JSPs is completely irrelevant.

You could look at the sources for the jQuery UI widgets to see how they were written, but I'm not a particularly big fan of their approach. YMMV.

Generally, client-side widgets are primarily JavaScript. The script can either create the HTML structure it expects on-the-fly, or instrument already existing markup (that conforms to what it expects), or a combination of the above. The widget usually provide basic and default CSS to style the elements, with the ability for the user to customize by overriding the CSS.

Reusability is simply a matter of including the JavaScript, HTML and CSS resources on all pages that need it, and writing the code (particularly the script and CSS) to be independent of the page upon which they are used. (For example, do not depend upon specific id values, or markup outside of the widgets realm.)

If you're not savvy with JavaScript, HTML and CSS, you may have a bit of a challenge ahead of you.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Btw, even though the 3rd edition of my book is still under construction, the info in jQuery in Action (2nd Ed) is still relevant. In chapter 7 I show how to write a photo slideshow widget (the Photo-matic!) as a jQuery plugin.
 
author
Posts: 297
5
Android Firefox Browser Fedora
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:
You could look at the sources for the jQuery UI widgets to see how they were written, but I'm not a particularly big fan of their approach. YMMV.


For a more standards based approach you should take a look at the Web Compenents specifications and the X-Tag and Polymer libraries.
 
James Whitemore
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Appreciate your feedback Bear and Rob

Bear
I will check out jQuery, out of curiosity you mentioned you are not a fan of the jquery UI widgets . Would you share you thoughts on why you don't like it . So it would give me some context while evaluating the pros and cons.
You mentioned that I could achieve it also via jQuery plugins . What is the difference between the UI widgets and plugins ? Is the widget built on top of plugins ...


Rob
It seems there are so many options to achieve a task jQuery ,Xtag, Polymer... now the fun part to figure which one. I did some goggling but could not find the what benefit Xtag had over jQuery for example . Would either of you gentle men be able to share your thoughts...


Thanks
 
Rob Crowther
author
Posts: 297
5
Android Firefox Browser Fedora
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
X-Tag and Polymer allow you to create components using the same syntax and approach as the W3C standard for creating web components.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

James Whitemore wrote:
I will check out jQuery, out of curiosity you mentioned you are not a fan of the jquery UI widgets . Would you share you thoughts on why you don't like it .


I don't care for the API style that they chose.

You mentioned that I could achieve it also via jQuery plugins . What is the difference between the UI widgets and plugins ?


You can write plugins with many API styles, jQuery UI widgets are plugins that chose a particular API style.

Is the widget built on top of plugins ...


The widgets are plugins (and do rely on other jQuery UI core plugins)

 
James Whitemore
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Rob
was reading a bit about x-tag and polymer. Had a few questions . I like the idea about having reusable components by creating custom mark to represent the functionality .But I hardly find any information on how to work with existing server side components .Is this still in its alpha stages . Is this production ready yet ? I don't find too many examples/samples on it integrating with server side components. I found out that we are using JSF2 (Richfaces). Would you know how this would kind of work with those type of server side applications, doesn't have to be JSF2 . Do you have any links or recommendations I could follow.


I found a lot of samples and code for JQuery to work with Rich-faces to help with this idea .

Thanks
-James

 
Rob Crowther
author
Posts: 297
5
Android Firefox Browser Fedora
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

James Whitemore wrote:But I hardly find any information on how to work with existing server side components



I'm not sure why you'd need to? They're both client-side libraries? None of the code in either of the libraries is going to execute on the server.

James Whitemore wrote:Is this still in its alpha stages . Is this production ready yet ? I don't find too many examples/samples on it integrating with server side components.



The spec is new, the browser support info for both libraries is on the respective websites.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic