Realising my UI Design Concept

[juwi_ukParticipant]

Hi

I’m trying build a proof of concept UI that my application needs (migrating from WinForm World!!) and going to use JQWidgets (commercial version as want to charge for parts of my APP).

I also want the client-side to work on as many desktops and tablets browsers as possible (the business logic is handled by ASP.Net back at the IIS Server end).

I have already built a couple of throw-away “Test” UI’s to get a handle on how a lot of the jQWidgets work BUT I am struggling a bit to get a handle on what the design approach should be and ask your help at JQWidgets!.

My Requirements are I would have thought pretty standard as most apps have this layout these days (I’ve included the Widgets that do what I want):
1. Menu Bar at the top (spanning full width); horizontal menu, jqxMenu
2. Tab Panels based “Main workspace” (80% of screen real estate) which will hold graphical Home Automation content. Additional Tabs will need to be added programmatically (add, remove, drag/re-order maybe); jqxTabs
3. Navigation Panel at the right of the workspace; jqxNavigationBar
4. A Status bar at the bottom which will show status information and some buttons; jqxToolbar

So the above is the basic layout but have a number of other requirements:
A. Fluid/Responsive layout so fits any screen/device size to maximize space. Within reason of course as small footprint mobiles probably aren’t in scope here but tablets are.
B. To help with (A) I’d like (1), (2) and (4) above to be “pinnable” (like Visual Studio) so I can unpin them and they collapse to maximise space of the main work area (2). Ideally I’d like (3) horizontal width to be changeable by splitter when expanded so can adjust the width ratio of (2) and (4). The menu bar (1) and the status bar (4) just need to be fixed height though when expanded and/or pinned.
C. In an ideal UI I’d be able to drag (3) so it is either to left or right size of the main Workspace but that is a nice to have.

It feels like I need to use the jqxLayout or possibly jqxDockingLayout as the basic for achieving what I need but can these support (1) to (4) above.

I’d appreciate if the jQWidgets team or experienced user of this toolset can give me some tips on how to get started and what widgets I need if my list isn’t right; I’d happy to go with your experiences if it gets me what I need. I don’t mind putting in the time to develop a UI with these tools but I want to head off in the right direction at the start so I don’t waste time learning stuff and trashing ideas I don’t need right now. If there is already a demo for this concept then please…please…please point me in the direction of it asap (with thanks) as I’ve been through all of the demos with a fine tooth comb and cant find an example.

I hope that you can point me in the right direction and hopefully the answer will also be able to help others on this forum too who like me are new to this set of widgets.

Waiting in anticipation of a quick response! :0)

Thanks

Julian

[DimitarParticipant]

Hi Julian,

We believe you may be able to achieve your requirements using jqxLayout/jqxDockingLayout. Please note that other widgets can be nested inside jqxLayout/jqxDockingLayout panels. Please also take a look at our Showcase Demos, which represent full web applications. Some of them, such as Sales Report, Project Management and Ticketing System feature a jqxLayout/jqxDockingLayout in scenarios similar to yours.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[juwi_ukParticipant]

Hi Dimitar

Thank you for the update.

I had already looked at these demos and whilst very pretty, none seem to have the menu bar at the top that i need. Also no source for these so I cant see how they are constructed anyway.

Is they any chance you can mock up the basic container for me as a demo. It doesnt need to do anything in the js other than build the UI. I need to see some source for this as im struggling to get a fluid/responsive layout to work.

ideally i could do with a really simple Visual Studio solution so i can see everything affecting how it renders because even pasting your sample code in a completely blank VS solution does render as per your examples so struggling to see what could be affecting. I see your samples link in a demo.js for example so what is in here as not in the source.

Any basic UI sample would be really helpful because at the moment i feel that i am stalled on this project.

All i want is collapsable top menu and bottom status bar, and a middle workspace with two vertical split panels (tab panel to left and nav panel to right); seems simple but losing faith that jQWidgets can do right now after having spent hours playing with your demo sources and API notes.

I really hope you can help.

Regards

Julian

[DimitarParticipant]

Hi Julian,

Here is a solution that might be helpful to you: http://www.jqwidgets.com/fluid-layout-with-fixed-header-and-footer/.

Please take a closer look at the jqxLayout demo Dashboard, too. In it, the “Teams” and “Contacts”/”Staff” layoutGroups can be considered collapsible menus.

Please also note that the source code for the Showcase Demos is available in the jQWidgets download package, under demos\interactivedemos.

If you wish a custom solution to be provided by our team, you can request it as a custom service by writing to our Sales Department at sales@jqwidgets.com.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts