How do I create widgets in Silverlight? - mvvm

I appreciate this may be a case of running before I can walk and that discussions are occasionally frowned upon, as opposed to questions
However, I am new to Silverlight and I am keen to not get into bad habits!
As this is more of a general advice typs post, I will mark the most useful information, or link as the answer
I am writing a dashboard. However, I want the areas of the dashvoard to be reusable, basically widgets. Can anyone suggest some good example sites for advice on the best way to do widgets in Silverlight, or any advice in terms of what to beware of etc?
Its the same kind of approach as creating a user control in .NET or, creating a form in Delphi which is then docked into several different screens of an application
The dashboard will need to be customizable by the user, i.e. they see a series of widgets which they can setup then add to the dashboard. Pretty much in the same way as Google Anaytics works
Paul

The quick and dirty approach I would take:
Create a silverlight Control for each widget (could be reused on other Views)
Place them all in a stack panel
Bind the visibility of each Control to a checkbox on an options tab
The not-so-MVVM approach I might consider:
Create a silverlight Control for each widget
Add them to the stack panel from code behind
Open source goodness:
Note that you wont be able to control the order in this type of scenario, but the user will have the option of viewing what widgets they want to see.
If you want to take more of an MDI approach, Tim Heuer has an interesting project on codeplex: Silverlight FloatableWindow which gives you a resizeable child window type of thing.
The expensive approach I don't recommend:
Telerik and ComponentOne have some pretty advanced dashboard features if you don't feel like rolling your own.

Related

Flutter - Architectures for designer/developer iteration process flow

I've been trying to figure out a good Flutter process workflow for designer and developer interactions in order to iterate desktop/mobile/web application design. There isn't a very clear line of demarcation between the code and the design as there is in web dev. (for example, the developer would be focused on javascript and a little html, while the designer would be focused on the css and html.)
Some of this has been written about here: how developers and designers can collaborate using flutter
but the mechanics have been left out. (also, it seems like the average flutter designer needs to be more tech-savvy with git skills than designers of yore. Is this your experience?)
While there does seem to be good control of color/fonts/styles with the AppTheme widget, other design aspects are more difficult to enact. For example, if you wanted to change all of the div's (in html) / Containers() (in flutter) from square corners to rounded, you could set a class and apply it across the board in web dev. In flutter, I believe you have to visit every Container in the code and apply a BoxDecoration widget... and repeat if there are changes in the future.
Specifically, what design-dev processes/architectures are you using to facilitate design iterations between devs and designers?
Note: Additionally, I've seen that there are some tools like Adobe XD, and supernova.io that allow for design exporting to flutter code, however that seems like a one-time thing... and doesn't lend itself to well to iteration. Has anyone used this method in their design iterations?
After experimenting with a couple of different methods, it seems like the export features of different programs aren't far along enough to allow anything but the "mockup method" where the designer basically gives the flutter programmer access to some kind of mockup (axshare, adobeXD, zeplin, etc.)
HOWEVER, I did have the most success with exports using sketch -> SuperNova, but this required a tech-saavy designer that was able to probably classify all of the components such as buttons, etc, as well as create designs with responsiveness in mind. Otherwise the export is filled with absolute positioning, which makes the flutter coders job difficult since they need to correct all of those exported widgets and make them responsive.

Implementing an app with multiple views in GWT

I understand from threads in this forum and the Google GWT forum that in the GWT world you typically load just a single page and then what appears to a user to be a different page is just the same page with it's content being updated by user actions. A lot of posts imply that you develop your app as you would a desktop application. That sounds easy if you have done desktop development but I am coming from a pure Web services/ Servlets/ Struts background and want to see a very basic example that shows the proper way to implement a GWT app where you show a user a txt box and button and when they click the button, the view is replaced with 2 different components.
There are plenty of basic apps I have done and plenty of complex multipage type ones but I just one that takes me past the click a button to see a message type app to the next level.
Any links to such an example would be welcome
I recommend to study Activities & Places design pattern. It is the best approach, in my view, for large applications with multiple views. It provides a lot of important functionality "out of the box", like browser history management, support for tokens, efficient memory management, etc.
You may want to look into the Model-View-Presenter pattern (MVP). Using this pattern correctly will greatly decouple your application, allowing you to create views that are not only highly modular and disposable, but are very easy to swap out and change.
In fact, Google fully recommends the MVP pattern when developing GWT applications. They provide a full example and walkthrough of a MVP GWT application here, which I imagine is based off of a Google I/O presentation given on best GWT application architecture practices back in 2009.
I've been following this pattern with my latest GWT project and it's working out extremely well. It's very easy to add, remove and swap views.

Realizing the design from a design professional in code

I typically work on web apps that will only be used by a small group of well-controlled people, but now find that I'm writing something that has the potential to be used by a very large population. This means that the design and "look" will be very important to the success.
While I can certainly code up something functional, it ain't gonna look pretty, so I know that I'll need to get an outside designer to make things look good. Never having worked that way before I had a few questions about the mechanics of how this happens and how to try to make things easier.
We do Java, so when building a rich interface, we use GWT. I know that when working with designers, they typically provide images of what the interface should look like without any type of "useable" output. My question is how best to bridge that gap between a simple drawing of an interface to a fully functional realized one.
Any thoughts are appreciated.
Well, "it depends", as always.
Nowadays, I don't think you can work wit someone who simply provides PhotoShop mockups. At least not at your level. Mockups are simply too static, and translating those mockups to actual pages that actually work with different browsers properly is a skill set all its own.
So, you need someone beyond simply a designer, especially if you are planning any javascript wizardry, animations, or other dynamic elements that don't capture at all well on a static image.
What you really want is an "operational" mockup. Static HTML files that look and behave as best as can be done to what the UI designer wants to do, including transitions, work flow, etc. This artifact can be run through all of the stake holders as a live mockup, letting folks "Feel" the site.
Once you have these HTML files, you can then do your part of backfilling these pages with actual server side content. Obviously you can start early working on models and working with the designers so as to have services ready to support the site functionality, but you shouldn't be committing any real time in to actual pages for the site.
As for interacting with the designers, I talk more about that over here: How can I make my JSP project easier for a designer to work with
I worked on a project very much like this. We had "comps" which were pictures of what the interface would look like. We identified common objects and build modules. Then built pages (this was for a web app) from modules plus any elements that were unique to that "comp".
A couple things to keep in mind that will make life much easier: use the comps/drawings as more of a recommendation rather than set in stone design. Try to identify common pieces early on and reuse code.
Also, designers aren't user experience gods. They often have a good idea of how things should work, but if you are close to your product and have a lot of product knowledge, don't be afraid to tweak the design as you and your group see fit. One thing that designers typically lack is product knowledge. They know a lot about general user experience and how a site should work, but they often won't know the in's and out's of your use cases and products.
If you are working with GWT, you should look for designers who are expert in CSS. Apart from, may be, the main layout of the website, all the application components like form fields, dialogs, tabs and grids etc. will need to be styled using CSS.
If the designers are not experienced in working with GWT, share the GWT's documentation about styling with them. It's a good idea to read these yourself as well. Specifically explore the GWT's theme-ing system.
Also try to make use of UiBinder as much as possible. This would allow you to stay as close to traditional HTML based design while still enjoying the GWT high level object oriented interfaces (both widgets and DOM).
Optionally you might want to tell the designers that GWT image bundles will automatically do "CSS Sprites" so they don't need to worry about page load performance issues related to images.

drag and drop workflow kind of interface..how easy to develop?

How easy it's to come up with a drag and drop web-based interface that'll provide me features to wire objects together, setup configurations nicely in a modal window for each object? I'm looking for links that've any similar kind of interface, or articles on this. also, i'm looking for your technology/language suggestions.
Another way I'm thinking - as a desktop appln + browser dependent addon..
Is it good to create such an user-interface using XUL, which can be deployed as an addon on Firefox/as a stand-alone application in Windows? Are there any other similar things/technologies which can provide a basic framework for us to build on it further?
Why do I need this, finally?
..for building simple Workflows, for defining process flows, that can provide me some auto-generated xml content which I can use for further processing.
Thanks!
I'm quite interested in this, too.
I've flirted with HTML5's DragDrop implementation - Quirksmode has Bad Things to say about that, so then I thought "Perhaps a JavaScript library can help me" - haven't checked out jquery for this yet, but I have checked out YUI's DragDrop, DragDropManager and DataSource, and its looking hopeful (consistent, reliable).
I tried things like adding an iframe on the fly to any document, to provide this kind of functionality without needing to add dependencies to the page given the iframe - mixed results, but in my case I was trying to cater for x-domain access, which proved difficult.
So I'd say JavaScript could be a winner - if designed poorly it could be difficult to manage resources though, if you want to potentially DragDrop/edit/config any element in a document - so watch out for that.
If you're keen and able, Adobe AIR apps also look promising - but I can't help with any more info on that, other than they're Desktop Apps with great flexibility.
I'ma going to keep an eye on your Question, I look forward to any other Answers/comments!
EDIT: I forgot to mention Flex (aka Flash Builder 4, latest version) is quite easy to create stuff like this, though I've had exposure to Flash for a while. It comes with the standard Adobe caveats; price, libraries, support.

Interface Design Question

I asked this question a while back and basically the project almost consists of reproducing excel in the browser. We want people to input data in an excel-like way. The question i have is, what is the best control to use? Should i use a regular table, and then append columns to it, or should i use a datagrid and flip it XtoY? What approach would you take?
Thanks for any help.
Unless you have a TON of development time, don't try to do it yourself. Try a 3rd party control like Telerik or ComponentOne. None will probably have every feature you wish for, but you should be able to find one that is close enough.
Option 1: Check out the Silverlight option to develop your application. And it had a good Excel like DataGrid which is rendered at the Browser lever and you can have async calls to server at any point of time you want to persit a change.
Option 2: There are many datagrids available in WPF and you can get a high performance application using .NET3.5, and it is possible to host this as XBAP application.
Option 3: Typical ASP.NET with AJAX enabled Datagrid
I'd recommend ExtJS for an editable data grid with an AJAX data source. ExtJS is a bit bulky but very flexible.
Check out SpreadsheetGear. It's a drop in control that mimics (and works with) Excel for .Net. I've seen it used well for both display and back-end calculations.
The Farpoint Spread control emulates Excel grids pretty well, you can even code formulas behind it. It does cost money though
Maybe the new Datagrid that is in the wpf toolkit on codeplex has what you need. This datagrid can be templated and style the way you need it.