How do I build reusable JSP snippets in an app - templates

I want to build reusable JSP components for an application that I am building. There are multiple ways to go around this. The ones that I know of include building JSPFragments and then stitching the page the together. But that is not an elegant way of doing it.
I am also trying to get mt head around JSP tag libraries to be able to build reusable components for JSP. I read in multiple places that tag libraries are falling out of favour fast. There are other frameworks like JSF and Freemarker templates by which I can build re-usable components. What do I use to build these components. Is there a preferred and contemporary approach I can follow?

I am not sure if this solve your problem. But anyway, I started to use FreeMarker, which is a really good template engine. It follows strict the MVC principal. These feature might help you to decide whether FreeMarker is good for your needs:
Including strategy. This is what I use to include header and footer template files in my view.
Macros. Maybe you want but write your own directives. Unfortunately I have no experience with that.
Using jsp taglibs with FreeMarker is also possible.
Note that FreeMarker is just a template engine. You can not include java code into html like with jsp.

If the component is simple you can use .tag files. They are easy to write. If it is more complex, use a tag library. It is a working solution used many times.

Related

Is it possible to use ember components declaratively as tags?

I have a lot of experience with AngularJS and I'm also playing around with Web Components and Polymer for a long time now.
What I really love about the these libraries and technologies, is the fact that they let me build my own components.
AngularJS gives me something called "Directives" and Web Components consists of a set of specs where one is called "Custom Elements", which pretty much does how it's called.
So with these I can do something like:
<my-element></my-element>
This is where the web goes, this is what everybody loves about HTML. Declarative tags that are easy to read and encapsulate functionality and behaviour. Also very nice: once Web Components are fully supported in the browsers, I could for example very easily remove my directive and rely on a web component, that looks and works the same without changing any code.
I know, that EmberJS has something called "Ember Components" which lets you basically build your own kind of components too. However, using them in HTML looks something like this:
{{#my-component}}
{{/my-component}}
Is it possible in EmberJS to also use components declaratively as tags?
I actually hate that about html. I hate the structure etc, but that's just my opinion :)
No, there isn't, your component should be declared in a template using the handlebars syntax, and compiled to js. (you can dynamically create views/components, but that's far from declarative tags).
You'll be able to do that when Glimmer 2 ships with Ember. It was supposed to be in with Ember 2.x, but for some reason its still pending. With that you can use angle brackets to define components.
<my-element></my-element>

Best practices and tools for a big, extendible worklight enterprise application

I'm trying to optimize my company's application.
Tha architecture at this time is composed of different folders (inside common folder) for different sections of the app (for example Managing Bills, Managing Canteen, Managing Events etc etc).
Every js and css are included in the first page of the application (login.html) because I'm using the simple page template of jQuery Mobile.
Now I'm considering to add some other components to make the app easier to mantain and maybe speed it a bit.
What do you think about:
RequireJS to divide each section in a module so i can load only the javascript of a particular module at run-time instead of loading within login.html
Inline #imports for CSS files to produce single composite CSS
uglify.js to Minimize file sizes
Handlebars.js to realize fragments of html reusable
Do you think is a good way of work for an application that will become greater by adding new sections?
Do you think of other tools?
Thank you
This is a very broad question. I think you're on the right track... I'll list some libraries that could be worth trying:
Require.js - Will give you the ability to have 'modules' and dynamically determine and load dependancies. Alternatively some people prefer patterns such as the Revealing Module Pattern, jQuery Plugin Style or Common JS style modules. For what it's worth I recommend Require.js.
Bower is a package manager, you can use it to bower install [package]. They have a lot of packages here and you can also link it to your own repo. This could be helpful for managing dependancies.
Uglify.js and Google Closure Compiler are both good for minifying your code. Remember that some minification configurations such as advance mode could break your code. Run tests against the minified version of your source code.
QUnit is good for doing JavaScript unit tests. There are many other alternatives like Jasmine, which is what the Cordova guys use.
Lodash is another (faster) implementation of underscore.js that will provide a lot of utility methods for working wit arrays, objects, functions, etc. It also includes templating support. There's a good talk by the author here.
There a MV* JavaScript frameworks that could help more than jQuery (DOM+AJAX+Animations) or jQuery Mobile (Mostly UI) such as: Dojo, AngularJS, Backbone and Ember.js.
For UI you may want to checkout Adobe's topcoat repository and website. There's also Twitter Bootstrap and Foundation which allow you do to responsive design out of the box. If you're set on jQuery Mobile I personally like this Flat theme.
JSDoc and YUIDoc are good alternatives for documenting your JavaScript code.
I have no idea how many of those tools will interact inside Worklight Applications. It should be fine, since Worklight doesn't impose a certain set of JavaScript libraries you have to use. However, I haven't personally tried most of them inside Worklight Applications.

Web Design - Templates vs Include

I am currently developing a website. I would like to separate content and presentation. I am currently using a Dreamweaver Template to achieve this. However, I find that Dreamweaver's edit regions are very limiting in the design view. I have found that the same goal can be achieved by including the header and footer of my website.
What are the pros and cons of using includes rather than using templates?
First, if I were to rephrase your question, it's more like asking "Should I by a wire frame of a kite or by the glue to stick together what I'm making?" And then, you ask about the pros and cons of buying the wireframe against buying the glue. There are far too many variables as you can see...
And back on your your question... At some point your template will use include files. And for a start, it's worth knowing what you're thinking... Let's look at some basics.
Web design - usually refers to making websites that aren't really interactive. They don't have server-side elements. So most of the site has 'static' contents. If this were the case, you're better off with DreamWeaver, particularly if you're not into html/css editing.
Web development/programming - starts off with something as elementary as mailing a form, to highly interactive sites like FaceBook. Here you'll need to use some server-side language, usually like PHP, ASP or JSP. The choices are many but you've got to choose your own platform or combination of them.
Now to the second option (above). If for example, you were building a site using PHP, one of the nice things you'll do is to include your header, footer and side panels that need to be repeated across all pages. This way, you'll eliminate the need to re-write those sections. But if you were using a program like DreamWeaver, it does this duplication for you. Yes, it physically copy-pastes those sections into every file that needs it. Of course the end result may not be any different. But as a developer, you will be tied down to the DreamWeaver platform or for that matter, any other specific platform.
On the other hand, if you get used to working with an editor like NotePad++ or GEdit, you may switch between editors at any time. But you have the task of hand-coding everything from scratch. But then again, since you would use include files to bring in your headers and stuff, you save development time as well.
I don't know how much of html/css or php you know, but here's one of my demos to show you how to hand-code a site. This ain't complete but you should get an idea.
Link to the video introduction
Link to the video on youtube

When should one use Custom Tag in CFML?

What are some common use cases for implementing CFML Custom Tag (not CFX tag)? In 3 yrs of my CF exp I've never written one. Would someone please enlighten me, under which use case / situation would one choose custom tag over cfc / udf?
Remember that custom tags were, at one time, the only method available to extend CFML (up until version 4) - UDFs came later (CF 5) and CFCs later still (CF MX). They're not as commonly used as they once were for the simple reason that there are more options.
Custom tags are basically procedural in nature in a language that, with CFCs, become more and more OO in practice. This is another reason that they're not very common.
But there's still cases where they come in handy (but are never required) - mostly for interface work. The ability to create both a start and end state can definately come in handy. A simple example could be a "wrapper" for page content the opening tag might add the HTML header and page navigation while the closing tag would add the footer and end the page.
In this way your page content could be nothing more than:
<cfmodule... >
Page Content!
</cfmodule>
Of course there are other ways to do this as well - but sometimes the classics still have value. ;^)
Look at the CFUniform project for a great example of custom tag usage. Custom Tags are great when building reusable pieces for the UI portion of an application.
I think that, for the most part, custom tags have mostly fallen by the wayside since UDFs, CFCs, and integration with Java (and to a lesser degree .NET) allowed easier and more straightforward ways to do similar things.
Looking back to when I started in CF5, I can think of several examples. A good one might be CFX)Zip, which allowed interaction with Zip files before that was available directly through CF.
The only use I can think of offhand in a more modern context would be to provide precompiled code that wasn't written in Java or .NET, such as proprietary doodads written in C. That's a pretty niche use, though.
Honestly, I imagine at this point they exist more or backwards comatibility than anything else.
Ever since CFCs came out I've stopped using custom tags simply because of the overhead. They take too long to initiate and execute. But like #Jim Davis said, they may be useful where you need to write a tag that wraps around other content.
But in a well defined solution, you can do way with them all together.

Beginner: Do I have to use templates when implementing my own designs using CMS such as Joomla?

Brand new to CMS:
With Joomla or other CMS, If I want to use my own design, do I have to make it a template first using proprietary code of some sort = ie using some Joomla templating language - or is using my own design with Joomla simple and independent?
I am not sure the role "templates" play with Joomla and other CMS. I gather they can be used as a complete "pre-made" design where you just tweak it, but are they necessary as a base of some sort to using my own designs? I am proficient with HTML and CSS. I also have been playing around with various Jquery Plugin's for my UI.
Ideally I would like to create any design I can think of with any layout I create and use CMS simply for its database and plugins etc such as a blog or calender back end. I might use it for more features as I learn about them. Do I need to use a "template" or create a "template" to do this?
Thanks!
{edit}
You have to create a template (or change an existing one), how else will the CMS know where to add the information into as the template is a HTML, CSS and Javascript Page group devoid of information and some HTML Tags replaced with CMS Specific tags, which tells the CMS where to add the information. It also include certain files telling the CMS the Name, and othe information of the template.
The First step in creating a template is to have a design.
Do your design in HTML and CSS. (Preferably using the CMS Template folder/directory structure.)
For Joomla use the information in this post: How should I go about writing a Joomla! template?
In Joomla jQuery have to be used in compatibility mode.
The CMS will supply the information, you supply the design and tell the CMS
{/edit}
The Template is the design container, whether you create one from scratch or reuse a current template. I initially used one of the pre-installed templates (together with the documentation) to learn some of the complexities of designing the template. (ex. structure, and what is possible.)
Please also look at my answer to this question How should I go about writing a Joomla! template? as it is a pretty good beginners guideline for template designers in Joomla (Even if I have to say it myself) with a couple of other resources linked in as well.
A Joomla template is nothing but HTML layout stylised using CSS. So to create your own templates you need a good grasp on HTML and CSS.
Joomla, by default provides a couple of templates to start with.
If you are just beginning, creating your own template is not where you want to start...learn more about setting up Joomla. You have enough problems there :)
Joomla! 1.5: A User's Guide is a great beginner book. It takes you through learning Joomla, what templates are, how to make them, and even walks you through setting up WAMP so you can experiment on your local machine.
The templates only affect the styling of your site. If you are starting out, I would work on getting your content in place first and wait on templates until later on.
My experience has been revamping my two websites to use WordPress, then moving to ModX, then moving back to HTML. I believe that you don't need a template but it will make some things easier as it bundles a lot of stuff you'd otherwise have to do manually. --At least for WordPress. I'm not even sure we found a good ModX template but adapted [poorly] a WordPress one. ModX is a good but little known CMS.
With one of my sites I found that it was impossible for WordPress to handle the images, thus I began working with a plug-in developer to create a custom plug-in. He took about a year and it still wasn't useable. Also I hired some consultants along the way. Their biggest contribution was "to complexify things" so I couldn't make any changes myself without going back to them & paying hundreds of $ to change a phone # for example.
I chucked all that and redid everything in HTML5 with Javascript, css and a little php. People here on S.Overflow actually helped me with the coding. I have a 3rd simple site that I may go back to WordPress for but only to use some particular functions which might be a pain to program otherwise.
Here is one of my 2 HTML sites:
coinsandhistory.com