Create a Popup that contains a target

Hi guys,

Im making a library which contains some classes. In particular i’m implementing a popup class This is my class file:

<Panel ux:Class="Classes" >

  <TextInput ux:Class="InputText" PlaceholderColor="#7e7e7e" TextColor="#006666">
  </TextInput>

  <!-- THIS IS THE POPUP -->
  <Panel ux:Class="Popup" ux:Name="self" Layer="Overlay">

      <SolidColor Color="#0005" />
      <string ux:Property="Title" />
      <float ux:Property="width" />
      <float ux:Property="height" />
      <string ux:Property="target" />

      <Panel Width="{Property self.width}" Height="{Property self.height}" Opacity="1">
          <StackPanel>
              <SolidColor Color="#fff" />
              <Text Value="{Property self.Title}" TextWrapping="Wrap" />
              <Button Text="Ok">
              <Clicked>
                  <Toggle Target="{Property self.target}" />
              </Clicked>
              </Button>
          </StackPanel>
      </Panel>
  </Panel>
  <!-- END POPUP -->

</Panel>

I want to pass the target for create a button (inside the popup). When the user press the button, the popup will close.)

I dont know how to do that with the ux:Property (and i dont want to use ux:InnerClass).

This is my MainView.ux:

<App Theme="Basic" Background="#eeeeeeff">
    <DockPanel>
        <StatusBarBackground Dock="Top"/>

    <WhileTrue ux:Name="MyTrigger">
        <Popup Title="Popup Title" width="200" height="100" target="MyTrigger" />
    </WhileTrue>

        <BottomBarBackground Dock="Bottom" />
    </DockPanel>

</App>

Hope someone can help me :slight_smile:

Hi,

Sorry, I’ve read your post a few times and I can’t really make out what you are trying to do. Can you please start by describing what you want to achevie as an end result? Then we can discuss best way of acheiving that :slight_smile:

The goal here is to create a pop-up, that has a button, and when the button is tapped, the pop-up closes, exactly like this (I think).

If this IS what you’re trying to do then you should do:

<Clicked>
    <Set self.Visibility="Collapsed" />
    <Set self.Opacitiy="0" />
</Clicked>

(untested)

Good luck!

There are tons of ways of doing that.

Very soon (i THINK 0.12) we’ll also have a very easy to use JavaScript API for displaying native dialogs.

Hi,

@Anders: I want to pass from my MainView a target to my Popup class (defined in another file). And i don’t know how to do that using ux:Property

What do you want to pass in ? A message?

Nope, a button. If the button is pressed the code will run a function in javascript. Is it possible?

I still don’t understand what you mean. Pass a button? What does that mean?

Please try to explain clearly and precisely.

Yes, what you’re trying to do is possible, but first you have to change the target from <string to <bool.

As for running code when it’s clicked, you can either do:

<Clicked>
    <Set self.Visibility="Collapsed" />
    <Set self.Opacitiy="0" />
    <Callback Handler="{myJavascriptFunction}" />
</Clicked>

Is this what you’re trying to do?

@Fudge: yes, but i want to pass the javascript function from the instance in my code for that popup like:

MainView.ux

<popup function="{myFunction}" />

Class.ux

<Panel ux:Class="popup">
    <sometype ux:Property="function" /> <!-- i dont know... -->
  <Button>
    <Clicked>
        <Callback Handler="{a_function}" />
    </Clicked>
  </Button>
</Panel>

@Anders:

Well, i want to reuse that popup. So i put it in another file. I create the structure of my popup, but maybe in the future i want a popup with 2 different button(delete, ok for example) or with 2 different (title, description for example).

Hi,

It is currently (as of 0.10) not possible declare events for componets. This is on the list of things we will be addressing soon.

On your second point, it sounds like you want to inject pieces of the UI from the outside. This is currently not possible either (in UX markup), but there are some tickets in our systems with suggestions about how this use case can be accommodated.

Sorry I couldn’t provide more help at this point. Thanks for your input!

Perfect, thanks Anders.