New UIExtras plugin released!

[Chris Hopkin]

Hi Guys

We've just released a new plugin, UIExtras, which is a collection of extra UI controls and dialogs for your DroidScript Apps, including:

- Date picker control & dialog

- Time picker control & dialog

- Color picker dialog

- Floating Action Button

- Floating Actions Menu

Check out the attached screenshots for examples.

All the controls and dialogs are documented with examples to help you get started.

Thanks

Chris

[Peter de Rooij]

Wow, this looks great!

[Chris Hopkin]

Hi Guys

I've put up a new version of the UIExtras beta plugin, which includes new Picker & NumberPicker controls.

The Picker control is pretty much equivalent to the DS Spinner control, but in the style of the Time/DatePicker controls.

The NumberPicker control is for selecting numbers within a specified range and has a configurable number of decimal places.

Check the docs for examples of both.

Also I've added a SetTextColor method to the DatePicker and TimePicker controls. Unfortunately this doesn't work when the DatePicker is in Calendar view, but I'm thinking of adding a new more customisable CalendarView control when I get time.

Please try it out and let me know what you think.

Thanks

Chris

[Manuel Lopes]

i test and work; i have a question this have change background color or only SetTextColor?;thanks

[Manuel Lopes]

i put the background of into the picker but out of the picker not change the color ;i havr to creste other layout to make the background color or not possible?i will post the example with the dark background i want change the color:

app.LoadPlugin( "UIExtras" );

function OnStart()
{
lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

uix = app.CreateUIExtras();

picker = uix.CreateDatePicker();

picker.SetTextColor("#04588ff" );
picker.SetOnDateChanged( OnDateChanged );
lay.AddChild( picker );

picker.SetBackColor("#8888ff" );

app.AddLayout( lay );
}

function OnDateChanged( year, month, day )
{
var date = new Date();
date.setFullYear( year, month, day);

app.ShowPopup( date.toDateString() );
}

[Chris Hopkin]

Hi Manuel

You can use SetBackColor on the picker controls, just like all other DS controls. By default, the background colour is transparent, so the colour of your layout will show through.

I'm not sure I fully understand your question, but if you want to change the colour of the entire background (not just the picker control) then use SetBackColor on the layout instead:

app.LoadPlugin( "UIExtras" );

function OnStart()
{
   lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

   lay.SetBackColor("#8888ff"); // Change the layout background colour

 
   uix = app.CreateUIExtras();
 
   picker = uix.CreateDatePicker();

   picker.SetTextColor("#04588ff");
   picker.SetOnDateChanged( OnDateChanged );
   lay.AddChild( picker );

 
   app.AddLayout( lay );

[Steve Garman]

In case it is causing you confusion,
picker.SetTextColor("#04588ff");
is not having any effect because a 7 digit hex number is invalid as a colour.

[Manuel Lopes]

thanks chris this is what i want;steve my bad i put more by error but not know is incorrect if 7 digits thanks for the help chris and steve

[Stephan Wicki]

Hi Chris,

I use your time/ date picker for autostart scheduler.

Is there a way to use date picker to increase date by 1 day e.g.?

I mean that my code can use date picker to receive correct date when increasing scheduler by one day or e.g. next Monday...

Thanks a lot!

Kind regards,

Stephan

[Steve Garman]

Stephan,
I thought I'd explained this before.

In a date object you can increase the day and it will still work properly even if the day becomes 32 or more.

This just works, even on the last day of the week.

function tomorrow()
{
var dat = new Date;
dat.setDate(dat.getDate() + 1);
picker.SetDate(dat);
}

[ANTONIO CLEITON]

Está dando um erro quando clico no calendário. Diz que year não existe. Como resolvo esse problema?

[Steve Garman]

Can you post the code that produces the error?

Do you get an error if you use this code?

app.LoadPlugin( "UIExtras" );
function OnStart()
{
lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

uix = app.CreateUIExtras();

picker = uix.CreateDatePicker( 2016, 0, 1, "Calendar" );

[ANTONIO CLEITON]

Steve Garman, resolvi. Obrigado! Um pequeno erro, esqueci de colocar os argumentos da função.

[ANTONIO CLEITON]

Chris Hopkin, posta uns exemplos de como usar esses controles. 

[ANTONIO CLEITON]

Como faço para usar o Time Picker Dialog?

[Steve Garman]

//This is pasted from the Docs that are installed when you install the plugin

app.LoadPlugin( "UIExtras" );

function OnStart()
{
lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

btn = app.CreateButton( "Pick Time", 0.3, 0.1 );
btn.SetOnTouch( btn_OnTouch );
lay.AddChild( btn );

app.AddLayout( lay );

uix = app.CreateUIExtras();
}

function btn_OnTouch()
{
picker = uix.CreateTimePickerDialog( "Pick a Time" );
picker.SetOnOk( picker_OnOk );
picker.Show();
}

function picker_OnOk( hour, minute )
{
app.ShowPopup(hour + ":" + minute);
}