Native UI components possible?

Monkey Forums/Monkey Programming/Native UI components possible?

frank(Posted 2011) [#1]
There are a few UI libs now like the one in Diddy and xUI (abanoned?) and some others I saw. What i'm wondering; is it possible to hook them up natively? Or is that impossible (really hard)?

So that you could config (per platform preferably) if you want native or the Monkey implementation. So in the HTML5 platform it would draw textboxes, comboboxes etc using HTML tags, in iOS it would use Cocoa touch and so on and so forth.

If would be nice as it would probably be preferably to do it that way if possible at all, even though it won't look 100% the same on all platforms (that's why you should be able to config it so you can also choose to use the Monkey 'native' version instead of the platform native).

It would allow building of apps on iOS + Android (+ win phone) which would look / act native which I guess would be a great advantage, but no clue (at all) if this is feasible/possible.


Beaker(Posted 2011) [#2]
You ask if it is feasible/possible. But you should also ask if it is desirable.


Xaron(Posted 2011) [#3]
Actually it's both feasible AND desirable.

If you want to create other stuff than games you need the native UI because the user expects it.


frank(Posted 2011) [#4]
Xaron: Yes, that's what I was thinking as well... Also, choice is probably always more desirable than no choice right?

I would think it would be a great addition to the Monkey platform as it would round off the entire cross platform process and it would allow the making of less graphical games which require a lot of input to look native.


Xaron(Posted 2011) [#5]
I agree. It would be some work to integrate it for all three platforms. I might take a look at it but still have to do other stuff. ;)


frank(Posted 2011) [#6]
I guess the primary platforms would be iOS + Android then Mac/Lin/Win (making desktop applications, at least WIP editors for games would be massively helped by this imho; the current, non native UI elements simply are not as polished yet for quick 'properties' like boxes) and then web (where it would have the least use, but it would be interesting to make browser based mobile apps in a consistent manner.


Skn3(Posted 2011) [#7]
It would make more sense to have a mobile and desktop version of GUI with a shared underlying framework. Generally mobile apps work alot differently to desktop apps so if you tried to confine both it would be a bit limiting!


CopperCircle(Posted 2011) [#8]
Hi, I played with trying to get the IOS UI to work here:

http://www.monkeycoder.co.nz/Community/posts.php?topic=1729#16690


benmc(Posted 2011) [#9]
I would personally like to see a simple dialog window implementation if not an entire native UI system, which I believe should be possible across the board, tho I'm not sure about Flash.

A popup dialog with multiple choice answers, ie, Yes, No. Or Rate, Layer, Ignore, etc.

It's really easy to implement on Android, and JS, but not sure about Flash and iOS.

I may have to learn how to create modules so I can make something like this.


xzess(Posted 2011) [#10]
Hey there,

xUI and iMonk are not dead.
It has been very quiet the last time.

Its still WIP but i will keep you up to date :)

Here are the latest Versions: (just extract to /monkeyhome/modules/ directory)

Http://www.tim-koepsel.info/xui.zip
Http://www.tim-koepsel.info/imonk.zip

You'll need to use a custom target, so download
http://www.tim-koepsel.info/target_ios.zip

and extract it to the /monkeyhome/targets/ directory (please backup before!)

imonk Wiki : http://www.tim-koepsel.info/imonk/
xui Wiki : http://www.tim-koepsel.info/xui/



Please understand the difference of xUI and iMonk

xUI is a portable Interface solution which you can use in any target cause its written complete in monkey
iMonk is a iOS enhancment module to add iOS Features. The latest version adds UI stuff like Map, Location, Camera, Adressbook, WebView and common UI stuff also. its not only an UI

**** iMONK Functions ****
Function UICreateMap(x1#,y1#,x2#,y2#,userlocation:Bool)
Function UICreateTextView(Text$,x1#,y1#, x2#, y2#)
Function UICreateNavigationBar(title$, x1#, y1#, x2#, y2#)
Function UICreateProgressBar(progress#,x1#,y1#,x2#,y2#)
Function UICreateWebView(Url$,x1#, y1#, x2#, y2#)
Function UICreateSwitch(checked:Bool, x1#, y1#, x2#, y2#)
Function UICreateLabel(text$,x1#, y1#, x2#, y2#)
Function UICreateActionSheet( Title$,CancelButtonText$, DestructiveButtonText$)
Function UICreateAlert( title$,message$,caption$ )
Function UICreateButton(text$,x1#,y1#,x2#,y2#)
Function UICreateTextField(placeholder$, x1#, y1#, x2#,y2#)
Function UICreateScrollView(ScrollViewWidth#,ScrollViewHeight#,ContentWidth#, ContentHeight#)
Function UIOpenEMail( address$,subject$,body$ )
Function UIOpenBrowser( URL$ )
Function Vibrate()
Function HTMLQuery( URL$ )
Function DebugLog( message$ )
Function SaveAppPreferences( key$,value$ )
Function LoadAppPreferences$( key$ )
Function GetBatteryStatus$()
Function GetITunesName$()
Function GetDate$()
Function GetDeviceType$()
Function GetSDKVersion$()
Function GetLocalisation$()
Function GetUID$()
********


**** xUI Functions ****
(Please view /modules/xui/xui.monkey)




Here is some example Code which uses xui and imonk together.

Features MapKit, Common UI Stuff

(You can find it in /xui/examples/imonkexample)

**** Example code ****
Import xui
Import imonk


Class template Extends App

Field MainView:xUIView
Field Panel:xUIPanel
Field NewButton:xUIButton

Method OnCreate()
SetUpdateRate(30)

'First add the Main View
MainView = AddUIView()
MainView.SetBackgroundImage("bg.jpg",False)
'Setup the View
MainView.SetViewColor(255,255,255)

'Create a Panel
Panel = AddUIPanel(MainView,"iMonk TestApp",0,0,DeviceWidth,45)

'Create a new Button
NewButton = AddUIButton(MainView,"Open",DeviceWidth/2,DeviceHeight-50)

UICreateMap(20,70,300,300,True)


End

Method OnUpdate()

If(NewButton.OnAction = True)
NewButton.Reset()
UICreateActionSheet( "Ein Test","Abbrechen", "Fortfahren")
End

xUIObject.UpdateAll()
End

Method OnRender()
Cls

xUIObject.RenderAll()
End

End

Function Main()
New template
End
*******





frank(Posted 2011) [#11]
Ah! Danke for that overview of xui + iMonk. So what do you, as an expert on the matter, think about making xui a complete 'monk native' system with overriding system (per device/target) to make (parts of it) target-native?

As you have shown, that's now partially doable with xui + imonk, but why not have that integrated into xui, so you can mix and match on different devices? I'm asking as you have a lot of experience with UI code in Monkey already so you could know if this is a feasible/good/bad idea.

BTW: Which Monkey version are you using; it kind of works on 46 but is totally broken on 51.


FlameDuck(Posted 2011) [#12]
If you want to create other stuff than games you need the native UI because the user expects it.
This is not true. A significant portion of "apps" for both Android and iOS are matter of factly dynamic webpages using an embedded browser, as created by middleware like PhonrGsp and titanium. Look at your facebook app. it looks virtually identical on both Android and iPhone, and design-wise looks more like the facebook website than a native app. This trend id going to continue because it is more cost effective, than maintaining multiple apps in multiple APIs (and languages), and can be done by the same developers you already hired to do the website...


xzess(Posted 2011) [#13]
oh im very sorry frank, thank you very much for the note.

Im currently using V 49, im downloading 51 now, but i fixed some stuff yesterday, i reuploaded it this evening, please redownload, to checkout

To answer your question, in this case i was using imonk with xUI because iMonks cocoa UI is currently not able to react on stuff, it doesn't pass the pointer back to the user and not object oriented yet (in short its WIP yet, some of you asked for, so i released it earlier than i wanted to)


xUI is far in progress, it should work on all targets and can pass the needed data to react (like click button or something else)

Both are thought as free community libraries to make monkey a bit more candy as it is.
So your feedback and thoughts are very very welcome :)

I will put up a small wiki again for both libs, so this may help its distribution and development much better

Here is a fresh wiki install:
http://www.tim-koepsel.info/xui/
http://www.tim-koepsel.info/imonk/

Unfortunately Im very short in time for monkey stuff, since there is other stuff to do.


CopperCircle(Posted 2011) [#14]
Great update xzess, thanks.


frank(Posted 2011) [#15]
@FlameDuck Yes you are right for basic apps, however, when they get more complicated with a mixture of heavy graphics + input + text, HTML5 currently is too slow and you need native. We have a lot of client requests for that kind of app (we are building 5 of them at the moment) and it would make a lot of sense to do that in Monkey as these apps usually have a lot of games or 'game like' elements which simply don't 'fly' yet in HTML5 on phones.

Also, if it WOULD be possible to simply code everything on phones in HTML5, what's the use of Monkey? Considering all desktop platforms (especially Chrome) is capable of running HTML5 quite impressively. If phones would be able to do the same, you would need 'native' ONLY for very hardcore graphical games of which, in the appstore and android market, there are almost none. Ergo no-one really thinks it's HTML5 time just yet, ergo people DO want to make native apps until that gap has been filled by crazily fast cpus.


Beaker(Posted 2011) [#16]
Sorry, I should've been clearer in my post above. I do think native ui stuff is desirable, after all I petitioned for native keyboard on mobile devices. But trying to shoehorn a single ui library across all devices just wouldn't work. Mobile device ui gadgets work so differently to desktop, as does android as compared to ios.

Flameduck makes some good points. Some of the slickest apps I've seen were made in phonegap and titanium.

The reason for using monkey for your html5 apps is that JS sucks.


frank(Posted 2011) [#17]
What are those slickest apps? I'm not sure what apps you use or if you use Android or iPhone or both. In my opinion there are no html5 (phonegap/titanium) apps which are better (as in more user friendly, more responsive, giving a more optimized-for-mobile feel) than native apps would be. On Android one might have the feeling html5 apps are better because by far most Android apps are absolutely abysmal, even compared to their counterparts on iOS (from the same makers).

And I do agree there are definitely huge differences between desktop/mobile (even among eachother) and web, but i'm not sure what you mean how those differences cannot be shoehorned. GUI components have intersections on all platforms; a TextBox component has the same behavior and the same base properties across all platforms. You could make it so that developers can set the platform specific properties for a component if they would want, but I don't see how these cannot be 'shoehorned' to a degree. That would make it possible to write crossplatform interfaces and if you want to 'make the perfect app', you can tweak depending on platform used.

Also; you make an interesting comment: "The reason for using monkey for your html5 apps is that JS sucks." => any good libraries for this? As I think that makes sense (I don't think JS sucks, but I loathe mixing languages, that's the reason I started this thread in the first place). What would be a good strategy to make mobile apps; you mean using Diddy UI or xUI or another one? Or you mean with genuine HTML UI widgets? If the latter than you mean what I am after; and why not proceed to have that implemented on all platforms instead of only HTML5 ?


xzess(Posted 2011) [#18]
in my opinion the best way to work for a specific platform is to use the stuff provided for it.
iOS xcode, android eclipse, xbox 360 xna / visual studio and so on..

if you want it platform independent there are some nice solutions like monkey to save some time.


frank(Posted 2012) [#19]
Yes, that's what I think as well, but for GUI, the solutions are not very good yet, at least not for touch screens (my main market). I'm wondering what to do about that. I dont' want to lose cross platform though.


xzess(Posted 2012) [#20]
maybe xui is what you are looking for..since its cross platform. i will upload a new version these days. this may help to get into


frank(Posted 2012) [#21]
@xzess are you planning to support Android as well? I'm looking for a working camera in Android for Monkey.