Scroller for Dialog

[Thiemo Melhorn]

Can someone tell me how to get the settings dialog with a scroll bar?

[Steve Garman]

// This is the way I put a scroller on a dialog

//Called when application is started.
function OnStart()
{
   //Create a layout with objects vertically centered.
   lay = app.CreateLayout("Linear", "VCenter,FillXY")
   btn = app.AddButton(lay, "Show Dialog")
   btn.SetOnTouch(btn_OnTouch)
   app.AddLayout(lay)
}

function btn_OnTouch()
{
   // create dialog
   dlg = app.CreateDialog("Custom Dialog");
   dlg.SetOnCancel(dialog_OnCancel);
   dlg.SetSize(0.9, 0.9)
      // create background layout
   var layBack = app.CreateLayout("linear", "vertical")
   dlg.AddLayout(layBack)
      // create scroller
   Scrl = app.CreateScroller(0.9, 0.9)
      // add scroller to background layout
   layBack.AddChild(Scrl)
      // create layout for on scroller
   layDlg = app.CreateLayout("linear", "vertical");
   layDlg.SetSize(0.9, 1.5)
   layDlg.SetPadding(0.05, 0.05, 0.05, 0.05);
     // add top layout to scroller
   Scrl.AddChild(layDlg)
      //add some content to overfill layout
   tst1 = app.AddButton(layDlg, "ignore", 0.3, 0.3)
   tst2 = app.AddButton(layDlg, "ignore", 0.3, 0.3)
   tst3 = app.AddButton(layDlg, "ignore", 0.3, 0.3)
   tst4 = app.AddButton(layDlg, "Cancel", 0.3, 0.3)
   tst4.SetOnTouch(dialog_OnCancel)

   dlg.Show();
}

function dialog_OnCancel()
{
   dlg.Dismiss()
}

[Thiemo Melhorn]

Thank you!

[Thiemo Melhorn]

What size information do I need to specify so that the window looks the same on all screens?

[Thiemo Melhorn]

I want to know what to specify when I hold the device, crosswise.

[Steve Garman]

/*
in function OnConfig you just change
anything that needs to be changed

Have you seen this sample from the docs?
*/

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

    txt1 = app.CreateText( "" );
    txt1.SetTextSize( 64 );
    lay.AddChild( txt1 );

    txt2 = app.CreateText( "" );
    txt2.SetTextSize( 64 );
    lay.AddChild( txt2 );
    OnConfig();

    app.AddLayout( lay );
}

//Called when screen rotates
function OnConfig()
{
    var orient = app.GetOrientation();
    txt1.SetText(orient);

    if(orient == "Portrait") orient = "Vertical";
    else orient = "Horizontal";

    lay.SetOrientation( orient );
    txt2.SetText( orient );

[Thiemo Melhorn]

Unfortunately not!

Somehow the dialog is always displayed differently as soon as I have the phone in landscape mode.

[Thiemo Melhorn]

This is how the dialog looks complete with me.

// create dialog

   dlg = app.CreateDialog(qsettings);

   dlg.SetSize(0.9, 0.9)

    // create background layout

   var layBack = app.CreateLayout("linear", "vertical")

   dlg.AddLayout(layBack)

   // create scroller

   Scrl = app.CreateScroller(0.9, 0.9)

   // add scroller to background layout

   layBack.AddChild(Scrl)

   // create layout for on scroller

   layDlg = app.CreateLayout("linear", "vertical");

   layDlg.SetSize(0.9, 1.5)

   layDlg.SetPadding(0.05, 0.05, 0.05, 0.05);

   //Create Tabs for Dialog

    var tabs = app.CreateTabs( qtabgenerel, qtabupdate + dlgWidth, dlgHeight - 48 * dip, "Top" )

    layDlg.AddChild( tabs ) 

    //add top layout to scroller

   Scrl.AddChild(layDlg)

   //add some content to overfill layout

    var layAllgemein = tabs.GetLayout( "Allgemein" );

    var text = "Hintergrundfarbe auswählen";

    txt = app.CreateText( text )

    layAllgemein.AddChild( txt )

    var pollux = app.AddLayout(layAllgemein,"linear","horizontal")   

    pollux.SetChildTextSize(12)

    item = app.LoadText( "item", "Schwarz" );

    clrBg = app.LoadText( "clrBg", "black" );

    clrTxt = app.LoadText( "clrTxt", "white" );

    var lstColors = app.AddSpinner( pollux,"Schwarz,Weiss,Blau" )

    lstColors.SelectItem( item )

    lstColors.SetOnChange( lstColors_OnTouch )

    

    var text = "Startseite festlegen";

    txt = app.CreateText( text )

    layAllgemein.AddChild( txt )

    var home = app.AddTextEdit( layAllgemein,defaultUrl,0.8,"Autosize")

        var save = newButton( layAllgemein,"[fa-save]")

        save.SetOnTouch(function () {

        defaultUrl=home.GetText()

        app.SaveText("defaultUrl",defaultUrl)

        app.ShowPopup("Startseite geändert!")

    })

    var text = "Suchmaschinen auswählen";

    txt = app.CreateText( text)

    layAllgemein.AddChild( txt )

    var data = "Google:[fa-google],Yahoo:[fa-yahoo],Bing:[fa-windows],Brave Search:[fa-bitcoin],Neeva:[fa-deafness]";

    lst = app.CreateList( data, 0.7, 0.4 );

    layAllgemein.AddChild( lst )

    lst.SetOnTouch(function (title,body,icon,index) {

        if (title == "Google") searchUrl = "https://www.google.com/search?q="

        if (title == "Yahoo") searchUrl = "https://www.search.yahoo.com/search?q="

        if (title == "Bing") searchUrl = "https://www.bing.com/search?q="

        if (title == "Brave Search") searchUrl = "https://search.brave.com/search?q="

        if (title == "Neeva") searchUrl = "https://neeva.com/search?q="

        app.SaveText("searchUrl",searchUrl)

    })

    

    var layUpdates = tabs.GetLayout( "Updates" )

    var text = "Manuelles Update";

    txt = app.CreateText( text)

    layUpdates.AddChild( txt )

    btnUpdates = app.AddButton( layUpdates,"Überprüfen von Updates" );

    btnUpdates.SetMargins( 0, 0.01, 0, 0 )

    btnUpdates.SetOnTouch( btnUpdates_OnTouch );

    layUpdates.AddChild( btnUpdates );

And so for me the "OnConfig" function

function OnConfig() {

     if (app.GetOrientation() == "Landscape") {

        qwebs.forEach (function (current,idx) {

           current.SetSize(1,0.75)

           qtxts[idx].SetSize(0.6)

           Scrl.SetSize(0.44, 0.9)

        })

     } else {

        qwebs.forEach (function (current,idx) {

           current.SetSize(1,0.75)

           qtxts[idx].SetSize(0.6)

           Scrl.SetSize(0.9, 0.9 )

         })

      }

 }