Wednesday, May 30, 2018

Time for something new...iOS FX

Aloha,

Well after I did my last blog post about the iOS style switch control some people mentioned it might be nice to have more than one iOS style control available.
First I thought...bah...no time...but I could not resist and started to create a little new side project which I named iosFX.
In principle this is a little library of JavaFX controls that more or less look and behave like the current iOS controls.
My first idea was to tweak existing controls using css and code to achieve this but after I took a closer look to the iOS controls I figured out that these controls are very special and a simple css tweak won't work.
For that reason I've decided to create completely independent controls that are based on JavaFX Regions at the moment.
So at the moment I have the following controls available...

  • IosSwitch
  • IosEntry
  • IosListView
  • IosMultiButton
  • IosSlider
  • IosSegmentedButtonBar
  • IosPlusMinusButton

The IosSwitch you already saw in my last blog post, I've just ported it to the lib. The IosListView is a simple extension of the existing JavaFX ListView.
Because a big part of the current iOS controls is used in list views I've created an IosEntry which is a control that takes a left node, a right node and comes with a title and a subtitle.
And when you take a closer look to the iOS ui controls you will figure out that a lot of controls/indicators are very similar.
For this reason I've created the IosMultiButton which is a JavaFX control that has a specific type which defines the ui.
At the moment the available types are...

  • CHECKBOX
  • ADD
  • DELETE
  • CHECK_MARK
  • DOT
  • SMALL_DOT
  • INFO
  • PLUS
  • FORWARD

Dependent on the type also the behaviour is different, e.g. if the type is CHECKBOX one can toggle the control by clicking on it.
Instead of using the standard JavaFX events I've implemented my own events to be able to make use of the ShadowField properties. So the controls fire IosEvents which have different EventTypes that are...

  • SELECTED
  • DESELCTED
  • DELETE_ENTRY
  • ADD_ENTRY
  • PRESSED
  • RELEASED

With this event types (and there will come more) one can use these controls as normal JavaFX controls.

You will find a Demo class that shows more or less everything that is available right now and at this moment it looks like follows...




If you drag the 1st or the 4th entry to the left you will see that it also shows the Delete button that is available in iOS. By dragging more than half of the width the Delete button will fill the complete row and by releasing the mouse the entry will be deleted.

That's all I was able to implement right now but there will be more...so stay tuned... :)

Here is a little video of an older version...



As always the source code is available on github and you are more than welcome to help out creating more iOS controls. The final goal will be to create a Gluon app that looks more or less like a native iOS app...hopefully ;)

That's it for today...so keep coding...

No comments:

Post a Comment