What is the best way to code a full Dojo web application? - dojo

I am trying to code a medium sized full web application based off dojo.
I have a basic BorderContainer that is placed at the document.body.
In order to make code maintainable and easy to read, I want to put fully contained widgets/modules in each of the sections. That can be simply added by a couple lines such as...
var topTabs = new TopTabs();
top.addChild(topTabs);
And then I want to stitch them all together so that they can invoke work in each of the other widgets, in order to follow the MVC model.
So for instance, one example that I would like to insert the following widget that is fully contained into the top section that looks something like...
So my question is....
What is the best way to create these fully defined and encapsulated widgets/modules?
Since my widgets will also contain other Dijits, then are template based widgets the route to go? Or is it better to create widgets/modules that are purely programmatically defined?
Thanks

Depends how much you are familiar / comfortable with declarative/html (templated) versus programmatic/javascript. You can definitely go both routes;
I seldom use templates, which are static by nature and mean two set of entities in two languages, usually two files, to account for. Besides, with dojo/dom-construct & dojo/dom-style, I have an effective dynamic replacement to html templates, allowing to build self-contained complex widgets
jc

Your going to want to read about making custom dijits (widgets) - https://dojotoolkit.org/documentation/tutorials/1.9/recipes/custom_widget/
templates vs programmatic is more of a personal choice. templates are much easier for a UX (non dev) to work with. i like to use templates as it reduces the clutter in my js files i prefer to keep things separate logic (js), style (css), and structure/layout (html).

Related

Are there any specific scenarios to use Liferay search container over Dandelion datatables framework?

Are there any specific scenarios to use Liferay search container over Dandelion data tables framework,when Data tables provide far better collection of features(such as multi column sorting,filtering,searching,i18,etc) and is easy to integrate too.To rephrase my question,should data tables be preferred over search container for all scenarios.
It's 100% your choice. Search Container is styled as every built-in list of entities within Liferay (because Liferay uses Search Container). If you use it or choose any other method/framework/technology is strictly your choice.
Make your choice based on
appearance and level of visual integration you'd like to have
familiarity with the framework
suitability for the job
maintainability of the solution for whoever is going to maintain your code
assumed stability (or level of maintenance) for your solution of choice
If you end up using either one of the proposed solutions or yet another one: So be it. For your future maintainers sake, just make sure to choose one and standardize on it.
If you're customizing Liferay's UI, you might still need to understand Search Container, but that's a different story.

Whats the difference between tiles:insertTemplate and tiles:insertDefinition

tiles:insertDefinition and tiles:insertTemplate both has putAttribute , i am not understanding the difference between the two.I am using tiles 2.x version.
thanks in advance
kranthi
A template is a view which expects to be supplied attributes while definitions are named instances of a template defined in tiles.xml (or pragmatically using the API).
tiles:insertDefinition requires the name attribue to be set, because you are inserting a defintion you have layed out in tiles.xml.
tiles:insertTemplate creates a new definition on the spot, from a view and expects you to insert values at that point. It requires the template parameter be set, there is no name attribute.
In general I don't think you should need to use either of these tags often (you can create tiles using applications without ever using either). Avoiding their use means having all definitions clearly laid out one place AND being able to see how all definitions fit together.
This central view is tiles greatest strength which these tags can undermine.
tiles:insertDefinition still means using named definitions, there is still one central location were all layout is controlled but because we are inserting the definition within a view we loose our overview of how everything fits together.
tiles:insertTemplate is akin to a JSP include, you are creating a new definition at that moment in the view and use it. This tile is not part of the overarching view.
In case the argument was not clear, JSP includes can achieve the same reduction in boiler plate code as Tiles can. It is the overarching view which tiles provides that allow you to easily change page structure across the whole application easily. Carefully consider that this is not being undermined.

Knockoutjs and Selenium testing

Looking at Knockout examples, there is no real need for adding IDs to HTML elements. Creating a large form without the IDs seems to make it easy to maintain.
Though, this creates a problem with Selenium HQ. There is no way to uniquely identify elements on the form.
What are the choices? Is there another method for Selenium to select elements created by Knockout?
or will I have to assign IDs to elements?
I have reviewed other knockout and selenium questions. All of them had IDs defined for the HTML elements, when they started.
Thanks
Abhi
Short answer: Add ID's to your HTML elements.
Although you do not need these attributes in order for your website to function, you will make the life of your testers so much easier.
I've encountered the exact same problem in a project where a large ASP.NET MVC 4 application was created, that uses Knockout.js and Selenium extensively. For form elements, I relied on ASP.NET MVC utility methods to generate the output HTML in combination with data-bind expressions. ASP.NET MVC automatically generates unique NAME and ID attributes based on the backing model.
However, in all other cases where I had to render tables, display forms or dialogs, I ended up adding ID attributes to these HTML elements. If you think about it, this is a logical consequence of your requirements. Knockout is awesome because you longer need ID's and NAME's to wire your layout (HTML) and behavior (JS) together. However, other frameworks, such as Selenium, require these ID's to be present.
Yes, you could work your way around it with complicated and bloated XPATH expressions. But this will dramatically decrease the maintainability of your tests. In my experience, adding ID's to hundreds of HTML elements took less than a day and increased productivity of our testers by a manifold.
Remember, it may be nice to develop functional websites with as little HTML as possible. But if this makes your website untestable, you will lose more than you gain. Testability is non-functional requirement, but this does not mean it is not important!
You should add Ids to your html elements. your application will become more complicated and probably you'll need to bind multiple view models to different section on the same page, you'll need Ids. For example in ASP.NET MVC, you'll want to build a partial view to display all products you ordered, and you want to share this partial view all the way through the ordering process, you'll want your binding to this specific partial view section

Best Practices in Building and Processing Macros

I'm building an IOS application, and would like to offer the user the ability to use macros for different aspects of the system.
For example, I might have a simple macro this this:
{include name="some name" pre="some it of htmk" post="some other bit of html"}
That would include the contents of the item named "some name" in the body of the document the user is working on.
or I might have something more complex like this:
{notesForTag name={ListAllTags pre="some bit of html" post="some other bit of html"} pre="..." post="..."}
Which would list all the documents in the system grouped by tag.. the ability to add on data (like html) at the beginning and the end of each tag returned would allow the user, for example, to format the response as a table, or use particular styling, etc.
Conceptually, I know how I want this to work, but I'm wondering if there are any macro construction and processing best practices out there that would help me on my way. Anything geared towards Objective C / IOS would be most helpful.
Edit: To add some clarity here, what I'm looking to discover is an efficient and accurate way to parse something like this. Having parsed things, I think the rest will be fairly straightforward.
Thank you.
NSScanner would probably work well for parsing something like this, perhaps with a recursive function to allow nested macros like the second one. You may also want to consider using XML to represent your macros, which would allow you to use NSXMLParser to parse it, so you only have to worry about the content and not the structure.

Customization of header and footer

I have a webpage where i have to allow the users to customize their header and footer.
i.e. I should store the Users header and footer HTML and should dynamically add it to the webpage. I have two ways of storing in database and storing in a files. Please suggest me which approach is better.
Solution with files get messier with time. With databases, it is easier to scale.
With databases, you can add bookkeeping fields (like last-modified, tags, or something else depending on your need). Backup is easier also perhaps.
With files, you have to worry about directory structure (having too many files in single directory is not good), permissions, etc.
If you are worried about efficiency, stop worrying :). MySQLqueries are pretty fast especially with the caching mechanisms/modules in apache.
Ther's not a better approach (there are pro and cons in general) but in this specific case I would store these snippet as a file because you have less complexity for sure (because you don't need to query a database and fetching result) and you don't relies on database connection for including header and footer
If you're using .Net you've something called Portals which does the same thing. There are things like master pages also that you may want to read. But all these are in .Net. Even if you're not doing this in .Net it'd be time consuming to handle all this stuff on your own as you need to take care of cross-site scripting and a few other issues.
Check the platform for features that you're working on to find out if this is possible by them. (Let me know the platform that you're using so I may help in that). Also, if the changes are just cosmetic you may store just css settings instead of complete html.
Finally it'd be better to use sql if the number of changes to store are more than 100 as the complexity will bug you down. But if you're fewer users and don't expect any scaling up then sure go for a file system.
:
Here are a couple of links for understanding portals and web parts in .Net:
http://msdn.microsoft.com/en-us/magazine/cc300767.aspx
http://msdn.microsoft.com/en-us/magazine/cc163965.aspx