module Wireframe

teppo · August 5, 2021

5 hours ago, Mats said:

When i disable Wireframe (remove Wireframe as alternate template filename) the functional field shows up on the edit page.

Does this mean that you've got the __text() call directly in the template file, site/templates/sometemplate.php? If so, then it's likely the issue I mentioned in my previous post: if you use functional fields in any file other than the default template file, you'll have to select that file via field config "file mode" setting.

Mats · August 5, 2021

Thanks @teppo

Didn't look close enough in the select list to see all available files.

Zeka · August 15, 2021

Hi @teppo

I need a small hint.
I'm using components as building blocks of a layout like:

// wireframe.php 

$this->wire()->set('siteJS', new FilenameArray());
$this->wire()->set('siteCSS', new FilenameArray());

$wireframe = $this->wire()->modules->get('Wireframe');
$wireframe->init();
echo $wireframe->render();

// layouts/default.php

<?php namespace ProcessWire; ?>

<!DOCTYPE html>
<html lang="ru" class="<?= setting('html-classes')->implode(' '); ?>">
	<head>
		<?= Wireframe::component("Head"); ?>
	</head>
	<body>
		<div class="layout">
				<div class="layout__topbar">
					<div class="layout__container">
						<?= Wireframe::component("Topbar"); ?>
					</div>
				</div>
				<div class="layout__header">
					<?= Wireframe::component("Header"); ?>
				</div>
				<div class="layout__masthead">
					<?= Wireframe::component("Masthead"); ?>
				</div>
				<main class="layout__content">
					<?= $placeholders->default; ?>
				</main>
				<footer class="layout__footer">
					<?= Wireframe::component("Footer"); ?>
				</footer>
			</div>
	</body>
</html>

For the content part of a page, I'm using RepeaterMatrix and every type of repeater matrix is also a component prepared in the controller of a page.

'global' (Header, Footer etc.) and 'Matrix' (that are used for rendering matrix items) components could add its own CSS and JS assets like

// components/Footer.php

<?php namespace Wireframe\Component;

class Footer extends \Wireframe\Component {


	public function __construct()
	{
		$this->wire()->siteCSS->add('footer);
	}

	// ...
}

Current program flow looks like

Init method of a page controller file
wireframe.php
Render method of a page controller file
layouts/default.php
components/Head.php construct method
components/Head.php render method
construct and render method of other components
components/Footer.php construct method
components/Footer.php render method

The issue starts here. Head component should render links to CSS and JS assets, but as it goes before any other component and the construct method of components that goes below are not called, so its assets is not yet populated.

Hope you get what the issue is and can give a hit.

-------------------

Before Wireframe, I used a custom front-end module that was doing the same thing that Wireframe does but differently. I had a controller also for layouts and in this way, all partials were already rendered, data needed for layout rendering was prepared before the layout was rendered. Say 'Copmonents' concept was exposed to the layouts.
Is it possible somehow in the Wireframe?

Thanks.

teppo · August 18, 2021

On 8/16/2021 at 12:53 AM, Zeka said:

The issue starts here. Head component should render links to CSS and JS assets, but as it goes before any other component and the construct method of components that goes below are not called, so its assets is not yet populated.

This is an interesting dilemma for sure ?

Indeed components are rendered when their render methods are called (or they are converted to strings via __toString(), which then calls the render method), so they can't easily handle this type of logic. At the moment I think the easiest solution would involve placing some sort of tag in the layout which then gets replaced (likely via a hook) when markup is already rendered. This may not be what you're looking for, but here's how that hook could work:

$this->addHookAfter('View::render', function(HookEvent $event) {
	$event->return = str_replace('{{ head_component }}', Wireframe::component('Head'), $event->return);
});

(Bundling this into a component is of course not really necessary at this point. Also: if you do this, you'll likely want to check if wire('siteJS') etc. exists before setting it, since wireframe.php may get executed multiple times.)

Another option would be pre-rendering your components in wireframe.php or a controller class for a template and passing them to Wireframe::render() as arguments. Depending on the use case this may or may not make sense; I've used that approach on some occasions myself.

I tried a few other things, but right now I don't have anything more sophisticated than this. One idea I played with a bit that could solve this was similar to Blade components (<x-head arg="value"></x-head> etc.) but this comes with some limitations, so not sure yet if it makes sense... or perhaps we should have a way for components to specify methods that then get executed automatically later with predefined arguments?

Anyway, I'll keep this in mind and let you know if I figure out a better way ?

Zeka · August 26, 2021

@teppo Thanks for info. Will investigate proposed options.

Could you please give an advice on how is it better to orgonize a large number of components.

Curretly I add to boot.php

wire('classLoader')->addNamespace('Wireframe\Blocks', paths('templates') . 'LayoutComponents/');
wire('classLoader')->addNamespace('Wireframe\Blocks', paths('templates') . 'BuilderComponents/');

In this way I put all components that are used in layout to LayoutComponents folder, all blocks for content builder to 'BuilderComponents' folder and component folder is used for components that are not part of the above groups. Maybe there is build in options for such task?

teppo · August 31, 2021

Hey @Zeka

To be honest what you're currently doing sounds like a reasonable solution, and also goes beyond what I've personally ever done/needed. In most projects I've got a handful of components — I think around ten or so at most — so splitting them into directories hasn't really been worth it. Boils down to preference, really; I tend to use partials for most things, and components only when I really need the power (and complexity) they add ?

So, long story short: there's no built-in way to split components into directories, but that's not a bad idea (after all that's always been there for partials), so I've added it to my list for now.

Ivan Gretsky · November 12, 2021

On 8/20/2020 at 8:37 PM, bernhard said:

Well, the great thing about custom pageClasses is that they do also work on the backend. You can use them for hooking the pageedit form for example. Or today I did some custom redirects when a page is save+exit'ed. This really belongs to the page object imho, so it makes sense to have everything in a class extending the Page class. I'm not sure yet where to draw the line between page classes and controllers for wireframe...

Hey, @teppo! I am back at this great module. Trying to make everything work as it should. I've read your conversation with @bernhard a number of times and think that a lot of issues discussed should make their way into the docs somehow. And answering the question quoted above (about the usage of custom page classes and controllers in Wireframe) would make another great page for Patterns and practices . The great docs are one of the main things that make Wireframe so attractive, as we can easily point to them when working in a team or passing a project to someone else. So keeping them up to date and adding more info is definitely as important (for someone who didn't write the framework in the 1st place))) as adding new features.

I would participate in this process if there was a way to. At least I would fix some typos. But as cool as PW backend is it is not as good for open documentation. Is there a chance we can move the content creation to github and populate/update pages in PW via a script? I think someone already done this before...

Ivan Gretsky · November 12, 2021

On 8/20/2020 at 8:37 PM, bernhard said:

Well, the great thing about custom pageClasses is that they do also work on the backend. You can use them for hooking the pageedit form for example.

By the way, @bernhard, could you please provide an example)

bernhard · November 13, 2021

On 11/12/2021 at 7:21 PM, Ivan Gretsky said:

By the way, @bernhard, could you please provide an example)

I'm not sure what I was talking about back then, but you can simply do something like this:

<?php namespace ProcessWire;
class MyPage extends Page {
  
  public function init() {
    $this->addHookAfter("ProcessPageEdit::buildForm", $this, "buildForm");
  }

  public function buildForm(HookEvent $event) {
    $page = $event->process->getPage();
    if(!$page instanceof self) return;
    // $page is a MyPage object now
    
    $form = $event->return;
    // get the title field and add a note if we find it
    if($f = $form->get('title')) {
      // note that we use $page->foo() and not $this->foo()
      $f->notes = "I am a MyPage object and my foo() method says: ".$page->foo();
    }
  }
  
  public function foo() {
    return 'MyPage-Foo!';
  }
  
}

Note that the hook in this example never gets executed! You'd need to trigger it once. Where you do that is up to you - I'm usually doing that via RockMigrations (https://github.com/BernhardBaumrock/RockMigrations/blob/5cafb3c6c0f2004b8d4087ca243cc0d5f771dd11/RockMigrations.module.php#L377) but you could also add it in init.php

<?php
$tmp = new MyPage();
$tmp->init();

This adds a little overhead since we load an additional instance of MyPage on every request but I do much more prefer that over getting more and more of a hook hell on larger projects. The way I showed above is much cleaner and keeps everything where it belongs: To the MyPage class.

Now once you open a MyPage in the PW backend you get the note on the title field and you know where to look for that hook: In MyPage.php - not in ready.php, or init.php, or another module, or wherever else...

Zeka · November 15, 2021

@teppo Hi. It would be great to have a note about PageRenderNoCachePage session variable in the docs, it took me some time to understand the reason for the non-worked cache for some pages.

Mats · December 30, 2021

Hello @teppo

I'm having trouble when trying to use pagination on a view where the page array is coming from a controller with a limit ($this->wire('pages')->find('template=mytemplate,limit=20')). When on a page number (page2 for example) the page array is null. I've checked the allow pagenumbers setting on the template.

~~The pagination is working now, not sure what made it kick in, but it's working.~~ ?

Ivan Gretsky · December 30, 2021

Hey, @Mats!

Please create a separate topic as Wireframe now has a dedicated subforum. This way we can easier track issues. @teppo, do you think locking this topic would be the right thing to do? Adrian did lock the old monolithic Tracy thread.

Sorry for being meta and not on topic)

Ivan Gretsky · February 25, 2022

@teppo, should we lock this thread to encourage to create dedicated posts?

Sign In

module Wireframe

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Recently Browsing 0 members

Similar Content