MODx iPhone Manager

First off I wasn’t quite sure where to post this thread, but since I’d love to see this, the Wishlist forum is probably best.

Before I jumped onto the forums I asked this question on Twitter, and the MODx Team replied suggesting not necessarily an iPhone App but instead a Manager Theme formatted for the iPhone’s screen.

I’ve done a search of the forums and it seems there’s already a few discussions for iPhone formatted front-end themes, but nothing for a Manager theme specially for the iPhone - and there’s also the Mobile Template Switcher plugin, which would probably work for the iPhone version of Webkit.

Has anybody got any experience in creating the backend themes, and does anybody know where the CSS/xHTML files are stored in the MODx install?

And also is there any browser detection built into the Manager? - It would be inconvenient to have to navigate the desktop Manager theme to then switch to the iPhone version each time you logged in on your phone... does anybody know a way to detect the theme in the Manager?

Ultimately it would be awesome if there was a native iPhone App, and not just a Manager theme, does anybody in the MODx community have iPhone App development skills? - Would anybody be willing to work with me on an iPhone App?

I look forward to hearing the communities thoughts and suggestions for this!

Adam,

Thanks for starting the thread. Manager themes for Evo are now stored in /assets/templates and are significantly more customizable than they have been in the past.

Mobile browser detection is not difficult using a plugin. Currently you could check the browser using OnManagerFormLoginRender to set a cookie and then use a user based manager theme. Actually now that I think about it a user based theme would be perfect.

Build a manager theme, create a user for mobile management and use that theme.

A standalone app for Revo would be much easier as there will be XML-RPC and web services available eventually.

Thanks for starting the thread. Manager themes for Evo are now stored in /assets/templates and are significantly more customizable than they have been in the past.

Not really. Only three files are in assets/templates/manager, two for login and one for the Manager "welcome" page. the rest is still in manager/media/style. And to really customize the Manager "welcome" page, you need to hack the manager/actions/welcome.static.php file.

It would be cool if we could have a native iPhone app, but I think it is better if we can manage to build a mobile manager theme. Because a theme can be used on other mobiles too!

Please make this a theme rather than a native app. It’d be such a shame if you spent ages on this, only to be rejected by the Apple store because you used the wrong shade of green or something.

I think this would be great to have - not just for iPhone but all mobile / low bandwidth devices (therefore mobile friendly site rather than proprietary app)

As I found out from developing ManagerManager, a lot of the existing Manager code is a bit chaotic, heavy, and and often lacks IDs/classes for hooking layout changes to.

However the work that is going on for 1.1 to improve the Manager HTML (Ryan’s done a lot and I have worked on it too - planning to check this back into SVN soon) of ensuring more semantic layouts, and proper IDs / classes should make it a lot easier to port to mobile devices. I definitely think it should be an objective of the work.

In an ideal world, there would be a completely new interface for mobile devices, as what we have at the moment isn’t really suited to mobile use...

A standalone app for Revo would be much easier as there will be XML-RPC and web services available eventually.

You can do this now for Revo, the Provisioner 3PC in extra’s does this, it takes the JSON data as returned by the manager(of another site) and displays it in the manager you are in, in a 3PC, modified a bit. The Revo manager is driven by the AJAX interfaces as far as the data is concerned, as long as you respected this you could lay this data out in any way you wish.

Thanks for all the replies and suggestions!

I’ve had a look through all the CSS which Jay and Susan have pointed me to and at a glance it seems like quite a large project for me to work on; however, this is something I’d love to see for MODx so I think I’ll chip away at in slowly.

Besides a MODx iPhone App or custom Manager theme being generally an awesome idea, I found myself needing something like this for when I’m out of my office; and next year I’m planning on travelling a bit with my girlfriend and we wanted to maintain a travel blog; of course I wanted to run the website using MODx and updating the website from my iPhone would be the easiest way...

So at the moment I’d like to tackle this starting with just the iPhone; since I don’t own a Google Phone, WAP phones or any other mobile device I’d struggle to develop for them - and since the iPhone runs Mobile Safari we should be able to use some nice new CSS3 and not need to worry about cross-mobile-browser compatibility.

Also, I’m currently running all my websites on MODx Evolution; I’ve played about with MODx Revolution a little bit, but since its not out of Alpha yet I’ll probably try and make this Manager theme for Evo, since I’m more comfortable with that version. However, I’m totally open to the community helping with this, and if you guys think it will be near impossible to make it for Evo but very simple for Revo, then maybe we can do that...

This brings me to the layout and design of the template itself... While I was poking around the Manager’s CSS earlier I realised I had no idea how this is actually going to look; so I loaded all of my productivity apps on my iPhone and noted how they were designed.

A couple have caught my eye, those being the Facebook app (yes, a productivity app) and the DropBox app:



Although these are native iPhone apps, there’s also the Google Wave mobile webkit version, which is a web-based app but runs almost like a native app, which I think is very impressive (when it’s running notice how the mobile webkit’s chrome such as the menu bar disappears and the information bar up the top goes black):



From researching some of these apps I’ve come up with a very basic idea of how the MODx Manager for the iPhone might look:




Please bear in mind that I’m making this up as I go along, I’ve got no background in making stuff for the iPhone... I think its really important to nail the user interface for this, especially because using the iPhone screen can be a little tricky at times I’d love to hear your thoughts and suggestions.

Also, if anyone’s got any hints and tips for styling the xHTML and CSS for the Manager please share them, as that could be the most challenging part of this project.

I think designing for Mobile devices will require understanding how people might want to manage their site via a mobile device. I don’t know how much web editing but I could certainly see creating new documents and editing existing including adding images and modding tvs.

I think the basis for creating a mobile experience will absolutely require a feature/task list for mobile users.

I think rather than recreating the whole Manager, it would be better to consider the workflows people might undertake while on the move. Adding or editing documents might be high up there, while viewing the audit log reports would be very low priority. Some parts will be impossible (you can’t upload files from Mobile Safari, so file manager, or uploading new Image TVs won’t be feasible).

I also think that producing a skin for the Manager won’t give very satisfactory results - too much is hard coded for the big screen. It’s a bigger deal, but if I was going to do something designed specifically for mobile I’d look at starting from scratch, or at least taking all the manager actions and stripping out all the HTML from them and starting that from scratch!

I’ve a few good iphone development resources bookmarked which you might find useful: http://delicious.com/ncrossland/iphone including some interface libraries to help making it look and behave "natively" much simpler.