I have a web app in which there are two components - date picker and button.
When I select a date from date-picker, the button's title and color should change.
This is my hbs code where two components are given:
{{bootstrap-datepicker value=expiresAt todayHighlight=true todayBtn=true startDate=startDate changeDate="changeDateAction" autoclose=true}}
{{button-custom title="Previous Date" startDate=startDate status=1 id="button1"}}
The button-custom is created by me.
When I select a date, the function in datepicker named changeDateAction() will be called. I have a function in button component's controller, named changeValues() which when called will do my task.
How can I call changeValues() (which is in button-custom.js) from changeDateAction() which is in another file?
Please be as simple as possible as I'm beginner in Ember JS. Thanks in advance.
It seems like you'd like to inform a component (button-custom) about a change in a sibling component (bootstrap-datepicker). You've already set up an action handler (changeDateAction) that informs the parent component/controller about the change. In order to propagate that change to button-custom, I'd suggest to just pass the effect you'd like to achieve down to it:
{{bootstrap-datepicker changeDate="changeDateAction" (...)}}
{{button-custom title=title color=color (...)}}
Like this, you can control the appearance of the button from the outside by modifying title and color. Like that, the logic is moved to the parent component/controller, and the button component becomes a "dumb" presentational component.
The basic concept behind this is called "Data down, Actions up" (DDAU), and i'd highly recommend to read up on it (for example here if you're learning Ember!
Related
I am using TailwindUI for a landing page, and it includes a drop down menu that, when uncollapsed, looks like this:
Right now, I make the menu appear when the "Solutions" link is clicked with some very simple in-line JavaScript that toggles the invisible property. The code looks something like this:
script.
function closeMenu() {
document.getElementById('buttonMenu').classList.toggle("invisible");
}
I would like to know how I can implement transition effects that would make the toggling of the menu appear less abrupt. The following settings are recommended in by TailwindUI:
//
'Solutions' flyout menu, show/hide based on flyout menu state.
Entering: "transition ease-out duration-200"
From: "opacity-0 translate-y-1"
To: "opacity-100 translate-y-0"
Leaving: "transition ease-in duration-150"
From: "opacity-100 translate-y-0"
To: "opacity-0 translate-y-1"
What's the best way to go about doing this?
Is there any way to change the selection color of a sidebar item?
For example the default color of macOS 10.14.x dark theme is blue, would it be possible to change this color?
I took a look here: Cocoa osx NSTableview change row highlight color
but I had difficulty translating to Applescript, thanks in advance.
Without a sample or MCVE project it is going to be tricky providing a drop-in solution. The topics and answers you linked to are overriding the NSTableView or NSTableRowView classes, so I can give you a generic solution for that. Subclassing in AppleScriptObjC can be a bit of a pain, depending on what you need to reference, but is fairly straightforward. Essentially you are putting a custom class in between the regular class and your application, where you can intercept the various standard method calls.
For a cell-based table view example, add a new empty file to your project by using the File > New > File... menu item. The name of the _file _isn't important (e.g. TableViewHighlight.applescript or whatever), the name of the script is what will be used by Xcode. Here I am using MyTableView for the class name and referencing a tableView outlet property from the AppDelegate:
script MyTableView -- the name of your custom class
property parent : class "NSTableView" -- the parent class to override
property tableView : a reference to current application's NSApp's delegate's tableView
property highlightColor : a reference to current application's NSColor's greenColor -- whatever
# set the row highlight color
on drawRow:row clipRect:clipRect
if tableView's selectedRowIndexes's containsIndex:row then -- filter as desired
highlightColor's setFill()
current application's NSRectFill(tableView's rectOfRow:row)
end if
continue drawRow:row clipRect:clipRect -- super
end drawRow:clipRect:
# set the highlight color of stuff behind the row (grid lines, etc)
on drawBackgroundInClipRect:clipRect
highlightColor's setFill()
current application's NSRectFill(clipRect)
continue drawBackgroundInClipRect:clipRect -- super
end drawBackgroundInClipRect:
end script
In the Interface Editor, use the Identity Inspector to set the class of your table view to the MyTableView class. Finally, in your table view setup set its highlighting to none, since it will be done by your subclass (again, assuming a tableView outlet is connected to the table view):
tableView's setSelectionHighlightStyle: current application's NSTableViewSelectionHighlightStyleNone
For a view-based table view example, the process is similar, but NSTableRowView is the one to subclass. Here the name of the script/class I am using will be MyTableRowView:
script MyTableRowView -- the name of your custom class
property parent : class "NSTableRowView" -- the parent class to override
property highlightColor : a reference to current application's NSColor's redColor -- whatever
# draw the selected row
on drawSelectionInRect:dirtyRect
continue drawSelectionInRect:dirtyRect
highlightColor's setFill()
current application's NSRectFill(dirtyRect)
end drawSelectionInRect:
end script
In the Interface Editor, set the table view's highlight to regular using the Attributes Inspector, and add a tableView:rowViewForRow: method to the table view's delegate:
on tableView:tableView rowViewForRow:row
set rowIdentifier to "MyTableRow"
set myRowView to tableView's makeViewWithIdentifier:rowIdentifier owner:me
if myRowView is missing value then
set myRowView to current application's MyTableRowView's alloc's initWithFrame:current application's NSZeroRect
myRowView's setIdentifier:rowIdentifier
end if
return myRowView
end tableView:rowViewForRow:
There are other options, of course, but that should get you started, and help with translating some of those Objective-C answers/examples.
So I'm making a button for a "New Note" in Swift UI similar to the Apple Notes app.
Right now my "New Button" is a "Navigation Link" like so:
NavigationLink(
destination: EditorView(makeNewNote())
) {
Text("New")
}
Unfortunately—this triggers my app to create a new note every time the view loaded. :(
:/
I've been looking for a way to initate a segue on button push but I'm not finding success on this yet.
When I tried a modal—I found myself having the same problem
Button("New") {
self.isNew = true
}.sheet(isPresented: $isNew, content: {
EditorView(makeNewNote())
})
I'm wondering what the best way to approach this would be.
Having no success :(
Edit:
I referred to this and the documentation but I haven’t found a way to segue via a button push which would be ideal. (The function dosent get triggered in the closure :)
https://www.hackingwithswift.com/quick-start/swiftui/how-to-push-a-new-view-onto-a-
Also...if you were curious what makeNewButton() does—it basically inserts a new Core Data object into my app’s managed context.
I'm not entirely sure, but it kinda sounds like to me your problem lies in your model. Because each time your View loads it calls the makeNewButton() function right?
Maybe you can fix the problem by displaying the "new note" view and having an extra "Save" button that only makes changes to your model once it's triggered.
Alternatively, you could use context.rollback() to discard changes. Also, check out this Project. It's Beta 4 but works just the same and imo is a good example how to use CoreData with SwiftUI. :)
Do Raphael sets accept event handler? When I set an event handler on a raphael set, it seems that it is instead assigned on each of the Raphael shapes inside the set and not on the set itself as you can see here if you try to click the set:
http://jsbin.com/aponen/3/edit
I'm not interested in various hacks such as chaining elements inside a set with the set itself via custom attributes or similar approaches.
Thanks
Yes, the event handler is applied to each object individually -- Raphael does not make use of the <g> element of SVG. However, you can fix your issue here with a few keystrokes:
set.push(rect);
set.push(circle);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
//old
this.attr({'fill': 'red'});
//new
set.attr({'fill': 'red'});
});
The biggest difference in the way it works and the way you thought it might work is the meaning of "this" inside the handler. Changing it to "set" will fix that right up.
UPDATE, Jan. 26, 2013
Per comments, you could also attach the set to the children of the set with one line, using Raphael's "data" method:
set.push(rect);
set.push(circle);
set.data('myset', set);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
this.data('myset').attr({'fill': 'red'});
});
I don't believe there is a native way to access the set from children, but I could be missing it.
I want to extend the example called "Object ListModel Example" from Qt documentation
(you can get it on http://qt-project.org/doc/qt-4.8/declarative-modelviews-objectlistmodel.html).
I am trying to add a simple GUI functionality: a menu item that changes the content
(i.e. name) of the first data item in the model. Something like this:
MenuItem {
text: "Item 123"
onClicked: {
myModel.setProperty(0,"name","Item 123") //this gives me error
}
}
I am able to create a menu in QML but I cannot find the correct way to make changes in the model.
Btw, what is a difference between setContextProperty and qmlRegisterType (only the first one is used in this example but many other examples include the second one).
That kind of model is really not suitable for modification. There is no way for the view to be notified of changes. A better option is to use a QAbstractItemModel: http://qt-project.org/doc/qt-4.8/declarative-modelviews-abstractitemmodel.html
A simpler way to use a QAbstractItemModel is via QStandardItemModel: http://qt-project.org/doc/qt-4.8/qstandarditemmodel.html
setContextProperty() adds a single named property to the context. qmlRegisterType() registers a QObject-derived type with the QML engine, allowing it to instantiate that type. For example, the QDeclarativeItem type is registered with the engine as "Item", which is how the engine knows what to create when Item {} appears in QML code.