How would one go about to have a page / layout designer on run time, and save the layout(that then later on would be rendered with retrieved data).
The scenario :
I have a host application/website, where a user can upload his dll and view as a plugin/widget.
now i want the user to have a graphical designer where he can see all existing plugins or widgets. This is where he can drag and drop the plugins on the page where he would like them, allowing him to also re-size the plugin as he requires it as well.
one of the closest I could find to the type of behavior that i find closest would be. Dock Spawn (Mabey this would still work ?)
what would the best way be to implement such a solution, allowing an admin portal where the user can edit his page. as well as saving this page and allow it to load on another portal.
using existing CMS would not be an option, and any third party tools would be considered
Thank you!
EDIT
I have decided to go with Jason's answer. Implementing JQueryUI's Drag-able, re-sizing. then saving the X and Y co-ordinates for reloading at the same position.
Will still find a solution for the re-sizing(maybe some math...)
Ultimately what you need to do is wrapper the widgets in <div> elements and save the position e.g. left, top, width, height. That way, you can move the position of the <div> containing a widget to the specific left, top based on what is stored in any config for that widget.
I don't believeyou need a thrid party library for this, as long as you're happy understanding about positioning in CSS, you should be able to do this yourself.
EDIT:
In resposne to your comments:
You can save the data however you like - serialize it to a file, store in the cloud, save to a local database. It's totally up to you based on your needs.
Regards how the widgets will be positioned based on the device you are looking at, that's where things get tricky. ou will simply have to test that yourself, by trying out a simple widget, positioning it using top, left, etc and see what it looks like on, say, desktop mobile and tablet.
You will likely have to change the position CSS style in order to correctly position the <div>. My CSS is a bit hazy to be honest, so I can't say with authority which position value you will need. Hopefully this will be enough to get you up and running though.
Related
I have an app where you could go through in views like;
play -> normal or custom -> select map -> summary -> start
I would like to make a shortcut option from play to summary, but I also want navigation back to select map page with the back button functionality.
So the normal workflow p->noc->sm->summary but I want to implement p->sm with the noc<-sm<-summary back functionality too (with the windows phone back button).
I saw how can I delete items from the backstack, but google not helped me how can I navigate through a couple of windows without showing that to the user.
Am I need to override the back button or there is a "better" way to do that?
It's a WP8 project.
Edit:
I didnt need the exact codesnippet for this just a design concept in this patform. (just for the is it duplicated guy)
My normal or custom and select map page should be randomized when I do the shortcut, both of these pages has a "button" which can randomize those settings, I just want a swipe->press->swipe->press->swipe actions shortened to a button press without loosing the 'post modification after randomized' feature.
After I read your comments I think I will handle the back button all of the mentioned views so the backstack will not be getting inconsistent at any state. If I understand well I can tell it in every page what is the "backed" page.
You can't inject pages into the backstack. You can override the back button and do a forward navigation with the animations you would normally do when going backward (and then remove the page you just came from off the stack), but honestly, this all gets complicated and for good reason. One of the few hard truths of Windows Phone design is that you shouldn't mess with the backstack.
Instead, I would rethink your flow. It seems like your second page is a setting of some sort (Normal or Custom). If that is changeable, maybe make a button that can float a modal popup on top of the page and move things around according to the new decision.
Looking again at your flow, it seems like several of the pages may be settings. Can you combine those into one page, maybe on a pivot or panorama? That way making changes is just a swipe away.
Regardless, while it is possible to do what you are looking to achieve, I would look long and hard at whether it is actually the best experience for your users.
I am working on an ASP.NET/C# application,
I am looking for the best way to do the following. (Note: I don't need you to tell me how to do it, just if you can point me to the right direction to look)
in my main page I have a button. When the user clicks it,I want to open popup open containing a map. the user can click on counties to highlight them and then click on submit. I want to be able to know which countries the user has clicked on in my main page (maybe save it in a array or string or anything)
What is the best way to do this? Should I use flash?
I know this is not a problem/solution type of question, but if someone can point me in the right direction I would very much appreciate it. Just some ideas and I will do the researches.
Thank you very much for any inputs or comments
And sorry for not being a specific problem question.
For the pop-up you can use a dialog (a "modal" HTML form like what you find in jQuery UI or similar). If you're using plain "old" ASP.NET you may need some trick if you want to use forms but they works well.
If what you want to provide is a selection from a map you do not need Flash (at least I wouldn't use it for such simple task, I'm not a fun of that kind of extensions). An image map can work well and it's more portable. If you want you may use HTML5 features to provide better experience for users with a compatible browser. I do not remember the link but I saw a very nice example of this using plain HTML (4) and JavaScript. Using a low-res image as base for the map, small images as checks applied on top of it and div tooltips for details (it supported a zoom-on-click feature too to enlarge a portion of the map loading a higher resolution version). I guess I wrote somewhere that URL...
Links
Nice article: http://www.workwithchoicecuts.com/methodology/revisiting-the-html-image-map/
For image maps basics: http://www.javascriptkit.com/howto/imagemap.shtml
Image map builder: http://www.image-maps.com/
jQuery plug-in for selection from maps: https://github.com/jquery/plugins.jquery.com
So i created a web site a long time ago using a designer alot like frontpage + expression design put together, and since then Ive gotten more into coding, and I'm learning html, CSS, and all that good stuff.. and i have this re-designed header that Ive made here:
http://prntscr.com/8zct
So what I need to know, is how i can get it so that when a user clicks on one of the links in the header design it will redirect to a page. and also if possible, how to make it so when a user hovers over a link a drop down may appear with other options, EDIT: I'd like to be able to add a backround image to the drop down navigation menu
As me being quite new to this sort of stuff, could anybody help me achieve this?
PS. I'm working in Visual Studio with ASP. but that doesn't change anything about the html and css stuff. just letting you guys know.
To navigate based on clicks on certain areas of an image, read about image maps.
To create menus and other active components, read about JavaScript (also recommended: jQuery).
You can also create divs that are clickable to use as hot spots on an image. that way you could add a background image to that div if ti's hovered/clicked, whereas image maps does not afford you that opportunity.
I am trying to create a panel which will have a set of "buttons" on it.
These buttons should have the following behaviour:
Appear similar to a tag (with
rounded edges)
Contain a red
cross to remove the filter/tag from
the panel, similar to the way internet
explorer tabs have an embedded cross to close the individual tab.
allow the user to click
on the tag and respond like a normal
button (as long as the click is not
in the red cross)
Number 1 is no problem, this is just appearance, however, regarding numbers 2 and 3, I am not sure if there is already code out there do to something similar...and I dont really want to reinvent the wheel if I can avoid it!
My question is: Does anyone know if there is something out there in infragistics which will do this simply, or will I need to write this myself by subclassing winform buttons?
Thanks in advance!
Is this new development or maintenance of an existing project?
If it is maintenance, you have a somewhat tougher time ahead. You'll implement a UserControl, probably segmented into two buttons. Use docking to get the behavior as correct as possible. The far right button would contain your cross image; the left (which would need to auto-expand as you resize the control) would contain your primary button behavior. Play with the visual styles until you get them right (EG, removing borders, etc).
If this is new development, and you haven't gotten too far into it, you might consider using Windows Presentation Framework (WPF) instead of WinForms. It will be easier to build the control and get it to look exactly how you want it. WPF includes an extremely powerful control compositing system which allows you to layer multiple controls on top of each other and have them work exactly as you'd expect, and it carries the added advantage of allowing full visual control out-of-the-box.
Either way, this is more work than dropping in an external component ... I've used Infragistics for years, and I can't think of anything they have which is comparable. The closest, but only if you're building an MDI application and these controls are for window navigation, is the Tabbed MDI window management tools -- and there, only the tabs (which replace window title bars) have this behavior.
I don't think that infragistics can do something like this. The UltraButton control can't.
Implementing a own control wouldn't be that hard.
your probably going to have to make a costume control for this type of work.
I'm searching a C# component or code snipped that does something like that:
I want to inform new users about the most important program functions if he opens a new window for example.
It should be a box showing text (formated if possible) that is of course not modal and has some mechanism to 'go out of the way' if the user enters the textbox area. So that he can access what's underneath it. Alternativly the window could also stick to the border of the window, but there needs to be a way that this also works if the window is maximized.
So I want to present him with a short introduction of what he can do in every corner of my app most painlessly.
Thank you!
I use a "bar" at the top of every window to display some information about the current window/dialog.
Use tooltips. They can be programmatically controlled, and you can have them appear at will. You'll need to add the functionality to your app to keep track of what tooltips have been shown to the user already.
You can add a "balloon" style by setting the IsBalloon property to true.
You can also replace them with smaller descriptions for when the user wants to hover over the control and have them displayed again.
I'm already using tooltips heavily. However, they aren't very practical when displaying bigger amounts of data and they are bound to specific user actions.
Have you considered having a contextual menu for each form / page which contains links to Adobe Captivate style presentations for each available task? That way the user can investigate an example of how to achieve a task relating to what they are trying to achieve from within the application / site.
This approach would require a good deal of maintenance and management if your code changes regularly but coordinating it with a training department can provide rich help features in your application.
See http://www.adobe.com/products/captivate/ for more information.