Let's say I have two pages, MyWebsite/website/index.html and MyWebsite/website/item.html. Is it possible in AEM for index.html to use menu1 and item.html to use menu2, while each menu is completely different?
This is easily doable. There are so many possible ways of accomplishing your goal; how you do it is going to be based on how you've decided to architect your pages, components, and authoring UX.
If you hard include the navigation component into the page, you could have the index and item pages use different templates and page types. One page type could inherit from the other with only the partial which includes the navigation overlayed. Each page type would hard include a different navigation component.
You could use a single page type with a hard included parsys where the author can use either of your two navigation components.
You could use one page type and have the option to change the navigation component resource type in the page properties.
You could have a single navigation component with the option to change designs in the component dialog.
If by "totally different" you mean that the component style and functionality remain the same, just the link text and destinations change, then you can use a single page component and a single navigation component. The component might read the sibling and/or child pages and dynamically create the links. This is a common scenario.
If you want the navigation component to inherit down to subpages, you can use an iparsys or a regular parsys and InheritanceValueMaps. Both are common practices with different effects depending on your goal.
This was a very broad question. If you choose a direction that you want to go and post code with more specific questions, we can be of more help.
In my QML application there are many components like map, video, console and so on. I want to allow the user to change current layout of components (position and visibility). The problem is that I want each layout to be separate .qml file which reuse already existing components. For example on layout switch map should not be destroyed and instantiated again. Here is an example of what I would like to avoid - each layout creates components only for themselves so layout cannot be changed. I had some experiments with reparenting components on state change but it produces a lot of code and nothing works.
Looks like you need to use states! Each state can arrange same items in different layout. They can even re-parent items.
Now question is: can you move state description to separate file. IMO it should work. I didn't try it.
Anyway items will not be recreated so you will achieve main goal.
I am using ASP.NET (MVC 4 internet application template). I have the master page and within it I embed another page. This embeded page should have the appearance shown here (Draft): http://snag.gy/OGIut.jpg
This page is three column. First column has a groupbox and into it some radio buttons (options). In the second column there are more groupboxes, as seen in figure above (see link above) and the same for third column. Each groupbox has a title, and before the title a checkbox (this is useful for enable or disable the entire groupbox so user cannot select any options within it). In third column at the end there is a plain button (not 3D), and at the bottom of the page there is a grey section where there is a plain button at the rightmost.
So as I am completely new in web and css programming I am thinking about how to organize all this elements in the view to have the appearance indicated in the picture.
Could anyone help and tell me how to do this? any example? I am very frustrated when working with html and css because I find difficult to place the elements in the correct place.
Maybe you should consider to use frameworks to help to place the element on a grid. The most famous one is of course Bootstrap but there is plenty of these http://usablica.github.io/front-end-frameworks/compare.html. It makes the web development really faster and easier.
Plus, these kind of frameworks comes with JS & CSS library which can be really helpfull to create modern webpage with sliders, smooth scroling, models windiws etc..
I want to create a news application for my website.
My question is how should i create drag-able panels/canvas inside another panel/canvas.
What i exactly intend to do can be seen on netvibes.com . The website has different panels of every news group, and this panel could be moved from one place to other, but in a well defined manner. And the other panel take over the place of dragged panel.
Is there any component in flex, which can help me make something like that.
If i was unable to make my question clear, plz let me know, i will try to make it more clear.
Regards
Zeeshan
A TileList with drag and drop enabled should be able to accomplish something like that. Or, use a Spark List with a custom layout that you create.
It might be a bit tricky getting the list elements to drag and drop based on clicking the title, but it should be doable.
I think you should consider a more advanced solution with drap-n-drop with a custom panel based component. The places the panels can move can be implemented with a different custom canvas based component. The advantage would be to move the components into different custom positions and panels can be resized independent of each other.
Adobe has some good tutorials for drag-drop operations.
While reviewing the tutorials and example Flex projects, they seem to focus mainly on form elements and data grids, rather than delivering content in a more visual way. Which is what I will need for this upcoming project. As a result, I have a gap in my comfort level that I'm hoping that a seasoned Flex developer can help me hurtle.
The project that I have is a collaboration index tool to display customers products and services using an user interface with four separate panels.
the top-left panel will contain a list of categories in a vertical scroll.
The bottom left panel will contain a wheel effect of sub-categories, based on the category chosen.
The top right panel will contain the detail information - The selected Category Title and Description. And below that, the selected sub-category title and description.
The bottom right panel will contain a list of the service and product items that belong to the sub-category. Below each item in the list will be a link-group accordion with url links for more information in each.
There will be an XML file containing the complete data tree driving this collaboration index.
Additionally, depending on the category chosen, color variances will occur in the background of the some of layout sections.
So, It appears that I will need to create a few custom components, maybe adopt a few existing components, and re-skin everything so that it carries a synonymous look and feel to the client's branding.
Although I have a bunch of questions, tackling the first section seems logical, and the first question that comes to mind in this section is: in the top left panel, should the list of categories be standard Flex buttons that are re-skinned? or should they be object instances somehow brought in to Flex.
Then in the second section, I was had seen a component that displayed images in a way that was perfect for this section. But, the items show here would be just visual, rounded corner blocks with subcategory names in them. So, I'm not sure if that component will work or not.
AS3 is very different from AS2. I'm sure you've noticed by now, but it's worth mentioning in case you hadn't.
Flex Components are basically just a package of Flash objects. So you can, sort of, write every Flex component on your own using just Sprites and/or TextFields. This includes skins. A skin is pretty much just a Shape attached to an object with custom drawing.
A button is just a combination of image+textField+skin, with all the events and skin transitions managed for you.
The reason I mention this is that there is no right way to do what you want. If you're using the List control, you should probably write a component that implements IListItemRenderer. Button does, so you can simply override the Button, no problems. You can have buttons with a label + icon. Or just icon. Or just a label. You can also define where the label is positioned relative to the icon (labelPosition="above|below|left|right"). There is a lot of built-in flexibility.
Thanks for the mention of FlexSpaces. Note that it was finally ported to Flex 4 including a first pass conversion to spark controls earlier this year. Still to do: add dependency injection with Spring ActionScript, remove use of Cairngorm 2.x.
I have been developing Flex 4 quite heavily the past 6 months and must say it would make your job very easy.
Here's what I would do:
1) Check out FlexSpaces for the best Flex 3 project architecture. It's a fully featured CMS in Flex with categories, tags, searching, filesystem, collaboration, etc.
2) Download the Flex 4 SDK and install that. There's no need to use Flex 3 anymore, if you're just getting started, DEFINITELY go with Flex 4. If you need custom components, Spark (the new component architecture) has a very simple way of doing them (here's a cool blog post building a Rating Component in Spark that shows you how do it). Flex 4 is backward compatible with Flex 3 components, so you can use projects/components you find on the internet if you want to, no problem.
3) For the top-left category list, if the categories aren't nested, I would use the spark.components.List, (here's one using more complex item renderers). Then just extend the spark.components.supportClasses.ItemRenderer, which acts just like a Skin. If categories are nested, just use the mx.controls.Tree. Check out that FlexSpaces project for that (they show how to use XML/ArrayCollections in the tree, your "object instances brought into flex somehow" question).
4) For the wheel effect, the only thing I don't like about Spark so far is that it's difficult to animate layouts. But people are starting to make 3D layouts, check out Here's 5 3D Layouts for Flex 4 by Ryan Campbell. There's also OpenFlux if you want very easily animated layouts. Flex effects in general are quite clunky, so I end up just using Tweener or TweenMax for animations.
5) As for reskinning, trying to reskin using the Flex 3 architecture would be a monumental task, if you wanted to make it look clean and nice, and it would be insane trying to reuse that code in the next project. For Spark, it's a snap, and it's 100% mxml. Just copy the whole sparkSkins folder from the SDK and start changing things, and you're good to go.
But yeah, that FlexSpaces project is a very solid example for what you're talking about. Totally open source.
Cheers