Git Product home page Git Product logo

Comments (4)

barmalei avatar barmalei commented on August 27, 2024

To show a modal window use the following code:

// create a window that we want to show as modal window
var win = new zebra.ui.Window();
win.setBounds(10,10, 200, 200);
zebra.ui.showModalWindow(canvas, win);

Also you can take a look at window example following the link below:
http://repo.zebkit.org/latest/tests/win.test.html

from zebkit.

joeedh avatar joeedh commented on August 27, 2024

The idea isn't to create modal windows, though, but modal components (e.g. text boxes that consume input until the user clicks outside of them or presses escape/enter). I did figure it out, but my solution is cumbersome (I ended up creating a transparent screen-sized modal window).

from zebkit.

barmalei avatar barmalei commented on August 27, 2024

Where should you keep the modal text field component: in a window or as a part of you UI (canvas.root) ?

In your description you have written that the text filed component keeps focus until "user clicks outside of them". That doesn't sound like modal behavior to me. If you have a snippet that illustrates what you are trying to archive it helps a lot.

from zebkit.

joeedh avatar joeedh commented on August 27, 2024

Basically, the text box consumes all events until the user clicks outside of it. That's it; I just need the ability to have a component take control of events.

Whenever I code a UI library, I usually add two methods to the base component class:

pushModal() //grab control of events
popModal() //release control of events

. . .that allow components to individually take control of the event system.

This is extremely important; in most cases, allowing events to flow to other UI components when one of them is in "modal mode" can corrupt the application state.

from zebkit.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.