I am planning to create a web application based on java, jsp and struts. I have sketched the requirement and how functionality should work and who the target users would be. Even though I am very excited about the application, I am not sure how should I create a good UI design for it.
Shall I go for css as a common way of designing UI's which would be a tedious task to map css to all the elements/tags. Is there any other way of doing it? I am new to this and this would be my first project which I have been planning from very long.
Which technologies should I use in achieving this in regards to design?
Note: Also I want to keep my application light weight rather than using flash content and other sorts
I would recommend using something like Bootstrap: http://getbootstrap.com/
That library will allow you to build some nice user interfaces without having to deal with too much CSS or HTML yourself.
Attempting to roll your own CSS and HTML is just asking for pain. Use a framework like this one and things like cross browser support will be much simpler(pretty much free).
Bootstrap can easily be paired with JSP because you just make the web page output be in bootstrap format. Basically use the CSS classes it defines. For examples:
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
They have similar classes for layout and all kinds of other widgets.
I will go with the approach of Jon. When you are choosing a CSS frame work consider the paltforms ( desktop, tab and mobile ) and choose the right one.
http://webdesignlike.com/2015/best-free-responsive-html5-frameworks/
http://www.cssnewbie.com/best-free-css3-frameworks-2015/#.VVooCfxVhBc
http://devzum.com/2014/11/20/best-html-css-frameworks/
Go through these links, it will give you a better idea.
Related
Hi I'm a bit of ROR noob. Wondering if anyone can help me implement a drop down menu that shows categories and their subcategories?
What sort of code will get me started?
I've already entered the data for the categories, I'm just not sure where to put the code to make them appear as a friendly drop down menu with their subcategories as a branch of each category.
Any help would be great.
EDIT this is what code I have for the drop down:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Categories
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Sports</li>
<li>Pop Culture</li>
<li>Tazos</li>
<li>Woolworths Collectibles</li>
</ul>
</div>
and I would like to add an on-hover or on-click action that shows the sub-categories of the categories in the list.
It sounds like you want to add some interactivity to the view layer of your application. The type of code that will get you started with this feature is Javascript. The app/assets/javascripts directory of your project is where you put this code. By default, while you are building your application in a development environment, Ruby on Rails will reload any changes you make to files inside this directory each time you refresh the view in your browser.
The Rails Guides have excellent documentation on the manner in which Rails handles your static assets such as javascript, and your CSS files.
http://guides.rubyonrails.org/asset_pipeline.html
There are an amazing amount of free resources available with a little googling, which show you the basics of javascript, and how to make dropdown menus.
There is also a powerful javascript library called JQuery that can make what you are looking to do even more straightforward.
This walkthrough seems very similar to what you are trying to achieve. You can customize it to fit your needs.
There appear to be changes in the way jQuery Mobile handles icons starting from v 1.4. For instance
Delete
now the generated markup reads
<a href="index.html" data-role="button" data-icon="delete" class="ui-link ui-btn ui-icon-delete
ui-btn-icon-left ui-shadow ui-corner-all" role="button">
"Delete"
::after
</a>
The after pseudo class appears to use markup from the corresponding icons.min.css file which reads
.ui-icon-delete:after
{
background-image: url("data:image/svg+xml;
charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22..g%3E");
}
As far as I can tell the icon images in the /images folder do not get used at all. No issues with this since it seems to work. However, I would be most grateful to anyone who might be able to explain these changes. Also, why do they insist on supplying two separate .min.css files - one only for the SVG images.
...A while later
Hmmm... I looked into this a bit more and still even more puzzled. The jquery.mobile.icons.css file does not change and neither do the images in the icons-png folder. Why do they not just get people to link to them from their CDN?
The SVG spec is extensive and no browser currently supports the entire spec. That being said all the latest versions of all the major browsers have basic SVG support. Since none of them have complete support you'll need to check individual features in each browser you're targeting.
jQuery Mobile tries to provide all around support, not like Sencha Touch which only provided support for we-kit browsers, at least initially.
Reason for 2 separate implementations are support for older browsers. If older browser is detected it would gracefully switch to PNG icons, as it used to be.
Update:
jQuery Mobile has 2 separate CSS file structures:
First one is: http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css
This one has everything inside, support for bot kind of icons and everything is part of CDN repository.
For example, here's an icon set from CDN repository.
Second one is: http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css
This one holds only core jQuery Mobile CSS, it is used with Theme Roller. When you download theme from themeroller you will find everything you need for full jQuery Mobile customization, including incons.
If you want icons to be part of CDN and you are using your own theme just open jquery.mobile-1.4.2.min.css, copy it initial CSS dealing with icons and place it inside jquery.mobile.structure-1.4.2.min.css. There's no point ion creating numerous numbers of CSS files which will cover everyone's needs. At some point you need to do something by yourself.
Thou, and I would agree with this, it is shame why jQuery Mobile developers didn't create custom CSS down loader like they did for JavaScript.
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.
Info:
I am using JQuery Mobile (in Phonegap) for building pages and navigating via them by $.mobile.changePage() or hash.
This is JQuery Mobile page anatomy:
<div id="foo" data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
Problem:
I am looking for XUI.js page anatomy, because there is really poor documentation about this library.
As Phill said, XUI isn't designed for managing DIVs as "pages", but it can be done. Andrew Lunny has built a lightweight page control in his starter application. You can inspect the source on Github and see how he converts the DIVs to pages. It requires a combination of CSS and setting classes on the DIVs in question.
Again; jQueryMobile is designed very specifically to do this all for you. XUI is not.
I have a ASP.Net 2.0 site and want to translate it into MVC paradigm (I'm new to this), but starting from Zero.
I have some themes in my old site, but reading here and there, it seems like Themes doesn't fit well into MVC paradigm.
The question is:
What is the best practice in MVC for building a Themed user customizable site?
Can you give a little example, if applicable?
Note: I'm aware of this but they don't talk about best practices or how to start with.
Here's my code that I've been using for implementing "Themes" in ASP.NET MVC:
ASP.NET MVC: Implement Theme Folders using a Custom ViewEngine
It's nice when you're able to just swap out CSS files to change the theme, but this really isn't very practical in a ton of cases. Especially when each theme needs to have a completely different layout. In which case, you need to change the CSS and HTML that gets rendered, and this is why I wrote the code found at the above link.
A clean, semantically correct HTML with a good CSS is the way to theme any web app, whether it's ASP.NET, RoR, PHP, etc.
The best example of the power of CSS is CSS Zen Garden.
w3schools has a nice introduction/tutorial to CSS.
Each of your users could have an associated stylesheet which would get selected whenever applicable, i.e.:
<link rel="stylesheet" type="text/css" href="<%= Model.SelectedStyleSheet %>"/>
As themes were intended to style up tags you can use CSS to create a similar approach. I would probably recommend that you start with copying your default themes over to css definitions e.g.
html: <input type="button" />
css: input { color : light-blue }
Then for anything that had your non-default theme you can just apply classes to them. It takes a while to re-write all your themes as CSS, but once done it's worth the effort.
jQuery-ui themes are nice, and not too hard to implement.
Just link to the js and css file and don't forget the icons. And make sure to use Url.Content() in those links. Otherwise it might not be linked to the correct path, once you deploy it on a production server (i fell into that trap once).