Modal windows?

[adamkearsley]

The widget doesn't work with Modal windows. When i have a modal window, the loading widget is in the window behind the modal window when called globally. The widget does show when i add it to the window using <Widget src="nl.fokkezb.loading" name="view" id="myLoading" /> But this appears to create a white view that fills my window. Any advice on using this widget with a modal window? Thanks

[FokkeZB]

Yes, that's expected. Use the view-version in modal windows.

[adamkearsley]

Tried that as well. That shows the loading widget behind the window? The alloy way shows the widget on top but it covers the window with white so i can't see my items. Both methods have issue.

[adamkearsley]

view.xml

<Alloy>
    <Window id="payment" backgroundColor="white" layout="vertical">
                <Widget src="nl.fokkezb.loading" name="view" id="myInstance" />
        <View id="mytitle" height="60">
            <Label id="leftButton" class="fontawesome" onClick="closeWin" bottom="4" left="15">CLOSE</Label>
        </View>
        <View id="paymentForm" layout="vertical">
            <Label id="total"></Label>
            <TextField id="name" hintText="Your Name" />
            <TextField id="address_1" hintText="Address 1" />
            <TextField id="address_2" hintText="Address 2" />
            <TextField id="address_city" hintText="Town/City" />
            <TextField id="address_state" hintText="County" />
            <TextField id="address_zip" hintText="Postcode" />
            <TextField id="card" hintText="Card Number" />
            <TextField id="exp_month" hintText="Card Expiry Month" />
            <TextField id="exp_year" hintText="Card Expiry Year" />
            <TextField id="cvc" hintText="CVC Code" />
            <Button onClick="submitPayment">SEND PAYMENT</Button>
        </View>
    </Window>
</Alloy>

view.js

$.myInstance.show('My message', false);

I see the message, but the background of the loading window covers the entire page so you can't see items behind it. Even before i implement $.myInstance.show... it hides all my items.

[FokkeZB]

The view does not have a white backgroundColor: https://github.com/FokkeZB/nl.fokkezb.loading/blob/master/styles/view.tss#L2

Could it be that you have a global (app.tss) style that makes it white?

[adamkearsley]

No the window behind has an inline backgroundColor of white. But nothing in the tss or app.tss file to make it white.

[FokkeZB]

Could you double check in Resources/iphone/alloy/widgets/nl.fokkezb.loading/controllers/view.js what the backgroundColor for the view is?

[adamkearsley]

The issue seems to arise when i specify a layout for the window THIS DOESNT WORK (shows loader with a white background and nothing can be seen behind it)

<Alloy>
    <Window backgroundColor="white" layout="vertical">
        <Widget src="nl.fokkezb.loading" name="view" id="myInstance" />
        <View class="container">
            <Label>TESTING</Label>
            <Label>TESTING</Label>
            <Label>TESTING</Label>
            <Label>BLAHHHH</Label>
            <Label>TESTING</Label>
            <Label>UUUUUUU</Label>
            <Label>GGGGGGG</Label>
            <Label>TESTING</Label>
        </View>
    </Window>
</Alloy>

THIS WORKS (no layout mode on the window, but layout set on child view container)

<Alloy>
    <Window backgroundColor="white">
        <Widget src="nl.fokkezb.loading" name="view" id="myInstance" />
        <View class="container" layout="vertical">
            <Label>TESTING</Label>
            <Label>TESTING</Label>
            <Label>TESTING</Label>
            <Label>BLAHHHH</Label>
            <Label>TESTING</Label>
            <Label>UUUUUUU</Label>
            <Label>GGGGGGG</Label>
            <Label>TESTING</Label>
        </View>
    </Window>
</Alloy>

[adamkearsley]

Also found that the loading window won't load over your form widget :(

[safadig]

Works nice but over TableView the "Loading.." text does not show up but the wheel and background does

[FokkeZB]

@adamkearsley indeed the view-version requires a composite layout. @safadig do you have an example code?

[safadig]

index.xml:

 <View layout="composite">
 <TableView id="table1" scrollable="false"/>
 <Widget src="nl.fokkezb.loading" name="view" id="myInstance"/>
  </View>

index.js:

$.myInstance.show('Getting latest Update', false);
setTimeout(function() {
     $.myInstance.hide();  
    } , 6000);

[FokkeZB]

Runs fine for me:

http://tifiddle.com/57686a1c08726b53c198e4934c68693b

[safadig]

Thanks.. The issue was sizing issue. I only needed to show 1 row of the TableView with height="100"

Works Perfect after I made some changes to view.tss file:

".loadingImages": {
// top: '0dp',
top: '-10dp'

".loadingMessage": {
//top: '20dp'.
top: '5dp'
font: {
   //fontSize: '16dp'
    fontSize: '14dp'