When doing larger sites in "big business", you most probalbly work in a team with several developers.
Let's say dev A makes a form to insert new user data, B creates a user list, C makes some privilege administration and D does crazy statistic graphs work with image generation and so on.
Each dev begins to develop his own component, creates a view and a template and tests that independently, until each component works.
Now, the client wants to have all those components on one bit HTML page. How to achieve this?
How to assemble different views/templates in a form of composition so that they remain modular and can be developed and tested independently?
It seems inheritance is not the way to go because all of those UI components are equal and there is no hierarchy.
The idea of the assembling template is something like
<html>
<head>
// include the css for the components and their assembly
</head>
<body>
// include user data form here
<some containers, images, and so on>
// show user list
// show privilege administration in this part
// and finally, the nice statistic graphs
// perhaps, we want to display some other components here in future
</body>
</html>
I have not found an answer on the net yet.
Most people come up with one big template which just implements all of the UI functionality, removing all modularity. Each component shall have its own template and view dealing only with that component developed by one person each, and they then shall be sticked together just like bricks.
I would highly appreciate any hints!
Inclusion tags are the way to do this. Each application defines tags which render their own template fragments, then the master template can assemble them into a single page.
Related
Our Application has components which consume components with consume components of varying complexity. So i just want the input on the page, to validate when an object is set that the text is correct. The issue is that it is one of these subcomponents.
My colleague told me that there is 2 ways to do this, The first is to use Page Objects, and Chaining annotation to find it on my page, and then find the next id etc until my input is found. It requires me to look through another teams' Component Markup to narrow it down to the input i want to leverage. I dont believe I should have to go into another component definition, or a definition of a definition to get the appropriate chain to get this arbitrary input. It starts to create issues where if a lateral team creates changes unbeknownst to me, my PO will be broken.
The other option my friend asked was to use fixture.query to find the component. This would be as simple as:
fixture.query((el)=> el.attribute["id"] == "description",
(comp){
expect(comp.value, value);
});`
Using Query looks at the markup but then will automatically componentize it as the appropriate SubComponent. In this case, comp.value is the value stored in the HTML. So, if i did something like:
fixture.update((MainComponent comp) {
comp.myinput.value = new Foo();
});
Then I am setting and getting this programmatically, so i am a bit unsure if it properly would reflect what is on the screen.
Whats the best course of action? It seems PO would be better, but im not sure if there is a way around having to deep query for input boxes outside of the component i am testing.
Thanks
I don't think I have a definitive answer for you but I can tell you how we do it at Google. For pretty much any component we provide the page object alongside the component. This is twofold it is for testing that widget, and also so we can have this as a shareable resource for other tests.
For leaf widgets the page objects are a little less fleshed out and are really just there for the local test. For components that are shared heavily the page object is a bit more flushed out for reusability. Without this much of the API for the widget (html, css, etc) we would need to consider public and changes to them would be very hard (person responsible for making the public breaking change needs to fix all associated code.) With it we can have a contract to only support the page object API and html structure changes are not considered breaking changes. At times we have even gone so far as to have two page objects for a widget. One for the local test, and one to share. Sometimes the API you want to expose for a local test is much more than you want people to use themselves.
We can then compose these page objects into higher level page objects that represent the widget. Good page objects support a higher level of abstraction for that widget. For example a calendar widget would let you go to the next/previous month, get the current selected date, etc. rather than directly exposing the buttons/inputs that accomplish those actions.
We plan to expose these page objects for angular_components eventually, but we are currently working on how to expose these. Our internal package structure is different than what we have externally. We have many packages per individual widget (page_objects, examples, widget itself) and we need to reconcile this externally before we expose them.
Here is an example:
import 'package:pageloader/objects.dart';
import 'material_button_po.dart';
/// Webdriver page object for `material-yes-no-buttons` component.
#EnsureTag('material-yes-no-buttons')
class MaterialYesNoButtonsPO {
#ByClass('btn-yes')
#optional
MaterialButtonPO yesButton;
#ByClass('btn-no')
#optional
MaterialButtonPO noButton;
}
i am very confused right now. I came from Wordpress,and laravel frameworks, and now i am assigned to develop Joomla! project.I thought i can easily manage to create custom template in joomla. I have been reading a lot of articles and documentation. I've manage to create a template and display modules.
But now, i need to start digging the right way to display the content and manage it in Joomla! back-end.
Here's my problem. I have home page (Long page) and inner pages (Short page). Here's the structure of my homepage
<html>
... header links and other necessary tags
<body>
<section class="homepageonlysection1">
<div>
image and text here! (i made this as 1 modules in Custom HTML)
</div>
<div>
video here (i made this as 1 modules in Custom HTML)
</div>
</section >
<section class="homepageonlysection2">
<div>
form here (i made this as 1 modules in Custom HTML)
</div>
<div>
image and text here! (i made this as 1 modules in Custom HTML)
</div>
</section>
<section class="homepageonlysection3">
<div>
image and text here! (i made this as 1 modules in Custom HTML)
</div>
<div>
video here (i made this as 1 modules in Custom HTML)
</div>
</section>
</body>
</html>
and this is my inner pages
<html>
... header links and other necessary tags
<body>
<section class="innerpagessectiononly1">
<div>
Article Content (i will do as jdoc:inlucde type="component")
</div>
</section>
<section class="innerpagessectiononly2">
<div>
sidebar Content (i will do this as 1 modules in Custom HTML)
</div>
</section>
</body>
</html>
Those template are really different.
Problem 1 : How can i make my inner pages if my homepage structure is very different? Or
Problem 2 :How can i make display my section (homepageonlysection) in home page only and display (innerpagessectiononly) in inner pages only?
Problem 3 : Is there a Advance Custom Field (ACF for wordpress) as joomla extension ?
Please advice. Any help would be appreciated.
One thing I recommend is really digging into the core templates (both front and backend) to understand how things work. In particular Isis the backend template illustrates a number of complex options.
Now, overall I think you probably do not want to do the homepage the way you are doing it, since it will be very inflexible and hard to change. On the other hand it's possible that you want it inflexible and hard to change. In reality you may not need to have separate layouts at all or the differences may be minimal and may not require any special code at all.
So, first, this document explains how to determine if you are on the home page. So you can clearly pretty easily test for that and then enclose your two separate designs in the true and false conditions. This is basically what you see in Isis. In your case you can place one or more module position inside the condition. In fact you could make it so this layout does not even load a component. Then you can just make an empty article and make the home page a single article link to that empty article. (I would put that article into a separate landing page category)
A second option if you really want to have a totally different design on the home page is to make a totally separate template for the home page. If say you called this "my home template" and your other template "my everywhere else template" what you could do is make "my everywhere else template" the default and then on the default (homepage) menu item assign the "my home template" template. In this special template you can even use the module jdoc:include (instead of modules) to call specific modules in highly customized ways. I would suggest you go read the docs on that. You can even set the options and the chrome right in the template.
However, I think you are missing a key feature of Joomla. In your question you have not said what kind of menu link you are planning to use for your home page. The third option is that for the homepage you use the same template but a specific alternate layout that you use for this page. For your case what you would most likely want to do, assuming that you are not using the featured articles layout type anywhere else (i.e. that no articles are marked featured), is to make your homepage using an articles > featured menu link. Then you can assign all the modules you made to the home page via the menu modules tab. Depending on how your module positions are in the template it could just be that they will float up.
Your design is not a particularly unusual or complex however. Many Joomla homepages consist of multiple structured sections of text and media. These are made with menu types such as "featured" and "category blog." The advantage of using these menu types is that then you are storing your content in articles and these are much easier to manage. ALso you don't have to give someone access to the module manager in order to allow them to edit these snippets of content. So the fourth and possibly best approach is to use one of these standard content layouts. For example if you were to make a category called "home page content" and then put the content for each of the modules in a separate article and (assuming you want a consistent structure) put the image for each of them into the structured intro text image field, you can then make a "category blog" menu link to the "home page content" category as you default (home page) menu link. Then what you can do is make one or more layout override for those individual items that gives the exact layout you want. Assuming that they are all the same, you can select that as a alternate layout in your menu link. Actually even if they are not all the same you can just do a more complex layout instead of looping through the list and doing the same thing for each article, do each one separately.
A fifth approach is to use an alternative layout instead of an alternate layout. The difference there is that you would give the layout a new name (in either the category or featured view) and then you will have the additional flexibility of being able to create options in the menu link that are different than those for the normal category/featured views. It's up to you to decide what you might want to add there.
There are other options as well, because Joomla has a very strong template community and they like to have a lot of flexibility. But that will get you started.
I am a bit confused on the best way to handle this problem:
My web site needs read-only static web pages (typically the About part of a web site) with 2 simple constraints:
they need to be translated
they need to have flexible layout: to incorporate base headers/footers, floating images and/or tables, and non-interactive elements (like a bootstrap carousel).
Several solutions that I have thought about:
I can of course directly write HTML files but the translation part will be awkward (a lot of <h1>, <ul>, <li> and <p> which are of no interest to the translator).
I can use Django flatpages with some markup languages but I lose a lot of flexibility (for instance template tags are not recognized)
Use generators like Hyde, but it seems quite overkill for my needs and internationalization seems a bit difficult
Does someone have other propositions that I can look into ?
Thanks !
Use django-cms, it has a Page model that can be translated and has a very smart plugin system to add many content-types into every page.
I use it a lot and it's very easy and yet powerful
For completeness and fairness, here's a full list of available CMS packages for Django.
for a much simpler solution, I would create a model called "Page" with lets say title and text fields.
The title and the text fields I would register to django-modeltranslation which will handle the translation issue.
For the text field i would use TinyMCE which let you insert basically any HTML you want so you can do whatever you need.
I want to convert component to module apart from using plugin is ther any process to handle it.
(or)
whether we should code somethimg to make my mvc component to module .
(or)
is there any possibility to make my component to be placed at desired module position in my template
Regards,
noble
You can't convert a component to a module. A component, module and plugin are all 3 different things. Obviously if your component was something like a simple upload form, then this could be turned into a module but I doubt very much it is.
Nor can you place the component in a module position.
Judging by what you're asking, I am assuming that this is your own custom component, in which case, you should have had a little think and done a little research before you made it and brainstormed your exact requirements.
1st thing You can't convert a component to a module. You have to understand the difference between them
Components are the largest and most complex extensions of them all; they can be seen as mini-applications. Most components have two parts: a site part and an administrator part. Every time a Joomla page loads, one component is called to render the main page body. For example, Content (com_content) is the component which handles the display of content; users can view at the frontend of your site and, as an administrator, you can edit the content. Components are the major portion of your page because a component is driven by a menu item and every menu item runs a component.
Examples: Content (com_content), Banners (com_banners), Contact (com_contact), News Feeds (com_newsfeeds) and Web Links (com_weblinks)
Modules are more lightweight and flexible extensions used for page rendering. These modules are mostly known as the “boxes” that are arranged around a component, for example: the login module. The footer is a module. Modules are assigned per menu item. So, you can decide to show or hide the logon module depending on which menu item the user is viewing. Sometimes modules are linked to components such as the “latest news” module which links to the com_content and displays links to the newest content items. However, modules do not need to be linked to components, as a matter of fact they don't even need to be linked to anything and can be just static HTML or text.
Examples: Banners (mod_banners), Menus (mod_menu), Who's Online (mod_whosonline)
Read more
If you are using Joomla 1.5 then please refer this plugin it does exactly what you want. http://extensions.joomla.org/extensions/2723/details
I'm a pretty experienced Grails developer, but most of my experience has been with using grails for serving up JSON/XML to a flex app and some relatively simple HTML websites.
I've been diving deeper into using the sitemesh integration in grails and I'm struggling a little to find best practices for some more complex configurations, and I'm curious if there are any good tutorials or examples out there. The original Sitemesh website isn't that useful as the tags it talks about aren't directly exposed in grails.
A google search is mostly showing old mailing list posts and some vanilla sitemesh stuff which is helping me to move a little further along, but it's a lot of trial and error.
I fully understand how the basic g:layoutTitle, g:layoutHead, and g:layoutBody tags work. Those are easy and well documented.
The kinds of things that I'd like to see examples for:
g:applyLayout - the documentation on this is weak and I don't fully understand the uses suggested in the main docs. How is this different than setting the meta name='layout' content='foo' property?
g:pageProperty - some better examples on how to pull and use properties into the main template by setting the values as meta tags in the page that's being decorated. The grails docs on pageProperty show only the onload attribute from the body being brought forward. I think you can also use meta tag values here as well, anything else?
can you use multiple levels of sitemesh layouts? My testing seems to make me think that I can't, but that seems to reduce reusability. I think that the answer here is some usage of the g:applyLayout, but that's where I'm struggling the most.
the g:pageProperty is a very powerful, but very poorly documented thing. Lets say in my layout I specify where to put some content like this:
<html>
<body>
<g:pageProperty name="page.header" />
</body>
Now in my page I can specify some content:
<content tag="header">
<!-- header -->
</content>
Sitemesh will take the content tag, regardless of actual position in the HTML of the page and place it where it needs to go in the flow of the layout.
Even better, if within my page I render a template that also specifies a content area with a tag of "header", it will overwrite the first declaration, and it will be the template's content that will be rendered in the final layout.
Well, I can answer a bit:
Your first and third questions are related, as you can't chain layouts using the meta tag.
Your final page should have a meta tag as you suggest, but if you want to layer a layout on top of another layout, you put a g:applyLayout tag at the top of the child layout, pointing at the parent.
In your edit.gsp, you'd have:
<meta name="layout" content="editTemplate" />
and in editTemplate.gsp, you'd have:
<g:applyLayout name="baseTemplate" >
<!-- the html for the editTemplate -->
</g:applyLayout>
so edit.gsp would use editTemplate.gsp, which would use baseTemplate.gsp as a base layout. You can chain those as needed.
I haven't used g:pageProperty at all, so I can't throw you better examples there, sorry.
The Sitemesh together with Grails is a very very powerful feature. The more I use it - the more I love it. You can decorate any part of our web site: you can have layout for error messages, tooltips, news lines, comments, etc, etc. Just to note that you can do even that with in your pages and have multiple levels of decoration (no <content> needed):
/view/layout/inline-error-message.gsp
<span class="errorMessageInSomeFancyBox">
<span class="errorIcon"></span>
<g:layoutBody />
<span>
/views/book/create.gsp
<%-- let's decorate our error message with some fancy box --%>
<g:applyLayout name="inline-error-message">${some.error.message}</g:applyLayout>
See our Rabbtor Showcase App for a few very good examples on
creating nested layouts
rendering templates
applying layouts to specific parts of a page
. This app is actually a showcase for our tool Rabbtor which enables using GSP outside Grails but parts related with Sitmesh are also valid for Grails.