A Slick-Looking Admin Interface For XPages?
As the debate over which is best -- XPages or Flex -- dies down (knew I shouldn't have gone there!) it's probably a good time to talk about an aspect of XPages I think worthy of attention. Appearance.
The following was asked in the discussion yesterday:
Is it just me who thinks that an x-page with a nice theme like oneUI applied looks much more glossy and like a finished product than anything I've seen in flex yet?
While I disagree with the assertion, I do want to pick up on the theme of, err, themes.
Maybe I'm not looking hard enough but I am yet to see an XPage application that looks good enough for me to take it seriously. Is there anywhere out there an XPage demo of an amazing-looking website?!
Cool Admin Themes
By coincidence today I noticed a banner ad on Stackoverflow.com for "admin themes" on ThemeForest.net and thought I'd take a look. What they've got there are the kind of UIs I'd like to see an XPage app sporting. As long as they carry on using the IBM defaults I just can't take them seriously.
Pick of the bunch for me is a theme called Flexy Admin (nothing do with Flex!), which you can buy for $10.
That theme uses jQuery by the looks of it, but does anybody fancy having a go at applying it to use with XPages. I might have a go at using it with a standard Notes database if I get chance.
Skip to the 
You can subscribe to an individual
Well that was my comment, so I'll try to answer.
The flex stuff I've seen looks like a series of slightly disconnected parts.
I was inspired by Declan's phone book application, which was the first brilliant xpage I saw to try to give my customers a thoroughly modern look and feel.
Declan tied it all together, so that the page flowed. - I have shamelessly copied him. (Thank you Declan)
All I can say is that I've moved my customers off sharepoint and into Domino using xpages. - They all agree that the xpages solution is much better looking, and sharepoint was meant to be the UI standard bearer.
Maybe I'm odd, but i find flex UI's kind of insipid...The only real analogy I can find is theat they look 'plasticy' to me.
(Still follow your blog though)
N
There's no accounting for taste Nick ;-)
What one person loves another will hate and I guess there'll never be a consensus on which looks "best".
Is there an online demo of the xphone app? I have a copy and can't say I'm over-awed by it. It's ok, but by no means anything special. No offence Dec!
Funny how that screenshot looks like a Notes Workspace.
Strange, you got more than 40 comments but say you shouldn't have gone there. I take a lot out of such discussions because they often help me in my business. Many companies evaluate different technologies and because I cannot master all of them such discussions do help me to become better in such discussions.
And your link is very nice too, I just registered and am going to buy this theme. Thank you.
this is the best one I have seen
http://www.youtube.com/watch?v=SWAeGwIrpno&feature=player_embedded
by
Jeremy Hodge
http://www.zetaone.com/jeremy/hodgebloge.nsf/d6plinks/JGHE-7VU5GV
should have said that i am not sure how much is "core" Xpages and how much is dojo that is "bolted on".
The key distinction for me is stuff that would be within the gift of an average xpage / notes developer and what is in the gift of a professional "web" developer who also knows xpages
I have found the learning curve with xpages very steep. There are losts of nice demos of single features but when you combine these it becomes more difficult - by way of example taking the xpagesblog.com example of submitting one datasource from several and then trying to do that within a tabbed table and fire of post save events has flumuxed me.
If anyone knows where the documentation for the save document event is and how the save is restricted to a certain data source then I would love to know ( see comment below )
http://xpagesblog.com/xpages-blog/2009/8/18/saving-one-out-of-many-data-sources-on-an-xpage-and-how-to-c.html
Sean
@Henning. Sometimes I prefer to stay under the radar. I fear I end up annoying people if ever a "discussion" gets going. My opinions don't seem to wash well with those out there who just love anything Lotus.
Sean. That app looks ok. Didn't see anything that I couldn't do without XPages though or anything that made me stop in my tracks and vow to learn XPages.
Jake, your opinions are obviously valued judging by the accolades codestore gets.
Having said that you are a hard man to please - I looked at Jeremy's app and just went wow ! There again being a lover of anything lotus I guess I have low expectations for web stuff !
Sean
@Jake - Nah, you definitely SHOULD have gone there. It's a great discussion worth having.
I agree - the stock Lotus "OneUI" and Dojo "Tundra" themes that are the implied defaults for XPages look a bit dated compared with Flex.
But the new theme (I just found it) called "Lucid" looks a lot better IMHO.
http://www-01.ibm.com/software/ucd/dojo_survey/themes.html
You can open the demo here:
http://www-01.ibm.com/software/ucd/UE/
Click the "View" buttons on the right to view specific Widgets with the theme applied. You can play with the Data Grid I was talking about, too. You'll notice it does paging/loading of data as you scroll, sorting, etc. etc. It's got one quirk: to reorder columns you click on the header then drag the column *data* below the header. It'd be a little more intuitive if you could drag the column header itself.
In particular, the date/text box (Calendar) looks really nice.
It's obviously not done, but I think that overall it should be a nice theme.
If you really liked Flex's look but wanted to use XPages, couldn't you just grab the CSS and throw it into an XPages theme? You wouldn't get the animated drop-down boxes, but padding/fonts/etc. should carry over fine.
Sean post save on server or client? On the client you now have oncomplete and onstart, which is really good for masking or transitions
I would try to contact Paul Hannan, he can get you answers
I guess I must be hard to please Sean. This is 2009 though and there's some truly awe-inspiring web-based stuff out there. It's these sites (Facebook, any Google site etc) that are setting the bar high. Not me. Don't ask to see something I've done that's got wow factor. I'm not saying that all the XPages stuff doesn't stand up next to what I can do. Just not next to what else is being done.
@Jake - "...Didn't see anything that I couldn't do without XPages though or anything that made me stop in my tracks and vow to learn XPages."
There's nothing there you *couldn't* do in classic Domino web dev (with or without Flex), it would just take you forever and be far less maintainable.
For example, take a repeat control + a pager... you can page through groups of data. A standard Web 2.0 concept. Trivial on an XPage, but utterly horrible to recreate with classic Domino web dev. At least 20x-30x longer than doing it via an XPage.
Now imagine that inside that repeat control is a 4-column table. One of those columns programatically hides. In classic dev, that would be.... UGH.
In XPages, it's one line of code on the "visibile" attribute of the column.
Now, you could do all this in Flex fairly easily too, but you get left behind as soon as you want to start deriving things *programatically*.
Going back to my example, the effort involved to programatically hide that column via Flex would be a lot more effort than a simple "@DbLookup(....)" as you would write on an XPage.
The programmatic stuff really starts to snowball after awhile -- the pseudo-JOINs, @GetProfileField, etc. etc. That's where XPages shows off its tight integration with Domino.
I should have cited Google Wave. That's the kind of thing that makes my jaw drop nowadays.
@Erik: "you get left behind as soon as you want to start deriving things *programatically*."
Huh?
Sean, thanks for the shout out.
I have to admit this whole topic is rather like comparing apples and oranges ... XPages aren't a "presentation framework" ... XPages are design elements to create XHMTL representations of Domino data. The presentation layer is CSS. OneUI, Webstandard, etc are all just prebuilt CSS frameworks that you can apply to your application to get an out of the box consistent UI experience for your applications, which is something that Domino Web Development has lacked as a core "slap it on feature" until now.
The presentation piece can and is anything you can and want to do ... There isn't anything that says you can't apply "Flexy Admin" to your Xpages application ...
I'm glad you brought up Facebook - great UI. I've spent a lot of time examining it, and I can assure you that it is absolutely 100% doable on XPages, with very little "hacking" required. Again: repeat controls, visibility, etc., all what it was made to do.
The biggest problem I see here is that there simply haven't been that many XPages apps made yet. It's been live for, what, just over 9 months? And deployed in customer environments even less? And most Lotus developers aren't designers, so they're going to grab the stock themes and just roll with it.
Give it more time and I think you'll be more impressed.
@Jake - Think about what hoops would you jump through to dynamically hide a column in Flex based on the results of an @GetProfileField.
In XPages you click on the column, click "visible", click "formulaic", and type your @Formula.
Maybe that is the problem - people today are looking for XPages or Flex or whatever is the new hot tech to make things look amazing out of the box. To me, that is the wrong attitude. I can have an amazing app on the iPhone as easy as I can create some of the worst UI ever designed - look and feel is all about the person(s) writing the app, not the platform or technology.
XPages and Flex are both about letting me write applications faster and with current standards (css, themes, ajax, etc) than I could before. Sure, you could build an amazing and sexy app in Domino 7.X for the browser. But I know for 1000% sure I can write the same app in XPages faster, cleaner, and without the sheer number of hacks we needed before. Plus, if you use CSS and Themes properly, you should be able to apply skins to the apps without any work. That is a huge step forward.
All of that does not even include the custom controls and what I hope is a new area where BPs and folks on OpenNTF.org can add value. Being able to build components that I can drag and drop into my app is a big deal.
XPages and Flex both also bring a convergence of web and rich client. Show me a facebook.exe app ... yeah, there isn't one. All they do is web and mobile.
Yes, XPages are very 1.1 in terms of their lifespan (I am using 8.5.1 so they get a bump from 1.0). But what I can do today allows me to build rich, detailed, and better looking apps than I could a year ago. That is a worthy improvement. And since I am still not a graphic designer, they still look like crap until I get our graphics guy involved :-)
"The biggest problem I see here is that there simply haven't been that many XPages apps made yet."
We have 10 Xpages applications in production internally and at customer sites. Tim Tripcony has not done anything but Xpages development in over a year.
@Nick, Plasticy was exactly the word I was looking for as well.
Flex apps gives med the same feeling as a game called "Rag Doll Kung Fu™: Fists of Plastic" for the PS3.
@Dag.
I was just about to post that I think it's something about the text rendering in flex apps that really upsets me.
@Nathan - I should've said "not that many XPage apps that the public has seen". There's not a whole lot of external visibility yet, through videos, live demos, etc. There's a fair number of screenshots, tutorials, etc. but not much in the way of "try out this demo."
Here's an example of an interface we designed for a customer portal... This implementation is not XPages, its a domino database running standard domino (non x-pages) development, using EXT.js ... Again, it comes down to how you decide to write and implement the application. There isn't anything in these screenshots that could not have been developed using XPages and Dojo instead to get a very similar look/feel ...
http://www.zetaone.com/jeremy/hodgebloge.nsf/downloads/JGHE-7WFJ95
The idea that "domino" only does "ugly" web development is completely a misnomer ... maybe it should be "domino developers only make ugly web apps" :) But then we know that isnt true either.
@Erik http://squawk.bleedyellow.com has been active since Lotusphere.
Yeah it's the text. Looks OK on Safari on my Mac, but odd on any browser (ie8, FFox, Safari) on either of my 2 PC's.
Any reason why this should be?
Jake, No offence taken.
The phonebook app was just a simple demo to get developers up to speed on some of the things that can be done in xPages and hopefully inspire developers to build even better apps.
The OneUI theme was easier to use as it's part of the 8.5 distro so was a natural starting point for beginner developers, obviously I would not recommend it for all applications or we would end up with hundreds of apps that all look the same. That would be boring.
But if you look at something like IQJam and realize that it's using XPages and their own custom CSS with the BluePrint grid framework as the underlying layout then you can see that the whole CSS and themes portion of XPages is actually quite powerful.
At the end of the day it's down to the designer to create a nice looking application and with XPages the domino developer is no longer restricted to the old stuff that Domino used to output, they have full control. That to me is an important aspect of moving to XPages for my app development.
@Erik. "Think about what hoops would you jump through to dynamically hide a column in Flex based on the results of an @GetProfileField."
If the profile field value is added to the XML sent to Flex then you can hide the column. No hoops. What's your Flex experience? Sounds like you're making assumptions?
Notice in the demo app that the XML defines the columns, which are added to the grid at "run time". Most of what you see on screen is governed by the XML. Disabling and/or hiding elements is child's play
@Jake: I've dabbled in Flex a bit, kicked the tires. I'm pretty sure you've got more experience with it than I do though.
"If the profile field value is added to the XML sent to Flex then you can hide the column. No hoops."
That's my point - getting the @GetProfileField to the XML for Flex *is* a series of hoops. You'd have to (1) Switch from Flex Builder to Designer, (2) go to your page/agent/whatever that's creating the XML (3) open an XML tag, (4) add the profile lookup, possibly remember to escape it properly, and (5) close the tag. Then you can finally (6) switch back to Flex Builder and reference it there.
If, in Flex Builder, you could click on the column, click on the visibility attribute and type an @GetProfileField, you'd have the equivalent of XPages' implementation. Easy and elegant. But you're forced to build these additional data transport layers as you go. XPages handles all this for you.
It can get far more complex from there. Aside from the scaling concerns, or the pseudo-JOIN scenario, consider a security scenario where you don't even want to *send* the XML data for that column if it's hidden. Now you're dealing with more manual code-crafting in the XML generation. It would *have* to be an agent at that point, since you can't put an @GetProfileField (reliably) in a view column formula. That alone might mean a rewrite of your XML generation. And you would need a (tiny) bit more logic on the Flex side of things to handle the fact that the XML attribute might not even be present at run-time.
With XPages you would need zero changes.
I'm not arguing that Flex isn't a good delivery platform, it definitely can be. But there are definitely some advantages to XPages due to the level of integration they have with NSF.
Come on Erik, you're just trying to make it sound like hoops to prove a point now, no? Is closing the XML tag really worthy of being its own step!?
Jake on the subject of themes have you looked at the Flex theme site http://scalenine.com/ ?
Nice and easy to implement - heres a Flex App I am working on which is using one of the themes (backend data & logic is Domino) - http://www.appellogroup.net/Tandem/iBill.html
username - Demo Manager - password - passw0rd
Mark
@Jake - You can count it if you want -- I do, since you have to do it or things will break. My point is it's more difficult than XPages makes it.
With Flex (or any non-integrated, i.e. non-XPages solution) you simply will have extra steps to go through to get your data to your UI.
For you and I it's old hat, we've both been doing the classic web dev hacks for years. To us it's "simple" to edit a page, add <computed value> and typing an @GetProfileField, then marking it as pass-through HTML. Adding a hide-when to the paragraph is easy enough, too. Then our UI code (Flex in our discussion) can be updated too.
But with XPages it's much simpler, and much more intuitive.
Just to throw another example out there: Say you want to show on the web a field that shows whether or not a database is full-text indexed, and a button that allows the user to full-text index it.
On XPages you'd create a computed text with one line of JS: Database.isFTIndexed(). Then you'd create a button with one line of JS: Database.UpdateFTIndex(True). On the "visible" (or "disabled") property of the button you'd add !Database.isFTIndexed() so that the button is not clickable if the DB is already FT indexed.
How would you do that in Flex (or any other technology)? You'd need an agent that returns the Database.isFTIndex() attribute. You'd need another agent that actually performed the FT index.
That's a LOT of extra clicks and typing compared with what XPages requires. Personally, I'd probably be cursing and swearing as I typed in the name of the second agent and selected all the appropriate attributes. *And* it will run slower, as agents load and then unload themselves when they're called. And now my app has 2 more design elements to worry about.
It's just *clunky*, ya know?
Consider auto-complete type-ahead, also. On XPages you click "Auto-Complete" on your field and you type JS again, which can include an @DbColumn()! One line of code! With anything else you're crafting yet again something to perform the lookup, spit out the XML, and then adding it to your UI framework.
I'm not trying to bash Flex. It's got some good things going for it. That double-sorting-within-the-group-by example that I gave awhile back is a great example where XPages gets its lunch handed to it. I'm just trying to show you that with XPages there is a level of backend integration that you will not get with any other technology.
Jake, even if I'm late, but here is an which is running for some months now in the public. It may not be as hot as Google Wave, but it looks fine, has several Web 2.0 concepts and is one of the first commercial XPages product.
And BTW behind the scenes it has many interesting concepts like 100% multi-language capability (from strings up to date formats) or using webservices for data-connectors.
As far as I can see, it's a product which would to be possible with classic Domino development: http://support.youatnotes.de
And what it is about is explained (shortly) here: http://www.servicecommunicator.com
@Julian,
Just a small point of clarification is that I do believe that IdeaJam was the first commercially available XPages application. We have been shipping it since January 2009. In the template we sell both XPages and classic Domino code are included. Customers can choose which code base they want to run.
Your Service Communicator application looks great if I haven't already told you this.
Bruce
I also wanted to mention that we are about to begin shipping our new XPages app IQJam. IQJam was built specifically for Domino 8.5.1 which should be available soon. You can play with IQJam at http://IQJam.net.
Erik. I think all this is proving is that you and I have a very different definition of what a hoop is.
Bruce. If you want to advertise, you need to pay!
heres a thought
with xpages being served locally in 8.5.1 beta ( disclaimer about this being pre-realease software and variable to change ..... )
I wonder if there is a way to run a flex app without having to authenticate via http. In the 8.5.1. beta the xpage comes up locally in Notes ( when on a local replica ) with the user already authenticated ???
@Jake - checks in the mail... :-)