Sencha touch 2/ app workflow with navigation view - sencha-touch-2

There is a problem with sencha touch 2.
I am trying to understand how can I implement the same functionality which provides navigation view in sencha touch 2, but ....
Each item of the 'Ext.NavigationView' component should have it's own unique set of 'navigationBar' elements. I mean set of buttons, for example.
I know that I can do something like this:
this.getMain().getNavigationBar().rightBox.removeAll();
this.getMain().getNavigationBar().rightBox.add(this.getSettingButton());
//where 'getSettingButton' predefined by me a button
And do this action each time when 'push' event happens (clear 'navigationBar' and add appropriate set of buttons)
Of course, I even can implement 'Ext.Panel' with 'layout: card' and set of 'Ext.panel' elements in the 'items' property, each of which will be have unique 'toolbar'.
To control the behavior I can use 'setActiveItem' method.
But, I think each of these approaches is a bit weird, isn't it?
I expected that would be much more natural approach to implement it.
Most likely I don't know what I need. Confirm my doubts. What is the best way to do it.

Currently, Ext.NavigationView tends to perform navigation between "simple" views. "Simple" here means that your views are just panel with innerHTML, not the "complicated" ones with functional buttons, toolbars, etc.
As far as I know, there're 2 ways you could try:
If you still want to use Ext.NavigationView, you can customize your NavigationBar with titles, items (buttons, spacers, etc.) as normal components through navigationBar config, getter and setter.
(recommended) If your views are completely different from each other, you should use many Ext.Container with different items of your choice (for eg. first container with simple HTML announcement, second one with some extra Ext.Button, and so on). Simple use animateActiveItem() for animated navigation. This way is much more flexible, I suppose.

Related

Manage Presentation Data in Vue (Resize Events)?

I'm working a Vue project, and I'm using Vuex to manage the applications state. I've separated out the view of the app into many small layouts, as Vue components. For example I have a layout for a header and a floating stats panel.
I've written a custom directive for affixing the stats panel. Currently, this works similar to Bootstrap where you set a value, and when the page scrolls beyond that point an affix CSS class gets added to the element. This value is based on the height of the header. As app is responsive, I would rather have this value computed from the header outerHeight property.
Now, I can think of several ways on how to accomplish this, however I'm not sure the proper Vue way to do it.
I could listen for resize events and have the header update it's height in the Vuex store. However, it seems poor practice to have the store manage presentation data.
I could pass the id of the header to the affix directive, and use getElementById to check the height. But this is bypassing Vue completely.
I could add a method to the header to return its' height, and have the parent component that holds both the header and stats panel use that to update the affix value. This however, gets messy if header and stats don't share the same parent.
Are there any other options? What would be best practice? Thanks!
I would surely go with #1 - share it through Vuex. Keep in mind that Vuex is just a stage manager. There are no rules what kind of data you want to store. Furthermore, I think it would be best to use it, as more component may rely on this kind of data, and it will be the only source of truth, that is mutated in a predictable way. All other options include coupling components/instances/elements on the page, and therefore the bigger the connection between the height and the page gets, the more complex those connections will grow.
Plus it will be reactive, so just using actions/mutations you will have it updated everywhere, and therefore your page will look responsive.

How do you replace HBox/VBox with Box/Grid

The documentation for HBox and VBox includes the statement:
Deprecated: Use Box instead, which is a very quick and easy change.
But we recommend switching to Grid, since Box will go away eventually.
However, it isn't obvious what the "quick and easy change" should be.
How do you use Box and/or Grid to achieve the functionality of VBox or HBox?
One of the big changes in gtkmm3:
Gtk::Box, Gtk::ButtonBox, Gtk::IconView, Gtk::Paned, Gtk::ProgressBar,
Gtk::ScaleButton, Gtk::ScrollBar and Gtk::Separator now derive from
Gtk::Orientable, allowing their orientation (vertical or horizontal)
to be specified without requiring the use of a derived class such as
Gtk::HBox.
Although Grid isn't mentioned above, both containers now have a method set_orientation; Box can also take it in the constructor. So for Box, set the orientation and use your usual pack_start, pack_end.
With Grid, if you scrutinize the documentation, you'll see this line:
Grid can be used like a Box by just using Gtk::Container::add(), which
will place children next to each other in the direction determined by
the orientation property.
So, it should be as simple as setting the orientation and then add your child widgets.

Search bar like Finder's, with possibilities to add search parameters

I'd like to create something like this:
I can make a custom controller (maybe using a `NSCollectionView ) but it's a lot of work. Does anyone know a library or workaround in Cocoa?
The basic Cocoa machinery for the typical app is NSPredicate (to filter your content), and an NSPredicateEditor control.
To get fancy (have the field grow and shrink, pushing content down as rules are added), you'll need to manage / animate the views yourself as predicates are added / removed. You'll observe the view for frame changes adjust/animate the "search filter" view in your app to push down the content, etc.
Even fancier: If too many rules are added, there won't be any more room for content, so you'll need to figure out a sane limit, at which point you stop growing the view and let scrolling take over.

Creating custom combination of widget in Cocoa

I have seen that in Cocoa I can create a custom view using drawing primitives which allows me to draw what I like but at a very low level.
Instead I'd like to create custom widgets using a combination of existing controls. For example:
I'd like to create a table with images and combobox in cells
I'd like to create a custom widget wich is a combination of several (for example a list, a button and combobox)
How can I approach this problem ?
Secondly a typical cocoa developer uses external controls? Is there a repository or a list of interesting external custom controls (commercial or free) ?
I'd like to create a table with images and combobox in cells
There already exists NSImageCell and NSComboBoxCell. Are you sure you need to do anything different?
If the problem is that you want an image and a combo box in the same cell, you will have to subclass NSCell. Currently table views can only contain cells, not views, which makes your life harder (as understanding how cell drawing works is more difficult). That will change in Lion, however, so if you can wait until then, this will become easier!
I'd like to create a custom widget wich is a combination of several (for example a list, a button and combobox)
How is your custom widget different to just placing those three things in the same view?
You could write your own NSView subclass. When it's created, it should create a list, a button and a combobox and add them as subviews to itself. Your NSView subclass should handle the logic of keeping them in sync or doing whatever it is you want them to do. Then, to use this combination control in Interface Builder, you place a Custom View and set its class (rightmost tab of the inspector) to your NSView subclass.
BTW, on a tangent, are you sure you mean combobox? Loads of people coming from Windows get this one wrong. A combobox is a combination of a menu and a text field: it allows the user to enter custom text that is not in the menu. If you just want a dropdown menu of choices (and the user can't enter a custom one), you use an NSPopupButton.
Secondly a typical cocoa developer uses external controls?
Yes, sometimes. Things like BWToolkit can be very useful. There's a lot more that are just floating around mailing lists as code snippets, rather than being cleaned up and put in a library. Search for what you need to do!

How do I use an indeterminate status indicator as the image for an NSStatusItem?

I have an application that is an NSStatusItem.
It has a few different modes, each of which require an external process to be launched, during which the icon is simply highlighted, and appears to be frozen.
I want to use the -setImage: method (or reasonable facsimile) to display something along the lines of a "spinner" commonly seen in web applications and all over OS X.
Is there any native method for accomplishing this (e.g. some instance of NSProgressIndicator?) or must I manually display an animation by cycling through a set of images?
In either case, how would I implement?
In order to have it be animated (and not just a static image), you'll probably need to use -setView: and give it a custom view (which then animates itself). You might be able to get away with using a suitably-configured standard NSProgressIndicator (i.e. set to NSProgressIndicatorSpinningStyle style, etc.) as that "custom view".
But, if the NSProgressIndicator standard sizes don't work well, then you can check out my YRKSpinningProgressIndicator (BSD-licensed), which is a clone of the spinning NSProgressIndicator that can be set to arbitrary size and colors.