Enabling the User to Select a Style at Runtime

When you build an Alpha Anywhere application, you typically select the style for the application (e.g. Alpha, Alpha-Red, etc.) at design-time. However, you might want to allow the user to select a preferred style a run-time.

In this video we show how you can allow the user to select the style at run-time.

in this video we show how you can create

applications where you can allow the

user to dynamically change the style at

runtime so you can see how we have a

tabbed UI it's using the Alpha style and

if we go here to our style ticker we can

pick different styles that the user can

choose from so we'll go here and choose

alpha dark green and then you can see if

we open up our grid we see it's in alpha

dark green and if we go to our UX is

also an alpha type green and they use a

selection is remember so if we exit the

tabbed UI and relaunch it you'll see

that basically the color is remembered

so let's go back to say our grid here

and then change to say amber or red or

back to the default alpha and then go

back to say dark green so the way in

which this was done you can see here we

go to tab you eye properties and in the

CSS section over here we have a property

are called allow user to change style at

runtime if that property is checked then

you get the list of choices that to user

can choose from and you can basically

add in any style that you want but it's

important to note that this feature only

works with alpha and styles that are

inherited from alpha so you can't

basically change a style to say geo red

or G or purple and you can also not

change if the initial style was G was a

non alpha style so then the next thing

that you can do is you can specify here

in this drop-down what their style name

is and also what the display name is but

don't by default the display name is the

same as the style name and then you can

basically put in a template for the

selector so we have a label that says

component style and this label is going

to be on

left select a drop-down so you could

change this to be on the right of the

selector drop-down if you're using a

right to left language so we go back

here to work preview will see that the

available choices is to find over there

if we go this that has been selected and

this feature is also available in the UX

component but if you're using the future

in the tabbed UI there's no need to

enable it in the UX component so you can

see that whatever style we've chosen is

applied to all of the sub components

that use an alpha theme or a theme that

is inherited from alpha so this feature

is also enabled in PhoneGap applications

in a PhoneGap application you would need

to turn on the future for the UX

component but the ability to allow the

user to change styles at runtime gives

the users some nice choices to customize

their environment thanks very much for

watching