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..
Related
With VS 2003 we were used to desing the web forms quite similarly to win forms: the Textboxes, Labes, Buttons etc. were positioned with absolute coordinates (inline css) in divs with ms_positioning="GridLayout".
With VS 2010 this way of designing web forms seems to be gone (at least it can no more be used to get the design finished quickly) and the use of absolute coordinates and inline css is considered obsolete anyway.
I would like to get some hints how to design web forms like the one in sample screenshot the "correct" way.
I would like to preserve following important things:
One should be able to quickly / easily add, remove or move the form's controls while maintaining the overall look and feel of the form - our web forms tend to change / grow over time as customers' requirements change.
The form should not crumple together when the user reduces the width of the browser window - the form width should not descend under some minimal value.
I am considering using html tables, but for example for the Address-Block on the sample screenshot I would have to have a table with 9 columns (one for every vertical boundary) and use lots of colspans - not neccessarily the fastest way of designing the forms considering future changes. And I heard in 1999 or so that the html tables were obsolete.
I read I should use divs and css for pretty much everything but I am unclear in how to create a web form like the one on the sample screenshot without providing absolute positions and sizes some way or other.
Any hints will be greatly appreciated.
Thanks in advance
Best Regards
Erich Horak
I would divide up your three main sections into divs, then tackle each section individually. My main tool when approaching this is the Web Dev Toolbar. I use it to view markup and CSS of any form I locate online that I like the look of:
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
(CSS -> View CSS and CSS -> View Style Information (hover mouse) are helpful drop down options)
Forms are created with CSS mainly through the use of label and input classes:
http://speckyboy.com/2011/05/24/css-form-templates-tools-services/
Your form looks difficult at first glance, but when you break it down it really isn't that hard to do. The link above has samples - simple like you mentioned - but simple or not, the CSS is the same.
I am making a top menu, and it looks like this:
http://i.stack.imgur.com/5O5G5.png
The contact tab will remain in its place and the home tab has to be first.
IF the user wants to add another tab, they can in the cms editior (DNN) they would just create the link and wrap the div tag about the link etc..
im stuck to how i can get the css to add the menu tab and push the home tab to the left as the menu grows?
If sounds like you are trying to manually build the menu using HTML. What you need to do is ensure that you have the DNN navigation control as part of your skin and it will handle adding the menu items for you. You'll be able to modify the menu to look however you like using CSS.
The best way to learn DNN skinning is to look at one of the existing skins (found in /Portals/_default/skins/) and then copy one of the skins and start making changes to change it to your desired look.
The DNN skinning architecture is very well done and easy to pick up for anyone who knows ASP.NET (though it is different from Master Pages). The hardest part is picking and learning to work with the various navigation providers. Most people work with DNNMenu which is more complicated than it needs to be on the CSS Side. The DDR Menu which will be the default provider for DNN 6+ should be easier to work with. But the documentation for it isn't complete yet so it takes some learning to get started with it.
I am having difficulty navigating to different MXML pages in my Flex application. I checked some other questions on SO about it but they seemed to be to do with tab navigation.
I am trying to navigate from one MXML page to another via Actionscript code. How is this possible?
Cheers
Edit:
I am a real beginner in Flex and I worked out that I actually needed to use States, and have now discovered how to use them. Thanks for your help.
You don't navigate between MXML pages. MXMLs are not pages to begin with. Instead they are components, that are displayed in the application. So if you want to change the current display, then you need to remove the already added components, and add others that should be displayed now.
There are different approaches to do this. The very raw way of manually removing elements is rarely used, instead there are two main methods: ViewStacks and display states. Display states should be used when there are not many different changes in a view, for example when you click a checkbox that adds new options to an existing formular. If you want to change the whole displayed content (this does not have to be the whole application content though, think in components instead), you can use ViewStacks.
ViewStacks are like a stack of paper, where each paper reflects a single view. So if you want to display something else, you move the new view to the top, hiding all others below. Many components, including TabNavigators, are just ViewStacks with an additional menu to select the view that should be displayed. But you can also just use a ViewStack and manually change to what you want to show.
Flex is not sidebased like html.
You have to instantiate or remove classes, components or all this stuff.
i would use the states.
You can register handler to buttons and swap the state.
Then you are able to instatiate or remove components via the tsates.
Which flex version dou you use? The management of the states are changing between flex3 and flex4
Assume, you have one app with two content areas, home and gallery. First you have to create these two areas with project->new->component and named there related.
After that, you instanciate both components in your app.
Define two states, home and gallery and swap these with a button or two.
set the propert excludefrom or include with the name of the states. finally, you have an app with two content areas, but you never swap pages, you instanciate or remove components in runtime.
br
Frank
BR
Frank
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
I have an asp.net website with 5 items (home, products, news, about, contact) on the main horizontal navigation.
The site uses a master page which splits the page into a header, body and footer using
I want to be able to display a different header (which will include different colors and images) depending on which of the 5 navigation items is selected.
Can anyone tell me the best way to achieve this without bloating the page download?
I know my way around asp.net, html, css, javascript and vb but I am no expert.
I'd probably create a base CSS class that they'd all use, and then create 5 different themes in the app_themes directory (create one if you don't have one), one for each nav option; in there, you can override the base CSS with more specific options to change the background images / colors. If you're using Asp:Images (instead of background images with CSS), you can also change the source using a .theme file in each theme. This way, you'd only download the relevant files. You'll have to change the Page.Theme on Page_Init.
Are you trying to implement a menu?...
One possible strategy that I can think of is making a usercontrol for the header and then rendering the design in HTML based on the mode.
This way you will still be able to take advantage of a distinct header and will be able to have a flexible design.
Create conditional statements within the header depending on what page is selected.