In practice this means where before you used autogenerated functions like: # router get "/oauth/callbacks/:id", OAuthCallbackController, :new # usage MyRouter.Helpers. Phoenix still supports older Elixir versions, but you’ll need to update to enjoy the new compile-time verification features. Note: Verified routes make use of new Elixir 1.14 compiler features. Verified routes replace router helpers with a sigil-based ( ~p), compile-time verified approach. Note: To generate a new 1.7 project, you’ll need to install the phx.new generator from hex: mix archive.install hex phx_new Most folks should be able to update just by changing a couple dependencies. ![]() This is a backwards compatible release with a few deprecations. The final release of Phoenix 1.7 is out! Phoenix 1.7 packs a number of long-awaited new features like verified routes, Tailwind support, LiveView authentication generators, unified HEEx templates, LiveView Streams for optimized collections, and more. Posted on February 24th, 2023 by Chris McCord The next_moon message is processed by handle_info("next_moon", socket).Phoenix 1.7.0 released: Built-in Tailwind, Verified Routes, LiveView Streams, and what's next With nd_after(self(), "next_moon", 100) we send a delayed message (100ms) to the current LiveView process ( self()), starting the animation. We will use this :moon_idx to know at which frame of the list we are. This event is handled by handle_event("start", _, socket) which sets :running to true and initialize the :moon_idx to 0. Each one sends and event to the LiveView process.Ĭlicking the start button, we send a start event to the LiveView process. The render is pretty simple: we just have two buttons, start and stop. ![]() Replace: is a list with 8 frames we are going to use in the animation, each one is an emoji. To: Routes.live_path(socket, DemoWeb.MoonLive, moon), Socket = assign(socket, :moon_idx, idx + 1)ĭo: nd_after(self(), "next_moon", 100) In the render/1 function we loop through the pictures map, showing the thumbnails and making them clickable.Īlias, as: ["□", "□", "□", "□", "□", "□", "□", render(assigns) do Picture = assign(socket, :selected_picture, picture)}įor simplicity we use a Map where the keys are the picture IDs and the values are maps with :img URL and :author name.Īt the bottom we find a multi-clause function picture_url/2, which we use to get the thumbnail and large image URL by appending w, h and fit parameters to the img URL string. Socket = assign(socket, :selected_picture, nil) Maybe something we’re not going to use in a real app, but something fun to build. In the second example we’ll see something different, an animated URL with emojis. Phoenix LiveView Pictures example with pushstate ![]() We’ll see how to use the LiveView pushState support to update the URL, making easy to share one specific picture. When we click on a thumbnail, the full picture is shown in the same page. The first is a LiveView which shows picture thumbnails taken from. ![]() In this article we are going to test this functionality in Phoenix LiveView, with two different examples: The reason why it’s called pushState is because it refers to the history.pushState function in the HTML5 History API, which gives us the ability to change the URL and push a new page in the browser’s history. While changing the page content we can now dynamically update the URL without a page refresh. The Phoenix LiveView pushstate support (with live_link/2 and live_redirect/2) solves exactly this problem. With Phoenix LiveView we can easily update parts of the page without having to change the location, refreshing the page or directly use JavaScript.īut when the page’s content changes, the URL remains the same, making it difficult for a user to bookmark or share the current page state. It’s now possible to try the pushState support available in Phoenix LiveView (which, remember, is still in beta) Add live_link and live_redirect for push state support What is pushState and why can be useful?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |